/*
 * Product Range carousel.
 *
 * Colors and font reuse the site's existing Astra global palette / Lato —
 * nothing here is invented:
 *   #007c91 theme accent, #2b2d42 heading, #2d2d2d body text,
 *   #f6f9fb section background, #eef2f4 border, Lato font.
 * Border-radius is intentionally 0 — the only border-radius value found
 * anywhere in the existing page's Elementor settings was 0 on all sides,
 * so square corners match the site's actual (flatter, industrial) look
 * rather than an invented rounded style.
 */

/*
 * No background here by design. Elementor Sections render full-bleed
 * (edge-to-edge), while this shortcode's own wrapper only ever spans the
 * column/container width it's placed in. If this component supplied its
 * own #f6f9fb background too, it would sit as a narrower, separately-toned
 * box inside the section — precisely the "two grays" effect being fixed.
 * The Elementor Section itself is the single source of the section
 * background; see the accompanying report for which color it's
 * currently set to.
 */
.abtaz-pr {
	--abtaz-interactive-hover: #00b4d8;
	--abtaz-section-heading: #007c91;
	background: transparent;
	/*
	 * Explicit, self-contained max-width — this component never again
	 * depends on whatever width the embedding Elementor container happens
	 * to provide. Matches the site's actual content width (confirmed from
	 * Astra's own CSS: .ast-container{max-width:1240px}).
	 */
	max-width: 1240px;
	margin: 0 auto;
	padding: 2.5em 1.25em;
	box-sizing: border-box;
}

.abtaz-pr__heading {
	font-family: 'Lato', sans-serif;
	color: var(--abtaz-section-heading);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.03em;
	margin: 0 0 1.25em;
	/* Fixed size, not inherited/compounded from an ambient widget font-size. */
	font-size: 22px;
}

.abtaz-pr__viewport {
	background: transparent;
	overflow: hidden;
}

.abtaz-pr__track {
	background: transparent;
	display: flex;
	gap: 1.5em;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Hide the native scrollbar; arrows/swipe remain the interaction model. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px; /* keeps focus outlines from being clipped */
}

.abtaz-pr__track::-webkit-scrollbar {
	display: none;
}

.abtaz-pr__card {
	position: relative;
	background: #ffffff;
	border: 1px solid #eef2f4;
	border-radius: 0;
	display: flex;
	flex-direction: column;
}

/* --- Carousel layout: flex track, cards sized as flex items --- */

.abtaz-pr__track .abtaz-pr__card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 3 * 1.5em) / 4);
}

/*
 * Four-card desktop carousels centre a short, post-filter result set as one
 * fixed-size group. Tablet and mobile keep their existing overflow behavior.
 */
@media (min-width: 1025px) {
	.abtaz-pr[data-layout="carousel"]:not([data-card="featured"])[data-count="1"] .abtaz-pr__track,
	.abtaz-pr[data-layout="carousel"]:not([data-card="featured"])[data-count="2"] .abtaz-pr__track,
	.abtaz-pr[data-layout="carousel"]:not([data-card="featured"])[data-count="3"] .abtaz-pr__track {
		justify-content: center;
		margin-inline: 0;
		padding-inline-start: 0;
	}

	.abtaz-pr[data-layout="carousel"]:not([data-card="featured"])[data-count="1"] .abtaz-pr__track .abtaz-pr__card,
	.abtaz-pr[data-layout="carousel"]:not([data-card="featured"])[data-count="2"] .abtaz-pr__track .abtaz-pr__card,
	.abtaz-pr[data-layout="carousel"]:not([data-card="featured"])[data-count="3"] .abtaz-pr__track .abtaz-pr__card {
		flex-basis: 245px;
	}
}

@media (max-width: 1024px) {
	.abtaz-pr__track .abtaz-pr__card {
		flex-basis: calc((100% - 1.5em) / 2);
	}
}

@media (max-width: 767px) {
	.abtaz-pr__track .abtaz-pr__card {
		flex-basis: 100%;
	}
}

/*
 * --- Grid layout: static responsive grid, no scroll-snap, no carousel JS.
 *
 * Desktop column count adapts to how many cards actually exist
 * (data-count, set once server-side from the query's total, never
 * recalculated when Show More reveals more of an already-known total):
 *   1 card  -> one capped-width card, centred, not full width
 *   2 cards -> two capped-width cards, centred
 *   3 cards -> three balanced columns
 *   4+      -> four per row (the default)
 * Tablet is always 2 per row, mobile always 1, regardless of count —
 * with 1-2 cards that's already what naturally happens; for 3+ the
 * tablet/mobile rules explicitly win over the desktop data-count rules.
 */

