/* Fashion garments (js/fashion.js): the Garments tile in World > Fashion, the browser, a garment page, and the garments
   strip in "In fashion" on color pages. Reuses world.css / app.css pieces; DESIGN-SYSTEM: serif speaks, mono counts,
   opaque controls, no uppercase labels. */
.wd-tile.wd-wide{grid-column:1/-1}
.wd-wide .wd-art{height:132px}
.fx-tile-imgs{display:flex;gap:2px;height:100%}
.fx-tile-imgs img{flex:1;min-width:0;width:25%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.fx-tile-imgs img.ld{opacity:1}

.fx-strip{display:flex;gap:10px;overflow-x:auto;margin:14px calc(-1 * var(--g)) 0;padding:0 var(--g) 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.fx-strip::-webkit-scrollbar{display:none}
.fx-mini{flex:none;width:112px;display:flex;flex-direction:column;gap:6px;scroll-snap-align:start;text-align:left}
.fx-mini .fx-img{height:140px}
.fx-mini small{font:italic 400 17px/1.3 var(--serif);color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-img{position:relative;display:block;width:100%;overflow:hidden;background:var(--surface-1);border-radius:var(--r-1)}
.fx-img img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.fx-img img.ld{opacity:1}
.fx-img em{position:absolute;left:6px;bottom:6px;font:400 13px/1 var(--mono);font-style:normal;color:var(--paper-ink);background:var(--paper);padding:4px 6px 3px;border-radius:2px}

/* browser */
.fx .p-title{margin-top:6px}
.fx-pick{margin-top:24px;border-top:1px solid var(--rule);padding-top:12px}
.fx-pick-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fx-pick-head #fx-pick-name{font:400 20px/1 var(--serif)}
.fx-ribbon{display:flex;gap:3px;overflow-x:auto;margin:12px calc(-1 * var(--g)) 0;padding:4px var(--g) 8px;scrollbar-width:none}
.fx-ribbon::-webkit-scrollbar{display:none}
.fx-ribbon button{flex:none;width:30px;height:44px;background:var(--c);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(236,232,223,.12);transition:transform .25s var(--spring)}
.fx-ribbon button.on{transform:translateY(-4px);box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--ink)}
.fx-chips{display:flex;gap:8px;overflow-x:auto;margin:10px calc(-1 * var(--g)) 0;padding:0 var(--g) 2px;scrollbar-width:none}
.fx-chips::-webkit-scrollbar{display:none}
.fx-chips button{flex:none;min-height:40px;padding:0 16px;background:var(--surface-2);border-radius:var(--r-pill);font:400 17px/1 var(--serif);color:var(--soft);transition:color .2s,background .2s}
.fx-chips button.on{color:var(--ink);background:var(--surface-3)}
.fx-q{margin-top:14px}
.fx-q input{font-size:20px}
.fx-count{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 14px;font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.fx-count>span{display:flex;align-items:center;gap:8px}
.fx-count .mono{font:400 13px/1 var(--mono);font-style:normal;color:var(--ink)}
.fx-count i{width:12px;height:12px;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.fx-count button{display:flex;align-items:center;gap:5px;min-height:44px;color:var(--ink);font:inherit}
.fx-grid{position:relative;width:100%;min-height:200px}
.fx-card{position:absolute;display:flex;flex-direction:column;gap:7px;text-align:left}
.fx-card .mini-pal{margin-top:1px}
.fx-card b{font:400 18px/1.05 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-card small{font:italic 400 17px/1.3 var(--serif);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* garment page */
.fx-hero{width:100%;max-height:50dvh;background:var(--surface-1);border-radius:var(--r-1);overflow:hidden;display:grid;place-items:center;margin-top:8px}
.fx-hero img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s}
.fx-hero img.ld{opacity:1}
.fx-pal .pal span{font:400 13px/1 var(--mono)}
.fx-pal .pal[data-ink="dark"]{color:var(--paper-ink)}.fx-pal .pal[data-ink="light"]{color:#fff}
.fx-title{font-size:clamp(34px,10vw,48px)}
.fx #fx-like{margin-top:8px}
.fx-rec{margin-top:10px}

/* the garments strip inside "In fashion" on color pages */
.fx-in-sub{color:var(--soft);font:italic 400 17px/1.3 var(--serif);margin-top:10px}
.fx-in .btn.ghost{margin-top:6px}
.fx-in h3{font:400 24px/1.1 var(--serif);letter-spacing:-.01em;padding-bottom:10px;border-bottom:1px solid var(--rule)}