/*
 * petpartners/product-showcase
 *
 * One rail per row: a track of cards that scrolls sideways rather than
 * wrapping onto a second line, the same mechanism as the category rail
 * (category-showcase/style.css) and the manufacturer rail (brand-strip/
 * style.css) — duplicated under this block's own class names rather than
 * shared, for the reason written in view.js. See render.php for why a rail
 * replaced the wrapping grid this row used at a lower card count.
 *
 * The cell is wider than either of those two rails' 11.5rem tiles: this one
 * holds a full product card (image, brand, name, price), not a logo or an
 * icon.
 */

/*
 * `overflow: hidden` on the block's own top-level wrapper (14/10/2026 —
 * real bug, confirmed with a real 375px Puppeteer viewport against
 * production, not assumed). `.wp-block-petpartners-product-showcase__
 * arrow.is-next` sits half outside the rail's own right edge on purpose
 * (`transform: translate(40%, -50%)`, matching brand-strip's/
 * testimonials' same "peeking" arrow), and nothing up this block's own
 * ancestor chain was containing that ~18px — it reached all the way to
 * `<body>`, same class of leak `.petpartners-brand-index` had for the
 * identical reason (its own ADR has the full ancestor-chain trace). Two
 * rows of this block exist on the home page (Dog, Cat); either one peeking
 * its arrow out is enough to cause it.
 */
.wp-block-petpartners-product-showcase {
	overflow: hidden;
}

/*
 * The row's header — heading, lead and the nav (the "Categories" disclosure
 * now, the arrow pair used to live here too — see view.js's docblock for
 * the full back-and-forth) — as a two-column grid: text on the left, nav on
 * the right, the nav spanning both the heading's and the lead's row so it
 * sits centred on whichever of the two is taller (a row with no lead still
 * has a "lead" grid row, just an empty one — collapses to 0 on its own,
 * `nav` still spans it harmlessly). `.wp-block-heading` and
 * `.petpartners-section__lead` stay direct children of
 * `.petpartners-section__inner` (no extra wrapper div around them) so the
 * generic `.petpartners-section__inner > .wp-block-heading` margin rule in
 * site-chrome.css keeps applying unchanged — this block only adds the grid
 * placement, not a new DOM layer. Scoped under this block's own wrapper
 * class rather than edited into the shared rule, same reason every other
 * block here keeps its presentation to itself.
 */
/*
 * `padding-inline` here, not left to `.alignwide` alone (14/out/2026) —
 * same gap `.petpartners-hero-promises .petpartners-section__inner`
 * already works around a few hundred lines up, for the same reason: at
 * narrow (mobile) widths the global `.is-layout-constrained > .alignwide`
 * rule this class leans on was not actually padding the row away from the
 * viewport edge, so the heading, lead and cards sat flush against it.
 */
.wp-block-petpartners-product-showcase .petpartners-section__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'heading nav'
		'lead nav'
		'rail rail';
	column-gap: var( --wp--preset--spacing--sm );
	padding-inline: var( --wp--preset--spacing--lg );
}

.wp-block-petpartners-product-showcase .petpartners-section__inner > .wp-block-heading {
	grid-area: heading;
}

/*
 * Smaller below 900px (14/out/2026, client request: "Everything your dog/
 * cat needs." in one line on mobile). The heading shares its grid row with
 * the "Categories" nav (`grid-template-columns: 1fr auto` above) — the
 * heading's own column is narrower than the section's full width because
 * of that neighbour, not because the viewport itself is too narrow
 * (confirmed by measuring: the heading's natural one-line width, 323px,
 * fits easily in the section's own 376px, but not in the ~272px its
 * column actually gets once the nav column takes its share). A literal
 * px, not a token: no existing size sits where this needs to land (24px,
 * `heading`, barely wrapped; 30px, `display-md`, wrapped worse), and this
 * is a fix for one specific collision, not a new point on the scale.
 */
@media ( max-width: 899px ) {
	.wp-block-petpartners-product-showcase .petpartners-section__inner > .wp-block-heading {
		font-size: 24px;
	}
}

.wp-block-petpartners-product-showcase .petpartners-section__lead {
	grid-area: lead;
}

.wp-block-petpartners-product-showcase__nav {
	grid-area: nav;
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xs );
	align-self: center;
	justify-self: end;
}

/*
 * The "Categories" disclosure — the only thing left in `.__nav` since the
 * arrow pair moved back onto the rail (13/out/2026, view.js's own
 * docblock). The trigger reads as a text link, not a button — same `__cta`
 * treatment species-links/style.css already gives "Shop Dogs →" (sans 600,
 * underlined, no border/fill/chip) — the client asked for the pill-button
 * chrome removed in favour of a plain underline (13/out/2026). The menu
 * itself keeps the floating-panel treatment `petpartners/header-search`
 * gives its suggestions list (border, `shadow--md`, white) — a dropdown
 * reads as the same kind of control wherever it appears on the site.
 * `position: relative` here is what the menu's `position: absolute` below
 * resolves against.
 */
.wp-block-petpartners-product-showcase__categories {
	position: relative;
}

.wp-block-petpartners-product-showcase__categories-trigger {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xxs );
	block-size: var( --wp--custom--chrome--tap-target );
	padding: 0;
	border: none;
	background-color: transparent;
	color: var( --wp--preset--color--brown );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: color var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard );
}

.wp-block-petpartners-product-showcase__categories-trigger:hover,
.wp-block-petpartners-product-showcase__categories-trigger[aria-expanded='true'] {
	color: var( --wp--preset--color--purple );
}

