/*
 * Vestelli section blocks (front end and editor).
 *
 * Spacing, sizes, breakpoints and mobile patterns follow the Avalon Nordic Gutenberg standard (avalon-blocks
 * blocks.css + components/*.css, user decision 2026-10-08: the standard replaces the old Beaver Builder parity).
 * Three steps: phone <= 768px, tablet 769-1024px, desktop >= 1025px. Content 1310px wide (wide 1350px, theme.json),
 * the gutter and all spacing come from the tokens below. Colours, fonts, the logo and the wave marks stay Vestelli's
 * (theme.json presets: navy #1b2a57, accent #01a6e6, heading #012b55; Oxygen + Cormorant Garamond).
 *
 * Stored Beaver Builder values in the content no longer decide the spacing: the an-gt-* / an-gm-* / an-gmn-* gap
 * classes have no rules, exact px section paddings are clamped into the token scale (and are the m preset up to
 * 1024px), the phone / tablet / large padding overrides are ignored, and every hero uses the same spacing system
 * whatever its stored paddings, alignment, text width or side offsets.
 */

/* Tokens (phone / tablet / desktop):
   section padding xs 12/16/24, s 24/32/48, m 40/72/100, l 48/80/100, xl 56/96/120, band 64/112/160; gutter 20/32/40;
   grid and column gap 20/32/48; title to content 24/32/48; text flow 16/18/20 (14/16/16 between paragraphs, 32/44/56
   around components and above a new part's heading); lead text 17/18/20, item names 16/17/18; buttons 48/44/44 high,
   tap targets 44px; readable measure 68ch, text column 760px. The header height (--ab-header-h) is the theme's
   (inc/header.php); everything here reads it with the 72px fallback. */
:root {
	--ab-gutter: 20px;
	--ab-pad-xs: 12px;
	--ab-pad-s: 24px;
	--ab-pad-m: 40px;
	--ab-pad-l: 48px;
	--ab-pad-xl: 56px;
	--ab-pad-band: 64px;
	--ab-gap: 20px;
	--ab-head-gap: 24px;
	--ab-flow: 16px;
	--ab-flow-p: 14px;
	--ab-flow-c: 32px;
	--ab-lead-size: 17px;
	--ab-item-size: 16px;
	--ab-tap: 44px;
	--ab-btn-h: 48px;
	--ab-measure: 68ch;
	--ab-text-width: 760px;
	--ab-heading: var(--wp--preset--color--navy, #1b2a57);
	--ab-navy: var(--wp--preset--color--navy, #1b2a57);
	--ab-accent: var(--wp--preset--color--accent, #01a6e6);
	--ab-accent-hover: #0194cd;
	/* the darkening layer over photos (Beaver Builder: rgba(20, 35, 80, x)) */
	--ab-overlay: #142350;
	--ab-overlay-rgb: 20, 35, 80;
}

@media (min-width: 769px) {
	:root {
		--ab-gutter: 32px;
		--ab-pad-xs: 16px;
		--ab-pad-s: 32px;
		--ab-pad-m: 72px;
		--ab-pad-l: 80px;
		--ab-pad-xl: 96px;
		--ab-pad-band: 112px;
		--ab-gap: 32px;
		--ab-head-gap: 32px;
		--ab-flow: 18px;
		--ab-flow-p: 16px;
		--ab-flow-c: 44px;
		--ab-lead-size: 18px;
		--ab-item-size: 17px;
		--ab-btn-h: 44px;
	}
}

@media (min-width: 1025px) {
	:root {
		--ab-gutter: 40px;
		--ab-pad-xs: 24px;
		--ab-pad-s: 48px;
		--ab-pad-m: 100px;
		--ab-pad-l: 100px;
		--ab-pad-xl: 120px;
		--ab-pad-band: 160px;
		--ab-gap: 48px;
		--ab-head-gap: 48px;
		--ab-flow: 20px;
		--ab-flow-c: 56px;
		--ab-lead-size: 20px;
		--ab-item-size: 18px;
	}
}

/* ------------------------------------------------------------ section frame */

.ab-section,
.ab-hero {
	position: relative;
	box-sizing: border-box;
}

/* sections follow each other without gaps */
.ab-section.alignfull,
.ab-hero.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* the content container: the content size + a gutter on each side (x = 65 at 1440px, 32 at 820px, 20 at 390px) */
.ab-container {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter));
	margin-inline: auto;
	padding-inline: var(--ab-gutter);
}

.ab-container--wide {
	max-width: calc(var(--wp--style--global--wide-size, 1350px) + 2 * var(--ab-gutter));
}

/* medium: the old theme's text column (classic pages, shop pages) */
.ab-container--medium {
	max-width: calc(1020px + 2 * var(--ab-gutter));
}

.ab-container--narrow {
	max-width: calc(910px + 2 * var(--ab-gutter));
}

/* an own maximum width (a narrow text column of the old site; 2 x 20px of it were the old modules' margins), never wider
   than the content container */
.ab-container--max {
	max-width: min(calc(var(--ab-max) - 40px + 2 * var(--ab-gutter)), calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter)));
}

/* A narrower section (medium, narrow or an own maximum width) starts on the content container's left edge like every
   other section and the hero's text (x = 65 at 1440px), not centred in between them (Avalon). A section whose content
   is centred stays centred, and so does an article's text column (single posts). */
@media (min-width: 769px) {
	body:not(.single-post) .ab-sec > .ab-container:is(.ab-container--medium, .ab-container--narrow, .ab-container--max):not(:has(.has-text-align-center, .is-content-justification-center)) {
		margin-inline: max(0px, calc((100% - var(--wp--style--global--content-size, 1310px)) / 2 - var(--ab-gutter))) auto;
	}
}

/* top / bottom padding: the presets */
.ab-pt-none { padding-top: 0; }
.ab-pt-xs { padding-top: var(--ab-pad-xs); }
.ab-pt-s { padding-top: var(--ab-pad-s); }
.ab-pt-m { padding-top: var(--ab-pad-m); }
.ab-pt-l { padding-top: var(--ab-pad-l); }
.ab-pt-xl { padding-top: var(--ab-pad-xl); }
.ab-pb-none { padding-bottom: 0; }
.ab-pb-xs { padding-bottom: var(--ab-pad-xs); }
.ab-pb-s { padding-bottom: var(--ab-pad-s); }
.ab-pb-m { padding-bottom: var(--ab-pad-m); }
.ab-pb-l { padding-bottom: var(--ab-pad-l); }
.ab-pb-xl { padding-bottom: var(--ab-pad-xl); }

/* a stored px value (the old site's own spacing, --ab-pt / --ab-pb): kept inside the token scale on desktop (xs to xl),
   the m preset on tablets and phones. The old phone / tablet / large-screen values (.ab-ptm, .ab-ptt, .ab-ptl ...)
   have no rules any more. */
.ab-pt-px { padding-top: clamp(var(--ab-pad-xs), var(--ab-pt, var(--ab-pad-m)), var(--ab-pad-xl)); }
.ab-pb-px { padding-bottom: clamp(var(--ab-pad-xs), var(--ab-pb, var(--ab-pad-m)), var(--ab-pad-xl)); }

@media (max-width: 1024px) {
	.ab-pt-px { padding-top: var(--ab-pad-m); }
	.ab-pb-px { padding-bottom: var(--ab-pad-m); }
}

/* the first section below a hero keeps at least s above its content (with xs or none it started right under the
   picture's edge); also below a template's hero (post, archive, search, cart), where the page's content follows in
   its own post-content block */
.ab-hero + .ab-section:is(.ab-pt-none, .ab-pt-xs),
.ab-hero + .wp-block-post-content > .ab-section:first-child:is(.ab-pt-none, .ab-pt-xs) {
	padding-top: var(--ab-pad-s);
}

.ab-hero + .ab-section.ab-pt-px,
.ab-hero + .wp-block-post-content > .ab-section.ab-pt-px:first-child {
	padding-top: max(var(--ab-pad-s), clamp(var(--ab-pad-xs), var(--ab-pt, var(--ab-pad-m)), var(--ab-pad-xl)));
}

@media (max-width: 1024px) {
	.ab-hero + .ab-section.ab-pt-px,
	.ab-hero + .wp-block-post-content > .ab-section.ab-pt-px:first-child {
		padding-top: var(--ab-pad-m);
	}
}

.ab-bg-light { background-color: var(--wp--preset--color--light, #f7f6f6); }
.ab-bg-navy,
.ab-bg-image { background-color: var(--ab-navy); }
/* the old site's navy at 90% over white: a lighter shade of the navy */
.ab-bg-navy-soft { background-color: rgba(20, 35, 80, 0.9); }
.ab-section.ab-bg-custom { background-color: var(--ab-bgc); }

/* background image + darkening layer. The picture fills the section and never runs past it: the doubled class
   outweighs WooCommerce's ".woocommerce img, .woocommerce-page img { height: auto }" (on the category pages the
   band's photo did not cover the section on phones), and the section clips it. */
.ab-bg-image {
	overflow: clip;
}

.ab-bg__img.ab-bg__img,
.ab-hero__img.ab-hero__img,
.ab-card__img.ab-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.ab-bg__overlay,
.ab-hero__overlay,
.ab-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--ab-overlay);
	pointer-events: none;
}

/* white text on a photo section needs a real darkening: a stored overlay below 0.45 (e.g. 0.19 over the bright
   "koulutus" photo) is raised to 0.5 (the render writes it as an inline opacity), and the text gets a soft shadow */
.ab-bg-image .ab-bg__overlay:is([style="opacity:0"], [style^="opacity:0.0"], [style^="opacity:0.1"], [style^="opacity:0.2"], [style^="opacity:0.3"], [style^="opacity:0.4"]) {
	opacity: 0.5 !important;
}

.ab-bg-image.is-dark > .ab-container :is(h1, h2, h3, h4, h5, h6, p, li) {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* a gradient overlay: the colour at the stated edge (--ab-ov = its opacity), fading out to the opposite edge */
.ab-hero__overlay--left { background: linear-gradient(90deg, rgba(var(--ab-overlay-rgb), var(--ab-ov, 0.7)) 0%, rgba(var(--ab-overlay-rgb), 0) 100%); }
.ab-hero__overlay--right { background: linear-gradient(270deg, rgba(var(--ab-overlay-rgb), var(--ab-ov, 0.7)) 0%, rgba(var(--ab-overlay-rgb), 0) 100%); }
.ab-hero__overlay--top { background: linear-gradient(180deg, rgba(var(--ab-overlay-rgb), var(--ab-ov, 0.7)) 0%, rgba(var(--ab-overlay-rgb), 0) 100%); }
.ab-hero__overlay--bottom { background: linear-gradient(0deg, rgba(var(--ab-overlay-rgb), var(--ab-ov, 0.7)) 0%, rgba(var(--ab-overlay-rgb), 0) 100%); }

/* hero background video: over the picture, under the darkening layer; not on phones (the picture shows) or for
   visitors who asked for less motion */
.ab-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* the video's pause / play button (a toggle, hero.js): a 44px round button at the bottom right of the content area, in
   line with the text's lower edge (the hero's edge 56 / 48px), over the darkening layers; two bars, a triangle when the
   video is paused. Shown only where the video is, and only with JavaScript (the attribute hidden). */
.ab-hero__pause {
	position: absolute;
	z-index: 3;
	right: max(var(--ab-gutter), calc((100% - var(--wp--style--global--content-size, 1310px)) / 2));
	bottom: var(--ab-hero-edge, 56px);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--ab-tap);
	height: var(--ab-tap);
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: rgba(var(--ab-overlay-rgb), 0.55);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ab-hero__pause[hidden] {
	display: none;
}

