/* EGJS JustifiedGrid supplies geometry; the independent hover treatment keeps the full frame visible. */
.bracelet-grid{position:relative;min-width:0;background:var(--bg)}
.bracelet-grid .piece{display:block;position:absolute;margin:0;background:#151515;cursor:zoom-in;overflow:hidden}
.bracelet-grid .piece img{width:100%;height:100%;object-fit:contain;background:transparent}
.bracelet-grid .piece::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s ease}
.bracelet-grid .piece:focus-visible{outline-offset:-3px}
@media(hover:hover) and (pointer:fine){.bracelet-grid:has(.piece:hover) .piece:not(:hover)::after{opacity:.13}}
@media(prefers-reduced-motion:reduce){.bracelet-grid .piece::after{transition:none}}