/* Anonymous account forms: use the same palette as the storefront. */
.account-page {
  --border:var(--line);
  padding-block:48px 64px;
  background:var(--surface-alt);
  color:var(--text);
}
[data-theme=dark] .account-page {background:var(--surface-alt)}
.account-page .account-container {max-width:1184px}
.account-page .account-heading {gap:16px;margin-bottom:32px}
.account-page .account-heading-mark {background:var(--accent);border-radius:0}
.account-page .account-heading .eyebrow {color:var(--accent-text)}
.account-page .account-heading h1 {font-size:clamp(30px,3vw,40px);line-height:1.2;color:var(--text)}
.account-page .account-heading .lead {margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted)}
.account-page .account-grid {grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
.account-page .account-card,
.account-page .account-help-card {
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:none;
  color:var(--text);
}
.account-page .account-card {padding:28px}
.account-page .account-card-head {align-items:center;gap:14px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.account-page .account-card-icon {flex-basis:44px;width:44px;height:44px;border:0;border-radius:8px;background:var(--surface-alt);color:var(--accent-text)}
.account-page .account-card-head .account-kicker {display:none}
.account-page .account-card-head h2 {font-size:24px;line-height:1.25;color:var(--text)}
.account-page .account-card-head p:last-child {font-size:14px;line-height:1.5;color:var(--muted)}
.account-page .account-form {gap:18px}
.account-page .register-form {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.account-page .form-field {gap:8px;align-content:start}
.account-page .form-field-full {grid-column:1/-1}
.account-page .form-field>label {font-size:14px;font-weight:600;color:var(--text)}
.account-page .input-shell {height:48px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.account-page .input-shell:focus-within {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.account-page .shop-form .input-shell input {
  flex:1 1 0%;width:0;min-width:0;height:46px;margin:0;padding:0 12px;
  font:inherit;font-size:16px;color:var(--text);
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;outline:0;
}
.account-page .input-shell {overflow:hidden}
.account-page .input-shell:has(input:not(:placeholder-shown):valid),
.account-page .input-shell:has(input:not(:placeholder-shown):invalid) {border-color:var(--line)}
.account-page .input-shell:has(input:user-invalid) {border-color:var(--danger,#b43d35)}
.account-page .input-shell:focus-within {border-color:var(--accent)!important}
.account-page .input-shell input::placeholder {color:var(--muted);opacity:1;font-size:14px}
.account-page .shop-form .input-shell input:autofill {box-shadow:0 0 0 100px var(--surface) inset!important;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
.account-page .shop-form .input-shell input:-webkit-autofill {box-shadow:0 0 0 100px var(--surface) inset!important;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
.account-page .input-shell>svg,
.account-page .password-field button,
.account-page .phone-prefix {color:var(--muted)}
.account-page .password-field button {height:46px}
.account-page .field-hint {display:none}
.account-page .password-match:empty {display:none}
.account-page .form-inline {min-height:24px;font-size:14px;flex-wrap:wrap}
.account-page .form-inline>a,
.account-page .legal-consents a {color:var(--accent-text);text-underline-offset:3px}
.account-page .account-submit {
  min-height:48px;
  padding:12px 18px;
  border:1px solid var(--accent);
  border-radius:6px;
  background:var(--accent);
  color:var(--accent-ink)!important;
  box-shadow:none;
}
.account-page .account-submit:hover {background:color-mix(in srgb,var(--accent) 88%,var(--text));border-color:transparent}
.account-page :is(a,button,summary):focus-visible {outline:2px solid var(--accent);outline-offset:4px}
.account-page .account-benefits {grid-template-columns:1fr;gap:10px;margin-top:24px;padding:20px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.account-page .account-benefits:before {display:none}
.account-page .account-benefits span::first-letter {color:var(--success)}
.account-page .password-guidance {padding:14px;border-radius:6px;background:var(--surface-alt)}
.account-page .password-guidance>p {margin-bottom:10px;color:var(--muted);font-size:12px}
.account-page .password-rules {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;font-size:12px}
.account-page .password-rules li {color:var(--muted)}
.account-page .password-rules li:before {content:'\2713';border-color:var(--line)}
.account-page .password-rules li.valid {color:var(--success)}
.account-page .password-rules li.valid:before {background:var(--success);border-color:var(--success);color:var(--surface)}
.account-page .legal-consents {gap:14px;padding-top:18px;border-color:var(--line);font-size:13px}
.account-page .shop-check {align-items:flex-start!important}
.account-page .shop-check input[type=checkbox] {border-radius:3px;border-color:var(--muted);background:var(--surface)}
.account-page .shop-check input[type=checkbox]:checked {background:var(--accent);border-color:var(--accent)}
.account-page .shop-check input[type=checkbox]::before {border-color:var(--accent-ink)}
.account-page .shop-check small {color:var(--muted);font-size:12px;line-height:1.6}
.account-page .marketing-check {padding-top:0!important;border-top:0!important}
.account-page .account-help-grid {gap:24px;margin-top:24px}
.account-page .account-help-card summary {min-height:60px;font-size:14px}
.account-page .help-icon {background:var(--surface-alt);color:var(--accent-text);border-radius:6px}
.account-page .account-help-content {border-color:var(--line)}
.account-page .account-help-content>p {color:var(--muted);line-height:1.6}
.account-page .account-secondary-button {height:48px;border-radius:6px;border-color:var(--line);color:var(--accent-text)}
.account-page .account-secondary-button:hover {background:var(--surface-alt)}
.account-page .account-help-card {scroll-margin-top:110px}
@media(max-width:1000px) {
  .account-page .account-card {padding:22px}
  .account-page .account-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .account-page .register-form {grid-template-columns:1fr}
}
@media(max-width:760px) {
  .account-page {padding-block:28px 40px}
  .account-page .account-heading {margin-bottom:24px}
  .account-page .account-grid,.account-page .account-help-grid {grid-template-columns:1fr;gap:16px}
  .account-page .account-help-grid {margin-top:16px}
  .account-page .register-form {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px) {
  .account-page .account-card {padding:20px}
  .account-page .account-card-head {gap:12px;padding-bottom:18px;margin-bottom:20px}
  .account-page .account-card-head h2 {font-size:22px}
  .account-page .account-heading .lead {font-size:14px}
  .account-page .register-form {grid-template-columns:1fr}
  .account-page .help-form {grid-template-columns:1fr}
  .account-page .account-secondary-button {width:100%}
}