/* --- Compare toggle button: a child of the already-absolute/flex
   .pcseal-card-overlays (see card-overlays.css) — only button-reset + icon
   sizing + active-state color are needed here, not positioning. --- */
.pcseal-compare-btn {
	background: none;
	border: none;
	padding: 6px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--muted);
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}
.pcseal-compare-btn:hover {
	color: var(--accent);
	background: var(--accent-tint);
}
.pcseal-compare-btn.is-active,
.pcseal-compare-btn[aria-pressed="true"] {
	color: var(--accent-strong);
}
.pcseal-compare-btn svg {
	display: block;
}

/* --- Persistent bottom compare bar. Same z-index tier as .pcseal-buybar
   (sticky-buy-bar.css) — both sit above WooCommerce's own fixed demo-store
   notice. On a mobile single-product page both bars can be visible at once
   (items in the compare list AND scrolled past the button group), so the
   rule below shifts the compare bar up by the buy bar's rendered height
   whenever the buy bar is showing, instead of letting them overlap. --- */
.pcseal-compare-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Above WooCommerce's own demo-store notice bar (.woocommerce-store-notice,
	   z-index: 9998, also fixed to the bottom) — without this the notice paints
	   over the compare bar entirely, even though both are otherwise correctly
	   positioned/visible. */
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 16px;
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
	transition: bottom .2s ease;
}
/* Buy bar is only ever rendered under 640px (sticky-buy-bar.css) — match
   that same scope so this rule never applies on desktop. ~64px covers its
   padding + button height + border across normal font-size settings. */
@media (max-width: 640px) {
	body:has(.pcseal-buybar.is-visible) .pcseal-compare-bar.is-visible {
		bottom: 64px;
	}
}
.pcseal-compare-bar.is-visible {
	display: flex;
}
.pcseal-compare-bar-count {
	font-weight: 700;
	color: var(--ink);
}
.pcseal-compare-bar-view {
	background: var(--accent);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}
.pcseal-compare-bar-view:hover {
	background: var(--accent-strong);
}
.pcseal-compare-bar-clear {
	background: none;
	border: 1px solid var(--line);
	color: var(--muted);
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
}
.pcseal-compare-bar-clear:hover {
	color: var(--ink);
	border-color: var(--muted);
}

/* --- Compare table (spec page). Horizontal scroll wrapper so 4 product
   columns don't break layout on narrow screens. --- */
.pcseal-compare-table-wrap {
	overflow-x: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
}
.pcseal-compare-table {
	width: 100%;
	border-collapse: collapse;
}
.pcseal-compare-table th,
.pcseal-compare-table td {
	border: 1px solid var(--line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.pcseal-compare-table th {
	background: var(--surface-2);
	font-weight: 600;
	white-space: nowrap;
	position: sticky;
	left: 0;
	z-index: 1;
}
.pcseal-compare-table td img {
	max-width: 120px;
	height: auto;
	display: block;
}
.pcseal-compare-empty {
	padding: 24px;
	text-align: center;
	color: var(--muted);
}