.abtaz-pr__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: normal;
}

.abtaz-pr__grid[data-count="1"] {
	grid-template-columns: minmax(0, 300px);
	justify-content: center;
}

.abtaz-pr__grid[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 340px));
	justify-content: center;
}

.abtaz-pr__grid[data-count="3"] {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.abtaz-pr__grid,
	.abtaz-pr__grid[data-count] {
		grid-template-columns: repeat(2, 1fr);
		justify-content: normal;
	}
}

@media (max-width: 767px) {
	.abtaz-pr__grid,
	.abtaz-pr__grid[data-count] {
		grid-template-columns: 1fr;
		justify-content: normal;
	}
}

/*
 * Cards beyond the initial reveal limit. Base state (no-JS baseline) is
 * simply not present — this class is added by JS only after confirming
 * more than initial_limit cards exist, so a no-JS visit never gets this
 * class at all and every card stays visible, per the progressive-
 * enhancement requirement.
 */
.abtaz-pr__card[hidden] {
	display: none;
}

.abtaz-pr__show-more {
	display: none;
	margin: 1.75em auto 0;
	text-align: center;
}

.abtaz-pr__show-more[data-active="true"] {
	display: block;
}

.abtaz-pr__show-more-btn {
	font-family: 'Lato', sans-serif;
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #007c91;
	background: #ffffff;
	border: 1px solid #007c91;
	border-radius: 0;
	padding: 0.75em 1.75em;
	cursor: pointer;
}

.abtaz-pr__show-more-btn:hover,
.abtaz-pr__show-more-btn:focus-visible {
	background: #007c91;
	color: #ffffff;
	outline: none;
}

.abtaz-pr__show-more-btn:focus-visible {
	box-shadow: 0 0 0 2px #00b4d8;
}

/*
 * --- Featured slider (data-card="featured"): one product-category slide at
 * a time, sitting directly on the surrounding Elementor section's own
 * background — no white/gray box of its own anywhere in this component.
 * Reuses the standard carousel track/autoplay JS completely unchanged; the
 * arrow buttons are moved inside the viewport (see the PHP markup) so they
 * can overlay the sides without affecting track/grid sizing.
 *
 * The wrapper keeps the shared `.abtaz-pr` width/centring (width:100%;
 * max-width:1240px; margin:auto) from the base rule above — no second,
 * narrower width is imposed by this component anywhere below.
 */
/*
 * Width ownership: the surrounding Elementor container already provides the
 * page's normal content width (confirmed identical to the intro and
 * catalogue containers — none of the three carry a custom width override).
 * The base `.abtaz-pr` rule's own 1240px cap is for the grid/carousel
 * layouts elsewhere on the site; here it's explicitly disabled so nothing
 * in this component can ever be the narrower constraint — the Elementor
 * container is the sole owner of this slider's width.
 */
.abtaz-pr[data-card="featured"] {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 52px 0 44px;
	box-sizing: border-box;
}

.abtaz-pr[data-card="featured"] .abtaz-pr__heading {
	margin-bottom: 36px;
	color: var(--abtaz-section-heading);
}

.abtaz-pr[data-card="featured"] .abtaz-pr__viewport,
.abtaz-pr[data-card="featured"] .abtaz-pr__track {
	background: transparent;
	width: 100%;
	/*
	 * The base `.abtaz-pr__track` rule sets `gap: 1.5em` for the multi-card
	 * carousel (Compressors), where visible cards need separation. In this
	 * one-slide-at-a-time context that gap was never removed — with each
	 * slide at flex:0 0 100%, it sat between every pair of slides for no
	 * visual reason (nothing adjacent is ever in view) and is the one
	 * concrete, source-verified geometry difference from a clean
	 * full-width single-slide track. Zeroed here.
	 */
	gap: 0;
	margin: 0;
}

/*
 * A plain flex row (the base `.abtaz-pr__track` rule) stretches every child
 * to the height of its tallest sibling by default — with 4 slides of
 * differing content length, that stretched every shorter slide down to
 * match the tallest one, which was the actual source of the blank space
 * beneath shorter slides' image/text. Overriding to flex-start lets each
 * slide size to its own content.
 */
.abtaz-pr[data-card="featured"] .abtaz-pr__track {
	align-items: flex-start;
}

.abtaz-pr__track .abtaz-pr__card--featured {
	flex: 0 0 100%;
	min-width: 100%;
	max-width: 100%;
	margin: 0;
}

