/*
 * NCP Search 0.3.0 — the card. SIGNATURE-2 + POOL-27 Part F, F8 (docs/recon/site-search-3.md §E.5, §E.6).
 *
 * Styles exactly what assets/ncp-s2-card.js and includes/class-ncp-search-render.php draw: the card (.s2-card, grid and
 * list), the compact row (.s2-row), the skeletons (.s2-skel), the price (.s2-price, .s2-see-price), the stock line
 * (.s2-stock, .s2-dot), the spec chips (.s2-chips), .s2-fits, .s2-section-label, .s2-rating — and the grid that holds
 * cards on a collection page (.s2-grid; the results page refines it in ncp-s2-results.css).
 *
 * ⚠ ONLY THE CORE TOKENS (ncp-s2-core.css): no colour of its own, no gradient, no coloured box — hairline borders, a
 * shadow only on hover, motion only on opacity, under 200 ms, and none when the device asks for reduced motion. Every
 * size that prints text is a token with its floor as the fallback: meta 13 px (core makes it 14 px at ≤ 768 px), title
 * 15 px / 500 on two lines, price 19 px / 700 with tabular numbers. Spacing sits on the 8 px grid (4 px only between an
 * icon and its words).
 *
 * ⚠ EVERY RULE IS SCOPED under .ncp-s2 (R11): nothing here reaches the theme's own pages. The grid's rules are written
 * with :where() so the results page's own grid rules (loaded after) win without a fight.
 *
 * ⚠ THE WHOLE CARD IS THE LINK: .s2-card__link::after covers the card (z-index 1); the button, the corner icons,
 * "See price" and the "Often bought with" link sit above it (z-index 2). The badge lets clicks through.
 */

/* ── the grid that holds cards: 2 a row on a phone, never more than 5, never a card under 240 px (R12) ──────────── */

:where(.ncp-s2) .s2-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 4 * var(--s2-gap, 24px)) / 5)), 1fr));
	gap: var(--s2-gap, 24px);
	margin: 0;
	padding: 0;
}

:where(.ncp-s2) .s2-grid--list {
	grid-template-columns: minmax(0, 1fr);
}

/* ── the card ──────────────────────────────────────────────────────────────────────────────────────────────────── */

.ncp-s2 .s2-card,
.ncp-s2 .s2-skel--card,
.ncp-s2 .s2-skel--list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s2-sp-2, 16px);
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: var(--s2-card-pad, 16px);
	color: var(--s2-text);
	text-align: start;
	background: var(--s2-bg);
	border: 1px solid var(--s2-line);
	border-radius: var(--s2-radius, 8px);
}

.ncp-s2 .s2-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--s2-bg);
}

.ncp-s2 .s2-card__img,
.ncp-s2 .s2-card__img2 {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	object-position: center;
	background: var(--s2-bg);
}

.ncp-s2 .s2-card__img2 {
	opacity: 0;
	transition: opacity var(--s2-dur, 160ms) var(--s2-ease, ease-out);
}

.ncp-s2 .s2-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--s2-mute);
}

/* One badge, top-left; clicks go through it to the card's link. */
.ncp-s2 .s2-card__flag {
	position: absolute;
	top: var(--s2-sp-1, 8px);
	left: var(--s2-sp-1, 8px);
	box-sizing: border-box;
	max-width: calc(100% - 64px);
	padding: 0 var(--s2-sp-1, 8px);
	overflow: hidden;
	font-size: var(--s2-meta-size, 13px);
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--s2-text);
	background: var(--s2-bg);
	border: 1px solid var(--s2-line);
	border-radius: var(--s2-btn-radius, 8px);
	pointer-events: none;
}

/* Compare and wishlist: quiet icons on the image corner. */
.ncp-s2 .s2-card__icons {
	position: absolute;
	top: var(--s2-sp-1, 8px);
	right: var(--s2-sp-1, 8px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--s2-sp-1, 8px);
}

.ncp-s2 .s2-card__icons .s2-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	color: var(--s2-mute);
	text-decoration: none;
	background: var(--s2-bg);
	border: 1px solid var(--s2-line);
	border-radius: 50%;
	cursor: pointer;
}

.ncp-s2 .s2-card__icons .s2-icon-btn[aria-pressed="true"] {
	color: var(--s2-text);
	border-color: var(--s2-text);
}

.ncp-s2 .s2-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--s2-sp-1, 8px);
	min-width: 0;
}