.ab-hero__pause:hover {
	border-color: #fff;
	background: rgba(var(--ab-overlay-rgb), 0.8);
}

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

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

.ab-hero__pause-icon {
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 14px;
	border-inline: 4px solid currentColor;
}

.ab-hero__pause[aria-pressed="true"] .ab-hero__pause-icon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-width: 7px 0 7px 12px;
	border-style: solid;
	border-color: transparent transparent transparent currentColor;
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
	.ab-hero__video,
	.ab-hero__pause {
		display: none;
	}
}

.ab-card__overlay {
	background: #000;
}

/* text on dark sections (headings use --ab-heading, white boxes set it back) */
.is-dark {
	--ab-heading: #fff;
	color: #fff;
}

.is-dark :is(h1, h2, h3, h4, h5, h6),
.is-dark .ab-intro {
	color: #fff;
}

.is-dark a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* ------------------------------------------------------------ section head */

/* title (+ intro) to the content: 24 / 32 / 48px; the head keeps a readable width */
.ab-head {
	max-width: var(--ab-text-width);
	margin-bottom: var(--ab-head-gap);
}

.ab-title {
	margin: 0;
	color: var(--ab-heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
}

/* the intro reads as a lead paragraph (the same size as the paragraph style "Ingressi") */
.ab-intro {
	margin: 0;
	color: var(--ab-heading);
	font-size: var(--ab-lead-size);
	font-weight: 400;
	line-height: 1.45;
}

.ab-title + .ab-intro {
	margin-top: var(--ab-flow);
}

/* an intro of several paragraphs: the paragraph rhythm between them, none below the last */
.ab-intro > p {
	margin: 0 0 var(--ab-flow-p);
}

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

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

/* ------------------------------------------------------------ content rhythm inside sections */
/* The flow containers: a section's content (not the hero's, which has its own gaps below), a column, an an-flow group
   and a cover's content. Between blocks --ab-flow; paragraphs and lists of one text --ab-flow-p; components (columns,
   images, tables, groups, embeds, details, grids) and a heading that follows text --ab-flow-c; buttons 32px below the
   text. (The selectors are 0,3,0 and more: stronger than the theme's element margins and its old 10px / 40px rhythm.) */

:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > * {
	margin-block: 0;
}

:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > * + * {
	margin-block-start: var(--ab-flow);
}

/* paragraphs and lists of one text, also below a heading that was inside a Beaver Builder text module */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > p + p,
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > p + :is(ul, ol),
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(ul, ol) + p,
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > .an-text-heading + :is(p, ul, ol) {
	margin-block-start: var(--ab-flow-p);
}

/* components get 32 / 44 / 56px around them (a text module group, an-text, is text, not a component) */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-group:not(.an-text), .wp-block-query, .wp-block-embed, .wp-block-details, .wp-block-separator, .wp-block-video, .ab-grid, .ab-product-grid, .ab-section, .hmc-form-container) + *,
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > * + :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-group:not(.an-text), .wp-block-query, .wp-block-embed, .wp-block-details, .wp-block-separator, .wp-block-video, .ab-grid, .ab-product-grid, .ab-section, .hmc-form-container) {
	margin-block-start: var(--ab-flow-c);
}

/* ... but a table or a list right under its heading belongs to it: the heading's own gap (--ab-flow), as text has.
   (.wp-block-table doubled: the rule above weighs 0,5,0 because its list holds .wp-block-group:not(.an-text).) */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(h2, h3, h4, h5, h6) + :is(.wp-block-table.wp-block-table, table, ul, ol) {
	margin-block-start: var(--ab-flow);
}

/* a heading that follows text (not another heading: a title and its subtitle stay together) starts a new part of the
   section; so does a text module that starts with one */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :not(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4),
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :not(h1, h2, h3, h4, h5, h6) + .an-text:has(> :first-child:is(h2, h3, h4)) {
	margin-block-start: var(--ab-flow-c);
}

/* FAQ items (core/details in an an-faq group) follow each other directly; their look is the theme's */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) .an-faq > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

/* buttons 32px below the text */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > * + .wp-block-buttons {
	margin-block-start: 32px;
}

