/* WC Product Compare - styles */

:root {
	--wcpc-accent: #000;
	--wcpc-accent-hover: #b80015;
	--wcpc-accent-tint: #fdeceb;
	--wcpc-accent-white: #ffffff;
	--wcpc-border: #ddd;
	--wcpc-text-muted: #666;
	/* If your theme has its own sticky header, override this (e.g. via
	   a small snippet setting --wcpc-sticky-offset: 80px;) so our
	   sticky product row docks just below it instead of underneath it. */
	--wcpc-sticky-offset: 0px;
}

/* -------------------------------------------------------------------- */
/* Admin: attribute groups repeater (WooCommerce > Settings > Compare)  */
/* -------------------------------------------------------------------- */

#wcpc-groups-wrap .wcpc-group-row {
	border: 1px solid #dcdcde;
	background: #fff;
	padding: 12px 16px;
	margin-bottom: 10px;
	max-width: 500px;
}

#wcpc-groups-wrap .wcpc-group-row p {
	margin: 0 0 10px;
}

#wcpc-groups-wrap .wcpc-group-row p:last-child {
	margin-bottom: 0;
}

#wcpc-group-row-template {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Compare toggle (archive + single product)                            */
/* -------------------------------------------------------------------- */

.wcpc-compare-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px;
	border: 1px solid transparent;
	background-color: transparent;
	color: #444;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	user-select: none;
}

.wcpc-compare-toggle:hover {
	border-color: var(--wcpc-accent);
	color: var(--wcpc-accent);
}

.wcpc-compare-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Größer als vorher: 16px -> 22px */
.wcpc-compare-toggle::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M28 6H18V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h10v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2ZM4 15h6.17l-2.58 2.59L9 19l5-5l-5-5l-1.41 1.41L10.17 13H4V4h12v20H4Zm12 13v-2a2 2 0 0 0 2-2V8h10v9h-6.17l2.58-2.59L23 13l-5 5l5 5l1.41-1.41L21.83 19H28v9Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M28 6H18V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h10v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2ZM4 15h6.17l-2.58 2.59L9 19l5-5l-5-5l-1.41 1.41L10.17 13H4V4h12v20H4Zm12 13v-2a2 2 0 0 0 2-2V8h10v9h-6.17l2.58-2.59L23 13l-5 5l5 5l1.41-1.41L21.83 19H28v9Z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* "Compare"-Text bleibt im DOM (für Screenreader + SEO), wird aber
   visuell versteckt - exakt dieselbe Technik wie bei der Checkbox oben */
.wcpc-compare-toggle span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wcpc-compare-toggle:has(.wcpc-compare-checkbox:checked) {
	background: var(--sg-color-accent);
	color: var(--sg-color-primary);
}

.wcpc-compare-toggle:has(.wcpc-compare-checkbox:focus-visible) {
	outline: 2px solid var(--sg-color-primary);
	outline-offset: 2px;
}


/* -------------------------------------------------------------------- */
/* Sticky slide-out bar                                                  */
/* -------------------------------------------------------------------- */

#wcpc-compare-bar-container {
	position: relative;
	z-index: 9999;
}

.wcpc-compare-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-top: 1px solid var(--wcpc-border);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.wcpc-compare-bar.wcpc-visible {
	transform: translateY(0);
}

/*
 * Handle with an arrow to collapse/expand the bar. Kept as a normal,
 * in-flow child (not absolutely positioned outside the box) so it can
 * never be clipped by a theme wrapper's "overflow: hidden" or by a
 * parent transform breaking position:fixed - it simply always sits at
 * the top of the visible bar.
 */
.wcpc-bar-handle {
	display: flex;
	justify-content: center;
	background: var(--wcpc-accent);
	border-bottom: 1px solid var(--wcpc-accent);
}

.wcpc-bar-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 64px;
	height: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.wcpc-bar-toggle-icon {
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--wcpc-accent-white);
	transition: transform 0.3s ease;
}

.wcpc-bar-toggle:hover {
	height: 30px;
	transition: all 0.5s ease;
}

.wcpc-bar-toggle:hover .wcpc-bar-toggle-icon {
	border-top-color: var(--wcpc-accent-white);
}

