/* Striker Style — components: sections, bands, hero, kit wall, tiles, chips,
   product cards, badges, disclosure, assurance, reviews, modal, pagination. */

/* Sections and bands */
.section { padding-block: var(--section); }

.section.alignfull,
.alignfull.is-style-band-ink,
.alignfull.is-style-band-cloud { padding-inline: var(--gutter); }

.section-title { margin: 0 0 var(--s-5); }

.section-head { gap: var(--s-4); margin-bottom: var(--s-5); }

.section-head .section-title { margin: 0; }

/* Grouped content (FAQ groups): space before each subsequent group heading. */
.faq .section-title:not(:first-child),
.entry-content > .section-title:not(:first-child) { margin-top: var(--s-7); }

.section-head .section-link,
.section-link { margin: 0; font-weight: 500; white-space: nowrap; }

.is-style-band-ink { background: var(--c-ink); color: #fff; }

.is-style-band-ink :is(h1, h2, h3, h4, p, li, a:not(.wp-block-button__link)) { color: #fff; }

.is-style-band-ink .has-mute-color,
.is-style-band-ink small { color: var(--c-stone); }

.is-style-band-cloud { background: var(--c-cloud); }

.entry-content .is-style-band-cloud p { color: var(--c-ink); }

.utility-band { padding-block: var(--s-2); }

.utility-band p { margin: 0; }

/* Heading block styles */
.is-style-display,
h1.is-style-display { font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.005em; }

h2.is-style-eyebrow,
h3.is-style-eyebrow { font: 600 var(--fs-label) / 1.4 var(--f-body); letter-spacing: 0.06em; }

/* Button block styles */
.wp-block-button.is-style-pill-secondary .wp-block-button__link {
	background: var(--c-cloud);
	color: var(--c-ink);
}

.wp-block-button.is-style-pill-secondary .wp-block-button__link:hover { background: var(--c-hairline-soft); }

.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 10.5px 30.5px;
	border: 1.5px solid var(--c-ink);
	background: #fff;
	color: var(--c-ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--c-ink); color: #fff; }

.wp-block-button.is-style-on-ink .wp-block-button__link { background: #fff; color: var(--c-ink); }

.wp-block-button.is-style-on-ink .wp-block-button__link:hover {
	background: var(--c-hairline-soft);
	color: var(--c-ink);
}

.wp-block-button.is-style-on-ink .wp-block-button__link:focus-visible { outline-color: #fff; }

.wp-block-buttons { gap: var(--s-2); }

/* List style: checks */
.is-style-checks { padding-left: 0; list-style: none; }

.is-style-checks li { position: relative; padding-left: 32px; }

.is-style-checks li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--c-success);
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}


/* Hero + kit wall */
.hero { padding-top: var(--s-5); }

.hero__cols { gap: var(--s-6) var(--s-7); }

.hero__text .is-style-display { margin: 0 0 var(--s-4); }

.hero__lead { max-width: 36ch; margin: 0 0 var(--s-5); font-size: 1.125rem; }

.entry-content .hero__lead { color: var(--c-charcoal); }

.kit-wall {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--s-2);
}

.kit-wall--1 { grid-template-columns: 1fr; grid-template-rows: auto; }

.kit-wall--2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

.kit-wall__item {
	display: block;
	aspect-ratio: 1;
	min-width: 0;
	background: var(--c-stage);
}

.kit-wall--3 .kit-wall__item:first-child { grid-row: span 2; aspect-ratio: auto; }

.kit-wall__img { width: 100%; height: 100%; object-fit: contain; }

/* Category tiles */
.cat-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-6) var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-tile { display: block; color: var(--c-ink); text-decoration: none; }

.cat-tile__media {
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: var(--s-3);
	background: var(--c-stage);
}

.cat-tile__media img { width: 100%; height: 100%; object-fit: contain; }

.cat-tile--photo .cat-tile__media img { object-fit: cover; }

.cat-tile__name { display: block; font: 600 22px / 1.1 var(--f-display); text-transform: uppercase; }

