/*
Theme Name: Vestelli
Theme URI: https://www.vestelli.fi
Author: Kansleri.fi
Description: Vestellin lohkoteema (Gutenberg, haarautunut Avalon Nordic -teeman pariteettiversiosta 2026-10-01). Korvaa Beaver Builder -sivut ja Vestelli Avalon -teeman. Värit, fontit ja välit tulevat theme.json-esiasetuksista.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
Text Domain: avalon-nordic
*/

/* Spacing and sizes follow the Avalon Nordic standard (2026-10-08; it replaced the Beaver Builder parity): the tokens
   --ab-* are defined in vestelli-blocks/assets/blocks.css (phone <= 768px / tablet 769-1024px / desktop >= 1025px),
   --ab-header-h in the header's inline CSS (inc/header.php). Every use here has a fallback (the phone value). */

/* ---------------------------------------------------------------- base */

/* in-page links and keyboard focus stop below the fixed header */
html {
	scroll-padding-top: var(--ab-header-h, 90px);
}

/* the desktop header (above the header's breakpoint, 1200px by default; inc/header.php) is not fixed: it scrolls away
   with the page, so an in-page link goes right to its target (html.va-header-compact = the fixed compact header on a
   desktop window whose menu does not fit) */
@media (min-width: 1201px) {
	html:not(.va-header-compact) {
		scroll-padding-top: 0;
	}
}

.ab-section[id],
h2[id],
h3[id] {
	scroll-margin-top: 16px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* a bare image in a text (classic content) stays inside its column */
.is-layout-constrained > img {
	max-width: min(100%, var(--wp--style--global--content-size, 1310px));
}

/* Text sizes in three steps, not fluid (Avalon's scale in Vestelli's fonts; theme.json has the desktop values):
     body 17 / 16 / 16px (line height 1.6)   h1 42 / 34 / 28px   h2 34 / 28 / 23px   h3 21 / 19 / 18px   h4 18 / 17 / 16px
     lead ("large", also the section intros) 20 / 18 / 17px, labels at least 13px ("x-small").
   The doubled :root outweighs the global styles whatever their order. */
:root:root {
	--an-h4: 18px;
}

@media (max-width: 1024px) {
	:root:root {
		--wp--preset--font-size--regular: 16px;
		--wp--preset--font-size--medium: 19px;
		--wp--preset--font-size--large: 18px;
		--wp--preset--font-size--x-large: 28px;
		--wp--preset--font-size--xx-large: 34px;
		--an-h4: 17px;
	}

	/* (plain element selectors: a component's own heading rule with a class stays stronger) */
	h1 {
		line-height: 1.15;
	}

	h2 {
		line-height: 1.2;
	}
}

@media (max-width: 768px) {
	:root:root {
		--wp--preset--font-size--medium: 18px;
		--wp--preset--font-size--large: 17px;
		--wp--preset--font-size--x-large: 23px;
		--wp--preset--font-size--xx-large: 28px;
		--an-h4: 16px;
	}
}

/* narrow phones: h2 follows the screen (21-23px), so a long compound such as "kaksoisviemäröintipaketeista" fits */
@media (max-width: 400px) {
	:root:root {
		--wp--preset--font-size--x-large: clamp(21px, 6.2vw, 23px);
	}
}

/* long Finnish words in headings are hyphenated (the pages are lang="fi"), never split at any letter */
h1,
h2,
h3,
h4,
h5,
h6 {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: normal;
}

/* Swedish and English pages (round 4): the browser has dictionaries for both, and with the Finnish limits it split
   ordinary words at a line end ("installa-tion", "archi-pelago", "waste-water", "replace-ment", "effi-ciently"). Only
   a word of 14 letters or more is hyphenated there, 6 letters on each side of the hyphen at least (a long Swedish
   compound such as "avloppsvattenförordningen" still breaks at a syllable, never at any letter); everything else moves
   to the next line whole. Inherited, so it also reaches the hero titles, the card titles and the text of narrow
   columns, which set hyphens: auto of their own. Soft hyphens written into a text still work. */
html:is(:lang(sv), :lang(en)) {
	hyphenate-limit-chars: 14 6 6;
}

:is(h1, h2, h3, h4, h5, h6):is(:lang(sv), :lang(en)) {
	hyphenate-limit-chars: 14 6 6;
}

/* Like the old theme (Bootstrap base): the padding and border count inside the width. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Template parts and main follow each other without the root block gap. */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

/* short pages (the 404 page, an empty cart): main grows so the footer reaches the bottom of the window */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.wp-site-blocks > .an-main {
	flex: 1 0 auto;
}

/* The header floats over the top of the page (absolute on desktops, fixed on small screens): a page starts with a hero,
   whose top padding leaves room for it; the templates without a hero (product, shop, plain, sidebar, 404) add the
   header's height to their first section below. */
.an-main {
	padding-top: 0;
}

/* Sections are full-width blocks: no gap between them. */
.an-main > .wp-block-post-content > .alignfull,
.an-main > .wp-block-post-content > .wp-block-cover.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

.an-main > .wp-block-post-content {
	margin-top: 0;
}

/* Text on dark sections */
.has-navy-background-color,
.has-heading-background-color,
.wp-block-cover.is-dark {
	--an-heading-color: #ffffff;
}

/* :is() gives these rules more weight than the global heading colour from theme.json */
.has-navy-background-color :is(h1, h2, h3, h4, h5, h6),
.has-heading-background-color :is(h1, h2, h3, h4, h5, h6),
.wp-block-cover :is(h1, h2, h3, h4, h5, h6),
.has-white-color :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* ...but white cards inside dark sections keep dark text */
.is-style-an-stat,
.is-style-an-card {
	color: var(--wp--preset--color--body);
}

.is-style-an-stat :is(h1, h2, h3, h4, h5, h6),
.is-style-an-card :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--heading);
}

.has-navy-background-color a:where(:not(.wp-element-button)),
.wp-block-cover a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Links in running text (the paragraphs and list items of sections, text + image blocks, features, columns, articles,
   plain pages, FAQ answers and product texts) are underlined as on Avalon, otherwise they look like the text: a 1px line
   3px below the text, 2px on hover, in the link's colour (navy on light backgrounds; white on navy and photo
   sections, blocks.css .is-dark and the rule above). Not buttons; cards, menus, chips and card headings are not the
   text containers' own paragraphs or lists, and the footer's and the sidebar's link rules (with a class) outweigh this
   one (no weight of its own beyond "p a"). */
:where(.ab-flow, .an-text, .an-flow, .wp-block-column, .wp-block-group, .ab-feature, .wp-block-post-content, .wp-block-details, .ab-accordion__body, .an-term-description, .an-term-extra__content, .wp-block-woocommerce-product-summary, .wc-block-components-product-summary, .wp-block-cover__inner-container) > :is(p, ul, ol) a:where(:not(.wp-element-button, .wp-block-button__link, .ab-btn, .button)),
:where(.an-html) :is(p, li) a:where(:not(.wp-element-button, .wp-block-button__link, .ab-btn, .button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:where(.ab-flow, .an-text, .an-flow, .wp-block-column, .wp-block-group, .ab-feature, .wp-block-post-content, .wp-block-details, .ab-accordion__body, .an-term-description, .an-term-extra__content, .wp-block-woocommerce-product-summary, .wc-block-components-product-summary, .wp-block-cover__inner-container) > :is(p, ul, ol) a:where(:not(.wp-element-button, .wp-block-button__link, .ab-btn, .button)):hover,
:where(.an-html) :is(p, li) a:where(:not(.wp-element-button, .wp-block-button__link, .ab-btn, .button)):hover {
	text-decoration-thickness: 2px;
}

/* The same text rhythm in core layouts as in the sections (blocks.css .ab-flow): the block gap between blocks
   (theme.json 16px), paragraphs and lists of one text --ab-flow-p apart, --ab-flow-c around components */
:root :where(.is-layout-flow, .is-layout-constrained) > p + p,
:root :where(.is-layout-flow, .is-layout-constrained) > p + :is(ul, ol),
:root :where(.is-layout-flow, .is-layout-constrained) > :is(ul, ol) + p,
:root :where(.is-layout-flow, .is-layout-constrained) > .an-text-heading + :is(p, ul, ol) {
	margin-block-start: var(--ab-flow-p, 14px);
}

:root :where(.is-layout-flow, .is-layout-constrained) > :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-query, .wp-block-embed) + *,
:root :where(.is-layout-flow, .is-layout-constrained) > * + :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-query, .wp-block-embed) {
	margin-block-start: var(--ab-flow-c, 32px);
}

