/*
Theme Name: Thermarest
Theme URI: https://thermarest.pl
Description: Block theme for thermarest.pl.
Author: Makeover
Version: 0.12.9
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thermarest
Tags: block-theme, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/* Border-box everywhere. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Grayscale antialiasing. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Site chrome. */

/* An explicit focus ring for the chrome. */
.thermarest-topbar a:focus-visible,
.thermarest-masthead a:focus-visible,
.thermarest-masthead button:focus-visible,
.wp-site-blocks > footer.wp-block-template-part a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -- top bar ------------------------------------------------------------- */

.thermarest-topbar {
	display: none;
	padding-inline: var(--wp--custom--chrome--gutter);
	background-color: var(--wp--preset--color--base);
}

@media (min-width: 1025px) {

	.thermarest-topbar {
		display: block;
	}
}

.thermarest-topbar__inner,
.thermarest-topbar__group {
	gap: 0;
}

.thermarest-topbar .wp-block-makeover-icon-box {
	gap: 4px;
	margin-inline-end: 20px;
	padding-block: 12px;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	line-height: 1.5;
}

/* The last two boxes carry no vertical padding in the original. */
.thermarest-topbar__group:last-child .wp-block-makeover-icon-box {
	gap: 6px;
	padding-block: 0;
}

.thermarest-topbar__group:last-child .wp-block-makeover-icon-box:last-child {
	margin-inline-end: 0;
}

.thermarest-topbar .wp-block-makeover-icon-box__link:hover,
.thermarest-topbar .wp-block-makeover-icon-box__link:focus {
	color: var(--wp--preset--color--accent);
}

.thermarest-topbar .wp-block-makeover-icon-box__link:hover .wp-block-makeover-icon-box__title {
	text-decoration: none;
}

/* -- masthead ------------------------------------------------------------ */

/* Sticky is CSS, not JavaScript. */
.thermarest-masthead {
	position: relative;
	z-index: 200;
	padding-inline: var(--wp--custom--chrome--gutter-mobile);
	border-block-end: 2px solid var(--wp--preset--color--accent);
	background-color: var(--wp--custom--chrome--surface);
	box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

@media (min-width: 768px) {

	.thermarest-masthead {
		position: sticky;
		inset-block-start: 0;
		padding-inline: var(--wp--custom--chrome--gutter-tablet);
	}
}

@media (min-width: 1025px) {

	.thermarest-masthead {
		padding-inline: var(--wp--custom--chrome--gutter);
	}
}

.thermarest-masthead__inner {
	gap: 0;
}

/* 17 / 83 on desktop, 25 / 75 on tablet, 50 / 50 on phone — the column widths of the original two-column section. */
.thermarest-masthead .wp-block-site-logo.thermarest-masthead__logo {
	flex: 0 0 50%;
	margin-block: 10px;
	padding-block: 15px;
}

.thermarest-masthead__nav {
	flex: 0 0 50%;
}

@media (min-width: 768px) {

	.thermarest-masthead .wp-block-site-logo.thermarest-masthead__logo {
		flex-basis: 25%;
		margin-block: 0;
	}

	.thermarest-masthead__nav {
		flex-basis: 75%;
	}
}

@media (min-width: 1025px) {

	.thermarest-masthead .wp-block-site-logo.thermarest-masthead__logo {
		flex-basis: 17%;
	}

	.thermarest-masthead__nav {
		flex-basis: 83%;
	}
}

.thermarest-masthead__logo img {
	width: 150px;
}

/* The logo file is dark artwork drawn for a white page; the masthead is black. */
.thermarest-masthead__logo img {
	filter: invert(100%) brightness(105%) contrast(105%);
}

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

/* The element selector matters: core copies the block's className onto the inner <ul> as well as the <nav>, so an unqualified `.thermarest-masthead__nav` applies this padding twice and makes the bar 28px too tall. */
nav.thermarest-masthead__nav {
	padding-block: 14px;
}

/* The five items need 915px on one line, and the bar gives the nav 747px at 1025 and 919px at 1232 — so between the burger breakpoint and 1232 the row wrapped and dropped the last item. The three values that decide that width are fluid from 1025 to 1280 rather than to 1232, which is where they would only just fit; below 1025 the overlay sets its own and wins on specificity. */
.thermarest-masthead__nav {
	--tr-nav-font-size: clamp(14px, 0.3922vw + 9.9804px, 15px);
	--tr-nav-padding-inline: clamp(8px, 4.7059vw - 40.2353px, 20px);
	--tr-nav-gap: clamp(10px, 5.4902vw - 46.2745px, 24px);
	color: var(--wp--custom--chrome--on-surface-strong);
	font-size: 15px;
}

.thermarest-masthead__nav .wp-block-navigation__container {
	gap: var(--tr-nav-gap);
}

.thermarest-masthead__nav .wp-block-navigation-item__content {
	padding: 13px var(--tr-nav-padding-inline);
	font-size: var(--tr-nav-font-size);
	line-height: 20px;
	text-decoration: none;
}

.thermarest-masthead__nav .wp-block-navigation-item__content:hover,
.thermarest-masthead__nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* Current page marked in accent. */
.thermarest-masthead__nav .current-menu-item > .wp-block-navigation-item__content,
.thermarest-masthead__nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Submenus invert to dark-on-light. */
nav.thermarest-masthead__nav .has-child .wp-block-navigation__submenu-container {
	border: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 10px 20px 7px rgb(0 0 0 / 10%);
}

/* Colour and size only. */
.thermarest-masthead__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--custom--chrome--surface);
	font-size: 13px;
}

/* The dark row is a pointer affordance only. */
@media (hover: hover) {

	.thermarest-masthead__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: var(--wp--custom--chrome--surface);
		color: var(--wp--preset--color--base);
	}
}

/* Keyboard focus is an accent ring, not a filled row. */
.thermarest-masthead__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

/* The caret button keeps its place in the tab order, deliberately. */
.thermarest-masthead__nav .wp-block-navigation-submenu__toggle {
	position: relative;
}

.thermarest-masthead__nav .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 1;
	margin-block-start: -12px;
	margin-inline-start: -12px;
	inline-size: 24px;
	block-size: 24px;
}

/* Submenu width, desktop only — the panel below lays submenus out as full-width blocks and must not get any of this. */
@media (min-width: 1025px) {

	nav.thermarest-masthead__nav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	nav.thermarest-masthead__nav .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	nav.thermarest-masthead__nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		width: max-content;
		min-width: 200px;
		max-width: min(360px, calc(100vw - 2rem));
	}

	.thermarest-masthead__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
	}

	/* The row itself: 13px text in a 20px line box with 13px above and below, so 46px tall — measured off https://thermarest.pl/ on 2026-09-09, where the item computes `padding: 13px 20px` at `font: 13px/20px Roboto`. */
	nav.thermarest-masthead__nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 13px 20px;
	}
}

/* -- mobile menu --------------------------------------------------------- */

/* Measured height of the black bar. */
.thermarest-masthead {
	--tr-bar-height: 73px;
	--tr-admin-bar: 0px;
}

@media (min-width: 768px) and (max-width: 1024px) {

	.thermarest-masthead {
		--tr-bar-height: 63px;
	}
}

