.angle-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px}
.angle-track>a{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.angle-track img{aspect-ratio:1;object-fit:cover;filter:brightness(1.12) sepia(.055)}
.angle-controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
.angle-controls button{background:white;border:1px solid var(--line);color:var(--blue);padding:8px 12px;cursor:pointer;font:inherit}
.angle-controls button:disabled{opacity:.4;cursor:default}
.angle-count{font-size:12px;color:var(--muted)}
.ceramics-grid .tile-image{position:relative}
.ceramics-grid .tile-image .alternate-angle{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
@media(hover:hover) and (pointer:fine){.ceramics-grid .tile-image .alternate-angle{display:block;opacity:0}.ceramics-grid a:hover .alternate-angle{opacity:1}}
.angle-viewer{position:relative}
.angle-track{display:block;overflow:visible}
.angle-track>a[hidden]{display:none}
.angle-controls{display:block;margin-top:8px}
.angle-controls button{position:absolute;top:0;margin-top:50%;transform:translateY(-50%);z-index:1;background:#fffffff0;color:var(--ink);font-size:20px;line-height:1;min-width:44px;min-height:44px}
.angle-controls button:disabled{visibility:hidden}
.angle-previous{left:10px}
.angle-next{right:10px}
.angle-count{display:block;text-align:center}