/* Shared collection template: every product image uses one 4:5 frame.
   Product shots (main, color) sit on white; real-life photos (scene) and close-ups (detail) fill the frame. */
.collection-frame{background:var(--white)}
.collection-frame>img{object-position:50% 50%}
.collection-frame[data-slot="main"]>img,.collection-frame[data-slot="color"]>img{object-fit:contain;padding:7%}
.collection-reference{align-items:center}
.collection-image-button{flex:1 1 0;width:auto;max-width:100%;height:auto;aspect-ratio:4/5;background:var(--white)}
.collection-image-button>img{object-fit:cover}
.collection-image-button[data-slot="main"]>img,.collection-image-button[data-slot="color"]>img{object-fit:contain;padding:6%}
.collection-reference figcaption{align-self:stretch}
.collection-thumbs button{width:56px;height:70px;flex-basis:56px}
.collection-thumbs button[data-slot="main"],.collection-thumbs button[data-slot="color"]{background:var(--white)}
.collection-thumbs button[data-slot="main"] img,.collection-thumbs button[data-slot="color"] img{object-fit:contain}
.collection-swatches{display:flex;gap:8px;flex-wrap:wrap}
.collection-swatches button{display:flex;flex-direction:column;align-items:center;gap:6px;width:88px;padding:6px 6px 8px;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:12px;background:var(--white);color:var(--ink);font-size:11px;font-weight:700;line-height:1.3;text-align:center;cursor:pointer}
.collection-swatches img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:contain;border-radius:8px;background:var(--white)}
.collection-swatches button[aria-pressed="true"]{background:var(--yolk);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.collection-swatches button:hover{border-color:var(--ink)}
.collection-swatches button:disabled{opacity:.4;cursor:not-allowed;border-style:dashed}.collection-swatches small{font-size:10px;font-weight:400}
.collection-points{order:2;display:grid;gap:6px;margin:0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.collection-points:empty{display:none}
.collection-dialog .wardrobe-details dl{margin-top:0}
@media(max-width:980px){.collection-image-button{flex:none;height:100%}}
@media(max-width:700px){.collection-swatches button{width:76px}.collection-thumbs button{width:48px;height:60px;flex-basis:48px}}