/**
 * Core components: layout, type, actions, forms, content (cards, tiles), CTA.
 *
 * Moved from the mockup's components.css (design-261005-final). Selectors and
 * values are unchanged; every deviation is listed in docs/komponenty.md.
 * Loads on every page.
 *
 * @package plantworld
 */

/* ── Layout ── */
.pw-page {
	background: var(--pw-paper);
	color: var(--pw-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
}

/*
 * One site width: --container (1440px). Chrome, breadcrumbs and content share the same left edge.
 * Section recipe (= one Gutenberg block pattern):
 * <section class="pw-section [mod]">  → core/group, align full: background + vertical padding
 *   <div class="pw-container">        → inner group, constrained layout: width + side padding
 */
.pw-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 40px;
}

/* Long prose only (blog post, legal pages). */
.pw-container--narrow {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 40px;
}

/* 70% reading column: every FAQ list and every quote wizard. */
.pw-col-70 {
	width: 70%;
	margin-inline: auto;
}

.pw-col-70 p {
	max-width: none;
}

.pw-section {
	padding: 96px 0;
}

/*
 * Hairline between sections only when both have the same background (paper after paper, alt after alt).
 * A background change is a separator by itself; dark sections never get a line.
 * Zero specificity (:where), so --flush-top can still switch it off.
 */
:where(.pw-section:not(.pw-section--alt, .pw-section--dark, .pw-section--dark-soft)) + :where(.pw-section:not(.pw-section--alt, .pw-section--dark, .pw-section--dark-soft)),
:where(.pw-section--alt, .pw-crumbs) + :where(.pw-section--alt) {
	/* Review of 29.10.2026: the weaker line, so it does not compete with the line beside a section heading. */
	border-top: 1px solid var(--hairline-weak);
}

.pw-section--alt {
	--surface-field: var(--surface-field-on-alt);
	background: var(--pw-paper-alt);
}

.pw-section--dark {
	--surface-field: var(--surface-field-on-dark);
	background: var(--pw-ink);
	color: var(--text-on-dark);
}

/* Dark section one step lighter: separates the end of the content from the footer on --pw-ink. */
.pw-section--dark-soft {
	--surface-field: var(--surface-field-on-dark);
	background: #23201B;
	color: var(--text-on-dark);
}

.pw-section--flush {
	padding: 0;
}

/* Switches off the automatic same-background hairline. Only when the content draws its own line (e.g. paths in the quote hub). */
.pw-section--flush-top {
	border-top: 0;
}

/* Section without bottom padding: the content (e.g. a tile grid) runs into the next section. */
.pw-section--flush-bottom {
	padding-bottom: 0;
}

/* Subpage intro without a breadcrumb bar: smaller bottom, because the next section starts with a hairline. */
.pw-section--intro {
	padding-bottom: 64px;
}

/* Breadcrumb bar under the header. Same recipe as a section: bar = background, .pw-container = width. */
.pw-crumbs {
	padding: 16px 0;
	background: var(--pw-paper-alt);
}

.pw-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.pw-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.pw-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.pw-grid-2--tight,
.pw-grid-3--tight,
.pw-grid-4--tight {
	gap: 16px;
}

.pw-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.pw-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pw-stack--tight {
	gap: 12px;
}

.pw-stack--loose {
	gap: 40px;
}

.pw-row {
	display: flex;
	gap: 16px;
	align-items: center;
}

.pw-row--wrap {
	flex-wrap: wrap;
}

.pw-row--between {
	justify-content: space-between;
}

.pw-row--gap-lg {
	gap: 24px;
}

/* ── Type ── */
.pw-display {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 72px;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--pw-ink);
	margin: 0;
	text-wrap: pretty;
}

.pw-h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--pw-ink);
	margin: 0;
	text-wrap: pretty;
}

.pw-h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--pw-ink);
	margin: 0;
	text-wrap: pretty;
}

.pw-h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--pw-ink);
	margin: 0;
}

.pw-lead {
	font-size: 20px;
	line-height: 1.6;
	color: var(--pw-text);
	margin: 0;
	max-width: 820px;
	text-wrap: pretty;
}

.pw-body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--pw-text);
	margin: 0;
}

.pw-small {
	font-size: 14px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--pw-text);
	margin: 0;
}

.pw-meta {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
	margin: 0;
}

