/**
 * ABT Batteri — theme styles.
 *
 * Values here are taken from computed styles measured on the source site at 1440px
 * and 390px (see capture/measurements.json and capture/nav-measurements.json), not
 * from reading the original plugin CSS. The root font size is 17px, so 1rem = 17px
 * and the odd-looking rem values below are exact conversions of measured pixels.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--abt-primary: #22192a;
	--abt-primary-hover: #372f3e;
	--abt-accent: #38196b;
	--abt-primary-deep: #271f35;
	--abt-drawer-menu: #1d1d20;
	--abt-surface: #eaeaea;
	--abt-base: #fff;
	--abt-text: #393939;
	--abt-text-invert: #fff;
	--abt-mega-text: #d9d9d9;
	--abt-hairline: rgba(255, 255, 255, 0.1);
	--abt-rule: rgba(0, 0, 0, 0.1);

	/* The source tracks all text slightly tight: -0.34px at 17px. */
	--abt-tracking: -0.02em;

	--abt-content: 1200px;
	--abt-gutter: 1rem; /* 17px */
	--abt-col-pad: 0.667rem; /* 11.35px — measured inset from grid cell to card copy */
	--abt-header-h: 50px;
	--abt-toggle-h: 48px;
	--abt-drawer-w: 320px;
	--abt-breakpoint: 960px;
}

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

.alignwide {
	max-width: 1400px;
	margin: 0 auto;
}
.product-group {
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.product-group:hover {
	border-color: #614889;
  	box-shadow: 0 18px 40px -24px rgba(34, 25, 42, .6);
  	transform: translateY(-3px);
}
.contact-info {
	margin-top: 0px; 
}
.contact-info a {
	text-decoration: none; 
}
.contact-info a:hover {
	text-decoration: underline; 
}
.contact-form label {
	font-size: 14px !important;
	color: #ffffffbd;
}
.contact-form .form-inputs {
	display: flex; 
	flex-wrap: wrap;
	column-gap: 20px; 
}
.contact-form .form-inputs > p {
	flex: 0 0 calc(50% - 10px);
}
.contact-form .form-inputs input,
.contact-form textarea {
	margin-top: 5px; 
	background: #FFFFFF0D !important;
	border: 1px solid #FFFFFF33 !important;
	color: #ffffff !important;
}
.contact-form input[type="submit"] {
	width: 100%;
	text-transform: uppercase; 
	font-weight: bold; 
	font-size: 16px !important; 
}

@media (max-width: 781px) {
	.alignwide {
		padding: 0px !important;	
	}
	.alignwide .wp-block-column {
		padding-left: 10px !important;
		padding-right: 10px !important; 
	}
	.usp-box {
		border: none; 
	}
	.contact-form form {
		padding: 20px !important; 
	}
	.contact-form .form-inputs {
		display: block; 
	}
	.contact-form .form-inputs > p {
		width: 100%;
	}
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 17px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--abt-base);
	color: var(--abt-text);
	font-family: Lato, helvetica, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--abt-tracking);
	font-kerning: normal;
	font-variant-ligatures: common-ligatures contextual;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--abt-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	text-decoration: none;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.588rem;
	color: var(--abt-primary);
	line-height: 1.2;
	letter-spacing: var(--abt-tracking);
}

/* Sizes measured on the source; see capture/measurements.json. */
h1 { font-size: 2.9412rem; font-weight: 300; line-height: 1; }   /* 50px */
h2 { font-size: 2.4706rem; font-weight: 300; line-height: 1.1; } /* 42px */
h3 { font-size: 1.4118rem; font-weight: 300; line-height: 1.2; } /* 24px */
h4 { font-size: 1.7647rem; font-weight: 400; line-height: 1.1; } /* 30px */
h5 { font-size: 1rem; font-weight: 400; }
h6 { font-size: 0.8824rem; font-weight: 400; }

/*
 * PageLines scaled headings to the width of the section they sat in: the same h2
 * rendered at 42px in a 600px column and 34px in a 380px one. A container query
 * reproduces that without hard-coding a size per page.
 */
.wp-block-column,
.abt-single__aside { container-type: inline-size; }

@container (max-width: 480px) {
	h2 { font-size: 2rem; }   /* 34px */
	h3 { font-size: 1.1765rem; }
}

/*
 * PageLines' sizing spans (`<span data-type="size" class="h2">`) are a second type
 * scale, unrelated to the source's real heading elements — every value below is
 * measured off the rendered source, and they differ from the tags they map to:
 *
 *   span.h1   51px / 300   where a real <h1> is 49-50px
 *   span.h2   34px / 300   where a real <h2> is 37-45px
 *   span.h4   20.4px / 600 where a real <h4> is 30px / 400  <- the missing bold
 *   span.p    20px / 400   lead paragraph
 *
 * The importer keeps the source's class on the block, so the scale survives editing
 * and the two scales stay independent.
 */
.abt-size-h1,
.abt-size-h2,
.abt-size-h3,
.abt-size-h4 {
	line-height: 1.1;
	font-weight: 300;
}

.abt-size-h1 { font-size: 3rem; }      /* 51px */
.abt-size-h2 { font-size: 2rem; }      /* 34px */
.abt-size-h4 { font-size: 1.2rem; font-weight: 600; } /* 20.4px */

.abt-size-p {
	font-size: 1.1765rem; /* 20px */
	font-weight: 400;
	line-height: 1.5;
}

/* The one container the source sizes differently: /produkter/'s intro. */
.abt-legacy-start-products .abt-size-h2 { font-size: 2.4706rem; } /* 42px */

/* The source's body rhythm: 10px between paragraphs, lists indented 40px. */
p { margin: 0 0 0.588rem; }

/* Blank lines carried over from the source's copy: they occupy a line of space
   rather than collapsing to nothing. */
