/*
Theme Name: Avalon Nordic
Theme URI: https://avalonnordic.fi
Author: Kansleri.fi
Description: Avalon Nordicin lohkoteema (Gutenberg). 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.1.0
License: GNU General Public License v2 or later
Text Domain: avalon-nordic
*/

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

/* in-page links (the menu's #anchors, jump cards) stop 88px from the top: the fixed header's height as the page's
   scroll padding (it also keeps keyboard focus from hiding under the header) + 16px of air on the target */
html {
	scroll-padding-top: var(--ab-header-h, 72px);
}

.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: the layout's content width would let it overflow */
.is-layout-constrained > img {
	max-width: min(100%, var(--wp--style--global--content-size, 1310px));
}

/* Text sizes in three steps (phone <= 768px / tablet 769-1024px / desktop >= 1025px), not fluid, a little smaller
   and calmer since 2026-09-25: body 16 / 16 / 17px (line height 1.6), h1 28 / 34 / 42px, h2 23 / 28 / 34px, item
   names and h4 16 / 17 / 18px. h3 ("large") has the steps 17 / 20 / 22px (at 768 / 992px) without the switch; the
   new h3 (18 / 19 / 21px, bold, body class "ab-h3-v2") is on since the converter re-run of 2026-09-24.
   No text is under 13px (x-small). The doubled :root outweighs the global styles whatever their order. */
:root:root {
	--wp--preset--font-size--x-small: 13px;
	--wp--preset--font-size--regular: 17px;
	--wp--preset--font-size--medium: 18px;
	--wp--preset--font-size--large: 22px;
	--wp--preset--font-size--x-large: 34px;
	--wp--preset--font-size--xx-large: 42px;
}

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

	:root:root :is(h1, .ab-hero .wp-block-post-title) {
		line-height: 1.15;
	}

	:root:root :is(h2, .ab-card__title) {
		line-height: 1.2;
	}
}

@media (max-width: 992px) {
	:root:root {
		--wp--preset--font-size--large: 20px;
	}
}

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

/* narrow phones (at most 400px): h2 follows the screen, 22-25px (23.8px at 360), so a long compound such as
   "kaksoisviemäröintipaketeista" fits the 320px column (Chrome has no Finnish hyphenation; no word is split) */
@media (max-width: 400px) {
	:root:root {
		--wp--preset--font-size--x-large: clamp(21px, 6.2vw, 23px);
	}
}

/* h3 as a subheading (bold, 19 / 21 / 24px): switched on with the body class "ab-h3-v2" once the subtitle h3s are
   converted to the lead paragraph style. The switch is the constant AN_H3_V2 in functions.php (true: on); the
   editor gets the same rules from there. :where() keeps it below the components' own titles (product and card names). */
.ab-h3-v2 :where(h3) {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.ab-h3-v2 :where(h3) {
		font-size: 19px;
	}
}

@media (max-width: 768px) {
	.ab-h3-v2 :where(h3) {
		font-size: 18px;
	}
}

/* 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;
}

/* every underlined link has the same line (2px, --ab-underline): also links in tables, lists and plugins' texts
   (!important: the shorthand "text-decoration: underline" in more specific rules resets the thickness to auto) */
a {
	text-decoration-thickness: var(--ab-underline, 2px) !important;
	text-underline-offset: 0.15em;
}

/* links in running text are underlined (not buttons, cards or menus) */
:where(.ab-flow, .wp-block-post-content, .wp-block-column, .wp-block-group, .wp-block-details, .ab-accordion__body, .an-term-description, .an-term-extra__content) > :is(p, ul, ol) a:where(:not(.wp-element-button, .ab-btn, .button)) {
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 0.15em;
}

/* plain lists: a small indent (the browser's is 40px) */
:is(ul, ol).wp-block-list:not([class*="is-style-"]) {
	padding-inline-start: 1.25em;
}

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

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

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

/* The fixed header floats over the page; pages that do not start with a hero leave room for it, and their first
   section keeps its whole top padding below it (72px + the padding). */
.an-main {
	padding-top: var(--ab-header-h, 72px);
}

.page-template-page-hero .an-main,
.an-cover-first .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;
}

/* ...and when it has little top padding (none or xs), at least s: the text does not start right under the header.
   The same below a hero (a section that followed it with xs started 12px under the picture's edge). */
.an-main > .wp-block-post-content > .ab-section:first-child:is(.ab-pt-none, .ab-pt-xs),
.ab-hero + .ab-section:is(.ab-pt-none, .ab-pt-xs) {
	padding-top: var(--ab-pad-s);
}

/* ...and a light or white last section without bottom padding (e.g. the form on /fi/tarjous/) keeps s above the navy
   footer (the form box sat on it); a dark one runs into the dark footer as intended */
.an-main > .wp-block-post-content > .ab-section:last-child.ab-pb-none:not(.is-dark) {
	padding-bottom: var(--ab-pad-s);
}

/* classic content (pages not migrated to sections, e.g. /sv/avloppssystem/): its first heading or text s below the
   header, not flush with it */
.an-main > .wp-block-post-content > :is(h1, h2, h3, h4, p):first-child {
	margin-block-start: var(--ab-pad-s);
}