/*
 * Stone is never text. Meta and eyebrow: --text-lead-muted on light, --text-on-dark-muted on ink,
 * white on photos (hero rules in pages.css). --text-lead-muted is defined in tokens.css.
 */
/*
 * System rule: every photo in a card or tile has a fixed aspect-ratio and object-fit: cover.
 * The client will not upload images in matching proportions, so the system crops: it never stretches
 * and never leaves different heights in one row. The named exception: .pw-img--full (hero, full image).
 */
.pw-media {
	width: 100%;
	aspect-ratio: var(--media-ratio, 4 / 3);
	object-fit: cover;
	display: block;
}

.pw-img--full {
	aspect-ratio: auto;
	object-fit: contain;
}

/*
 * A photo with another crop on phones (<picture>, inc/images.php): the
 * wrapper takes no box, so the <img> sits in its frame as without it.
 */
.pw-picture {
	display: contents;
}

/*
 * Short labels are paragraphs in the editor and <span> on the page
 * (plantworld_inline_text_classes() in inc/blocks.php). As paragraphs they
 * would get Neve's paragraph margin in the editor; the <span> has none.
 */
p:is(.pw-eyebrow, .pw-meta, .pw-service-card__title, .pw-placeholder, .pw-ref__name, .pw-toc__label, .pw-summary__title, .pw-legend__name, .pw-legend__desc, .pw-plants__name, .pw-plants__latin, .pw-review__avatar, .pw-review__meta, .pw-review__source, .pw-review__rule) {
	margin: 0;
}

/*
 * A photo placed with the Image block (stage B): the mockup's class of the
 * photo (.pw-media, .p-home__path-img, .pw-tile__img) sits on the block's
 * <figure>, which takes the size and ratio; the photo fills it and is
 * cropped as the <img> of the mockup was. The figure's own margin goes, as
 * the <img> had none. In a tile the figure fills the tile's height.
 */
.wp-block-image:where(.pw-media, .p-home__path-img, .pw-tile__img) {
	margin: 0;
}

.wp-block-image:where(.pw-media, .p-home__path-img, .pw-tile__img) > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: inherit;
	object-fit: inherit;
	object-position: inherit;
}

.wp-block-image:where(.pw-tile__img) > img {
	height: 100%;
}

.pw-eyebrow {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
	margin: 0;
}

:is(.pw-section--dark, .pw-section--dark-soft, .pw-footer, .pw-drawer, .pw-megamenu--dark, .pw-panel--dark, .pw-topbar) :is(.pw-meta, .pw-eyebrow) {
	color: var(--text-on-dark-muted);
}

.pw-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

.pw-numeral {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--pw-stone);
}

.pw-note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-lead-muted);
	margin: 0;
	max-width: 420px;
}

.pw-note--dark {
	color: var(--text-on-dark-muted);
}

.pw-on-dark {
	color: var(--text-on-dark);
}

.pw-on-dark-muted {
	color: var(--text-on-dark-muted);
}

/*
 * Shared section heading: heading column 2/3, side note 1/3.
 * Tablet narrows the split, mobile stacks it; the heading always dominates.
 */
.pw-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: baseline;
	margin-bottom: 48px;
}

.pw-section-head .pw-h2 {
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(66.666% - 88px);
}

.pw-section-head .pw-note {
	flex: 0 0 calc(33.333% - 32px);
	max-width: none;
	margin-left: auto;
}

.pw-section-head__num {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.pw-section-head .pw-note {
	margin-left: auto;
}

/* Variant without a side note: after the heading a hairline runs to the container's right edge, on the baseline. */
.pw-section-head--solo .pw-h2 {
	flex: 0 1 auto;
}

.pw-section-head--solo::after {
	content: "";
	flex: 1 1 48px;
	height: 1px;
	background: var(--hairline);
	align-self: baseline;
}

.pw-section--dark .pw-section-head--solo::after,
.pw-section--dark-soft .pw-section-head--solo::after {
	background: var(--hairline-on-dark);
}

/* Section numbers count from DOM order, so reordering sections needs no content edits. */
.pw-page {
	counter-reset: pw-sect;
}

.pw-numeral--auto::before {
	counter-increment: pw-sect;
	content: counter(pw-sect, decimal-leading-zero);
}

/* Subpage header: H1 + lead 2/3, facts 1/3 stacked and separated by hairlines. */
.pw-pagehead {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: end;
}

.pw-pagehead__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Quick facts. In a row by default; --stack in a column (inside .pw-pagehead). The icon is not clickable, so it is not green. */
.pw-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 0;
	padding: 20px 0 0;
	list-style: none;
	border-top: 1px solid var(--hairline);
}