p:empty::before,
p > br:only-child { content: ""; display: inline-block; }

ul, ol { margin: 0 0 0.588rem; padding-left: 2.353rem; }
li { margin-bottom: 0; }

:focus-visible {
	outline: 2px solid var(--abt-accent);
	outline-offset: 2px;
}

.abt-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.abt-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 700000;
	padding: 0.5rem 1rem;
	background: var(--abt-base);
	color: var(--abt-primary);
}

.abt-skip-link:focus {
	top: 0.5rem;
}

/* ---------------------------------------------------------------- layout */

.abt-container {
	max-width: var(--abt-content);
	margin-inline: auto;
	padding-inline: var(--abt-gutter);
}

/* Full-bleed band with a centred inner column, the shape every PageLines
   container had. Vertical rhythm defaults to the measured 2vw. */
.abt-band {
	padding-block: 2vw;
}

.abt-band--flush { padding-block: 0; }
.abt-band--surface { background: var(--abt-surface); }
.abt-band--primary { background: var(--abt-primary); color: var(--abt-text-invert); }

/* ---------------------------------------------------------------- header */

/* Measured: the source header is `position: static` and scrolls away with the
   page. PageLines adds a "do-sticky" class but never pins the element. */
.abt-header {
	z-index: 500;
	background: var(--abt-primary);
}

/* The flyout is positioned against this box, so it spans the container's inner
   width (1166px at 1440px) exactly as the source's does. */
.abt-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--abt-header-h);
}

.abt-header__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding-right: 0.5rem;
	text-decoration: none;
}

.abt-header__brand img {
	display: block;
	height: 41px;
	width: auto;
}

.abt-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

/* Measured on the source: a 164px outer box holding a 150px form inset by 7px,
   so the search icon keeps 7px of clearance from the header's right edge. */
.abt-header__search {
	flex: 0 0 164px;
	width: 164px;
	margin-left: auto;
}

/* -- desktop navigation ------------------------------------------------- */

.abt-nav,
.abt-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.abt-nav {
	display: flex;
	align-items: stretch;
}

.abt-nav li { margin: 0; }

.abt-nav > li > a,
.abt-nav > li > .abt-nav__toggle {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	height: var(--abt-header-h);
	padding: 15px 20px;
	border: 0;
	background: transparent;
	box-shadow: inset 1px 0 0 0 var(--abt-hairline);
	color: var(--abt-text-invert);
	font: inherit;
	font-size: 0.7059rem; /* 12px */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--abt-tracking);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* The source keeps 20px on both sides even on the item with a caret. */
.abt-nav > li > a,
.abt-nav > li > .abt-nav__toggle { text-align: left; }

.abt-nav > li > a:hover,
.abt-nav > li > a:focus,
.abt-nav > li.abt-open > a,
.abt-nav > li.current-menu-item > a,
.abt-nav > li.current-menu-parent > a,
.abt-nav > li.current-menu-ancestor > a,
.abt-nav > li.current_page_item > a,
.abt-nav > li.current_page_parent > a,
.abt-nav > li.abt-open > .abt-nav__toggle,
.abt-nav > li > .abt-nav__toggle:hover {
	background: var(--abt-primary-hover);
}

/* The source puts `transition: all 0.002s ease-in-out` on links, buttons and
   cards — near-instant, but present, so hover states do not step. */
.abt-nav > li > a,
.abt-nav > li > .abt-nav__toggle,
.abt-mega a,
.abt-boxes__item,
.abt-footer .widget a,
.wp-block-button__link,
.abt-card,
.abt-product-grid__link {
	transition: all 0.002s ease-in-out;
}

.abt-nav__caret {
	width: 0.55rem;
	height: 0.55rem;
	flex: 0 0 auto;
	fill: currentColor;
	opacity: 0.85;
}

/* -- mega flyout -------------------------------------------------------- */

/* The source renders the Produkter menu as cascading 291px columns: level 1 in
   the left column, each deeper level opening in the column to its right, and
   item descriptions occupying the final column. */
.abt-mega {
	position: absolute;
	top: var(--abt-header-h);
	left: 0;
	right: 0;
	z-index: 500;
	min-height: 538px;
	overflow: hidden;
	background: var(--abt-primary-hover);
	/* The source draws a 1px border on three sides in the panel's own colour, so
	   it occupies space but is invisible. Reproducing it in the text colour drew
	   a visible outline the source does not have. */
	border-bottom: 1px solid var(--abt-primary-hover);
	border-left: 1px solid var(--abt-primary-hover);
	border-right: 1px solid var(--abt-primary-hover);
	color: var(--abt-mega-text);
	font-size: 0.7059rem;

	/* Closed state, measured on the source. */
	margin-top: 20px;
	opacity: 0;
	visibility: hidden;
	transition: margin-top 0.3s ease-in, opacity 0.3s ease-in, visibility 0.3s ease-in;
}

.abt-nav > li.abt-open > .abt-mega {
	margin-top: 0;
	opacity: 1;
	visibility: visible;
	overflow: hidden auto;
	z-index: 20;
}

/* Every column is absolute against .abt-mega, so list items must stay static —
   otherwise a nested column would position against its parent row instead of
   the panel. The walker sets each column's `left` inline. */
/* No overflow here. A column is positioned outside its parent column's box, so
   any overflow value other than visible turns the parent into a clipping context
   and every deeper column disappears — while still reporting correct geometry,
   which makes it look like a content problem rather than a CSS one. Scrolling
   belongs on .abt-mega, which is what the source does. */
.abt-mega__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 291px;
}

.abt-mega ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.abt-mega li { position: static; margin: 0; }

/*
 * Row metrics measured on the source: 54px tall, 17px type on a 24px line, 15px
 * and 20px of padding, no borders. Rows are transparent so the panel colour shows
 * through, and the active row goes *darker* rather than lighter.
 */
