/* ds2.css — premium visual system pass (free-v2). Loaded last; app shell only.
   Editorial serif titles, quiet chrome, photo-first grids, one primary action per screen. */
:root{--r-card:20px;--r-pill:999px;--ease:cubic-bezier(.2,.8,.2,1)}
/* screen titles: editorial serif, like a magazine section head */
#view-title{font-family:var(--display)!important;font-weight:400!important;font-size:32px!important;letter-spacing:-.02em!important;line-height:1.05!important}
/* cards: softer, rounder, no shouting bars */
#screen .card{border-radius:var(--r-card);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 1px 2px rgba(20,12,6,.04),0 8px 24px rgba(20,12,6,.05)}
#screen .card h3{padding-left:0!important;font-size:17px;letter-spacing:-.01em}
#screen .card h3::before{display:none!important}
/* buttons: pill, tactile */
#screen .btn{border-radius:var(--r-pill);transition:transform .14s var(--ease),box-shadow .2s,background-color .2s}
#screen .btn:active{transform:scale(.97)}
/* shop toolbar: compact pills instead of full-width form fields */
#market-sort,.mf-sel{min-height:38px!important;height:38px;padding:0 30px 0 14px!important;border-radius:var(--r-pill)!important;font-size:14px!important;font-weight:600}
#market-sort{width:auto!important;max-width:60%}
/* grid tiles: rounder photos, gentle lift, crisp price */
.ux-tile-img{border-radius:18px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.ux-tile-img img{transition:transform .5s var(--ease)}
.ux-tile:active .ux-tile-img img{transform:scale(1.03)}
.ux-tile-p{font-size:16px;letter-spacing:-.01em}
.ux-tile-t{font-size:13.5px;color:color-mix(in srgb,var(--ink) 86%,transparent)}
@media (prefers-reduced-motion:no-preference){
  #market-grid > *{animation:dsUp .45s var(--ease) both}
  #market-grid > :nth-child(2){animation-delay:.05s}#market-grid > :nth-child(3){animation-delay:.1s}#market-grid > :nth-child(4){animation-delay:.15s}
  #screen > *{animation:dsFade .3s ease both}
}
@keyframes dsUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dsFade{from{opacity:0}to{opacity:1}}
/* item page: framed photo, one primary (Buy), try-on as a dark pill */
.ux-item-img{margin:0!important;border-radius:24px;aspect-ratio:4/5!important;max-height:62vh}
.ux-back{top:12px;left:12px}
.ux-item-price{font-size:30px;font-weight:800}
.ux-item-title{font-family:var(--display);font-weight:400;font-size:24px!important;line-height:1.15!important;letter-spacing:-.01em!important}
.ux-facts div{background:var(--soft);border-color:transparent;border-radius:14px}
.ux-try .btn-accent{background:var(--ink)!important;color:var(--bg)!important;box-shadow:none}
.ux-buybar{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ux-also{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.ux-also .ux-item-note{width:100%;margin:0}
.ux-also .btn{border-radius:var(--r-pill)}
/* "You" screen: compact menu rows instead of a stack of billboards */
html[data-view="more"] #screen .card{padding:16px 18px;margin-bottom:10px}
html[data-view="more"] #screen .card p.mut{font-size:13.5px;margin-bottom:12px}
html[data-view="more"] #screen .card .btn{min-height:42px;font-size:14.5px}
/* tab bar: lighter glass, clearer active state */
nav.tabbar{border-top:0;box-shadow:0 -1px 0 color-mix(in srgb,var(--line) 70%,transparent),0 -12px 30px rgba(20,10,5,.06)}
nav.tabbar a.on{font-weight:800}
/* empty states: centred, calm, one action */
#screen .empty{text-align:center;padding:36px 20px;color:var(--mut);font-size:15px;line-height:1.5}
/* listing wizard: same card + pill language */
.lw-in{border-radius:14px!important}
.lw-next{border-radius:var(--r-pill)!important;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent)}
.lw-next:disabled{box-shadow:none}
.lw-chips button,.lw-chip{border-radius:var(--r-pill)!important}
/* empty states: calm, editorial, one action */
#screen .empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:48px 22px;color:var(--mut);font-size:15px;line-height:1.5}
#screen .empty > svg{width:56px;height:56px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);stroke:currentColor;margin:0 0 4px}
#screen .empty p{margin:0;max-width:28ch}
#screen .empty .btn{margin-top:6px;min-width:180px}
/* closet / My clothes hero: quieter */
html[data-view="closet"] #screen .card:first-child{border:0;background:transparent;box-shadow:none;padding:4px 0 8px}
html[data-view="closet"] #screen .card:first-child h3{font-family:var(--display);font-weight:400;font-size:28px!important}
/* try-on page (static) */
#quick-look{border-radius:22px!important;border:1px solid var(--line)!important;box-shadow:var(--sh-1)}
#ql-canvas{border-radius:16px!important}
.to-zones{gap:12px}
.to-zone{border-radius:20px!important}
.to-go{border-radius:999px!important;min-height:52px}
/* shop search: taller, quieter placeholder feel */
.ux-search .input{border-radius:999px!important;padding-left:18px!important;background:var(--card)!important;box-shadow:var(--sh-1)}
/* signed-out topbar Sign in: pill */
#topbar .btn,#topnav .btn{border-radius:999px}
#lw-stepname{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:-.02em;line-height:1.05}
.lw-next:disabled{opacity:.45;filter:saturate(.6)}
#screen .empty .ds-empty-p{font-size:15px!important;font-weight:500!important;font-family:var(--font)!important;line-height:1.5;margin:0;max-width:30ch}