/* Piece viewer (v81): owner's "White sneakers" reference. Full-screen dark card: beige photo tile with a round
   close button, a dark info panel overlapping its bottom (name, type · dress code, favourite star), a cream
   "Build an outfit around this piece" button and Wore it / Edit piece / Delete tiles. Pinch, double-tap and
   pan still zoom the photo; in Closet a sideways swipe moves to the next/previous piece. Always dark. */
#zoomDialog.zoom-dialog { background: #191c18; color: #f4efe6; color-scheme: dark; }
#zoomDialog.zoom-dialog::backdrop { background: #0e0f0d; }
.zoom-shell { height: 100%; display: flex; padding: calc(6px + env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)); }
.zoom-stage { position: relative; flex: 1; min-width: 0; display: flex; }
.zoom-card { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zoom-box { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; border-radius: 22px; background: #efe8dd; cursor: grab; }
#zoomDialog:not(.has-piece) .zoom-box { margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.zoom-close { position: absolute; z-index: 3; top: 14px; right: 14px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #242d27; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }

.zoom-panel { position: relative; z-index: 2; margin: -18px -6px 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #191c18; display: grid; gap: 16px; }
.zoom-panel[hidden] { display: none; }
.zoom-handle { width: 48px; height: 4.5px; margin: 0 auto -4px; border-radius: 99px; background: #373733; }
.zoom-head { display: flex; align-items: center; gap: 14px; }
.zoom-title { flex: 1; min-width: 0; }
#zoomCaption { margin: 0; color: #fff; font: 500 clamp(22px, 6.6vw, 28px)/1.15 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
#zoomCaption::first-letter { text-transform: uppercase; }
#zoomMeta { margin: 4px 0 0; color: #a6a498; font: 450 15px/1.3 var(--sans); }
#zoomMeta:empty { display: none; }
.zoom-fav { flex: none; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #262824; color: #f4efe6; cursor: pointer; }
.zoom-fav.on { color: #e6c46a; }
.zoom-fav[hidden] { display: none; }

.zoom-look { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zoom-look[hidden] { display: none; }
.zoom-pill { min-height: 46px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: transparent; color: #f4efe6; font: 600 13.5px/1.2 var(--sans); cursor: pointer; }
.zoom-pill.zoom-swap { background: var(--hero, #2f4a3a); border-color: transparent; }
.zoom-pill[hidden] { display: none; }
.zoom-look:has(> .zoom-pill[hidden]) { grid-template-columns: 1fr; }

.zoom-style { width: 100%; min-height: 56px; padding: 8px clamp(12px, 4vw, 18px); display: flex; align-items: center; gap: clamp(10px, 3.6vw, 16px); border: 0; border-radius: 22px; background: #f4ede3; color: #1a1c17; font: 500 clamp(14px, 4.1vw, 16px)/1.2 var(--sans); text-align: left; cursor: pointer; }
.zoom-style[hidden] { display: none; }
.zoom-style span { flex: 1; min-width: 0; }
.zoom-style-ico { flex: none; }
.zoom-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.zoom-tiles.two { grid-template-columns: repeat(2, 1fr); }
.zoom-tile { min-height: 84px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 20px; background: #242622; color: #fff; font: 500 15px/1.15 var(--sans); cursor: pointer; }
.zoom-tile[hidden] { display: none; }
.zoom-tile:active, .zoom-style:active, .zoom-fav:active { transform: scale(.97); }
@media (max-height: 640px) {
  .zoom-panel { gap: 11px; padding-top: 10px; }
  .zoom-style { min-height: 48px; }
  .zoom-tile { min-height: 64px; gap: 5px; font-size: 13.5px; }
  .zoom-tile svg { width: 24px; height: 24px; }
}