/* Clothing uses the shared foundations in design-system.css. */
:root { --ds-header:40px; --muted:var(--ds-muted); --rule:var(--ds-line); --wash:var(--ds-wash); --accent:var(--ds-accent); }
button { border:0; background:none; padding:0; cursor:pointer; }
a { text-decoration:none; }
button, a { -webkit-tap-highlight-color:transparent; transition:color var(--ds-motion),background var(--ds-motion); }
button:hover, a:hover { color:var(--accent); }
button:active { opacity:.7; }
main { margin:0 var(--ds-gutter); padding:calc(var(--ds-header) + var(--ds-space-2)) 0 20px; }
h1,h2,h3 { font-size:var(--ds-heading); line-height:var(--ds-leading); margin:0; }
.icon { width:var(--ds-icon-size); height:var(--ds-icon-size); display:inline-block; vertical-align:middle; flex-shrink:0; fill:currentColor; stroke:none; }
.muted { color:var(--muted); }

/* Fixed navigation has the same position before and after scrolling. */
.top { position:fixed; inset:0 var(--ds-gutter) auto; height:var(--ds-header); z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0; margin:0; border-bottom:0; background:var(--ds-page); }
.top nav,.top-actions { display:flex; align-items:center; gap:10px; }
.top nav :is(button,a[data-view]),.top-actions button { font-size:var(--ds-nav); display:inline-flex; align-items:center; gap:7px; min-height:var(--ds-control); padding:5px 8px; white-space:nowrap; }
.top nav .active { background:var(--wash); }
.top nav .active .icon { color:var(--accent); }
.top nav :is(button,a[data-view]) span { color:var(--muted); font-size:var(--ds-caption); font-variant-numeric:tabular-nums; }
.top-actions button:last-child { padding-right:0; }

.layout { display:grid; grid-template-columns:155px minmax(0,1fr); gap:10px; }
.following { position:sticky; top:calc(var(--ds-header) + var(--ds-space-2)); align-self:start; padding-right:10px; max-height:calc(100dvh - var(--ds-header) - var(--ds-space-2) - var(--ds-space-3)); overflow:auto; scrollbar-width:thin; }
.label { display:flex; justify-content:space-between; gap:10px; margin:0 0 10px; font-size:var(--ds-caption); line-height:18px; color:var(--muted); text-transform:uppercase; letter-spacing:0; }
.brand { display:flex; align-items:center; justify-content:space-between; width:100%; gap:7px; padding:1px 0; min-height:20px; text-align:left; line-height:18px; }
.brand span { font-size:var(--ds-caption); color:var(--muted); font-variant-numeric:tabular-nums; }
.brand.selected { color:var(--accent); }
.brand.selected::before { content:''; width:4px; height:4px; flex-shrink:0; background:currentColor; }
.brand.selected span { margin-left:auto; }
.add-brand { display:inline-flex; align-items:center; gap:7px; padding:0; margin-top:10px; font-size:var(--ds-caption); color:var(--muted); line-height:22px; }
.market-heading { margin-top:20px; }
.feed-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; padding-bottom:7px; border-bottom:1px solid var(--rule); }
.feed-tools>div,.feed-tools>button { display:flex; align-items:center; gap:10px; }
#result-count { font-size:var(--ds-caption); color:var(--muted); }
#filter-count:empty { display:none; }
#active-filter { display:flex; flex-wrap:wrap; gap:5px; padding:10px 0 0; }
#active-filter:empty { display:none; }
.pill { color:var(--accent); }
.pill .icon { width:var(--ds-icon-size); height:var(--ds-icon-size); }