/*
 * Bordered-card treatment: the border/radius wraps the whole slide (image
 * side + text side) as one visible unit. The border color is the stronger
 * existing palette gray (#b0b9bf), not the paler #eef2f4 default card
 * border used elsewhere — against this section's own #f6f9fb background,
 * the paler value would have too little contrast to read as a defined
 * edge. Image sizing/centring is untouched from the previous round; only
 * the card's outer frame and the text panel's own background are new.
 */
.abtaz-pr__card--featured {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	column-gap: 0;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid #b0b9bf;
	border-radius: 10px;
	overflow: hidden;
	padding: 0;
}

.abtaz-pr__card--featured .abtaz-pr__image-wrap {
	background: transparent;
	overflow: hidden;
	width: 100%;
	height: 330px;
	min-height: 330px;
	max-height: 330px;
	aspect-ratio: auto;
	margin: 0;
	padding: 0;
}

.abtaz-pr__card--featured .abtaz-pr__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.abtaz-pr__card--featured .abtaz-pr__body {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #ffffff;
	border-left: 1px solid #eef2f4;
	padding: 36px 44px;
}

.abtaz-pr__card--featured .abtaz-pr__title {
	font-size: 18px;
	font-weight: 700;
	color: #2b2d42;
	margin-bottom: 14px;
}

.abtaz-pr__card--featured .abtaz-pr__excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: #2d2d2d;
	max-width: 600px;
}

.abtaz-pr__card--featured .abtaz-pr__action {
	display: inline-block;
	color: #007c91;
	margin-top: 22px;
	padding-top: 0;
}

/*
 * Navigation row: previous arrow, dots, next arrow, all together in one
 * strip below the slide — not overlaying the image/text.
 */
.abtaz-pr[data-card="featured"] .abtaz-pr__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 22px;
}

.abtaz-pr[data-card="featured"] .abtaz-pr__arrow {
	width: 42px;
	height: 42px;
}

@media (max-width: 1024px) {
	.abtaz-pr__card--featured {
		grid-template-columns: minmax(0, 43%) minmax(0, 57%);
		column-gap: 0;
	}

	.abtaz-pr[data-card="featured"] .abtaz-pr__image-wrap {
		height: 320px;
		min-height: 320px;
		max-height: 320px;
	}
}

@media (max-width: 767px) {
	.abtaz-pr[data-card="featured"] {
		padding: 40px 0 36px;
	}

	.abtaz-pr__card--featured {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.abtaz-pr[data-card="featured"] .abtaz-pr__image-wrap {
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: 16 / 9;
		margin: 0;
	}

	.abtaz-pr__card--featured .abtaz-pr__body {
		border-left: none;
		border-top: 1px solid #eef2f4;
		padding: 24px;
	}

	.abtaz-pr__card--featured .abtaz-pr__title {
		font-size: 24px;
	}

}

/*
 * --- Pagination dots, featured slider only. Reuses the same active-state
 * pattern as the arrows: JS toggles `data-active` as the track scrolls.
 */
.abtaz-pr__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 9px;
}

.abtaz-pr__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #b0b9bf;
	cursor: pointer;
}

.abtaz-pr__dot[data-active="true"] {
	background: #007c91;
}

.abtaz-pr__dot:focus-visible {
	outline: 2px solid #00b4d8;
	outline-offset: 2px;
}

/*
 * --- 4-column grid modifier, for general-brand-page category cards
 * (compact category gallery) — same card system, wider grid. Reuses every
 * card/image/title rule above; only the column count differs from the
 * 3-column product-range grid.
 */

.abtaz-pr__grid--4col {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.abtaz-pr__grid--4col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.abtaz-pr__grid--4col {
		grid-template-columns: 1fr;
	}
}

/*
 * A category card with no resolved destination yet (its brand–product
 * child page doesn't exist/isn't published) renders without a link —
 * visibly non-clickable rather than a dead link, per the "fail open,
 * never render dead links" rule.
 */
.abtaz-pr__card--static {
	cursor: default;
}

.abtaz-pr__card--static .abtaz-pr__title {
	color: #8b929a;
}

.abtaz-pr__card:hover,
.abtaz-pr__card:focus-within {
	border-color: #007c91;
}

.abtaz-pr__image-wrap {
	aspect-ratio: 3 / 2;
	background: #ffffff;
	overflow: hidden;
}

