/* =============================================================================
 *  comparar.css
 * ===========================================================================*/
.compare-wrap { padding-top: 22px; padding-bottom: 60px; }
.compare-wrap .section-title { margin-bottom: 20px; }
.compare-empty { text-align: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.compare-actions { margin-bottom: 14px; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }

.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.compare-table tbody th { color: var(--muted); font-weight: 500; font-size: .88rem; width: 160px; white-space: nowrap; }
.compare-table td { font-size: .9rem; }
.cmp-col { position: relative; text-align: center !important; vertical-align: top; min-width: 170px; }
.cmp-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cmp-remove:hover { color: #e35d5d; border-color: #e35d5d; }
.cmp-img { display: block; width: 120px; height: 120px; margin: 0 auto 10px; border-radius: var(--radius-sm); overflow: hidden; background: var(--void); }
.cmp-img img { width: 100%; height: 100%; object-fit: cover; }
.cmp-name { display: block; font-weight: 600; font-size: .92rem; }
.cmp-price { color: var(--accent); font-size: 1.05rem; font-weight: 600; text-align: center; }