.abt-mega a,
.abt-mega .abt-mega__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 15px 20px;
	border: 0;
	color: var(--abt-mega-text);
	font-size: 1rem; /* 17px */
	line-height: 24px;
	text-decoration: none;
}

.abt-mega li.abt-has-children > a,
.abt-mega li.abt-has-children > .abt-mega__label { padding-right: 25px; }

.abt-mega a:hover,
.abt-mega a:focus,
.abt-mega li.abt-open > a,
.abt-mega li.abt-open > .abt-mega__label,
.abt-mega li.current-menu-item > a,
.abt-mega li.current-menu-ancestor > a {
	background: var(--abt-primary);
	color: #eee;
}

/* The explanatory copy that filled the flyout's last column. Comes from the
   menu item's Description field. */
/* The description column: 14px on a 16px line, same padding as a row, and no
   background of its own. */
.abt-mega__note {
	padding: 15px 20px;
	color: var(--abt-mega-text);
	font-size: 0.8235rem; /* 14px */
	line-height: 16px;
}

.abt-mega__note p { margin: 0 0 0.3rem; }
.abt-mega__note p:last-child { margin-bottom: 0; }

/* A note column is only as tall as its copy, unlike a list column. */
.abt-mega__panel--note { bottom: auto; }

.abt-mega__note-item { list-style: none; }

.abt-mega__chevron {
	width: 0.5rem;
	height: 0.5rem;
	flex: 0 0 auto;
	fill: currentColor;
	opacity: 0.7;
}

/*
 * The source renders a "Stäng" retractor but collapses it to zero height on
 * desktop — it is one of UberMenu's responsive-only controls. Escape and clicking
 * away both close the panel, so nothing is lost by matching that.
 */
.abt-mega__close {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Deeper columns stay hidden until their parent row is the active one, and fade
   in the same way the panel itself does. */
.abt-mega__panel:not(.abt-mega__panel--1) {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
	pointer-events: none;
}

.abt-mega li.abt-open > .abt-mega__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* -- header search ------------------------------------------------------ */

/* The field's background lives on the form, not the input: the button then sits
   inside the field rather than beside it, which is what keeps the icon 20px in
   from the field's right edge instead of 6px. */
.abt-search {
	position: relative;
	width: 150px;
	margin: 0 7px;
	background: #f9f9f9;
	border-radius: 0;
}

.abt-search input[type="search"] {
	width: 100%;
	height: 33px;
	padding: 8px 40px 8px 15px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #333;
	font-family: inherit;
	font-size: 0.8235rem; /* 14px */
	letter-spacing: var(--abt-tracking);
}

/* 40px wide inside the 150px field, so the glyph centres 20px from its edge. */
.abt-search button {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 33px;
	border: 0;
	background: transparent;
	color: #666;
	cursor: pointer;
}

.abt-search button svg {
	width: 0.8235rem;
	height: 0.8235rem;
	fill: currentColor;
}

/* -- mobile bar + drawer ------------------------------------------------ */

/* Measured: fixed, z-index 500000, and it overlays the page rather than pushing
   it down — the hero starts underneath it, as on the source. */
.abt-mobile-bar {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500000;
	align-items: center;
	height: var(--abt-toggle-h);
	padding-inline: 10px;
	background: var(--abt-primary);
	color: #eee;
	font-size: 0.9412rem; /* 16px, measured */
	text-align: center;
	transition: transform 0.5s;
}

.abt-mobile-bar__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: var(--abt-toggle-h);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.abt-mobile-bar__toggle svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.abt-mobile-bar__title {
	flex: 1 1 auto;
	margin: 0;
	color: inherit;
	font-size: 0.9412rem; /* 16px */
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	/* Keep the title optically centred despite the left toggle. */
	padding-right: 33px;
}

.abt-mobile-bar__title a { color: inherit; text-decoration: none; }

.abt-drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 600000;
	width: var(--abt-drawer-w);
	max-width: 95%;
	height: 100%;
	overflow: hidden auto;
	background: var(--abt-primary);
	color: #eee;
	font-size: 0.7647rem; /* 13px */
	transform: translateX(-100%);
	transition: transform 0.5s; /* measured on the source */
	visibility: hidden;
}

.abt-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Measured on the source: a 25px-padded block holding the logo at 100x83, which
   puts the first menu row at y=137. */
.abt-drawer__head {
	display: block;
	width: 150px;
	margin: 0 auto;
	padding: 25px;
	line-height: 16.9px;
}

.abt-drawer__head img { width: 100px; height: 83px; }

.abt-drawer nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--abt-drawer-menu);
}

.abt-drawer nav li { position: relative; margin: 0; }

.abt-drawer nav a,
.abt-drawer nav .abt-drawer__label,
.abt-drawer nav .abt-mega__note {
	display: block;
	padding: 15px 25px;
	/* The source draws no rules between drawer rows; the 1px pair here added 2px to
	   every one of the 34 rows. */
	border: 0;
	background: var(--abt-primary);
	color: #eee;
	font-size: 0.7647rem;
	line-height: 1.6;
	text-decoration: none;
	text-transform: uppercase;
}

.abt-drawer nav .abt-mega__note {
	text-transform: none;
	background: var(--abt-primary-deep);
	line-height: 1.4;
}

.abt-drawer nav .abt-drawer__label {
	color: rgba(238, 238, 238, 0.75);
	cursor: default;
}

/* The source highlights both the current row and the branch leading to it. */
.abt-drawer nav li.current-menu-item > a,
.abt-drawer nav li.current_page_item > a,
.abt-drawer nav li.current-menu-ancestor > a,
.abt-drawer nav li.current-menu-ancestor > .abt-drawer__label,
.abt-drawer nav li.current_page_ancestor > a,
.abt-drawer nav a:hover,
.abt-drawer nav a:focus {
	background: var(--abt-accent);
}