.pw-fact {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pw-text);
}

.pw-fact svg {
	flex: 0 0 auto;
	color: var(--text-lead-muted);
}

/* Built from blocks (stage B): the icon sits in an Icon block, the text in a paragraph with no margin of its own. */
:is(.pw-facts, .pw-hero__facts) > li > p {
	margin: 0;
}


.pw-facts--stack {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	padding-top: 0;
	border-top: 0;
}

.pw-facts--stack .pw-fact {
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline);
}

.pw-facts--stack .pw-fact:first-child {
	border-top: 1px solid var(--hairline);
}

/* Process steps: the same component on the homepage (How we work) and on the quote pages. */
.pw-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw-steps--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pw-step {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 40px;
	border-left: 1px solid var(--hairline);
}

.pw-step:first-child {
	padding-left: 0;
	border-left: 0;
}

.pw-step:last-child {
	padding-right: 0;
}

.pw-step__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pw-step__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: var(--action-on-dark);
}

.pw-step__num {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--pw-stone);
}

.pw-section--dark .pw-step,
.pw-section--dark-soft .pw-step {
	border-color: var(--hairline-on-dark);
}

/*
 * Numbered steps: <ol>, the number comes from a CSS counter on ::before. An ornament without a text node,
 * so Lighthouse and axe do not count it as low-contrast text.
 */
ol.pw-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pw-step;
}

ol.pw-steps > .pw-step {
	counter-increment: pw-step;
}

.pw-step__num:empty::before {
	content: counter(pw-step, decimal-leading-zero);
}

/* Partner logos: homepage and Partnership page. */
.pw-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.pw-logo {
	background: var(--pw-paper);
	border: 1px solid var(--hairline);
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.pw-logo img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(1);
	transition: filter var(--dur) var(--ease);
}

.pw-logo:hover img {
	filter: none;
}

/* ── Action ── */
/*
 * No link underlines (client decision). In the mockup this beats the design system's base
 * `a { border-bottom: 1px }`. TextLink draws its own rule; wrap its instances in .pw-link-quiet
 * to remove it. The mockup needed an important flag there against React's inline style; .pw-textlink is
 * a plain class (ds.css), so .pw-link-quiet a (0-1-1) wins by specificity.
 *
 * The rule stays at 0-0-1 under :where() (stage H1.1): at 0-1-1 it beat every component class
 * (0-1-0) with a border of its own, so each of them lost its bottom edge unless it was on a
 * list of exceptions (.pw-callback-fab, .pw-toc__link were not). Now any class with a border
 * keeps it, plain links in text still have no line, and there is no list to keep up.
 */
:where(.pw-page) a {
	border-bottom: 0;
}

.pw-link-quiet a {
	border-bottom: 0;
}

.pw-link {
	color: var(--action-on-light);
	text-decoration: none;
	border-bottom: 0;
	transition: var(--transition-color);
}

.pw-link:hover {
	color: var(--action-on-light-hover);
}

.pw-link--on-dark {
	color: var(--action-on-dark);
}

.pw-link--on-dark:hover {
	color: var(--pw-green-dark-hover);
}

.pw-link--plain {
	color: var(--text-on-dark);
}

.pw-link--plain:hover {
	color: var(--action-on-dark);
}

/*
 * A link inside a sentence (consents, running text, FAQ answers) cannot rely on color alone: WCAG 1.4.1.
 * Standalone links (CTA with an arrow, navigation, footer lists) stay without an underline.
 */