/* The brand in small capitals, muted; the section of a paired store beside it (F7). */
.ncp-s2 .s2-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2-sp-1, 8px);
	min-height: 24px;
	font-size: var(--s2-meta-size, 13px);
	line-height: 1.4;
	color: var(--s2-mute);
}

.ncp-s2 .s2-card__brand {
	min-width: 0;
	overflow: hidden;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ncp-s2 .s2-section-label {
	flex: none;
	padding: 0 var(--s2-sp-1, 8px);
	font-size: var(--s2-meta-size, 13px);
	line-height: 22px;
	white-space: nowrap;
	color: var(--s2-mute);
	border: 1px solid var(--s2-line);
	border-radius: 999px;
}

/* The title: medium, two lines, then an ellipsis. The theme's heading styles stop here. */
.ncp-s2 .s2-card__title {
	display: -webkit-box;
	min-height: 2.7em;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: inherit;
	font-size: var(--s2-title-size, 15px);
	font-style: normal;
	font-weight: var(--s2-title-weight, 500);
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: anywhere;
	color: var(--s2-text);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ncp-s2 .s2-card__link,
.ncp-s2 .s2-row__link {
	color: inherit;
	text-decoration: none;
}

.ncp-s2 .s2-card__link::after,
.ncp-s2 .s2-row__link::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	border-radius: var(--s2-radius, 8px);
}

.ncp-s2 .s2-card__link:focus-visible,
.ncp-s2 .s2-row__link:focus-visible {
	outline: none;
}

.ncp-s2 .s2-card__link:focus-visible::after,
.ncp-s2 .s2-row__link:focus-visible::after {
	outline: var(--s2-focus);
	outline-offset: 2px;
}

/* The searched words: weight, not a coloured box. */
.ncp-s2 .s2-card__title mark,
.ncp-s2 .s2-row__title mark {
	padding: 0;
	font-weight: 700;
	color: inherit;
	background: none;
}

/* ── spec chips, "Often bought with" ───────────────────────────────────────────────────────────────────────────── */

.ncp-s2 .s2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2-sp-1, 8px);
	margin: 0;
	padding: 0;
}

.ncp-s2 .s2-chip {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0 var(--s2-sp-1, 8px);
	overflow: hidden;
	font-size: var(--s2-meta-size, 13px);
	font-variant-numeric: tabular-nums;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: top;
	color: var(--s2-text);
	background: var(--s2-bg);
	border: 1px solid var(--s2-line);
	border-radius: 999px;
}

.ncp-s2 .s2-fits {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--s2-meta-size, 13px);
	line-height: 1.4;
	color: var(--s2-mute);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ncp-s2 .s2-fits a {
	position: relative;
	z-index: 2;
	color: var(--s2-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── price, trust, stock, the button ───────────────────────────────────────────────────────────────────────────── */

.ncp-s2 .s2-card__buy {
	display: flex;
	flex-direction: column;
	gap: var(--s2-sp-1, 8px);
}

.ncp-s2 .s2-card__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var(--s2-sp-1, 8px);
	min-height: 24px;
}

.ncp-s2 .s2-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--s2-sp-1, 8px);
	margin: 0;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	color: var(--s2-text);
}

/* The largest thing on the card after the image, in the store's own price style (F8 Look 1: core's N.skin()). */
.ncp-s2 .s2-price__now {
	font-family: var(--s2-price-font, inherit);
	font-size: var(--s2-price-size, 19px);
	font-weight: var(--s2-price-weight, 700);
	color: var(--s2-price-color, var(--s2-text));
}

/* The sale price in the brand's accent — core's text-safe accent, ≥ 4.5 : 1 on the page colour. */
.ncp-s2 .s2-price--sale .s2-price__now {
	color: var(--s2-accent-text, var(--s2-accent));
}

.ncp-s2 .s2-price__was {
	font-size: var(--s2-meta-size, 13px);
	font-weight: 400;
	color: var(--s2-mute);
	text-decoration: line-through;
}

.ncp-s2 .s2-price__save {
	font-size: var(--s2-meta-size, 13px);
	font-weight: 600;
	color: var(--s2-text);
}

