/* Welcome and onboarding share the app's typography and neutral controls. */
html[data-entry=welcome] body { background:var(--ds-surface); }
html[data-entry=welcome] body>main { display:none; }
html[data-entry=welcome] #welcome { display:block!important; }
.welcome-header { display:flex; justify-content:space-between; align-items:center; min-height:64px; padding:0 20px; border-bottom:1px solid var(--ds-line); }
.welcome-header nav,.welcome-actions { display:flex; align-items:center; gap:10px; }
.welcome-header button,.welcome-actions button { min-height:32px; padding:6px 10px; }
.welcome-name { font-size:var(--ds-heading); letter-spacing:0; }
.welcome-join { background:var(--ds-ink); color:var(--ds-on-ink); }
.welcome-join:hover { background:var(--ds-hover); color:var(--ds-on-ink); }
.welcome-content { max-width:1200px; padding:0 20px; margin:auto; }
.welcome-hero { display:grid; grid-template-columns:1.45fr 1fr; gap:80px; align-items:start; padding:80px 0 60px; }
.welcome-hero h1 { font-size:var(--ds-heading); line-height:1.2; letter-spacing:0; font-weight:400; margin:0 0 24px; }
.welcome-hero>div>p { font-size:var(--ds-text); line-height:1.8; margin:0 0 25px; color:var(--ds-muted); }
.welcome-how { list-style:none; margin:0; padding:0; }
.welcome-how li { display:flex; gap:20px; padding:15px 0; border-top:1px solid var(--ds-line); }
.welcome-how li>span { color:var(--ds-muted); font-size:var(--ds-caption); }
.welcome-how h2 { margin:0; font-size:var(--ds-text); }
.welcome-how p { margin:5px 0 0; color:var(--ds-muted); font-size:var(--ds-caption); line-height:1.6; }
.welcome-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:var(--ds-caption); }
.welcome-section-head h2 { font-size:var(--ds-caption); }
.welcome-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-height:200px; }
.welcome-piece { min-width:0; display:block; }
.welcome-piece img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition:filter 180ms; }
.welcome-piece:hover img { filter:brightness(.98); }
.welcome-piece .preview-brand { display:block; margin-top:10px; text-transform:uppercase; color:var(--ds-muted); font-size:var(--ds-caption); }
.welcome-piece h3 { margin:4px 0 0; font-size:var(--ds-text); line-height:1.6; }
.welcome-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:60px; padding:20px 0; border-top:1px solid var(--ds-line); font-size:var(--ds-caption); color:var(--ds-muted); }
.welcome-footer>div { display:flex; gap:20px; }
.setup-feed { display:block; font-size:var(--ds-caption); padding:8px 0; margin:5px 0; }
.onboarding-wizard { width:500px; padding:20px; }
.onboarding-eyebrow { display:flex; gap:20px; color:var(--ds-muted); font-size:var(--ds-caption); }
.onboarding-wizard>h2 { margin-top:24px; font-size:var(--ds-heading); line-height:1.35; letter-spacing:0; }
.onboarding-wizard>p { font-size:var(--ds-caption); margin:10px 0 25px; }
#onboarding-form { border:0; padding:0; margin:0; }
.onboarding-brands { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.onboarding-brands button { display:flex; justify-content:space-between; gap:5px; padding:10px; text-align:left; background:var(--ds-page); font-size:var(--ds-caption); }
.onboarding-brands button[aria-pressed=true] { background:var(--ds-tag); }
.onboarding-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:25px; }
.onboarding-controls button { padding:10px 12px; min-height:36px; }
#onboarding-next { background:var(--ds-ink); color:var(--ds-on-ink); margin-left:auto; }
#onboarding-step select { margin-top:var(--ds-space-1); }
.onboarding-optional { font-size:var(--ds-caption); color:var(--ds-muted); margin-top:10px; }
@media(max-width:760px) {
 .welcome-header { min-height:56px; padding:0 10px; }
 .welcome-header button { font-size:var(--ds-text); padding:5px 8px; }
 .welcome-content { padding:0 10px; }
 .welcome-hero { grid-template-columns:1fr; gap:35px; padding:45px 0 35px; }
 .welcome-hero h1 { font-size:var(--ds-heading); line-height:1.2; letter-spacing:0; }
 .welcome-how li { padding:12px 0; }
 .welcome-how li:first-child { border-top:0; padding-top:0; }
 .welcome-preview { gap:5px; }
 .welcome-piece .preview-brand { font-size:var(--ds-caption); }
 .welcome-piece h3 { display:none; }
 .welcome-footer { align-items:flex-start; margin-top:35px; gap:15px; }
 .welcome-footer>div { flex-wrap:wrap; justify-content:flex-end; gap:10px; }
 .onboarding-wizard { padding:15px; }
}
/* A quiet catalogue entrance, with the clothes doing the talking. */
.welcome-content { max-width:none; }
.welcome-hero { grid-template-columns:1fr 1fr; align-items:end; gap:30px; padding:55px 0 45px; }
.welcome-hero h1 { margin:0; font-size:var(--ds-heading); letter-spacing:0; line-height:1.12; }
.welcome-hero>div { justify-self:end; padding-right:30px; }
.welcome-hero>div>p { margin:0 0 20px; color:var(--ds-ink); }
.welcome-preview { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:25px; }
.welcome-piece { text-align:left; align-self:start; }
.welcome-piece img { background:var(--ds-page); }
.welcome-header { min-height:56px; }
.welcome-footer { margin-top:40px; }
#account-open { width:30px; justify-content:center; padding:5px!important; }