p .pw-link,
label .pw-link,
.pw-link--inline {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Skip link: the first focusable element on the page. Invisible until keyboard focus. */
.pw-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 300;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	padding: 12px 20px;
	background: var(--pw-ink);
	color: var(--text-on-dark);
	border-bottom: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.pw-skip:focus,
.pw-skip:focus-visible {
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	outline: 2px solid var(--focus-ring-on-dark);
	outline-offset: 2px;
}

/*
 * Every anchor target: sticky header height + 24px, so it does not hide under the header.
 * Smooth scrolling only without prefers-reduced-motion.
 */
#tresc,
:target,
main [id] {
	scroll-margin-top: calc(var(--header-h-sticky) + 24px);
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-section--dark :where(a, button):focus-visible,
.pw-section--dark-soft :where(a, button):focus-visible,
.pw-topbar :where(a, button):focus-visible,
.pw-footer :where(a, button):focus-visible,
.pw-drawer :where(a, button):focus-visible,
.pw-megamenu--dark :where(a, button):focus-visible {
	outline-color: var(--focus-ring-on-dark);
}

/* ── Content: cards, tiles, swatches ── */
.pw-tile {
	border-bottom: 0;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--tile-ratio, 4 / 5);
	display: block;
	background: var(--pw-ink);
	text-decoration: none;
}

.pw-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease);
}

.pw-tile__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 22, 0.55);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.pw-tile__meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pw-tile:hover .pw-tile__img {
	transform: scale(1.04);
}

.pw-tile:hover .pw-tile__overlay,
.pw-tile:hover .pw-tile__meta,
.pw-tile--hover .pw-tile__overlay,
.pw-tile--hover .pw-tile__meta {
	opacity: 1;
	transform: none;
}

.pw-tile--hover .pw-tile__img {
	transform: scale(1.04);
}

.pw-tile__cat {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--action-on-dark);
}

.pw-tile__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--pw-white);
}

.pw-tile__figure {
	font-size: 14px;
	font-weight: 500;
	color: var(--pw-white);
}

.pw-tile__band {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px;
	background: var(--pw-ink);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pw-placeholder {
	background: var(--pw-paper-alt);
	border: 1px solid var(--hairline-weak);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-lead-muted);
}

.pw-placeholder--43 {
	aspect-ratio: 4 / 3;
}

.pw-placeholder--45 {
	aspect-ratio: 4 / 5;
	align-items: flex-start;
	padding-top: 24px;
}

.pw-placeholder--fill {
	position: absolute;
	inset: 0;
}

.pw-tile__band ~ .pw-placeholder--fill,
.pw-placeholder--fill:has(~ .pw-tile__band) {
	align-items: flex-start;
	padding: 24px 24px 130px;
}

.pw-swatch-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	background: var(--hairline-weak);
	border: 1px solid var(--hairline);
}

.pw-swatch {
	background: var(--pw-paper);
}

