/*
 * Product lists and product cards (round 4, 2026-10-30): the Avalon Nordic standard (avalon-blocks products.css,
 * product-list.css, categories.css; theme style.css "shop and category pages") in Vestelli's brand: navy names, the
 * Oxygen type, square corners, the accent double wave.
 * Round 5 (2026-11-03, the client: "tuotteissa ei taustaa"): the product pictures sit directly on the page, without the
 * light grey tile that was behind them (cards, categories, gallery thumbnails, the product photo of Teksti ja kuva); on a
 * light section the pictures' white backgrounds take the section's colour (multiply). The cards' hover cue is the name's
 * underline and the moving arrow of "Katso tuote ›", never a box.
 *
 * Loaded after blocks.css with every block that shows products (vestelli-blocks.php wp_enqueue_block_style): the
 * product lists (blocks/product-list, cards.php: shop and category pages, the lists of the product page), the picked
 * product cards (blocks/product-cards and inc/helpers.php ab_product_card() in avalon/posts and avalon/text-image), the
 * product categories and the product page's buttons and tabs. Where an older rule of blocks.css or the theme's
 * style.css says otherwise, the rule here wins by order or by one more class.
 *
 * Shapes by screen width (the standard's):
 * - phones (<=768px): rows, a 96px tile at the left (80px below 381px), the name, two lines of the note and
 *   "Katso tuote ›" beside it; the whole row is the link (at least 96px high);
 * - tablets (769-1024px): the same rows, two side by side;
 * - desktop (>=1025px): cards, at most --ab-cols side by side (each 220-360px, from the left edge), the 4:3 tile
 *   above the name, three lines of the note and "Katso tuote ›" at the bottom (the cards of a row end at one line).
 */

:root {
	/* the brand's light grey: only the help box of the lists (.ab-product--help, a text box, not a product) */
	--ab-pcard-tile: var(--wp--preset--color--light, #f7f6f6);
	/* navy grey for the notes and meta texts: 6.9:1 on white, 6.5:1 on the light sections */
	--ab-pcard-muted: #4f5a78;
}

/* ------------------------------------------------------------ shop and category pages: the head */

/* the breadcrumb first, then the name of the category (Avalon's order), the description and "Lue lisää" in the text
   column (theme style.css: 760px, the left half from 1025px) */
.an-archive-head .ab-flow > :is(.wc-block-breadcrumbs, .wp-block-woocommerce-breadcrumbs) {
	margin-block: 0;
}

.an-archive-head .ab-flow > :is(.wc-block-breadcrumbs, .wp-block-woocommerce-breadcrumbs) + .wp-block-query-title {
	margin-block-start: 12px;
}

.an-archive-head .woocommerce-breadcrumb {
	color: var(--ab-pcard-muted);
}

.an-archive-head .woocommerce-breadcrumb a {
	color: var(--ab-navy);
}

/* Vestelli's accent double wave under the name (as under the titles of the call to action and the cards) */
.an-archive-head .wp-block-query-title {
	position: relative;
	padding-bottom: 22px;
	overflow-wrap: break-word;
	hyphens: manual;
}

.an-archive-head .wp-block-query-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 112px;
	height: 10px;
	background-color: var(--ab-accent);
	-webkit-mask: url("img/double-wave.png") no-repeat left center / 100% 100%;
	mask: url("img/double-wave.png") no-repeat left center / 100% 100%;
}

.an-archive-head .ab-flow > .wp-block-query-title + .an-term-description {
	margin-block-start: var(--ab-flow, 16px);
}

/* ------------------------------------------------------------ the list's head and the sub-categories */

.ab-plist__heading {
	margin: 0 0 var(--ab-head-gap, 24px);
	color: var(--ab-heading);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
}

@media (max-width: 1024px) {
	.ab-plist__heading {
		line-height: 1.2;
	}
}

.ab-product-list.is-dark .ab-plist__heading {
	color: #fff;
}

/* shop and category pages: a quiet "Tuotteet" above the cards (the category's own h2s are in its text) */
.ab-plist.an-archive-products .ab-plist__heading {
	margin-bottom: var(--ab-flow, 16px);
	font-size: var(--ab-item-size, 17px);
	line-height: 1.3;
}

/* the sub-categories: square chips (44px), the current one navy; they wrap on every screen (round 4, phase B 2:
   on phones too, like the story filter's chips of the article lists: every chip and its whole name in sight, no
   sideways strip that cut the next chip at the screen's edge) */