/* an image block is as tall as its picture: no line box around it */
.wp-block-image img {
	display: block;
}

.wp-block-image > a {
	display: block;
	width: fit-content;
	max-width: 100%;
}

.wp-block-image.aligncenter > img,
.wp-block-image.aligncenter > a {
	margin-inline: auto;
}

/* ---------------------------------------------------------------- the wave mark (Vestelli's brand element) */

/* The wave under a section title (class an-wave, or one of the wave pictures of the media library): 240px wide on
   desktops and tablets (170px where the content asks for the small one), 170px on phones; --ab-flow below the title,
   --ab-flow-c to the content after it. In a hero the hero's own gaps space it (blocks.css). */
:root .wp-block-image.wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))) {
	--an-wave-w: 240px;
	width: fit-content;
	max-width: 100%;
	line-height: 0;
}

:root .wp-block-image.wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))):has(> img[style*="width:170px"]) {
	--an-wave-w: 170px;
}

:root .wp-block-image.wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))) > img {
	width: var(--an-wave-w) !important;
	max-width: 100%;
	height: auto !important;
}

@media (max-width: 768px) {
	:root .wp-block-image.wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))) {
		--an-wave-w: 170px !important;
	}
}

/* the double wave (attachment 8347, the contact page's two lines) is wider than a title's wave: 350px on desktops and
   tablets, 240px on phones, also with the class an-wave (the rules above do not size it) */
:root .wp-block-image.wp-block-image.wp-block-image:has(> img.wp-image-8347) {
	--an-wave-w: 350px !important;
	width: fit-content;
	max-width: 100%;
	line-height: 0;
}

:root .wp-block-image.wp-block-image.wp-block-image:has(> img.wp-image-8347) > img {
	width: var(--an-wave-w) !important;
	max-width: 100%;
	height: auto !important;
}

@media (max-width: 768px) {
	:root .wp-block-image.wp-block-image.wp-block-image.wp-block-image:has(> img.wp-image-8347) {
		--an-wave-w: 240px !important;
	}
}

/* its spacing in core layouts and article texts, as blocks.css spaces it in the sections' flow: right under the
   heading (12 / 14 / 16px), the text after it as after a heading (--ab-flow), a component after it --ab-flow-c */
:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-post-content) > * + .wp-block-image:where(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))) {
	margin-block-start: calc(var(--ab-flow, 16px) - 4px);
}

:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-post-content) > .wp-block-image:where(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))) + * {
	margin-block-start: var(--ab-flow, 16px);
}

:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-post-content) > .wp-block-image:where(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))) + :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-query, .wp-block-embed, .wp-block-details, .ab-grid) {
	margin-block-start: var(--ab-flow-c, 32px);
}

/* The wave follows its heading's alignment. A wave without an alignment of its own starts at the text edge also in a
   core constrained layout (the converter's lone-column groups, e.g. /palvelut/jatevesijarjestelman-hinta/): core
   centres every fit-content child there with margin-inline auto !important, which put the wave in the middle under a
   left-aligned heading. Right after a centred (right-aligned) heading such a wave is centred (right-aligned) with it;
   a wave with its own alignment (aligncenter, alignleft, alignright) keeps it. */
:root .is-layout-constrained > .wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))):not(.aligncenter, .alignleft, .alignright, .alignwide, .alignfull) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

:root :is(h1, h2, h3, h4, h5, h6, p).has-text-align-center + .wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))):not(.aligncenter, .alignleft, .alignright, .alignwide, .alignfull) {
	margin-left: auto !important;
	margin-right: auto !important;
}

