/* card.css — non-critical card styles, lazy-loaded.
   Most card visuals are already in main.css; this file holds only
   what we don't want to inline (heavier print + utility classes). */

@media print {
    .site-header, .site-footer, .related, .breadcrumbs, .pagination,
    .search-box, .hero__search { display: none !important; }
    .card { box-shadow: none; border: 1px solid #888; }
    body { background: #fff; }
    a { color: #000; text-decoration: none; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

.card-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.card-actions button {
    padding: 0.4rem 0.85rem; border: 1px solid var(--c-border); background: #fff;
    border-radius: var(--radius); cursor: pointer; font-size: 0.9rem;
}
.card-actions button:hover { border-color: var(--c-accent); }

/* Compare-checkbox in result lists */
.compare-toggle {
    margin-left: auto; cursor: pointer;
    font-size: 0.85rem; color: var(--c-muted);
}

/* Floating compare tray (rendered by app.js when items > 0) */
.compare-tray {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--c-text); color: #fff;
    box-shadow: 0 -4px 14px rgba(28,33,40,.18);
}
.compare-tray__inner {
    max-width: 1280px; margin: 0 auto;
    padding: 12px 24px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    font-size: 14px;
}
.compare-tray strong { font-weight: 600; flex-shrink: 0; }
.compare-tray__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.compare-tray__chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15); padding: 4px 4px 4px 10px;
    border-radius: 999px; font-size: 13px; max-width: 280px;
}
.compare-tray__chip > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compare-tray__chip button {
    width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.2); color: #fff;
    cursor: pointer; font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.compare-tray__chip button:hover { background: rgba(255,255,255,.35); }
.compare-tray__cta {
    background: #fff; color: var(--c-text);
    padding: 8px 16px; border-radius: 4px;
    font-weight: 600; flex-shrink: 0;
}
.compare-tray__cta:hover { background: #f0f0f0; text-decoration: none; }
.compare-tray__clear {
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    color: #fff; padding: 7px 14px; border-radius: 4px;
    font-family: inherit; font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.compare-tray__clear:hover { border-color: #fff; }
@media (max-width: 640px) {
    .compare-tray__inner { padding: 10px 14px; gap: 10px; }
    .compare-tray__chip { max-width: 160px; font-size: 12px; }
}
/* Leave room at the bottom of the page when tray is shown */
body:has(.compare-tray) { padding-bottom: 80px; }