.sf-account-page { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f4f6f8; color: #182735; font: 16px/1.5 system-ui, sans-serif; padding: 24px; box-sizing: border-box; }
.sf-account-card { width: min(100%, 440px); padding: 28px; background: #fff; border: 1px solid #d5dee7; border-radius: 14px; box-shadow: 0 8px 24px #18273512; box-sizing: border-box; }
.sf-account-entry { color: #182735; min-width: 0; }
.sf-account-entry *, .sf-account-entry *::before, .sf-account-entry *::after { box-sizing: border-box; }
.sf-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-account-heading h2 { font-size: 1.4rem; line-height: 1.3; margin: 0 0 18px; }
.sf-account-form { display: grid; gap: 14px; }
.sf-account-field { display: grid; gap: 5px; font-size: .9rem; font-weight: 600; }
.sf-account-field input { width: 100%; min-width: 0; border: 1px solid #7b8b9c; border-radius: 7px; padding: 10px 12px; background: #fff; color: #182735; font: inherit; font-size: 16px; min-height: 44px; }
.sf-account-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9rem; }
.sf-account-check input { width: 20px; height: 20px; flex: 0 0 20px; }
.sf-account-submit { width: 100%; min-height: 44px; border: 1px solid #185f96; border-radius: 7px; background: #185f96; color: #fff; padding: 10px 14px; cursor: pointer; font: inherit; font-weight: 600; }
.sf-account-actions { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; gap: 2px; }
.sf-account-link, .sf-account-x { min-height: 44px; border: 0; padding: 7px 2px; background: transparent; color: #185f96; text-align: left; font: inherit; font-size: .9rem; cursor: pointer; overflow-wrap: anywhere; }
.sf-account-x { font-size: 24px; min-width: 44px; text-align: center; align-self: flex-start; margin-top: -8px; }
.sf-account-entry button:disabled { opacity: .65; cursor: wait; }
.sf-account-entry :focus-visible { outline: 3px solid #1466ab; outline-offset: 3px; }
.sf-account-status { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.sf-account-status:empty { display: none; }
.sf-account-error { color: #a32121; }
@media (max-width: 480px) { .sf-account-page { padding: 12px; align-items: start; } .sf-account-card { margin-top: 12px; padding: 20px; } }

/* Customer portal geometry follows the published storefront, not workspace colors. */
#sfMainContent:is(.sf-account-content,.sf-status-content) {
  display:grid; gap:16px; min-width:0; overflow-wrap:anywhere;
  --sf-portal-radius:min(var(--sf-radius,16px),16px);
}
#sfMainContent:is(.sf-account-content,.sf-status-content) :is(.sf-preview-box,.sf-order-card) {
  min-width:0; border-radius:var(--sf-portal-radius); padding:16px;
  background:var(--ss-surface,var(--sf-card-solid)); color:var(--ss-body,var(--sf-fg));
  border-color:var(--ss-border,var(--sf-border));
}
#sfMainContent.sf-account-content :is(.sf-section-title,#sfAccountGifts > h2) {
  font-size:clamp(20px,2.2vw,28px)!important; line-height:1.2; margin:0 0 12px;
  color:var(--ss-heading,var(--sf-fg));
}
#sfMainContent.sf-account-content :is(.sf-section-title,#sfAccountGifts > h2)[data-sf-a11y-text] {
  font-size:var(--sf-a11y-text-size)!important;
}
#sfMainContent.sf-account-content .sf-order-list { gap:0; border:1px solid var(--ss-border,var(--sf-border)); border-radius:var(--sf-portal-radius); overflow:hidden; }
#sfMainContent.sf-account-content .sf-order-list > .sf-order-card { border:0; border-radius:0; padding:12px; }
#sfMainContent.sf-account-content .sf-order-list > .sf-order-card + .sf-order-card { border-top:1px solid var(--ss-border,var(--sf-border)); }
#sfMainContent.sf-account-content .sf-account-metrics .sf-order-card { overflow-wrap:anywhere; }
#sfMainContent.sf-account-content .sf-account-row { flex-wrap:wrap; }
#sfMainContent.sf-account-content .sf-account-row > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#sfMainContent.sf-account-content #sfAccountGifts { display:grid; gap:12px; }
#sfAccountGifts > [role=status]:empty { display:none; }
#sfMainContent.sf-account-content #sfAccountGifts :is(h2,p) { margin:0; }
#sfMainContent.sf-account-content #sfAccountGifts details { padding:12px; border-color:var(--ss-border,var(--sf-border)); border-radius:var(--ss-button-radius,var(--sf-radius-sm,8px)); }
#sfMainContent.sf-account-content #sfAccountGifts summary { min-height:32px; display:flex; align-items:center; gap:8px; list-style:none; }
#sfAccountGifts summary::-webkit-details-marker { display:none; }
#sfAccountGifts summary::before { content:'⌄'; flex:none; transition:transform .15s; }
#sfAccountGifts details[open] > summary::before { transform:rotate(180deg); }
#sfAccountGifts details[open] > summary { color:var(--ss-link,var(--sf-accent)); }
#sfMainContent.sf-account-content .sf-account-preference { display:flex; align-items:center; gap:8px; min-height:44px; }
#sfMainContent.sf-account-content input[type=checkbox] {
  appearance:auto; width:18px; height:18px; min-height:18px; min-width:18px; flex:0 0 18px; padding:0; margin:0;
  accent-color:var(--ss-primary,var(--sf-accent));
}
#sfMainContent:is(.sf-account-content,.sf-status-content) .sf-btn,
#sfMainContent.sf-account-content #sfAccountGifts button {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:8px 12px; border-radius:var(--ss-button-radius,var(--sf-radius-sm,8px));
  font:inherit; font-size:14px; font-weight:600; text-decoration:none;
  background:var(--ss-input,var(--sf-card-solid)); color:var(--ss-inputText,var(--sf-fg));
  border:1px solid var(--ss-border,var(--sf-border));
}
#sfMainContent.sf-account-content .sf-btn-primary {
  background:var(--ss-primary,var(--sf-accent)); color:var(--ss-primaryText,#fff); border-color:var(--ss-primaryBorder,var(--sf-accent));
}
#sfMainContent:is(.sf-account-content,.sf-status-content) .sf-btn:hover { background:var(--ss-secondaryHover,var(--sf-card-solid)); color:var(--ss-secondaryHoverText,var(--sf-fg)); }
#sfMainContent.sf-account-content .sf-btn-primary:hover { background:var(--ss-primaryHover,var(--sf-accent)); color:var(--ss-primaryHoverText,#fff); }
/* Generic input padding must not collapse the icon inside a visibility button. */
body .ep-password-peek-wrap > button.ep-password-peek-btn {
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:32px; height:32px; min-width:32px; min-height:32px; padding:0; border:0;
  border-radius:var(--ss-button-radius,8px); background:transparent;
  color:var(--ss-inputText,var(--sf-fg,#182735));
}
body .ep-password-peek-btn > .ep-password-peek-icon { flex:0 0 18px; width:18px; height:18px; }
body .ep-password-peek-wrap > button.ep-password-peek-btn:hover { background:var(--ss-surface,var(--sf-card)); color:var(--ss-body,var(--sf-fg)); }
@media(max-width:600px) {
  #sfMainContent:is(.sf-account-content,.sf-status-content) { gap:12px; }
  #sfMainContent.sf-account-content :is(input:not([type=checkbox]),select,textarea) { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { #sfAccountGifts summary::before { transition:none; } }