/* ============================================================
   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; }
.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; }