/* The Vestelli wave under a title (class an-wave, or one of the wave pictures of the media library): right under the
   heading (12 / 14 / 16px), the text after it as after a heading, a component after it as after text. */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > * + :is(.an-wave, .wp-block-image:has(> img:is([src*="element_wave"], [src*="77cc405b684b894164f3de3e96c8b7d0"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"]))) {
	margin-block-start: calc(var(--ab-flow) - 4px);
}

:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(.an-wave, .wp-block-image:has(> img:is([src*="element_wave"], [src*="77cc405b684b894164f3de3e96c8b7d0"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"]))) + * {
	margin-block-start: var(--ab-flow);
}

:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(.an-wave, .wp-block-image:has(> img:is([src*="element_wave"], [src*="77cc405b684b894164f3de3e96c8b7d0"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"]))) + :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-group:not(.an-text), .wp-block-query, .wp-block-embed, .wp-block-details, .ab-grid, .ab-product-grid, .ab-section, .hmc-form-container) {
	margin-block-start: var(--ab-flow-c);
}

:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(.an-wave, .wp-block-image:has(> img:is([src*="element_wave"], [src*="77cc405b684b894164f3de3e96c8b7d0"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"]))) + .wp-block-buttons {
	margin-block-start: 32px;
}

/* a script / style element at the start of a flow is no visible sibling: what follows it (Leadoo's bot container, which
   its seamless embed script puts right after itself) has no gap above it */
:is(.ab-flow.ab-flow:not(.ab-hero__content), .ab-flow .wp-block-column, .ab-flow .an-flow, .ab-flow .wp-block-cover__inner-container) > :is(script, style, link, template):first-child + * {
	margin-block-start: 0;
}

/* an address or another string longer than the line (a web address as a link's text on /rekisteriseloste/) wraps
   instead of widening the page on phones; ordinary words never break (only a string that does not fit a line) */
.ab-section :is(p, li, dd, td) {
	overflow-wrap: break-word;
}

/* a readable measure: running text at most 68 characters wide; centred text stays centred. Also the text of the
   converted modules one or two levels down (an an-text group, an an-text inside a full-width an-flow group, and the raw
   HTML pieces in them, e.g. the pasted Elementor text of /palvelut/jatevesijarjestelman-hinta/), which ran 1270px wide.
   (Columns are not in these chains, and the hero's text is not an .ab-flow section.) */
.ab-flow:not(.ab-hero__content) > :is(p, ul, ol),
.ab-flow:not(.ab-hero__content) > :is(.an-text, .an-flow) > :is(p, ul, ol),
.ab-flow:not(.ab-hero__content) > .an-flow > .an-text > :is(p, ul, ol),
.ab-flow:not(.ab-hero__content) > :is(.an-text, .an-flow) .an-html :is(p, ul, ol) {
	max-width: var(--ab-measure);
}

.ab-flow > .has-text-align-center,
.ab-flow:not(.ab-hero__content) :is(.an-text, .an-flow) > .has-text-align-center,
.ab-card .ab-flow > :is(p, ul, ol) {
	margin-inline: auto;
}

/* a section with text only (headings, text, lists, buttons) keeps its headings to the 760px text column too */
.ab-sec > .ab-container--content:not(:has(> :not(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-separator, .wp-block-quote))) > :is(h1, h2, h3, h4, h5, h6) {
	max-width: var(--ab-text-width);
}

/* the text of one module (a group an-text): paragraphs and lists --ab-flow-p apart, a heading --ab-flow-c above and
   --ab-flow below, no margin at the edges (the flow above spaces the module itself). (Three classes: stronger than the
   theme's old 10px / 40px rhythm of flow layouts.) */
.an-text {
	display: flow-root;
}

.an-text.an-text.an-text > * {
	margin-block: 0;
}

.an-text.an-text.an-text > :is(p, ul, ol, dl, figure, .wp-block-buttons) {
	margin-bottom: var(--ab-flow-p);
}

.an-text.an-text.an-text > :is(h1, h2, h3) {
	margin-top: var(--ab-flow-c);
	margin-bottom: var(--ab-flow);
}

.an-text.an-text.an-text > :is(h4, h5, h6) {
	margin-top: var(--ab-flow);
	margin-bottom: var(--ab-flow-p);
}

/* buttons 32px below the text (the margin collapses with the paragraph's) */
.an-text.an-text.an-text > * + .wp-block-buttons {
	margin-top: 32px;
}

/* the raw HTML pieces of one text follow each other without a gap (their own margins are inside them) ... */
.an-text.an-text.an-text > .an-html {
	margin-block: 0;
}

/* ... except two pasted text pieces (Elementor widgets on /palvelut/jatevesijarjestelman-hinta/ and its siblings: the
   last paragraph of one and the first of the next have no margins, so they touched): the paragraph gap, or a
   component's gap before a piece that holds a video */
.an-text.an-text.an-text > .an-html--text + .an-html--text {
	margin-top: var(--ab-flow-p);
}

.an-text.an-text.an-text > .an-html--text + .an-html--text:has(iframe, video, .kncc-iframe-placeholder) {
	margin-top: var(--ab-flow-c);
}

.an-text.an-text.an-text > :first-child {
	margin-top: 0;
}

.an-text.an-text.an-text > :last-child {
	margin-bottom: 0;
}

/* columns (an-cols): plain columns with the grid gap beside each other and --ab-flow-c between stacked ones; no
   negative side margins, no column padding */
.an-cols.an-cols {
	gap: var(--ab-flow-c) var(--ab-gap);
	margin-inline: 0;
}

.an-cols > .wp-block-column {
	box-sizing: border-box;
	padding-inline: 0;
}

/* a lone column (a section title with its wave in an old 50% column) is the text column: 760px at most, the whole
   width on tablets and phones (it wrapped "Harmaiden vesien puhdistus omakotitaloihin..." into four lines at 820px) */
.an-cols.an-cols > .wp-block-column:only-child {
	flex-basis: var(--ab-text-width) !important;
	flex-grow: 0;
	max-width: 100%;
}

/* a text column beside a picture keeps the text inset towards it (an-pr-100, the old 100px column padding): none on
   phones, 16px on tablets, 40px on desktop. A lone group with the class gets the same. */
@media (min-width: 769px) {
	.an-cols > .wp-block-column.an-pr-100,
	.wp-block-group.an-pr-100 {
		padding-right: 16px;
	}
}

@media (min-width: 1025px) {
	.an-cols > .wp-block-column.an-pr-100,
	.wp-block-group.an-pr-100 {
		padding-right: 40px;
	}
}

/* a picture of a column fills the column when the file is narrower than it (a 576px photo in a 632px column at 1440px,
   e.g. the curated product hub pages), so photos side by side line up with the text and with each other. A picture
   with a width of its own (is-resized: icons, logos, badges, the waves), a floated one or one with a phone width class
   keeps its size. */
.an-cols > .wp-block-column > .wp-block-image:not(.is-resized, .an-wave, .alignleft, .alignright, [class*="an-pw"], [class*="an-icon"]) img:not([src*="element_wave"], [src*="77cc405b684b894164f3de3e96c8b7d0"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"]) {
	width: 100%;
	height: auto;
}

/* a column that only holds a script (the chat widget's loader: it adds its own element after the script when it runs) shows
   nothing and takes no room, so it must not get a stack gap of its own; a truly empty column (a deliberate spacer) stays */
.wp-block-columns > .wp-block-column:has(script):not(:has(:is(img, picture, video, iframe, svg, canvas, figure, table, form, input, button, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote))) {
	display: none;
}

/* equal-height columns whose content is aligned in the middle / at the bottom of the (stretched) column */
.an-cols.an-valign-center > .wp-block-column,
.an-cols.an-valign-bottom > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.an-cols.an-valign-center > .wp-block-column {
	justify-content: center;
}

.an-cols.an-valign-bottom > .wp-block-column {
	justify-content: flex-end;
}

/* columns that stack on tablets already (an-stack-m: a heading / text column that would be half-width at 820px); from
   782px WordPress forces flex-wrap: nowrap !important on every columns block, so this needs the same weight */
@media (max-width: 1024px) {
	.an-cols.an-stack-m {
		flex-wrap: wrap !important;
	}

	.an-cols.an-stack-m > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* only some of the columns stack on tablets (an-cm-100): those take the whole row, the others keep their width and
   wrap below */
@media (min-width: 769px) and (max-width: 1024px) {
	.an-cols.an-wrap-m {
		flex-wrap: wrap !important;
	}

	.an-cols.an-wrap-m > .wp-block-column.an-cm-100 {
		flex-basis: 100% !important;
	}

	/* equal-height columns grow to fill the row they wrap onto */
	.an-cols.an-wrap-m.an-eqh > .wp-block-column:not(.an-cm-100) {
		flex-grow: 1;
	}

	/* stacked text columns have no inset */
	.an-cols:is(.an-stack-m, .an-wrap-m) > .wp-block-column.an-pr-100 {
		padding-right: 0;
	}

	/* the narrow text of three or four columns side by side (231px at 820px): a long Finnish compound is hyphenated at
	   a syllable, never split at any letter. WordPress gives every column word-break: break-word, which cuts a word
	   that does not fit anywhere and without a hyphen ("kaksoisviemäröintijärjestelmäks|i"); browsers that have a
	   Finnish dictionary hyphenate instead, the others break at the soft hyphens that helpers.php puts into such
	   words (ab_columns_soft_hyphens). overflow-wrap stays the last resort (never wider than the column). */
	.an-cols > .wp-block-column :is(p, li) {
		word-break: normal;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* aligned blocks (images): WordPress's own alignment rules only apply inside its layout containers */
.ab-flow > .aligncenter {
	margin-inline: auto;
}

.ab-flow > .alignleft {
	float: left;
	margin-inline-end: 2em;
}

.ab-flow > .alignright {
	float: right;
	margin-inline-start: 2em;
}

/* the consent plugin forces margin:0 !important on its placeholder */
.ab-flow.ab-flow > * + .kncc-iframe-placeholder {
	margin-top: var(--ab-flow) !important;
}

.ab-flow.ab-flow > :is(.wp-block-columns, .wp-block-group) + .kncc-iframe-placeholder {
	margin-top: var(--ab-flow-c) !important;
}

.kncc-iframe-placeholder {
	color: var(--wp--preset--color--body, #282828);
}

/* a section inside another one (a post grid in a generic section): no container width/padding of its own */
.ab-flow .ab-section > .ab-container {
	max-width: none;
	padding-inline: 0;
}

/* ... unless it has a background of its own (a navy or light box in an article's text, e.g. the page-title template's
   post content on /kaksoisviemarointi/, or in the plain page's content column, /palvelut/pumppukaivot/): its text keeps
   the gutter inside the box instead of touching the box's edge, and the box keeps a component's distance (--ab-flow-c)
   from the text and buttons above and below it; none at the column's edges. (.an-text tripled: stronger than the text
   module's own margin rules; the plain page's pair outweighs the theme's ".an-main > .wp-block-post-content > .alignfull
   { margin: 0 }", 0,3,0.) */
.ab-flow .ab-section:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-bg-light, .ab-bg-image, .ab-bg-custom) > .ab-container {
	padding-inline: var(--ab-gutter);
}

:is(.an-text.an-text.an-text, .an-page-plain > .an-page-plain__content, .wp-block-post-content.an-article.an-article) > .ab-section:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-bg-light, .ab-bg-image, .ab-bg-custom) {
	margin-block: var(--ab-flow-c);
}

:is(.an-text.an-text.an-text, .an-page-plain > .an-page-plain__content, .wp-block-post-content.an-article.an-article) > .ab-section:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-bg-light, .ab-bg-image, .ab-bg-custom):first-child {
	margin-top: 0;
}

:is(.an-text.an-text.an-text, .an-page-plain > .an-page-plain__content, .wp-block-post-content.an-article.an-article) > .ab-section:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-bg-light, .ab-bg-image, .ab-bg-custom):last-child {
	margin-bottom: 0;
}

/* (The Beaver Builder gap classes an-gt-<px>, an-gm-<px> and an-gmn-<px> that the converted content still carries have
   no rules any more: the flow above spaces every block. The class an-bleed-m (a phone picture running edge to edge)
   has none either: pictures stay inside the gutter like the other ones.) */

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

.ab-grid {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: var(--ab-gap);
}

/* ------------------------------------------------------------ buttons (theme button + variants) */

/* (the theme sets the button's height: at least 44px, 48px on phones) */
.ab-btn {
	display: inline-block;
	text-decoration: none;
}

.wp-element-button.ab-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

.wp-element-button.ab-btn--outline:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.wp-element-button.ab-btn--lg {
	padding: 18px 40px;
	font-weight: 700;
}

/* ------------------------------------------------------------ hero */
/* One system for every hero, on every page and template (the Avalon standard): a photo of a fixed minimum height with
   the text at its bottom. Desktop 80vh, tablets 80vh but at most 600px, phones 55% of the screen (svh). Above the
   text the header + the edge, below it the edge: 56 / 48 / 32px. Fixed gaps: kicker -> title 12 / 10 / 8px, title ->
   the rest 20 / 16 / 12px, -> buttons 32 / 24 / 20px. Title 50 / 40 / 28px, lead 20 / 18 / 17px.
   The per-block values stored by the conversion (inline --ab-hero-pt/-pb/-pt-s/-pt-t/-pt-l, --ab-tw/-twl/-twt,
   --ab-sl/--ab-sr/--ab-st, verticalAlign, contentWidth, height) are not read: center and top behave like bottom. */

.ab-hero {
	--ab-hero-edge: 32px;
	--ab-hero-min: 55vh;
	--ab-hero-h1: 28px;
	--ab-hero-h1-lh: 1.15;
	--ab-hero-lead: 17px;
	--ab-hero-gap-kicker: 8px;
	--ab-hero-gap: 12px;
	--ab-hero-gap-buttons: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--ab-hero-min);
	min-height: 55svh;
	padding: calc(var(--ab-header-h, 72px) + var(--ab-hero-edge)) 0 var(--ab-hero-edge);
	overflow: hidden;
	background-color: var(--ab-navy);
	color: #fff;
}

/* (the stored side offsets of a row: not in a hero) */
.ab-hero.ab-hero.ab-side {
	padding-inline: 0;
}

.ab-hero > .ab-container {
	width: 100%;
}

@media (min-width: 769px) {
	.ab-hero {
		--ab-hero-edge: 48px;
		--ab-hero-h1: 40px;
		--ab-hero-h1-lh: 1.12;
		--ab-hero-lead: 18px;
		--ab-hero-gap-kicker: 10px;
		--ab-hero-gap: 16px;
		--ab-hero-gap-buttons: 24px;
		min-height: min(80vh, 600px);
	}

	/* half of the width, but never narrower than a comfortable title + lead column (any stored text width) */
	.ab-hero .ab-hero__content {
		max-width: max(calc(50% - 20px), 600px);
	}
}

@media (min-width: 1025px) {
	.ab-hero {
		--ab-hero-edge: 56px;
		--ab-hero-h1: 50px;
		--ab-hero-h1-lh: 1.1;
		--ab-hero-lead: 20px;
		--ab-hero-gap-kicker: 12px;
		--ab-hero-gap: 20px;
		--ab-hero-gap-buttons: 32px;
		min-height: 80vh;
	}
}

/* (the stored alignment: the text is always at the bottom) */
.ab-hero.ab-hero:is(.ab-hero--v-top, .ab-hero--v-center) {
	justify-content: flex-end;
}

.ab-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 43, 87, 0.15) 20%, rgba(0, 43, 87, 0.8) 100%);
	pointer-events: none;
}

.ab-hero--t-center .ab-hero__content {
	margin-inline: auto;
	text-align: center;
}

.ab-hero--t-center .wp-block-buttons {
	justify-content: center;
}

/* phones: the darkness sits behind the text: a shade starts transparent 96px above the text and is 0.55 at the text's
   top edge, 0.68 lower down to the hero's lower edge (the hero clips it), so white text stays readable on a bright
   photo whatever the hero's own darkening */
@media (max-width: 768px) {
	.ab-hero .ab-hero__content {
		position: relative;
	}

	.ab-hero .ab-hero__content::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -96px;
		right: -100vw;
		bottom: -100vh;
		left: -100vw;
		background: linear-gradient(180deg, rgba(var(--ab-overlay-rgb), 0) 0, rgba(var(--ab-overlay-rgb), 0.18) 40px, rgba(var(--ab-overlay-rgb), 0.55) 96px, rgba(var(--ab-overlay-rgb), 0.68) 256px);
		pointer-events: none;
	}
}

/* the gaps (.ab-hero doubled: stronger than the section flow, the theme's heading and button margins and the old gap
   classes) */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > * {
	margin-block: 0;
}

.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > * + * {
	margin-block-start: var(--ab-hero-gap);
}

.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(h5, h6, .is-style-kicker) + * {
	margin-block-start: var(--ab-hero-gap-kicker);
}

.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: 10px;
}

.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > * + .wp-block-buttons {
	margin-block-start: var(--ab-hero-gap-buttons);
}

/* the kicker above the title: the old h5 or a paragraph with the style "kicker" (the same look; a stored inline size
   does not count) */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(h5, h6, p.is-style-kicker) {
	max-width: none;
	color: #fff;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* the page title (a heading in the page, or the post / archive title in templates); a stored inline size does not
   count; long words are hyphenated, never split anywhere */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(h1, .wp-block-post-title, .wp-block-query-title) {
	color: #fff;
	font-size: var(--ab-hero-h1) !important;
	font-weight: 700;
	line-height: var(--ab-hero-h1-lh) !important;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: normal;
	text-wrap: pretty;
}

/* the lead: a paragraph (also p.is-style-lead), a list, the paragraphs of a text group, or a heading 3 that the
   converted pages use as a subtitle */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(p:not(.is-style-kicker), h3, ul, ol),
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > .wp-block-group > :is(p, ul, ol) {
	max-width: 34em;
	color: #fff;
	font-size: var(--ab-hero-lead);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: pretty;
}

/* body text in a hero (a text group after the lead, e.g. the converted service pages' three paragraphs under their
   subtitle): the page's body size, not the lead's; only the first text below the title is the lead */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(p:not(.is-style-kicker), h3) ~ .wp-block-group > :is(p, ul, ol) {
	font-size: inherit;
	line-height: 1.5;
}

/* the paragraphs of a text group in a hero: 10px apart */
.ab-hero.ab-hero .ab-hero__content .an-text.an-text.an-text > * {
	margin-block: 0;
}

.ab-hero.ab-hero .ab-hero__content .an-text.an-text.an-text > * + * {
	margin-block-start: 10px;
}

.ab-hero--t-center .ab-hero__content.ab-flow.ab-flow > :is(p, h3, ul, ol) {
	margin-inline: auto;
}

/* a wave under the title keeps its own width */
.ab-hero .ab-hero__content > .wp-block-image {
	max-width: 100%;
}

/* buttons: at least 48px high, 12px apart; on phones side by side when both fit, otherwise one per row across the
   full width */
.ab-hero .ab-hero__content .wp-block-buttons {
	gap: 12px;
}

.ab-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
}

.ab-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: #fff;
	color: #fff;
}

@media (max-width: 768px) {
	.ab-hero .wp-block-buttons > .wp-block-button {
		flex: 1 1 auto;
	}

	.ab-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
		padding-inline: 16px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ text + image */

.ab-ti__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

@media (min-width: 769px) {
	.ab-ti__grid {
		column-gap: 48px;
	}
}

@media (min-width: 1025px) {
	.ab-ti__grid {
		column-gap: 80px;
	}
}

.ab-ti--v-top .ab-ti__grid {
	align-items: start;
}

.ab-ti--img-right.ab-ti--60-40 .ab-ti__grid,
.ab-ti--img-left.ab-ti--40-60 .ab-ti__grid {
	grid-template-columns: 3fr 2fr;
}

.ab-ti--img-right.ab-ti--40-60 .ab-ti__grid,
.ab-ti--img-left.ab-ti--60-40 .ab-ti__grid {
	grid-template-columns: 2fr 3fr;
}

/* the text's distance from the image: m 16 / 40px, l 40 / 80px (tablets / desktop), none on phones */
.ab-text-image {
	--ab-ti-inset: 0px;
}

@media (min-width: 769px) {
	.ab-ti--inset-m {
		--ab-ti-inset: 16px;
	}

	.ab-ti--inset-l {
		--ab-ti-inset: 40px;
	}
}

@media (min-width: 1025px) {
	.ab-ti--inset-m {
		--ab-ti-inset: 40px;
	}

	.ab-ti--inset-l {
		--ab-ti-inset: 80px;
	}
}

.ab-ti--img-right .ab-ti__text {
	padding-right: var(--ab-ti-inset);
}

.ab-ti--img-left .ab-ti__text {
	padding-left: var(--ab-ti-inset);
}

.ab-ti__figure {
	margin: 0;
}

.ab-ti__img {
	display: block;
	width: 100%;
	height: auto;
}

.ab-crop-square .ab-ti__img { aspect-ratio: 1; object-fit: cover; }
.ab-crop-landscape .ab-ti__img { aspect-ratio: 4 / 3; object-fit: cover; }

.ab-crop-cover {
	align-self: stretch;
}

.ab-crop-cover .ab-ti__figure,
.ab-crop-cover .ab-ti__img {
	height: 100%;
	object-fit: cover;
}

.ab-ti__media--bg-accent,
.ab-ti__media--bg-light {
	padding: 32px 20px;
}

@media (min-width: 769px) {
	.ab-ti__media--bg-accent,
	.ab-ti__media--bg-light {
		padding: 56px 32px;
	}
}

.ab-ti__media--bg-accent { background-color: var(--ab-accent); }
.ab-ti__media--bg-light { background-color: var(--wp--preset--color--light, #f7f6f6); }

/* ------------------------------------------------------------ image cards */

/* in the content container like the other sections; from 769px each card has a picture's proportions (large 4:3,
   medium 3:2, small 16:9), taller only when its text needs it. On phones they run edge to edge (small screens). */
.ab-cards > .ab-container--wide {
	max-width: calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter));
}

.ab-cards .ab-grid {
	gap: var(--ab-gap);
}

.ab-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	padding: 48px 32px;
	overflow: hidden;
	background-color: var(--ab-navy);
	color: #fff;
	text-align: center;
}

.ab-cards--h-m .ab-card { aspect-ratio: 3 / 2; }
.ab-cards--h-s .ab-card { aspect-ratio: 16 / 9; }

.ab-card__content {
	position: relative;
	z-index: 1;
}

.ab-card__title {
	margin: 0 0 20px;
	color: #fff;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.1;
}

/* ------------------------------------------------------------ stats */

.ab-stats .ab-grid {
	gap: 24px;
	padding: 0;
}

.ab-stat {
	--ab-heading: var(--wp--preset--color--heading, #012b55);
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	padding: 44px 24px 76px;
	border: 1px solid #eef0f2;
	background: #fff;
	color: var(--ab-heading);
	text-align: center;
}

.ab-stat__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	margin-bottom: 16px;
}

/* (the picture, the number and the label: three classes, so the theme's text rules of an article or a plain page, which
   size every img and p there, do not resize them: the Avainlippu picture was 171 x 244px on /kaksoisviemarointi/ and
   the numbers 17px on /palvelut/pumppukaivot/) */
.ab-stat .ab-stat__img.ab-stat__img {
	width: 64px;
	max-width: none;
	height: 64px;
	margin: 0;
	object-fit: contain;
}

.ab-stat__icon {
	display: block;
	width: auto;
	height: clamp(44px, 3.5vw, 56px);
}

.ab-stat .ab-stat__number.ab-stat__number {
	margin: 0 0 8px;
	font-size: clamp(34px, 3.1vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.01em;
}

/* a long word breaks only where the stats block put a soft hyphen (ab_soft_hyphens(): "materiaali-takuu",
   "valmis-tettu"), never anywhere else */
.ab-stat .ab-stat__label.ab-stat__label {
	margin: 0 0 2px;
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* ------------------------------------------------------------ items made of blocks (people, features) */

.ab-item.ab-item > * {
	margin-block: 0;
}

.ab-item.ab-item > * + * {
	margin-block-start: var(--ab-flow-p);
}

.ab-item.ab-item > .wp-block-image + * {
	margin-block-start: var(--ab-flow);
}

.ab-item.ab-item > p + p {
	margin-block-start: 10px;
}

/* an empty line left from a new card's template (a person's title or phone, a feature's text) takes no room on the
   site; in the editor (contenteditable) it stays visible with its placeholder */
.ab-item > p:empty:not([contenteditable]),
.ab-person__body > p:empty:not([contenteditable]) {
	display: none;
}

.ab-item :is(h2, h3, h4) {
	color: var(--ab-heading);
	font-size: var(--ab-item-size);
	font-weight: 700;
	line-height: 1.3;
}

.ab-item .wp-block-image img {
	display: block;
}

.ab-person .wp-block-image img {
	width: 200px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.ab-feature .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.ab-features .ab-grid {
	gap: var(--ab-flow-c) var(--ab-gap);
}

/* four features in a row: two on tablets */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-features .ab-grid[style*="--ab-cols:4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ posts (the old "Vestelli-artikkelit" post grid) */

/* Desktop and tablets: the Vestelli navy card (the picture 4:3 with the keyword badge, the title, the "read more" link
   and the double wave at the bottom); the cards of a row end at the same line, no fixed heights. The whole card is one
   link (the title's link covers it). Tablets two per row. Phones: rows, a 96px square picture and the title beside it
   on the section's own background (the Avalon pattern). */
.ab-posts:not(.ab-posts--products) .ab-grid {
	grid-auto-rows: auto;
	gap: var(--ab-flow-c) var(--ab-gap);
}

.ab-post {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid #e6e6e6;
	background: #fff;
}

.ab-post__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--light, #f7f6f6);
}

.ab-post__link {
	display: block;
	height: 100%;
}

/* a card without any picture (no featured image, no hero picture, no photo in its text): the site's logo with the
   double wave under it on a light, faintly blue area, so the card keeps the shape of its neighbours and reads as a
   designed picture, not as one that failed to load */
.ab-post__media--empty {
	background: linear-gradient(160deg, #eef7fc 0%, #f7f6f6 70%);
}

.ab-post__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	pointer-events: none;
}

.ab-post .ab-post__logo {
	display: block;
	width: min(44%, 180px);
	max-width: none;
	height: auto;
	margin: 0;
	opacity: 0.9;
}

.ab-post__placeholder::after {
	content: "";
	display: block;
	width: min(30%, 120px);
	height: 12px;
	background-color: var(--ab-accent);
	opacity: 0.55;
	-webkit-mask: url("img/double-wave.png") no-repeat center / 100% 100%;
	mask: url("img/double-wave.png") no-repeat center / 100% 100%;
}

/* (two classes: WooCommerce's ".woocommerce-page img { height: auto }" must not win) */
.ab-post .ab-post__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* the keyword badge: a pill on the picture, its link the whole pill (a 44px target, above the card's link) */
.ab-post__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	max-width: calc(100% - 24px);
	border-radius: 999px;
	background: var(--ab-navy);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}

.ab-post__badge a {
	display: block;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--ab-tap);
	padding: 15.5px 16px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ab-post__badge a:hover {
	text-decoration: underline;
}

.ab-post__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 20px 64px;
	background: var(--ab-navy);
	color: #fff;
}

.ab-post__title {
	margin: 0;
	padding: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	hyphens: auto;
}

.ab-post__title a {
	display: -webkit-box;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
}

/* the title link covers the whole card */
.ab-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ab-post:hover .ab-post__title a {
	text-decoration: underline;
}

.ab-post__title a:focus-visible {
	outline: none;
}

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

/* "Lue lisää" leads to the same post: under the card link, so a tap anywhere on the card opens the post */
.ab-post__more {
	position: relative;
	z-index: 0;
	display: block;
	margin-top: auto;
	padding-top: 8px;
	color: #fff;
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
}

/* the double wave at the bottom of the card */
.ab-post__body::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	height: 26px;
	background: url("img/double-wave.png") no-repeat center / 100% 100%;
	pointer-events: none;
}

/* columns: the block's own setting on desktop ("large" up to 1200px), two per row on tablets */
@media (min-width: 1025px) and (max-width: 1200px) {
	.ab-posts .ab-grid {
		grid-template-columns: repeat(var(--ab-cols-l, var(--ab-cols, 3)), minmax(0, 1fr));
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-posts:not(.ab-posts--products) .ab-grid {
		grid-template-columns: repeat(min(var(--ab-cols, 3), 2), minmax(0, 1fr));
	}

	.ab-post__title {
		font-size: 19px;
	}

	/* an odd last card (three posts: two and one) runs across the row, the picture at the left */
	.ab-posts:not(.ab-posts--products) .ab-grid > .ab-post:last-child:nth-child(odd):not(:only-child) {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.ab-posts:not(.ab-posts--products) .ab-grid > .ab-post:last-child:nth-child(odd):not(:only-child) > .ab-post__media {
		flex: 0 0 calc(50% - var(--ab-gap) / 2);
	}
}

/* phones: rows. The picture spans all rows; the empty 1fr rows above and below the text take the picture's extra
   height, so a short title and its "Lue lisää" stay together, centred beside the picture. */
@media (max-width: 768px) {
	.ab-posts:not(.ab-posts--products) .ab-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px;
	}

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

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

	.ab-post__media {
		width: 96px;
		aspect-ratio: 1;
	}

	/* the placeholder's logo fills the small square */
	.ab-post .ab-post__logo {
		width: 74%;
	}

	.ab-post__placeholder {
		gap: 8px;
	}

	.ab-post__placeholder::after {
		width: 42%;
		height: 8px;
	}

	.ab-post__badge {
		display: none;
	}

	.ab-post__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0;
		background: none;
		color: inherit;
	}

	.ab-post__body::after {
		display: none;
	}

	.ab-post__title {
		padding: 0;
		font-size: 16px;
		line-height: 1.35;
	}

	.ab-post__title a {
		color: var(--ab-heading);
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	/* navy with the accent arrow, like the product rows' "Katso tuote" (the accent text on white was 2.8:1) */
	.ab-post__more {
		margin-top: 2px;
		padding-top: 0;
		color: var(--ab-navy);
		font-size: 14px;
		font-weight: 700;
	}

	.ab-post__more::after {
		content: "";
		display: inline-block;
		width: 0.85em;
		height: 0.85em;
		margin-left: 0.45em;
		vertical-align: -0.08em;
		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-post:hover .ab-post__more::after {
		transform: translateX(3px);
	}

	.is-dark .ab-post__title a,
	.is-dark .ab-post__more {
		color: #fff;
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.ab-post__more::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ "Lataa lisää", page numbers (posts and product lists) */

.ab-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0;
}

.ab-posts .ab-grid + :is(.ab-more, .ab-pagination) {
	margin-top: 40px;
}

/* page numbers (the article and story lists, the shop and the product lists: one look, round 4): 44 x 44px squares,
   the current page navy, "Edellinen" / "Seuraava" with the site's chevron */
.ab-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-width: var(--ab-tap);
	min-height: var(--ab-tap);
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(27, 42, 87, 0.22);
	border-radius: 0;
	background: #fff;
	color: var(--ab-navy);
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

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

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

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

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

.ab-pagination :is(.prev, .next).page-numbers::before,
.ab-pagination :is(.prev, .next).page-numbers::after {
	flex: 0 0 auto;
	width: 7px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("icons/chevron-right.svg") center / contain no-repeat;
	mask: url("icons/chevron-right.svg") center / contain no-repeat;
}

.ab-pagination .prev.page-numbers::before {
	content: "";
	transform: scaleX(-1);
}

.ab-pagination .next.page-numbers::after {
	content: "";
}

.ab-more {
	margin: 0;
	text-align: center;
}

.ab-more:has(> .ab-load-more) {
	margin-bottom: 0;
}

/* "Lataa lisää": the accent button with navy text (5.0:1; white on the accent was 2.8:1), bold like the site's other
   buttons; the hover is the lighter accent of the theme's buttons (navy on it 5.4:1) */
.ab-more > .ab-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 32px;
	color: var(--ab-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.ab-more > .ab-load-more:is(:hover, :focus-visible) {
	background-color: #00aee8;
	color: var(--ab-navy);
}

.ab-more > .ab-load-more:focus-visible {
	outline: 3px solid var(--ab-navy);
	outline-offset: 2px;
}

.is-dark .ab-more > .ab-load-more:focus-visible {
	outline-color: #fff;
}

@media (max-width: 768px) {
	.ab-posts .ab-grid + :is(.ab-more, .ab-pagination) {
		margin-top: 24px;
	}
}

/* ------------------------------------------------------------ contact band */

.ab-contact .ab-grid {
	gap: var(--ab-flow-c) var(--ab-gap);
}

.ab-contact-item {
	display: flex;
	align-items: flex-start;
}

.ab-contact-item__icon {
	flex: 0 0 38px;
	padding-top: 5px;
}

.ab-contact-item__icon .ab-icon {
	display: block;
	width: auto;
	max-width: 24px;
	height: 26px;
}

.ab-contact-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ab-contact-item__title {
	margin: 0 0 10px;
	font-size: var(--ab-lead-size);
	font-weight: 400;
	line-height: 1.4;
}

.ab-contact-item .ab-flow.ab-flow > * + .wp-block-buttons {
	margin-block-start: 20px;
}

.ab-contact-item .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--ab-btn-h);
	padding: 12px 30px;
	font-weight: 400;
}

/* ------------------------------------------------------------ hero: rotating images */

.ab-hero__slide {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.ab-hero__slide.is-active {
	opacity: 1;
}

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

/* ------------------------------------------------------------ product cards */
/* (inc/helpers.php ab_product_card: avalon/product-cards, avalon/text-image with products, avalon/posts with products)
   Desktop and tablets: a card, the square picture above the name; phones: rows, a 96px tile at the left with the name
   and "Katso tuote" beside it (the Avalon pattern). The name's link covers the whole card; names never break inside a
   word. */

.ab-product-grid {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 2), minmax(0, 1fr));
	gap: var(--ab-flow-c) var(--ab-gap);
}

.ab-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid #e6e6e6;
	background: #fff;
	color: var(--wp--preset--color--body, #282828);
}

.ab-product__media {
	display: block;
}

/* (two classes: WooCommerce's ".woocommerce-page img { height: auto }" must not win) */
.ab-product .ab-product__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	object-fit: contain;
}

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

.ab-product .ab-product__title {
	margin: 0 0 8px;
	color: var(--ab-heading);
	font-size: var(--ab-item-size);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: pretty;
}

.ab-product__title a {
	color: var(--wp--preset--color--navy, #1b2a57);
	text-decoration: none;
}

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

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

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

.ab-product .ab-product__title a:focus-visible::after {
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ab-navy);
}

/* the categories' links and the quote button sit above the card's link */
.ab-product__cats {
	position: relative;
	z-index: 2;
	margin: auto 0 0;
	font-size: 14px;
	line-height: 1.4;
}

.ab-product__cats span {
	margin-right: 4px;
}

.ab-product__more {
	margin-top: auto;
	padding-top: 8px;
	color: var(--ab-navy);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.ab-product__more::after {
	content: "\00a0\00203a";
}

.ab-product__cats + :is(.ab-product__more, .ab-product__buy) {
	margin-top: 0;
}

.is-dark .ab-product a {
	color: var(--wp--preset--color--navy, #1b2a57);
}

/* card with the "Pyydä tarjous" button: no frame, the button right after the name */
.ab-product--quote {
	border: 0;
}

.ab-product__buy {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: 8px;
}

.ab-product .ab-product__buy .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--ab-tap);
	margin: 0;
	padding: 10px 24px;
	border: 0;
	border-radius: 0;
	background: var(--ab-navy);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	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;
}

/* products beside a text (text-image): one column, cards of at most 445px */
.ab-ti__media--products {
	display: grid;
	gap: 24px;
}

.ab-ti__media--products .ab-product {
	width: 100%;
	max-width: 445px;
}

/* products in the Artikkelit block: no frame, desktop the block's columns (24px apart, 40px between the rows), three
   per row on tablets */
.ab-posts--products .ab-grid {
	gap: 40px 24px;
	padding-bottom: 0;
}

.ab-posts--products .ab-product {
	border: 0;
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-posts.ab-posts--products .ab-grid.ab-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.ab-posts--products .ab-product__body {
		padding-inline: 12px;
	}
}

/* phones: rows (every product card) */
@media (max-width: 768px) {
	.ab-product-grid,
	.ab-posts.ab-posts--products .ab-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px;
	}

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

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

	.ab-product__media {
		background: #fff;
	}

	.ab-product__body {
		padding: 0;
	}

	.ab-product .ab-product__title {
		margin-bottom: 4px;
		font-size: var(--ab-item-size);
	}

	.ab-product__more {
		padding-top: 2px;
		font-size: 14px;
	}

	.ab-product__buy {
		padding-top: 6px;
	}

	.ab-ti__media--products .ab-product {
		max-width: none;
	}

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

/* small phones: a smaller tile leaves room for long names */
@media (max-width: 380px) {
	.ab-product {
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 12px;
	}
}

/* ------------------------------------------------------------ product categories */

/* the card look of the old theme (the picture 4:3 on its own, the name, the description and the button) with the
   standard's gaps: 40px between the rows, the grid gap between the cards, no inset */
.ab-categories .ab-grid {
	gap: 40px var(--ab-gap);
	padding: 0;
}

.ab-category {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ab-category__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin-bottom: 16px;
	overflow: hidden;
}

.ab-category .ab-category__img {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	padding: 18px;
	object-fit: contain;
}

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

.ab-category__name {
	margin: 0 0 10px;
	font-size: var(--ab-item-size);
	line-height: 1.25;
	overflow-wrap: normal;
	hyphens: manual;
}

.ab-category__name a {
	color: var(--ab-heading);
	text-decoration: none;
}

.ab-category__name a:hover {
	color: var(--ab-accent);
}

/* its own formatting context: the last paragraph's margin stays inside */
.ab-category__desc {
	display: flow-root;
	margin: 0 0 24px;
	line-height: 1.55;
}

.ab-category__desc > :first-child {
	margin-top: 0;
}

.ab-category__desc p {
	margin: 0 0 0.75em;
	color: #000;
}

.ab-category__desc ul,
.ab-checklist {
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

.ab-category__desc li,
.ab-checklist li {
	position: relative;
	margin: 0 0 0.55em;
	padding-left: 1.75em;
	color: #1f2937;
}

.ab-category__desc li::before,
.ab-checklist li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: var(--ab-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l2.8 2.8 6.2-6.2'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 0.7em;
	background-repeat: no-repeat;
}

.ab-category__actions {
	margin-top: auto;
	padding-bottom: 16px;
}

.ab-category__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ab-btn-h);
	padding: 12px 20px;
	border-radius: 0;
	background: var(--ab-accent);
	color: var(--ab-navy);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* navy text on the accent (5.0:1; white was 2.8:1), the lighter accent on hover (5.4:1) */
.ab-category__button:hover,
.ab-category__button:focus {
	background: #00aee8;
	color: var(--ab-navy);
}

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

/* two in a row on tablets and phones down to 520px, then one */
@media (max-width: 1024px) {
	.ab-categories .ab-grid {
		grid-template-columns: repeat(min(var(--ab-cols, 2), 2), minmax(0, 1fr)) !important;
	}
}

@media (max-width: 520px) {
	.ab-categories .ab-grid {
		grid-template-columns: 1fr !important;
		gap: var(--ab-flow-c);
	}
}

/* ------------------------------------------------------------ icon boxes as cards (icon above the title) */

.ab-contact--cards .ab-grid {
	gap: var(--ab-gap);
}

.ab-contact--cards .ab-contact-item {
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--light, #f7f6f6);
}

.ab-contact--cards .ab-contact-item__icon {
	flex: 0 0 auto;
	margin-bottom: 20px;
	padding: 0;
	color: var(--wp--preset--color--navy, #1b2a57);
}

.ab-contact--cards .ab-contact-item__icon .ab-icon {
	width: auto;
	max-width: none;
	height: 50px;
}

.ab-contact--cards .ab-contact-item__title {
	color: var(--wp--preset--color--navy, #1b2a57);
	font-weight: 700;
}

.ab-contact--cards .ab-contact-item .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	padding: 12px 24px;
}

.is-dark.ab-contact--cards .ab-contact-item__icon,
.is-dark.ab-contact--cards .ab-contact-item__title {
	color: #fff;
}

/* ------------------------------------------------------------ testimonials */

.ab-testimonials .ab-head {
	margin-inline: auto;
	text-align: center;
}

.ab-testimonials .ab-grid {
	gap: var(--ab-gap);
}

.ab-testimonial {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 24px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	color: #333;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ab-testimonial:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.ab-testimonial__rating {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
}

.ab-star {
	color: #e0e0e0;
	font-size: 20px;
	line-height: 1;
}

.ab-star.is-filled {
	color: #ffc107;
}

.ab-testimonial__text {
	flex-grow: 1;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-style: italic;
	line-height: 1.6;
}

.ab-testimonial__text p {
	margin: 0 0 12px;
}

.ab-testimonial__text p:last-child {
	margin-bottom: 0;
}

.ab-testimonial__author {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}

.ab-testimonial__photo {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: #f6f7f7;
}

.ab-testimonial__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-testimonial__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ab-testimonial__name {
	margin-bottom: 4px;
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
	font-weight: 600;
}

.ab-testimonial__meta {
	color: #666;
	font-size: 14px;
}

/* ------------------------------------------------------------ product page */

.ab-product-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

/* the accent button: navy text (5.0:1; white on the accent was 2.8:1), the lighter accent on hover (navy 5.4:1) */
.wp-element-button.ab-btn--accent {
	border-color: var(--ab-accent);
	background-color: var(--ab-accent);
	color: var(--ab-navy);
}

.wp-element-button.ab-btn--accent:hover,
.wp-element-button.ab-btn--accent:focus {
	border-color: #00aee8;
	background-color: #00aee8;
	color: var(--ab-navy);
}

/* the quote and back buttons of the product page: the site's own button (Oxygen, square corners, Vestelli navy and
   accent), at least the button height */
.ab-product-actions .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--ab-btn-h);
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background-color: var(--ab-navy);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

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

.ab-product-actions .wp-element-button.ab-btn--accent {
	background-color: var(--ab-accent);
}

.ab-product-actions .wp-element-button.ab-btn--accent:hover,
.ab-product-actions .wp-element-button.ab-btn--accent:focus-visible {
	background-color: #00aee8;
}

@media (max-width: 480px) {
	.ab-product-actions .wp-element-button {
		flex: 1 1 auto;
		white-space: normal;
	}
}

.ab-accordion {
	width: 100%;
}

.ab-accordion__item {
	border-bottom: 1px solid #e5e5e5;
	background: #fff;
}

.ab-accordion__item:first-child {
	border-top: 1px solid #e5e5e5;
}

.ab-accordion__title {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 56px;
	padding: 14px 44px 14px 0;
	color: var(--ab-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.ab-accordion__title::-webkit-details-marker {
	display: none;
}

.ab-accordion__title::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: var(--ab-heading);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}

.ab-accordion__item[open] > .ab-accordion__title::after {
	content: "\2212";
}

/* the opened tab: the page's body text, paragraphs and lists --ab-flow-p apart, 24px below the last one; the tab's own
   title (an h2 of the tabs plugin) stays hidden */
.ab-accordion__body {
	padding: 0 0 24px;
	font-size: inherit;
	line-height: 1.6;
}

.ab-accordion__body.ab-accordion__body > * {
	margin-block: 0 var(--ab-flow-p);
}

.ab-accordion__body > :first-child {
	margin-top: 0;
}

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

.ab-accordion__body .yikes-custom-woo-tab-title {
	display: none;
}

.ab-accordion__body table {
	width: 100%;
	border-collapse: collapse;
}

.ab-accordion__body th,
.ab-accordion__body td {
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

/* a cell's words stay whole: the column's word-break: break-word (WordPress) let the table squeeze its first column to
   85px at 820px and cut "Tuoteko|odi:" and the product code "3626367|0". With normal breaking a column is at least as
   wide as its longest word and the long text wraps in the other column; overflow-wrap remains the last resort for a
   string that is wider than the whole table. */
.ab-accordion__body :is(th, td) {
	word-break: normal;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------ product list (related, up-sells, shop pages) */
/* The cards themselves: products.css (round 4, 2026-10-30: ab_plist_card(), the Avalon pattern). Here only the
   heading and the empty state; the old list rules (.ab-plist__item/__link/__media/__title/__excerpt and the
   --plain/--boxed/--listing card styles) went with the old markup. */

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

/* a product without related products: the old module's empty state, a centred grey line */
.ab-plist--empty .ab-plist__empty {
	margin: 0;
	padding: 0;
	color: #666;
	text-align: center;
}

/* ------------------------------------------------------------ misc */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 1200px) {
	.ab-stat {
		padding: 40px 20px 72px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-stats .ab-grid {
		gap: 16px;
	}

	.ab-stat {
		padding: 28px 12px 56px;
	}

	.ab-stat .ab-stat__number.ab-stat__number {
		font-size: 30px;
	}

	.ab-stat .ab-stat__label.ab-stat__label {
		font-size: 14px;
	}

	.ab-stat::after {
		bottom: 20px;
	}
}

@media (max-width: 768px) {
	.ab-grid,
	.ab-ti__grid {
		grid-template-columns: 1fr !important;
	}

	/* text and image stacked */
	.ab-ti__grid {
		row-gap: 24px;
	}

	.ab-ti__text {
		padding: 0 !important;
	}

	/* image cards run edge to edge, stacked 10px apart, as high as their text and padding */
	.ab-card.ab-card {
		aspect-ratio: auto;
		padding: 100px 20px;
	}

	.ab-cards > .ab-container--wide {
		padding-inline: 0;
	}

	.ab-cards .ab-grid {
		gap: 10px;
	}

	/* phones: the stat boxes as rows, the icon at the left, the number, the label and the card's wave beside it (round 4:
	   three boxes side by side left a 13px label 84-111px wide, which broke "REKOM-MENDERAR", "MANU-FACTURED",
	   "TILLVERKAD I / FINLAND" on three or four lines); the label in one or two lines of its own width */
	.ab-stats .ab-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px;
		padding: 0;
	}

	.ab-stats .ab-stat {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"media number"
			"media label"
			"media wave";
		align-content: center;
		align-items: center;
		column-gap: 16px;
		padding: 14px 20px 16px;
		text-align: left;
	}

	.ab-stat__media {
		grid-area: media;
		align-self: center;
		min-height: 0;
		margin: 0;
	}

	.ab-stat__icon {
		height: 36px;
	}

	.ab-stat .ab-stat__img.ab-stat__img {
		width: 48px;
		height: 48px;
	}

	.ab-stat .ab-stat__number.ab-stat__number {
		grid-area: number;
		margin: 0;
		font-size: 26px;
	}

	/* (the row has room for the longest word: the soft hyphens for the narrow boxes of tablets are not used here, a
	   two-line label breaks at a space: "AV VÅRA KUNDER / REKOMMENDERAR") */
	.ab-stat .ab-stat__label.ab-stat__label {
		grid-area: label;
		margin: 2px 0 0;
		font-size: 14px;
		line-height: 1.3;
		letter-spacing: 0.02em;
		-webkit-hyphens: none;
		hyphens: none;
		text-wrap: balance;
	}

	/* (two classes: the card's wave rule comes later in this file) */
	.ab-stats .ab-stat::after {
		position: static;
		grid-area: wave;
		width: 96px;
		margin-top: 8px;
		transform: none;
	}
}

/* ------------------------------------------------------------ Vestelli: contact people (the old "Yhteystiedot" module) */

/* the head centred with the wave under the title (22px below the title's box: added to the head gap) */
.ab-people .ab-head {
	margin: 0 auto calc(var(--ab-head-gap) + 22px);
	text-align: center;
}

.ab-people .ab-title {
	position: relative;
	letter-spacing: 0.01em;
}

/* the wave under the section title */
.ab-people .ab-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -22px;
	width: 132px;
	height: 18px;
	transform: translateX(-50%);
	background: url("img/wave-03.png") no-repeat center / contain;
	opacity: 0.85;
}

/* Desktops and tablets: cards of one width in every people block, a quarter of the row (Avalon's tracks: about 291px at
   1440px, 165px at 820px), so three people do not spread over the whole width and the portraits of blocks one after the
   other line up. The block's columns (at most 4) are the most cards in a row; the rows are centred under the centred
   head, a last row of two in a grid of four sits in the middle. Phones: compact rows (below). */
.ab-people .ab-grid {
	--ab-pcols: var(--ab-cols, 3);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ab-flow-c) var(--ab-gap);
	/* as wide as its columns of quarter tracks (the percentage is the container's width) */
	max-width: calc((100% + var(--ab-gap)) * var(--ab-pcols) / 4 - var(--ab-gap));
	margin-inline: auto;
}

.ab-people .ab-grid > * {
	flex: 0 1 calc((100% - (var(--ab-pcols) - 1) * var(--ab-gap)) / var(--ab-pcols));
	min-width: 0;
}

/* a people block without a head of its own (the contact people of the section above it, e.g. on /projektit/): the
   tracks start on the content edge, under that section's left-aligned text (Avalon) */
.ab-people:not(:has(> .ab-container > .ab-head)) .ab-grid {
	justify-content: flex-start;
	margin-inline: 0;
}

.ab-people .ab-person.ab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ab-people .ab-person.ab-item > *,
.ab-people .ab-person .ab-person__body > * {
	margin-block: 0;
}

.ab-people .ab-person .ab-person__body {
	max-width: 100%;
}

.ab-people .ab-person .wp-block-image {
	margin: 0 0 18px;
}

.ab-people .ab-person .wp-block-image img {
	display: block;
	width: 160px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #f3f4f6;
	object-fit: cover;
}

.ab-people--gray .ab-person .wp-block-image img {
	filter: grayscale(100%);
}

/* (these need the weight of the reset above: name 4px below, title 10px below, e-mail 4px below, as the old cards) */
.ab-people .ab-person.ab-item :is(h2, h3, h4) {
	margin: 0 0 4px;
	font-size: var(--ab-item-size);
	line-height: 1.3;
	overflow-wrap: normal;
	hyphens: manual;
}

/* an e-mail address breaks only after its "@" (<wbr> from ab_person_card()), a word never in the middle */
.ab-people .ab-person.ab-item p {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.5;
	overflow-wrap: normal;
	word-break: normal;
}

/* (only the title paragraph, which the converter marks: a card without a title has its phone number right under the name) */
.ab-people .ab-person.ab-item p.ab-person__title {
	margin-bottom: 10px;
	line-height: 1.4;
}

/* the number and the address: navy with a light underline (13:1 on white and on the phone rows' light background; the
   accent blue was 2.8:1), the underline solid on hover */
.ab-people .ab-person p a {
	color: var(--ab-navy);
	text-decoration: underline;
	text-decoration-color: rgba(27, 42, 87, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-people .ab-person p a[href^="tel:"] {
	white-space: nowrap;
}

.ab-people .ab-person p a:hover {
	color: var(--ab-heading);
	text-decoration-color: currentColor;
}

.is-dark .ab-people .ab-person p a,
.ab-people.is-dark .ab-person p a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* the call and e-mail icon buttons: for touch screens (tablets and phones); desktops show the number and the address */
.ab-person__actions {
	display: none;
}

/* a navy icon on the accent (5:1, as the CTA band's primary button; a white icon was 2.8:1); hover: navy with a white
   icon (white with a navy icon on dark sections); the focus ring navy (white on dark sections) */
.ab-person__action {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--ab-tap);
	height: var(--ab-tap);
	border-radius: 50%;
	background: var(--ab-accent);
	color: var(--ab-navy);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ab-person__action .ab-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.ab-person__action:hover {
	background: var(--ab-navy);
	color: #fff;
}

.is-dark .ab-person__action:hover {
	background: #fff;
	color: var(--ab-navy);
}

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

.is-dark .ab-person__action:focus-visible {
	outline-color: #fff;
}

@media (max-width: 1024px) {
	.ab-people .ab-person .ab-person__actions {
		display: flex;
		gap: 8px;
	}

	/* the e-mail address gives way to the e-mail button */
	.ab-people .ab-person.has-actions p:has(> .ab-person__mail) {
		display: none;
	}
}

/* tablets: the same quarter tracks (gaps 32px), 120px portraits, the buttons under the name, the title and the number */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-people .ab-person .wp-block-image {
		margin-bottom: 16px;
	}

	.ab-people .ab-person .wp-block-image img {
		width: 120px;
	}

	.ab-people .ab-person.ab-item > .ab-person__actions {
		justify-content: center;
		margin-block-start: 12px;
	}
}

/* phones: rows, a 72px portrait, the name, title and number beside it, the call and e-mail buttons at the right end
   (the Avalon pattern); the block's own phone column setting does not apply */
@media (max-width: 768px) {
	.ab-people .ab-grid.ab-grid {
		--ab-pcols: 1;
		max-width: none;
		gap: 10px;
	}

	.ab-people .ab-person.ab-item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		box-sizing: border-box;
		min-height: 88px;
		padding: 8px 12px 8px 8px;
		background: var(--wp--preset--color--light, #f7f6f6);
		text-align: left;
	}

	.ab-people .ab-person.ab-item.has-actions {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		padding-right: 8px;
	}

	.ab-people .ab-person.ab-item.no-photo {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 16px;
	}

	.ab-people .ab-person.ab-item.no-photo.has-actions {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ab-people.ab-bg-light .ab-person.ab-item {
		background: #fff;
	}

	.ab-people.is-dark .ab-person.ab-item {
		background: rgba(255, 255, 255, 0.08);
	}

	.ab-people .ab-person .wp-block-image {
		margin: 0;
	}

	.ab-people .ab-person .wp-block-image img {
		width: 72px;
	}

	.ab-people .ab-person.ab-item :is(h2, h3, h4) {
		margin-bottom: 2px;
		font-size: 17px;
		line-height: 1.25;
	}

	.ab-people .ab-person.ab-item p,
	.ab-people .ab-person.ab-item p.ab-person__title {
		margin-bottom: 2px;
		font-size: 15px;
		line-height: 1.4;
	}

	.ab-people .ab-person.ab-item .ab-person__body > :last-child {
		margin-bottom: 0;
	}
}

/* small phones: a 56px portrait leaves the text room beside the two buttons ("Jätevesisuunnittelija" is 140px at 15px,
   143px are free at 390px; a title that does not fit breaks at a soft hyphen, ab_person_card()) */
@media (max-width: 380px) {
	.ab-people .ab-person.ab-item.has-photo {
		grid-template-columns: 56px minmax(0, 1fr);
		min-height: 72px;
		column-gap: 10px;
	}

	.ab-people .ab-person.ab-item.has-photo.has-actions {
		grid-template-columns: 56px minmax(0, 1fr) auto;
	}

	.ab-people .ab-person .wp-block-image img {
		width: 56px;
	}
}

/* the smallest phones (320px): the two buttons one above the other, so the name and the title keep about 145px */
@media (max-width: 359px) {
	.ab-people .ab-person .ab-person__actions {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------ menu list (the footer menu) */

/* 44px rows (the links' tap targets) */
.ab-menu-list__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-menu-list__list a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--ab-tap);
	padding: 0 14px 0 0;
	color: inherit;
	font-size: 16px;
	line-height: 1.25;
	text-decoration: none;
}

.ab-menu-list__list a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------ Vestelli: stats (the old "Vestelli lukuina" module) */

/* the head centred: title, intro, the button, then the cards (the section's padding is the only space around them) */
.ab-stats .ab-container {
	padding-top: 0;
	padding-bottom: 0;
}

.ab-stats .ab-head {
	margin: 0 auto var(--ab-head-gap);
	text-align: center;
}

.ab-stats .ab-head:has(+ .ab-stats__cta) {
	margin-bottom: var(--ab-flow);
}

.ab-stats .ab-title {
	line-height: 1.2;
}

/* (the old stats module's title was the brand blue #012b55, not the headings' navy) */
.ab-stats:not(.is-dark) .ab-title {
	color: var(--wp--preset--color--heading, #012b55);
}

.ab-stats .ab-intro {
	margin: var(--ab-flow) auto 0;
	font-size: inherit;
	line-height: inherit;
}

.ab-stats__cta {
	display: flex;
	justify-content: center;
	margin: 0 auto var(--ab-head-gap);
}

.ab-stats__cta .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--ab-btn-h);
	padding: 12px 24px;
	border: 0;
	background-color: var(--ab-accent);
	color: var(--ab-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* navy text on the accent (5.0:1; white was 2.8:1), the lighter accent on hover (5.4:1) */
.ab-stats__cta .wp-element-button:hover,
.ab-stats__cta .wp-element-button:focus {
	border-color: #00aee8;
	background-color: #00aee8;
	color: var(--ab-navy);
}

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

.is-dark .ab-stats__cta .wp-element-button:focus-visible {
	outline-color: #fff;
}

.ab-stats__cta .wp-element-button::after {
	content: "";
	width: 9px;
	height: 1.2em;
	margin-left: 4px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 768px) {
	.ab-stats__cta .wp-element-button {
		white-space: normal;
	}
}

/* the wave at the bottom of a card */
.ab-stat {
	position: relative;
}

.ab-stat::after {
	content: "";
	position: absolute;
	bottom: 24px;
	left: 50%;
	width: min(84%, 240px);
	aspect-ratio: 2560 / 249;
	transform: translateX(-50%);
	background: url("img/wave-03.png") no-repeat center / 100% 100%;
	opacity: 0.82;
	pointer-events: none;
}

/* ------------------------------------------------------------ Vestelli: product cards made of callouts (Projektit) */

/*
 * the picture whole (a product on white), not cropped square, in a 2:1 box of the column's width: every card of a row
 * has the same picture height, so the titles line up. Not the picture's own ratio: a lazy picture that WordPress prints
 * with sizes="auto" gets the browser's size containment (contain: size, contain-intrinsic-size 3000px 1500px), which
 * hides its own ratio; with "aspect-ratio: auto" such a picture was 300px high in a 146px row. Title and text as in the
 * old callouts.
 */
.ab-features--products .ab-feature .wp-block-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: contain;
}

.ab-features--products .ab-feature :is(h2, h3, h4) {
	font-size: var(--ab-item-size);
	font-weight: 700;
	line-height: 1.35;
}

.ab-features--products .ab-feature :is(h2, h3, h4) a {
	color: inherit;
}

.ab-features--products .ab-feature p {
	font-size: 15px;
	line-height: 1.55;
}

/* phones: the body text's minimum size */
@media (max-width: 768px) {
	.ab-features--products .ab-feature .wp-block-image img {
		max-height: 220px;
	}

	.ab-features--products .ab-feature p {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ rows: borders, own widths, alignments */

/* (the old rows' own left/right padding, class ab-side, is not used: every section starts at the content edge) */
.ab-side {
	padding-inline: 0;
}

/* a line along the top / bottom edge of a section (the old rows' border: 1px solid, in a colour) */
.ab-bt { border-top: 1px solid var(--ab-btc); }
.ab-bb { border-bottom: 1px solid var(--ab-bbc); }

/* a picture with a width of its own on tablets and phones (the "medium" width of a Beaver Builder photo): class an-pwm-<px> */
@media (max-width: 1024px) {
	.an-pwm-40 img { width: 40px !important; }
	.an-pwm-50 img { width: 50px !important; }
	.an-pwm-60 img { width: 60px !important; }
	.an-pwm-70 img { width: 70px !important; }
	.an-pwm-80 img { width: 80px !important; }
	.an-pwm-90 img { width: 90px !important; }
	.an-pwm-100 img { width: 100px !important; }
	.an-pwm-110 img { width: 110px !important; }
	.an-pwm-120 img { width: 120px !important; }
	.an-pwm-130 img { width: 130px !important; }
	.an-pwm-140 img { width: 140px !important; }
	.an-pwm-150 img { width: 150px !important; }
	.an-pwm-160 img { width: 160px !important; }
	.an-pwm-170 img { width: 170px !important; }
	.an-pwm-180 img { width: 180px !important; }
	.an-pwm-190 img { width: 190px !important; }
	.an-pwm-200 img { width: 200px !important; }
}

/* a picture with a width of its own on phones (Beaver Builder's phone width of a photo module): class an-pw-<px> */
@media (max-width: 768px) {
	.an-pw-100 img { width: 100px !important; }
	.an-pw-120 img { width: 120px !important; }
	.an-pw-150 img { width: 150px !important; }
	.an-pw-170 img { width: 170px !important; }
	.an-pw-200 img { width: 200px !important; }
	.an-pw-240 img { width: 240px !important; }
	.an-pw-300 img { width: 300px !important; }
}

/* the text alignment on phones where it differs from the desktop one */
@media (max-width: 768px) {
	.an-ta-m-left { text-align: left !important; }
	.an-ta-m-center { text-align: center !important; }
	.an-ta-m-right { text-align: right !important; }
}

/* ------------------------------------------------------------ CTA band (avalon/cta-band) */
/* The closing call to action above the footer (pattern tuoteryhma-cta on the shop, product category and content pages).
   The footer is navy too, so the band is a PANEL inside the content width with white above and below it (never a navy
   strip that melts into the footer). Navy panel (default), light panel or a photo under a navy layer; the white text on
   navy is 14:1, the kicker (accent) 5.1:1, the primary button (accent, navy text) 5.1:1, the ghost buttons are white
   on navy / navy on light. Desktop: text left, buttons stacked on the right; tablet: text, then the buttons in a
   row; phone: the panel runs edge to edge (24px edge gaps) and the buttons are stacked, full width, 48px high. */

.ab-cta {
	--ab-cta-ink: #fff;
	--ab-cta-bg: var(--ab-navy);
}

.ab-cta--light {
	--ab-cta-ink: var(--ab-navy);
	--ab-cta-bg: var(--wp--preset--color--light, #f7f6f6);
}

/* the section has the page's white behind the panel; a little space above it also when the section before it has none */
.ab-cta.ab-cta {
	padding-top: var(--ab-pad-xs);
}

/* ... and a full band of its own colour before it (a navy or light section, a photo) gets the white a section has */
:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-bg-light, .ab-bg-image, .ab-bg-custom, .ab-hero) + .ab-cta.ab-cta {
	padding-top: var(--ab-pad-m);
}

.ab-cta__panel {
	position: relative;
	display: grid;
	gap: var(--ab-flow-c) var(--ab-gap);
	box-sizing: border-box;
	padding: var(--ab-pad-m) var(--ab-pad-s);
	overflow: clip;
	background-color: var(--ab-cta-bg);
	color: var(--ab-cta-ink);
}

/* the brand's wave pattern (the "neliowave" lines) fades in from the right edge of the navy panel (a zone of its own,
   so no hard edge shows where the picture ends) */
.ab-cta--navy .ab-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("img/cta-wave.png") no-repeat right bottom / 100% auto;
	opacity: 0.1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(165deg, transparent 25%, #000 100%);
	mask-image: linear-gradient(165deg, transparent 25%, #000 100%);
}

/* a photo: the picture fills the panel, a navy layer (stronger under the text) keeps the white text above 6:1 even on
   the brightest parts of the picture */
.ab-cta__overlay {
	position: absolute;
	inset: 0;
	background: rgba(var(--ab-overlay-rgb), 0.9);
	pointer-events: none;
}

@media (min-width: 769px) {
	.ab-cta__overlay {
		background: linear-gradient(90deg, rgba(var(--ab-overlay-rgb), 0.94) 0%, rgba(var(--ab-overlay-rgb), 0.86) 55%, rgba(var(--ab-overlay-rgb), 0.76) 100%);
	}
}

.ab-cta__body,
.ab-cta__actions {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.ab-cta__kicker {
	margin: 0 0 var(--ab-flow-p);
	color: var(--ab-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ab-cta--light .ab-cta__kicker {
	color: var(--wp--preset--color--heading, #012b55);
}

.ab-cta__title {
	max-width: 22em;
	margin: 0;
	color: var(--ab-cta-ink);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
	text-wrap: balance;
	/* (round 4) no dictionary hyphenation: with the theme's hyphens: auto the same Swedish title came out as 3 lines
	   with "kostnadsef- / fektivt" or 4 balanced lines, depending on when the browser's dictionary had loaded; soft
	   hyphens written into the title still work */
	-webkit-hyphens: manual;
	hyphens: manual;
}

.ab-cta--light .ab-cta__title {
	color: var(--wp--preset--color--heading, #012b55);
}

/* the wave mark under the title: 170px on phones, 240px from tablets up (the site's wave sizes) */
.ab-cta__wave.ab-cta__wave {
	display: block;
	width: 170px;
	max-width: 100%;
	height: auto;
	margin: calc(var(--ab-flow) - 4px) 0 0;
}

.ab-cta__text {
	max-width: 34em;
	margin: var(--ab-flow) 0 0;
	color: var(--ab-cta-ink);
	font-size: var(--ab-lead-size);
	line-height: 1.5;
}

.ab-cta__text + .ab-cta__text {
	margin-top: var(--ab-flow-p);
}

.ab-cta__panel--single .ab-cta__body > :first-child {
	margin-top: 0;
}

.ab-cta__actions {
	display: grid;
	align-content: center;
	gap: 8px;
}

/* the buttons: stacked, as wide as their column (phones and desktops) */
.ab-cta__buttons.ab-cta__buttons {
	display: grid;
	gap: 12px;
	margin: 0;
}

.ab-cta__buttons .wp-block-button {
	width: 100%;
	margin: 0;
}

.ab-cta .ab-cta__buttons .wp-block-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ab-btn-h);
	padding: 10px 24px;
	border: 2px solid transparent;
	border-radius: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* the primary button: the accent colour with the navy text (white on it is only 2.9:1) and an arrow */
.ab-cta .ab-cta__buttons .ab-cta__primary > .wp-block-button__link {
	border-color: var(--ab-accent);
	background-color: var(--ab-accent);
	color: var(--ab-navy);
}

.ab-cta .ab-cta__buttons .ab-cta__primary > .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 1.2em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ab-cta .ab-cta__buttons .ab-cta__primary > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: #fff;
	background-color: #fff;
	color: var(--ab-navy);
}

.ab-cta--light .ab-cta__buttons .ab-cta__primary > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--ab-navy);
	background-color: var(--ab-navy);
	color: #fff;
}

/* the phone: a ghost button, white on the dark panels, navy on the light one; the number never breaks */
.ab-cta .ab-cta__buttons .ab-cta__phone > .wp-block-button__link {
	border-color: var(--ab-cta-ink);
	background-color: transparent;
	color: var(--ab-cta-ink);
}

.ab-cta .ab-cta__buttons .ab-cta__phone > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--ab-cta-ink);
	background-color: var(--ab-cta-ink);
	color: var(--ab-navy);
}

.ab-cta--light .ab-cta__buttons .ab-cta__phone > .wp-block-button__link:is(:hover, :focus-visible) {
	color: #fff;
}

.ab-cta__num {
	white-space: nowrap;
}

.ab-cta .wp-element-button:focus-visible,
.ab-cta__mail a:focus-visible {
	outline: 3px solid var(--ab-cta-ink);
	outline-offset: 3px;
}

/* the e-mail: a text link under the buttons (a 44px tap target) */
.ab-cta__mail {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

.ab-cta__mail a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ab-tap);
	color: var(--ab-cta-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-cta__mail a:hover {
	text-decoration-thickness: 2px;
}

/* phones: the panel edge to edge, 24px edge gaps, 40px above and below */
@media (max-width: 768px) {
	.ab-cta__wrap.ab-cta__wrap {
		padding-inline: 0;
	}

	.ab-cta__mail {
		text-align: left;
	}
}

/* tablets: the text, then the buttons side by side */
@media (min-width: 769px) {
	.ab-cta__panel {
		padding: 56px 48px;
	}

	.ab-cta__wave.ab-cta__wave {
		width: 240px;
	}

	.ab-cta__buttons.ab-cta__buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 16px;
	}

	.ab-cta__buttons .wp-block-button {
		width: auto;
	}

	.ab-cta .ab-cta__buttons .wp-block-button .wp-block-button__link {
		width: auto;
		padding-inline: 28px;
	}

	.ab-cta__mail {
		text-align: left;
	}

	.ab-cta--navy .ab-cta__panel::before {
		inset: 0 0 0 auto;
		width: 66%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
	}
}

/* desktops: the text on the left, the buttons stacked on the right */
@media (min-width: 1025px) {
	.ab-cta__panel {
		padding: 72px 80px;
	}

	.ab-cta__panel:not(.ab-cta__panel--single) {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
		align-items: center;
		column-gap: 80px;
	}

	.ab-cta__buttons.ab-cta__buttons {
		display: grid;
	}

	.ab-cta__buttons .wp-block-button {
		width: 100%;
	}

	.ab-cta .ab-cta__buttons .wp-block-button .wp-block-button__link {
		width: 100%;
	}

	.ab-cta__mail {
		text-align: center;
	}

	.ab-cta--navy .ab-cta__panel::before {
		width: 52%;
		background-position: right center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-cta .ab-cta__buttons .wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* ------------------------------------------------------------ feature cards (Nostot, "Korttityyli")

   The card looks of the Nostot block (attribute cardStyle, blocks/features/render.php): "Kortit" = class
   ab-features--cards, "Kortit valkoisissa laatikoissa" = ab-features--cards + ab-features--boxed. Moved here from the
   theme's projects.css (round 3, 2026-10-16: /projektit/ used them through the class an-projects), so a Nostot block
   inserted anywhere gets the same look from its own setting. */

/* -------- cards: picture, title, facts, text, the link line */

/* a card is a column: picture, title, facts, text and, last, the link (pinned to the bottom, so the links of a row
   line up) */
.ab-features--cards .ab-feature {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* the picture: always 3:2 and cropped to fill (a photo of any size or the editor's own crop setting); the light tile
   shows only where a picture is shown whole (product pictures, below) */
.ab-features--cards .ab-feature > .wp-block-image {
	margin: 0;
	line-height: 0;
	background-color: var(--wp--preset--color--light, #f7f6f6);
}

.ab-features--cards .ab-feature > .wp-block-image img {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 3 / 2 !important;
	object-fit: cover;
}

.ab-features--cards .ab-feature > .wp-block-image + * {
	margin-block-start: 20px;
}

.ab-features--cards .ab-feature p {
	font-size: 16px;
	line-height: 1.55;
}

/* the link line: the card's last paragraph when it is one link ("Tutustu tarkemmin tuotteeseen") */
.ab-features--cards .ab-feature > p:last-child:has(> a:only-child) {
	margin-block-start: auto;
	padding-top: var(--ab-flow-p, 14px);
}

.ab-features--cards .ab-feature > p:last-child > a:only-child {
	color: var(--wp--preset--color--heading, #012b55);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.ab-features--cards.is-dark .ab-feature > p:last-child > a:only-child {
	color: #fff;
}

/* the arrow after the link text (the buttons' arrow) */
.ab-features--cards .ab-feature > p:last-child > a:only-child::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 1.2em;
	margin-left: 8px;
	vertical-align: -0.25em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease;
}

/* The whole card is the link (front end only: in the editor every part of the card stays clickable for editing). The
   link's own layer covers the card; any other link inside the card stays above it. */
.ab-features--cards .ab-feature:not(.block-editor-block-list__block):has(> p:last-child > a:only-child) {
	position: relative;
}

.ab-features--cards .ab-feature:not(.block-editor-block-list__block) > p:last-child > a:only-child::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ab-features--cards .ab-feature:not(.block-editor-block-list__block):has(> p:last-child > a:only-child) :is(h2, h3, h4, li, p:not(:last-child)) a {
	position: relative;
	z-index: 2;
}

.ab-features--cards .ab-feature:has(> p:last-child > a:only-child):hover > p:last-child > a:only-child {
	text-decoration-thickness: 2px;
}

.ab-features--cards .ab-feature:has(> p:last-child > a:only-child):hover > p:last-child > a:only-child::after {
	transform: translateX(3px);
}

/* the keyboard focus: around the whole card */
.ab-features--cards .ab-feature > p:last-child > a:only-child:focus-visible {
	outline: none;
}

.ab-features--cards .ab-feature > p:last-child > a:only-child:focus-visible::before {
	outline: 3px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 3px;
}

/* -------- boxed cards (products) */

/* white boxes with a thin edge; the text 24px from the edge (20px on phones), the picture from edge to edge */
.ab-features--boxed .ab-feature {
	--an-card-pad: 24px;
	border: 1px solid #e3e3e3;
	background-color: #fff;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ab-features--boxed .ab-feature > :not(.wp-block-image) {
	padding-inline: var(--an-card-pad);
}

.ab-features--boxed .ab-feature > :first-child:not(.wp-block-image) {
	padding-top: var(--an-card-pad);
}

.ab-features--boxed .ab-feature > :last-child {
	padding-bottom: var(--an-card-pad);
}

.ab-features--boxed .ab-feature:has(> p:last-child > a:only-child):hover {
	border-color: #cfd5de;
	box-shadow: 0 12px 32px rgba(27, 42, 87, 0.12);
}

/* A product picture (a PNG, or a picture set to "contain" in its settings) is shown whole on the light tile; a white
   background of a JPG disappears into the tile. A photo fills the tile (above). */
.ab-features--boxed .ab-feature > .wp-block-image img:is([src*=".png"], [style*="contain"]):not([style*="object-fit:cover"]) {
	box-sizing: border-box;
	padding: 5% 12%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* three in a row on desktops, two on tablets (the long texts need the width), one on phones */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-features--boxed .ab-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.ab-features--boxed .ab-feature {
		--an-card-pad: 20px;
	}
}

/* -------- text-only cards (no picture) */

/* A card without a picture (e.g. Räätälöidyt ratkaisut on /projektit/): a box with the accent colour along its top edge, white on a light
   section, light on a white one, a lighter navy on a navy one. */
.ab-features--cards:not(.ab-features--boxed) .ab-feature:not(:has(> .wp-block-image)) {
	padding: 32px 32px 36px;
	border-top: 4px solid var(--wp--preset--color--accent, #01a6e6);
	background-color: #fff;
}

.ab-features--cards.ab-bg-none:not(.ab-features--boxed) .ab-feature:not(:has(> .wp-block-image)) {
	background-color: var(--wp--preset--color--light, #f7f6f6);
}

.ab-features--cards.is-dark .ab-feature:not(:has(> .wp-block-image)) {
	background-color: rgba(255, 255, 255, 0.07);
}

.ab-features--cards:not(.ab-features--boxed) .ab-feature:not(:has(> .wp-block-image)) > p {
	max-width: 68ch;
}

@media (max-width: 768px) {
	.ab-features--cards:not(.ab-features--boxed) .ab-feature:not(:has(> .wp-block-image)) {
		padding: 24px 20px 28px;
	}
}

/* -------- phones: cards without a link as compact rows */

/* The cards without a link (e.g. Kohderyhmät, Projektikohteet on /projektit/): a 104px square picture beside the title and the text, so four
   cards take one screen instead of four. A card with a link (products) keeps the picture on top. */
@media (max-width: 768px) {
	.ab-features--cards:not(.ab-features--boxed) .ab-feature:has(> .wp-block-image):not(:has(> p:last-child > a:only-child)) {
		display: flow-root;
	}

	.ab-features--cards:not(.ab-features--boxed) .ab-feature:has(> .wp-block-image):not(:has(> p:last-child > a:only-child)) > .wp-block-image {
		float: left;
		width: 104px;
		margin: 4px 16px 8px 0;
	}

	.ab-features--cards:not(.ab-features--boxed) .ab-feature:has(> .wp-block-image):not(:has(> p:last-child > a:only-child)) > .wp-block-image img {
		aspect-ratio: 1 / 1 !important;
	}

	.ab-features--cards:not(.ab-features--boxed) .ab-feature:has(> .wp-block-image):not(:has(> p:last-child > a:only-child)) > .wp-block-image + * {
		margin-block-start: 0;
	}

	.ab-features--cards:not(.ab-features--boxed) .ab-grid {
		row-gap: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-features--boxed .ab-feature,
	.ab-features--cards .ab-feature > p:last-child > a:only-child::after {
		transition: none;
	}
}