/* The title band (theme block avalon/title-band in page.html, page-cart.html and page-checkout.html): a page without a
   hero and without an h1 of its own (the quote, contact, price list, cart and checkout pages) starts with its title,
   the page h1 (48 / 38 / 30px), s below the header. A white first section follows it at a section title's distance
   (20 / 24 / 32px) instead of its own top padding; a coloured one keeps its padding. */
.an-title-band .an-title-band__title {
	max-width: var(--ab-text-width, 760px);
	margin: 0;
}

.an-main > .an-title-band + .wp-block-post-content > .ab-section.ab-bg-none:first-child {
	padding-top: var(--ab-head-gap);
}

/* 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;
}

/* The same text rhythm in core layouts as in the sections (blocks.css .ab-flow): 16px between blocks (the block
   gap), paragraphs and lists of one text 12px apart, 24 / 28 / 32px 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, 12px);
}

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

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

/* The quiz is styled here only (never in the plugin): the site's font, colours and sizes, aligned with the section
   container (no inset of its own), as high as the step on show (the plugin's 50vh, 450px, is gone), tighter spacing.
   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(--ab-heading, #012b55);
	--hmc-step-description-size: var(--wp--preset--font-size--regular);
	--hmc-step-description-color: var(--ab-body, #282828);
	--hmc-option-label-size: var(--wp--preset--font-size--regular);
	--hmc-option-label-color: var(--wp--preset--color--heading, #012b55); /* dark also in a dark section: on the tile */
	--hmc-option-description-size: 14px;
	--hmc-option-description-color: var(--ab-muted, #4a5563);
	--hmc-recommendation-title-size: var(--wp--preset--font-size--x-large);
	--hmc-recommendation-title-color: var(--ab-heading, #012b55);
	--hmc-recommendation-description-size: var(--wp--preset--font-size--regular);
	--hmc-recommendation-description-color: var(--ab-body, #282828);
	--hmc-swipe-options-gap: var(--ab-gap, 16px);
	/* sharp corners and minimal cards as everywhere on the site: no border or shadow, the choices as tint tiles
	   (the plugin's own settings print radius 16px and a shadow inline on the container) */
	--hmc-border-radius: 0px;
	--hmc-step-border-radius: 0px;
	--hmc-option-border-radius: 0px;
	--hmc-chat-option-border-radius: 0px;
	--hmc-chat-bot-border-radius: 0px;
	--hmc-chat-user-border-radius: 0px;
	--hmc-swipe-buy-button-border-radius: 0px;
	--hmc-option-border-width: 0px;
	--hmc-option-border-color: transparent;
	--hmc-option-box-shadow: none;
	--hmc-option-bg: var(--ab-tint, #eaf8f9);
	--hmc-option-hover-bg: #d9f1f3;
	--hmc-option-icon-bg: transparent;
	/* the icons as large in both quizzes: 108px (the plugin's box is 120px on the Finnish quiz with 6px of padding, 72px
	   on the Swedish one, whose drawings were half the Finnish size); the plugin's phone rule keeps 64px there */
	--hmc-option-image-height: 108px;
	/* the question's size: an h2 (a section heading); a subheading when the section's own heading is above it */
	--hmc-site-title-size: var(--wp--preset--font-size--x-large);
	--hmc-swipe-card-shadow: none;
	--hmc-swipe-card-border-color: transparent;
	--hmc-swipe-pagination-active-bg: var(--ab-navy, #002b56);
	/* the question's text to the tiles (and a result's heading to its content): two thirds of a section head's gap,
	   32px on desktop, 21px on tablets, 16px on phones: the question and its choices read as one */
	--hmc-site-head-gap: max(16px, calc(var(--ab-head-gap, 24px) * 2 / 3));
	/* the contact form of a result (the Swedish quiz): sharp, navy button as the site's forms (assets/css/forms.css) */
	--hmc-native-label-color: var(--ab-heading, #012b55);
	--hmc-native-input-border-radius: 0px;
	--hmc-native-button-bg: var(--ab-navy, #002b56);
	--hmc-native-button-border-color: var(--ab-navy, #002b56);
	--hmc-native-button-radius: 0px;
	--hmc-native-button-font-size: 16px;
	--hmc-swipe-reset-text-color: var(--ab-navy, #002b56);
	--hmc-swipe-reset-hover-color: var(--ab-navy, #002b56);
	font-family: var(--wp--preset--font-family--roboto);
}

/* the form fields and buttons in the site's font (browsers give them Arial and the text area monospace) */
.hmc-form-container :is(input, textarea, select, button) {
	font-family: inherit;
}

/* the section holding the quiz: 100px above and below on desktop (--ab-pad-m: 72px on tablets, 40px on phones),
   whatever padding the block stores (0-48px on the pages). Doubled classes: the theme's "section after the hero" rules
   above must not win. */
.ab-section.ab-section.ab-section:has(.hmc-form-container.hmc-form-container) {
	padding-top: var(--ab-pad-m);
	padding-bottom: var(--ab-pad-m);
}

/* the quiz below the section's own heading and text (/fi/kaksoisviemarointi/): a new part of the section, as a heading
   after text (blocks.css: 32 / 44 / 56px above it, not the 16-20px between paragraphs), and its question a subheading
   (the h3 size, 18 / 19 / 21px), not a second h2 right under the section's */
.ab-flow.ab-flow > :not(h1, h2, h3, h4, h5, h6, p.has-small-font-size) + .hmc-form-container {
	margin-block-start: var(--ab-flow-c, 32px);
}

.ab-flow > :not(h1, h2, h3, h4, h5, h6, p.has-small-font-size) + .hmc-form-container > * {
	--hmc-site-title-size: 21px;
}

@media (max-width: 1024px) {
	.ab-flow > :not(h1, h2, h3, h4, h5, h6, p.has-small-font-size) + .hmc-form-container > * {
		--hmc-site-title-size: 19px;
	}
}

@media (max-width: 768px) {
	.ab-flow > :not(h1, h2, h3, h4, h5, h6, p.has-small-font-size) + .hmc-form-container > * {
		--hmc-site-title-size: 18px;
	}
}

/* a small label above the quiz ("Valinta-apuri" on /fi/jatevesijarjestelmat/) belongs to its question: 8px above it */
.ab-flow.ab-flow > p.has-small-font-size + .hmc-form-container {
	margin-block-start: 8px;
}

/* the quiz takes no room of its own above the question and below the tiles: the section's padding is the whole 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, also when the recommendations' pictures load after the slider measured it (the
   slider's own height, set once per step, let them run over the next section): the other steps take no room */
.hmc-form-container.hmc-form-container .hmc-swiper .swiper-wrapper {
	align-items: flex-start;
	height: auto !important;
}

/* (hidden also from the keyboard: Tab went into the next, invisible steps and the slider jumped to them unanswered) */
.hmc-form-container.hmc-form-container .hmc-swiper .swiper-slide:not(.swiper-slide-active) {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* the footer (step numbers and "start again", both hidden on the Finnish quiz) is empty space unless it shows something */
.hmc-form-container .hmc-swiper-shell {
	gap: 0;
}

.hmc-form-container.hmc-form-container .hmc-swiper-footer {
	padding: 0;
}

.hmc-form-container.hmc-form-container .hmc-swiper-footer:has(.hmc-swiper-reset:not(:empty)),
.hmc-form-container.hmc-form-container:not(.hmc-step-numbers--hidden) .hmc-swiper-footer {
	padding-top: var(--ab-flow-c, 32px);
}

/* "start again" (the Swedish quiz shows it under the result) as a text link at the left edge, like the content above */
.hmc-form-container.hmc-form-container .hmc-swiper-footer:has(.hmc-swiper-reset:not(:empty)) {
	align-items: flex-start;
}

.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;
	color: var(--ab-navy, #002b56) !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline !important;
	text-decoration-thickness: var(--ab-underline, 2px) !important;
	text-underline-offset: 3px;
}

/* the contact form of a two-column result (desktop, the Swedish quiz) fills its column: it ended 35px short of the
   section's right edge (the plugin's 520px form in a 555px column); one column (the plugin's up to 900px) keeps 520px */
@media (min-width: 901px) {
	.hmc-form-container.hmc-form-container .hmc-contact-form-two-col-right .hmc-rec-native-form {
		max-width: none;
	}
}

/* the result's contact form button: no lift or dimming on hover, the site buttons' darker navy */
.hmc-form-container.hmc-form-container .hmc-native-submit.hmc-native-submit.hmc-native-submit:is(:hover, :focus-visible):not(:disabled) {
	background: #00436b;
	filter: none;
	transform: none;
}

.hmc-form-container.hmc-form-container .hmc-native-submit:focus-visible {
	outline: 2px solid var(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

.hmc-form-container.hmc-form-container .hmc-step-intro.hmc-step-intro {
	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, 12px) !important;
	font-size: var(--hmc-site-title-size) !important;
	line-height: 1.2 !important;
	letter-spacing: 0;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* the question and its text close to the tiles, as a section head to its content (the plugin's h3 had 50px of
   padding below it on top of the margin: about 100px of empty space) */
.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, var(--ab-head-gap, 24px));
	padding: 0 !important;
	font-size: var(--wp--preset--font-size--regular) !important;
	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;
	line-height: 1.3;
}

/* a label or description that needs two lines (narrow tablet tiles) breaks into even lines */
.hmc-form-container:not([data-chooser-type="chat"]) :is(.hmc-option-label, .hmc-option-description) {
	text-wrap: balance;
}

/* the tile's air even around its content: the pictures have about 14 % of empty margin inside them, so the tile has
   less padding above the icon (22px + the margin, about 37px) than below the text (34px), and the text sits 8px under
   the icon (the plugin's 20px all round and the icon box's padding left 42px above, 38px between and 24px below).
   A tile is 218px high on desktop, as the product categories' picture tiles below the quiz on /fi/tuotteet/. */
.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option.hmc-option {
	padding: 22px 16px 34px !important;
}

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

/* tablets: four tiles of 150-170px side by side; the centred text gets their whole width (12px at the sides, not
   16 + 10px), so "Vapaa-ajan asunto" keeps to one line at 820px */
@media (max-width: 1024px) {
	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option.hmc-option {
		padding-inline: 12px !important;
	}

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

/* phones (the plugin's two columns up to 767px): 12px above, 20px below; a lone last choice (three choices) takes the
   whole row, as the last row is always full in the product categories */
@media (max-width: 767px) {
	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option.hmc-option {
		padding: 12px 12px 20px !important;
	}

	.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]):not(.hmc-layout-preset--soft_cards) .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, which then looked chosen in the next step) */
@media (hover: none) {
	.hmc-form-container > * {
		--hmc-option-hover-bg: var(--ab-tint, #eaf8f9);
	}
}

/* the question and its text as wide as a section head */
.hmc-form-container .hmc-step-intro {
	max-width: var(--ab-text-width, 760px);
}

/* the icons in the tile's own colour, in every state (tint, hover, the selected tile's darker shade, white in a light
   section): the pictures' near-white squares (#fdfefe PNGs, #f6f8f7 JPGs on the Swedish quiz) are lifted to white and
   multiplied into the tile, so only the drawing shows */
.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-option-image {
	background: transparent;
}

.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;
}

/* 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(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

/* the result: aligned with the section like the questions, its heading and text as a section head */
.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(--hmc-site-head-gap, var(--ab-head-gap, 24px)) !important;
	font-size: var(--hmc-site-title-size) !important;
	line-height: 1.2;
	letter-spacing: 0;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.hmc-form-container.hmc-form-container:not([data-chooser-type="chat"]) .hmc-recommendations-header:has(+ .hmc-rec-description) {
	margin-bottom: var(--ab-flow-p, 12px) !important;
}

.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, var(--ab-head-gap, 24px));
	color: var(--ab-body, #282828);
	font-size: var(--wp--preset--font-size--regular) !important;
	line-height: 1.6 !important;
}

.hmc-form-container.hmc-form-container .hmc-recommendation-item:last-child {
	margin-bottom: 0;
}

/* the contact result's form placeholder (Leadoo before marketing cookies): the tint card without the consent plugin's
   grey 1px frame, as in the rows (rows.css): no borders on cards */
.hmc-form-container .kncc-iframe-placeholder.kncc-iframe-placeholder:not(.kncc-iframe-placeholder--has-thumb) {
	border: 0;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items.hmc-rec-content-items {
	margin-top: 0;
	gap: var(--ab-gap, 20px) !important;
	align-items: stretch;
}

/* the recommended products (and pages, not used yet) as the site's product cards and the product categories: the
   picture on a tint tile (white in a light section), the text below it on the section's own background; no card
   background, border, shadow or hover lift */
.hmc-form-container.hmc-form-container .hmc-rec-content-items :is(.hmc-product-card, .hmc-content-card) {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transition: none;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items :is(.hmc-product-card, .hmc-content-card):hover {
	box-shadow: none;
	transform: none;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items :is(.hmc-product-image-wrapper, .hmc-card-thumbnail-wrapper) {
	aspect-ratio: 4 / 3;
	background: var(--ab-tint, #eaf8f9);
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items :is(.hmc-product-image-link, .hmc-product-thumbnail) {
	width: 100%;
	height: 100%;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-thumbnail img.hmc-card-thumbnail {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	padding: 7% 10%;
	object-fit: contain;
	mix-blend-mode: multiply; /* white picture backgrounds take the tint */
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-content {
	padding: 16px 20px 0;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-title {
	margin: 0 0 6px;
	overflow-wrap: normal;
	hyphens: manual;
	text-wrap: pretty;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-title a {
	color: var(--ab-heading, #012b55);
	font-size: var(--ab-item-size, 17px) !important;
	font-weight: 700;
	line-height: 1.3 !important;
	text-decoration: none;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-excerpt {
	margin: 0 0 12px;
	color: var(--ab-muted, #4a5563);
	font-size: 15px !important;
	line-height: 1.5 !important;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-price {
	margin: 0 0 16px;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-price-current {
	color: var(--ab-heading, #012b55);
}

/* the button at the foot of each card (the cards of a row end at the same line), no lift or dimming on hover */
.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-buy-btn {
	min-height: var(--ab-btn-h, 44px);
	box-sizing: border-box;
	margin-top: auto;
	padding: 10px 24px;
	border: 0;
	font-weight: 700;
	transition: background-color 0.2s ease;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-buy-btn:is(:hover, :focus-visible) {
	background-color: #00436b;
	filter: none;
	transform: none;
}

.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-buy-btn:focus-visible {
	outline: 2px solid var(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

/* tablets and phones: rows as the site's product cards there, one under the other (the picture 96px on the tint at the
   left, the text beside it), not 4:3 pictures of a whole screen's width (or two and a lone third on tablets) */
@media (max-width: 1024px) {
	.hmc-form-container.hmc-form-container .hmc-rec-content-items.hmc-rec-content-items {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items > .hmc-product-card {
		display: grid !important;
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: start !important;
		gap: 16px;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-image-wrapper {
		aspect-ratio: 1;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-thumbnail img.hmc-card-thumbnail {
		padding: 8%;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-content.hmc-product-content {
		align-self: stretch;
		padding: 0 !important;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-title {
		margin-bottom: 4px;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-excerpt {
		margin-bottom: 8px;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	.hmc-form-container.hmc-form-container .hmc-rec-content-items .hmc-product-price {
		margin-bottom: 12px;
	}
}

/* ---------------------------------------------------------------- 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 (the text centred); words are hyphenated, not split at any letter */
.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(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

/* 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);
}

/* turquoise button: navy text (7.2:1) */
.wp-block-button.is-style-accent > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-accent > .wp-block-button__link:focus {
	background-color: var(--ab-accent-hover, #28b5bd);
	border-color: var(--ab-accent-hover, #28b5bd);
	color: var(--wp--preset--color--navy);
}

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

/* small button, e.g. "Takaisin kauppaan" in the empty cart: less padding, still a 44px tap target (it was 33px on
   tablets and desktops) */
.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;
}

/* "Sivu otsikolla": a page written in the editor, as the old theme showed one (title, 1020px column, headings
   not bold) */
.an-page-title :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
}

/* ...and its text rhythm: the sections' flow (16px between blocks, 12px between paragraphs), headings 24 / 28 / 32px
   below the text before them, text columns at most 68 characters wide */
.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);
}

.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);
}

.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);
}

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

/* the separator as wide as the text column's running text, from its left edge */
.an-page-title .wp-block-post-content.wp-block-post-content > .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	max-width: var(--ab-measure);
	margin-inline: 0;
}

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

/* articles and references: the text styles of the old article layout */
.an-article .wp-block-post-content > :is(h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: 40px;
}

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

.an-article .wp-block-post-content > :is(p, ul, ol) + :is(ul, ol) {
	margin-block-start: 10px;
}

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

.an-article .wp-block-post-content h4 {
	font-size: 17px;
}

/* the article at a readable measure: its column is 68 characters of the body text wide (about 675px at 18px; the old
   870px column held about 95), centred under the centred article title */
.an-article > .ab-container {
	max-width: calc(var(--ab-measure, 68ch) + 2 * var(--ab-gutter));
}

@media (max-width: 768px) {
	.an-article .wp-block-post-content h4 {
		font-size: 16px;
	}
}

/* the image lightbox's "enlarge" button stays a 20px icon but is a 44px tap target (the image itself opens it too) */
.wp-lightbox-container button.lightbox-trigger::after {
	content: "";
	position: absolute;
	inset: -12px;
}

/* the default separator: a hairline across the text column, from its left edge like the text (the old short centred
   mark floated beside the left-aligned text, e.g. between the document groups on /fi/tuki/); 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 var(--ab-line, #e3e8ee);
}

.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);
}

/* (classic content in the constrained layout, e.g. the terms pages: its text runs the whole content width, and core
   centres every child) */
.is-layout-constrained > .wp-block-separator:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull) {
	max-width: var(--wp--style--global--content-size, 1310px);
}

: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): the site's notice look (the paragraph style "Huomautus", base.css) */
.an-notice {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 14px 16px 14px 18px;
	border-left: 4px solid var(--ab-accent, #30cbd3);
	border-radius: 0 var(--ab-radius-s, 8px) var(--ab-radius-s, 8px) 0;
	background: var(--ab-tint, #eaf8f9);
	color: var(--ab-heading, #012b55);
	font-weight: 700;
}

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

/* Card: white box with rounded corners (quiz-like cards, stats) */
.is-style-an-card {
	background: #fff;
	border-radius: 0;
}

/* 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: 50px 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;
}


/* 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: 16px;
	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 {
	padding-left: 38px;
}

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

.an-post-grid .wp-block-post-title {
	margin-top: 30px;
	font-size: 20px;
	line-height: 1.3;
}

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

.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%;
}

/* Columns stack on phones (<= 768px) like the section grids. Core stacks them below 782px, so at 769-781px they go
   back side by side (a render filter copies each column's width to --an-col-basis). */
@media (min-width: 769px) and (max-width: 781px) {
	.wp-block-columns.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	.wp-block-columns.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="--an-col-basis"] {
		flex-basis: var(--an-col-basis) !important;
		flex-grow: 0;
	}
}

/* Beaver Builder rows that are left with one column (a lone column, or its sibling columns are empty) kept the old
   column's width: the text in a 40 % strip beside an empty half. An empty column takes no room at any width (on
   phones it left a ghost gap), and from 769px the one column left spans the row as a text column at most 760px wide,
   on the container's left edge (wide content inside it, such as tables or product cards, gets the whole row). The
   footer's spacer column is outside main and keeps working. (functions.php marks empty columns "an-col-empty".) */
.an-main .wp-block-columns > .wp-block-column.an-col-empty {
	display: none;
}

@media (min-width: 769px) {
	.an-main .wp-block-columns.wp-block-columns:not(:has(> .wp-block-column:not(.an-col-empty) ~ .wp-block-column:not(.an-col-empty))) > .wp-block-column:not(.an-col-empty) {
		flex-basis: 100% !important;
		flex-grow: 1;
		max-width: var(--ab-text-width, 760px);
		margin-inline: 0;
	}

	.an-main .wp-block-columns.wp-block-columns:not(:has(> .wp-block-column:not(.an-col-empty) ~ .wp-block-column:not(.an-col-empty))) > .wp-block-column:has(.wp-block-table, .wp-block-gallery, .wp-block-columns, .wp-block-embed, .ab-pcards, .ab-grid, .hmc-form-container, .kncc-iframe-placeholder, iframe) {
		max-width: none;
	}
}

/* Logo groups in the text (a column of only resized pictures, e.g. the trust marks "Luotettava kumppani" and
   "Suomalaista palvelua" on /fi/avaimet-kateen-palvelu/): on phones side by side, each at most 120px wide (they were
   200px, one below the other, 330px of logos) */
@media (max-width: 768px) {
	.an-main .wp-block-column:has(> .wp-block-image.is-resized + .wp-block-image.is-resized):not(:has(> :not(.wp-block-image.is-resized))) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 24px;
	}

	.an-main .wp-block-column:has(> .wp-block-image.is-resized + .wp-block-image.is-resized):not(:has(> :not(.wp-block-image.is-resized))) > .wp-block-image {
		flex: 0 1 120px;
		margin: 0;
	}

	.an-main .wp-block-column:has(> .wp-block-image.is-resized + .wp-block-image.is-resized):not(:has(> :not(.wp-block-image.is-resized))) > .wp-block-image img {
		width: 100% !important;
		max-width: 120px;
		height: auto !important;
	}
}

/* Contact band callouts */
.an-callout .wp-block-button.is-style-outline > .wp-block-button__link {
	font-weight: 400;
	padding: 15px 30px;
}

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

/* 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;
	}
}

/* The cookie consent plugin's placeholder (e.g. the Leadoo form before marketing cookies are accepted): a tint card in
   the site's look, dark text also inside dark sections, 14px text, the button navy and a 44px tap target (the
   plugin's grey card, 13px grey text and slate-indigo button were the only off-palette UI on the form pages). The
   classes are doubled: the plugin's stylesheet prints after this one. The video variant (a thumbnail behind the text)
   keeps the plugin's look. */
.kncc-iframe-placeholder {
	box-sizing: border-box;
	max-width: 100%;
	color: var(--ab-body, #282828);
}

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

.kncc-iframe-placeholder.kncc-iframe-placeholder:not(.kncc-iframe-placeholder--has-thumb) {
	gap: 12px;
	padding: 24px 20px;
	border-radius: 0;
	background: var(--ab-tint, #eaf8f9);
}

/* no grey 1px frame around the placeholder anywhere (the plugin's border; no borders on cards) */
.kncc-iframe-placeholder.kncc-iframe-placeholder {
	border: 0;
}

.kncc-iframe-placeholder.kncc-iframe-placeholder:not(.kncc-iframe-placeholder--has-thumb) p {
	max-width: 60ch;
	color: var(--ab-body, #282828);
	font-size: 14px;
	line-height: 1.5;
}

.kncc-iframe-placeholder.kncc-iframe-placeholder:not(.kncc-iframe-placeholder--has-thumb) a {
	color: var(--ab-navy, #002b56);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.kncc-iframe-placeholder.kncc-iframe-placeholder .kncc-iframe-accept {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 0;
	background: var(--ab-navy, #002b56);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	white-space: normal;
}

.kncc-iframe-placeholder.kncc-iframe-placeholder .kncc-iframe-accept:is(:hover, :focus-visible) {
	background: #00436b;
	color: #fff;
}

.kncc-iframe-placeholder.kncc-iframe-placeholder .kncc-iframe-accept:focus-visible {
	outline: 2px solid var(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

/* Old WPBakery / Salient buttons (a.nectar-button) in content the converter has not reached yet (page 89, the SV
   pages): an outline button, 44px, on a line of its own below its text (they read as bold inline links) */
a.nectar-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	min-height: 44px;
	margin-top: 12px;
	padding: 10px 24px;
	border: 1px solid currentColor;
	border-radius: 0;
	color: var(--ab-heading, #012b55);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.nectar-button:hover {
	background-color: rgba(0, 43, 86, 0.06);
	text-decoration: none;
}

.is-dark a.nectar-button {
	color: #fff;
}

.is-dark a.nectar-button:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

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

.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;
}

/* the footer's own spacing, whatever the pattern stores (l / l): m above its columns and as much below them to the
   copyright line (whose section adds xs), so the columns sit in the middle (it was 40 above and 136 below after a
   dark section) */
.an-site-footer > .ab-section:first-child {
	padding-top: var(--ab-pad-band, var(--ab-pad-m));
	padding-bottom: calc(var(--ab-pad-band, var(--ab-pad-m)) - var(--ab-pad-xs));
}

/* a page that ends in a dark section (e.g. the contact band, /fi/meista/): a hairline marks where the footer starts.
   The footer keeps its full padding there too (100px on desktops, 2026-09-25: the user wants the same padding as
   the sections, it was s = 48px after a dark section) */
body:has(.an-main > .is-dark:last-child, .an-main > :last-child > .is-dark:last-child) .an-site-footer > .ab-section:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* desktops: 100px between the footer's columns (2026-09-25). The columns with content are as wide as it (with the
   editor's widths "Asiakaskokemukset" broke inside the word at 1201px), the empty spacer column takes the rest. */
@media (min-width: 1025px) {
	.an-site-footer .ab-container > .wp-block-columns {
		column-gap: 100px;
	}

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

	/* the logo column as wide as the logo shows (its file is 350px wide) */
	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:first-child {
		flex: 0 1 200px !important;
		min-width: 0;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:not(:has(*)) {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* the footer pattern: logo column (logo + partner logo and key flag), an empty spacer column, address, links,
   languages. The logo is the first image of the logo column, in a group (the converter before its rule "spacing") or
   on its own (since the re-run of 2026-09-24: the group only carried a clamp() margin) */
.an-site-footer .wp-block-column > .wp-block-group:first-child {
	margin-bottom: 0 !important;
}

.an-site-footer .wp-block-column > .wp-block-columns {
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 24px;
	margin: 32px 0 0;
}

.an-site-footer .wp-block-column > .wp-block-columns > .wp-block-column {
	flex: 0 0 auto !important;
}

/* the logos keep their proportions in narrow columns; the partner logo and the key flag equally high */
.an-site-footer .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* (the images carry inline sizes from the editor) */
.an-site-footer .wp-block-column > .wp-block-columns .wp-block-image img {
	width: auto !important;
	height: 44px !important;
}

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

/* the copyright line */
.an-site-footer .ab-section:last-child {
	padding-bottom: var(--ab-pad-xs);
}

.an-site-footer .ab-section:last-child p {
	margin: 0;
}

/* tablets: the columns in a grid without the empty spacer column */
@media (min-width: 769px) and (max-width: 1024px) {
	.an-site-footer .ab-container > .wp-block-columns {
		display: grid;
		grid-template-columns: 1.3fr 1.2fr 1fr 0.7fr;
		gap: var(--ab-gap);
	}

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

	.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 > :is(.wp-block-group, .wp-block-image):first-child img {
		width: 180px !important;
	}

	/* link lists: each link a 44px tap target (tablets are touch screens; the links were 17px high) */
	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:has(> p > a):not(:has(> .wp-block-heading)) > p {
		margin: 0;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:has(> p > a):not(:has(> .wp-block-heading)) > p > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* phones (at most 650px): the logos in one row and smaller, the address, then the links in two columns of 44px
   rows */
@media (max-width: 768px) {
	.an-site-footer .ab-container > .wp-block-columns {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

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

	.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 > :is(.wp-block-group, .wp-block-image):first-child img {
		width: 150px !important;
	}

	.an-site-footer .wp-block-column > .wp-block-columns {
		gap: 16px;
		margin: 0;
	}

	.an-site-footer .wp-block-column > .wp-block-columns .wp-block-image img {
		height: 36px !important;
	}

	/* link lists: two columns, each link a 44px row */
	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:has(> p > a):not(:has(> .wp-block-heading)) {
		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-container > .wp-block-columns > .wp-block-column:has(> p > a):not(:has(> .wp-block-heading)) + .wp-block-column:has(> p > a) {
		margin-top: -24px;
		border-top: 0;
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:has(> p > a):not(:has(> .wp-block-heading)) > p {
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.an-site-footer .ab-container > .wp-block-columns > .wp-block-column:has(> p > a):not(:has(> .wp-block-heading)) > p > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.an-site-footer .ab-section:last-child {
		padding-bottom: 24px;
	}
}

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

/* previous and next article: two full-width rows between hairlines, each a small label ("Edellinen" / "Seuraava",
   core's translation, functions.php drops its colon) above the title, the arrow at the row's outer end and the whole
   row the link (side by side in the article column both titles wrapped and read as one run-on line) */
.an-post-nav.an-post-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin-top: 40px;
	border-top: 1px solid var(--ab-line, #e3e8ee);
}

.an-post-nav > * {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 64px;
	margin: 0;
	padding-block: 12px;
	border-bottom: 1px solid var(--ab-line, #e3e8ee);
}

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

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

.an-post-nav a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--ab-heading, #012b55);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

/* the whole row is the link (the arrow sits beside it) */
.an-post-nav a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.an-post-nav a:hover .post-navigation-link__title {
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 0.15em;
}

.an-post-nav a:focus-visible {
	outline: none;
}

.an-post-nav > :has(a:focus-visible) {
	outline: 2px solid var(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

.an-post-nav .post-navigation-link__label {
	color: var(--ab-muted, #4a5563);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.an-post-nav :is(.wp-block-post-navigation-link__arrow-previous, .wp-block-post-navigation-link__arrow-next) {
	flex: none;
	margin: 0;
	color: var(--ab-heading, #012b55);
	font-size: 20px;
	line-height: 1;
}

/* article hero (templates/single.html): the page titles' size (48 / 38 / 30px), centred on the photo. Behind the title
   a navy band: 0.55 where the text is, fading out 80px above and below it, over the template's 0.25 darkening (the
   white house siding and grey rock behind the white title had 1.7-3:1; now about 5:1 even on a white photo). On desktop
   the band fades out towards the sides too. Height: 70% of the window on desktop (the old article layout, hero.css),
   the pages' medium hero on tablets, at most 460px on phones (it was 70%, 630px at 390). */
:root:root .an-post-hero h1.wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	text-wrap: balance;
}

.ab-hero.an-post-hero .ab-hero__content {
	position: relative;
}

.ab-hero.an-post-hero .ab-hero__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -96px;
	right: -100vw;
	bottom: -96px;
	left: -100vw;
	background: linear-gradient(180deg, rgba(0, 43, 86, 0) 0, rgba(0, 43, 86, 0.55) 80px, rgba(0, 43, 86, 0.55) calc(100% - 80px), rgba(0, 43, 86, 0) 100%);
	pointer-events: none;
}

@media (min-width: 1025px) {
	.ab-hero.an-post-hero .ab-hero__content::before {
		right: -15%;
		left: -15%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	:root .ab-hero.an-post-hero {
		min-height: min(clamp(420px, 56vh, 540px), 55vh, 560px);
	}
}

@media (max-width: 768px) {
	:root .ab-hero.an-post-hero {
		min-height: min(70vh, 460px);
	}

	:root:root .an-post-hero h1.wp-block-post-title {
		line-height: 1.15;
	}
}

/* search field in the archive hero */
.an-hero-search {
	max-width: 400px;
	margin-top: 20px;
}

.an-hero-search .wp-block-search__input {
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	font-size: 15px;
}

.an-hero-search .wp-block-search__button {
	margin-left: 8px;
	padding: 10px 24px;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 0;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: 15px;
}

/* product page: the gallery and the texts in two halves of the content container, on the same edges as every other
   page (x = 65 at 1440px; the old 1450px row started at 40), the texts a little in from the middle */
.an-product-top {
	gap: 0;
}

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

@media (min-width: 769px) {
	/* (core's column rule is .wp-block-columns:not(...) > .wp-block-column) */
	:root .an-product-top > .wp-block-column {
		box-sizing: border-box;
		flex-basis: 50%;
	}

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

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

/* (the section's own s padding below the header: 72px + s) */
@media (min-width: 993px) {
	.an-product-top > .wp-block-column:last-child {
		padding: 0 0 40px 48px;
	}
}

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

.an-product-top .wp-block-woocommerce-breadcrumbs.has-font-size,
.an-product-top .wp-block-woocommerce-breadcrumbs .woocommerce-breadcrumb {
	font-size: 13px !important;
}

:root:root .an-product-top h1.an-product-title {
	margin: 40px 0 50px;
	font-size: 36px;
	line-height: 1.1;
}

.an-product-top .wp-block-woocommerce-product-summary {
	margin: 0 0 30px;
}

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

.an-product-top .wp-block-woocommerce-product-summary h4 {
	margin: 10px 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
}

/* the quote and back buttons one below the other */
.an-product-top .ab-product-actions {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 60px;
}

.an-product-top .ab-product-actions .wp-element-button {
	padding: 12px 32px;
	border-width: 2px;
	font-weight: 500;
}

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

@media (max-width: 768px) {
	:root:root .an-product-top h1.an-product-title {
		margin: 20px 0 30px;
		font-size: 27px;
	}

	.an-product-top .wp-block-woocommerce-product-summary h4 {
		font-size: 16px;
	}
}

/* stacked (phones): the breadcrumb and the product's name, then its picture (at most 280px high, the thumbnails below
   it), then the texts, buttons and details (the picture came after 1.5 screens of text). The text column's blocks join
   the row (display: contents) so the gallery can sit between the name and the text. */
@media (max-width: 768px) {
	.an-product-top.an-product-top {
		gap: 0;
	}

	.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 > .wp-block-woocommerce-breadcrumbs {
		order: 0;
	}

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

	.an-product-top > .wp-block-column:first-child {
		order: 2;
		margin: 0 0 var(--ab-flow-c);
	}

	.an-product-top > .wp-block-column:last-child > .wp-block-woocommerce-product-summary {
		margin-top: 0;
	}

	/* (WooCommerce's ".woocommerce div.product div.images" gives it 2em) */
	: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;
	}
}

.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	font-size: 13px;
}

/* breadcrumb links: a 44px tap area without moving the text */
.woocommerce-breadcrumb a {
	display: inline-block;
	margin-block: -13px;
	padding-block: 13px;
}

/* 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;
}

.an-term-description {
	max-width: 640px;
}

.an-term-description p {
	margin: 0 0 10px;
}

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

/* shop and category pages: the breadcrumb, then the title, the description and "Lue lisää" (the category's longer text,
   closed at first; its row look: the accordion, plugin accordion.css) in the 760px text column, from 1025px in the
   left half (at 769-1024px the half was a 358px strip beside an empty half). Below them the products under a quiet
   h2 "Tuotteet" (the product names h3), and the number of products under the list. */
.an-archive-head .woocommerce-breadcrumb {
	font-size: 14px;
	line-height: 1.45;
}

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

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

.an-archive-head .ab-flow > .an-term-extra {
	margin-block-start: 20px;
}

@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-products.an-archive-products .ab-plist__head {
	margin-bottom: var(--ab-flow, 16px);
	font-size: var(--ab-item-size, 17px);
	line-height: 1.3;
}

/* (WooCommerce sets the size of ".woocommerce .woocommerce-result-count") */
.an-archive-count .ab-flow p.woocommerce-result-count {
	margin: 0;
	color: var(--ab-muted, #4a5563);
	font-size: 14px;
}