.cat-tile:hover .cat-tile__name {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.cat-tile__count { color: var(--c-mute); font-size: var(--fs-caption); font-weight: 500; }

@media (min-width: 600px) {
	.cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}

@media (min-width: 1024px) {
	.cat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Chips */
.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 48px;
	padding: 0 var(--s-5);
	border-radius: var(--r-pill);
	background: var(--c-cloud);
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease);
}

.chip:hover { background: var(--c-hairline-soft); }

.chip__count { color: var(--c-mute); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }

.chip--active {
	min-height: 40px;
	padding: 0 var(--s-3) 0 var(--s-4);
	background: var(--c-ink);
	color: #fff;
	font-size: var(--fs-caption);
}

.chip--active:hover { background: var(--c-charcoal); }

.chip--active .icon { width: 16px; height: 16px; }

.chip-clear {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--s-2);
	font-size: var(--fs-caption);
	font-weight: 500;
}

.chips { margin-block: var(--s-4); }

@media (min-width: 1024px) {
	.wp-block-striker-club-chips .chip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.wp-block-striker-club-chips .chip { justify-content: space-between; width: 100%; }
}

/* Product grid + card (WooCommerce loop markup, design.md §6) */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-6) var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products::before,
ul.products::after { display: none; }

@media (min-width: 600px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}

@media (min-width: 1024px) {
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
}

.card__media {
	position: relative;
	aspect-ratio: 1;
	margin-bottom: var(--s-2);
	overflow: hidden;
	background: var(--c-stage);
}

.card__img { width: 100%; height: 100%; object-fit: contain; }

.card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	li.product:hover .card__img--alt { opacity: 1; }
}

.stage-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--c-stage);
}

li.product .card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font: 500 var(--fs-body) / 1.5 var(--f-body);
	text-transform: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.card__link { color: var(--c-ink); text-decoration: none; }

.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

li.product:hover .card__link { text-decoration: underline; text-decoration-thickness: 1px; }

.card__subtitle,
.card__sizes {
	margin: 0;
	color: var(--c-mute);
	font-size: var(--fs-caption);
	font-weight: 500;
}

li.product .price { display: block; margin: 0; }

li.product .star-rating { margin: 0; }

/* Plugin controls inside cards stay clickable above the stretched link. */
li.product :is(.yith-wcwl-add-to-wishlist, .yith-add-to-wishlist-button-block, .button, .added_to_cart) {
	position: relative;
	z-index: 2;
}

li.product :is(.yith-wcwl-add-to-wishlist, .yith-add-to-wishlist-button-block) {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	margin: 0;
}

/* Badge (max one per card) */
.badge {
	position: absolute;
	top: var(--s-2);
	left: var(--s-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--c-ink);
	font: 600 var(--fs-label) / 1.4 var(--f-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.badge--sale::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-sale);
}

/* Disclosure rows (theme details + core/details "Disclosure row") */
.disclosure,
.wp-block-details.is-style-disclosure,
.filter-group { border-bottom: 1px solid var(--c-hairline); }

.disclosure__summary,
.wp-block-details.is-style-disclosure > summary,
.filter-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-5) 0;
	font: 600 var(--fs-body) / 1.5 var(--f-body);
	list-style: none;
	cursor: pointer;
}

.disclosure__summary::-webkit-details-marker,
.wp-block-details.is-style-disclosure > summary::-webkit-details-marker,
.filter-group__summary::-webkit-details-marker { display: none; }

.disclosure__body,
.wp-block-details.is-style-disclosure > :not(summary) { padding-bottom: var(--s-5); }

.entry-content .wp-block-details.is-style-disclosure > * + * { margin-top: 0; }

.faq .wp-block-details.is-style-disclosure:first-of-type { border-top: 1px solid var(--c-hairline); }

/* Assurance strip */
.assurance__grid { gap: var(--s-5) var(--s-6); }
/* Explicit columns instead of WordPress's auto-fill grid: one column on phones, three equal columns
   (the strip's three items) from 768 px. WordPress's min()/% minmax inside an inline-size container
   collapsed items to one letter per line on iPhone Safari, so containment is switched off too. */
.wp-block-group.assurance__grid { grid-template-columns: 1fr; container-type: normal; }
@media (min-width: 768px) {
	.wp-block-group.assurance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.assurance__item { padding-top: var(--s-4); border-top: 1px solid var(--c-hairline); }

.assurance__item::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: var(--s-3);
	background: var(--c-ink);
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}