/* "See price": the price slot is never empty — the link to the product, in the price's own typeface. */
.ncp-s2 .s2-see-price {
	position: relative;
	z-index: 2;
	font-family: var(--s2-price-font, inherit);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--s2-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ncp-s2 .s2-card__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--s2-sp-1, 8px);
	font-size: var(--s2-meta-size, 13px);
	line-height: 1.4;
	color: var(--s2-mute);
}

.ncp-s2 .s2-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--s2-text);
}

.ncp-s2 .s2-rating__count {
	color: var(--s2-mute);
}

.ncp-s2 .s2-ship {
	white-space: normal;
}

/* Stock in words with a dot: green in stock, amber low, grey to order and out. The words are always there. */
.ncp-s2 .s2-stock {
	display: flex;
	align-items: center;
	gap: var(--s2-sp-1, 8px);
	min-width: 0;
	font-size: var(--s2-meta-size, 13px);
	line-height: 1.4;
	color: var(--s2-text);
}

.ncp-s2 .s2-stock__words {
	min-width: 0;
}

.ncp-s2 .s2-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--s2-grey);
}

.ncp-s2 .s2-stock--in .s2-dot {
	background: var(--s2-in);
}

.ncp-s2 .s2-stock--low .s2-dot {
	background: var(--s2-low);
}

/* One full-width primary button (its colours and type are core's .s2-btn--primary). */
.ncp-s2 .s2-card__cta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	text-align: center;
	text-decoration: none;
	/* a two-up phone card leaves ~93 px: "Added ✓ · View cart" and "View in Fireplaces" wrap inside the button */
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.25;
}

.ncp-s2 .s2-card__cta[aria-busy="true"],
.ncp-s2 .s2-row__cta[aria-busy="true"] {
	cursor: progress;
	opacity: .7;
}

.ncp-s2 .s2-card__cta:focus-visible,
.ncp-s2 .s2-row__cta:focus-visible,
.ncp-s2 .s2-card__icons .s2-icon-btn:focus-visible,
.ncp-s2 .s2-see-price:focus-visible,
.ncp-s2 .s2-fits a:focus-visible {
	outline: var(--s2-focus);
	outline-offset: 2px;
}

/* ── the list view: more specs a row, the price and the button in their own column (F4) ───────────────────────── */

.ncp-s2 .s2-card--list,
.ncp-s2 .s2-skel--list {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--s2-sp-3, 24px);
}

.ncp-s2 .s2-card--list .s2-card__media,
.ncp-s2 .s2-skel--list .s2-skel__media {
	flex: 0 0 200px;
	width: 200px;
}

.ncp-s2 .s2-card--list .s2-card__body,
.ncp-s2 .s2-skel--list .s2-skel__body {
	flex: 1 1 auto;
	align-self: stretch;
}

.ncp-s2 .s2-card--list .s2-card__buy,
.ncp-s2 .s2-skel--list .s2-skel__buy {
	flex: 0 0 240px;
	width: 240px;
}

.ncp-s2 .s2-card--list .s2-card__title {
	min-height: 0;
	font-size: 16px;
}

/* ── the compact row: the desktop panel and the phone list (F3, F5) ────────────────────────────────────────────── */

.ncp-s2 .s2-row,
.ncp-s2 .s2-skel--row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s2-sp-2, 16px);
	box-sizing: border-box;
	min-width: 0;
	min-height: 72px;
	margin: 0;
	padding: var(--s2-sp-1, 8px);
	color: var(--s2-text);
	text-align: start;
}

.ncp-s2 .s2-row__media {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--s2-bg);
}

.ncp-s2 .s2-row__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	object-position: center;
	background: var(--s2-bg);
}

.ncp-s2 .s2-row__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ncp-s2 .s2-row__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--s2-title-size, 15px);
	font-weight: var(--s2-title-weight, 500);
	line-height: 1.35;
	overflow-wrap: anywhere;
	color: var(--s2-text);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ncp-s2 .s2-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--s2-sp-2, 16px);
	min-width: 0;
	font-size: var(--s2-meta-size, 13px);
	line-height: 1.4;
	color: var(--s2-mute);
}

.ncp-s2 .s2-price--row {
	line-height: 1.4;
}

.ncp-s2 .s2-price--row .s2-price__now {
	font-size: 16px;
}

.ncp-s2 .s2-row__sku {
	font-variant-numeric: tabular-nums;
	color: var(--s2-mute);
}

.ncp-s2 .s2-row__cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 64px;
	min-height: 40px;
	margin: 0;
	padding: 0 var(--s2-sp-2, 16px);
	white-space: nowrap;
	text-decoration: none;
}