/* The right-hand submenu toggle overlaps the row, so keep copy clear of it. */
.abt-drawer li.abt-has-children > a,
.abt-drawer li.abt-has-children > .abt-drawer__label { padding-right: 60px; }

/* Nested levels collapse as an accordion; the toggle sits on the right edge. */
.abt-drawer__sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 51px;
	height: 51px;
	border: 0; /* the source's activation control has no divider */
	background: var(--abt-primary);
	color: #eee;
	cursor: pointer;
}

.abt-drawer__sub-toggle svg {
	width: auto;
	height: 0.7647rem; /* 13px, as the source's chevron renders */
	fill: currentColor;
}

/*
 * The source's drawer does not expand submenus in place: each level is its own
 * 320px panel parked off the left edge, sliding over the rows below when its parent
 * is activated, with a back control at the foot of the panel. Reproducing that is
 * what makes the mobile menu behave the same, and it is why the rows need neither
 * an indent nor a lighter background to be readable.
 */
.abt-drawer__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	width: 100%;
	background: #25252a; /* measured: the panel behind the rows, a touch lighter */
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.5s, visibility 0.5s;
}

.abt-drawer li.abt-open > .abt-drawer__sub {
	transform: translateX(0);
	visibility: visible;
}

/* Slower than a tap: without this the panel can be seen sliding back out. */
@media (prefers-reduced-motion: reduce) {
	.abt-drawer__sub { transition: none; }
}

/* Deeper levels are ordinary sentence case on the source, unlike the top level. */
.abt-drawer__sub > li > a,
.abt-drawer__sub > li > .abt-drawer__label { text-transform: none; }

.abt-drawer__sub > li > .abt-drawer__label { color: #eee; }

/* The back control: a left chevron on the source's darker retract row. */
.abt-drawer__retract { position: static; }

.abt-drawer__back {
	display: block;
	width: 100%;
	padding: 15px 25px;
	border: 0;
	background: var(--abt-primary-deep);
	color: #eee;
	text-align: left;
	cursor: pointer;
}

.abt-drawer__back svg {
	width: auto;
	height: 0.7647rem;
	fill: currentColor;
	transform: scaleX(-1); /* chevron-right mirrored; the source uses fa-chevron-left */
}

/* No progressive indent: every level is its own full-width panel, so the source
   keeps all four at the same 25px inset. */

.abt-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 599999;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.abt-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

body.abt-drawer-open { overflow: hidden; }

@media (max-width: 959px) {
	.abt-header { display: none; }
	.abt-mobile-bar { display: flex; }
	.abt-hide-mobile { display: none !important; }

	/* The bar is fixed and 48px tall, but the source only offsets the page by
	   32px, so the top of the hero sits behind it. Measured on the source. */
	body { padding-top: 32px; }

	/* Stacked columns keep their gutter, and the empty offset column collapses. */
	.wp-block-columns > .wp-block-column { padding-inline: var(--abt-gutter); }
	.wp-block-columns > .wp-block-column:empty { display: none; }
}

@media (min-width: 960px) {
	.abt-drawer,
	.abt-drawer-backdrop { display: none; }
	.abt-hide-desktop { display: none !important; }
}

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

.abt-footer {
	background: var(--abt-primary);
	color: var(--abt-text-invert);
	/* Measured: 29px above and below the widget row at 1440px. */
	padding-block: 2vw;
}

.abt-footer__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--abt-gutter);
}