.has-icon-truck::before { -webkit-mask-image: var(--i-truck); mask-image: var(--i-truck); }

.has-icon-card::before { -webkit-mask-image: var(--i-card); mask-image: var(--i-card); }

.has-icon-shield::before { -webkit-mask-image: var(--i-shield); mask-image: var(--i-shield); }

.has-icon-help::before { -webkit-mask-image: var(--i-help); mask-image: var(--i-help); }

.assurance__item > * { margin: 0; }

.entry-content .assurance__item > * + * { margin-top: var(--s-1); }

.assurance__title { font-weight: 600; }

.entry-content .assurance__title { color: var(--c-ink); }

.assurance__text { font-size: var(--fs-caption); }

/* Callout band */
.callout__inner { gap: var(--s-5); }

.callout__text > * { margin: 0; }

.callout__text > * + * { margin-top: var(--s-3); }

/* Policy header / editorial / empty state */
.policy-header { padding-top: var(--s-7); }

.policy-header .wp-block-post-title {
	margin: var(--s-2) 0 0;
	font-family: var(--f-display);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 0.95;
	text-transform: uppercase;
}

.empty-state { padding-block: var(--s-7); }

.empty-state > * + * { margin-top: var(--s-4); }

.empty-state .chips { margin-top: var(--s-6); }

/* Reviews (real reviews only) */
.reviews .section-title { margin-bottom: var(--s-5); }

.review-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.review-card { padding: var(--s-5); background: var(--c-cloud); }

.review-card__text { margin: var(--s-3) 0; padding: 0; border: 0; }

.review-card__meta { margin: 0; color: var(--c-mute); font-size: var(--fs-caption); }

.star-rating {
	position: relative;
	display: inline-block;
	width: 5.5em;
	height: 1.1em;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.1;
	letter-spacing: 0.1em;
}

.star-rating::before,
.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--c-hairline);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding-top: 1.5em;
	overflow: hidden;
}

.star-rating span::before { color: var(--c-ink); }

/* Modal (size guide) */
.modal {
	width: min(720px, calc(100vw - 32px));
	max-height: min(90dvh, 900px);
	padding: 0;
	border: 0;
	background: #fff;
	box-shadow: var(--sh-overlay);
}

.modal__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
	border-bottom: 1px solid var(--c-hairline-soft);
	background: #fff;
}

.modal__title { margin: 0; font-size: var(--fs-h3); }

.modal__body { padding: var(--s-5); }

.modal__body > * { max-width: none; }

/* Pagination (WooCommerce + posts) */
.woocommerce-pagination,
.navigation.pagination { margin-top: var(--s-7); }

.woocommerce-pagination ul.page-numbers,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-width: 40px;
	height: 40px;
	padding: 0 var(--s-3);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

a.page-numbers:hover { background: var(--c-cloud); }

