/* PLT-GOOGLE-LOGIN-BUILD-01A — the Google button slot and the google-complete screens (auth pages only; loaded only with an
   enabled slot or the google-complete page). */
.g-auth { margin: 18px 0 6px; }
/* PLT-GOOGLE-LOCAL-INTEGRATION-PROOF-01 — a FIXED box. For one frame after Google inserts its button the inserted nodes are
   taller than the final button (its frame is not sized yet); with only a minimum height the whole popup grew by about
   40 px and shrank back — a visible flash of the popup. The box never changes size now, whatever is inside it. */
.g-auth__button { display: flex; justify-content: center; align-items: flex-start; height: 44px; overflow: hidden; }
.g-auth__status { margin: 10px 0 0; font-size: 14px; color: var(--color-danger, #b42318); text-align: center; }
.g-auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 13px; color: var(--color-muted, #667085); }
.g-auth__divider::before, .g-auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-border, #e4e7ec); }
.g-complete__form, .g-complete form { margin-top: 20px; }
@media (max-width: 720px) {
    .g-auth { margin-top: 14px; }
}
/* PLT-GOOGLE-CONTINUE-WELCOME-POLISH-02 (Mark) — the continue screens speak the grammar of the existing account focus
   steps (name / password): the shared pill → title → intro rhythm and `.pw-form` fields come from v3-auth.css; only what
   is specific to these screens is styled here. Scoped to .g-complete; no shared rule is changed. */
.g-complete .pw-form { margin-top: 16px; max-width: 420px; }
.g-complete .sub { max-width: 46ch; }
/* the address Google confirmed: read-only, exactly like the account field of the password step */
.g-complete .g-complete__fixed { background: var(--paper, #f7f7f5); color: var(--muted, #6b7280); cursor: default; overflow: hidden; text-overflow: ellipsis; }
/* The ONE optional newsletter choice as a calm option row: the whole row is the click target; the title is the label, the
   description and a small note follow (server-held copy). Unchecked by default; a recorded choice (resumed registration)
   is shown disabled. */
.g-complete__check {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px;
    border: 1px solid var(--d-field-border, rgba(23, 29, 24, 0.12)); border-radius: 12px; background: #fff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(23, 29, 24, 0.04);
    transition: border-color .15s ease, background-color .15s ease;
}
.g-complete__check:hover { border-color: var(--d-field-border-hover, rgba(23, 29, 24, 0.26)); }
.g-complete__check:has(input:checked) { border-color: var(--green, #2f8f27); background: var(--green-softer, #f1f9ec); }
.g-complete__check:has(input:focus-visible) { outline: 3px solid var(--green-soft, #e4f4dc); outline-offset: 2px; }
.g-complete__check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green, #2f8f27); cursor: inherit; }
.g-complete__check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-complete__check-label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink, #171d18); }
/* PLT-GOOGLE-NEWSLETTER-COPY-02B — the description line between the title and the small note */
.g-complete__check-desc { font-size: 14px; line-height: 1.4; color: var(--ink, #171d18); }
.g-complete__check-hint { font-size: 13px; line-height: 1.4; color: var(--muted, #566159); }
.g-complete__check--frozen { cursor: default; background: var(--paper, #f7f7f5); }
.g-complete__check--frozen:hover { border-color: var(--d-field-border, rgba(23, 29, 24, 0.12)); }
/* the one primary action: label + arrow */
.g-complete__submit { justify-content: center; gap: 8px; }
.g-complete__submit .ico { width: 18px; height: 18px; }
/* PLT-GOOGLE-BRANDING-PREVIEW-CLOSEOUT-02A (Mark) — "Connect Google" shows Google's "G", so this ONE button follows Google's
   Sign in with Google branding guidelines for a custom button (developers.google.com/identity/branding-guidelines): the
   LIGHT theme — fill #FFFFFF, 1px inside stroke #747775, label #1F1F1F — with the standard-colour "G" on white in front
   of the label, 10px apart. The "G" is Google's own pre-approved icon file (byte-identical to the download bundle), shown
   at its own size: no rule resizes the 40px tile, and the 20px window shows its centre — the "G" on its white field.
   It is never recoloured, filtered, blended or stretched (on small phones the storefront scales the whole page content
   by 5%; the button and its mark scale together, in proportion). Only this button; the site's primary button is unchanged. */
/* (.btn in the selector: the sitewide button rule sets its own 8px gap with a higher specificity) */
.g-complete .btn.g-complete__google { gap: 10px; background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; }
.g-complete .btn.g-complete__google:hover { background: #fff; box-shadow: inset 0 0 0 1px #747775, 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.g-complete .g-complete__g { flex: 0 0 auto; display: block; width: 20px; height: 20px; overflow: hidden; }
.g-complete .g-complete__g img { display: block; width: 40px; height: 40px; max-width: none; margin: -10px 0 0 -10px; }
.g-complete__benefit { margin: 14px 0 0; max-width: 420px; font-size: 14px; line-height: 1.45; color: var(--muted, #566159); }
.g-complete__exit { margin-top: 12px; }
/* message screens: one statement, one clear way on */
.g-complete__action { margin: 22px 0 0; max-width: 420px; }
.g-complete__action .btn { justify-content: center; text-decoration: none; }
.g-complete .pw-help { margin-top: 22px; }
@media (max-width: 720px) {
    .g-complete__check-label { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .g-complete__check { transition: none; }
}
/* PLT-GOOGLE-LOGIN-PHASE3-EMAIL-CODE-01 — six-digit code field (one accessible text input, large tabular digits). */
.g-code__input { font-size: 28px; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding: 12px 10px; }
.g-code__input[readonly] { opacity: 0.75; }
.g-code__status { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; color: var(--color-muted, #667085); text-align: center; }
.g-code__resend { margin-top: 10px; text-align: center; }
.g-code__resend-btn { background: none; border: 0; color: var(--color-link, #1b6b2f); font-weight: 600; cursor: pointer; padding: 6px; }
.g-code__resend-btn[disabled] { color: var(--color-muted, #667085); cursor: default; }
/* PLT-GOOGLE-CODE-DIRECT-ENTRY-01A — "Check your email": calmer hierarchy of the one code screen (existing auth styles;
   the sent line reuses .login-notice, problems reuse .login-error). */
.g-complete[data-google-screen="code"] h1 { margin-bottom: 14px; }
.g-code__sent, .g-code__maybe, .g-code__problem { line-height: 1.5; overflow-wrap: anywhere; }
.g-code__sent strong, .g-code__maybe strong { font-weight: 700; }
.g-code__maybe { background: #fff8e6; border-color: #f1dfb3; color: #6b4e00; }
.g-code__benefit { margin: 12px 2px 0; font-size: 14px; line-height: 1.45; color: var(--muted, #566159); }
.g-code__notice { margin-top: 14px; }
.g-complete form.g-code { margin-top: 22px; gap: 14px; }
.g-code__hint { text-align: center; }
.g-code__status:empty { display: none; }
.g-complete form.g-code__resend { margin-top: 14px; }
.g-code__alt { margin-top: 10px; text-align: center; }
@media (max-width: 720px) {
    .g-code__input { font-size: 26px; letter-spacing: 0.3em; }
    .g-code__benefit { font-size: 13.5px; }
}
/* PLT-GOOGLE-LOGIN-TABS-PLACEMENT-01B — sign-in surfaces: the Google zone sits UNDER the active sign-in method ("or" first,
   then the button). The sign-up surfaces keep the default slot (button first). */
.g-auth--below { margin: 16px 0 0; }
.g-auth--below .g-auth__divider { margin: 0 0 14px; }
.g-auth--below .g-auth__status { margin-top: 8px; }

/* PLT-GOOGLE-LOCAL-INTEGRATION-PROOF-01 — Google draws its button in visible stages inside its own frame. While it settles
   the button is invisible (its place stays reserved, it cannot be clicked); then it is shown once, with a short fade.
   Opacity only, no movement; no fade for visitors who prefer reduced motion. */
.g-auth__button > * { transition: opacity .18s ease-out; }
.g-auth__button--settling > * { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .g-auth__button > * { transition: none; }
}

/* PLT-GOOGLE-BUTTON-BLUE-EN-FAST-01 — "Continuing with Google…": from the moment Google hands over its answer until the next
   page is there, the block that holds the Google zone (the popup body, or the block of the page the zone sits in) shows
   that one line instead of the sign-in form. Presentation only, and nothing moves: everything else keeps its place and
   is merely not shown, the line lies over the zone itself, and the script moves the zone to the middle of the block.
   The script takes the two classes away again on any refusal, error or return without an answer. The small ring is the
   storefront's own loading ring (its turning is defined in v3-storefront.css); it stands still for reduced motion. */
.g-auth-scope--progress > :not(.g-auth), .g-auth--progress > :not(.g-auth__progress) { visibility: hidden; }
.g-auth--progress { position: relative; }
.g-auth__progress { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink, #171d18); text-align: center; outline: none; }
.g-auth__progress::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: checkoutSpinner .75s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .g-auth__progress::before { animation: none; }
}