/**
 * PAJ Product Compare — styled to the "Shield" Design System (design-truth.md v1.0).
 * Semantic tokens are mirrored as --paj-* custom properties; components use these only.
 */
.paj-compare-page,
.paj-compare-bar,
.paj-toast,
.paj-compare-btn {
	--paj-orange: #f05123;
	--paj-orange-btn: #f87d3b;
	--paj-orange-btn-hover: #faa97a;
	--paj-navy: #1a2839;
	--paj-navy-hover: #273c54;
	--paj-navy-2: #40638c;
	--paj-white: #ffffff;
	--paj-bg-subtle: #f0f5fa;
	--paj-bg-subtle-hover: #e2e8f0;
	--paj-border: #cbd5e1;
	--paj-border-hover: #94a3b8;
	--paj-text: #1a2839;
	--paj-text-subtle: #64748b;
	--paj-text-inverse: #ffffff;
	--paj-text-inverse-subtle: #cbd5e1;
	--paj-focus: #658cb8;
	--paj-focus-inverse: #9db6d2;
	--paj-error: #d94435;
	--paj-error-bg: #fdf0ee;
	--paj-error-text: #731e17;
	--paj-disabled-bg: #d9d9d9;
	--paj-disabled-label: #b3b3b3;
	--paj-alpha-light-10: rgba(255, 255, 255, 0.10);
	--paj-alpha-light-20: rgba(255, 255, 255, 0.20);
	--paj-radius-xs: 4px;
	--paj-radius-sm: 8px;
	--paj-radius-md: 12px;
	--paj-radius-lg: 16px;
	--paj-shadow-1: 0 12px 32px 0 rgba(1, 16, 19, 0.20);
	--paj-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   Grid button — Orange Secondary (outlined navy); selected = filled navy
   ============================================================ */
.paj-compare-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin: 8px 0;
	padding: 8px 16px;
	font-family: var(--paj-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--paj-text);
	background: var(--paj-bg-subtle);
	border: none;
	border-radius: var(--paj-radius-sm);
	cursor: pointer;
	transition: background-color .18s ease-out, color .18s ease-out;
}
.paj-compare-btn:hover {
	background: var(--paj-bg-subtle-hover);
}
.paj-compare-btn:focus-visible {
	outline: 2px solid var(--paj-focus);
	outline-offset: 2px;
}
.paj-compare-btn.is-active {
	background: var(--paj-navy);
	color: var(--paj-text-inverse);
}
/* Check icon appears only when selected — meaning not carried by color alone. */
.paj-compare-btn.is-active::before {
	content: "";
	width: 16px;
	height: 16px;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* ============================================================
   Floating bar — dark brand surface (like header/footer) + elevation.1
   ============================================================ */
.paj-compare-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 8px 24px;
	font-family: var(--paj-font);
	background: var(--paj-white);
	border-top: 1px solid var(--paj-border);
	box-shadow: var(--paj-shadow-1);
	flex-wrap: wrap;
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
	transition: transform .22s ease-out, opacity .22s ease-out;
}
.paj-compare-bar.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.paj-compare-bar .paj-items {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}
.paj-compare-bar .paj-hint {
	font-size: 12px;
	color: var(--paj-text-subtle);
}
.paj-compare-bar .paj-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	/* right padding reserves room for the hover × cue */
	padding: 4px 24px 4px 8px;
	background: var(--paj-bg-subtle);
	border: 1px solid var(--paj-border);
	border-radius: var(--paj-radius-sm);
	max-width: 220px;
	cursor: pointer;
	transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.paj-compare-bar .paj-item:hover,