/*
 * Light-gray image backdrop, scoped only to the brand-only gallery context
 * (the general ABAC brand page today; any future brand's general page
 * automatically, via the same [abtaz_product_range brand="X"] pattern).
 * Does not affect the Compressors carousel or the brand+category pages —
 * neither carries data-context="brand-gallery".
 */
.abtaz-pr[data-context="brand-gallery"] .abtaz-pr__image-wrap {
	background: #f6f9fb;
}

.abtaz-pr__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.abtaz-pr__body {
	padding: 1.25em 1.4em 1.6em;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.abtaz-pr__title {
	font-family: 'Lato', sans-serif;
	color: #2b2d42;
	font-size: 16px;
	margin: 0;
	text-transform: uppercase;
}

/*
 * Compact mode: title-only cards for the brand-page-level galleries.
 * Description stays stored in WordPress (get_the_excerpt() still works
 * everywhere else) — this just doesn't print it here.
 */
.abtaz-pr[data-mode="compact"] .abtaz-pr__body {
	padding: 1em 1.1em;
}

.abtaz-pr[data-mode="compact"] .abtaz-pr__excerpt,
.abtaz-pr[data-mode="compact"] .abtaz-pr__action {
	display: none;
}

/*
 * Stretched-link pattern: the title's own link is the single real,
 * focusable link in the card. Its ::after is positioned over the whole
 * card, so clicking anywhere activates it, without nesting a second
 * anchor around the card (invalid HTML) or adding a duplicate link for
 * "EXPLORE MORE" pointing at the same destination.
 */
.abtaz-pr__title-link {
	color: inherit;
	text-decoration: none;
}

.abtaz-pr__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.abtaz-pr__title-link:hover,
.abtaz-pr__title-link:focus {
	color: #007c91;
}

.abtaz-pr__title-link:focus-visible {
	outline: 2px solid #00b4d8;
	outline-offset: 2px;
}

.abtaz-pr__excerpt {
	font-family: 'Lato', sans-serif;
	color: #2d2d2d;
	font-size: 0.92em;
	line-height: 1.55;
	margin: 0;
}

.abtaz-pr__action {
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-size: 0.85em;
	font-weight: 700;
	color: #007c91;
	text-transform: uppercase;
	/* Pinned to the bottom of the card regardless of excerpt length. */
	margin-top: auto;
	padding-top: 1em;
	align-self: flex-start;
}

.abtaz-pr__card:hover .abtaz-pr__action,
.abtaz-pr__card:focus-within .abtaz-pr__action {
	color: #00b4d8;
}

.abtaz-pr__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25em;
	margin-top: 1.75em;
}

.abtaz-pr__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #007c91;
	background: #ffffff;
	color: #007c91;
	border-radius: 0;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	padding: 0;
}

.abtaz-pr__arrow:hover,
.abtaz-pr__arrow:focus-visible {
	background: #007c91;
	color: #ffffff;
	outline: none;
}

.abtaz-pr[data-card="featured"] .abtaz-pr__arrow:not(:disabled):hover,
.abtaz-pr[data-card="featured"] .abtaz-pr__arrow:not(:disabled):focus-visible {
	background: var(--abtaz-interactive-hover);
	border-color: var(--abtaz-interactive-hover);
	color: #212121;
}

.abtaz-pr[data-card="featured"] .abtaz-pr__arrow:not(:disabled):active {
	background: var(--abtaz-interactive-hover);
	border-color: var(--abtaz-interactive-hover);
	color: #212121;
}

.abtaz-pr__arrow:focus-visible {
	box-shadow: 0 0 0 2px #00b4d8;
}

.abtaz-pr[data-card="featured"] .abtaz-pr__arrow:not(:disabled):focus-visible {
	box-shadow: none;
	outline: 2px solid #2b2d42;
	outline-offset: 2px;
}

/*
 * Astra's global button:focus rule applies its hover palette to controls
 * focused by a mouse click. Restore the approved resting state once the
 * pointer and press have ended, while leaving keyboard :focus-visible intact.
 */
.abtaz-pr[data-card="featured"] .abtaz-pr__arrow:not(:disabled):focus:not(:focus-visible):not(:hover):not(:active) {
	background: #ffffff;
	border-color: #007c91;
	box-shadow: none;
	color: #007c91;
	outline: none;
}

.abtaz-pr__arrow[disabled] {
	border-color: #007c91;
	box-shadow: none;
	opacity: 0.35;
	outline: none;
	cursor: default;
	background: #ffffff;
	color: #007c91;
}

.abtaz-pr[data-nav-needed="false"] .abtaz-pr__controls {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.abtaz-pr__track {
		scroll-behavior: auto;
	}
}