/* The admin bar is fixed and pushes the masthead down, but `dvh` still measures the whole viewport — so without this the panel is exactly one admin bar too tall and its last item sits below the fold, unreachable at full scroll. */
.admin-bar .thermarest-masthead {
	--tr-admin-bar: 46px;
}

@media (min-width: 783px) {

	.admin-bar .thermarest-masthead {
		--tr-admin-bar: 32px;
	}
}

@media (max-width: 1024px) {

	/* margin-inline-start: auto pushes the burger right. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		margin-inline-start: auto;
		padding: 5.5px;
		border-radius: 3px;
		background-color: rgb(0 0 0 / 5%);
		font-size: 22px;
	}

	/* 22px, overriding core's 24px. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container-open svg,
	.thermarest-masthead__nav .wp-block-navigation__responsive-container-close svg {
		inline-size: 22px;
		block-size: 22px;
	}

	/* core relies on the full-screen overlay to cover the burger. */
	.thermarest-masthead__nav:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* core makes .wp-block-navigation a positioning context for its desktop submenus. */
	nav.thermarest-masthead__nav {
		position: static;
	}

	/* The overlay becomes a panel hung under the bar, full-bleed. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		position: absolute;
		inset-block: var(--tr-bar-height) auto;
		inset-inline: 0;
		z-index: 200;

		/* core slides the overlay in from translateY(0.5em). */
		animation: none;
		padding: 0;
		overflow: visible;
		background-color: var(--wp--preset--color--base);
		color: var(--wp--custom--chrome--surface);
	}

	/* core makes the dialog a positioning context and pads the content to clear the close button that used to float over it. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: static;
		margin: 0;
		padding: 0;
		max-inline-size: none;
	}

	/* The panel scrolls itself, and it has to be this element that does it. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		display: block;
		padding-block-start: 0;
		max-block-size: calc(100vh - var(--tr-bar-height) - var(--tr-admin-bar));
		max-block-size: calc(100dvh - var(--tr-bar-height) - var(--tr-admin-bar));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Close button sits back in the bar, where the burger was. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		inset-block-start: calc((var(--tr-bar-height) + 33px) / -2);
		inset-inline-end: var(--wp--custom--chrome--gutter-mobile);
		inline-size: 33px;
		block-size: 33px;
		padding: 5.5px;
		color: var(--wp--preset--color--base);
		font-size: 22px;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: block;
		gap: 0;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: block;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding: 19px 20px;
		color: var(--wp--custom--chrome--surface);
		font-size: 15px;
	}

	/* The current page is marked in accent, the same as it is on desktop. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent);
	}

	/* No carets in the panel, and the submenus are simply laid out open. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: none;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .has-child {
		position: relative;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		padding-inline: 0;
		opacity: 1;
		visibility: visible;
	}

	/* Submenus stay expanded in the panel — see the note in docs/chunks/01-header-footer.md. */
	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-block: 0;
		box-shadow: none;
	}

	.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 13px;
	}

	/* The panel's submenu rows carry their parents' metrics and the 40px indent, and both have to be restated here for the same reason the desktop rule exists: core's 0,5,0 submenu-item rule beats the two 0,4,0 rules above it, so the panel was laying its submenu links out at core's `.5em 1em` — 33px rows with a 13px indent instead of 58px rows indented 40px. */
	nav.thermarest-masthead__nav .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 19px 20px;
		padding-inline-start: 40px;
	}
}

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

.wp-site-blocks > footer.wp-block-template-part {
	background-color: var(--wp--custom--chrome--surface);
	color: var(--wp--custom--chrome--on-surface);
}

.thermarest-footer__about,
.thermarest-footer__links {
	padding-block: 40px;
	padding-inline: 20px;
}

.thermarest-footer__legal {
	padding-inline: 20px;
}

.thermarest-footer__about {
	text-align: center;
}

/* Extra class for the same first-child reason as the rules above. */
.thermarest-footer__about .wp-block-heading.thermarest-footer__heading {
	margin-block: 8px 16px;
	color: var(--wp--preset--color--accent);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.thermarest-footer__heading a,
.thermarest-footer__text a,
.thermarest-footer__copy a {
	color: inherit;
	text-decoration: none;
}

.thermarest-footer__heading a:hover,
.thermarest-footer__heading a:focus,
.thermarest-footer__text a:hover,
.thermarest-footer__text a:focus,
.thermarest-footer__copy a:hover,
.thermarest-footer__copy a:focus {
	text-decoration: underline;
}

.thermarest-footer__text {
	margin-block: 0;
	font-size: 15px;
	line-height: 1.5;
}

/* The rules carry 15px above and below, not the block gap. */
.thermarest-footer__legal .wp-block-separator.thermarest-footer__rule {
	margin-block: 15px;
	border-block-start: 1px solid var(--wp--preset--color--muted);
	opacity: 1;
}

.thermarest-footer__note {
	margin-block: 0 20px;
	color: var(--wp--custom--chrome--on-surface-muted);
	font-size: 16px;
	line-height: 1.5;
}

.thermarest-footer__links .wp-block-makeover-icon-list {
	gap: 7px;
}

.thermarest-footer__links .wp-block-makeover-icon-list-item {
	font-size: 16px;
	line-height: 1.7;
}

.thermarest-footer__links .wp-block-makeover-icon-list-item__link {
	color: inherit;
	text-decoration: none;
}

.thermarest-footer__links .wp-block-makeover-icon-list-item__link:hover,
.thermarest-footer__links .wp-block-makeover-icon-list-item__link:focus {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.thermarest-footer__copy {
	padding-block: 14px 0;
	border-block-start: 1px solid var(--wp--custom--chrome--rule);
}

.thermarest-footer__copy p {
	margin-block: 0;
	font-size: 15px;
	line-height: 1.5;
}

@media (max-width: 1024px) {

	.thermarest-footer__copy {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {

	.thermarest-footer__links {
		padding-inline: 40px;
	}

	.thermarest-footer__about .wp-block-column:not(:last-child) {
		margin-block-end: 30px;
	}

	.thermarest-footer__copy {
		padding-block: 20px;
	}

	.thermarest-footer__copy p {
		font-size: 12px;
	}
}

/* -- site chrome: no gap around the content -------------------------------- */

/* Core puts a block gap between the header, the content and the footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* -- page template ------------------------------------------------------- */

.wp-block-group.thermarest-page {
	display: flex;
	flex-direction: column;
	padding-block-start: 70px;
}

/* Every gap below is one of production's own numbers, so the block gap has to go first — core would otherwise add 24px between each of the three. */
.wp-block-group.thermarest-page > * {
	margin-block-start: 0;
}

.thermarest-page__featured {
	margin-block: 0;
	text-align: center;
}

/* 920 × 405 custom crop. */
.thermarest-page__featured img {
	margin-inline: auto;
	border-radius: 4px;
}

/* 60px above the title and 10px under it, both the title widget's own. */
.thermarest-page .wp-block-post-title.thermarest-page__title {
	margin-block: 60px 10px;
	margin-inline: auto;
	max-inline-size: var(--wp--custom--page--content-width);
	color: var(--wp--custom--page--title-color);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.5;
}

@media (min-width: 768px) {

	.thermarest-page .wp-block-post-title.thermarest-page__title {
		font-size: 40px;
		line-height: 1.2;
	}
}

@media (min-width: 1025px) {

	.thermarest-page .wp-block-post-title.thermarest-page__title {
		font-size: 46px;
		line-height: 1;
	}
}

/* 30px is the column's own bottom padding, which falls between the title and the content; 50px is the second section's, below everything. */
.wp-block-group.thermarest-page > .thermarest-page__content {
	margin-block-start: 30px;
	padding-block-end: 50px;
	color: var(--wp--custom--page--text-color);
	font-size: 16px;
	line-height: 1.5;
}

/* Paragraph and heading rhythm is `.thermarest-prose-scale`, further down; shared with posts. */

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

/* The full-bleed header some pages carry instead of the standard page template: a background image, a dark wash over it, and a centred title. */
.thermarest-hero {
	position: relative;
	padding-block: 50px;
}

@media (min-width: 768px) {

	.thermarest-hero {
		padding-block: 80px;
	}
}

@media (min-width: 1025px) {

	.thermarest-hero {
		padding-block: 100px;
	}
}

.thermarest-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 20%);
}

.thermarest-hero > * {
	position: relative;
}

/* Roboto Condensed 700, and the only place on the site that uses it — which is why the family is declared in theme.json but preloaded nowhere. */
.thermarest-hero .wp-block-heading.thermarest-hero__title {
	margin-block: 0 20px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.thermarest-hero .wp-block-heading.thermarest-hero__title {
		margin-block-end: 0;
		font-size: 42px;
	}
}

@media (min-width: 1025px) {

	.thermarest-hero .wp-block-heading.thermarest-hero__title {
		font-size: 60px;
	}
}

/* `margin-block-start: 0` is load-bearing: theme.json's block gap would otherwise push 24px between the title and the line under it, and the original has none. */
.thermarest-hero .thermarest-hero__text {
	margin-block: 0;
	color: var(--wp--preset--color--base);
	font-size: 16px;
	font-weight: 400;
}

@media (min-width: 768px) {

	.thermarest-hero .thermarest-hero__text {
		font-size: 18px;
	}
}

/* -- home: hero carousel -------------------------------------------------- */

/* Home hero: makeover/carousel. */
.thermarest-home-hero {
	/* `rgba(0,0,0,0.5)` and `rgba(0,0,0,0.3)` per slide: one colour, and the alpha carried by each slide's own overlay opacity. */
	--makeover-carousel-overlay-color: #000;
}

.thermarest-home-hero .wp-block-makeover-carousel-slide {
	/* widget-slides.min.css: `.swiper-slide-inner{padding:50px}`. */
	padding: 50px;

	--makeover-carousel-slide-gap: 30px;
}

.thermarest-home-hero .wp-block-makeover-carousel-slide__heading {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);

	font-size: 50px;
	font-weight: 700;

	/* widget-slides.min.css: `line-height:1`. */
	line-height: 1;
}

.thermarest-home-hero .wp-block-makeover-carousel-slide__text {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);

	/* widget-slides.min.css: `font-size:17px;line-height:1.4`. */
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
}

