/* Productvergelijker — toggle op kaarten, zwevende balk, vergelijktabel. */

/* ===========================================================================
   1. 'Vergelijk'-toggle op de productkaart
   =========================================================================== */
.umi-compare-toggle{
	display:inline-flex;align-items:center;gap:7px;margin-top:10px;
	background:none;border:none;cursor:pointer;padding:4px 0;
	font-family:inherit;font-size:.74rem;letter-spacing:.02em;color:var(--ink-soft);
	transition:color .15s ease;
}
.umi-compare-toggle:hover{color:var(--ink)}
.umi-compare-toggle .umi-compare-ic{
	display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;
	border:1px solid var(--line);transition:all .15s ease;flex:0 0 auto;
}
.umi-compare-toggle.is-comparing{color:var(--ink);font-weight:600}
.umi-compare-toggle.is-comparing .umi-compare-ic{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Variant op de productpagina: iets meer lucht + scheidingslijn erboven. */
.umi-compare-pdp{
	margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
}
.umi-compare-pdp .umi-compare-toggle{margin-top:0;font-size:.8rem}

/* ===========================================================================
   2. Zwevende balk onderaan
   =========================================================================== */
.umi-compare-bar{
	position:fixed;left:0;right:0;bottom:18px;z-index:9990;display:flex;justify-content:center;pointer-events:none;padding:0 16px;
}
.umi-compare-bar__inner{
	pointer-events:auto;display:inline-flex;align-items:center;gap:14px;
	background:var(--ink);color:#fff;border-radius:999px;padding:10px 12px 10px 18px;
	box-shadow:0 12px 34px rgba(26,24,20,.28);
}
.umi-compare-bar__count{
	background:#fff;color:var(--ink);border-radius:50%;width:26px;height:26px;
	display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}
.umi-compare-bar__txt{font-size:.88rem;letter-spacing:.02em}
.umi-compare-bar__go{
	background:#fff;color:var(--ink);border-radius:999px;padding:9px 18px;text-decoration:none;
	font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;
}
.umi-compare-bar__go:hover{background:var(--sage-soft)}
.umi-compare-bar__clear{
	background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-family:inherit;
	font-size:.78rem;text-decoration:underline;text-underline-offset:2px;
}
.umi-compare-bar__clear:hover{color:#fff}

/* ===========================================================================
   3. Vergelijkpagina
   =========================================================================== */
.umi-compare{margin:6px 0 8px}

.umi-compare-empty{
	background:var(--card);border:1px solid var(--line-soft);border-radius:18px;
	padding:40px 32px;text-align:center;color:var(--ink-soft);max-width:560px;
}
.umi-compare-empty p{margin:0 0 16px}
.umi-compare-empty p:last-child{margin-bottom:0}

/* Schuifbare houder met nette rand. */
.umi-compare-wrap{
	overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 44px;
	border:1px solid var(--line-soft);border-radius:20px;background:var(--card);
	box-shadow:0 1px 0 rgba(26,24,20,.02);
}
.umi-compare-table{
	border-collapse:separate;border-spacing:0;width:100%;
	min-width:560px;table-layout:fixed;
}
.umi-compare-table th,
.umi-compare-table td{
	padding:15px 18px;text-align:left;vertical-align:top;font-size:.9rem;line-height:1.45;
	border-bottom:1px solid var(--line-soft);
}

/* Eerste kolom: rij-labels, plakt links bij horizontaal scrollen. */
.umi-compare-rowhead{
	width:200px;min-width:160px;
	color:var(--ink-soft);font-weight:500;background:var(--bg-soft);
	position:sticky;left:0;z-index:2;text-transform:none;letter-spacing:0;
	border-right:1px solid var(--line-soft);
}

/* Kop: productkaarten. */
.umi-compare-table thead th{
	background:var(--card);border-bottom:1px solid var(--line);
	padding:0;vertical-align:top;
}
.umi-compare-corner{
	background:var(--card)!important;border-right:1px solid var(--line)!important;
	vertical-align:bottom;padding:18px!important;
}
.umi-compare-corner span{
	display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--ink-mute,#a9a094);font-weight:600;
}
.umi-compare-col{position:relative;min-width:220px;text-align:center}

.umi-compare-card{position:relative;padding:26px 20px 22px}
.umi-compare-remove{
	position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
	border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;
	line-height:1;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;
	transition:all .15s ease;z-index:1;
}
.umi-compare-remove:hover{color:var(--ink);border-color:var(--ink)}

.umi-compare-prod{display:block;text-decoration:none;color:var(--ink)}
.umi-compare-img{
	display:flex;align-items:center;justify-content:center;
	width:150px;height:150px;margin:0 auto 14px;
	background:var(--bg-soft);border-radius:16px;padding:14px;box-sizing:border-box;
}
.umi-compare-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.umi-compare-title{
	display:block;font-size:.98rem;line-height:1.35;margin-bottom:10px;font-weight:500;
	min-height:2.7em;
}
.umi-compare-prod:hover .umi-compare-title{text-decoration:underline;text-underline-offset:2px}
.umi-compare-price{
	font-weight:600;margin-bottom:14px;font-size:1.02rem;
	font-variant-numeric:tabular-nums;color:var(--ink);
}
.umi-compare-card .btn{width:100%;justify-content:center}

/* Specrijen. */
.umi-compare-table tbody tr:nth-child(even) td,
.umi-compare-table tbody tr:nth-child(even) .umi-compare-rowhead{
	background:color-mix(in srgb,var(--bg-soft) 55%,transparent);
}
.umi-compare-table tbody tr:nth-child(even) .umi-compare-rowhead{
	background:color-mix(in srgb,var(--bg-soft) 92%,#fff);
}
.umi-compare-table tbody tr:hover td{background:var(--sage-soft)}
.umi-compare-table tbody tr:hover .umi-compare-rowhead{background:var(--sage-soft)}
.umi-compare-table tbody tr:last-child th,
.umi-compare-table tbody tr:last-child td{border-bottom:none}
.umi-compare-table tbody td{color:var(--ink)}
.umi-compare-na{color:var(--ink-mute,#bdb4a6)}

/* Compacter op smalle schermen. */
@media(max-width:760px){
	.umi-compare-wrap{border-radius:16px}
	.umi-compare-table th,.umi-compare-table td{padding:12px 13px}
	.umi-compare-rowhead{width:130px;min-width:120px;font-size:.82rem}
	.umi-compare-col{min-width:170px}
	.umi-compare-card{padding:20px 12px 16px}
	.umi-compare-img{width:108px;height:108px}
	.umi-compare-title{font-size:.9rem;min-height:0}
}