/* Scoped to the explicitly managed catalogue thumbnail previews. */
.card-thumb:has(> .ap-preview-toggle) { position: relative; }
.card-thumb > .ap-preview-toggle {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  background: rgba(13,13,17,.88); color: #fff;
  font-family: inherit; font-size: 12px; line-height: 1.2; font-weight: 500;
  box-shadow: 0 2px 10px rgba(0,0,0,.13); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.card-thumb > .ap-preview-toggle:hover { background: #202027; border-color: rgba(255,255,255,.6); }
.card-thumb > .ap-preview-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ap-preview-toggle svg { width: 12px; height: 12px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .card-thumb > .ap-preview-toggle[data-ap-state="playing"] { opacity: 0; }
  .card-thumb:hover > .ap-preview-toggle,
  .card-thumb:focus-within > .ap-preview-toggle,
  .card-thumb > .ap-preview-toggle:focus-visible { opacity: 1; }
}
@media (pointer: coarse) { .card-thumb > .ap-preview-toggle { width: 44px; height: 44px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .card-thumb > .ap-preview-toggle { transition: none; } }