.wp-block-petpartners-product-showcase__categories-chevron {
	fill: currentColor;
	transition: transform var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard );
}

.wp-block-petpartners-product-showcase__categories-trigger[aria-expanded='true'] .wp-block-petpartners-product-showcase__categories-chevron {
	transform: rotate( 180deg );
}

/*
 * No `hidden` in the server markup (render.php) — this menu is a real,
 * always-visible list of real links until `view.js` runs. `[hidden]` is set
 * by JS alone, same "JS only ever takes the list away, never the only way to
 * reach it" rule `petpartners/product-filters` already documents for its own
 * panel.
 */
.wp-block-petpartners-product-showcase__categories-menu {
	position: absolute;
	inset-block-start: calc( 100% + var( --wp--preset--spacing--xxs ) );
	inset-inline-end: 0;
	z-index: 3;
	min-inline-size: 14rem;
	max-inline-size: 18rem;
	margin: 0;
	padding: var( --wp--preset--spacing--xxs ) 0;
	list-style: none;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--preset--border-radius--md );
	background-color: var( --wp--preset--color--white );
	box-shadow: var( --wp--preset--shadow--md );
}

.wp-block-petpartners-product-showcase__categories-menu[hidden] {
	display: none;
}

.wp-block-petpartners-product-showcase__categories-menu a {
	display: block;
	padding: var( --wp--preset--spacing--xxs ) var( --wp--preset--spacing--sm );
	color: var( --wp--preset--color--text-gray );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	text-decoration: none;
}

.wp-block-petpartners-product-showcase__categories-menu a:hover,
.wp-block-petpartners-product-showcase__categories-menu a:focus-visible {
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--purple );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-petpartners-product-showcase__categories-trigger,
	.wp-block-petpartners-product-showcase__categories-chevron {
		transition: none;
	}
}

.wp-block-petpartners-product-showcase__rail {
	position: relative;
	grid-area: rail;
}

.wp-block-petpartners-product-showcase__track {
	display: flex;
	gap: var( --wp--preset--spacing--sm );
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0;
	scrollbar-width: none;
}

.wp-block-petpartners-product-showcase__track::-webkit-scrollbar {
	display: none;
}

.wp-block-petpartners-product-showcase__cell {
	margin: 0;
	flex: 0 0 15.5rem;
	scroll-snap-align: start;
}

@media ( min-width: 768px ) {

	.wp-block-petpartners-product-showcase__cell {
		flex-basis: 17.5rem;
	}
}

/*
 * The cell still sizes itself as a fraction of the track assuming 6 fit the
 * row (6 cards + 5 gaps = 100%) — unchanged since ADR-074. What changed
 * (13/out/2026) is the actual card count: `patterns/product-range.php` asks
 * for 8 now, not 6, specifically so this row overflows at every width,
 * including the wide desktop widths where 6-at-this-fraction used to fit
 * with nothing left to scroll — the client wanted the overflow state
 * reachable without forcing it via devtools, to test the arrows against.
 * Below 1024px the cell keeps its fixed size from the rule above and the
 * row already scrolled regardless of count.
 */
@media ( min-width: 1024px ) {

	.wp-block-petpartners-product-showcase__cell {
		flex-basis: calc( ( 100% - 5 * var( --wp--preset--spacing--sm ) ) / 6 );
	}
}

/*
 * Same button, same position as `brand-strip/style.css`'s and
 * `testimonials/style.css`'s own `__arrow` — white circle, thin border,
 * brown at rest, purple on hover, absolutely positioned over the rail's own
 * edges, hidden until `.rail.has-previous`/`.has-next` says otherwise
 * (client request, 13/out/2026: one sitewide standard, not three slightly
 * different ones). This block's own arrows spent part of the same day
 * living in the header nav div instead (ADR-074, Adendo 1) — moved back
 * onto the rail the same request that asked for the shared style, so the
 * ancestor-class hide/show below works the same simple way it always has
 * for the other two rails; view.js's own docblock has the full four-shapes
 * account.
 */
.wp-block-petpartners-product-showcase__arrow {
	position: absolute;
	inset-block-start: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --wp--custom--chrome--tap-target );
	block-size: var( --wp--custom--chrome--tap-target );
	padding: 0;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--brown );
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -50% );
	transition: opacity var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard ),
		visibility var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard ),
		border-color var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard ),
		color var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard );
}

.wp-block-petpartners-product-showcase__arrow svg {
	display: block;
	fill: currentColor;
}

.wp-block-petpartners-product-showcase__arrow.is-previous {
	inset-inline-start: 0;
	transform: translate( -40%, -50% ) rotate( 180deg );
}

.wp-block-petpartners-product-showcase__arrow.is-next {
	inset-inline-end: 0;
	transform: translate( 40%, -50% );
}

.wp-block-petpartners-product-showcase__arrow:hover {
	border-color: var( --wp--preset--color--purple );
	color: var( --wp--preset--color--purple );
}

.wp-block-petpartners-product-showcase__rail.has-previous .wp-block-petpartners-product-showcase__arrow.is-previous,
.wp-block-petpartners-product-showcase__rail.has-next .wp-block-petpartners-product-showcase__arrow.is-next {
	opacity: 1;
	visibility: visible;
}

.wp-block-petpartners-product-showcase__rail.has-next .wp-block-petpartners-product-showcase__track {
	mask-image: linear-gradient( to right, #000 85%, transparent 100% );
}

.wp-block-petpartners-product-showcase__rail.has-previous.has-next .wp-block-petpartners-product-showcase__track {
	mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 85%, transparent 100% );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-petpartners-product-showcase__arrow {
		transition: none;
	}
}