/* ProductCard's three image-overlay controls. Keep the fill opaque on every photo,
   in both themes; the light edge and dark shadow separate it from either image tone. */
article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button {
  background: #1b2b43;
  color: #fff;
  border: 1px solid #d9e4f2;
  box-shadow: 0 1px 4px #0009, 0 0 0 1px #0d172b66;
  transition: background-color .15s, box-shadow .15s;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.15;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button:hover {
  background: #30445f;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button:is([aria-label^="Отметить куплено:"], [aria-label^="Отметить оплачено:"]) {
  background: #116149;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button:is([aria-label^="Отметить куплено:"], [aria-label^="Отметить оплачено:"]):hover {
  background: #16765a;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button.app-delete-action {
  background: #8b2440;
  color: #fff;
  border-color: #d9e4f2;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button.app-delete-action:hover {
  background: #a72c4d;
}

article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button:focus-visible {
  outline: 3px solid #ffd666;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  article[data-view="cards"] .absolute.right-1\.5.top-1\.5 button { transition: none; }
}