/* Compare (Vergleich) toggle — sits next to the bookmark button on product
   cards and in the Merkliste. Icon outline (sprite #layout-grid), accent when
   active. Header tool icon + comparison-page styling: see phase 2. */

.compare_wrapper{
float:left;
width:1.5rem;
height:1.75rem;
margin:0 .5rem 0 .25rem !important;
padding:.25rem 0;
background:none;
}

.btn_compare,
.btn_compare:hover{
border:none;
}

.btn_compare.icon{
float:left;
width:1.5rem !important;
height:1.5rem !important;
margin:0;
padding:0;
color:var(--color-text-muted);
}

.btn_compare.icon:hover,
.btn_compare.icon:focus,
.btn_compare.icon:focus-within,
.btn_compare.icon.on{
color:var(--color-accent);
}

/* Aktiv (im Vergleich) = GEFUELLTES Grid statt nur Kontur (wie das gefuellte
 * Herz): Kontur-Sprite aus, solide icon.svg als Maske, accent via currentColor. */
.btn_compare.icon.on:not(.del) svg{
display:none;
}

.btn_compare.icon.on:not(.del)::before{
content:'';
display:block;
width:1.5rem;
height:1.5rem;
-webkit-mask:url('/assets/img/compare/icon.svg') no-repeat center center;
mask:url('/assets/img/compare/icon.svg') no-repeat center center;
-webkit-mask-size:contain;
mask-size:contain;
background-color:currentColor;
}

/* Delete variant (compare page) — trash, error colour on hover (like bookmark). */
.btn_compare.del.icon{
color:var(--color-text-muted);
}
.btn_compare.del.icon:hover,
.btn_compare.del.icon:focus,
.btn_compare.del.icon:focus-within{
color:var(--color-error);
}

.btn_compare.icon span,
.btn_compare.icon strong,
.btn_compare.del.icon span,
.btn_compare.del.icon strong{
display:none;
}


/* Card-Anzahl-Marker neben dem Vergleich-Button (analog .bookmark_total_wrapper).
 * is-empty blendet den Nullzustand aus; das Compare-JS fuellt/toggelt die Zahl. */
.compare_total_wrapper.is-empty{
display:none;
}

.compare_total_wrapper{
float:left;
width:auto;
min-width:.5rem;
height:1.75rem;
margin:0 .25rem 0 0 !important;
padding:.25rem 0 0 0;
background:none;
display:flex;
justify-content:flex-start;
align-items:center;
}

.compare_total_wrapper p{
float:left;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-xs);
color:var(--ink-15);
}


/* Header tool icon via Lucide-Sprite (layout-grid). Bewusst NICHT farbig, auch
 * im .on-Zustand — die Anzahl signalisiert das Badge (siehe tools/index.css,
 * das .on-Akzent-Regel greift hier nicht). */

/* Comparison matrix: rows = item properties (aligned), columns = products. */
.compare_matrix_wrapper{
overflow-x:auto;
padding:0 0 var(--space-4) 0;
}

/* width:auto statt 100% — Tabelle nur so breit wie ihre festen Spalten;
   bei 1 Produkt keine Streckung (sonst reisst das Layout), bei vielen scrollt
   der Wrapper (overflow-x). Kappt zugleich die Wert-/Beschreibungsspalte. */
.compare_matrix{
border-collapse:collapse;
width:auto;
max-width:100%;
}

.compare_matrix th,
.compare_matrix td{
padding:var(--space-3) var(--space-4);
border-bottom:1px solid var(--color-border);
vertical-align:top;
text-align:left;
}

/* Row-label column — sticky-left so the property names stay visible while
   scrolling through many product columns. */
.compare_matrix tbody th[scope="row"]{
position:sticky;
left:0;
z-index:1;
background:var(--color-bg);
font-family:var(--font-heading);
font-weight:normal;
color:var(--color-text-muted);
white-space:nowrap;
}

/* Product columns: equal width, value cells */
.compare_matrix thead th,
.compare_matrix tbody td{
min-width:14rem;
width:14rem;
color:var(--color-text);
}

/* Header cell: image block + name + remove. Sticky-top so the product
   images/names stay visible while scrolling down the long property list. */
.compare_matrix thead th{
position:sticky;
top:0;
z-index:2;
background:var(--color-bg);
border-bottom:0.125rem solid var(--color-border);
text-align:center;
}

/* Top-left corner — sticky on both axes (sits above row labels + header). */
.compare_matrix .compare_corner{
position:sticky;
top:0;
left:0;
z-index:3;
background:var(--color-bg);
}

.compare_matrix .compare_name{
margin:var(--space-3) 0 0 0;
font-family:var(--font-heading);
font-size:var(--fs-p);
color:var(--color-text);
}
.compare_matrix .compare_name a{
color:inherit;
text-decoration:none;
}
.compare_matrix .compare_name a:hover{
color:var(--color-accent);
}

/* Header image — one clean thumbnail + one download link (built manually). */
.compare_media{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-2);
}
.compare_media .compare_img{
display:block;
max-width:9rem;
max-height:11rem;
width:auto;
height:auto;
margin:0 auto;
}
.compare_media .compare_download{
display:inline-flex;
color:var(--color-text-muted);
}
.compare_media .compare_download:hover{
color:var(--color-accent);
}
.compare_media .compare_download svg{
width:1.25rem;
height:1.25rem;
}

/* Remove (x) button, top-right of each product column */
.btn_compare.compare_remove{
position:absolute;
top:var(--space-2);
right:var(--space-2);
z-index:1;
width:1.5rem !important;
height:1.5rem !important;
}

/* Merken (bookmark) button, top-left of each product column (mirror of x) */
.compare_bookmark{
position:absolute;
top:var(--space-2);
left:var(--space-2);
z-index:1;
}
.compare_bookmark .btn_bookmark{
float:none !important;
margin:0;
}

/* Zebra rows for readability */
.compare_matrix tbody tr:nth-child(even) th[scope="row"],
.compare_matrix tbody tr:nth-child(even) td{
background:var(--color-bg-alt);
}

/* Row hover: the generic table hover (accent bg + light text) loses its
   background to the even-row zebra (higher specificity), leaving light text on
   a light row. Re-assert both here (after the zebra) so hover stays readable on
   every row. */
.compare_matrix tbody tr:hover th[scope="row"],
.compare_matrix tbody tr:hover td{
color:var(--white);
background:var(--color-accent);
}

@media screen and (max-width: 45rem){
.compare_matrix thead th,
.compare_matrix tbody td{
min-width:11rem;
width:11rem;
}
}