.pw-swatch__chip {
	height: 96px;
	display: flex;
	align-items: flex-end;
	padding: 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.pw-swatch__chip--paper {
	background: var(--pw-paper);
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-swatch__chip--alt {
	background: var(--pw-paper-alt);
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-swatch__chip--ink {
	background: var(--pw-ink);
}

.pw-swatch__chip--text {
	background: var(--pw-text);
}

.pw-swatch__chip--stone {
	background: var(--pw-stone);
}

.pw-swatch__chip--field {
	background: var(--border-field);
}

.pw-swatch__chip--field-dark {
	background: var(--border-field-on-dark);
}

.pw-swatch__chip--muted {
	background: var(--text-lead-muted);
}

.pw-swatch__chip--green-light {
	background: var(--action-on-light);
	color: var(--pw-white);
}

.pw-swatch__chip--green-light-hover {
	background: var(--action-on-light-hover);
}

.pw-swatch__chip--green {
	background: var(--action-on-dark);
	color: var(--pw-ink);
}

.pw-swatch__chip--green-hover {
	background: var(--pw-green-dark-hover);
}

.pw-swatch__chip--error {
	background: var(--pw-error);
}

.pw-swatch__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pw-specimen {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 32px;
	padding: 28px 0;
	border-top: 1px solid var(--hairline-weak);
}

.pw-specimen:first-child {
	border-top: 0;
}

.pw-panel {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.pw-panel--light {
	background: var(--pw-paper);
}

.pw-panel--dark {
	background: var(--pw-ink);
}

.pw-panel-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--hairline);
}

.pw-plate {
	background: var(--pw-paper);
	padding: 16px;
	display: inline-flex;
	align-self: flex-start;
}

.pw-stat-bar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding: 40px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

/* ── Forms ── */
.pw-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.pw-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pw-form__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	padding-top: 8px;
}

.pw-progress {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Stage G [67]: the full width of the form, as its fields. */
	max-width: none;
	margin-bottom: 48px;
}

.pw-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.pw-progress__track {
	height: 2px;
	background: var(--hairline-weak);
}

.pw-progress__fill {
	height: 100%;
	background: var(--action-on-light);
	width: var(--fill, 0);
}

.pw-choice-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.pw-choice-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Review of 30.10.2026: a question with two answers ("tak" / "nie") splits the row in half, on every width. */
.pw-choice-grid:has(> .pw-choice:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pw-choice {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 96px;
	padding: 24px;
	background: transparent;
	border: 1px solid var(--border-field);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pw-text);
	text-align: left;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-choice:hover {
	border-color: var(--action-on-light);
}

.pw-choice[aria-checked="true"],
.pw-choice[aria-pressed="true"],
.pw-choice:has(> .pw-choice__input:checked) {
	border: 2px solid var(--action-on-light);
	background: var(--pw-paper-alt);
	padding: 23px;
}

.pw-choice__check {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--action-on-light);
	display: none;
}

.pw-choice[aria-checked="true"] .pw-choice__check,
.pw-choice[aria-pressed="true"] .pw-choice__check,
.pw-choice:has(> .pw-choice__input:checked) .pw-choice__check {
	display: inline-flex;
}

/*
 * Stage C: in the forms of the site a tile is a <label> around a native
 * radio or checkbox (works without JavaScript, arrow keys in a radio
 * group); the input is visually hidden inside the tile and the tile shows
 * its state and keyboard focus.
 */
.pw-choice__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.pw-choice:has(> .pw-choice__input:focus-visible) {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-choice--row {
	min-height: 64px;
	align-items: center;
}

/* Choice tiles on a dark background. */
.pw-choice-grid--dark .pw-choice {
	border-color: var(--border-field-on-dark);
	color: var(--text-on-dark);
}

.pw-choice-grid--dark .pw-choice:hover {
	border-color: var(--action-on-dark);
}

.pw-choice-grid--dark .pw-choice[aria-checked="true"],
.pw-choice-grid--dark .pw-choice[aria-pressed="true"],
.pw-choice-grid--dark .pw-choice:has(> .pw-choice__input:checked) {
	border: 2px solid var(--action-on-dark);
	background: rgba(255, 255, 255, 0.04);
}

.pw-choice-grid--dark .pw-choice__check {
	color: var(--action-on-dark);
}

.pw-choice-grid--dark .pw-choice:has(> .pw-choice__input:focus-visible) {
	outline-color: var(--focus-ring-on-dark);
}

.pw-dropzone {
	border: 1px dashed var(--border-field);
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 24px;
	color: var(--text-lead-muted);
	background: transparent;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-dropzone:hover,
.pw-dropzone--over {
	border-color: var(--action-on-light);
	background: var(--pw-paper-alt);
}

.pw-upload-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.pw-upload__bar {
	height: 2px;
	background: var(--hairline-weak);
	margin-top: 6px;
}

.pw-upload__fill {
	height: 100%;
	background: var(--action-on-light);
	width: var(--fill, 0);
}

/* ── CTA before the footer (homepage pattern; .p-home__cta is its alias, to be migrated) ── */
.pw-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.pw-cta__title {
	max-width: 24ch;
	color: var(--text-on-dark);
}

.pw-cta__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

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

.pw-section-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin-top: 48px;
}

.pw-section-foot--center {
	justify-content: center;
}

/* ── Desktop ≤1439 ── */
@media (max-width: 1439px) {

	.pw-container,
	.pw-container--narrow {
		padding-left: 32px;
		padding-right: 32px;
	}

	.pw-swatch-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ── Tablet ≤959: the header switches to mobile ── */
@media (max-width: 959px) {

	.pw-section {
		padding: 64px 0;
	}

	.pw-section--intro {
		padding: 64px 0 48px;
	}

	.pw-section--flush-bottom {
		padding-bottom: 0;
	}

	.pw-col-70 {
		width: 100%;
	}

	.pw-pagehead {
		grid-template-columns: minmax(0, 1fr);
	}

	.pw-section-head--solo::after {
		flex: 1 1 100%;
		align-self: auto;
	}

	.pw-steps,
	.pw-steps--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-step {
		padding: 24px 0;
		border-left: 0;
		border-top: 1px solid var(--hairline);
	}

	.pw-step:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.pw-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pw-display {
		font-size: 52px;
	}

	.pw-h1 {
		font-size: 40px;
	}

	.pw-h2 {
		font-size: 32px;
	}

	.pw-h3 {
		font-size: 24px;
	}

	.pw-lead {
		font-size: 18px;
	}

	.pw-grid-3,
	.pw-grid-4,
	.pw-panel-pair,
	.pw-choice-grid,
	.pw-choice-grid--3,
	.pw-upload-grid,
	.pw-stat-bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Text + media: below 960px the media drops under the text at full width instead of shrinking beside it. */
	.pw-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.pw-specimen {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.pw-section-head .pw-note {
		margin-left: 0;
	}

	.pw-section-head .pw-h2,
	.pw-section-head .pw-note {
		flex: 1 1 100%;
		max-width: none;
	}

	.pw-tile__meta {
		padding: 24px;
	}

	.pw-tile__title {
		font-size: 24px;
	}
}

/* ── Mobile ≤575 ── */
@media (max-width: 575px) {

	.pw-container,
	.pw-container--narrow {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pw-section {
		padding: 48px 0;
	}

	.pw-section--intro {
		padding: 64px 0 48px;
	}

	.pw-section--flush-bottom {
		padding-bottom: 0;
	}

	.pw-steps,
	.pw-steps--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.pw-facts {
		flex-direction: column;
		gap: 12px;
	}

	.pw-facts--stack {
		gap: 0;
	}

	.pw-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-display {
		font-size: 40px;
	}

	.pw-h1 {
		font-size: 32px;
	}

	.pw-h2 {
		font-size: 26px;
	}

	.pw-h3 {
		font-size: 20px;
	}

	.pw-lead {
		font-size: 17px;
	}

	.pw-grid-2,
	.pw-grid-3,
	.pw-grid-4,
	.pw-swatch-grid,
	.pw-panel-pair,
	.pw-choice-grid,
	.pw-choice-grid--3,
	.pw-stat-bar {
		grid-template-columns: minmax(0, 1fr);
	}

	.pw-upload-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-panel {
		padding: 24px;
	}

	.pw-section-head .pw-h2,
	.pw-section-head .pw-note {
		flex: 1 1 100%;
	}

	.pw-section-head .pw-h2 {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	* {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}

/* Long labels (EN / UA): buttons, menu links and card titles wrap between words and never leave their container. */
.pw-row--wrap > * {
	max-width: 100%;
}

.pw-row--wrap a,
.pw-row--wrap .wp-block-button__link {
	white-space: normal;
	text-align: center;
}


/*
 * Stage G [13, 30] (Damian, 29.10.2026): lines only between the items of a
 * list – none above the first (the heading above it is enough) and none
 * after the last. One rule for the whole site; a subheading (H3) is set
 * off by the space under it, not by a line.
 */
.pw-facts--stack .pw-fact:first-child {
	border-top: 0;
}

.pw-facts--stack .pw-fact:last-child {
	border-bottom: 0;
}

/*
 * Stage G [45] (Damian): the side note of a section heading sits on the
 * right edge, centred on the heading, in one line where it fits (the
 * texts were shortened for it). From 960px; below that it goes under the
 * heading as before, aligned left.
 */
@media (min-width: 960px) {
	.pw-section-head:has(> .pw-note) {
		align-items: center;
	}

	.pw-section-head .pw-note {
		flex: 0 1 auto;
		max-width: 45%;
		text-align: right;
		text-wrap: balance;
	}
}

/*
 * Review of 29.10.2026: the tile is white, so a logo on a white background
 * fills it without a frame of its own; the colour comes back slowly on
 * hover (prefers-reduced-motion shortens it, base rule in core.css).
 */
.pw-logo {
	background: var(--pw-white);
}

.pw-logo img {
	transition: filter calc(var(--dur-slow) * 2) var(--ease);
}

/* Stage G [1]: as many columns as logos (up to six in a row), so a row of five ends evenly. */
@media (min-width: 960px) {
	.pw-logos {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

/* Below 960px the last row of logos is centred instead of hanging on the left. */
@media (max-width: 959px) {
	.pw-logos {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.pw-logos > .pw-logo {
		flex: 0 0 calc((100% - 32px) / 3);
	}
}

@media (max-width: 575px) {
	.pw-logos > .pw-logo {
		flex-basis: calc((100% - 16px) / 2);
	}
}