.ab-subcats {
	margin: 0 0 var(--ab-flow-c, 32px);
}

.ab-subcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-subcats__list > li {
	margin: 0;
	padding: 0;
}

.ab-subcats__list > li::before {
	content: none;
}

.ab-subcats .ab-subcats__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--ab-tap, 44px);
	padding: 8px 16px;
	border: 1px solid rgba(27, 42, 87, 0.28);
	background: #fff;
	color: var(--ab-navy);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.25;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ab-subcats .ab-subcats__link:hover {
	border-color: var(--ab-navy);
	text-decoration: none;
}

.ab-subcats .ab-subcats__link:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

.ab-subcats .ab-subcats__link[aria-current="page"] {
	border-color: var(--ab-navy);
	background: var(--ab-navy);
	color: #fff;
	font-weight: 700;
}

/* phones: a little smaller and closer together (the story chips' measures); a long name wraps inside its chip
   instead of widening the page */
@media (max-width: 768px) {
	.ab-subcats__list {
		gap: 8px 6px;
	}

	.ab-subcats__list > li {
		flex: 0 1 auto;
		max-width: 100%;
	}

	.ab-subcats .ab-subcats__link {
		max-width: 100%;
		padding: 11px 12px;
		font-size: 14px;
		line-height: 1.3;
		white-space: normal;
	}
}

/* ------------------------------------------------------------ the grids */

/* the product list's cards (.ab-pcards), the picked cards (.ab-product-grid) and the products of the Artikkelit block:
   one column of rows on phones */
.ab-pcards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
}

/* (blocks.css: the old list's grid and the posts block's 3 per row on tablets) */
.ab-product-list .ab-pcards,
.ab-product-group .ab-pcards {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 769px) and (max-width: 1024px) {
	/* tablets: rows two side by side */
	:is(.ab-product-list, .ab-product-group) .ab-pcards--grid,
	.ab-product-grid.ab-product-grid,
	.ab-posts.ab-posts--products .ab-grid.ab-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 28px 32px;
	}

	/* one product alone: one row across */
	:is(.ab-product-list, .ab-product-group) .ab-pcards--grid:has(> .ab-product:only-child) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (min-width: 1025px) {
	/* at most --ab-cols cards side by side, each 220-360px wide, from the left edge: two products are two cards, not
	   two halves of the row; 24px between the cards, 48px between the rows (the text below the tiles needs the air) */
	:is(.ab-product-list, .ab-product-group) .ab-pcards--grid {
		grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - (var(--ab-cols, 4) - 1) * 24px) / var(--ab-cols, 4) - 0.25px)), 1fr));
		gap: 48px 24px;
		max-width: calc(var(--ab-cols, 4) * 360px + (var(--ab-cols, 4) - 1) * 24px);
	}

	.ab-product-grid.ab-product-grid {
		gap: 48px 24px;
	}

	.ab-posts.ab-posts--products .ab-grid {
		gap: 48px 24px;
	}
}

/* ------------------------------------------------------------ the product (a row) */

.ab-product {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-width: 0;
	box-sizing: border-box;
	border: 0;
	background: none;
	color: var(--wp--preset--color--body, #1b2a57);
}

.ab-product:not(:has(> .ab-product__media)) {
	grid-template-columns: minmax(0, 1fr);
}

/* the picture directly on the page: no tile behind it, also not on hover (round 5); its square keeps the place and the
   size, so the names and texts stay where they were */
.ab-product .ab-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	margin: 0;
	background: none;
}

/* (two classes: WooCommerce's ".woocommerce-page img { height: auto }" must not win on shop and product pages) */
.ab-product .ab-product__media img,
.ab-product .ab-product__img {
	position: absolute;
	inset: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
	margin: 0;
	padding: 8%;
	object-fit: contain;
}

.ab-product .ab-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
}

/* the name: whole words, never hyphenated; navy (white on dark sections) */
.ab-product .ab-product__title {
	margin: 0 0 4px;
	color: var(--ab-heading);
	font-family: inherit;
	font-size: var(--ab-item-size, 16px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	max-width: 100%;
	overflow-wrap: break-word; /* (only a word wider than the whole column) */
	word-break: normal;
	hyphens: manual;
	text-wrap: pretty;
}

.ab-product .ab-product__title a {
	color: inherit;
	text-decoration: none;
}

/* the name's link covers the product */
.ab-product .ab-product__title a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: -4px;
}