.wcpc-compare-bar.wcpc-collapsed .wcpc-bar-toggle-icon {
	transform: rotate(180deg);
}

.wcpc-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 20px;
	max-height: 400px;
	overflow: hidden;
	transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}

.wcpc-compare-bar.wcpc-collapsed .wcpc-bar-inner {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.wcpc-bar-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 180px;
}

.wcpc-compare-bar .button.wcpc-compare-link {
	background: var(--sg-color-primary);
	border: 1px solid var(--sg-color-primary);
	color: #fff;
	padding: 10px 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wcpc-compare-bar .button.wcpc-compare-link:hover {
	background: var(--sg-color-secondary);
	border-color: var(--sg-color-secondary);
	color: var(--sg-color-dark);
}

.wcpc-compare-bar .button.wcpc-clear-all {
	background: var(--sg-color-light);
	border: 1px solid var(--sg-color-dark);
	color: var(--sg-color-dark);
	padding: 10px 16px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wcpc-compare-bar .button.wcpc-clear-all:hover {
	border-color: var(--wcpc-accent);
	color: var(--wcpc-accent);
}

.wcpc-bar-slots {
	display: flex;
	gap: 12px;
	flex: 1;
	flex-wrap: wrap;
}

.wcpc-slot {
	position: relative;
	flex: 1;
	min-width: 140px;
	max-width: 220px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 8px;
	text-align: center;
	font-size: 0.85em;
}

.wcpc-slot-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	color: #999;
}

.wcpc-slot img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 6px;
}

.wcpc-slot-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	color: #999;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wcpc-slot-remove:hover {
	color: #fff;
	background: var(--wcpc-accent);
}

.wcpc-slot-title {
	display: block;
}






/* -------------------------------------------------------------------- */
/* Comparison page                                                       */
/* -------------------------------------------------------------------- */

.wcpc-compare-page {
	margin-top: 20px;
}

.wcpc-cards-row {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	align-items: stretch;
}

.wcpc-card {
	position: relative;
	flex: 1;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 16px;
	text-align: center;
}

.wcpc-card-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
}

.wcpc-card-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sg-color-dark);
	border: none;
	border-radius: 50%;
	font-size: 1.1em;
	cursor: pointer;
	color: var(--sg-color-light);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wcpc-card-remove:hover {
	color: var(--sg-color-light);
	background: var(--sg-color-primary);
}

.wcpc-card-image img {
	max-width: 100%;
	height: auto;
}

.wcpc-card-title {
	margin: 10px 0 6px;
}

.wcpc-card-title a {
	text-decoration: none;
	color: inherit;
}

.wcpc-card-excerpt {
	font-size: 0.9em;
	color: #555;
	margin-bottom: 8px;
}

.wcpc-card-stock {
	font-size: 0.85em;
	margin-bottom: 6px;
}

.wcpc-card-stock.in-stock {
	color: #2e7d32;
}

.wcpc-card-stock.out-of-stock {
	color: #c0392b;
}

.wcpc-card-price {
	font-weight: 600;
}

/* Technical details table */
.wcpc-tech-details table.wcpc-attr-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.wcpc-attr-table tr:nth-child(odd) {
	background: #f7f7f7;
}

.wcpc-attr-table th,
.wcpc-attr-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #eee;
	vertical-align: top;
}

.wcpc-attr-table th {
	width: 220px;
	font-weight: 600;
}

/* Sticky product header row: image + name stay visible at the top of
   the viewport while scrolling through the attribute rows below, so
   it's always clear which column belongs to which product. */
.wcpc-attr-table thead th {
	position: sticky;
	top: var(--wcpc-sticky-offset, 0px);
	z-index: 5;
	background: #fff;
	border-bottom: 2px solid var(--wcpc-border);
	padding: 8px 12px;
	width: auto;
}

.wcpc-sticky-product-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85em;
	font-weight: 600;
	text-align: left;
}

.wcpc-sticky-product-inner img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.wcpc-notice {
	color: #666;
	font-style: italic;
}

/* Named attribute groups (e.g. "Drive", "Dimensions") - bolder, tinted
   with the accent color to stand out from ordinary rows. */
.wcpc-group-divider td {
	padding: 14px 12px 8px;
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wcpc-accent);
	background: var(--wcpc-accent-tint);
	border-bottom: 1px solid #eee;
}

