/* ============================================================
   Favorites (hearts) + card wrapper.
   Each grid item is now <div class="card"> holding the painting link (.image)
   and the heart button — a button cannot live inside a link.
   The card takes over the grid sizing that used to sit on `> .image`.
   ============================================================ */
#content_holder > .card, .ads > .card {
    position: relative; display: flex;
    flex: 1 1 240px; max-width: 320px; min-width: 0;
}
.ads > .card { max-width: 300px; }

.card > .image {
    float: none !important; margin: 0 !important;
    flex: 1 1 auto; width: 100% !important; max-width: none;
    height: auto !important; line-height: normal !important; aspect-ratio: auto !important;
    display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: #141414; border: 1px solid #333; border-radius: 6px; overflow: hidden;
    text-align: left;
}

@media (max-width: 900px) {
    #content_holder > .card, .ads > .card { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 600px) {
    #content_holder > .card, .ads > .card { flex: 1 1 47%; max-width: 47%; }
}

/* Heart button — top-right corner over the picture */
.card .fav-form { position: absolute; top: 8px; right: 8px; z-index: 20; margin: 0; }
.archive-select { position: absolute; top: 8px; left: 8px; z-index: 21; display: grid;
    place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35);
    border-radius: 7px; background: rgba(12,12,14,.82); cursor: pointer; }
.archive-select input { position: absolute; opacity: 0; pointer-events: none; }
.archive-select span { color: transparent; font: 700 20px/1 'Inter', sans-serif; }
.archive-select:has(input:checked) { border-color: #c99b45; background: #8b5b17; }
.archive-select input:focus-visible + span { outline: 2px solid #f0c46d; outline-offset: 5px; }
.archive-select input:checked + span { color: #fff; }
.archive-bulk-delete { flex: 1 0 100%; display: flex; align-items: center; justify-content: flex-end;
    gap: 12px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #4a3a2a;
    border-radius: 6px; background: #12100f; color: #ddd; font: 600 13px 'Inter', sans-serif; }
.archive-bulk-delete button { border: 1px solid #9f3f3f; border-radius: 5px; padding: 8px 13px;
    background: #6f2424; color: #fff; font: 600 13px 'Inter', sans-serif; cursor: pointer; }
.archive-bulk-delete button:hover { background: #8a2d2d; }
.archive-bulk-delete button:disabled { border-color: #4a4141; background: #2c2929; color: #777; cursor: default; }
.fav-form { display: inline-block; margin: 0; }
.fav-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(12,12,14,.72); color: #f0f0f0;
    border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    padding: 4px 10px; cursor: pointer;
    font: 600 13px 'Inter', sans-serif; line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.fav-btn:hover { background: rgba(20,20,24,.9); border-color: #e0506a; transform: scale(1.06); }
.fav-btn .fav-icon { font-size: 16px; line-height: 1; color: #e0506a; }
.fav-btn.on { border-color: #e0506a; background: rgba(224,80,106,.18); }
.fav-btn:focus-visible { outline: 2px solid var(--c-line-hover); outline-offset: 2px; }