.abt-footer__widgets {
	flex: 0 0 75%;
	max-width: 75%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.abt-footer__widgets > .widget { padding-inline: var(--abt-gutter); }

/*
 * The source nests two levels of padding in the footer: 2vw on the band and a
 * further 17px on the widget section, which is what makes it 277px tall rather
 * than 242px. On phones it only has the outer one.
 */
@media (min-width: 960px) {
	.abt-footer__widgets,
	.abt-footer__brand { padding-block: var(--abt-gutter); }
}

.abt-footer__brand {
	flex: 0 0 25%;
	max-width: 25%;
	text-align: center;
}

.abt-footer__brand img {
	/* The source sizes this at 7vw: 101px at 1440px, 27px at 390px. Kept exact
	   at the client's request; DEFECTS.md records that the phone size is very
	   small and worth revisiting. */
	height: 7vw;
	width: auto;
}

.abt-footer .widget {
	margin-bottom: 1.7rem;
	color: var(--abt-text-invert);
	font-size: 0.85rem; /* 14.45px */
	line-height: 1.3;
}

.abt-footer .widget :where(h1, h2, h3, h4, h5, h6),
.abt-footer .widgettitle,
.abt-footer .wp-block-heading {
	margin: 0 0 1rem;
	color: var(--abt-text-invert);
	font-size: 0.8824rem; /* 15px */
	font-weight: 700;
	line-height: 1.1;
}

.abt-footer .widget p { margin: 0 0 1rem; }
.abt-footer .widget p:last-child { margin-bottom: 0; }

.abt-footer .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.abt-footer .widget li { margin-bottom: 0.33rem; } /* 5.6px, measured */

.abt-footer .widget a {
	color: var(--abt-text-invert);
	text-decoration: none;
}

.abt-footer .widget a:hover,
.abt-footer .widget a:focus { text-decoration: underline; }

@media (max-width: 959px) {
	.abt-footer { padding-block: 1.7rem; }

	.abt-footer__inner { flex-direction: column; }

	.abt-footer__widgets,
	.abt-footer__brand {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
	}

	.abt-footer__widgets { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- cover / page hero */

/* core/cover carries every hero. Measured on the source: the page-title band and
   the front-page hero use the same 80px display size; only the band height
   differs. The inner column also needs the container's 17px gutter, which
   core/cover does not apply on its own. */
/* contentSize (1166px) already constrains the children; the inner container only
   needs to span the full width so its constrained children centre correctly. */
.wp-block-cover .wp-block-cover__inner-container { width: 100%; }

.wp-block-cover .wp-block-heading,
.wp-block-cover h1,
.wp-block-cover h2 {
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: var(--abt-tracking);
}

.abt-hero--display h1,
.abt-hero--display .wp-block-heading,
.abt-hero--page h1,
.abt-hero--page .wp-block-heading {
	font-size: 4.7059rem; /* 80px */
	margin-bottom: 0.588rem;
}

.abt-hero--display p,
.abt-hero--page p {
	font-size: 1.1765rem; /* 20px */
	line-height: 1.5;
	color: var(--abt-text-invert);
	margin-bottom: 0;
}

@media (max-width: 959px) {
	.abt-hero--display h1,
	.abt-hero--display .wp-block-heading { font-size: 2.0588rem; /* 35px */ }

	.abt-hero--page h1,
	.abt-hero--page .wp-block-heading { font-size: 2.3529rem; /* 40px */ }

	.abt-hero--display p,
	.abt-hero--page p { font-size: 0.9412rem; /* 16px */ }

	/* On phones the source hero is content-height, not min-height driven. */
	.wp-block-cover.abt-hero--display,
	.wp-block-cover.abt-hero--page {
		min-height: 0 !important;
		padding-block: var(--abt-gutter);
	}
}

/* ------------------------------------------------------------ media-text */

/* PageLines' "hero" section: image one side, copy the other, button below. */
.wp-block-media-text.abt-split {
	grid-template-columns: 50% 1fr;
	gap: 0;
	column-gap: 0;
	padding-block: var(--abt-gutter); /* measured: 17px above and below */
}

/* The image sits 17px inside its half, matching the grid gutter. */
.abt-split .wp-block-media-text__media { padding-left: var(--abt-gutter); }

/* Measured: the copy column runs 778..1229 inside a 720..1303 cell, so 58px of
   padding on the left and 74px on the right. That inset is what makes the
   heading wrap onto two lines as it does on the source. */
.abt-split .wp-block-media-text__content {
	padding-left: 3.412rem;  /* 58px */
	padding-right: 4.353rem; /* 74px */
}

.abt-split .wp-block-media-text__content h2,
.abt-split .wp-block-media-text__content .wp-block-heading {
	font-size: 2.64rem; /* 44.88px */
	font-weight: 300;
	line-height: 1.1;
	margin-bottom: 1rem;
	color: var(--abt-text);
}

.abt-split .wp-block-media-text__content p {
	color: #767676;
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 959px) {
	/*
	 * Selectors need three classes here. core/media-text ships
	 * `.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media`,
	 * which outranks a two-class theme rule and keeps the image above the copy —
	 * the opposite of the source's mobile order.
	 */
	.wp-block-media-text.abt-split.is-stacked-on-mobile,
	.wp-block-media-text.abt-split {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.wp-block-media-text.abt-split.is-stacked-on-mobile .wp-block-media-text__content,
	.wp-block-media-text.abt-split .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 1;
		padding: 1.176rem 0 0;
	}

	.wp-block-media-text.abt-split.is-stacked-on-mobile .wp-block-media-text__media,
	.wp-block-media-text.abt-split .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 2;
		padding-left: 0;
		text-align: center;
	}

	/* Measured: 288px wide and centred, not full-bleed. */
	.abt-split .wp-block-media-text__media img {
		width: 288px;
		max-width: 100%;
		margin-inline: auto;
	}

	.abt-split .wp-block-media-text__content h2,
	.abt-split .wp-block-media-text__content .wp-block-heading {
		font-size: 1.8824rem; /* 32px */
		padding-top: 20px; /* measured */
	}

	/* Measured: 257px of copy inside a 356px column, at 16px on a 24px line. */
	.wp-block-media-text.abt-split.is-stacked-on-mobile .wp-block-media-text__content,
	.wp-block-media-text.abt-split .wp-block-media-text__content {
		padding-inline: 2.912rem; /* 49.5px */
	}

	.abt-split .wp-block-media-text__content p {
		font-size: 0.9412rem; /* 16px */
		line-height: 1.5;
	}
}

/* ----------------------------------------------------- outline button style */

/* The "Läs mer" treatment: hairline box on a light background. */
.wp-block-button.is-style-abt-outline .wp-block-button__link,
.abt-button--outline {
	padding: 9.8px 21px;
	border: 1px solid var(--abt-rule);
	border-radius: 4px;
	background: transparent;
	color: rgba(0, 0, 0, 0.7);
	font-size: 0.8235rem; /* 14px */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--abt-tracking);
	text-decoration: none;
	white-space: nowrap;
}

.wp-block-button.is-style-abt-outline .wp-block-button__link:hover,
.abt-button--outline:hover {
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------- feature boxes */

/*
 * Card metrics measured on the source: 41px above the icon, 24px between the
 * icon and the title, 5px under the title, 8.5px side padding (half the grid
 * gutter). Rows butt together — the spacing comes from the cards' own padding.
 */
.abt-boxes {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(var(--abt-boxes-cols, 3), minmax(0, 1fr));
	text-align: center;
}

.abt-boxes__item {
	display: block;
	position: relative;
	/* Measured: 41px above the media and 41px below the copy. */
	padding: 2.412rem var(--abt-col-pad);
	color: inherit;
	text-decoration: none;
}



/* A linked card: the title's link stretches over the whole card, so the card is
   clickable without wrapping the copy in an anchor. Links inside the copy sit
   above the overlay and stay clickable. */
.abt-boxes__item--linked { position: relative; }

.abt-boxes__link {
	color: inherit;
	text-decoration: none;
}

.abt-boxes__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.abt-boxes__link--bare { display: block; }

.abt-boxes__item--linked:hover .abt-boxes__link,
.abt-boxes__link:focus-visible { text-decoration: underline; }

.abt-boxes__text a {
	position: relative;
	z-index: 1;
}

.abt-boxes__media {
	display: block;
	margin-bottom: 1.412rem; /* 24px */
	line-height: 1;
}

.abt-boxes__icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: var(--abt-boxes-icon, 50px);
	fill: var(--abt-box-color, var(--abt-accent));
	vertical-align: middle;
}

.abt-boxes__image {
	display: inline-block;
	width: var(--abt-boxes-image, 80px);
	height: var(--abt-boxes-image, 80px);
	object-fit: cover;
	opacity: var(--abt-boxes-opacity, 1);
}

.abt-boxes--round .abt-boxes__image { border-radius: 50%; }

.abt-boxes--std .abt-boxes__image {
	width: var(--abt-boxes-image, 250px);
	height: auto;
	object-fit: contain;
}

/* PageLines sized card titles per section by rules that do not reproduce
   cleanly, so each instance carries its measured size; this is the fallback. */
.abt-boxes__title {
	margin: 0 0 0.294rem; /* 5px */
	color: #000;
	font-size: var(--abt-boxes-title, 2rem); /* 34px */
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: var(--abt-tracking);
}

.abt-boxes__text {
	color: #000;
	font-size: 1rem;
	line-height: 1.5;
}

/* The source does not underline the links inside a card. */
.abt-boxes__text a { text-decoration: none; }
.abt-boxes__text a:hover,
.abt-boxes__text a:focus { text-decoration: underline; }

.abt-boxes__text > :last-child { margin-bottom: 0; }

/* Icon or image beside the copy instead of above it. */
.abt-boxes--left { text-align: left; }

.abt-boxes--left .abt-boxes__item {
	display: flex;
	align-items: flex-start;
	gap: 1.412rem; /* 24px */
	/* Measured: a card with its media beside the copy is inset 17px, not the 41px
	   the stacked variant uses. */
	padding-block: var(--abt-gutter);
	text-align: left;
}

.abt-boxes--left .abt-boxes__media {
	flex: 0 0 auto;
	margin-bottom: 0;
	min-width: var(--abt-boxes-icon, 40px);
}

.abt-boxes--left .abt-boxes__body { flex: 1 1 auto; min-width: 0; }

.abt-boxes--left .abt-boxes__title { font-size: var(--abt-boxes-title, 1.4118rem); }

.abt-boxes--left .abt-boxes__icon { font-size: var(--abt-boxes-icon, 40px); }

/* Seller contact cards on product pages, from a synced pattern. Each sits in its
   own 17px-inset section on the source, and the email and phone links get their
   icon from the href so the copy stays plain rich text. */
.abt-sellers { padding-block: var(--abt-gutter); }

.abt-sellers .abt-boxes__text a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

.abt-sellers .abt-boxes__text a:hover { text-decoration: underline; }

.abt-sellers .abt-boxes__text a::before {
	content: "";
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--abt-link-icon) center / contain no-repeat;
	mask: var(--abt-link-icon) center / contain no-repeat;
}