:root :is(h1, h2, h3, h4, h5, h6, p).has-text-align-right + .wp-block-image:is(.an-wave, :has(> img:is([src*="element_wave"], [src*="kpb-image-195fd96739e4a51363690bf58dc16ffd"], [src*="77cc405b684b894164f3de3e96c8b7d00c0b3c89"]))):not(.aligncenter, .alignleft, .alignright, .alignwide, .alignfull) {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* ---------------------------------------------------------------- product quiz (Help Me Choose) */

/* The quiz in the site's look (Avalon restyles the same plugin): the site's font and colours, aligned with the section
   container (no inset of its own), as high as the step on show, the question close to its choices, the choices as
   light tiles and 44px step numbers. The plugin's settings arrive as inline variables on the container, so the site's
   values are set one level down; its own rules use !important, hence the doubled classes. */
.hmc-form-container > * {
	--hmc-swipe-step-min-height: auto;
	--hmc-step-title-size: var(--wp--preset--font-size--x-large);
	--hmc-step-title-color: var(--wp--preset--color--heading, #012b55);
	--hmc-step-description-size: var(--wp--preset--font-size--regular);
	--hmc-step-description-color: var(--wp--preset--color--body, #1b2a57);
	--hmc-option-label-size: var(--wp--preset--font-size--regular);
	--hmc-option-label-color: var(--wp--preset--color--heading, #012b55);
	--hmc-option-description-size: 15px;
	--hmc-option-description-color: #46557a;
	--hmc-recommendation-title-size: var(--wp--preset--font-size--x-large);
	--hmc-recommendation-title-color: var(--wp--preset--color--heading, #012b55);
	--hmc-recommendation-description-size: var(--wp--preset--font-size--regular);
	--hmc-recommendation-description-color: var(--wp--preset--color--body, #1b2a57);
	--hmc-swipe-options-gap: var(--ab-gap, 20px);
	--hmc-border-radius: 0px;
	--hmc-step-border-radius: 0px;
	--hmc-option-border-radius: 0px;
	--hmc-option-border-width: 0px;
	--hmc-option-border-color: transparent;
	--hmc-option-box-shadow: none;
	--hmc-option-bg: var(--wp--preset--color--light, #f7f6f6);
	--hmc-option-hover-bg: #ecebeb;
	--hmc-option-icon-bg: transparent;
	--hmc-option-image-height: 108px;
	--hmc-swipe-card-shadow: none;
	--hmc-swipe-card-border-color: transparent;
	--hmc-swipe-pagination-bg: var(--wp--preset--color--light, #f7f6f6);
	--hmc-swipe-pagination-text: var(--wp--preset--color--navy, #1b2a57);
	--hmc-swipe-pagination-hover-bg: #ecebeb;
	--hmc-swipe-pagination-active-bg: var(--wp--preset--color--navy, #1b2a57);
	--hmc-swipe-pagination-active-text: #fff;
	--hmc-swipe-buy-button-border-radius: 0px;
	--hmc-native-input-border-radius: 0px;
	--hmc-native-button-radius: 0px;
	--hmc-native-button-font-size: 16px;
	--hmc-swipe-reset-text-color: var(--wp--preset--color--navy, #1b2a57);
	--hmc-swipe-reset-hover-color: var(--wp--preset--color--navy, #1b2a57);
	/* the question's text to the tiles: two thirds of a section head's gap (32 / 21 / 16px) */
	--hmc-site-head-gap: max(16px, calc(var(--ab-head-gap, 24px) * 2 / 3));
	font-family: var(--wp--preset--font-family--oxygen);
}

/* the plugin's "plugin typography" sets system-ui on the container: the site's font everywhere inside */
.hmc-form-container.hmc-form-container.hmc-form-container,
.hmc-form-container :is(input, textarea, select, button, label, span, h2, h3, p) {
	font-family: var(--wp--preset--font-family--oxygen);
}

/* the section holding the quiz: at least the section padding m above and below (Avalon: 100 / 72 / 40px; the home
   page's section stores 30px above and xs below, which left the quiz cramped under the hero and over the next
   section); a stored preset s or more stays (the doubled classes: stronger than the first-section-after-hero rule) */
.ab-section.ab-section.ab-section:has(.hmc-form-container.hmc-form-container):is(.ab-pt-none, .ab-pt-xs, .ab-pt-px) {
	padding-top: var(--ab-pad-m, 40px);
}

.ab-section.ab-section.ab-section:has(.hmc-form-container.hmc-form-container):is(.ab-pb-none, .ab-pb-xs, .ab-pb-px) {
	padding-bottom: var(--ab-pad-m, 40px);
}

/* the quiz takes no room of its own around the question and below the tiles: the section's padding is the gap */
.hmc-form-container.hmc-form-container .hmc-step.hmc-step {
	min-height: 0;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.hmc-form-container.hmc-form-container :is(.hmc-swiper, .hmc-recommendation-slide) {
	min-height: 0;
}

/* the box follows the step on show (the other steps take no room and are out of the Tab order) */
.hmc-form-container.hmc-form-container .hmc-swiper .swiper-wrapper {
	align-items: flex-start;
	height: auto !important;
}

.hmc-form-container.hmc-form-container .hmc-swiper .swiper-slide:not(.swiper-slide-active) {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* the question's column (a Bootstrap .col-md-6 of the old theme): the section's left edge, as wide as a section head */
.hmc-form-container.hmc-form-container .hmc-step-intro.hmc-step-intro {
	width: auto;
	max-width: var(--ab-text-width, 760px);
	padding: 0 !important;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-step-options {
	padding: 0;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-step-title.hmc-step-title {
	margin: 0 0 var(--ab-flow-p, 14px) !important;
	font-size: var(--hmc-site-title-size, var(--wp--preset--font-size--x-large)) !important;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: 0;
}

/* the question's text close to the tiles (the plugin's h3 had 50px of padding below it on top of its margin) */
.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-step-description.hmc-step-description {
	margin: 0 0 var(--hmc-site-head-gap, 24px);
	padding: 0 !important;
	font-size: var(--wp--preset--font-size--regular) !important;
	font-weight: 400;
	line-height: 1.6 !important;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-label.hmc-option-label {
	font-size: var(--wp--preset--font-size--regular) !important;
	font-weight: 700;
	line-height: 1.3;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-description.hmc-option-description {
	font-size: 15px !important;
	line-height: 1.45;
}

.hmc-form-container:not([data-chooser-type="chat"]) :is(.hmc-option-label, .hmc-option-description) {
	text-wrap: balance;
}

/* the tile: even air around its content (the picture has empty margin inside it), no Bootstrap label margin */
.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option.hmc-option {
	margin: 0;
	padding: 22px 16px 28px !important;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-image {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
}

/* the pictures' near-white squares melt into the tile */
.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-image :is(img, .hmc-attachment-image--svg) {
	filter: brightness(1.04);
	mix-blend-mode: multiply;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-content {
	padding: 0;
}

/* keyboard focus on a choice (the radio inside is invisible): the site's focus ring around the tile */
.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option:has(.hmc-radio-input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

/* the step numbers: 44px tap targets under the tiles */
.hmc-form-container.hmc-form-container .hmc-swiper-shell {
	gap: 0;
}

.hmc-form-container.hmc-form-container .hmc-swiper-footer {
	align-items: flex-start;
	padding: var(--ab-flow-c, 32px) 0 0;
}

.hmc-form-container.hmc-form-container .hmc-swiper-pagination {
	gap: 8px;
}

.hmc-form-container.hmc-form-container .hmc-pagination-bullet {
	min-width: var(--ab-tap, 44px);
	height: var(--ab-tap, 44px);
	padding: 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: var(--ab-tap, 44px);
	opacity: 1;
}

.hmc-form-container.hmc-form-container .hmc-pagination-bullet.hmc-bullet-disabled {
	opacity: 0.45;
}

/* "start again" as a text link with a 44px tap area */
.hmc-form-container.hmc-form-container .hmc-swiper-reset .hmc-reset-wrapper {
	margin: 0;
	padding: 0;
	text-align: left;
}

.hmc-form-container.hmc-form-container .hmc-swiper-reset .hmc-reset-button.hmc-reset-button {
	min-height: var(--ab-tap, 44px);
	padding: 0 !important;
	background: none;
	color: var(--wp--preset--color--navy, #1b2a57) !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* the result: its heading and text as a section head, the contact form's button in the site's look */
.hmc-form-container.hmc-form-container .hmc-swiper .hmc-recommendation-slide.swiper-slide-active .hmc-recommendation-result {
	margin-top: 0;
	padding: 0;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-recommendations-header.hmc-recommendations-header {
	max-width: var(--ab-text-width, 760px);
	margin: 0 0 var(--ab-flow-p, 14px) !important;
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.2;
	letter-spacing: 0;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-rec-description.hmc-rec-description {
	max-width: var(--ab-text-width, 760px);
	margin: 0 0 var(--hmc-site-head-gap, 24px);
	font-size: var(--wp--preset--font-size--regular) !important;
	line-height: 1.6 !important;
}

/* (the site's button: bold navy text on the accent, 5.0:1; a lighter accent under the pointer) */
.hmc-form-container.hmc-form-container .hmc-native-submit {
	box-sizing: border-box;
	min-height: var(--ab-btn-h, 44px);
	border-radius: 0;
	background: var(--wp--preset--color--accent, #01a6e6);
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
	font-weight: 700;
}

.hmc-form-container.hmc-form-container .hmc-native-submit.hmc-native-submit:is(:hover, :focus-visible):not(:disabled) {
	background: #33b8eb;
	color: var(--wp--preset--color--navy, #1b2a57);
	filter: none;
	transform: none;
}

.hmc-form-container.hmc-form-container :is(.hmc-native-submit, .hmc-reset-button, .hmc-pagination-bullet):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

.hmc-form-container .hmc-recommendation-slide textarea {
	height: 131px;
}

/* tablets: four tiles side by side; the centred text gets their whole width */
@media (max-width: 1024px) {
	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option.hmc-option {
		padding-inline: 12px !important;
	}
}

/* phones (the plugin's two columns up to 767px): smaller tiles, a lone last choice takes the whole row */
@media (max-width: 767px) {
	.hmc-form-container > * {
		--hmc-option-image-height: 72px;
	}

	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option.hmc-option {
		padding: 14px 10px 18px !important;
	}

	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-label.hmc-option-label {
		font-size: 16px !important;
	}

	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-description.hmc-option-description {
		font-size: 14px !important;
		line-height: 1.4;
	}

	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-step-options > .hmc-option:nth-child(odd of .hmc-option):last-child {
		grid-column: 1 / -1;
	}
}

/* touch screens: no hover shade (it stayed on the tile under the finger) */
@media (hover: none) {
	.hmc-form-container > * {
		--hmc-option-hover-bg: var(--wp--preset--color--light, #f7f6f6);
	}
}

/* ---------------------------------------------------------------- buttons */

.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* buttons are at least 44px high, 48px on phones (--ab-btn-h), the text centred; words are hyphenated, not split */
.wp-element-button.wp-element-button:where(:not(.is-style-small > *)) {
	box-sizing: border-box;
	min-height: var(--ab-btn-h, 44px);
	align-content: center;
	-webkit-hyphens: auto;
	hyphens: auto;
	word-break: normal;
	overflow-wrap: normal;
}

.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

/* The theme's button (theme.json, round 4): the accent with bold navy text, as the CTA band's and the header's buttons
   (5.0:1; the white text it had was 2.8:1), a lighter accent under the pointer (6.1:1). A button that was given a
   dark background colour in the editor (navy, the headings' colour, black) and no text colour of its own keeps white
   text (the preset background class wins over the hover colour, so it stays dark under the pointer too). */
.wp-element-button.has-background:is(.has-navy-background-color, .has-heading-background-color, .has-black-background-color):not(.has-text-color) {
	color: #fff;
}

/* core gives outline buttons their own padding; keep the site's button size */
.wp-block-button.is-style-outline > .wp-block-button__link:where(:not(.has-custom-padding)) {
	padding: 12px 24px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.has-white-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-light-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(0, 43, 86, 0.06);
}

/* large button (e.g. in heroes); goes with any colour style */
.wp-block-button.an-btn-lg > .wp-block-button__link {
	padding: 14px 32px;
	font-weight: 700;
}

/* small button (e.g. "Takaisin kauppaan" in the empty cart): less padding, still a 44px tap target */
.wp-block-button.is-style-small > .wp-block-button__link {
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 16px;
	font-size: 16px;
	line-height: 1.2;
	align-content: center;
}

/* WooCommerce's own buttons (cart, checkout, notices) are 44px tap targets too */
:is(.wc-block-components-button, .woocommerce a.button, .woocommerce button.button, .woocommerce-message .button):not(.is-link) {
	box-sizing: border-box;
	min-height: 44px;
}

/* ---------------------------------------------------------------- page with a title (templates not in use at the moment) */

.an-page-title :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
}

.an-page-title .wp-block-post-content.wp-block-post-content > * {
	margin-block: 0;
}

.an-page-title .wp-block-post-content.wp-block-post-content > * + * {
	margin-block-start: var(--ab-flow, 16px);
}

.an-page-title .wp-block-post-content.wp-block-post-content > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: var(--ab-flow-p, 14px);
}

.an-page-title .wp-block-post-content.wp-block-post-content > * + :is(h1, h2, h3, h4, h5, h6, .wp-block-image, .wp-block-table, .wp-block-separator) {
	margin-block-start: var(--ab-flow-c, 32px);
}

.an-page-title .wp-block-post-content > :is(p, ul, ol) {
	max-width: var(--ab-measure, 68ch);
}

.an-page-title .ab-flow.ab-flow > .wp-block-post-content {
	display: flow-root;
	margin-block-start: var(--ab-head-gap, 24px);
}

/* ---------------------------------------------------------------- articles and references (single.html, page-title.html) */

/* the article's column (the section an-article of the templates): as wide as the readable measure (68 characters of
   the body text: 700 / 659 / 350px; Avalon's article column), centred under the hero; the cart and the checkout (an-article
   an-article-wide) get the old theme's 1020px shop column for WooCommerce's two-column forms and product grid.
   (The section stores no width: its container is the content one, so blocks.css's left-edge rule for narrower
   sections does not move it.) */
.ab-section.an-article > .ab-container {
	max-width: calc(var(--ab-measure, 68ch) + 2 * var(--ab-gutter, 20px));
	margin-inline: auto;
}

.ab-section.an-article.an-article-wide > .ab-container {
	max-width: calc(1020px + 2 * var(--ab-gutter, 20px));
}

/* the templates without a hero (narrow page, order confirmation): the header's height + s above the first text */
.ab-section.an-page-narrow,
.ab-section.an-order-confirmation {
	padding-top: calc(var(--ab-header-h, 72px) + var(--ab-pad-s, 24px));
}

/* the narrow page's title and its text: a section title's gap */
.an-page-narrow .ab-flow.ab-flow > .wp-block-post-title + .wp-block-post-content {
	display: flow-root;
	margin-block-start: var(--ab-head-gap, 24px);
}

/* the article text: blocks --ab-flow-p apart, a heading --ab-flow-c below the text before it and --ab-flow above the
   text after it, pictures, videos and tables --ab-flow-c from the text; at a readable measure */
.an-article .wp-block-post-content > * {
	margin-block: 0;
}

.an-article .wp-block-post-content > * + * {
	margin-block-start: var(--ab-flow-p, 14px);
}

.an-article .wp-block-post-content > * + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--ab-flow-c, 32px);
}

.an-article .wp-block-post-content > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--ab-flow, 16px);
}

.an-article .wp-block-post-content > * + :is(.wp-block-image, figure, .wp-caption, .wp-block-embed, .wp-block-table, .wp-block-columns, .wp-block-gallery, blockquote, .wp-block-quote, .wp-block-separator),
.an-article .wp-block-post-content > :is(.wp-block-image, figure, .wp-caption, .wp-block-embed, .wp-block-table, .wp-block-columns, .wp-block-gallery, blockquote, .wp-block-quote, .wp-block-separator) + * {
	margin-block-start: var(--ab-flow-c, 32px);
}

/* (round 4) a heading at the start of a pasted wrapper (an old article's <div class="entry__content">) after other
   text: the heading's gap above it, as a heading of the text itself has (the wrapper's first heading has no margin of
   its own, and the paragraph before it ends its own wrapper without one: the heading sat 14px under the text) */
.an-article .wp-block-post-content > * + :where(:not(.ab-section, [class*="wp-block-avalon-"])):has(> :is(h1, h2, h3, h4, h5, h6):first-child) {
	margin-block-start: var(--ab-flow-c, 32px);
}

/* phones: a list inside a list item is indented 1.25em (the browser's 40px for each level put the nested items of an
   old article 80px in on a 390px screen) */
@media (max-width: 768px) {
	:where(.wp-block-post-content, .an-html, .an-text, .ab-flow) :where(li) > :where(ul, ol) {
		padding-left: 1.25em;
	}
}

.an-article .wp-block-post-content > :is(p, ul, ol) {
	max-width: var(--ab-measure, 68ch);
}

.an-article .wp-block-post-content h3 {
	font-weight: 700;
}

/* text elements inside pasted HTML wrappers (an-html, old article markup): the same rhythm by their own margins. Not
   inside the site's blocks (sections, stats, text + image ...): they space their own texts (e.g. the stats' number 8px
   above its label) */
.an-article .wp-block-post-content > :where(:not(.ab-section, [class*="wp-block-avalon-"])) :is(p, ul, ol):not(:last-child) {
	margin-block: 0 var(--ab-flow-p, 14px);
}

.an-article .wp-block-post-content > :where(:not(.ab-section, [class*="wp-block-avalon-"])) :is(p, ul, ol):last-child {
	margin-block: 0;
}

.an-article .wp-block-post-content > :where(:not(.ab-section, [class*="wp-block-avalon-"])) :is(h1, h2, h3, h4, h5, h6) {
	margin-block: var(--ab-flow-c, 32px) var(--ab-flow, 16px);
}

.an-article .wp-block-post-content > :where(:not(.ab-section, [class*="wp-block-avalon-"])) > :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.an-article .wp-block-post-content :is(li) :is(ul, ol) {
	margin-bottom: 0;
}

.an-article .wp-block-post-content :is(blockquote, .wp-block-quote) p {
	margin: 0 0 var(--ab-flow-p, 14px);
}

.an-article .wp-block-post-content :is(blockquote, .wp-block-quote) p:last-child {
	margin-bottom: 0;
}

/* a pasted HTML table (the privacy statement's, some articles'): collapsed borders, a little cell padding */
.wp-block-post-content > table,
.an-html table {
	border-collapse: collapse;
	border-spacing: 0;
}

.wp-block-post-content > table :is(td, th),
.an-html table :is(td, th) {
	padding: 4px 8px 4px 0;
	vertical-align: top;
}

/* phones: such a table (the privacy statement's five columns are 540px wide) scrolls sideways inside its own box, the
   page never does. The tables with a phone layout of their own (a table with a head: labelled rows, site.css; taulukko,
   core/table, WooCommerce's) keep theirs. */
@media (max-width: 768px) {
	:is(.wp-block-post-content, .an-html) table:not(.ab-table--cards, .taulukko, .shop_table, .wp-block-table > table, .woocommerce table) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* (round 4) the text a size smaller, so a table of four short columns (the articles' result tables) fits a
		   phone; one that still does not shows a shade at the edge that has more to scroll to (the white covers move
		   with the table's content, the shades stay at the box's edges) */
		font-size: 14px;
		line-height: 1.4;
		background:
			linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
			linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(27, 42, 87, 0.22), rgba(27, 42, 87, 0)) left center / 12px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(27, 42, 87, 0.22), rgba(27, 42, 87, 0)) right center / 12px 100% no-repeat scroll;
	}

	/* the row labels (the first column) keep a readable width instead of one word per line */
	:is(.wp-block-post-content, .an-html) table:not(.ab-table--cards, .taulukko, .shop_table, .wp-block-table > table, .woocommerce table) :is(td, th):first-child:not([colspan]) {
		min-width: 7.5em;
	}
}

/* forms inside a text (the training sign-up form, pasted as a script): labels above their fields. With no weight of
   their own (:where), so that the styles of the form itself (Gravity Forms, WooCommerce ...) win */
:where(.wp-block-post-content) label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
}

:where(.wp-block-post-content) :is(input[type="checkbox"], input[type="radio"]) {
	margin: 4px 0 0;
	line-height: normal;
}

/* superscripts and subscripts: 75% size, raised by an offset (the browser's own "super" lifts the whole line box) */
sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* the alignment classes of WordPress content (a picture in a product's text, an article ...) */
.alignnone {
	margin: 5px 20px 20px 0;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto;
}

/* phones: floated pictures in a text take the whole width (a 300px picture beside 50px of text) */
@media (max-width: 768px) {
	:is(.wp-block-post-content, .an-html) :is(img, figure, .wp-caption).alignleft,
	:is(.wp-block-post-content, .an-html) :is(img, figure, .wp-caption).alignright {
		float: none;
		margin: 0 0 var(--ab-flow, 16px);
	}
}

/* Bootstrap's ".hide" of the old theme (an image in an article that was kept hidden: a second copy of it follows) */
.hide {
	display: none !important;
}

/* the default separator: a hairline across the text column, from its left edge like the text; in centred text it
   stays centred */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull) {
	width: 100%;
	max-width: var(--ab-text-width, 760px);
	margin-inline: 0;
}

.wp-block-separator:not(.is-style-dots):not(.has-text-color):not(.has-background) {
	border: 0;
	border-top: 1px solid #e5e5e5;
}

.is-dark .wp-block-separator:not(.is-style-dots):not(.has-text-color):not(.has-background) {
	border-top-color: rgba(255, 255, 255, 0.2);
}

:is(.has-text-align-center, .is-content-justification-center) + .wp-block-separator:not(.is-style-wide):not(.is-style-dots),
.wp-block-separator.aligncenter:not(.is-style-wide):not(.is-style-dots) {
	margin-inline: auto;
}

/* notice box (empty cart) */
.an-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid #e6e6e6;
	border-left: 4px solid var(--wp--preset--color--accent, #01a6e6);
	background: #fcfcfc;
	font-weight: 700;
}

/* ---------------------------------------------------------------- cards and components */

/* Card: white box (quiz-like cards, stats) */
.is-style-an-card {
	background: #fff;
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Stat box: icon, big number, small caps label; boxes in a row are equally tall */
.is-style-an-stat {
	background: #fff;
	text-align: center;
	padding: 48px 20px;
	min-height: 335px;
	box-sizing: border-box;
}

.an-stats > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.an-stats > .wp-block-column > .is-style-an-stat {
	flex: 1 1 auto;
}

.is-style-an-stat.an-stat-bordered {
	border: 1px solid #e6e6e6;
}

/* icons sit in a box of the same height so the numbers line up */
.is-style-an-stat .an-stat-icon {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
}

.is-style-an-stat .an-stat-icon img {
	max-height: 72px;
	width: auto;
}

.is-style-an-stat .an-stat-icon img[src$=".svg"] {
	height: 40px;
}

.is-style-an-stat .an-stat-number {
	font-size: clamp(34px, 2.6vw + 14px, 48px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--heading);
	margin: 16px 0 10px;
}

.is-style-an-stat .an-stat-label {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
	margin: 0;
}

/* Person card: round photo, name, phone, email */
.is-style-an-person .wp-block-image img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
}

/* Callout with an icon in front of the title (contact band) */
.an-callout-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.an-callout-title img {
	width: 24px;
	height: auto;
	flex: 0 0 auto;
}

.an-callout-body {
	margin-top: 16px;
	padding-left: 38px;
}

/* Query loop cards (references, articles, products) */
.an-post-grid .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.an-post-grid .wp-block-post-title {
	margin-top: 16px;
	font-size: var(--ab-item-size, 16px);
	line-height: 1.3;
}

.an-post-grid .wp-block-post-title a {
	color: var(--wp--preset--color--navy);
}

.has-navy-background-color .an-post-grid .wp-block-post-title a {
	color: #fff;
}

/* Image cards side by side: the cover fills the whole column so the cards are equally tall */
.wp-block-column > .wp-block-cover:only-child {
	height: 100%;
}

/* Contact band callouts */
.an-callout .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 12px 28px;
}

/* Visibility helpers (replaces Beaver Builder's per-device visibility; phones <= 768px like the section grids) */
@media (max-width: 768px) {
	.an-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.an-hide-desktop {
		display: none !important;
	}
}

/* Leadoo / consent placeholder box keeps its own look inside dark rows */
.kncc-iframe-placeholder {
	box-sizing: border-box;
	max-width: 100%;
	color: #282828;
}

.is-layout-constrained > .kncc-iframe-placeholder {
	margin-top: 20px;
	margin-bottom: 20px;
	max-width: var(--wp--style--global--content-size);
}

/* A section whose only content is a Leadoo slot (the product pages' pattern "tuotesivu-leadoo") takes no room while
   the slot is empty: Leadoo blocked or not loaded (yet), it was an empty light band of 200px. Leadoo puts its script
   and the bot's iframe inside <ld-slot>, and then the section has its padding again. (Not display: none: the slot
   stays in the page for Leadoo to find and fill.) */
.ab-section:has(> .ab-container > ld-slot:only-child:empty) {
	padding-block: 0;
}

/* ---------------------------------------------------------------- footer */

/* The footer is the synced pattern "alatunniste" (blocks/site-footer): a navy section with four columns (logos,
   address, the menu, the languages) and the long wave at the bottom. Its spacing is 90% of the band's (144 / 101 /
   58px above, 122 / 86 / 47px below; the user found the full band too airy, 2026-10-16), whatever the pattern
   stores; 14px text. Tablets: the four columns in one grid
   row. Phones: the logos side by side, the address, the menu in two columns of 44px rows between hairlines and the
   languages in one row. (The pattern's an-cols / an-stack-m / gap classes must not reach it: hence the weight.) */
.an-site-footer {
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: 14px;
	line-height: 1.55;
}

.an-site-footer :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 12px;
	color: #fff;
	font-size: 14px;
}

.an-site-footer p {
	margin: 0 0 8px;
}

.an-site-footer a {
	color: #fff;
	text-decoration: none;
}

.an-site-footer a:hover {
	text-decoration: underline;
}

.an-site-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

.an-site-footer > .ab-section.ab-section:first-child {
	padding-top: calc(var(--ab-pad-band, 64px) * 0.9);
	padding-top: round(calc(var(--ab-pad-band, 64px) * 0.9), 1px);
	padding-bottom: calc((var(--ab-pad-band, 64px) - var(--ab-pad-xs, 12px)) * 0.9);
	padding-bottom: round(calc((var(--ab-pad-band, 64px) - var(--ab-pad-xs, 12px)) * 0.9), 1px);
}

/* the columns: the container's edges (no Beaver Builder side margins or column paddings), the token gap */
.an-site-footer .ab-container > .wp-block-columns.wp-block-columns {
	gap: var(--ab-flow-c, 32px) var(--ab-gap, 20px);
	margin: 0;
}

.an-site-footer .ab-container > .wp-block-columns.wp-block-columns > .wp-block-column {
	min-width: 0;
	padding: 0;
}

/* (the blocks inside a column follow each other at the text rhythm, not the sections' flow gap) */
.an-site-footer .ab-container > .wp-block-columns > .wp-block-column > * + * {
	margin-block-start: var(--ab-flow, 16px) !important;
}

/* (the address and the languages are text groups, an-text: 8px between their paragraphs, not the text rhythm) */
.an-site-footer .an-text.an-text.an-text > p {
	margin: 0 0 8px;
}

.an-site-footer .an-text.an-text.an-text > p:last-child,
.an-site-footer .wp-block-column > p:last-child {
	margin-bottom: 0;
}

/* the logos keep their proportions */
.an-site-footer .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* the footer menu (avalon/menu-list): the body text's size, rows of at least 32px on desktops */
.an-site-footer .ab-menu-list__list > li + li {
	border-top: 0;
}

.an-site-footer .ab-menu-list__list a {
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
}

/* the languages (avalon/language-links): the current one marked */
.an-site-footer .ab-lang-links.ab-lang-links.an-text > p {
	margin: 0;
}

.an-site-footer .ab-lang-links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.an-site-footer .ab-lang-links a[aria-current] {
	font-weight: 700;
}

/* the long wave at the bottom: --ab-flow-c below the columns, whatever its gap classes say */
.an-site-footer .ab-container > .wp-block-columns + .wp-block-image {
	margin-block-start: var(--ab-flow-c, 32px) !important;
	margin-bottom: 0 !important;
}

.an-site-footer .ab-container > .wp-block-image img {
	display: block;
	width: 100%;
}

/* desktops: the logo column takes the room left of the others (its stored width), the others as wide as the text */
@media (min-width: 1025px) {
	.an-site-footer .ab-container > .wp-block-columns.wp-block-columns {
		flex-wrap: nowrap !important;
		column-gap: var(--ab-gap, 48px);
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child {
		flex: 1 1 auto !important;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:not(:first-child) {
		flex: 0 1 auto !important;
		min-width: 120px;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child img {
		width: 200px !important;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child > .wp-block-image + .wp-block-image img {
		width: 140px !important;
	}
}

/* tablets: the four columns in one grid row (the logos stacked in the first), links and languages 44px tap targets */
@media (min-width: 769px) and (max-width: 1024px) {
	.an-site-footer .ab-container > .wp-block-columns.wp-block-columns {
		display: grid;
		grid-template-columns: 1.25fr 1.2fr 1fr 0.75fr;
		gap: var(--ab-gap, 32px);
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:not(:has(*)) {
		display: none;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child img {
		width: 170px !important;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child > .wp-block-image + .wp-block-image img {
		width: 120px !important;
	}

	.an-site-footer .ab-menu-list__list a,
	.an-site-footer .ab-lang-links a {
		min-height: var(--ab-tap, 44px);
	}

	/* (the first link's text on the line of the other columns' first text) */
	.an-site-footer .ab-menu-list__list,
	.an-site-footer .ab-lang-links {
		margin-top: calc((1.55em - var(--ab-tap, 44px)) / 2) !important;
	}
}

/* phones: the logos in one row (150px, the partner logo 36px high), the address (its linked lines 44px rows), the menu
   in two columns of 44px rows between hairlines, the languages in one row of 44px tap targets */
@media (max-width: 768px) {
	.an-site-footer .ab-container > .wp-block-columns.wp-block-columns {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.an-site-footer .wp-block-column:not(:has(*)) {
		display: none;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child > * {
		margin: 0 !important;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child > .wp-block-image:first-child img {
		width: 150px !important;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child > .wp-block-image + .wp-block-image img {
		width: auto !important;
		height: 36px !important;
	}

	/* the address: each line with a link (phone, e-mail, the privacy and cookie pages) is a 44px row of its own, like
	   the menu rows below, so no two links share a tap area; the lines without a link keep the text's line height */
	.an-site-footer .an-text:not(.ab-lang-links) a {
		display: inline-flex;
		align-items: center;
		min-height: var(--ab-tap, 44px);
		vertical-align: top;
	}

	/* the menu: two columns of 44px rows between hairlines */
	.an-site-footer .ab-menu-list__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	.an-site-footer .ab-menu-list__list > li {
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.an-site-footer .ab-menu-list__list a {
		min-height: var(--ab-tap, 44px);
	}

	/* the languages right below the menu, in one row between hairlines (its top line over the menu's last one) */
	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:has(.ab-menu-list) + .wp-block-column:has(.ab-lang-links) {
		margin-top: -25px;
	}

	.an-site-footer .ab-lang-links {
		display: flex;
		flex-wrap: wrap;
		column-gap: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.an-site-footer .ab-lang-links a {
		min-height: var(--ab-tap, 44px);
	}

	/* every footer link is at least a 44 x 44 tap target (round 4): the logos' links ("Part of Auroora" was 100 x 36),
	   the short language and address links ("Suomi" 40px, "Kakor" 36px wide; the tap area grows to the right, the
	   text stays on the column's edge) */
	.an-site-footer .wp-block-image a {
		display: inline-flex;
		align-items: center;
		min-width: var(--ab-tap, 44px);
		min-height: var(--ab-tap, 44px);
	}

	.an-site-footer .ab-lang-links a,
	.an-site-footer .an-text:not(.ab-lang-links) a {
		min-width: var(--ab-tap, 44px);
	}
}

/* Phones: the closing call to action (the CTA band, a navy panel from edge to edge on phones) right above the footer
   meets it (round 4): the band's 40px of white below the panel made a white strip between two navy areas. A hairline
   keeps the panel and the footer apart. Wider screens keep the inset panel with white around it. */
@media (max-width: 768px) {
	.an-main > .ab-cta.ab-cta:last-child,
	.an-main > .wp-block-post-content:last-child > .ab-cta.ab-cta:last-child {
		padding-bottom: 0;
	}

	.wp-site-blocks > .an-main:has(> .ab-cta:last-child, > .wp-block-post-content:last-child > .ab-cta:last-child) + * .an-site-footer {
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}

	/* ... and a navy CTA band right after a navy section (or a photo under a navy layer) meets it too: the band's 40px
	   of white above the panel was a white strip between two navy areas; the same hairline between them */
	:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-section.is-dark, .ab-hero.is-dark) + .ab-cta.ab-cta:not(.ab-cta--light) {
		padding-top: 0;
	}

	:is(.ab-bg-navy, .ab-bg-navy-soft, .ab-section.is-dark, .ab-hero.is-dark) + .ab-cta:not(.ab-cta--light) .ab-cta__panel {
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
}

/* A page that ends with a navy section (no CTA band after it; any screen): the hairline on top of the footer keeps the
   section and the footer apart (they were one navy area, the footer's logo right under the section's button) */
.wp-site-blocks > .an-main:has(> :is(.ab-bg-navy, .ab-bg-navy-soft, .ab-section.is-dark):last-child, > .wp-block-post-content:last-child > :is(.ab-bg-navy, .ab-bg-navy-soft, .ab-section.is-dark):last-child) + * .an-site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---------------------------------------------------------------- templates (single, archive, product pages) */

/* previous and next article: two full-width rows between hairlines, the whole row the link */
.an-post-nav.an-post-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin-top: var(--ab-flow-c, 32px);
	border-top: 1px solid #e5e5e5;
}

.an-post-nav > * {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding-block: 12px;
	border-bottom: 1px solid #e5e5e5;
}

.an-post-nav > :empty {
	display: none;
}

.an-post-nav > .post-navigation-link-next {
	justify-content: flex-end;
	text-align: right;
}

.an-post-nav a {
	font-weight: 700;
	text-decoration: none;
}

.an-post-nav a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* "Muita kokemuksia" below an article */
.an-more-posts.ab-pt-s {
	padding-top: var(--ab-pad-m, 40px);
}

/* article hero (single.html): the page titles' size, 42 / 34 / 28px, not the hero's 50 / 40 / 28px (a long quote as the
   title); blocks.css sizes the hero title from these variables (with !important) */
.ab-hero.an-post-hero {
	--ab-hero-h1: var(--wp--preset--font-size--xx-large, 42px);
	--ab-hero-h1-lh: 1.1;
}

:root:root .an-post-hero h1.wp-block-post-title {
	text-wrap: balance;
}

@media (max-width: 1024px) {
	.ab-hero.an-post-hero {
		--ab-hero-h1-lh: 1.15;
	}
}

/* phones: a long article title (a customer's quote, 60-150 characters) at 24px, so it takes 3-6 lines and the hero
   stays within about 55 % of the screen with the first lines of the article below it (28px made 7-9 lines and a
   557px hero) */
@media (max-width: 768px) {
	:root .ab-hero.an-post-hero {
		--ab-hero-h1: 24px;
		--ab-hero-h1-lh: 1.2;
		min-height: min(55svh, 460px);
	}
}

/* The article templates' hero (single.html, page-title.html; the cart and the checkout the wide one): its text on the
   article column's left edge below it (the readable measure, centred; the shop's 1020px column), so the title, the
   meta line and the text share one edge on wide screens (the hero text started at the page's edge, the article ~300px
   further in). The text may take the column's whole width. */
.ab-hero.an-article-hero > .ab-container {
	max-width: calc(var(--ab-measure, 68ch) + 2 * var(--ab-gutter, 20px));
	margin-inline: auto;
}

.ab-hero.an-article-hero.an-article-hero--wide > .ab-container {
	max-width: calc(1020px + 2 * var(--ab-gutter, 20px));
}

.ab-hero.an-article-hero .ab-hero__content {
	max-width: none;
}

/* the article's meta line under the title and the wave: the date and the category (inc/template-helpers.php), 15px,
   white on the hero's shade; the category is a link (underlined) */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > p.an-post-meta.an-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	max-width: none;
	margin-block-start: var(--ab-hero-gap, 12px);
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.an-post-meta__date {
	font-variant-numeric: tabular-nums;
}

.an-post-meta__sep {
	white-space: pre;
}

.ab-hero .an-post-meta a.an-post-meta__term {
	display: inline-flex;
	align-items: center;
	min-width: var(--ab-tap, 44px);
	min-height: var(--ab-tap, 44px);
	margin-block: calc((1.45em - var(--ab-tap, 44px)) / 2);
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ab-hero .an-post-meta a.an-post-meta__term:hover {
	text-decoration-thickness: 2px;
}

/* an archive's hero lead: the category's description when it has one (templates/archive.html, index.html; the site
   slogan was there before round 4), in the lead's look */
.ab-hero.ab-hero .ab-hero__content.ab-flow.ab-flow > .an-hero-term-description {
	max-width: 34em;
	color: #fff;
	font-size: var(--ab-hero-lead, 17px);
	line-height: 1.45;
}

.an-hero-term-description > * {
	margin: 0;
}

.an-hero-term-description > * + * {
	margin-top: 10px;
}

/* the title of a hero made by a template (post, search, archive): the hero h1's line height (blocks.css sets it) */
.ab-hero :is(.wp-block-query-title, .wp-block-post-title) {
	line-height: var(--ab-hero-h1-lh, 1.1);
}

@media (max-width: 1024px) {
	.ab-hero :is(.wp-block-query-title, .wp-block-post-title) {
		line-height: var(--ab-hero-h1-lh, 1.15);
	}
}

/* search field in the archive / search hero: a 48px field and the site's button beside it */
.an-hero-search {
	width: 100%;
	max-width: 480px;
	margin: 0;
}

.an-hero-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
}

.an-hero-search .wp-block-search__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	min-height: var(--ab-btn-h, 44px);
	padding: 10px 14px;
	border: 1px solid #e6e6e6;
	border-radius: 0;
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-size: 16px;
	line-height: 1.4;
}

.an-hero-search .wp-block-search__button {
	box-sizing: border-box;
	min-height: var(--ab-btn-h, 44px);
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.an-hero-search .wp-block-search__button:hover {
	background: #33b8eb;
	color: var(--wp--preset--color--navy, #1b2a57);
}

/* ---------------------------------------------------------------- product page (templates/single-product.html) */

/* The gallery and the texts in two halves of the content container, on the same edges as every other page; below the
   header (its height + s). Tablets and desktops: the text column a little in from the middle (Avalon's steps).
   Phones: the breadcrumb and the name, then the picture (at most 280px high), then the texts, all on the 20px edge. */
.ab-section.an-product-section {
	padding-top: calc(var(--ab-header-h, 72px) + var(--ab-pad-s, 24px));
	padding-bottom: var(--ab-pad-s, 24px);
}

/* (the empty store-notices block above the columns must not push them down by the flow gap) */
.an-product-section .an-product-top {
	margin-top: 0 !important;
}

/* the columns: no Beaver Builder side margins or paddings (an-cols) */
.an-product-top.an-product-top {
	gap: 0;
	margin-inline: 0;
}

.an-product-top.an-product-top > .wp-block-column {
	padding-inline: 0;
}

.woocommerce .an-product-top .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.an-product-top .woocommerce-product-gallery {
	margin-bottom: 0 !important;
}

@media (min-width: 769px) {
	/* (core's column rule is .wp-block-columns:not(...) > .wp-block-column; it stacks the columns below 782px) */
	:root .an-product-top.an-product-top {
		flex-wrap: nowrap !important;
	}

	:root .an-product-top.an-product-top > .wp-block-column {
		box-sizing: border-box;
		flex-basis: 50% !important;
	}

	.an-product-top.an-product-top > .wp-block-column:first-child {
		padding: 0 0 40px;
	}

	.an-product-top.an-product-top > .wp-block-column:last-child {
		padding: 20px 0 60px var(--ab-gutter, 32px);
	}
}

@media (min-width: 993px) {
	.an-product-top.an-product-top > .wp-block-column:last-child {
		padding: 0 0 40px 48px;
	}
}

@media (min-width: 1201px) {
	.an-product-top.an-product-top > .wp-block-column:last-child {
		padding: 50px 0 90px 80px;
	}
}

/* breadcrumbs (product, shop and category pages): 14px meta text, each link a 44px tap area without moving the text */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs,
.wp-block-woocommerce-breadcrumbs {
	font-size: 14px;
	line-height: 1.45;
}

:root :is(.an-product-top, .an-archive-head) :is(.wc-block-breadcrumbs.has-font-size, .wc-block-breadcrumbs .woocommerce-breadcrumb, .wc-block-breadcrumbs a) {
	font-size: 14px !important;
	line-height: 1.45;
}

.woocommerce-breadcrumb a {
	display: inline-block;
	margin-block: -13px;
	padding-block: 13px;
}

.an-product-top .wc-block-breadcrumbs .woocommerce-breadcrumb {
	color: #5d6680;
}

.an-product-top .wc-block-breadcrumbs a {
	color: var(--wp--preset--color--navy, #1b2a57);
}

.an-product-top .wc-block-breadcrumbs {
	margin-bottom: 0 !important;
}

/* the product's name: 36px (30px in the narrow text column of tablets, 27px on phones), a head gap from the
   breadcrumb and to the text; a long compound ("Harmaavesipuhdistamo") is hyphenated where the browser can, and
   broken only when it does not fit the column at all (core's post title breaks it anywhere) */
:root:root .an-product-top h1.an-product-title {
	margin: var(--ab-head-gap, 24px) 0 var(--ab-head-gap, 24px) !important;
	font-size: 36px;
	line-height: 1.1;
	word-break: normal;
	overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	:root:root .an-product-top h1.an-product-title {
		font-size: 30px;
		line-height: 1.15;
	}
}

@media (max-width: 768px) {
	:root:root .an-product-top h1.an-product-title {
		margin: var(--ab-flow, 16px) 0 var(--ab-flow-c, 32px) !important;
		font-size: 27px;
	}
}

/* the summary: the text rhythm (flow-root: its own margins stay inside it) */
.an-product-top .wp-block-woocommerce-product-summary {
	display: flow-root;
	margin-top: 0 !important;
}

.an-product-top .wp-block-woocommerce-product-summary :is(p, ul, ol) {
	margin: 0 0 var(--ab-flow-p, 14px);
}

.an-product-top .wp-block-woocommerce-product-summary > :last-child,
.an-product-top .wc-block-components-product-summary > :last-child {
	margin-bottom: 0;
}

.an-product-top .wc-block-components-product-summary > :first-child {
	margin-top: 0;
}

.an-product-top .wp-block-woocommerce-product-summary h4 {
	margin: var(--ab-flow, 16px) 0 var(--ab-flow-p, 14px);
	font-size: var(--an-h4, 18px);
	font-weight: 700;
	line-height: 1.35;
}

/* the quote and back buttons side by side (wrapping), 32px under the text */
.an-product-top .ab-product-actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-block-start: 32px !important;
}

/* the product tabs: --ab-flow-c under the buttons */
.an-product-top .ab-accordion {
	margin-block-start: var(--ab-flow-c, 32px) !important;
}

/* the gallery's zoom button: a 44px tap target (WooCommerce draws its magnifier for 36px) */
.an-product-top .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	width: 44px !important;
	height: 44px !important;
}

.an-product-top .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	top: 13px !important;
	left: 13px !important;
}

.an-product-top .woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
	top: 23px !important;
	left: 26px !important;
}

/* stacked (phones): the text column's blocks join the row (display: contents) so the gallery can sit between the
   name and the text; every block on the container's 20px edge */
@media (max-width: 768px) {
	.an-product-top.an-product-top {
		flex-wrap: wrap !important;
		gap: 0;
	}

	.an-product-top.an-product-top > .wp-block-column:last-child {
		display: contents;
	}

	.an-product-top > .wp-block-column:last-child > * {
		flex: 0 0 100%;
		min-width: 0;
		order: 3;
	}

	.an-product-top > .wp-block-column:last-child > :is(.wc-block-breadcrumbs, .wp-block-woocommerce-breadcrumbs) {
		order: 0;
	}

	.an-product-top > .wp-block-column:last-child > .an-product-title {
		order: 1;
	}

	.an-product-top.an-product-top > .wp-block-column:first-child {
		flex: 0 0 100% !important;
		order: 2;
		margin: 0 0 var(--ab-flow-c, 32px);
		padding: 0;
	}

	:root .an-product-top div.woocommerce-product-gallery.woocommerce-product-gallery {
		margin-bottom: 0;
	}

	.an-product-top .woocommerce-product-gallery__image > a > img {
		width: 100%;
		max-height: 280px;
		object-fit: contain;
	}

	.an-product-top .ab-product-actions {
		margin-block-start: 24px !important;
	}
}

/* the product lists below (optional extras, "Katso myös"): the section padding m; the two together share it */
.ab-section.an-product-extras,
.ab-section.an-product-related,
.ab-section.an-product-related.ab-plist--empty {
	padding-top: var(--ab-pad-m, 40px);
	padding-bottom: var(--ab-pad-m, 40px);
}

.ab-section.an-product-extras + .ab-section.an-product-related {
	padding-top: 0;
}

/* ---------------------------------------------------------------- shop and category pages (archive-product, taxonomy-product_cat) */

/* the breadcrumb, the title, the description and "Lue lisää" (the category's longer text) in the 760px text column
   (from 1025px in the left half); the product list follows with its own heading and the number of products below it
   (round 4: the separator and the results count above the list are gone from the templates, and so are their rules) */
.ab-section.an-archive-head {
	padding-top: calc(var(--ab-header-h, 72px) + var(--ab-pad-s, 24px));
	padding-bottom: 0;
}

.an-archive-head .ab-flow > .wp-block-query-title {
	margin: 0;
}

.an-archive-head .ab-flow > :is(.wp-block-query-title, .an-term-description, .an-term-extra) {
	max-width: var(--ab-text-width, 760px);
}

@media (min-width: 1025px) {
	.an-archive-head .ab-flow > :is(.wp-block-query-title, .an-term-description, .an-term-extra) {
		max-width: calc(50% - 20px);
	}
}

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

.an-term-description p {
	margin: 0 0 var(--ab-flow-p, 14px);
}

.an-term-description p:last-child {
	margin-bottom: 0;
}

.an-archive-head .ab-flow > .an-term-extra {
	margin-block-start: var(--ab-flow, 16px);
}

.an-archive-head .ab-flow > .wc-block-breadcrumbs,
.an-archive-head .ab-flow > .wp-block-woocommerce-breadcrumbs {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- accordion rows: core/details (FAQ items, also in .an-faq
   groups and the converted accordions .an-accordion) and the category's "Lue lisää" (.an-term-extra) */

/* hairline rows, a question row of at least 48px, a plain chevron that turns when the row is open; the dark variant
   inside navy sections */
:is(.wp-block-details, .an-term-extra) {
	--an-acc-line: #e3e5ea;
	--an-acc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--an-acc-focus: var(--wp--preset--color--accent, #01a6e6);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--an-acc-line);
	background: none;
	font-size: inherit;
}

/* the first row of a run also gets a line on top; rows of a run touch */
:is(.wp-block-details, .an-term-extra):not(:is(.wp-block-details, .an-term-extra) + *) {
	border-top: 1px solid var(--an-acc-line);
}

:root .wp-block-details.wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

/* questions are text: at most 760px wide in page content */
.wp-block-details:not(.alignwide, .alignfull) {
	max-width: var(--ab-text-width, 760px);
}

:is(.ab-bg-light, .has-light-background-color) :is(.wp-block-details, .an-term-extra) {
	--an-acc-line: rgba(27, 42, 87, 0.16);
}

:is(.is-dark, .has-navy-background-color) :is(.wp-block-details, .an-term-extra) {
	--an-acc-line: rgba(255, 255, 255, 0.2);
	--an-acc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:is(.wp-block-details, .an-term-extra) > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 56px;
	margin: 0;
	padding: 14px 0;
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 1025px) {
	:is(.wp-block-details, .an-term-extra) > summary {
		font-size: 17px;
	}
}

:is(.wp-block-details, .an-term-extra) > summary::-webkit-details-marker {
	display: none;
}

:is(.wp-block-details, .an-term-extra) > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var(--an-acc-chevron) center / 18px no-repeat;
	transition: transform 0.2s ease;
}

:is(.wp-block-details, .an-term-extra)[open] > summary::after {
	transform: rotate(180deg);
}

:is(.wp-block-details, .an-term-extra) > summary:focus {
	outline: none;
}

:is(.wp-block-details, .an-term-extra) > summary:focus-visible {
	outline: 2px solid var(--an-acc-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:is(.wp-block-details, .an-term-extra) > summary::after {
		transition: none;
	}
}

/* the panel: the text rhythm inside it, the body text's size; 24px below its last block */
.wp-block-details[open] {
	padding-bottom: 24px;
}

.an-term-extra > .an-term-extra__content {
	padding: 0 0 20px;
}

html :is(.wp-block-details > :not(summary), .an-term-extra__content > *) {
	margin-block: 0;
}

html :is(.wp-block-details > :not(summary) + *, .an-term-extra__content > * + *) {
	margin-block-start: var(--ab-flow-p, 14px);
}

html :is(.wp-block-details, .an-term-extra__content) :is(h2, h3, h4, h5, h6) {
	font-size: var(--an-h4, 18px);
	font-weight: 700;
	line-height: 1.3;
}

html :is(.wp-block-details, .an-term-extra__content) h2 {
	font-size: var(--wp--preset--font-size--medium);
}

html :is(.wp-block-details > :not(summary), .an-term-extra__content > *) + :is(h2, h3, h4, h5, h6) {
	margin-block-start: 24px;
}

html :is(.wp-block-details, .an-term-extra__content) > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 8px;
}

html :is(.wp-block-details, .an-term-extra__content) > * + :is(figure, .wp-block-table, .wp-block-image, .wp-block-columns, .wp-block-buttons, .wp-block-embed),
html :is(.wp-block-details, .an-term-extra__content) > :is(figure, .wp-block-table, .wp-block-image, .wp-block-columns, .wp-block-buttons, .wp-block-embed) + * {
	margin-block-start: 20px;
}

html :is(.wp-block-details, .an-term-extra__content) > :is(p, ul, ol) {
	max-width: var(--ab-measure, 68ch);
}

/* the rows of an FAQ group (core/group .an-faq) or of a converted accordion (.an-accordion) touch */
:root :is(.an-faq, .an-accordion) > .wp-block-details {
	margin-block: 0;
}

:is(.an-faq, .an-accordion) > :is(h2, h3) + .wp-block-details {
	margin-block-start: var(--ab-head-gap, 24px);
}

/* ---------------------------------------------------------------- plain text page (templates/page-plain.html) */

/* no hero and no title of its own (the text has its own h1): the content column at the content width's 1020px, the
   h1 s below the header, the section padding m below the text; the text at the body size with the text rhythm */
.an-page-plain {
	padding: calc(var(--ab-header-h, 72px) + var(--ab-pad-s, 24px)) 0 var(--ab-pad-m, 40px);
}

.an-page-plain > .an-page-plain__content {
	box-sizing: content-box;
	max-width: 1020px;
	margin-inline: auto;
	padding-inline: var(--ab-gutter, 20px);
	font-size: inherit;
	line-height: inherit;
}

.an-page-plain > .an-page-plain__content > * {
	margin-block: 0;
}

.an-page-plain > .an-page-plain__content > * + * {
	margin-block-start: var(--ab-flow-p, 14px);
}

.an-page-plain > .an-page-plain__content > * + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--ab-flow-c, 32px);
}

.an-page-plain > .an-page-plain__content > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--ab-flow, 16px);
}

.an-page-plain > .an-page-plain__content > h1 + * {
	margin-block-start: var(--ab-head-gap, 24px);
}

.an-page-plain > .an-page-plain__content > :is(p, ul, ol) {
	max-width: var(--ab-measure, 68ch);
}

/* (the text's own paragraphs and lists only, without weight: a block inside the text keeps its sizes, e.g. the stats'
   numbers and labels, and so does a paragraph style such as the lead) */
:where(.an-page-plain > .an-page-plain__content) > :is(p, ul, ol),
:where(.an-page-plain > .an-page-plain__content) > :is(ul, ol) li {
	font-size: inherit;
	line-height: inherit;
}

.an-page-plain > .an-page-plain__content img {
	margin: 0;
}

/* a picture in a paragraph (inline, in the middle of the line, its own size up to the column's width) */
.an-page-plain > .an-page-plain__content p > img {
	display: inline;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* ---------------------------------------------------------------- documents page (templates/page-sidebar.html, "Dokumentit") */

/* The "Dokumentit" pages (/suunnittelijat/, /sv/planerare/, /en/designers/): the standard hero (the title, the wave and
   the page's opening sentence as the lead, inc/content-lead.php), then the content at the section container's whole
   width, so the document list (vestelli/aineistot) gets the full row; the texts keep the readable 760px measure.
   (The template keeps its old name page-sidebar, which the pages store; it no longer has the blog sidebar.) */
.an-page-docs__content > :is(p, ul, ol, h1, h2, h3, h4, h5, h6) {
	max-width: var(--ab-text-width, 760px);
}

/* The document list (vestelli/aineistot, round 4):
   - a row without any file (the library has a few names with no PDF or DWG yet) is left out: it offered nothing to
     download; a product whose rows all lack a file keeps its title and text;
   - phones: the PDF / DWG buttons are 44px tap targets themselves (they were 34px high with a larger invisible tap area,
     8px apart), the rows a little taller around them, the columns 8px apart. */
.an-page-docs .sa-aineistot-wrap .sa-files-row:not(:has(.sa-file)) {
	display: none;
}

@media (max-width: 768px) {
	.an-page-docs .sa-aineistot-wrap {
		--sa-cell: 56px;
	}

	.an-page-docs .sa-aineistot-wrap .sa-files-row {
		min-height: 56px;
		column-gap: 8px;
		padding-block: 6px;
		padding-right: 8px;
	}

	.an-page-docs .sa-aineistot-wrap .sa-files-row .sa-file {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: var(--ab-tap, 44px);
	}

	.an-page-docs .sa-aineistot-wrap .sa-files-row .sa-file::after {
		content: none;
	}
}