/* One portrait ratio at every width, without an inset image panel. */
:is(#items,.product-grid) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 10px; align-items:start; padding-top:10px; }
.item { position:relative; min-width:0; }
.picture { display:block; width:100%; aspect-ratio:4/5; overflow:hidden; }
.picture img { display:block; width:100%; height:100%; padding:0; object-fit:cover; object-position:50% 45%; transition:transform 450ms cubic-bezier(.2,.7,.2,1); }
.picture:hover img { transform:scale(1.035); }
.item-actions { position:absolute; top:10px; bottom:auto; right:10px; display:flex; gap:5px; }
.save,.remove { display:flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--muted); background:var(--ds-overlay); }
.save:hover,.remove:hover,.save[aria-pressed=true] { color:var(--accent); background:var(--ds-surface); }
.save .icon,.remove .icon { width:var(--ds-icon-size); height:var(--ds-icon-size); }
.product-info { padding-top:10px; display:flex; flex-direction:column; gap:4px; }
.item-brand { color:var(--muted); font-size:var(--ds-caption); line-height:16px; text-transform:uppercase; letter-spacing:0; }
.seller { font-size:inherit; }
.product-heading { display:flex; align-items:baseline; gap:7px; min-width:0; }
.product-heading h3 { font-size:var(--ds-text); line-height:18px; min-width:0; }
.product-size b { font:inherit; }
.product-size:hover { border-color:var(--accent); background:var(--wash); }
.product-purchase { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; line-height:18px; }
.price { font-size:var(--ds-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.colour { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:var(--ds-caption); }
.swatch { display:inline-block; width:8px; height:8px; border-radius:50%; border:1px solid #00000020; flex-shrink:0; }
#feed-sentinel { min-height:1px; padding-top:20px; text-align:center; }
#load-more { padding:10px; font-size:var(--ds-caption); color:var(--muted); }
[hidden] { display:none!important; }
.empty { grid-column:1/-1; padding:40px 10px; line-height:1.8; text-align:center; }
.empty button { display:block; margin:10px auto 0; text-decoration:underline; text-underline-offset:3px; }
.empty-source { display:block; margin-top:10px; }

/* The same typography and 10px interior spacing in every sheet. */
dialog { border:1px solid var(--rule); width:430px; max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:10px; color:var(--ds-ink); background:var(--ds-surface); }
dialog::backdrop { background:var(--ds-backdrop); backdrop-filter:blur(5px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dialog-head h2 { font-size:var(--ds-heading); text-transform:none; }
.dialog-head button { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; }
.dialog-head button:hover { background:var(--wash); }
dialog p { font-size:var(--ds-caption); line-height:1.6; }
#brand-options,#market-options { margin-top:10px; }
.brand-option { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 0; border-bottom:1px solid var(--rule); text-align:left; }
.brand-option span { display:flex; align-items:center; gap:7px; font-size:var(--ds-caption); color:var(--muted); white-space:nowrap; }
.brand-option[aria-pressed=true] span { color:var(--accent); }
form { border-top:1px solid var(--rule); padding-top:10px; margin-top:10px; }
label { display:block; margin-bottom:5px; font-size:var(--ds-caption); color:var(--muted); }
.input-row { display:flex; border:1px solid var(--rule); }
.input-row input { width:100%; min-width:0; border:0; padding:10px; background:none; }
.input-row button { display:inline-flex; align-items:center; gap:7px; padding:10px; white-space:nowrap; }
.done { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; margin-top:10px; width:100%; background:var(--ds-ink); color:var(--ds-on-ink); font-size:var(--ds-text); }
.done:hover { background:var(--ds-hover); color:var(--ds-on-ink); }
.filter-dialog { position:fixed; inset:10px 10px 10px auto; margin:0; width:360px; height:calc(100dvh - 20px); max-height:none; padding:0; border:0; }
.filter-dialog[open] { display:flex; flex-direction:column; }
.filter-dialog .dialog-head { padding:10px; border-bottom:1px solid var(--rule); }
.filter-body { padding:10px; flex:1; overflow:auto; }
.chips { display:flex; flex-wrap:wrap; gap:var(--ds-chip-gap); margin-bottom:20px; }
.chip.on { background:var(--ds-ink); color:var(--ds-on-ink); }
#reset,#restore-hidden,#review-feedback { display:block; padding:7px 0; font-size:var(--ds-caption); color:var(--muted); }
.filter-dialog .done { margin:0; padding:12px 10px; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.profile-grid label { margin:0; }
.profile-grid input { display:block; width:100%; padding:10px; border:1px solid var(--rule); margin-top:5px; background:none; }
#profile-form,#dismiss-form { border:0; padding:0; }
.profile-note { color:var(--muted); margin:10px 0; }
.feedback-sheet { position:fixed; inset:auto 10px 10px auto; margin:0; overflow:auto; }
.dismiss-preview { display:flex; align-items:center; gap:10px; margin:10px 0; }
.dismiss-preview img { width:65px; height:80px; object-fit:cover; }
.dismiss-preview p { margin:5px 0 0; font-size:var(--ds-text); }
.reason-options { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 20px; }
.reason-button[aria-pressed=true] { background:var(--ds-ink); color:var(--ds-on-ink); }
textarea { width:100%; min-height:75px; padding:10px; border:1px solid var(--rule); resize:vertical; background:none; }
.sheet-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.sheet-actions button { padding:10px; }
.sheet-actions button[type=submit] { background:var(--ds-ink); color:var(--ds-on-ink); }
.sheet-actions button:disabled { opacity:.35; cursor:default; }
#size-dialog { width:350px; }
.size-product { margin:10px 0; font-size:var(--ds-text); }
.size-result { display:flex; align-items:baseline; gap:10px; margin:10px 0; }
.size-result>span:first-child { font-size:var(--ds-size-display); line-height:24px; color:var(--accent); }
.size-confidence,.size-explanation { font-size:var(--ds-caption); color:var(--muted); }
.size-key-measurements { margin:10px 0; }
.measurement-line { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--rule); font-size:var(--ds-caption); }
.measurement-line dt { color:var(--muted); }
.measurement-line dd { margin:0; text-align:right; }
.retailer-size { justify-content:space-between; padding:10px 0 0; margin-top:10px; border-top:1px solid var(--rule); background:none; color:inherit; font-size:var(--ds-caption); }
.retailer-size:hover { color:var(--accent); background:none; }
.feedback-record { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:var(--ds-caption); }
.feedback-record > div { flex:1 1 180px; }
.feedback-record button { white-space:nowrap; }
.feedback-record p { margin:0 0 5px; font-size:var(--ds-text); }
.feedback-record button { font-size:var(--ds-caption); text-decoration:underline; }
.feedback-note { color:var(--muted); white-space:pre-wrap; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
dialog[open] { animation:arrive 160ms ease-out; }
@keyframes arrive { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(min-width:1700px) { :is(#items,.product-grid) { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1000px) { :is(#items,.product-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .layout { grid-template-columns:1fr; gap:20px; }
  .following { position:static; padding:0; max-height:none; overflow:visible; }
  #following,#marketplaces { display:flex; flex-wrap:wrap; gap:5px 15px; }
  .brand { width:auto; gap:7px; }
  .following>.label { justify-content:flex-start; }
  .market-heading { margin-top:15px; }
  .add-brand { margin-top:7px; }
  .item-actions { top:5px; bottom:auto; right:5px; }
  .product-heading { align-items:flex-start; gap:5px; }
  .product-info { padding-top:7px; }
  .product-purchase { gap:4px 7px; }
}
@media(max-width:760px) {
  .top { flex-wrap:wrap; align-content:center; justify-content:space-between; row-gap:5px; }
  .top nav { width:100%; gap:5px; }
  .top-actions { width:100%; justify-content:flex-end; }
  .top nav :is(button,a[data-view]),.top-actions button { padding:3px 5px; }
}

/* Category is on the image; brand and size are separate boxes above the name. */
.item-media { position:relative; }
.product-badge .product-size { min-width:20px; min-height:18px; padding:0 0 0 8px; border:0; border-left:1px solid var(--ds-line); background:none; }
.product-badge .product-size:hover { color:var(--ds-ink); }
.product-info h3 { font-size:var(--ds-text); line-height:18px; }
.product-info .price { display:block; }
@media(max-width:760px) { .product-badge { top:5px; left:5px; max-width:calc(100% - 85px); padding:3px 5px; gap:5px; } .product-badge .product-size { padding-left:5px; } }

@media(min-width:761px) { .item-actions { top:10px; bottom:auto; } }

.product-tags .product-size:hover { border-color:var(--accent); background:var(--wash); }

/* Compact neutral labels; information controls belong in the source rail. */
.product-tags .product-size:hover { background:var(--ds-tag-hover); color:var(--ds-ink); }
.sidebar-tools { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:20px; gap:5px; }
.sidebar-tools button { font-size:var(--ds-nav); line-height:20px; }
.following .label button { display:inline-flex; align-items:center; gap:7px; font-size:var(--ds-caption); line-height:18px; text-transform:uppercase; color:var(--ds-muted); }
.following .label .icon { width:var(--ds-icon-size); height:var(--ds-icon-size); }
.feed :is(#items,.product-grid) { padding-top:0; }
#active-filter:not(:empty) { padding-top:0; padding-bottom:10px; }
@media(max-width:760px) { .sidebar-tools { flex-direction:row; margin-bottom:15px; } .top nav { width:auto; } .top-actions { width:auto; margin-left:auto; } }

/* A quiet, stable toolbar and a compact source rail. */
.top nav,.top-actions { gap:4px; }
.top nav :is(button,a[data-view]),.top-actions button { min-height:28px; padding:4px 8px; }
.top-actions #filters { padding:4px 8px; background:var(--ds-tag); }
.top-actions #filters:hover { background:var(--ds-tag-hover); }
.following { display:flex; flex-direction:column; height:calc(100dvh - var(--ds-header) - var(--ds-space-2) - var(--ds-space-3)); }
.following>* { flex-shrink:0; }
.sidebar-tools { order:10; margin: auto 0 0; padding-top:20px; }
#brand-form { margin:10px 0; border:0; padding:0; }
#brand-notice:empty { display:none; }
#brand-options { display:grid; grid-template-columns:1fr 1fr; gap:5px; max-height:45dvh; overflow:auto; }
#brand-options .brand-option { padding:7px 8px; border:0; background:var(--ds-page); font-size:var(--ds-caption); }
#brand-options .brand-option[aria-pressed=true] { background:var(--ds-tag); }
#brand-options .brand-option span { color:inherit; }
#brand-form button:disabled { opacity:.5; cursor:wait; }
.unit-toggle { display:flex; gap:4px; margin-top:10px; }
.unit-toggle button[aria-pressed=true] { background:var(--ds-tag); }
@media(max-width:760px) { .following { height:auto; } .sidebar-tools { margin-top:15px; padding:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.brand.selected { justify-content:flex-start; }
/* MVP controls reuse the same compact rhythm. */
#settings-form,#auth-form { border:0; margin-top:10px; padding-top:0; }
#auth-form input { display:block; width:100%; padding:10px; border:1px solid var(--rule); margin-top:5px; background:none; }
#auth-form label { margin-bottom:10px; }
.auth-links,.data-actions { display:flex; flex-wrap:wrap; gap:10px 15px; margin-top:15px; font-size:var(--ds-caption); }
.data-actions { padding-top:10px; border-top:1px solid var(--rule); }
.import-label { color:inherit; cursor:pointer; margin:0; }
.brand-option-name { display:flex!important; flex-direction:column; align-items:flex-start!important; gap:0!important; white-space:normal!important; }
.brand-option-name small { font:inherit; color:var(--muted); font-size:var(--ds-caption); }
.brand-option-name small:empty { display:none; }
.onboarding-actions { display:grid; gap:5px; margin-top:15px; }
.onboarding-actions button { padding:10px; text-align:left; background:var(--ds-page); }
.size-basis { font-size:var(--ds-caption); opacity:.65; margin-left:4px; text-transform:lowercase; }
.availability { font-size:var(--ds-caption); color:var(--muted); }
#toast { position:fixed; z-index:30; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; width:max-content; padding:10px 15px; background:var(--ds-ink); color:var(--ds-on-ink); max-width:calc(100vw - 40px); box-shadow:0 3px 16px #0001; }
#toast button { white-space:nowrap; color:var(--ds-on-ink); text-decoration:underline; text-underline-offset:3px; }
.save { transition:background 140ms,color 140ms,transform 140ms; }
.save:hover { transform:translateY(-1px); }
.save.saved-pop .icon { animation:save-pop 260ms ease-out; }
@keyframes save-pop { 0% {transform:scale(.7)} 60% {transform:scale(1.22)} 100% {transform:scale(1)} }
@media(max-width:760px) {
 :root { --ds-header:56px; --ds-gutter:10px; }
 main { padding-top:calc(var(--ds-header) + var(--ds-space-2)); }
 .layout { gap:10px; }
 .following { display:none; }
 .top { gap:5px; flex-wrap:nowrap; }
 .top nav { flex-wrap:nowrap; gap:0; }
 .top nav :is(button,a[data-view]) { padding:4px 6px; min-height:32px; }
 .top-actions { gap:4px; }
 .top-actions button { min-height:32px; padding:4px 6px; }
 .top-actions #mobile-settings { display:inline-flex; }
 :is(#items,.product-grid) { gap:20px 10px; }
 .item-actions { gap:4px; }
 .save,.remove { width:32px; height:32px; }
 .product-info h3,.price { font-size:var(--ds-text); line-height:16px; }
 .brand-box { max-width:calc(100% - 45px); }
 .seller { display:none; }
 dialog { max-width:calc(100vw - 20px); }
}
@media(min-width:761px) { #mobile-settings { display:none; } }
/* Pared takes a quieter, collection-led direction from Are.na. */
/* Colors inherit the shared theme. */
.wordmark { font-size:var(--ds-text); padding-right:15px; letter-spacing:-.3px; }
.top nav .active .icon { color:inherit; }
.picture:hover img { transform:scale(1.012); }
.product-info { gap:4px; }
#settings-dialog .checkbox-label { display:flex; align-items:center; gap:7px; margin:10px 0 20px; }
#settings-dialog .checkbox-label input { margin:0; accent-color:var(--ds-accent); }
#settings-form>label:not(.checkbox-label) { margin-top:10px; }
.top nav .active { background:var(--ds-wash); }
@media(max-width:760px) { .wordmark { padding-right:5px; font-size:var(--ds-text); } }
.commission-note { font-size:var(--ds-caption); line-height:15px; color:var(--muted); margin-top:10px; }
/* Mobile keeps navigation above and filtering within thumb reach. */
@media(max-width:760px) {
 .top { justify-content:space-between; align-content:center; }
 .top nav { gap:3px; }
 .top nav .wordmark { margin-right:5px; padding:0; }
 .top nav :is(button,a[data-view]) { gap:4px; padding:4px 7px; min-height:32px; }
 .top-actions #mobile-settings { width:32px; height:32px; justify-content:center; font-size:var(--ds-heading); padding:0; }
 .top-actions #filters { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); min-height:40px; padding:10px 18px; background:var(--ds-ink); color:var(--ds-on-ink); gap:10px; box-shadow:0 3px 14px #0002; z-index:12; }
 .top-actions #filters:hover { background:var(--ds-hover); }
 .top-actions #filters:active { transform:translateX(-50%) scale(.96); opacity:1; }
 main { padding-bottom:85px; }
 #toast { bottom:calc(72px + env(safe-area-inset-bottom)); }
 .filter-dialog { width:calc(100vw - 20px); height:auto; max-height:85dvh; inset:auto 10px calc(10px + env(safe-area-inset-bottom)); }
 .filter-dialog[open] { animation:sheet-up 180ms cubic-bezier(.2,.7,.2,1); }
 .filter-body { max-height:65dvh; }
}
.save:active,.remove:active { transform:scale(.9); opacity:1; }
.chip,.brand-option,.reason-button { transition:background 140ms,color 140ms,transform 140ms; }
.chip:active,.brand-option:active,.reason-button:active { transform:scale(.98); opacity:1; }
.item { transition:opacity 140ms ease,transform 140ms ease; }
.item-leaving { opacity:0; transform:translateY(4px); pointer-events:none; }
#toast:not([hidden]) { animation:toast-in 160ms ease-out; }
@keyframes sheet-up { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:translateY(0)} }
@keyframes toast-in { from {opacity:0;translate:0 5px} to {opacity:1;translate:0 0} }
/* Account anchors the right edge; disclosures sit with preferences. */
.top-actions #account-open { padding:4px 8px; }
.settings-disclosure { margin:20px 0 0; font-size:var(--ds-caption); line-height:16px; }
.settings-disclosure a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:760px) { .top-actions #account-open { min-height:32px; padding:4px 6px; } }
.profile-shortcuts { display:grid; gap:5px; margin:15px 0; }
.profile-shortcuts button { padding:10px; background:var(--ds-page); text-align:left; }
.sidebar-tools:empty { display:none; }


.top-actions #account-open { background:var(--ds-tag); }
.top-actions #account-open:hover { background:var(--ds-tag-hover); }

/* One background follows the selected view. */
.top nav { position:relative; isolation:isolate; }
.top nav::before { content:''; position:absolute; z-index:-1; left:0; top:var(--active-top,0px); width:var(--active-width,0px); height:var(--active-height,28px); transform:translateX(var(--active-left,0px)); background:var(--ds-tag); pointer-events:none; transition:transform 180ms ease,width 180ms ease,height 180ms ease; }
.top nav .active { background:transparent; }
.top-actions #currency-open { padding:4px 8px; background:var(--ds-tag); }
.top-actions #currency-open:hover { background:var(--ds-tag-hover); }
#currency-dialog { width:360px; padding:20px; }
#currency-dialog p { margin:10px 0 20px; }
#currency-form { margin:0; padding:0; border:0; }

#currency-status:empty { display:none; }
#currency-form .done:disabled { opacity:.5; cursor:wait; }
@media(max-width:760px) { .top-actions #currency-open { padding:4px 5px; } }

/* Source headings share the chip row and text alignment. */
.following > .label { min-height:var(--ds-chip-height); align-items:center; }
.following > .label button { min-height:var(--ds-chip-height); }
.following > .market-heading { justify-content:space-between; }
#manage-markets { width:var(--ds-control); justify-content:center; }
#manage-markets:hover { background:var(--ds-wash); }

/* Keep one selection dot mounted while source buttons are refreshed. */
.following::after { content:''; position:absolute; left:0; top:0; width:4px; height:4px; border-radius:0; background:var(--accent); transform:translate(var(--source-dot-x,0px),var(--source-dot-y,0px)); opacity:0; pointer-events:none; transition:transform 240ms cubic-bezier(.22,1,.36,1),opacity 120ms ease; }
.following[data-source-active=true]::after { opacity:1; }
.following .brand { padding-left:11px; transition:color var(--ds-motion); }

.following .brand.selected::before { content:none; }

/* Shared chip sizing applies to metadata, filters, and compact header actions. */
.pill.ds-chip,.chip.ds-chip,.reason-button.ds-chip,.product-size.ds-chip,.brand-box.ds-chip,.product-badge.ds-chip,.top nav .ds-chip,.top-actions .ds-chip,.unit-toggle .ds-chip { height:var(--ds-chip-height); min-height:var(--ds-chip-height); padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x); gap:var(--ds-chip-gap); border:0; font-size:var(--ds-chip-text); line-height:var(--ds-chip-leading); text-transform:uppercase; }
.brand-box.ds-chip { display:block; background:var(--ds-tag); }
.product-tags .product-size.ds-chip { background:var(--ds-tag); color:var(--ds-ink); }
.product-size.ds-chip { min-width:var(--ds-chip-height); flex-shrink:0; max-width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-tags { display:flex; align-items:center; min-width:0; margin-bottom:0; gap:var(--ds-chip-gap); }
.product-badge.ds-chip { position:absolute; top:var(--ds-space-2); left:var(--ds-space-2); max-width:calc(100% - 90px); background:var(--ds-overlay); }
.product-badge .item-tag { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:inherit; line-height:inherit; }
.product-info { gap:var(--ds-chip-gap); }
.size-basis { font:inherit; margin-left:var(--ds-chip-gap); text-transform:uppercase; }
.pill.ds-chip,.chip.ds-chip,.reason-button.ds-chip,.unit-toggle .ds-chip { background:var(--ds-tag); color:var(--ds-ink); }
:is(.chip,.reason-button,.unit-toggle button).ds-chip[aria-pressed=true],.chip.ds-chip.on { background:var(--ds-ink); color:var(--ds-on-ink); }
.pill.ds-chip:hover,.chip.ds-chip:not(.on):hover,.reason-button.ds-chip:not([aria-pressed=true]):hover,.product-tags .product-size.ds-chip:hover { background:var(--ds-tag-hover); color:var(--ds-ink); }
.top-actions #currency-open.ds-chip,.top-actions #filters.ds-chip { padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x); }
.top-actions #account-open.ds-chip { width:var(--ds-chip-height); padding:0!important; }
.top nav .ds-chip { background:transparent; color:var(--ds-ink); }
.top nav::before { height:var(--active-height,var(--ds-chip-height)); }
.filter-actions { flex-shrink:0; padding:var(--ds-space-2); display:flex; flex-direction:column; gap:var(--ds-space-2); }
.filter-actions #reset { width:100%; min-height:var(--ds-chip-height); padding:var(--ds-space-1) var(--ds-space-2); background:transparent; color:var(--ds-ink); font-size:var(--ds-chip-text); text-align:center; text-transform:uppercase; }
.filter-actions #reset:hover { color:var(--ds-accent); }
.filter-dialog .filter-actions .done { width:100%; margin:0; min-height:40px; padding:var(--ds-space-2); text-transform:uppercase; }
.settings-history { border-top:1px solid var(--ds-line); padding-top:var(--ds-space-2); margin-top:var(--ds-space-3); }
.settings-history h3 { margin-bottom:var(--ds-space-1); color:var(--ds-muted); font-size:var(--ds-caption); text-transform:uppercase; }
.settings-history button { width:100%; text-align:left; }
@media(max-width:760px) { .product-badge.ds-chip { top:var(--ds-space-1); left:var(--ds-space-1); max-width:calc(100% - 85px); } .top-actions #filters.ds-chip { position:fixed; height:40px; min-height:40px; padding:var(--ds-space-2) var(--ds-chip-padding-x); } .top-actions #account-open.ds-chip { width:32px; height:32px; min-height:32px; } }
/* Keep the floating filter legible during pointer and touch interactions. */
@media(max-width:760px) { .top-actions #filters:hover { background:var(--ds-ink); color:var(--ds-on-ink); } }
.brand-box.ds-chip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#currency-dialog { padding:10px; }
.loading-piece>div { aspect-ratio:4/5; background:var(--ds-tag); }
.loading-piece>span { display:block; height:10px; width:70%; margin-top:10px; background:var(--ds-tag); }
.loading-piece>span:last-child { width:35%; }
@media(max-width:380px) {
 .top nav .ds-chip { padding:5px 6px; font-size:var(--ds-chip-text); }
 .top-actions { gap:2px; }
 .top-actions #mobile-settings { width:26px; }
 .top-actions #currency-open { padding:5px; font-size:var(--ds-chip-text); }
}

.top nav a[data-view] { text-decoration:none; }
.import-requests-open { margin:12px 0; text-decoration:underline; text-underline-offset:3px; }
#item-preview { display:grid; grid-template-columns:110px 1fr; gap:20px; margin:20px 0; align-items:start; }
#item-preview[hidden] { display:none; }
#item-preview img { width:110px; aspect-ratio:4/5; object-fit:cover; background:var(--ds-wash); }
#item-preview p { margin:0 0 10px; overflow-wrap:anywhere; }
.import-request { border-top:1px solid var(--ds-line); padding:15px 0; }
.import-request p { margin:0 0 8px; overflow-wrap:anywhere; }
.import-request button { margin-right:15px; text-decoration:underline; text-underline-offset:3px; }
#imports-refresh { margin-bottom:15px; }
@media (max-width:480px) { #add-item-open { padding-left:6px; padding-right:6px; } }

/* Keep everyday shopping choices visible; occasional tools expand below. */
#settings-form { display:grid; gap:var(--ds-space-3); }
.settings-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--ds-space-2); }
.settings-row label { margin:0; min-width:0; }
#settings-form .settings-row input { width:100%; min-width:0; height:var(--ds-field-height); padding:var(--ds-space-2); border:1px solid var(--ds-line); border-radius:0; background:none; color:var(--ds-ink); margin:var(--ds-space-1) 0 0; font-size:var(--ds-text); }
.settings-categories { min-width:0; border:0; padding:0; margin:0; }
.settings-categories legend { padding:0; margin-bottom:var(--ds-space-1); font-size:var(--ds-caption); color:var(--ds-muted); }
.settings-categories .chips { margin:0; }
#settings-form #budget-help { margin:calc(-1 * var(--ds-space-2)) 0 0; }
#settings-form .done { margin:0; }
.settings-more { margin-top:var(--ds-space-3); border-top:1px solid var(--ds-line); padding-top:var(--ds-space-2); }
.settings-more summary { cursor:pointer; color:var(--ds-muted); font-size:var(--ds-text); }
.settings-more[open] summary { margin-bottom:var(--ds-space-3); }
.settings-more .data-actions { margin-top:var(--ds-space-1); }
.settings-more .settings-history { margin-top:var(--ds-space-2); }

.settings-more summary:focus-visible { outline:1px solid var(--ds-accent); outline-offset:3px; }

/* Shared field rhythm and predictable interaction states. */
#settings-form .settings-row select { margin-top:var(--ds-space-1); }
.profile-grid input { min-width:0; height:var(--ds-field-height); border-radius:var(--ds-radius); }
.input-row { min-height:var(--ds-field-height); }
.input-row:focus-within { border-color:var(--ds-accent); }
.input-row button { flex-shrink:0; }
#settings-dialog .checkbox-label { align-items:flex-start; gap:var(--ds-space-2); line-height:var(--ds-leading); }
#settings-dialog .checkbox-label input { flex-shrink:0; margin:1px 0 0; width:14px; height:14px; }
.dialog-head button:hover { color:var(--ds-ink); background:var(--ds-tag-hover); }
button:disabled:hover { color:inherit; }
.dialog-head h2 { min-width:0; }
#brand-options .brand-option { min-width:0; }
#brand-options .brand-option-name { min-width:0; overflow-wrap:anywhere; }
dialog { overscroll-behavior:contain; }
@media(hover:hover) { .brand:hover { background:var(--ds-tag); } }
@media(max-width:380px) {
  .settings-row { grid-template-columns:minmax(0,1fr); }
  .sheet-actions { flex-wrap:wrap; }
  .sheet-actions button { flex:1; white-space:nowrap; }
}

.sizing-section + .sizing-section { margin-top:var(--ds-space-3); padding-top:20px; border-top:1px solid var(--ds-line); }
.sizing-section h3 { font-size:var(--ds-heading); margin:0 0 var(--ds-space-2); }
.sizing-section > p { margin:0 0 var(--ds-space-3); line-height:1.6; }
.sizing-field label { display:block; margin-bottom:var(--ds-space-1); }
.sizing-input { display:flex; align-items:center; gap:var(--ds-space-2); }
.sizing-input input { min-width:0; flex:1; width:100%; margin:0; height:var(--ds-field-height); padding:var(--ds-space-2); border:1px solid var(--ds-line); border-radius:var(--ds-radius); background:none; }
.sizing-input select { width:100px; min-width:70px; margin:0; }
.sizing-input [data-measure-unit] { width:80px; min-width:80px; }
#profile-dialog { width:620px; }
@media(max-width:480px) { .sizing-section .profile-grid { grid-template-columns:1fr; } }
/* Keep every header action reachable on narrow phones. */
@media(max-width:480px) {
  :root { --ds-header:88px; }
  .top { flex-wrap:wrap; align-content:center; gap:5px; }
  .top nav { width:100%; flex-shrink:0; }
  .top-actions { width:100%; justify-content:flex-end; }
}

#size-form { margin:20px 0; padding-top:20px; border-top:1px solid var(--ds-line); }
#preferences-sizes { margin:12px 0; }

@media(max-width:760px) { #add-item-open { display:none; } }

/* Mobile retailer benchmarks: searchable checkbox groups and a persistent results action. */
.filter-section { min-width:0; padding:0; margin:0 0 20px; border:0; }
.filter-section legend { padding:0 0 10px; font-size:var(--ds-caption); text-transform:uppercase; }
.filter-option { display:flex; align-items:center; gap:10px; min-height:44px; margin:0; font-size:var(--ds-text); color:var(--ds-ink); cursor:pointer; }
.filter-option input { width:16px; height:16px; margin:0; flex-shrink:0; accent-color:var(--ds-ink); }
.filter-option[hidden] { display:none; }
.filter-option:has(input:checked) { color:var(--ds-ink); }
#brand-search { width:100%; min-height:44px; padding:10px; margin:0 0 10px; border:1px solid var(--rule); background:transparent; color:var(--ds-ink); border-radius:0; }
.filter-dialog .dialog-head button { width:44px; height:44px; }
.filter-body { min-height:0; overscroll-behavior:contain; }
.filter-actions { border-top:1px solid var(--rule); background:var(--ds-surface); }
.filter-actions #reset { min-height:44px; }
.filter-actions #reset:disabled { opacity:.4; cursor:default; }
.filter-dialog .filter-actions .done { min-height:44px; }
body:has(#filter-dialog[open]) { overflow:hidden; }
@media(max-width:760px) {
 .filter-dialog { inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; }
 .filter-dialog .dialog-head { padding:calc(10px + env(safe-area-inset-top)) 10px 10px; }
 .filter-body { max-height:none; }
 .filter-actions { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
 .following .brand.selected { background:var(--ds-tag); }
 #active-filter .pill { min-height:32px; }
}

/* Primary actions stay in the header; supporting tools live in context. */
.top nav a.ds-chip{min-height:var(--ds-chip-height);padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x);font-size:var(--ds-nav)}
.top-actions .ds-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;min-height:var(--ds-chip-height);padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x);font:inherit;background:var(--ds-tag);color:var(--ds-ink)}
.top-actions .ds-chip:hover{background:var(--ds-tag-hover)}
.top-actions #account-open.ds-chip{width:var(--ds-chip-height);padding:0}
.top-actions #search-open.has-query{background:var(--ds-ink);color:var(--ds-on-ink)}
.following .sidebar-sources{min-height:0;flex:1;overflow:auto;scrollbar-width:thin}
.following .sidebar-heading{display:flex;align-items:center;justify-content:space-between;min-height:var(--ds-chip-height);margin-bottom:10px;font-size:var(--ds-chip-text);line-height:var(--ds-chip-leading);color:var(--ds-muted);text-transform:uppercase}
.following .sidebar-heading button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;min-height:24px;padding:0;flex-shrink:0}
.following .sidebar-heading :is(#manage,#manage-markets){width:24px;height:24px;min-height:24px}
.following .sidebar-heading button[hidden]{display:none}
.following .sidebar-heading button:hover{background:var(--ds-wash)}
.following .sidebar-tools{margin:auto 0 0;padding:20px 0 0;width:100%;align-items:stretch}
.sidebar-tools #add-item-open{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:var(--ds-chip-height);min-height:var(--ds-chip-height);padding:var(--ds-chip-padding-y) var(--ds-chip-padding-x);font-size:var(--ds-chip-text);line-height:var(--ds-chip-leading);text-transform:uppercase;text-align:center;background:var(--ds-tag);color:var(--ds-ink)}
.sidebar-tools #add-item-open:hover{background:var(--ds-tag-hover);color:var(--ds-ink)}
@media(min-width:761px){.following:has(>.sidebar-tools){overflow:hidden}}
:is(#items,.product-grid){padding-top:0}
.saved-list-tools{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.saved-list-tools[hidden]{display:none}
.saved-list-tools select{flex:1;min-width:0;min-height:40px;padding:8px 34px 8px 10px;border:1px solid var(--rule);background:transparent;color:var(--ds-ink);border-radius:0}
.product-list-button{align-self:flex-start;text-align:left;min-height:32px;color:var(--muted)}
.product-list-button:hover{text-decoration:underline;text-underline-offset:3px}
.image-unavailable{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;background:var(--wash);color:var(--muted);padding:10px}
.availability{font-size:var(--ds-caption);color:var(--muted)}
#catalogue-health-sources>p{padding:10px 0;border-top:1px solid var(--rule)}
#sort-note{font-size:var(--ds-caption);margin:10px 0 0}
#list-form>input,#list-form>select,#move-list,#product-sort,#product-search{width:100%;min-height:44px;padding:10px;border:1px solid var(--rule);background:transparent;color:var(--ds-ink);border-radius:0}
#list-form>input,#list-form>select,#move-list{margin-bottom:10px}
#product-sort{padding-right:34px}
#search-dialog{width:440px;padding:10px}
#search-dialog .search-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.search-actions .done{margin:0;min-height:40px;padding:10px 15px}
#search-clear{min-height:40px;color:var(--muted)}
#search-results{min-height:18px;margin:10px 0 20px}
.account-secondary{margin-top:20px;padding-top:10px;border-top:1px solid var(--rule)}
.account-secondary button{color:var(--muted);min-height:36px;text-align:left}
.account-store-actions{display:none}
@media(hover:hover) and (pointer:fine){.item-actions .remove{opacity:0;pointer-events:none}.item:hover .remove,.item:focus-within .remove,.item-actions .remove:focus-visible{opacity:1;pointer-events:auto}}
@media(max-width:760px){
 .top-actions #filters.ds-chip{position:static;left:auto;bottom:auto;transform:none;box-shadow:none;min-height:32px;height:32px;padding:5px 10px;background:var(--ds-tag);color:var(--ds-ink)}
 .top-actions #filters:active{transform:none}
 .top-actions .ds-chip,.top nav a.ds-chip{min-height:32px}
 .top-actions #account-open.ds-chip{width:32px;height:32px}
 main{padding-bottom:20px}#toast{bottom:calc(20px + env(safe-area-inset-bottom))}
 .account-store-actions{display:flex;flex-direction:column;align-items:stretch;margin-top:20px}
 .account-store-actions button{text-align:left;min-height:40px}
}

/* Quiet mobile browsing: photographs first, controls with room to tap. */
@media(max-width:760px) {
 :root { --ds-header:88px; }
 .top { flex-wrap:nowrap; flex-direction:column; align-items:stretch; justify-content:center; gap:0; }
 .top nav { width:100%; justify-content:space-between; gap:0; }
 .top nav a.ds-chip { min-height:44px; padding:15px 10px; }
 .top-actions { width:100%; justify-content:flex-end; gap:5px; }
 .top-actions .ds-chip,.top-actions #filters.ds-chip,.top-actions #currency-open.ds-chip,.top-actions #account-open.ds-chip { min-height:44px; height:44px; padding:15px 10px; background:transparent; }
 .top-actions #account-open.ds-chip { width:44px; padding:0; }
 .top-actions #search-open { margin-right:auto; }
 .top-actions #filters.ds-chip:hover { background:var(--ds-wash); color:var(--ds-ink); }
 .top-actions #search-open.has-query { color:var(--ds-accent); background:transparent; text-decoration:underline; text-underline-offset:4px; }
 :is(#items,.product-grid) { gap:25px 10px; }
 .product-badge.is-recommended { max-width:calc(100% - 10px); font-size:var(--ds-caption); }
 .item-actions { top:auto; bottom:5px; left:5px; right:5px; justify-content:space-between; flex-direction:row; pointer-events:none; }
 .item-actions .save,.item-actions .remove { width:44px; height:44px; pointer-events:auto; color:var(--ds-ink); }
 .item-actions .save { margin-left:auto; }
 .product-tags { flex-wrap:wrap; }
 .product-tags .brand-box.ds-chip { max-width:100%; }
 .product-tags .product-size.ds-chip { max-width:100%; }
 .product-info h3 { margin:0; overflow-wrap:anywhere; font-weight:400; }
 .product-list-button { min-height:44px; }
 #active-filter { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
 #active-filter .pill { flex-shrink:0; min-height:44px; }
 dialog .dialog-head button { width:44px; height:44px; }
 #toast { bottom:calc(10px + env(safe-area-inset-bottom)); max-width:calc(100vw - 20px); padding:5px 10px; gap:5px 10px; }
 #toast button { min-height:44px; padding:10px 5px; }
 #toast-message { padding:10px 0; }
}
@media(hover:none) {
 .picture:hover img { transform:none; }
 .save:hover,.remove:hover { background:var(--ds-overlay); color:var(--ds-ink); }
 .save[aria-pressed=true] { background:var(--ds-surface); color:var(--ds-accent); }
}
@media(prefers-reduced-motion:no-preference) {
 dialog[open] { animation:sheet-up 180ms cubic-bezier(.2,.7,.2,1); }
 .save,.remove { transition:transform 140ms ease,background 140ms ease,color 140ms ease; }
}

/* Shared spacing and in-place discovery. */
.header-search{display:flex;align-items:center;margin:0}
.top-actions #product-search{width:170px;min-width:0;height:24px;min-height:24px;margin:0;padding:5px 10px;border:0;border-radius:0;background:var(--ds-tag);font:inherit;line-height:14px;color:var(--ds-ink)}
.top-actions #product-search::placeholder{color:var(--ds-muted)}
.top-actions #product-search:focus{background:var(--ds-surface)}
.sidebar-list-section[hidden]{display:none}
.sidebar-list-section{margin:0 0 20px}
.following .saved-list-choice{padding-left:0}
.saved-list-choice.selected{background:var(--ds-tag);color:var(--ds-ink)}
#mobile-manage-lists{min-height:40px;margin-top:5px;color:var(--muted)}
#saved-list{width:100%;min-height:40px;padding:10px 34px 10px 10px;border:1px solid var(--rule);background:transparent;color:inherit}
@media(min-width:761px){#mobile-list-section{display:none}}
@media(max-width:760px){
 .header-search{flex:1;min-width:0;margin-right:auto}
 .top-actions #product-search{width:100%;min-height:44px;height:44px;padding:10px;background:transparent}
 .item-actions{top:5px;bottom:auto;left:auto;right:5px;gap:5px;justify-content:flex-end}
 .product-badge.ds-chip{display:inline-flex;top:5px;left:5px;max-width:calc(100% - 105px);min-height:24px;height:auto;font-size:var(--ds-caption)}
}
/* Public edits use the same two-row mobile header. */
@media(max-width:760px) {
 .edit-header.top { height:var(--ds-header); flex-direction:column; align-items:stretch; gap:0; }
 .edit-header.top nav { width:100%; gap:0; }
 .edit-product .product-info h3 { min-height:0; }
 .edit-product .product-info .price { align-self:center; }
 .edit-listing-details summary { min-height:44px; }
}
#header-search{border:0;padding:0;margin:0;align-self:center}
.product-list-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:24px;padding:5px 10px;background:var(--ds-tag);color:var(--ds-ink);font-size:var(--ds-chip-text);line-height:var(--ds-chip-leading);text-transform:uppercase}
.product-list-button:hover{background:var(--ds-tag-hover);text-decoration:none}
@media(max-width:760px){.product-list-button{min-height:44px;justify-self:start}}

/* Inspect a piece without replacing or scrolling its clothing grid. */
#product-dialog{width:min(920px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:20px;overscroll-behavior:contain}
#product-dialog .dialog-head{margin-bottom:20px}
#product-detail-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--ds-tag)}
.product-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.product-detail-photo{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:var(--ds-wash)}
.product-detail-photo img{display:block;width:100%;height:100%;object-fit:cover}
.product-detail-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.product-detail-info h2{font-size:var(--ds-heading);line-height:1.5;margin:0}
.product-detail-info p{margin:0}
.product-detail-fit{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ds-line);padding-top:15px;width:100%}
.product-detail-fit .ds-chip,.product-detail-actions .ds-chip{background:var(--ds-tag);padding:5px 10px}
.product-detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.product-detail-actions :is(button,a){display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;text-transform:uppercase;text-decoration:none;padding:10px}
body:has(#product-dialog[open]){overflow:hidden}
@media(max-width:760px){#product-dialog{width:100%;height:100dvh;max-height:100dvh;max-width:100%;margin:0;padding:10px}#product-detail-close{width:44px;height:44px}.product-detail-grid{grid-template-columns:1fr}.product-detail-photo{max-height:55dvh;width:100%;aspect-ratio:4/5}.product-detail-photo img{object-fit:contain}.product-detail-actions{width:100%}.product-detail-actions :is(button,a){flex:1}.product-detail-fit .ds-chip{min-height:44px}}
.product-detail-actions .ds-chip{color:var(--ds-ink)}
.product-detail-actions .ds-chip[aria-pressed=true]{color:var(--ds-accent);background:var(--ds-tag)}
@media(max-width:760px){
 #product-dialog .dialog-head{position:sticky;top:-10px;z-index:2;background:var(--ds-surface);padding:10px 0}
 .product-detail-info{padding-bottom:90px}
 #product-dialog .product-detail-actions{position:fixed;left:10px;right:10px;bottom:0;width:auto;margin:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--ds-surface);z-index:2}
}
.product-detail-actions .product-affiliate-note{flex-basis:100%;margin:0;font-size:var(--ds-caption);line-height:1.5}
@media(max-width:760px){.product-detail-info{padding-bottom:120px}#product-dialog .product-detail-actions{border-top:1px solid var(--ds-line)}}