.abt-sellers .abt-boxes__text a[href^="mailto:"] {
	--abt-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cg transform='translate(0 1536) scale(1 -1)'%3E%3Cpath d='M1792 826v-794q0 -66 -47 -113t-113 -47h-1472q-66 0 -113 47t-47 113v794q44 -49 101 -87q362 -246 497 -345q57 -42 92.5 -65.5t94.5 -48t110 -24.5h1h1q51 0 110 24.5t94.5 48t92.5 65.5q170 123 498 345q57 39 100 87zM1792 1120q0 -79 -49 -151t-122 -123 q-376 -261 -468 -325q-10 -7 -42.5 -30.5t-54 -38t-52 -32.5t-57.5 -27t-50 -9h-1h-1q-23 0 -50 9t-57.5 27t-52 32.5t-54 38t-42.5 30.5q-91 64 -262 182.5t-205 142.5q-62 42 -117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5 -47t47.5 -113z'/%3E%3C/g%3E%3C/svg%3E");
}

.abt-sellers .abt-boxes__text a[href^="tel:"] {
	--abt-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cg transform='translate(0 1536) scale(1 -1)'%3E%3Cpath d='M1408 296q0 -27 -10 -70.5t-21 -68.5q-21 -50 -122 -106q-94 -51 -186 -51q-27 0 -53 3.5t-57.5 12.5t-47 14.5t-55.5 20.5t-49 18q-98 35 -175 83q-127 79 -264 216t-216 264q-48 77 -83 175q-3 9 -18 49t-20.5 55.5t-14.5 47t-12.5 57.5t-3.5 53q0 92 51 186 q56 101 106 122q25 11 68.5 21t70.5 10q14 0 21 -3q18 -6 53 -76q11 -19 30 -54t35 -63.5t31 -53.5q3 -4 17.5 -25t21.5 -35.5t7 -28.5q0 -20 -28.5 -50t-62 -55t-62 -53t-28.5 -46q0 -9 5 -22.5t8.5 -20.5t14 -24t11.5 -19q76 -137 174 -235t235 -174q2 -1 19 -11.5t24 -14 t20.5 -8.5t22.5 -5q18 0 46 28.5t53 62t55 62t50 28.5q14 0 28.5 -7t35.5 -21.5t25 -17.5q25 -15 53.5 -31t63.5 -35t54 -30q70 -35 76 -53q3 -7 3 -21z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 959px) {
	.abt-boxes {
		grid-template-columns: repeat(var(--abt-boxes-cols-mobile, 1), minmax(0, 1fr));
	}

	.abt-boxes__title { font-size: 1.2941rem; /* 22px */ }
	.abt-boxes--left .abt-boxes__title { font-size: 1.1765rem; }
}