.onboarding-wizard .onboarding-brands { max-height:38vh; overflow:auto; }
@media(max-width:760px) {
 .welcome-hero { grid-template-columns:1fr; gap:20px; padding:35px 0; }
 .welcome-hero h1 { font-size:var(--ds-heading); letter-spacing:0; }
 .welcome-hero>div { justify-self:start; padding:0; }
 .welcome-hero>div>p { margin-bottom:15px; font-size:var(--ds-caption); }
 .welcome-preview { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; }
 .welcome-piece h3 { display:block; font-size:var(--ds-text); }
}
@media(prefers-reduced-motion:no-preference) { .welcome-piece img { animation:welcome-arrive .4s ease both; } @keyframes welcome-arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } } }
/* A small independent collection, rather than a store window. */
.welcome-header { border:0; padding:0 25px; min-height:64px; }
.welcome-header .welcome-join { color:var(--ds-ink); background:none; text-decoration:underline; text-underline-offset:4px; }
.welcome-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; padding:45px 0 50px; }
.welcome-kicker { margin:0 0 24px; color:var(--ds-muted); font-size:var(--ds-caption); }
.welcome-hero h1 { font-size:var(--ds-heading); line-height:1.15; letter-spacing:0; font-weight:400; }
.welcome-hero>p:not(.welcome-kicker) { font-size:var(--ds-text); line-height:1.9; margin:24px 0 20px; }
.welcome-actions { gap:18px; }
.welcome-actions .welcome-join { background:none; color:var(--ds-ink); border:1px solid var(--ds-ink); padding:7px 15px; }
.welcome-actions button:last-child { text-decoration:underline; text-underline-offset:4px; }
.welcome-members { min-height:16px; margin-top:22px; color:var(--ds-muted); font-size:var(--ds-caption); }
.welcome-preview { max-width:1000px; margin:auto; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:35px; }
.welcome-piece { align-self:center; padding:0; }
.welcome-piece:nth-child(4n+2) { padding-top:50px; }
.welcome-piece:nth-child(4n+3) { padding-bottom:40px; }
.welcome-piece img { aspect-ratio:4/5; }
.welcome-piece h3 { display:none; }
.welcome-piece .preview-brand { text-align:center; font-size:var(--ds-caption); margin-top:12px; }
.welcome-footer { border:0; padding:35px 5px 20px; margin-top:25px; }
@media(max-width:760px) {
 .welcome-header { min-height:56px; padding:0 10px; }
 .welcome-hero { padding:40px 0; }
 .welcome-hero h1 { font-size:var(--ds-heading); letter-spacing:0; }
 .welcome-kicker { font-size:var(--ds-caption); }
 .welcome-preview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 20px; padding:0 10px; }
 .welcome-piece:nth-child(4n+2) { padding-top:30px; }
 .welcome-piece:nth-child(4n+3) { padding-bottom:0; }
 .welcome-piece h3 { display:none; }
}
#welcome { min-height:100dvh; }
.welcome-content { min-height:calc(100dvh - 64px); display:flex; flex-direction:column; }
.welcome-hero { flex:1; justify-content:center; padding:45px 0 80px; }
.welcome-footer { margin-top:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#auth-dialog { width:470px; padding:18px; border:1px solid var(--ds-line); background:var(--ds-surface); color:var(--ds-ink); }
#auth-dialog::backdrop { background:var(--ds-backdrop); backdrop-filter:blur(3px); }
#auth-dialog .dialog-head { padding:0 0 14px; border-bottom:1px solid var(--ds-line); }
#auth-dialog .dialog-head h2 { font-size:var(--ds-heading); }
#auth-dialog button:hover { color:var(--ds-on-ink); }
#auth-form { display:flex; flex-direction:column; gap:15px; border:0; margin:20px 0 0; padding:0; }
#auth-dialog .auth-field { margin:0; position:relative; }
#auth-dialog input { display:block; width:100%; height:48px; padding:12px; margin:0; border:1px solid transparent; border-radius:3px; background:var(--ds-input); color:var(--ds-ink); font-size:var(--ds-text); }
#auth-dialog input::placeholder { color:var(--ds-muted); opacity:1; }
#auth-dialog input:focus { outline:1px solid var(--ds-muted); background:var(--ds-line); }
.auth-name-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
#auth-dialog .auth-password input { padding-right:45px; }
#auth-dialog .auth-password button { display:flex; align-items:center; justify-content:center; position:absolute; top:0; right:0; width:43px; height:48px; font-size:var(--ds-heading); color:var(--ds-muted); }
#auth-error:empty { display:none; }
#auth-dialog #auth-error { margin:0; color:var(--ds-error); font-size:var(--ds-caption); }
#auth-dialog .done { background:var(--ds-ink); color:var(--ds-on-ink); margin:0; border-radius:3px; height:43px; }
#auth-dialog .done:hover { background:var(--ds-ink); color:var(--ds-on-ink); }
#auth-dialog .auth-links { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:22px 0 3px; font-size:var(--ds-caption); color:var(--ds-muted); }
#auth-switch { color:var(--ds-ink); text-decoration:underline; text-underline-offset:3px; }
#auth-forgot { flex-basis:100%; margin-top:8px; font-size:var(--ds-caption); }
@media(max-width:520px) { #auth-dialog { padding:15px; } .auth-name-row { gap:10px; } .welcome-content { min-height:calc(100dvh - 56px); } }

.welcome-hero > .welcome-actions { padding:0; }
#auth-dialog button:hover { color:var(--ds-accent); }
#auth-dialog .done:hover { color:var(--ds-on-ink); }

.onboarding-brands .ds-chip { min-height:var(--ds-chip-height); padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x); gap:var(--ds-chip-gap); font-size:var(--ds-chip-text); line-height:var(--ds-chip-leading); background:var(--ds-tag); }
.onboarding-brands .ds-chip[aria-pressed=true] { background:var(--ds-ink); color:var(--ds-on-ink); }

.welcome-actions .welcome-browse{padding:7px 0;text-decoration:underline;text-underline-offset:4px}.welcome-edits{padding:20px 0 35px;max-width:1000px;width:100%;margin:auto}.welcome-edits h2{font-size:var(--ds-heading);font-weight:400}.welcome-edits>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0}.welcome-edits a{display:block;text-underline-offset:4px}.welcome-edits>div a{border-top:1px solid var(--ds-line);padding:15px 0}.welcome-edits>a{font-size:var(--ds-caption)}@media(max-width:760px){.welcome-edits>div{grid-template-columns:1fr;gap:5px}}

html[data-entry=shop] #welcome{display:none}