.ab-product:hover .ab-product__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-product .ab-product__title a:focus {
	outline: none;
}

/* focus ring around the whole product: white + navy, visible on white and on navy sections */
.ab-product .ab-product__title a:focus-visible::after {
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ab-navy);
}

.ab-product .ab-product__note {
	display: -webkit-box;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	overflow-wrap: anywhere; /* a long code or address never widens the row (360px phones) */
	color: var(--ab-pcard-muted);
	font-size: 14px;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* the note's lead (its first sentence) and the rest: phones and tablets show the lead (two lines at most: a short
   first sentence whole, "Korkeus … on vain 77 cm."), desktop cards both (three lines) */
@media (max-width: 1024px) {
	.ab-product .ab-product__rest {
		display: none;
	}
}

.ab-product__cats {
	position: relative;
	z-index: 2; /* its links above the product link */
	margin: 4px 0 0;
	color: var(--ab-pcard-muted);
	font-size: 14px;
	line-height: 1.4;
}

.ab-product__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	width: 100%;
	margin-top: 8px;
}

/* "Katso tuote" with the accent arrow (the helper's card has it as a link, the lists' cards as a label) */
.ab-product .ab-product__more {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var(--ab-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.ab-product .ab-product__body > .ab-product__more {
	margin-top: 8px;
}

.ab-product .ab-product__more::after {
	content: "";
	flex: 0 0 auto;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.45em;
	background-color: var(--ab-accent);
	-webkit-mask: url("icons/arrow-right.svg") center / contain no-repeat;
	mask: url("icons/arrow-right.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.ab-product:hover .ab-product__more::after {
	transform: translateX(3px);
}

/* "Pyydä tarjous" (opens the quote form, inc/quote-modal.php): above the product's link, navy, 44px */
.ab-product .ab-product__buy {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
}

.ab-product .ab-product__body > .ab-product__buy {
	margin-top: 10px;
}

.ab-product .ab-product__buy .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--ab-tap, 44px);
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: var(--ab-navy);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ab-product .ab-product__buy .button:hover,
.ab-product .ab-product__buy .button:focus-visible {
	background: #0f1e4b;
	color: #fff;
}

.ab-product .ab-product__buy .button:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

/* dark sections: white texts, the accent button with navy text; the picture's square is white (round 5: no grey): a
   product photo's white background cannot melt into navy, so it reaches the square's edges instead of showing as a
   white patch of its own size (/tuotteet/maaperakasittely/ "Sako-Hertta imeytysputkipaketti") */
.is-dark .ab-product {
	color: #fff;
}

.is-dark :is(.ab-product .ab-product__media, .ab-category__media) {
	background: #fff;
}

.is-dark .ab-product .ab-product__title,
.is-dark .ab-product .ab-product__more {
	color: #fff;
}

.is-dark .ab-product .ab-product__note,
.is-dark .ab-product__cats {
	color: rgba(255, 255, 255, 0.85);
}

.is-dark .ab-product .ab-product__buy .button {
	background: var(--ab-accent);
	color: var(--ab-navy);
}

/* (a lighter accent behind the navy text: 5.4:1; the darker --ab-accent-hover #0194cd would be 4.0:1) */
.is-dark .ab-product .ab-product__buy .button:hover,
.is-dark .ab-product .ab-product__buy .button:focus-visible {
	background: #00aee8;
	color: var(--ab-navy);
}

/* small phones: a smaller tile leaves room for long names ("Erillisviemäröinti Erikoismatala IISI 5000 …") */
@media (max-width: 380px) {
	.ab-product {
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 12px;
	}
}

/* phones and tablets: a product with "Pyydä tarjous": "Katso tuote" and the button on one line */
@media (max-width: 1024px) {
	.ab-product--quote .ab-product__foot {
		justify-content: space-between;
		gap: 8px 10px;
	}

	.ab-product.ab-product--quote .ab-product__buy .button {
		padding: 0 14px;
		font-size: 14px;
	}
}

/* ------------------------------------------------------------ desktop: cards (the tile above the text) */

@media (min-width: 1025px) {
	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: stretch;
		gap: 0;
	}

	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product .ab-product__media {
		aspect-ratio: 4 / 3;
	}

	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product :is(.ab-product__img, .ab-product__media img) {
		padding: 7% 10%;
	}

	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product .ab-product__body {
		padding: 18px 0 0;
	}

	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product .ab-product__title {
		margin-bottom: 6px;
	}

	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product .ab-product__note {
		font-size: 15px;
		line-height: 1.5;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	/* "Katso tuote" and the button at the bottom: the products of a row end at the same line */
	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product .ab-product__foot {
		margin-top: auto;
		padding-top: 14px;
	}

	:is(.ab-pcards--grid, .ab-product-grid, .ab-posts--products .ab-grid, .ab-ti__media--products) > .ab-product .ab-product__body > :is(.ab-product__more, .ab-product__buy):first-of-type {
		margin-top: auto;
		padding-top: 14px;
	}
}

/* ------------------------------------------------------------ the number of products, the page numbers */

.ab-plist .ab-plist__count {
	margin: var(--ab-flow-c, 32px) 0 0;
	color: var(--ab-pcard-muted);
	font-size: 14px;
	line-height: 1.45;
}

.ab-plist .ab-pagination {
	justify-content: flex-start;
	margin-top: var(--ab-flow-c, 32px);
}

.ab-plist .ab-pagination + .ab-plist__count {
	margin-top: 16px;
}

/* 44px squares, the current page navy (blocks.css: grey; the article lists keep theirs) */
.ab-plist .ab-pagination .page-numbers {
	min-width: var(--ab-tap, 44px);
	min-height: var(--ab-tap, 44px);
	padding: 0 14px;
	border: 1px solid rgba(27, 42, 87, 0.22);
	border-radius: 0;
	background: #fff;
	color: var(--ab-navy);
	font-size: 15px;
	text-decoration: none;
}

.ab-plist .ab-pagination a.page-numbers:hover {
	border-color: var(--ab-navy);
}

.ab-plist .ab-pagination .page-numbers.current {
	border-color: var(--ab-navy);
	background: var(--ab-navy);
	color: #fff;
	font-weight: 700;
}

.ab-plist .ab-pagination .page-numbers.dots {
	min-width: 24px;
	padding: 0 4px;
	border-color: transparent;
	background: none;
}

.ab-plist .ab-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ the product page: buttons and tabs */

/* "Takaisin tuoteryhmän tuotteisiin" on the accent: navy text (5.0:1; white on the accent was 2.8:1), the standard's
   turquoise button with navy text in Vestelli's colours */
.ab-product-actions .wp-element-button.ab-btn--accent,
.ab-product-actions .wp-element-button.ab-btn--accent:hover,
.ab-product-actions .wp-element-button.ab-btn--accent:focus-visible {
	color: var(--ab-navy);
}

.ab-product-actions .wp-element-button:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

.ab-product-actions .wp-element-button.ab-btn--accent:focus-visible {
	outline-color: var(--ab-navy);
}

/* the tabs (Kuvaus, Tiedot, Tiedostot, Lisävarusteet, Dokumentit): the rows of the site's other accordions (theme
   style.css: "Lue lisää" of the category pages, the FAQ rows) with the same chevron that turns, not a plus */
.ab-accordion__item {
	border-color: #e3e5ea;
}

.ab-accordion__title {
	padding-right: 40px;
	-webkit-tap-highlight-color: transparent;
}

.ab-accordion__title::after {
	content: "";
	right: 3px;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.ab-accordion__item[open] > .ab-accordion__title::after {
	content: "";
	transform: translateY(-50%) rotate(180deg);
}

.ab-accordion__title:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-accordion__title:focus {
	outline: none;
}

.ab-accordion__title:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ab-accordion__title::after,
	.ab-product .ab-product__more::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ the product page's lists */

/* "Katso myös" and the optional extras: the section's title (x-large) above the cards */
.ab-plist--empty .ab-plist__empty {
	margin: 0;
	padding: 0;
	color: var(--ab-pcard-muted);
	text-align: center;
}

/* ------------------------------------------------------------ product categories (avalon/product-categories) */

/* the picture directly on the page like the products' (no tile, round 5), the name navy (underlined on hover), the
   button on the accent with navy text (5.0:1; white on the accent was 2.8:1) */
.ab-category__media {
	background: none;
}

.ab-category__name a:hover {
	color: var(--ab-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ab-category__name,
.ab-category__desc,
.ab-category__actions {
	padding-inline: 0;
}

.ab-category .ab-category__button,
.ab-category .ab-category__button:hover,
.ab-category .ab-category__button:focus {
	color: var(--ab-navy);
	font-weight: 700;
}

.ab-category .ab-category__button:focus-visible {
	outline: 3px solid var(--ab-navy);
	outline-offset: 2px;
}

/* phones: rows like the products (a 96px tile at the left), the description and the button below them */
@media (max-width: 768px) {
	.ab-categories .ab-grid {
		gap: 28px;
	}

	.ab-category {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: center;
		column-gap: 16px;
	}

	.ab-category__media {
		grid-column: 1;
		aspect-ratio: 1;
		margin: 0;
	}

	.ab-category .ab-category__img {
		padding: 8%;
	}

	.ab-category__name {
		grid-column: 2;
		margin: 0;
	}

	.ab-category__desc,
	.ab-category__actions {
		grid-column: 1 / -1;
	}

	.ab-category__desc {
		margin: 12px 0 16px;
	}

	.ab-category__actions {
		padding-bottom: 0;
	}
}

/* a category without visible products: WooCommerce's notice as a quiet line */
.ab-plist .ab-plist__none {
	margin: 0;
	color: var(--ab-pcard-muted);
}

/* ------------------------------------------------------------ product groups (avalon/product-group) */

/* the product hubs (/tuotteet/, /sv/produkter-2/, /en/products-2/) and the product family pages: the same cards as the
   category pages; a group inside a section (the section has the group's h2) adds no spacing of its own */
.ab-product-group .ab-head + .ab-pcards {
	margin-top: 0;
}

/* a hand-made card's own text (the hubs' old callouts) and a product family's card: a line more than a product's note */
.ab-product.ab-product--text .ab-product__note {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

@media (min-width: 1025px) {
	:is(.ab-pcards--grid, .ab-product-grid) > .ab-product.ab-product--text .ab-product__note {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}

/* "Katso kaikki tuoteryhmän tuotteet (21) ›" and the group's own links below the cards: navy, bold, the accent arrow;
   phones: full-width rows of 48px between thin lines (the site's "Lue lisää" rows), desktop: side by side */
.ab-pgroup__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
	margin: var(--ab-flow-c, 32px) 0 0;
	padding: 0;
	list-style: none;
}

.ab-pgroup__links > li {
	margin: 0;
	padding: 0;
}

.ab-pgroup__links > li::before {
	content: none;
}

.ab-pgroup .ab-pgroup__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--ab-tap, 44px);
	color: var(--ab-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.ab-pgroup .ab-pgroup__link::after {
	content: "";
	flex: 0 0 auto;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.5em;
	background-color: var(--ab-accent);
	-webkit-mask: url("icons/arrow-right.svg") center / contain no-repeat;
	mask: url("icons/arrow-right.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.ab-pgroup .ab-pgroup__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-pgroup .ab-pgroup__link:hover::after {
	transform: translateX(3px);
}

.ab-pgroup .ab-pgroup__link:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

.ab-pgroup__count {
	margin-left: 0.3em;
	color: var(--ab-pcard-muted);
	font-weight: 400;
}

.is-dark .ab-pgroup .ab-pgroup__link {
	color: #fff;
}

.is-dark .ab-pgroup__count {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
	.ab-pgroup__links {
		display: block;
		margin-top: 24px;
		border-top: 1px solid #e3e5ea;
	}

	.ab-pgroup__links > li {
		border-bottom: 1px solid #e3e5ea;
	}

	.ab-pgroup .ab-pgroup__link {
		display: flex;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		padding: 10px 2px;
		font-size: 15px;
	}

	.ab-pgroup .ab-pgroup__link::after {
		margin-left: 12px;
	}

	.ab-pgroup__count {
		margin-left: auto;
		padding-left: 0.4em;
	}

	.is-dark .ab-pgroup__links,
	.is-dark .ab-pgroup__links > li {
		border-color: rgba(255, 255, 255, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-pgroup .ab-pgroup__link::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ round 4 fixes (phase B, 2026-10-30) */

/* cards on a light section (/tuotteet/maaperakasittely/ "Suodatuskasettipaketit"): no visible tile either (round 5):
   the picture's square has the section's own colour, so it does not show, and the pictures' white backgrounds take
   that colour (multiply), so no white patch shows on the light grey (the section's background itself is out of the
   blend's reach: .ab-container is a stacking context) */
.ab-bg-light :is(.ab-product .ab-product__media, .ab-category__media) {
	background: var(--wp--preset--color--light, #f7f6f6);
}

.ab-bg-light :is(.ab-product .ab-product__media img, .ab-product .ab-product__img, .ab-category .ab-category__img) {
	mix-blend-mode: multiply;
}

/* PR-04 the product page's gallery thumbnails (:root:root: WooCommerce's ".woocommerce div.product div.images
   .flex-control-thumbs li" rules must not win): equal squares directly on the page (no tile, round 5), ~100px each
   (6 in a row on desktop, 4 on tablets), 8px apart, all at full strength, the shown one framed navy, a navy line
   under the one the pointer is on; phones: one row that scrolls sideways (72px squares) instead of rows of different
   heights */
:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}

:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs::before,
:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs::after {
	content: none;
}

:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs li {
	position: relative;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: none;
	list-style: none;
}

:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs li::before {
	content: none;
}

:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs li img {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 8%;
	object-fit: contain;
	opacity: 1;
	cursor: pointer;
}

/* the pointer on a picture: a 2px navy line along its bottom edge (no box; the shown one keeps its frame) */
:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs li:hover::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	border-bottom: 2px solid var(--ab-navy);
	pointer-events: none;
}

/* the shown picture: a 2px navy frame inside its square */
:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs li:has(> img.flex-active)::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--ab-navy);
	pointer-events: none;
}

@media (max-width: 768px) {
	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		padding-bottom: 4px;
	}

	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
		scroll-snap-align: start;
	}
}

/* PR-07 the breadcrumb (blocks/product-breadcrumbs: a list; the theme's 14px, colours and 44px tap rows apply): the "/"
   at the end of each link (a wrapped line never starts with it), "Etusivu /" / "Hem /" at least 44px wide; the
   product page (ab-crumbs--nocurrent): the product's own name only for screen readers (the h1 is right below), and on
   phones the last category on one line, shortened with "…" */
.ab-crumbs .ab-crumbs__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-crumbs .ab-crumbs__item {
	display: inline;
	margin: 0;
	padding: 0;
}

.ab-crumbs .ab-crumbs__item::before {
	content: none;
}

.ab-crumbs .ab-crumbs__item > a {
	min-width: 44px;
	box-sizing: border-box;
	vertical-align: top;
}

.ab-crumbs .ab-crumbs__item:not(:last-child) > a::after {
	content: "/";
	display: inline-block;
	margin-inline: 0.45em;
	color: #5d6680;
	text-decoration: none;
}

.ab-crumbs.ab-crumbs--nocurrent .ab-crumbs__item:nth-last-child(2) > a::after {
	content: none;
}

.ab-crumbs .ab-crumbs__item--current.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.ab-crumbs.ab-crumbs--nocurrent .ab-crumbs__item:nth-last-child(2) > a {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* PR-08 the product page's buttons ("Pyydä tarjous", "Takaisin tuoteryhmän tuotteisiin"): bold like the call to action
   band and the header */
.ab-product-actions .wp-element-button {
	font-weight: 700;
}

/* (PR-09 the sub-category chips on phones: see "the sub-categories" above; they wrap on every page, phase B 2) */

@media (max-width: 768px) {
	/* PR-12 long lists (more than 16 products on one page): compact rows, a 72px tile, the lead in two lines at most
	   (phase B 2: one line cut sibling products' notes at the same words, "Korkeus säiliön pohjasta viemärin…") */
	.ab-plist--long .ab-pcards.ab-pcards {
		gap: 14px;
	}

	.ab-plist--long .ab-product {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
	}

	.ab-plist--long .ab-product .ab-product__note {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.ab-plist--long .ab-product__foot {
		margin-top: 4px;
	}
}

/* PR-05 a long short description (blocks/product-lead): its first paragraphs, then "Lue lisää ⌄" (navy, bold, the
   site's chevron, a 44px row) that opens the rest; "Pyydä tarjous" stays near the top */
.ab-plead {
	margin: 0 0 var(--ab-flow-p, 14px);
}

.ab-plead > .ab-plead__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ab-tap, 44px);
	color: var(--ab-navy);
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ab-plead > .ab-plead__toggle::-webkit-details-marker {
	display: none;
}

.ab-plead > .ab-plead__toggle::after {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.ab-plead[open] > .ab-plead__toggle {
	display: none;
}

.ab-plead > .ab-plead__toggle:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-plead > .ab-plead__toggle:focus {
	outline: none;
}

.ab-plead > .ab-plead__toggle:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

.ab-plead__rest > :last-child {
	margin-bottom: 0;
}

/* round 4b: a link in the part behind "Lue lisää" is underlined as in the part above it (the theme's text-link rule,
   style.css, covers only the summary's own paragraphs and lists) */
.ab-plead__rest > :is(p, ul, ol) a:where(:not(.wp-element-button, .wp-block-button__link, .ab-btn, .button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-plead__rest > :is(p, ul, ol) a:where(:not(.wp-element-button, .wp-block-button__link, .ab-btn, .button)):hover {
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ab-plead > .ab-plead__toggle::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ round 4 fixes (phase B 2, 2026-11-02) */

/* a question posing as a product ("Etkö löydä etsimääsi varaosaa?", blocks/product-list ab_plist_help_card()): a help
   box after the list's cards, the brand's light tile, its text (lists and the phone number link) and "Pyydä tarjous";
   no picture, no "Katso tuote" */
.ab-plist__help {
	margin-top: var(--ab-flow-c, 32px);
}

.ab-product.ab-product--help {
	display: block;
	max-width: 860px;
	padding: 24px 20px;
	background: var(--ab-pcard-tile);
}

.ab-bg-light .ab-product.ab-product--help {
	background: #fff;
}

.ab-product--help .ab-product__title {
	margin-bottom: 8px;
	font-size: var(--ab-item-size, 18px);
}

.ab-product--help .ab-product__help {
	color: var(--wp--preset--color--body, #1b2a57);
	font-size: 15px;
	line-height: 1.55;
}

.ab-product--help .ab-product__help > * {
	margin: 0 0 10px;
}

.ab-product--help .ab-product__help > :last-child {
	margin-bottom: 0;
}

.ab-product--help .ab-product__help ul {
	padding-left: 1.25em;
	list-style: disc;
}

.ab-product--help .ab-product__help li {
	margin: 0 0 2px;
	padding: 0;
}

.ab-product--help .ab-product__help li::before {
	content: none;
}

.ab-product--help .ab-product__help a {
	color: var(--ab-navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ab-product--help .ab-product__help a:focus-visible {
	outline: 3px solid var(--ab-accent);
	outline-offset: 2px;
}

.ab-product--help .ab-product__body > .ab-product__buy {
	margin-top: 16px;
}

@media (min-width: 769px) {
	.ab-product.ab-product--help {
		padding: 32px;
	}
}

/* product rows in a text column (blocks/product-group "layout": rows; /tuotteet/maaperakasittely/: the product under
   its explanation instead of an outline "Katso tuote" button): the phones' row at every width (a 96px tile, the name,
   the note's first sentence, "Katso tuote ›") */
.ab-pcards.ab-pcards--rows {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	max-width: 640px;
}

.ab-pcards--rows .ab-product .ab-product__rest {
	display: none;
}

/* PR-04 the product page's gallery on desktop: more than six thumbnails fill their rows (7 = one row of 7, 9 = 5 + 4,
   16 = 8 + 8) instead of 6 + 1 alone; up to six stay ~100px tiles from the left (phones: one sideways row) */
@media (min-width: 1025px) {
	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(7)) {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(7):last-child),
	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(13):last-child),
	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(14):last-child) {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(9):last-child),
	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(10):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(11):last-child),
	:root:root .an-product-top .woocommerce-product-gallery .flex-control-thumbs:has(> li:nth-child(12):last-child) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* a product's own photo in the Teksti ja kuva block (className "ab-ti--product-photo"; /tuotteet/umpisailio/
   "Huolettomuutta langattoman hälyttimen avulla", content op products-family-fix2.php): directly on the page like the
   product cards (round 5: no tile, also not the block's own "light" picture background, blocks.css
   .ab-ti__media--bg-light, which the op set), not taller than the text beside it */
.ab-text-image.ab-ti--product-photo .ab-ti__media {
	background: none;
}

.ab-text-image.ab-ti--product-photo .ab-ti__img {
	width: 100%;
	max-height: 380px;
	object-fit: contain;
}

/* (on a light section: the picture's area has the section's own colour and the photo's white background takes it, as
   the cards' squares above; on a navy one, the umpisäiliö page's alarm section, the picture's area is white, as the
   product cards' squares there) */
.ab-text-image.ab-ti--product-photo.ab-bg-light .ab-ti__media,
.ab-bg-light .ab-text-image.ab-ti--product-photo .ab-ti__media {
	background: var(--wp--preset--color--light, #f7f6f6);
}

.ab-text-image.ab-ti--product-photo.ab-bg-light .ab-ti__img,
.ab-bg-light .ab-text-image.ab-ti--product-photo .ab-ti__img {
	mix-blend-mode: multiply;
}

.ab-text-image.ab-ti--product-photo.is-dark .ab-ti__media,
.is-dark .ab-text-image.ab-ti--product-photo .ab-ti__media {
	background: #fff;
}

@media (max-width: 768px) {
	.ab-text-image.ab-ti--product-photo .ab-ti__img {
		max-height: 240px;
	}
}

/* ------------------------------------------------------------ round 5, fix round 2 (2026-11-03) */

/* a product without a picture (WooCommerce's placeholder; "IISI Fosforinsaostuskemikaali" fi/sv/en): the
   placeholder's own light grey square (#f5f8f7) showed as a grey box in the lists and as a large one on the product
   page. It turns white (244-248 -> 255), so only its faint picture icon shows, and WooCommerce's 1px #f2f2f2 frame of
   the product page's placeholder is transparent (its width stays, nothing moves). The real fix is a photo of the
   product. */
:is(.ab-product, .ab-category, .woocommerce-product-gallery) img:is([src*="/woocommerce-placeholder"], [src*="/woocommerce/assets/images/placeholder"]) {
	filter: brightness(1.05);
}

:root:root .woocommerce-product-gallery.images .woocommerce-product-gallery__image--placeholder {
	border-color: transparent;
}

/* product renders and drawings with a white background on a light section: their white showed as a white box on the
   light grey band, the only box left among the products of those pages. As on the product cards' squares there, the
   picture's area takes the section's own colour and the picture's white takes it (multiply; the section's background
   itself is out of the blend's reach, .ab-container is a stacking context). Only these pictures, by file (the same
   paths on the dev server): the BioKube render (/tuotteet/pienpuhdistamo/, /tuotteet/panospuhdistamo/), the
   Biopuhdistaja cutaway (/tuotteet/biopuhdistaja-3-4/), the BioKube principle picture (/tuotteet/biokube-pluto-ja-venus/,
   an image block) and the filter-cassette field drawing (/tuotteet/maaperakasittely/). Photos of places and people on
   light sections stay as they are. */
.ab-bg-light .ab-ti__media:has(.ab-ti__img:is([src*="/2020/03/BioKube-Pluto-ja-Venus-Vestelli"], [src*="/2018/02/Biopuhdistaja-leikkauskuvat-mainoksiin6"], [src*="/2024/03/Nayttokuva-2024-3-15-kello-12.57.27"])),
.ab-bg-light .wp-block-image:has(img[src*="/2019/04/Screenshot_8"]) {
	background-color: var(--wp--preset--color--light, #f7f6f6);
}

.ab-bg-light .ab-ti__img:is([src*="/2020/03/BioKube-Pluto-ja-Venus-Vestelli"], [src*="/2018/02/Biopuhdistaja-leikkauskuvat-mainoksiin6"], [src*="/2024/03/Nayttokuva-2024-3-15-kello-12.57.27"]),
.ab-bg-light .wp-block-image img[src*="/2019/04/Screenshot_8"] {
	mix-blend-mode: multiply;
}

/* (two of them carry a 1px grey line of their old white box along some edges, the cutaway on top and left, the
   drawing on the right: cut off, so no line of a box stays behind; the cutaway's 2px are inside its white margin, as a
   picture placed at a half pixel on phones spreads the line over two rows; the drawing itself is not touched) */
.ab-bg-light .ab-ti__img[src*="/2018/02/Biopuhdistaja-leikkauskuvat-mainoksiin6"] {
	clip-path: inset(2px 0 0 2px);
}

.ab-bg-light .ab-ti__img[src*="/2024/03/Nayttokuva-2024-3-15-kello-12.57.27"] {
	clip-path: inset(0 1px 0 0);
}