/* ── skeletons: the same boxes, still (no shimmer — motion is for the shopper's own acts) ──────────────────────── */

.ncp-s2 .s2-skel {
	pointer-events: none;
}

.ncp-s2 .s2-skel__media,
.ncp-s2 .s2-skel__line,
.ncp-s2 .s2-skel__btn {
	display: block;
	background: var(--s2-line);
	opacity: .6;
}

.ncp-s2 .s2-skel__media {
	width: 100%;
	aspect-ratio: 1 / 1;
}

.ncp-s2 .s2-skel__body,
.ncp-s2 .s2-skel__buy {
	display: flex;
	flex-direction: column;
	gap: var(--s2-sp-1, 8px);
}

.ncp-s2 .s2-skel--card .s2-skel__body {
	flex: 1 1 auto;
}

.ncp-s2 .s2-skel__line {
	height: 12px;
	border-radius: 999px;
}

.ncp-s2 .s2-skel__line--meta {
	width: 40%;
}

.ncp-s2 .s2-skel__line--title {
	width: 92%;
	height: 16px;
}

.ncp-s2 .s2-skel__line--title2 {
	width: 64%;
	height: 16px;
}

.ncp-s2 .s2-skel__line--price {
	width: 36%;
	height: 24px;
}

.ncp-s2 .s2-skel__line--stock {
	width: 48%;
}

.ncp-s2 .s2-skel__btn {
	width: 100%;
	height: 44px;
	border-radius: var(--s2-btn-radius, 8px);
}

.ncp-s2 .s2-skel--row .s2-skel__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	aspect-ratio: auto;
}

.ncp-s2 .s2-skel--row .s2-skel__body {
	flex: 1 1 auto;
	gap: 8px;
}

.ncp-s2 .s2-skel--row .s2-skel__btn {
	flex: 0 0 64px;
	width: 64px;
	height: 40px;
}

/* A browser without aspect-ratio keeps the square boxes. */
@supports not (aspect-ratio: 1 / 1) {
	.ncp-s2 .s2-card__media,
	.ncp-s2 .s2-skel__media {
		height: 0;
		padding-top: 100%;
	}

	.ncp-s2 .s2-skel--row .s2-skel__media {
		height: 56px;
		padding-top: 0;
	}
}

/* ── hover: a soft shadow and the second image, only where there is a pointer that hovers ──────────────────────── */

@media (hover: hover) {
	.ncp-s2 .s2-card:hover {
		box-shadow: var(--s2-shadow-hover);
	}

	.ncp-s2 .s2-card:hover .s2-card__img2--ready {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ncp-s2 .s2-card__img2 {
		transition: none;
	}
}

/* ── phone (≤ 768 px): two cards a row, 44 px targets, meta 14 px through core's token (F5) ────────────────────── */

@media (max-width: 768px) {
	:where(.ncp-s2) .s2-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:where(.ncp-s2) .s2-grid--list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ncp-s2 .s2-card__icons .s2-icon-btn {
		width: 44px;
		height: 44px;
	}

	.ncp-s2 .s2-card--list,
	.ncp-s2 .s2-skel--list {
		flex-wrap: wrap;
		gap: var(--s2-sp-2, 16px);
	}

	.ncp-s2 .s2-card--list .s2-card__media,
	.ncp-s2 .s2-skel--list .s2-skel__media {
		flex: 0 0 96px;
		width: 96px;
	}

	.ncp-s2 .s2-card--list .s2-card__body,
	.ncp-s2 .s2-skel--list .s2-skel__body {
		flex: 1 1 0;
		min-width: 0;
	}

	.ncp-s2 .s2-card--list .s2-card__buy,
	.ncp-s2 .s2-skel--list .s2-skel__buy {
		flex: 1 1 100%;
		width: auto;
	}

	.ncp-s2 .s2-row,
	.ncp-s2 .s2-skel--row {
		min-height: 80px;
		padding: var(--s2-sp-1, 8px) 0;
	}

	.ncp-s2 .s2-row__media,
	.ncp-s2 .s2-skel--row .s2-skel__media {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.ncp-s2 .s2-row__cta,
	.ncp-s2 .s2-skel--row .s2-skel__btn {
		min-width: 64px;
		min-height: 44px;
	}

	.ncp-s2 .s2-row__sku {
		display: none;
	}
}