.page-numbers.current { background: var(--c-ink); color: #fff; }

.page-numbers .icon { width: 20px; height: 20px; }

/* Breadcrumb */
.breadcrumb {
	padding-top: var(--s-5);
	color: var(--c-mute);
	font-size: var(--fs-caption);
	font-weight: 500;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li + li::before { content: "/"; margin: 0 var(--s-2); color: var(--c-hairline); }

.breadcrumb a { color: var(--c-mute); text-decoration: none; }

.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }

/* WCAG 2.2 SC 2.5.8 — minimum 24×24 px targets for non-inline controls. */
.size-guide-link { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; }
.product_meta a,
.product-details .posted_in a,
.product-details .tagged_as a { display: inline-block; min-height: 24px; padding-block: 3px; }
input[type="checkbox"],
input[type="radio"]:not(.var-chip input) { min-width: 24px; min-height: 24px; }
.footer-col__title { min-height: 24px; padding-block: 4px; }

/* Campaign banners (home): photo-led, text bottom-left, white pill — design.md §13.34 */
.wp-block-cover.campaign {
	min-height: clamp(560px, 56.25vw, 900px);
	padding: var(--s-6) var(--gutter, 24px);
	align-items: flex-end;
	justify-content: flex-start;
	margin-block: 0;
}

.campaign-split { gap: var(--s-2); margin-block: 0; }

.campaign-split .wp-block-cover.campaign { min-height: clamp(560px, 62vw, 1100px); }

.wp-block-cover.campaign .wp-block-cover__inner-container { width: 100%; max-width: 1344px; margin-inline: auto; color: #fff; }

.campaign-split .wp-block-cover.campaign .wp-block-cover__inner-container { max-width: none; }

.campaign__title {
	margin: 0 0 var(--s-2);
	max-width: 14ch;
	color: #fff;
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 6vw, 6rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.campaign__title--small { max-width: none; font-family: var(--f-body); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.25; letter-spacing: 0; text-transform: none; }

.campaign__text { margin: 0 0 var(--s-4); max-width: 46ch; color: #fff; font-weight: 500; }

.wp-block-cover.campaign .wp-block-buttons { margin: 0; }

@media (max-width: 767px) {
	.wp-block-cover.campaign,
	.campaign-split .wp-block-cover.campaign { min-height: 125vw; padding: var(--s-5) 16px; }
	.campaign-split { gap: var(--s-1); }
}

/* Contextual FAQs (product, archive and help pages) — inc/faq.php */
.faq-auto { max-width: 880px; margin: var(--s-8) 0 var(--s-6); }

.faq-auto__title { margin-bottom: var(--s-3); }

.faq-auto .wp-block-details p { margin: var(--s-2) 0 var(--s-3); }

.single-product .faq-auto { clear: both; padding-top: var(--s-2); }

.entry-content .faq-auto { margin-inline: auto; max-width: 720px; }

/* Promo banners (striker/promo-banner): artwork carries headline + button; whole banner is the link. */
.promo-banner { margin-block: 0; line-height: 0; }

.promo-banner img { display: block; width: 100%; height: auto; }

.promo-banner__link { display: block; }

.promo-banner__link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -6px; }

.promo-banner__link:hover img { filter: brightness(1.03); }

/* Campaign banners (striker/campaign, design.md §13 d38): Nike-style full-bleed image; headline
   block centred below it, or bottom-left over it on ≥768 px. Phones always put the text below. */
.spot { position: relative; margin-block: 0; }

.spot__media { display: block; line-height: 0; }

.spot__media img { display: block; width: 100%; height: auto; }

.spot__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-6) var(--gutter) var(--s-7);
	text-align: center;
}

.spot__eyebrow { margin: 0; font-size: var(--fs-caption); font-weight: 500; }

.spot__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.spot__text { max-width: 56ch; margin: 0; }

.spot__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }

.spot__btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 20px;
	border-radius: var(--r-pill);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.spot__btn--primary { background: var(--c-ink); color: #fff; }

.spot__btn--primary:hover { background: var(--c-charcoal); color: #fff; }

.spot__btn--secondary { background: var(--c-cloud); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-hairline); }

.spot__btn--secondary:hover { background: var(--c-hairline-soft); color: var(--c-ink); }

.spot__btn:focus-visible,
.spot__media:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

@media (min-width: 768px) {
	.spot--overlay .spot__content {
		position: absolute;
		bottom: 0;
		left: 0;
		align-items: flex-start;
		max-width: min(480px, 38%);
		padding: var(--s-7) var(--gutter);
		text-align: left;
	}

	.spot--overlay .spot__title { font-size: clamp(2.5rem, 1.4rem + 2.6vw, 4rem); }

	.spot--overlay .spot__buttons { justify-content: flex-start; }

	.spot--overlay.spot--light .spot__content { color: #fff; }

	.spot--overlay.spot--light :is(.spot__title, .spot__eyebrow, .spot__text) { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

	.spot--overlay.spot--light .spot__btn--primary { background: #fff; color: var(--c-ink); }

	.spot--overlay.spot--light .spot__btn--primary:hover { background: var(--c-hairline-soft); }

	.spot--overlay.spot--light .spot__btn--secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

	.spot--overlay.spot--light .spot__btn--secondary:hover { background: rgba(255, 255, 255, 0.15); }
}

/* Home sections that follow a campaign banner sit closer to it (Nike rhythm). */
.spot + .section { padding-top: var(--s-5); }

/* Product carousels (striker/product-row "carousel"): scroll-snap row, cards peek on phones. */
.product-row--carousel ul.products {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: var(--s-4) var(--s-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: none;
}

.product-row--carousel ul.products::-webkit-scrollbar { display: none; }

.product-row--carousel ul.products li.product { scroll-snap-align: start; }

@media (min-width: 600px) {
	.product-row--carousel ul.products { grid-auto-columns: calc((100% - 2 * var(--s-3)) / 2.4); }
}

@media (min-width: 1024px) {
	.product-row--carousel ul.products { grid-auto-columns: calc((100% - 2 * var(--s-3)) / 3); }
}

.section-head:has(.carousel-nav) .section-link { margin-left: auto; }

.carousel-nav { display: none; gap: var(--s-2); }

@media (min-width: 1024px) {
	.carousel-nav:not([hidden]) { display: flex; }
}

.carousel-nav__btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-cloud);
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease);
}

.carousel-nav__btn:hover:not(:disabled) { background: var(--c-hairline-soft); }

.carousel-nav__btn:disabled { color: var(--c-stone); cursor: default; }

.carousel-nav__btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Trending grid (striker/trending): small square shirt shots, one per club. */
.trending__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-1);
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.trending__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-2); }
}