.paj-compare-bar .paj-item:focus-visible {
	background: var(--paj-error-bg);
	border-color: var(--paj-error);
	outline: none;
}
.paj-compare-bar .paj-item:hover span,
.paj-compare-bar .paj-item:focus-visible span {
	color: var(--paj-error-text);
}
/* × cue (shape, not color alone) fades in on hover/focus */
.paj-compare-bar .paj-item::after {
	content: "\00d7";
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
	color: var(--paj-error);
	opacity: 0;
	transition: opacity .15s ease-out;
}
.paj-compare-bar .paj-item:hover::after,
.paj-compare-bar .paj-item:focus-visible::after {
	opacity: 1;
}
.paj-compare-bar .paj-item img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: var(--paj-radius-xs);
}
.paj-compare-bar .paj-item span {
	font-size: 14px;
	color: var(--paj-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.paj-compare-bar .paj-counter {
	font-size: 16px;
	font-weight: 600;
	color: var(--paj-text);
}
.paj-compare-bar .paj-go {
	min-height: 44px;
	margin: 0;
	padding: 8px 24px;
	font-family: var(--paj-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--paj-navy);
	background: var(--paj-orange-btn);
	border: none;
	border-radius: var(--paj-radius-sm);
	cursor: pointer;
	transition: background-color .18s ease-out;
}
.paj-compare-bar .paj-go:hover {
	background: var(--paj-orange-btn-hover);
}
.paj-compare-bar .paj-go:focus-visible {
	outline: 2px solid var(--paj-focus);
	outline-offset: 2px;
}
.paj-compare-bar .paj-go[disabled] {
	background: var(--paj-disabled-bg);
	color: var(--paj-disabled-label);
	cursor: not-allowed;
}

/* ============================================================
   Toast — dark surface, inverse text
   ============================================================ */
.paj-toast {
	position: fixed;
	left: 50%;
	bottom: 96px;
	transform: translateX(-50%);
	z-index: 10000;
	padding: 12px 24px;
	font-family: var(--paj-font);
	font-size: 14px;
	color: var(--paj-text-inverse);
	background: var(--paj-navy);
	border-radius: var(--paj-radius-sm);
	box-shadow: var(--paj-shadow-1);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease-out;
}
.paj-toast.is-visible {
	opacity: 1;
}

/* ============================================================
   Compare page — picker + table
   ============================================================ */
.paj-compare-page {
	font-family: var(--paj-font);
	color: var(--paj-text);
}
.paj-col-select {
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	font-family: var(--paj-font);
	font-size: 14px;
	color: var(--paj-text);
	background: var(--paj-white);
	border: 1px solid var(--paj-border);
	border-radius: var(--paj-radius-md);
	cursor: pointer;
	transition: border-color .15s ease-out;
}
.paj-col-select:hover {
	border-color: var(--paj-border-hover);
}
.paj-col-select:focus-visible {
	outline: none;
	border-color: var(--paj-focus);
	box-shadow: 0 0 0 2px var(--paj-focus);
}

/* Table */
.paj-compare-result {
	overflow-x: auto;
}
.paj-compare-table {
	width: 100%;
	max-width: 1024px;
	margin: 16px auto;
	/* fixed layout + colgroup keep every product column the same fixed width */
	table-layout: fixed;
	border-collapse: collapse;
	min-width: 720px;
	background: var(--paj-white);
	/* height:1px gives header cells a resolvable base so .paj-card height:100%
	   stretches to the tallest card and its bottom row aligns across columns */
	height: 1px;
}
.paj-compare-table col.paj-col-labels {
	width: 160px;
}
.paj-compare-table th,
.paj-compare-table td {
	padding: 16px;
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	color: var(--paj-text);
	overflow-wrap: break-word;
}
/* Row label column — right-aligned, subtle (screenshot style) */
.paj-compare-table .paj-row-label {
	text-align: right;
	font-weight: 600;
	letter-spacing: -0.25px;
	color: var(--paj-text-subtle);
	width: 180px;
}
/* Full-row zebra, borderless */
.paj-compare-table tbody tr:nth-child(odd) th,
.paj-compare-table tbody tr:nth-child(odd) td {
	background: var(--paj-bg-subtle);
}
/* Header cards sit on white, top-aligned */
.paj-compare-table thead th {
	background: var(--paj-white);
	vertical-align: top;
}
.paj-compare-table th.paj-col {
	position: relative;
	padding: 16px;
	/* give the cell a resolvable height so .paj-card height:100% stretches */
	height: 100%;
}

/* Product card */
.paj-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
}
.paj-card-media {
	position: relative;
	width: 100%;
}
.paj-card-media img {
	max-width: 100%;
	height: auto;
}
/* Color swatches (variable products) */
.paj-swatches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.paj-swatch {
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--paj-border);
	border-radius: var(--paj-radius-xs);
	background: var(--paj-white);
	cursor: pointer;
	transition: border-color .15s ease-out;
}
.paj-swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.paj-swatch:hover {
	border-color: var(--paj-border-hover);
}
.paj-swatch.is-active {
	border: 2px solid var(--paj-navy);
}
.paj-swatch:focus-visible {
	outline: 2px solid var(--paj-focus);
	outline-offset: 1px;
}
/* Title-as-select: the swap control styled as the card title (top of card) */
.paj-card .paj-title-select {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-align-last: center;
	color: var(--paj-text);
	background-color: var(--paj-white);
	border: 1px solid var(--paj-navy);
	-webkit-appearance: none;
	appearance: none;
	padding-left: 32px;
	padding-right: 32px;
	/* custom down-chevron (navy) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a2839' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}
.paj-col-empty .paj-title-select {
	color: var(--paj-text-subtle);
}
.paj-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: var(--paj-text-subtle);
	/* push rating + price + view to the card bottom so columns align */
	margin-top: auto;
}
/* Overlaid star bar */
.paj-stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	color: var(--paj-border);
}
.paj-stars::before { content: "★★★★★"; }
.paj-stars > span {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--paj-orange);
}
.paj-stars > span::before { content: "★★★★★"; }
.paj-card-price {
	font-size: 16px;
	font-weight: 600;
	color: var(--paj-text);
}
.paj-card-price del {
	margin-right: 4px;
	font-weight: 400;
	color: var(--paj-text-subtle);
}
.paj-card-price ins {
	text-decoration: none;
	color: var(--paj-orange);
}
/* View product — navy primary link */
.paj-view {
	display: inline-block;
	padding: 16px 24px;
	font-family: var(--paj-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--paj-text-inverse);
	background: var(--paj-navy);
	border-radius: var(--paj-radius-sm);
	text-decoration: none;
	transition: background-color .18s ease-out;
}
.paj-view:hover {
	background: var(--paj-navy-hover);
	color: var(--paj-text-inverse);
}
.paj-view:focus-visible {
	outline: 2px solid var(--paj-focus);
	outline-offset: 2px;
}
.paj-card .paj-col-select {
	width: 100%;
	min-width: 0;
}
/* Remove column — top-right corner of the product image */
.paj-compare-table .paj-col-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	line-height: 1;
	color: var(--paj-text);
	cursor: pointer;
	border-radius: 999px;
	transition: color .15s ease-out, background-color .15s ease-out;
}
.paj-compare-table .paj-col-remove:hover {
	color: var(--paj-error);
	background: var(--paj-bg-subtle);
}
.paj-compare-table .paj-col-remove:focus-visible {
	outline: 2px solid var(--paj-focus);
	outline-offset: 1px;
}
/* Yes/no checkmark */
.paj-check {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	color: var(--paj-navy);
}