/* post-41.css: 15px/500, uppercase, 1px tracking, 2px #DBB532 border, 100px radius, transparent fill. */
.thermarest-home-hero .wp-block-makeover-carousel-slide__button {
	padding: 15px 30px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 100px;
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.thermarest-home-hero .wp-block-makeover-carousel-slide__content:hover .wp-block-makeover-carousel-slide__button,
a.wp-block-makeover-carousel-slide__button:hover,
a.wp-block-makeover-carousel-slide__button:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: #000;
}

@media (max-width: 767px) {

	.thermarest-home-hero .wp-block-makeover-carousel-slide {
		/* widget-slides.min.css: `padding:30px` and a 15px rhythm below 768. */
		padding: 30px;

		--makeover-carousel-slide-gap: 15px;
	}

	/* post-41.css `@media(max-width:767px)`: 46px and 13px. */
	.thermarest-home-hero .wp-block-makeover-carousel-slide__heading {
		font-size: 46px;
	}

	.thermarest-home-hero .wp-block-makeover-carousel-slide__text {
		font-size: 13px;
	}
}

/* -- home: category grid -------------------------------------------------- */

/* Four linked category tiles. */
@media (max-width: 1024px) {

	.wp-block-group.thermarest-categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* `image_space: 10` on every one of the six widgets. */
.thermarest-categories .wp-block-makeover-image-box {
	gap: 10px;
}

/* Never upscale a category photo. */
.thermarest-categories .wp-block-makeover-image-box__image {
	max-inline-size: 460px;
	margin-inline: auto;
}

.thermarest-categories .wp-block-makeover-image-box__title {
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

/* -- page hero: title-only variant ---------------------------------------- */

/* `/materace-turystyczne/` uses the same full-bleed hero as `/doradca-zakupowy/`, with two differences. */
@media (max-width: 767px) {

	.thermarest-hero--compact .wp-block-heading.thermarest-hero__title {
		font-size: 23px;
	}
}

/* -- materace: intro box -------------------------------------------------- */

/* Section e29e570 / column b956f2d in post-102.css: a 1px #D3D3D3 frame with 30px of padding, holding a centred lead and three category tiles. */
.thermarest-intro {
	margin-block-start: 60px;
}

@media (max-width: 767px) {

	.thermarest-intro {
		margin-block-start: 30px;
	}
}

/* `content_width: 850` on the inner section, `margin-bottom: 40`, and the widget's own 30px/500/1.2em. */
.thermarest-intro .wp-block-heading.thermarest-intro__heading {
	margin-block: 0 40px;
	margin-inline: auto;
	max-inline-size: 850px;
	color: var(--wp--preset--color--contrast);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
}

@media (max-width: 767px) {

	.thermarest-intro .wp-block-heading.thermarest-intro__heading {
		font-size: 20px;
	}
}

/* Three tiles at 30%, distributed with space-between. */
.wp-block-group.thermarest-intro__tiles {
	grid-template-columns: repeat(3, 30%);
	gap: 0;
	justify-content: space-between;
}

/* Production went straight from three columns to one, which upscales a 450px image to the full 641px column at 750px wide. Let the tiles pack themselves instead: two across while two fit, one below that. */
@media (max-width: 767px) {

	.wp-block-group.thermarest-intro__tiles {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: 40px 24px;
	}
}

.thermarest-intro__tiles .wp-block-makeover-image-box {
	gap: 0;
}

.thermarest-intro__tiles .wp-block-makeover-image-box__image {
	margin-block-end: 15px;
}

/* post-102.css: `image_space_mobile: 10`. The cap is the file's own width — one column on a phone is wider than the image, and `inline-size: 100%` would upscale it. */
@media (max-width: 767px) {

	.thermarest-intro__tiles .wp-block-makeover-image-box__image {
		max-inline-size: 450px;
		margin-block-end: 10px;
		margin-inline: auto;
	}
}

.thermarest-intro__tiles .wp-block-makeover-image-box__title {
	margin-block: 8px 16px;
	color: var(--wp--preset--color--contrast);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

@media (max-width: 1024px) {

	.thermarest-intro__tiles .wp-block-makeover-image-box__title {
		font-size: 23px;
	}
}

.thermarest-intro__tiles .wp-block-makeover-image-box__text {
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

/* Core's inline text-colour format wraps the coloured run in a `<mark>`, which every browser paints yellow. */
mark.has-inline-color {
	background-color: transparent;
}

/* -- materace: section bands ---------------------------------------------- */

/* The accent frame that opens each product group. */
.thermarest-band {
	margin-block: 0 50px;
	padding-block: 70px 80px;
	border: 3px solid var(--wp--preset--color--accent);
}

/* The first band opens the catalogue, straight after the accordion: 40/60. */
.thermarest-accordion + .thermarest-band {
	margin-block: 40px 60px;
}

/* 50px/700/1.3em uppercase in Roboto Condensed, #3f3e40 — a near-black the kit does not name, so it is stated once here rather than added to the palette for a single use. */
.thermarest-band .wp-block-heading.thermarest-band__heading {
	margin-block: 0;
	padding-block-start: 20px;
	color: #3f3e40;
	font-family: var(--wp--preset--font-family--display);
	font-size: 50px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

/* 52px at tablet, 30px (first band) / 32px (the others) on phones. */
@media (max-width: 1024px) {

	.thermarest-band .wp-block-heading.thermarest-band__heading {
		font-size: 52px;
	}
}

@media (max-width: 767px) {

	.thermarest-band .wp-block-heading.thermarest-band__heading {
		font-size: 32px;
	}

	.thermarest-band:first-of-type .wp-block-heading.thermarest-band__heading {
		font-size: 30px;
	}
}

.thermarest-band .thermarest-band__text {
	margin-block: 20px 0;
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

/* -- materace: product rows ----------------------------------------------- */

/* Two 50% columns: 580px of content in a 600px column, 40px gutter. */
.wp-block-group.thermarest-products__row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-block-end: 50px;
}

.thermarest-products__row > :nth-child(odd) {
	margin-inline-end: 20px;
}

.thermarest-products__row > :nth-child(even) {
	margin-inline-start: 20px;
}

/* 50/50 from 768 up, stacked below. The 40px gutter is two 20px margins rather than a gap, so stacking has to undo both: the inline ones become uneven side insets, and the missing block one leaves the two cards of a row touching while the rows themselves are 50px apart. */
@media (max-width: 767px) {

	.wp-block-group.thermarest-products__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 50px;
	}

	.thermarest-products__row > :nth-child(odd),
	.thermarest-products__row > :nth-child(even) {
		margin-inline: 0;
	}
}

/* The decorative lifestyle photo that fills the empty half of two rows. */
.thermarest-products__row > .thermarest-products__figure {
	display: none;
	margin-inline: 0;
	block-size: 100%;
}

@media (min-width: 1025px) {

	.thermarest-products__row > .thermarest-products__figure {
		display: block;
	}
}

/* -- materace: product card ----------------------------------------------- */

.product-box .wp-block-image.product-box__image {
	margin-block: 0;
	text-align: start;
}

/* one card height whatever the source photo's aspect: 04-katalog-2026 */
.product-box .wp-block-image.product-box__image img {
	aspect-ratio: 55 / 31;
	object-fit: contain;
	inline-size: 100%;
}

.product-box .wp-block-heading.product-box__title {
	margin-block: 8px 16px;
	color: #000;
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}

.product-box .product-box__title a {
	color: inherit;
	text-decoration: none;
}

/* The heading is the product's shop link and nothing else on the card said so; the chevron is the cue a phone can see, having no hover to discover. */
.product-box .product-box__title a::after {
	content: "\00a0\203a";
	color: var(--wp--preset--color--accent);
}

.product-box .product-box__title a:hover,
.product-box .product-box__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* The card's own CTA, at the end of the card where the decision is made. */
.product-box .thermarest-product-cta {
	margin-block-start: 20px;
}

/* Full width on phones so the tap target is the column, not the label; the extra padding takes the pill's 43px over the 44px minimum. */
@media (max-width: 767px) {

	.product-box .thermarest-product-cta .wp-block-button,
	.product-box .thermarest-product-cta .wp-block-button__link {
		inline-size: 100%;
	}

	.product-box .thermarest-product-cta .wp-block-button__link {
		padding-block: 16px;
	}
}

/* -- materace: prose ------------------------------------------------------ */

/* Prose scope — deliberately not global. */
.thermarest-prose h3 {
	margin-block: 8px 16px;
	color: #000;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
}

.thermarest-prose h4 {
	margin-block: 8px 16px;
	color: #000;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

/* The kit's `ul { margin-block-end: 0.9rem }`, plus the browser's own indent. */
.thermarest-prose ul,
.thermarest-prose ol {
	margin-block: 0 0.9rem;
	padding-inline-start: 40px;
}

.thermarest-prose ul {
	list-style-type: disc;
}

.thermarest-prose ol {
	list-style-type: decimal;
}

/* `li { padding-bottom: 10px }`, and 5px inside an ordered list. */
.thermarest-prose li {
	padding-block-end: 10px;
	color: var(--wp--custom--page--text-color);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.thermarest-prose ol li {
	padding-block-end: 5px;
}

/* `ol li a { color: #000 }` — the table of contents links. */
.thermarest-prose ol li a {
	color: #000;
	text-decoration: none;
}

.thermarest-prose ol li a:hover,
.thermarest-prose ol li a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Spec tables. */
.thermarest-prose .wp-block-table {
	margin-block: 20px 15px;
}

.thermarest-prose .wp-block-table table {
	font-size: 0.9em;
	border-collapse: collapse;
}

.thermarest-prose .wp-block-table td,
.thermarest-prose .wp-block-table th {
	padding: 10px 15px;
	border: 1px solid #ccc;
	color: #444;
	line-height: 1.5;
	text-align: start;
	vertical-align: top;
}

.thermarest-prose .wp-block-table tbody tr:nth-child(odd) > td {
	background-color: rgb(128 128 128 / 7%);
}

.thermarest-prose .wp-block-image {
	margin-block: 0 0.9rem;
}

/* -- materace: tabs ------------------------------------------------------- */

.thermarest-tabs {
	margin-block-start: 60px;
}

/* Production stacked the tabs flush against the intro box on phones; 40px matches the accordion below them. Asked for 2026-09-22, see docs/features/03-product-cta.md. */
@media (max-width: 767px) {

	.thermarest-tabs {
		margin-block-start: 40px;
	}
}

.thermarest-tabs .wp-block-tab-list {
	gap: 0;
}

/* Core's flow layout puts blockGap here; the panels sit flush under the tab strip. */
.thermarest-tabs .wp-block-tab-panels {
	margin-block-start: 0;
}

.thermarest-tabs .wp-block-tab-list button {
	padding: 20px 25px;
	border: 1px solid transparent;
	border-block-end: 0;
	color: #000;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.thermarest-tabs .wp-block-tab-list button[aria-selected="true"] {
	border-color: #d5d8dc;
	color: var(--wp--preset--color--accent);
}

/* Three labels of different lengths wrapped into two or three ragged rows once the strip dropped under the ~850px they need. Stack them instead, as full-width rows reading like the accordion further down the page: the selected row is white like the panel, the rest grey like a closed accordion header. A container query, not a media query — the wrap depends on the strip's own width, so editing a label moves the threshold and nothing else has to be touched. */
.thermarest-tabs {
	container-type: inline-size;
}

@container (max-width: 860px) {

	.thermarest-tabs .wp-block-tab-list {
		flex-direction: column;
	}

	.thermarest-tabs .wp-block-tab-list button {
		inline-size: 100%;
		padding: 15px 12px;
		border-color: #d5d8dc;
		background-color: #f9f9f9;
		text-align: start;
	}

	.thermarest-tabs .wp-block-tab-list button + button {
		border-block-start: 0;
	}

	.thermarest-tabs .wp-block-tab-list button[aria-selected="true"] {
		background-color: transparent;
	}
}

.thermarest-tabs .wp-block-tab-panel {
	padding: 20px;
	border: 1px solid #d5d8dc;
	color: var(--wp--custom--page--text-color);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

@media (max-width: 767px) {

	.thermarest-tabs .wp-block-tab-panel {
		padding: 10px;
	}
}

.thermarest-tabs .wp-block-tab-panel p {
	max-inline-size: 850px;
	margin-block: 0 0.9rem;
}

.thermarest-tabs .wp-block-tab-panel li {
	max-inline-size: 795px;
	font-size: 16px;
}

/* -- materace: accordion -------------------------------------------------- */

.thermarest-accordion {
	margin-block-start: 40px;
}

/* Same blockGap leak: zero it, then space the items deliberately. */
.thermarest-accordion .wp-block-accordion-item,
.thermarest-accordion .wp-block-accordion-panel {
	margin-block-start: 0;
}

/* The 1px hairline read as one grey slab; 8px of page between items instead. */
.thermarest-accordion .wp-block-accordion-item + .wp-block-accordion-item {
	margin-block-start: 8px;
}

/* A closed panel carries `hidden="until-found"` = `content-visibility: hidden`: the
   contents go, its own padding and border stay — 31px of dead strip per toggle. */
.thermarest-accordion .wp-block-accordion-panel[hidden] {
	padding-block: 0;
	border-block-width: 0;
}

.thermarest-accordion .wp-block-accordion-heading__toggle {
	gap: 0;
	padding: 15px;
	border-block-end: 1px solid #fff;
	background-color: #f9f9f9;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: start;
}

@media (max-width: 767px) {

	.thermarest-accordion .wp-block-accordion-heading__toggle {
		padding: 12px;
	}
}

.thermarest-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	color: var(--wp--preset--color--accent);
}

/* 1em wide so the label starts at the same x open or closed. */
.thermarest-accordion .wp-block-accordion-heading__toggle-icon {
	inline-size: 1em;
	margin-inline-end: 5px;
	font-size: 16px;
}

.thermarest-accordion .wp-block-accordion-panel {
	padding: 15px;
	border-block-end: 1px solid #fff;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--custom--page--text-color);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

@media (max-width: 767px) {

	.thermarest-accordion .wp-block-accordion-panel {
		padding: 12px 10px;
	}
}

.thermarest-accordion .wp-block-accordion-panel p {
	max-inline-size: 850px;
	margin-block: 0 0.9rem;
}

.thermarest-accordion .wp-block-accordion-panel li {
	max-inline-size: 795px;
	font-size: 16px;
}

/* -- materace: product gallery -------------------------------------------- */

/* Gallery: makeover/carousel. */
.thermarest-gallery {
	--makeover-carousel-arrow-size: 14px;
	--makeover-carousel-arrow-inset: 0px;
	--makeover-carousel-arrow-block: calc(50% - 15px);
	--makeover-carousel-dot-size: 6px;
	--makeover-carousel-dot-gap: 6px;

	margin-block-end: 20px;
	padding-block-end: 30px;
	color: #000;
}

.thermarest-gallery .wp-block-makeover-carousel__arrow {
	color: rgb(237 237 237 / 90%);
}

/* The dots sit in the 30px band, 5px off the bottom, as Swiper placed them. */
.thermarest-gallery .wp-block-makeover-carousel__dots {
	position: absolute;
	inset-block-end: 5px;
	inset-inline: 0;
}

/* `image_stretch: no` — the slide is as wide as the column, the photo keeps its own 550px and centres in it. */
.thermarest-gallery .wp-block-makeover-carousel-slide__image {
	margin-inline: auto;
}

/* -- campaign pages: hero -------------------------------------------------- */

/* The full-bleed header the two campaign pages share — `/materace-nxt/` and `/50-lecie/`. */
.thermarest-campaign-hero {
	position: relative;
	padding-block: 40px;
	padding-inline: 10px;
}

@media (min-width: 768px) {

	.thermarest-campaign-hero {
		padding-block: 60px 20px;
		padding-inline: 40px;
	}
}

@media (min-width: 1025px) {

	.thermarest-campaign-hero {
		padding-block: 60px;
		padding-inline: 0;
	}
}

.thermarest-campaign-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 50%);
}

.thermarest-campaign-hero > * {
	position: relative;
}

/* 16px Roboto with 3px of tracking, uppercase, white. */
.thermarest-campaign-hero__eyebrow {
	margin-block: 0 0.9rem;
	color: var(--wp--custom--hero--text);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1.5;
	text-transform: uppercase;
}

@media (max-width: 767px) {

	.thermarest-campaign-hero__eyebrow {
		font-size: 12px;
		letter-spacing: 2px;
	}
}

/* Roboto Condensed 600 at 46 / 38 / 21, `line-height: 1.2em`. */
.thermarest-campaign-hero .wp-block-heading.thermarest-campaign-hero__title {
	margin-block: 0 10px;
	color: var(--wp--custom--hero--text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.thermarest-campaign-hero .wp-block-heading.thermarest-campaign-hero__title {
		font-size: 38px;
		line-height: 1.2;
	}
}

@media (min-width: 1025px) {

	.thermarest-campaign-hero .wp-block-heading.thermarest-campaign-hero__title {
		font-size: 46px;
	}
}

/* The lead under the media. */
.thermarest-campaign-hero__lead {
	max-inline-size: 766px;
	margin-block-end: 0.9rem;
	margin-inline: auto;
	color: var(--wp--custom--hero--text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/* `margin: 10px 0 0` on the video widget, 20px at tablet, 0 on phones. */
/* `inline-size: 100%` is load-bearing. */
.thermarest-campaign-hero__video {
	inline-size: 100%;
	max-inline-size: 800px;
	margin-inline: auto;
}

@media (min-width: 768px) {

	.wp-block-group.thermarest-campaign-hero > .thermarest-campaign-hero__video {
		margin-block-start: 20px;
	}
}

@media (min-width: 1025px) {

	.wp-block-group.thermarest-campaign-hero > .thermarest-campaign-hero__video {
		margin-block-start: 10px;
	}
}

/* -- campaign pages: the pill button --------------------------------------- */

.thermarest-pill .wp-block-button__link {
	max-inline-size: 100%;
	padding: 15px 40px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.3s, color 0.3s;
}

/* Two of these labels are long enough to wrap once the column narrows, and production gave exactly those two — and only those two — a looser line so the two lines do not touch. */
@media (max-width: 767px) {

	.thermarest-campaign-hero .thermarest-pill .wp-block-button__link {
		letter-spacing: 1.5px;
		line-height: 1.5;
	}

	.thermarest-campaign-cta .thermarest-pill .wp-block-button__link {
		line-height: 1.3;
	}
}

.thermarest-pill--light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.thermarest-pill--dark .wp-block-button__link {
	background-color: var(--wp--custom--chrome--surface);
	color: var(--wp--preset--color--base);
}

.thermarest-pill--light .wp-block-button__link:hover,
.thermarest-pill--light .wp-block-button__link:focus-visible,
.thermarest-pill--dark .wp-block-button__link:hover,
.thermarest-pill--dark .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* -- campaign pages: vertical rhythm --------------------------------------- */

.wp-block-group.thermarest-campaign-hero > *,
.wp-block-group.thermarest-campaign > *,
.wp-block-group.thermarest-campaign-cta > * {
	margin-block-start: 0;
}

/* A flex column, and it is load-bearing rather than a layout choice. */
.wp-block-group.thermarest-campaign-hero,
.wp-block-group.thermarest-campaign-cta {
	display: flex;
	flex-direction: column;
}

/* The gaps production did have, restated at the same two-class specificity so they win over the reset above rather than depending on source order. */
.wp-block-group.thermarest-campaign-hero > .thermarest-campaign-hero__lead {
	margin-block-start: 20px;
}

.wp-block-group.thermarest-campaign-hero > .wp-block-buttons {
	margin-block-start: 30px;
}

.wp-block-group.thermarest-campaign > .thermarest-campaign-cta {
	margin-block-start: 60px;
}

/* 20px of widget spacing plus the paragraph's own 10px. */
.wp-block-group.thermarest-campaign-cta > .thermarest-campaign-cta__text {
	margin-block-start: 30px;
}

.wp-block-group.thermarest-campaign-cta > .wp-block-buttons {
	margin-block-start: 20px;
}

.wp-block-group.thermarest-media-row__cell > * + * {
	margin-block-start: 20px;
}

.thermarest-campaign-hero .wp-block-buttons {
	justify-content: center;
}

/* -- campaign pages: the band and its rows --------------------------------- */

/* The full-width band under the hero. */
.wp-block-group.thermarest-campaign {
	padding-block: 50px;
	padding-inline: 0;
}

@media (min-width: 768px) {

	.wp-block-group.thermarest-campaign {
		padding-block: 70px;
		padding-inline: 30px;
	}
}

@media (min-width: 1025px) {

	.wp-block-group.thermarest-campaign {
		padding-block: 0 120px;
		padding-inline: 40px;
	}

}

/* `/50-lecie/`'s band, which differs from `/materace-nxt/`'s twice over. */
.wp-block-group.thermarest-campaign--inset {
	padding: 60px 10px;
}

@media (min-width: 768px) {

	.wp-block-group.thermarest-campaign--inset {
		padding: 80px 40px;
	}
}

@media (min-width: 1025px) {

	.wp-block-group.thermarest-campaign--inset {
		padding: 90px 50px 140px;
	}
}

/* A two-column grid, not `core/columns`. */
.wp-block-group.thermarest-media-row {
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 0;
	padding-block: 30px 0;
}

@media (min-width: 768px) {

	.wp-block-group.thermarest-media-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {

	.wp-block-group.thermarest-media-row {
		padding-block: 80px 50px;
	}
}

/* 50px between the two halves, carried inside whichever column faces the divide — production put it on one column, not as a gap, so the two content boxes are 550 and 600 rather than 575 each. */
@media (min-width: 768px) {

	.thermarest-media-row > .is-inset:first-child {
		padding-inline-end: 50px;
	}

	.thermarest-media-row > .is-inset:last-child {
		padding-inline-start: 50px;
	}
}

/* Stacked, below 768. */
@media (max-width: 767px) {

	.thermarest-media-row__cell--above {
		padding-block: 20px 40px;
	}

	/* Two classes: core's grid layout sets `margin: 0` on every child through `.is-layout-grid > :is(*, div)`, whose `div` argument gives it an element's worth of specificity on top of the class. */
	.thermarest-media-row > .thermarest-media-row__cell--below {
		margin-block-end: 40px;
	}

	.thermarest-media-row__cell--tight {
		padding-block-start: 20px;
	}
}

/* Roboto 600 uppercase in the accent, 32 / 20 / 17 with 1.5px then 1.2px of tracking. */
.thermarest-campaign .wp-block-heading.thermarest-campaign__heading {
	margin-block: 0;
	color: var(--wp--preset--color--accent);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.thermarest-campaign .wp-block-heading.thermarest-campaign__heading {
		font-size: 20px;
	}
}

@media (min-width: 1025px) {

	.thermarest-campaign .wp-block-heading.thermarest-campaign__heading {
		font-size: 32px;
		letter-spacing: 1.5px;
	}
}

.wp-block-group.thermarest-campaign > .thermarest-campaign__heading {
	margin-block-end: 20px;
}

/* Roboto 400 at 15 / 18, `line-height: 1.7em`, in the widget's own #5a6060. */
.thermarest-campaign__text {
	display: flow-root;
	color: #5a6060;
	font-size: 15px;
	line-height: 1.7;
}

/* Two classes, not `> *`: core's flow layout zeroes the last child's `margin-block-end`, and the whole point of this rule is that production kept it — the 0.9rem under the final list is half the 34.4px gap to the button. */
.wp-block-group.thermarest-campaign__text > .wp-block-list,
.wp-block-group.thermarest-campaign__text > .wp-block-heading,
.wp-block-group.thermarest-campaign__text > p {
	margin-block: 0 0.9rem;
}

@media (min-width: 1025px) {

	.thermarest-campaign__text {
		font-size: 18px;
	}
}

/* The page's own custom CSS, on the `.text-opis` / `.opis-intend` classes both pages put on these widgets: black underlined links turning red on hover, and list items with no space between them. */
.thermarest-campaign__text a {
	color: #000;
	text-decoration: underline;
}

.thermarest-campaign__text a:hover,
.thermarest-campaign__text a:focus-visible {
	color: #f23e44;
}

.thermarest-campaign__text li {
	margin-block: 0;
}

/* Below 768 production centred the row headings and their buttons and dropped the 50px inner inset; the copy itself stayed left-aligned. */
@media (max-width: 767px) {

	.thermarest-media-row__cell .wp-block-heading.thermarest-campaign__heading {
		text-align: center;
	}

	.thermarest-media-row__cell .wp-block-buttons {
		justify-content: center;
	}

	.thermarest-media-row__cell--phone-hidden {
		display: none;
	}
}

/* Every video on both pages is 16:9 — `--video-aspect-ratio: 1.77777`. */
.thermarest-campaign .wp-block-embed__wrapper,
.thermarest-campaign-hero .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.thermarest-campaign .wp-block-embed iframe,
.thermarest-campaign-hero .wp-block-embed iframe {
	inline-size: 100%;
	block-size: 100%;
}

/* An 800px inner section — hence a 780px film, and a 20px inset where 800 never binds. */
.thermarest-campaign__feature {
	max-inline-size: 800px;
	margin-inline: auto;
	padding: 10px;
}

/* Two classes: core's flow layout zeroes a first child's `margin-block-start`, and this one is the widget's own 10px, which production kept. */
.thermarest-campaign__feature > .thermarest-campaign__feature-video {
	inline-size: 100%;
	margin-block-start: 10px;
}

@media (min-width: 768px) and (max-width: 1024px) {

	.thermarest-campaign__feature > .thermarest-campaign__feature-video {
		margin-block-start: 20px;
	}
}

@media (max-width: 767px) {

	.thermarest-campaign__feature > .thermarest-campaign__feature-video {
		margin-block-start: 0;
	}
}

.thermarest-timeline-section {
	padding-block: 30px 0;
}

@media (min-width: 1025px) {

	.thermarest-timeline-section {
		padding-block: 0 50px;
	}
}

/* On phones the widget's *column* is hidden, not its section: production still renders a 30px empty band there, and everything below it sits 30px lower than it would otherwise. */
@media (max-width: 767px) {

	.thermarest-timeline-section .thermarest-timeline {
		display: none;
	}
}

/* -- campaign pages: the closing call to action ---------------------------- */

/* The block both pages end with, word for word: an accent heading, a 900px paragraph and a black pill. */
.thermarest-campaign-cta .wp-block-heading.thermarest-campaign-cta__heading {
	margin-block: 0;
	color: var(--wp--preset--color--accent);
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 5px;
	line-height: 1;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.thermarest-campaign-cta .wp-block-heading.thermarest-campaign-cta__heading {
		font-size: 40px;
	}
}

.thermarest-campaign-cta__text {
	max-inline-size: 900px;
	margin-block-end: 0.9rem;
	margin-inline: auto;
	color: #3e3e3e;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

@media (min-width: 1025px) {

	.thermarest-campaign-cta__text {
		font-size: 18px;
	}
}

.thermarest-campaign-cta .wp-block-buttons {
	justify-content: center;
}

/* -- campaign pages: the hero gallery -------------------------------------- */

/* Campaign gallery: makeover/carousel, arrows only — no dots, no band under the track. */
.thermarest-campaign-gallery {
	--makeover-carousel-arrow-size: 22px;
	--makeover-carousel-arrow-inset: 10px;

	color: rgb(237 237 237 / 90%);
}

/* `image_stretch: no`: the photo keeps its own width and centres in the slide, which is as wide as the 1080px container. */
.thermarest-campaign-gallery .wp-block-makeover-carousel-slide__image {
	margin-inline: auto;
}

/* -- 50-lecie: the timeline ------------------------------------------------ */

/* makeover/timeline. */
.thermarest-timeline {
	--makeover-timeline-marker-background: #efeff1;
	--makeover-timeline-line-color: #efeff1;
	--makeover-timeline-arrow-box: 36px;
	--makeover-timeline-arrow-size: 22px;

	color: var(--wp--preset--color--accent);
}

/* `columns_tablet: 2` on the widget, against the 4 the block writes for desktop. */
@media (max-width: 1024px) {

	.thermarest-timeline .wp-block-makeover-timeline__track {
		--makeover-timeline-columns: 2;
	}
}

/* 15px over the cards and under the dates is the widget's own row padding. */
.thermarest-timeline .wp-block-makeover-timeline-item__card {
	margin-block-start: 15px;
	padding: 30px;
	background-color: #f8f8f8;
	text-align: center;
}

.thermarest-timeline .wp-block-makeover-timeline-item__image {
	margin-block-end: 10px;
}

.thermarest-timeline .wp-block-makeover-timeline-item__text {
	color: var(--wp--custom--page--text-color);
	font-size: 16px;
	line-height: 1.5;
}

/* The marker is 40px and the icon inside it renders at the 16px the widget set. */
.thermarest-timeline .wp-block-makeover-timeline-item__marker {
	color: #34314b;
	font-size: 16px;
}

.thermarest-timeline .wp-block-makeover-timeline-item__button {
	padding: 15px 30px;
	border-radius: 3px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.3s, color 0.3s;
}

.thermarest-timeline .wp-block-makeover-timeline-item__button:hover,
.thermarest-timeline .wp-block-makeover-timeline-item__button:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.thermarest-timeline .wp-block-makeover-timeline-item__meta {
	margin-block: 15px;
	color: var(--wp--custom--page--text-color);
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

/* -- prose: the shape of page and post content ----------------------------- */

/* Long-tail pages and posts are converted HTML; this is their type scale. */
.thermarest-prose-scale h1,
.thermarest-prose-scale h2,
.thermarest-prose-scale h3,
.thermarest-prose-scale h4,
.thermarest-prose-scale h5,
.thermarest-prose-scale h6 {
	margin-block: 0.5rem 1rem;
	font-weight: 500;
	line-height: 1.2;
}

.thermarest-prose-scale h1 {
	font-size: 2.5rem;
}

.thermarest-prose-scale h2 {
	font-size: 2rem;
}

.thermarest-prose-scale h3 {
	font-size: 1.75rem;
}

.thermarest-prose-scale h4 {
	font-size: 1.5rem;
}

.thermarest-prose-scale h5 {
	font-size: 1.25rem;
}

.thermarest-prose-scale h6 {
	font-size: 1rem;
}

.thermarest-prose-scale {
	line-height: 1.5;
}

.thermarest-prose-scale p,
.thermarest-prose-scale ul,
.thermarest-prose-scale ol,
.thermarest-prose-scale figure,
.thermarest-prose-scale table,
.thermarest-prose-scale blockquote {
	margin-block: 0 0.9rem;
}

.thermarest-prose-scale li {
	margin-block: 0;
}

/* Core's flow layout puts a blockGap between every sibling. */
.thermarest-prose-scale > * + * {
	margin-block-start: 0;
}

/* -- archive: the post cards ----------------------------------------------- */

.thermarest-archive__title {
	margin-block: 0.5rem 1rem;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.2;
}

.wp-block-post-template.is-layout-grid {
	gap: 35px 30px;
}

.thermarest-cards .wp-block-post {
	overflow: hidden;
	border-radius: 3px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}

.thermarest-cards .thermarest-card__thumb {
	margin-block: 0;
}

.thermarest-cards .thermarest-card__thumb img {
	inline-size: 100%;
	object-fit: cover;
}

.thermarest-cards .thermarest-card__text {
	margin-block: 20px 0;
	padding: 0 30px 30px;
}

.thermarest-cards .wp-block-post-title.thermarest-card__title {
	margin-block: 0 25px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}

/* `--e-global-color-secondary`, which the widget uses for a card's title. */
.thermarest-cards .thermarest-card__title a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.thermarest-cards .thermarest-card__meta {
	margin-block: 0 10px;
	color: #adadad;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
}

.thermarest-cards .thermarest-card__excerpt {
	margin-block: 0;
	color: #777;
	font-size: 14px;
	line-height: 1.5;
}

.thermarest-cards .thermarest-card__excerpt p {
	margin-block: 0;
}

.thermarest-cards .thermarest-card__more {
	display: inline-block;
	margin-block-start: 10px;
	color: var(--wp--preset--color--accent);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

.thermarest-pagination {
	margin-block-start: 40px;
	gap: 10px;
}

@media (max-width: 767px) {

	.thermarest-cards .thermarest-card__thumb img {
		aspect-ratio: 2 / 1;
	}
}

/* -- pages: the accent frame and the guide button -------------------------- */

/* `/materace-przewodnik/` is the third use of the full-bleed background hero and the second of the accent frame — the same `.thermarest-hero` and `.thermarest-band` Chunks 2 and 4 built. */
@media (min-width: 1025px) {

	.thermarest-hero--md .wp-block-heading.thermarest-hero__title {
		font-size: 52px;
	}
}

/* PDF glyph as a CSS mask, not an icon font. */
.thermarest-button--pdf .wp-block-button__link::after {
	content: "";
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-start: 0.4em;
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cg transform='translate(0 448) scale(1 -1)'%3E%3Cpath d='M181.9 191.9c-5 16 -4.90039 46.8994 -2 46.8994c8.39941 0 7.59961 -36.8994 2 -46.8994zM180.2 144.7c9.59961 -17.4004 21.7998 -31.2002 34.5 -40.7998c-23.9004 -4.7002 -44.6006 -14.9004 -62.9004 -21.9004c11.1006 19.4004 20.7002 42.5 28.4004 62.7002z M86.0996 19.9004c5.80078 15.6992 28.2002 33.8994 34.9004 40.1992c-21.7002 -34.7998 -34.9004 -41 -34.9004 -40.1992zM248 288h136v-328c0 -13.2998 -10.7002 -24 -24 -24h-336c-13.2998 0 -24 10.7002 -24 24v464c0 13.2998 10.7002 24 24 24h200v-136 c0 -13.2002 10.7998 -24 24 -24zM240 116.2c-20 12.2002 -33.2998 29 -42.7002 53.7998c4.5 18.5 11.6006 46.5996 6.2002 64.2002c-4.7002 29.3994 -42.4004 26.5 -47.7998 6.7998c-5 -18.2998 -0.400391 -44.0996 8.09961 -77 c-11.5996 -27.5996 -28.7002 -64.5996 -40.7998 -85.7998c-0.0996094 0 -0.0996094 -0.100586 -0.200195 -0.100586c-27.0996 -13.8994 -73.5996 -44.5 -54.5 -68c5.60059 -6.89941 16 -10 21.5 -10c17.9004 0 35.7002 18 61.1006 61.8008 c25.7998 8.5 54.0996 19.0996 79 23.1992c21.6992 -11.7998 47.0996 -19.5 64 -19.5c29.1992 0 31.1992 32 19.6992 43.4004c-13.8994 13.5996 -54.2998 9.7002 -73.5996 7.2002zM377 343c4.5 -4.5 7 -10.5996 7 -16.9004v-6.09961h-128v128h6c6.40039 0 12.5 -2.5 17 -7z M302.9 87.7002c0 0 -5.7002 -6.7998 -42.8008 9c40.3008 2.89941 46.9004 -6.2998 42.8008 -9z'/%3E%3C/g%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: -0.1em;
}

.thermarest-button--pdf .wp-block-button__link {
	letter-spacing: 0.5px;
}

/* -- konkurs: the prize rows ----------------------------------------------- */

/* `/konkurs-50-lat-thermarest/`: three `structure: 20` rows of image-boxes, each row closed by a 1px #DBDBDB rule. */
.wp-block-group.thermarest-prizes {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	border-block-end: 1px solid #dbdbdb;
}

@media (min-width: 768px) {

	.wp-block-group.thermarest-prizes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.thermarest-prizes .wp-block-makeover-image-box {
	gap: 0;
	padding: 20px;
	text-align: center;
}

.thermarest-prizes .wp-block-makeover-image-box__image {
	inline-size: 50%;
	margin-inline: auto;
}

.thermarest-prizes--narrow .wp-block-makeover-image-box__image {
	inline-size: 42%;
}

.thermarest-prizes .wp-block-makeover-image-box__title {
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

/* The empty half of the last row, which production drops below 1025. */
@media (max-width: 1024px) {

	.thermarest-prizes__spacer {
		display: none;
	}
}

/* A panel on #F9FAFA with 35px of padding, a 23/600 title and a 16px line under it, and a ghost button — all in the widget's own #3F444B, a grey the kit does not name. */
.thermarest-cta {
	padding: 35px;
	background-color: #f9fafa;
	color: #3f444b;
	text-align: center;
}

.thermarest-cta .wp-block-heading {
	margin-block: 0 15px;
	color: #3f444b;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.2;
}

.thermarest-cta p {
	margin-block: 0 15px;
	color: #3f444b;
	font-size: 16px;
	line-height: 1.5;
}

.thermarest-cta .wp-block-buttons {
	margin-block: 0;
}

.thermarest-cta .wp-block-button__link {
	border: 2px solid #3f444b;
	background-color: transparent;
	color: #3f444b;
}

.thermarest-cta .wp-block-button__link:hover,
.thermarest-cta .wp-block-button__link:focus-visible {
	background-color: #3f444b;
	color: var(--wp--preset--color--base);
}

/* The page's own custom CSS: links inside its `.content` section are the accent, underlined on hover. */
.thermarest-konkurs a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.thermarest-konkurs a:hover,
.thermarest-konkurs a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* `/technologia/` and `/media/` set the same rule on themselves, and `/technologia/` also spaces the inline logos it floats beside its text. */
/* `:not(.wp-block-button__link)` keeps the page's own `a { color }` off buttons. */
.thermarest-page__content--accent-links a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--accent);
}

.thermarest-page__content--accent-links a:not(.wp-block-button__link):hover,
.thermarest-page__content--accent-links a:not(.wp-block-button__link):focus-visible {
	text-decoration: underline;
}

.thermarest-page__content .wp-block-separator {
	margin-block: 0 20px;
	border-block-start: 1px solid #222;
	border-block-end: 0;
	opacity: 1;
}

.thermarest-page__content img.pad-right {
	margin: 10px;
}

/* `/media/`: `li { line-height: 1.85 }`. */
.thermarest-page__content--airy-lists li {
	line-height: 1.85;
}

/* -- media: the plain accordion -------------------------------------------- */

/* The /media/ variant: plain bordered items. */
.thermarest-accordion--plain .wp-block-accordion-item {
	border: 1px solid #d5d8dc;
	background-color: transparent;
}

.thermarest-accordion--plain .wp-block-accordion-item + .wp-block-accordion-item {
	border-block-start: 0;
}

/* Core wraps the toggle in the heading level the block was given. */
.thermarest-accordion--plain .wp-block-accordion-heading {
	margin-block: 0;
	font-size: inherit;
	line-height: inherit;
}

.thermarest-accordion--plain .wp-block-accordion-heading__toggle {
	padding: 15px 20px;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.thermarest-accordion--plain .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	color: var(--wp--preset--color--accent);
}

.thermarest-accordion--plain .wp-block-accordion-panel {
	padding: 15px 20px;
	border-block-start: 1px solid #d5d8dc;
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 400;
}

/* The page's own custom CSS: `li { line-height: 1.85 }`. */
.thermarest-accordion--plain .wp-block-accordion-panel p,
.thermarest-accordion--plain .wp-block-accordion-panel li {
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85;
}

@media (max-width: 767px) {

	.thermarest-accordion--plain .wp-block-accordion-heading__toggle {
		padding: 12px 15px;
	}

	.thermarest-accordion--plain .wp-block-accordion-panel {
		padding: 7px 15px;
	}
}

/* -- popups: this site's tuning of makeover-popups -------------------------- */

/* `makeover-popups` defaults every colour to a theme.json preset, which gets the accent, the ink and the muted placeholder right for free. */
.makeover-popup {
	--makeover-popup-surface: #f1f1f1;
	--makeover-popup-backdrop: rgb(51 51 51 / 80%);
	--makeover-popup-shadow: 0 5px 20px rgb(32 32 32 / 45%);
	--makeover-popup-line: #d5d8dc;
}

/* The form sits on the panel, not on white — production's inputs were `input_background_color: #FFFFFF` at `input_background_opacity: 0.7` over the photograph's lower half, which reads as a near-white field on grey. */
.makeover-popup__input {
	background-color: #fff;
}