.trending__link { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--c-stage); }

.trending__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }

.trending__link:hover img { transform: scale(1.04); }

.trending__link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.trending__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section--centred-head .section-title { text-align: center; }

/* Customer DM wall (striker/review-wall): ink band, two rows sliding in opposite directions. */
.review-wall {
	padding-block: var(--s-8);
	overflow: hidden;
	background: var(--c-ink);
	color: #fff;
}

.review-wall__head { max-width: 640px; margin: 0 auto var(--s-6); padding-inline: var(--gutter); text-align: center; }

.review-wall__title { margin: 0; color: #fff; font: 700 var(--fs-h2) / 1 var(--f-display); text-transform: uppercase; }

.review-wall .review-wall__text { margin: var(--s-2) 0 0; color: var(--c-stone); }

.review-wall__row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.review-wall__row + .review-wall__row { margin-top: var(--s-4); }

.review-wall__track {
	display: flex;
	gap: var(--s-4);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: review-wall-slide var(--rw-duration, 60s) linear infinite;
}

.review-wall__row--reverse .review-wall__track { animation-direction: reverse; }

.review-wall__row:hover .review-wall__track,
.review-wall__row:focus-within .review-wall__track { animation-play-state: paused; }

@keyframes review-wall-slide {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - var(--s-4) / 2)); }
}

.dm-card {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 260px;
	overflow: hidden;
	border: 1px solid #2a2a2c;
	border-radius: 16px;
	background: #19191b;
	color: #fff;
}

@media (min-width: 768px) {
	.dm-card { width: 320px; }
}

.dm-card__shot { aspect-ratio: 1000 / 845; overflow: hidden; background: #0d0d0e; }

.dm-card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.dm-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }

.review-wall .dm-card__stars { margin: 0; color: #f5b301; letter-spacing: 2px; }

.dm-card__quote { margin: 0; padding: 0; border: 0; }

.review-wall .dm-card__quote p { margin: 0; color: #e8e8e8; font-size: var(--fs-caption); line-height: 1.55; }

.dm-card__foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid #2a2a2c; }

.review-wall .dm-card__name { margin: 0; color: #fff; font: 700 1.05rem / 1.2 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }

.review-wall .dm-card__meta,
.review-wall .dm-card__product,
.review-wall .dm-card__note { margin: 2px 0 0; color: var(--c-stone); font-size: var(--fs-label); }

.dm-card__link { display: inline-block; margin-top: 2px; color: #fff; font-size: var(--fs-label); text-decoration: underline; text-underline-offset: 3px; }

.dm-card__link:hover { color: var(--c-stone); }

.dm-card__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.review-wall__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
	.review-wall__track { animation: none; }
	.review-wall__track .dm-card[aria-hidden="true"] { display: none; }
	.dm-card { scroll-snap-align: start; }
}