/**
 * Product category archive (taxonomy-product_cat.php).
 *
 * Grid, breadcrumb, subcategory chips, and the per-card compatibility
 * summary. Tokens are defined in main.css — see DESIGN.md.
 */

.lemon-category__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	margin: var(--space-md) 0 var(--space-lg);
	font-size: var(--text-sm);
	color: var(--muted);
}

.lemon-category__breadcrumb a {
	color: var(--muted);
	text-decoration: none;
	transition: color 140ms ease;
}

.lemon-category__breadcrumb a:hover {
	color: var(--accent);
}

.lemon-category__breadcrumb-sep {
	color: var(--muted);
	opacity: 0.6;
}

.lemon-category__breadcrumb-current {
	color: var(--text);
}

/* Subcategory chips — the inbound links that get child terms crawled. */
.lemon-category__subcats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0 0 var(--space-xl);
}

.lemon-category__subcat {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font-size: var(--text-sm);
	text-decoration: none;
	transition: border-color 140ms ease, color 140ms ease;
}

.lemon-category__subcat:hover {
	border-color: rgba(241, 178, 79, 0.36);
	color: var(--accent);
}

/* Cross-links between top-level categories, below the product grid. */
.lemon-category__browse {
	margin-top: var(--space-2xl);
}

.lemon-category__browse-title {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

/* Product grid */
.lemon-category__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-lg);
	margin: 0 0 var(--space-2xl);
	padding: 0;
	list-style: none;
}

.lemon-category__card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)), rgba(255, 255, 255, 0.035);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	transition: transform 140ms ease, border-color 140ms ease;
}

.lemon-category__card:hover {
	transform: translateY(-2px);
	border-color: rgba(241, 178, 79, 0.36);
}

.lemon-category__card-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-md);
	color: var(--text);
	text-decoration: none;
}

.lemon-category__card-media {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--space-xs);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.lemon-category__card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lemon-category__card-title {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	letter-spacing: var(--font-display-tracking-tight);
	line-height: 1.2;
}

.lemon-category__card-price {
	color: var(--accent);
	font-size: var(--text-xl);
}

.lemon-category__card-price del {
	color: var(--muted);
	font-size: var(--text-base);
	margin-right: var(--space-2xs);
}

/* Per-card compatibility summary — the core buying signal. */
.lemon-category__compat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	margin-top: auto;
	padding: var(--space-sm) var(--space-md) var(--space-md);
	border-top: 1px solid var(--border);
	font-size: var(--text-xs);
}

.lemon-category__compat-count {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.6rem;
	border: 1px solid rgba(72, 166, 102, 0.3);
	border-radius: 999px;
	background: rgba(72, 166, 102, 0.12);
	color: #c8f0d4;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.lemon-category__compat-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.lemon-category__compat-link {
	color: var(--muted);
	text-decoration: none;
	transition: color 140ms ease;
}

.lemon-category__compat-link:hover {
	color: var(--accent);
}

.lemon-category__empty {
	margin: var(--space-2xl) 0;
	color: var(--muted);
}

/* ── Module-reactive verdict badges ──────────────────────────────
 * Server renders the neutral "Fits N modules" block (.lemon-category__compat).
 * When the visitor has a module selected, initCompatBadges() (assets/main.js)
 * fills .lemon-category__compat-badge with the per-module verdict and flags
 * the card .is-module-active; CSS swaps which block is shown. No module → the
 * neutral block stays. */
.lemon-category__compat-badge {
	display: none;
}

.lemon-category__card.is-module-active .lemon-category__compat {
	display: none;
}

.lemon-category__card.is-module-active .lemon-category__compat-badge {
	display: block;
	margin-top: auto;
	padding: var(--space-sm) var(--space-md) var(--space-md);
	border-top: 1px solid var(--border);
}

/* Reuse the verdict-pill styling (emitted by buildCatalogCompatBadge), but lay
 * the pills out in-flow inside the card slot rather than absolutely over an
 * image as the retired /shop catalog did. */
.lemon-category__compat-badge .lemon-catalog__card-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
}

.lemon-catalog__card-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.lemon-catalog__card-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	line-height: 1;
}

.lemon-catalog__card-badge--works {
	border-color: rgba(72, 166, 102, 0.45);
	background: rgba(26, 50, 34, 0.88);
	color: #c8f0d4;
}

.lemon-catalog__card-badge--partial {
	border-color: rgba(241, 178, 79, 0.5);
	background: rgba(61, 44, 18, 0.88);
	color: #ffe0ae;
}

.lemon-catalog__card-badge--not-supported {
	border-color: rgba(221, 96, 96, 0.5);
	background: rgba(57, 24, 24, 0.88);
	color: #f7c5c5;
}

/* Card-level tint + dimming mirror the retired catalog: the border reflects
 * the best available fit; not-supported cards hard-dim, partial soft-dim. */
.lemon-category__card--works {
	border-color: rgba(72, 166, 102, 0.4);
}

.lemon-category__card--partial {
	border-color: rgba(241, 178, 79, 0.4);
}

.lemon-category__card--not-supported {
	border-color: rgba(221, 96, 96, 0.3);
}

.lemon-category__card--dimmed {
	opacity: 0.45;
}

.lemon-category__card--dimmed:hover {
	opacity: 0.7;
}

.lemon-category__card--soft-dim {
	opacity: 0.8;
}

.lemon-category__card--soft-dim:hover {
	opacity: 1;
}

/* ── /shop hub: top-level category cards ─────────────────────────── */
.lemon-shop-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-lg);
	margin: 0 0 var(--space-2xl);
	padding: 0;
	list-style: none;
}

.lemon-shop-hub__card {
	display: flex;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)), rgba(255, 255, 255, 0.035);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	transition: transform 140ms ease, border-color 140ms ease;
}

.lemon-shop-hub__card:hover {
	transform: translateY(-2px);
	border-color: rgba(241, 178, 79, 0.36);
}

.lemon-shop-hub__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	width: 100%;
	padding: var(--space-md);
	color: var(--text);
	text-decoration: none;
}

.lemon-shop-hub__media {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--space-xs);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.lemon-shop-hub__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lemon-shop-hub__name {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	letter-spacing: var(--font-display-tracking-tight);
	font-size: var(--text-lg);
	line-height: 1.2;
}

.lemon-shop-hub__count {
	font-size: var(--text-sm);
	color: var(--muted);
}