/* ----------------------------------------------------------- product table */

/*
 * The per-category product list. Measured on the source: three equal columns in a
 * 600px half-width box, 17px type, headings left/centre/right, rows about 50px
 * tall separated by a hairline, article numbers in grey.
 */
.abt-product-table { margin-bottom: 2vw; }

.abt-product-table__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.abt-product-table th,
.abt-product-table td {
	padding: 0 var(--abt-gutter);
	width: 33.333%;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border: 0;
	vertical-align: middle;
}

.abt-product-table th {
	height: 60px;
	color: var(--abt-text);
	border-bottom: 1px solid #e5e5e5;
}

.abt-product-table td {
	height: 50px;
	border-bottom: 1px solid #efefef;
	color: #8f8f8f;
}

.abt-product-table__article { text-align: left; }
.abt-product-table__voltage { text-align: center; }
.abt-product-table__capacity { text-align: right; }

.abt-product-table td a {
	color: #8f8f8f;
	text-decoration: none;
}

.abt-product-table td a:hover,
.abt-product-table td a:focus {
	color: var(--abt-primary);
	text-decoration: underline;
}

/* The archive intro is block content, so it brings its own container. */
.abt-archive__intro > .wp-block-group { padding-inline: var(--abt-gutter); }

@media (max-width: 959px) {
	.abt-product-table th,
	.abt-product-table td { padding-inline: 0.5rem; }
}

/* ------------------------------------------------------------ product grid */

.abt-product-grid {
	display: grid;
	grid-template-columns: repeat(var(--abt-grid-cols, 3), minmax(0, 1fr));
	gap: var(--abt-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.abt-product-grid__item { margin: 0; }

.abt-product-grid__link {
	display: block;
	height: 100%;
	background: var(--abt-base);
	color: var(--abt-text);
	text-decoration: none;
	border: 1px solid var(--abt-rule);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.abt-product-grid__link:hover,
.abt-product-grid__link:focus {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.abt-product-grid__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--abt-surface);
}

.abt-product-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1.294rem;
}

.abt-product-grid__body { padding: 1rem 1.294rem 1.294rem; }

.abt-product-grid__title {
	margin: 0 0 0.2rem;
	color: var(--abt-primary);
	font-size: 1.1765rem;
	font-weight: 400;
	line-height: 1.25;
}

.abt-product-grid__count {
	color: #767676;
	font-size: 0.8235rem;
}

@media (max-width: 959px) {
	.abt-product-grid { grid-template-columns: repeat(var(--abt-grid-cols-mobile, 2), minmax(0, 1fr)); }
}

@media (max-width: 559px) {
	.abt-product-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- content typography */

.abt-content > :last-child { margin-bottom: 0; }

.abt-content h2 { margin-top: 1.412rem; }
.abt-content h3,
.abt-content h4 { margin-top: 0.882rem; } /* 15px */

.abt-content :where(h2, h3, h4):first-child { margin-top: 0; }

.abt-content img { height: auto; }

.abt-content figure { margin: 0 0 1.4rem; }

/* -- specification tables ---------------------------------------------- */

/*
 * Measured on the source: horizontal rules only, no vertical borders and no
 * striping, 8px cell padding, an 18px line height and 18px below the table.
 */
.abt-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	margin-bottom: 1.059rem; /* 18px */
}

.abt-content th,
.abt-content td,
.wp-block-table figure td,
.wp-block-table figure th,
.wp-block-table td,
.wp-block-table th {
	padding: 8px;
	/* core/table's stylesheet sets a border on all four sides at a higher
	   specificity; the source draws only a top rule per row. */
	border: 0 none;
	border-top: 1px solid #ddd;
	line-height: 1.059; /* 18px */
	text-align: left;
	vertical-align: middle;
}

/* Only content tables (core/table) bold their headings. Scoped away from
   .abt-product-table, whose headings the source renders at 400 — the broader
   `.abt-content thead th` outranked the block's own font-weight and made
   ARTIKEL.NR / SPÄNNING / KAPACITET bold. */
.wp-block-table thead th { font-weight: 700; }

/* The last row of every specification table holds the datasheet's PDF icon. */
.abt-content td img,
.wp-block-table td img { display: inline-block; vertical-align: middle; margin: 0; }

/* A 12-row specification table is wider than a phone column, so the figure
   scrolls rather than pushing the page sideways. */
.wp-block-table,
.abt-content .table-responsive {
	max-width: 100%;
	overflow-x: auto;
	margin: 0 0 1.059rem;
}

.wp-block-table table { min-width: 20rem; }

/* -- accordions (core/details) ------------------------------------------ */

.wp-block-details {
	margin-bottom: 0.7rem;
	border: 1px solid var(--abt-rule);
	background: var(--abt-base);
}

.wp-block-details summary {
	padding: 0.8rem 1.176rem;
	background: var(--abt-surface);
	color: var(--abt-primary);
	font-size: 1.1765rem;
	font-weight: 400;
	cursor: pointer;
}

.wp-block-details summary:hover { background: #e0e0e0; }

.wp-block-details[open] summary { border-bottom: 1px solid var(--abt-rule); }

.wp-block-details > :not(summary) { padding-inline: 1.176rem; }
.wp-block-details > :not(summary):first-of-type { padding-top: 1rem; }
.wp-block-details > :not(summary):last-child { padding-bottom: 1rem; margin-bottom: 0; }

/* --------------------------------------------------------- single product */

/*
 * The source divides the container's full 1200px into 9 and 3 columns, each with
 * its own 17px gutter — so the main column is 900px wide with 866px of content.
 * The negative margin cancels the container padding so the split starts from
 * 1200 rather than the 1166 the constrained layout would give.
 */
.abt-single {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-inline: calc(var(--abt-gutter) * -1);
	padding-top: 4vw;
	padding-bottom: 3vw;
}

.abt-single__main {
	flex: 0 0 75%;
	max-width: 75%;
	min-width: 0;
	padding-inline: var(--abt-gutter);
}

.abt-single__aside {
	flex: 0 0 25%;
	max-width: 25%;
	padding-top: 4vw;
	padding-inline: var(--abt-gutter);
}

.abt-single__title {
	margin: 0 0 0.882rem; /* 15px, measured */
	padding-bottom: 20px;
	font-size: 2.9412rem; /* 50px */
	font-weight: 300;
	line-height: 1;
}

.abt-single__thumb {
	/* Measured: 442px wide, centred, 50px above the title. */
	margin: 0 auto 2.941rem;
	max-width: 442px;
}

.abt-single__thumb img { display: block; margin-inline: auto; }

@media (max-width: 959px) {
	.abt-single { flex-direction: column; margin-inline: 0; padding-top: 1.7rem; }

	.abt-single__main,
	.abt-single__aside {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
		padding-top: 0;
	}

	/*
	 * The source collapses the service-promise cards on phones — the same three
	 * promises already appear on the front page, and on a product the useful
	 * contact detail is the seller card, which does stay visible.
	 */
	.abt-single__aside { display: none; }

	.abt-single__title { font-size: 1.7647rem; }
}

/* ----------------------------------------------------------- archive list */

.abt-archive__header { padding-block: 2vw 1rem; }

.abt-archive__title { margin-bottom: 0.5rem; }

.abt-archive__desc { color: #767676; max-width: 62ch; }

.abt-archive__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--abt-gutter);
	margin: 0 0 3vw;
	padding: 0;
	list-style: none;
}

.abt-archive__list > li { margin: 0; }

.abt-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--abt-rule);
	background: var(--abt-base);
	color: var(--abt-text);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.abt-card:hover,
