/* ── Compare button ─────────────────────────────────────────────── */
.wcco-compare-btn {
	align-items: center;
    background: transparent;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	display: inline-flex;
	font-size: calc(var(--text-fs) - 2px);
	gap: 6px;
	padding: 8px 14px;
	transition: all ease-in-out .3s;

	&:hover,
	&.wcco-compare-btn--active {
		background: var(--hs-darkblue);

		.wcco-compare-btn__label {
			color: #fff;
		}
        &::before {
            filter: grayscale(100%) brightness(0%) invert(1);
        }
	}
    &:not(.wcco-compare-btn--loop)::before {
        background-image: url("/wp-content/uploads/2026/02/icon_produktauswahl.webp");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 25px;
        left: 0;
        position: relative;
        top: 0;
        width: 25px;
    }
}

/* ── Menu link / count badge ────────────────────────────────────── */
.wcco-compare-count {
	aspect-ratio: 1;
	background-color: var(--hs-darkblue);
	border-radius: 100%;
	color: #fff;
	font-size: clamp(12px,calc(var(--text-fs) - 6px) , 14px);
	height: 22px;
	transform: translateY(50%);
	text-align: center;
	width: auto;
}
.wcco-compare-open:has(.wcco-compare-count[data-count="0"]) .wcco-compare-count {
	opacity: 0;
	width: 0;
}

/* ── Compare content ────────────────────────────────────────────── */
.wcco-compare-content {
	padding: clamp(10px, 2vw, 25px);

	.wcco-compare-wrap {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.wcco-compare-table {
		width: auto;
		min-width: 100%;
		border-collapse: collapse;
		table-layout: fixed;

		th, td {
			overflow-wrap: break-word;
			padding: clamp(5px, 1vw, 10px);
			vertical-align: top;
		}
		th {
			background: #f9f9f9;
			font-weight: 600;
			min-width: 110px;
			white-space: break-spaces;
			width: 130px;
		}
		col:not(.wcco-col-label) {
			width: 250px;
			min-width: 250px;
		}
		td {
            border-left: 2px solid var(--hs-lightgray);
            min-width: 175px;
			text-align: center;
		}
		tr:not(.wcco-compare-row--head) td {
			text-align: center;
  			vertical-align: middle;
		}
	}
    .wcco-compare-row--head {
        th,
        .wcco-compare-head-cell {
            scroll-snap-align: start;
        }
        .wcco-compare-head-cell {
            position: relative;
            padding-bottom: calc(var(--text-fs) + 25px) !important;

            > a {
                display: block;
                width: 100%;
            }

            .wcco-head-sku, .wcco-head-sku span {
                font-size: calc(var(--text-fs) - 4px);
            }
            .wcco-head-sku {
                position: absolute;
                width: 100%;
                bottom: 15px;
                left: 0;
            }
			.wcco-head-image {
				aspect-ratio: 1;
				margin: auto;
				max-width: 300px;
			}
        }
    }
	.wcco-compare-row--image {
		td {
			padding: 8px;
		}
		img {
			max-width: 140px;
			height: auto;
			display: block;
			margin: 0 auto;
		}
	}
	.wcco-compare-row--actions {
        border-bottom: 2px solid var(--hs-lightgray);

		td {
			vertical-align: middle;
		}
	}
}

/* ── Aktions-Buttons (Merkliste + Entfernen) in der Vergleichstabelle ── */
.wcco-compare-actions {
	align-items: center;
	display: flex;
	justify-content: center;
	gap: 8px;

	.wcco-wishlist-btn--loop {
		position: static;
	}
}

.wcco-btn-remove-compare {
	background: var(--hs-darkblue);;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	position: relative;
	transition: opacity ease-in-out .3s;

	&::after {
		content: "";
		background-image: url("/wp-content/uploads/2026/02/icon_produktauswahl.webp");
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: 15%;
		left: 15%;
		width: 70%;
		height: 70%;
		filter: grayscale(100%) brightness(0%) invert(1);
	}

	&:hover {
		opacity: .8;
	}
}

/* ── Loop-Variante: Icon-only Button in der Shop-Übersicht ──────── */
.et_pb_shop .wcco-compare-btn--loop {
    position: absolute;
}
.wcco-compare-btn--loop {
	align-items: center;
	background: none;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	height: 30px;
	justify-content: center;
    left: clamp(5px, 2vw, 15px);
	margin-top: 0;
	padding: 0;
    top: clamp(5px, 2vw, 15px);
	transition: color .15s, border-color .15s, background .15s;
	width: 30px;
    z-index: +1;

    &::after {
        content: "";
        background-image: url("/wp-content/uploads/2026/02/icon_produktauswahl.webp");
        background-size: contain;
        height: 70%;
        width: 70%;
        background-repeat: no-repeat;
        transition: all ease-in-out .3s;
    }
    &:hover::after,
    &.wcco-compare-btn--active::after {
        filter: grayscale(100%) brightness(0%) invert(1);
    }
	&:hover,
	&.wcco-compare-btn--active {
		background: var(--hs-darkblue);
	}
	&:hover {
		opacity: .8;
	}
}

/* ── Footer-Button-Variante (compare-spezifisch) ─────────────────── */
.wcco-btn-clear-compare { 
	color: #c00; 

	&:hover { 
		background: #fef2f2; border-color: #c00; color: #c00; 
	}
}

/* ── Oberfläche color swatches in compare table ─────────────────── */
.wcco-compare-oberflaeche {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;

    .wcco-swatch-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;

        .wcco-swatch-item {
            display: flex;
            align-items: center;
            gap: 7px;

            span {
                font-size: 100%;
            }
            .wcco-compare-swatch {
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1px solid rgba(0, 0, 0, .15);
                flex-shrink: 0;
            }
        }
    }
}