/* Fallback bucket for attributes some, but not all, products have. */
.wcpc-individual-divider td {
	padding: 14px 12px 6px;
	border-bottom: 1px solid #eee;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #999;
	background: #fff;
}

/* CTA row */
.wcpc-cta-row {
	margin-top: 8px;
	align-items: flex-start;
}

.wcpc-cta-actions {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wcpc-cta-row .wcpc-goto-product,
.wcpc-cta-row .disabled {
	text-align: center;
}

.wcpc-cta-row .button.wcpc-goto-product {
	background: var(--sg-color-primary);
	border: 1px solid var(--sg-color-primary);
	color: var(--sg-color-light);
	border-radius: 4px;
	padding: 10px 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wcpc-cta-row .button.wcpc-goto-product:hover {
	background: var(--sg-color-secondary);
	border-color: var(--sg-color-secondary);
	color: var(--sg-color-dark);
}

.wcpc-cta-row .disabled {
	visibility: hidden;
	flex: 1;
}





/* -------------------------------------------------------------------- */
/* "Add product to compare" - empty slot picker                         */
/* -------------------------------------------------------------------- */

.wcpc-card-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
}

.wcpc-add-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wcpc-text-muted);
	font-size: 0.9em;
	padding: 0;
	width: 100%;
}

.wcpc-add-toggle:hover {
	color: var(--wcpc-accent);
}

.wcpc-add-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color 0.15s ease;
}

.wcpc-add-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.wcpc-add-picker select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--wcpc-border);
	background: var(--wcpc-accent-white);
	color: #444;
	font-size: 0.9em;
}

.wcpc-add-picker select:disabled {
	color: #aaa;
	cursor: not-allowed;
}

.wcpc-add-picker select:focus {
	outline: none;
	border-color: var(--wcpc-accent);
}

/* Falls .screen-reader-text noch nirgendwo global definiert ist (siehe
   Screenshot: "Category"/"Product" Labels waren sichtbar statt versteckt) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}




/* -------------------------------------------------------------------- */
/* Mobile: comparison page                                               */
/* -------------------------------------------------------------------- */

@media (max-width: 768px) {
	/*
	 * Keep the 3-column comparison layout intact (columns still line up
	 * with the table below) but let the whole thing scroll horizontally
	 * instead of squeezing 3 columns into a narrow screen.
	 */
	.wcpc-compare-page {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wcpc-cards-row {
		min-width: 620px;
	}

	.wcpc-card {
		min-width: 190px;
	}

	.wcpc-tech-details {
		min-width: 620px;
	}

	.wcpc-attr-table th {
		width: 140px;
	}

	.wcpc-sticky-product-inner span {
		display: none; /* keep just the thumbnail on very narrow columns */
	}
}

@media (max-width: 480px) {
	.wcpc-card {
		padding: 12px;
	}

	.wcpc-card-title {
		font-size: 0.95em;
	}

	.wcpc-attr-table th,
	.wcpc-attr-table td {
		padding: 8px;
		font-size: 0.9em;
	}
}

/* -------------------------------------------------------------------- */
/* Mobile: compare toggle + sticky slide-out bar (archive/product pages) */
/* -------------------------------------------------------------------- */

@media (max-width: 600px) {
	.wcpc-compare-toggle {
		padding: 6px 10px;
		font-size: 0.85em;
	}

	.wcpc-bar-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px 14px;
		max-height: 500px;
	}

	.wcpc-compare-bar.wcpc-collapsed .wcpc-bar-inner {
		max-height: 0;
	}

	.wcpc-bar-actions {
		flex-direction: row;
		min-width: 0;
		width: 100%;
		gap: 8px;
	}

	.wcpc-bar-actions .button {
		flex: 1;
		text-align: center;
		padding: 10px 8px;
		font-size: 0.85em;
	}

	.wcpc-bar-slots {
		width: 100%;
		gap: 8px;
	}

	.wcpc-slot {
		min-width: 0;
		max-width: none;
		flex: 1 1 30%;
		padding: 6px;
		font-size: 0.75em;
	}

	.wcpc-slot img {
		max-width: 44px;
	}

}