.abt-card:focus {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.abt-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--abt-surface);
}

.abt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1rem;
}

.abt-card__body { padding: 1rem 1.176rem 1.176rem; }

.abt-card__title {
	margin: 0 0 0.3rem;
	color: var(--abt-primary);
	font-size: 1.1765rem;
	font-weight: 400;
	line-height: 1.25;
}

.abt-card__excerpt {
	margin: 0;
	color: #767676;
	font-size: 0.8824rem;
	line-height: 1.4;
}

.abt-subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.abt-subcategories li { margin: 0; }

.abt-subcategories a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--abt-rule);
	border-radius: 3px;
	background: var(--abt-surface);
	color: var(--abt-primary);
	font-size: 0.8824rem;
	text-decoration: none;
}

.abt-subcategories a:hover,
.abt-subcategories a:focus {
	background: var(--abt-primary);
	color: var(--abt-text-invert);
}

@media (max-width: 959px) {
	.abt-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
	.abt-archive__list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- pagination */

.abt-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 3vw;
}

.abt-pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--abt-rule);
	color: var(--abt-primary);
	text-decoration: none;
}

.abt-pagination .page-numbers.current,
.abt-pagination .page-numbers:hover {
	background: var(--abt-primary);
	border-color: var(--abt-primary);
	color: var(--abt-text-invert);
}

/* ------------------------------------------------------------------ forms */

/* Contact Form 7 replaces the source's Ninja Forms; these rules match the
   measured field metrics so the contact page keeps its proportions. */
.wpcf7-form p { margin-bottom: 1rem; }

.wpcf7-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.8824rem;
	font-weight: 700;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid #c9c9c9;
	border-radius: 3px;
	background: var(--abt-base);
	color: var(--abt-text);
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: var(--abt-tracking);
}

.wpcf7-form textarea { min-height: 9rem; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border-color: var(--abt-accent);
	outline: none;
}

.wpcf7-form input[type="submit"] {
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 3px;
	background: var(--abt-primary);
	color: var(--abt-text-invert);
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover { background: var(--abt-primary-hover); }

.wpcf7-not-valid-tip { color: #b32d2e; font-size: 0.8235rem; }

.wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--abt-rule);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: transparent;
	color: #ffffff;
}

/* ---------------------------------------------------------- search & 404 */

.abt-page-head { padding-block: 3vw 1rem; }

.abt-empty { padding-bottom: 4vw; color: #767676; }

.abt-search-page__form {
	display: flex;
	gap: 0.5rem;
	max-width: 30rem;
	margin-bottom: 2rem;
}

.abt-search-page__form input[type="search"] {
	flex: 1 1 auto;
	padding: 0.6rem 0.7rem;
	border: 1px solid #c9c9c9;
	border-radius: 3px;
	font-family: inherit;
	font-size: 1rem;
}

.abt-search-page__form button {
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: 3px;
	background: var(--abt-primary);
	color: var(--abt-text-invert);
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.abt-results { margin: 0 0 3vw; padding: 0; list-style: none; }

.abt-results > li {
	margin: 0;
	padding: 1.176rem 0;
	border-bottom: 1px solid var(--abt-rule);
}

.abt-results h2 { margin: 0 0 0.3rem; font-size: 1.4118rem; font-weight: 400; }

.abt-results p { margin: 0; color: #767676; font-size: 0.9412rem; }

/* ------------------------------------------------------- block alignment */

.abt-content .alignleft { float: left; margin: 0 1.4rem 1rem 0; }
.abt-content .alignright { float: right; margin: 0 0 1rem 1.4rem; }
.abt-content .aligncenter { display: block; margin-inline: auto; }

@media print {
	.abt-header,
	.abt-mobile-bar,
	.abt-drawer,
	.abt-footer { display: none !important; }
}