/* Empty slot — add-product select on top, dashed placeholder media below */
.paj-card-empty {
	justify-content: flex-start;
}
.paj-add-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 140px;
	border: 2px dashed var(--paj-border);
	border-radius: var(--paj-radius-md);
}
.paj-add-icon {
	font-size: 32px;
	line-height: 1;
	color: var(--paj-text-subtle);
}
.paj-empty-cell {
	color: var(--paj-text-subtle);
}
/* Loaders */
@keyframes paj-spin { to { transform: rotate(360deg); } }
.paj-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 2px solid var(--paj-border);
	border-top-color: var(--paj-navy);
	border-radius: 999px;
	animation: paj-spin .7s linear infinite;
}
.paj-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
/* Per-column loading during swap/add */
.paj-compare-table td.paj-cell-loading,
.paj-compare-table th.paj-col.paj-cell-loading .paj-card {
	opacity: .35;
	transition: opacity .15s ease-out;
}
.paj-compare-table th.paj-col.paj-cell-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border: 2px solid var(--paj-border);
	border-top-color: var(--paj-navy);
	border-radius: 999px;
	animation: paj-spin .7s linear infinite;
}

@media (max-width: 600px) {
	/* Narrower label + tighter min-width so a slice of the 2nd column peeks in,
	   signalling horizontal scroll. */
	.paj-compare-table {
		min-width: 712px;
	}
	.paj-compare-table col.paj-col-labels {
		width: 120px;
	}
	.paj-compare-table .paj-row-label {
		width: 120px;
	}
	.paj-card .paj-title-select {
		font-size: 13px;
	}
	.paj-view {
		font-size: 12px;
	}
	.paj-compare-bar {
		gap: 12px;
		padding: 12px 16px;
	}
	.paj-compare-bar .paj-item span {
		max-width: 96px;
	}
}

/* Respect reduced motion — PAJ is a trust brand, motion is non-essential. */
@media (prefers-reduced-motion: reduce) {
	.paj-compare-btn,
	.paj-compare-bar,
	.paj-toast,
	.paj-compare-bar .paj-go,
	.paj-compare-bar .paj-item,
	.paj-col-remove,
	.paj-col-select {
		transition: none;
	}
	.paj-spinner,
	.paj-compare-table th.paj-col.paj-cell-loading::after {
		animation: none;
	}
}