/**
 * Pages — Kontakt, Doprava a platba, Pre firmy, Reklamácia a vrátenie tovaru
 * and the legal documents of template-legal.php (no mockup; DESIGN-SYSTEM.md §7).
 *
 * Reuses .pm-button, .pm-section-head, .pm-b2b__glow / __badge / __list /
 * __actions / __stat-icon from pages/home.css and .pm-panel, .pm-kv,
 * .pm-choice, .pm-field, .pm-form-grid from components/form.css. Only the
 * shapes these three pages add live here. Mobile-first; ladders mirror §4.
 *
 * @package Printmania
 */

.pm-info {
	padding-bottom: var( --space-40 );
}

.pm-info__section {
	padding-top: var( --space-40 );
}

/* Content pages (O nás, Vernostný program, …) carry breadcrumbs inside the hero. */
/* automatic.css pads every top-level <section>; keep the crumbs at the same height as elsewhere. */
.pm-info-hero:has( > .pm-cat__crumbs ) {
	padding-top: 0;
}

.pm-info-hero > .pm-cat__crumbs {
	position: relative;
	z-index: 2;
}

.pm-info-hero > .pm-cat__crumbs + .pm-info-hero__inner {
	padding-top: var( --space-16 );
}

/* =========================================================================
 * HERO — the homepage B2B band's light treatment with a mascot
 * ====================================================================== */

.pm-info-hero {
	position: relative;
	overflow: hidden;
	background-color: var( --color-page );
	border-bottom: var( --border-width ) solid var( --color-border );
}

.pm-info-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var( --space-24 );
	align-items: center;
	padding-block: var( --space-40 );
}

.pm-info-hero__title {
	margin-bottom: var( --space-16 );
	font-size: var( --text-display-b2b );
	line-height: var( --lh-b2b );
	letter-spacing: var( --ls-display-lg );
}

.pm-info-hero__lead {
	max-width: var( --width-prose-xl );
	font-size: var( --text-md-5 );
	line-height: var( --lh-relaxed );
	color: var( --color-text-muted );
}

.pm-info-hero__lead + .pm-b2b__actions,
.pm-info-hero__lead + .pm-info-hero__list {
	margin-top: var( --space-24 );
}

.pm-info-hero__list {
	margin-bottom: 0;
}

.pm-info-hero__link {
	font-weight: var( --fw-bold );
	color: var( --color-primary );
}

.pm-info-hero__mascot {
	display: none;
}

.pm-info-hero__mascot-img {
	display: block;
	width: auto;
	max-height: var( --height-info-mascot );
	margin-inline: auto;
	filter: var( --drop-shadow-stage );
}

/* Compact hero (Kontakt) — no mascot; the contact cards sit in the band
   right under the lead so the first screen already shows phone and e-mail. */
.pm-info-hero--compact .pm-info-hero__inner {
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --space-24 );
	padding-block: var( --space-32 ) var( --space-36 );
}

.pm-info-hero--compact .pm-info-hero__title {
	margin-bottom: var( --space-10 );
}

/* --- Hero aside: a large mascot beside the intro (O nás, Vernostný program).
 * Hidden on phones like the other info heroes' mascots. --------------------- */

.pm-info-hero--aside .pm-info-hero__mascot-img {
	max-height: 260px;
}

/* --- Vernostný program: value table + "Ako fungujú body" card ------------ */

.pm-loyalty__value {
	display: grid;
	gap: var( --gap-card );
	align-items: stretch;
}

.pm-loyalty__value .pm-info-table {
	max-width: none;
}

.pm-infocard {
	padding: var( --space-24 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-3xl );
	background-color: var( --surface );
}

.pm-infocard__title {
	margin: 0 0 var( --space-12 );
	font-size: var( --text-xs );
	font-weight: var( --fw-bold );
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --color-text-meta );
}

.pm-infocard__rates {
	display: grid;
	gap: var( --space-8 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-infocard__rate {
	padding: var( --space-12 ) var( --space-14 );
	border-radius: var( --radius-xl );
	background-color: var( --surface-sunken );
}

.pm-infocard__rate--double {
	background-color: var( --color-primary-tint );
}

.pm-infocard__value {
	display: block;
	font-size: var( --text-4xl );
	font-weight: var( --fw-black );
	line-height: 1.2;
	color: var( --color-text );
}

.pm-infocard__rate--double .pm-infocard__value {
	color: var( --color-primary );
}

.pm-infocard__label {
	display: block;
	margin-top: 2px;
	font-size: var( --text-sm );
	color: var( --color-text-muted );
}

.pm-infocard__example {
	margin-top: var( --space-16 );
	padding-top: var( --space-14 );
	border-top: var( --border-width ) solid var( --color-border );
}

.pm-infocard__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --text-sm );
}

.pm-infocard__flow li + li::before {
	content: "→";
	margin-right: 6px;
	color: var( --color-text-meta );
}

.pm-infocard__flow strong {
	color: var( --color-success );
}

/* Compact variant (beside the value table): rates side by side, one-line
   example, stretched to the table's height. */
.pm-infocard--compact {
	display: flex;
	flex-direction: column;
	padding: var( --space-20 );
}

.pm-infocard--compact .pm-infocard__rates {
	flex: 1;
}

@media ( min-width: 480px ) {
	.pm-infocard--compact .pm-infocard__rates {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.pm-infocard--compact .pm-infocard__rate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var( --space-10 ) var( --space-12 );
}

.pm-infocard--compact .pm-infocard__value {
	font-size: var( --text-lg );
	white-space: nowrap;
}

.pm-infocard--compact .pm-infocard__label {
	font-size: var( --text-xs );
	line-height: 1.3;
}

.pm-infocard--compact .pm-infocard__example {
	margin-top: var( --space-12 );
	padding-top: var( --space-10 );
}

.pm-infocard__flow-label {
	font-weight: var( --fw-bold );
	color: var( --color-text-meta );
}

.pm-infocard__flow .pm-infocard__flow-label + li::before {
	content: none;
}

/* --- O nás: "Printmania v číslach" in the hero ------------------------- */

.pm-infocard--peek {
	position: relative;
	margin-top: var( --space-48 ); /* room for the peeking mascot */
	box-shadow: var( --shadow-7 );
}

.pm-infocard__mascot {
	position: absolute;
	right: var( --space-24 );
	bottom: 100%;
	width: 130px;
	/* The artwork's ledge sits at 63.3% of its height (see 404.css). */
	transform: translateY( 36.7% );
	pointer-events: none;
}

.pm-infocard__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

.pm-infocard__stats {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --space-10 );
	margin: 0;
}

.pm-infocard__stat {
	padding: var( --space-12 ) var( --space-14 );
	border-radius: var( --radius-xl );
	background-color: var( --surface-sunken );
}

.pm-infocard__stat dd {
	margin-left: 0;
}

.pm-infocard__stat:nth-child( 1 ) .pm-infocard__value { color: var( --color-secondary-strong ); }
.pm-infocard__stat:nth-child( 2 ) .pm-infocard__value { color: var( --color-primary ); }
.pm-infocard__stat:nth-child( 3 ) .pm-infocard__value { color: var( --c-yellow-800 ); }

.pm-infocard__classes {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-8 );
	margin: var( --space-14 ) 0 0;
	padding: 0;
	list-style: none;
}

.pm-infocard__class {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-pill );
	font-size: var( --text-xs );
	font-weight: var( --fw-bold );
}

.pm-infocard__class::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --pm-dot, var( --color-text ) );
}

.pm-infocard__class--recogreen { --pm-dot: var( --color-success ); }
.pm-infocard__class--premium   { --pm-dot: var( --color-primary ); }
.pm-infocard__class--economy   { --pm-dot: var( --color-secondary ); }
.pm-infocard__class--original  { --pm-dot: var( --color-text ); }

.pm-infocard__foot {
	margin: var( --space-14 ) 0 0;
	padding-top: var( --space-12 );
	border-top: var( --border-width ) solid var( --color-border );
	font-size: var( --text-sm );
	color: var( --color-text-muted );
}

/* =========================================================================
 * GRID + CARD — the §7 card recipe, 1 → 2 → 4 (or 1 → 3)
 * ====================================================================== */

.pm-info-grid {
	display: grid;
	gap: var( --gap-card );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-info-card,
.pm-ship,
.pm-step {
	display: flex;
	flex-direction: column;
	gap: var( --space-10 );
	min-width: 0;
	padding: var( --space-22 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
}

.pm-info-card .pm-b2b__stat-icon {
	margin-bottom: var( --space-6 );
}

.pm-info-card__title {
	font-size: var( --text-lg );
	font-weight: var( --fw-black );
	line-height: var( --lh-snug );
	letter-spacing: var( --ls-tighter );
}

.pm-info-card__value {
	display: inline-flex;
	align-items: center;
	min-height: var( --space-44 );
	font-size: var( --text-xl );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-tighter );
	color: var( --color-text );
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: var( --transition-color );
}

.pm-info-card__value:hover,
.pm-info-card__value:focus-visible {
	color: var( --color-primary );
}

.pm-info-card__text,
.pm-info-card__address {
	font-size: var( --text-sm );
	font-style: normal;
	line-height: var( --lh-relaxed );
	color: var( --color-text-muted );
}

.pm-info-card__link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-6 );
	min-height: var( --space-44 );
	font-size: var( --text-xs-5 );
	font-weight: var( --fw-bold );
	color: var( --color-secondary-strong );
	text-decoration: none;
	transition: var( --transition-color );
}

/* Card text from the page editor: paragraphs and plain links. */
.pm-info-card__text > * {
	margin: 0;
}

.pm-info-card__text > * + * {
	margin-top: var( --space-10 );
}

.pm-info-card__text strong {
	font-weight: var( --fw-bold );
}

.pm-info-card__text a:not( [class] ) {
	font-weight: var( --fw-bold );
	color: var( --color-secondary-strong );
	text-decoration: underline;
	transition: var( --transition-color );
}

.pm-info-card__text a:not( [class] ):hover,
.pm-info-card__text a:not( [class] ):focus-visible {
	color: var( --color-primary );
}

.pm-info-card__text .pm-info-card__link {
	display: inline;
	font-size: inherit;
	text-decoration: underline;
}

.pm-info-card__link:hover,
.pm-info-card__link:focus-visible {
	color: var( --color-primary );
}

.pm-info-note {
	max-width: var( --width-prose-xl );
	margin-top: var( --space-18 );
	font-size: var( --text-sm );
	line-height: var( --lh-relaxed );
	color: var( --color-text-muted );
}

/* Row card — icon left, copy right; the low variant used in the compact hero. */
.pm-info-card--row {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: var( --space-14 );
	row-gap: 0;
	align-content: start;
	padding: var( --space-18 ) var( --space-20 );
}

.pm-info-card--row .pm-b2b__stat-icon {
	grid-row: 1 / span 4;
	margin-bottom: 0;
}

.pm-info-card--row .pm-info-card__title {
	font-size: var( --text-sm );
	font-weight: var( --fw-bold );
	letter-spacing: 0;
	color: var( --color-text-muted );
}

.pm-info-card--row .pm-info-card__value {
	font-size: var( --text-lg );
}

.pm-info-card--row .pm-info-card__address {
	font-size: var( --text-sm-5 );
	font-weight: var( --fw-bold );
	line-height: var( --lh-snug );
	color: var( --color-text );
}

.pm-info-card--row .pm-info-card__link {
	justify-self: start;
}

/* =========================================================================
 * CARRIER CARD — Doprava a platba (replaces the old banner image)
 * ====================================================================== */

.pm-ship {
	--pm-ship-tone: var( --color-secondary );
	border-top: var( --border-width-accent ) solid var( --pm-ship-tone );
}

.pm-ship--magenta { --pm-ship-tone: var( --color-primary ); }
.pm-ship--gold { --pm-ship-tone: var( --color-accent ); }
.pm-ship--orange { --pm-ship-tone: var( --color-tertiary ); }

.pm-ship__head {
	display: flex;
	align-items: center;
	gap: var( --space-12 );
}

.pm-ship__name {
	font-size: var( --text-lg );
	font-weight: var( --fw-black );
	line-height: var( --lh-snug );
	letter-spacing: var( --ls-tighter );
}

.pm-ship__cutoff {
	display: flex;
	align-items: flex-start;
	gap: var( --space-8 );
	font-size: var( --text-sm );
	line-height: var( --lh-normal );
	color: var( --color-text-muted );
}

.pm-ship__cutoff strong {
	color: var( --color-text );
}

.pm-ship__cutoff-icon {
	flex-shrink: 0;
	margin-top: var( --space-2 );
	color: var( --color-secondary-strong );
}

.pm-ship__price {
	margin-top: auto;
	padding-top: var( --space-8 );
	font-size: var( --text-7xl );
	font-weight: var( --fw-black );
	line-height: var( --lh-none );
	letter-spacing: var( --ls-display );
	color: var( --color-primary );
}

.pm-ship__free {
	align-self: flex-start;
	padding: var( --space-4 ) var( --space-10 );
	border-radius: var( --radius-pill );
	background-color: var( --color-success-tint );
	font-size: var( --text-xs );
	font-weight: var( --fw-bold );
	color: var( --color-success-strong );
}

/* =========================================================================
 * PAYMENT — .pm-choice rows beside the bank account panel
 * ====================================================================== */

.pm-shipping__pay {
	display: grid;
	gap: var( --gap-card );
	align-items: stretch;
}

.pm-shipping__methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-shipping__method {
	cursor: default;
}

.pm-shipping__method .pm-choice__name,
.pm-shipping__method .pm-choice__note {
	display: block;
}

.pm-shipping__kv dd,
.pm-contact__kv dd {
	overflow-wrap: anywhere;
}

/* =========================================================================
 * STEPS — Pre firmy
 * ====================================================================== */

.pm-step {
	--pm-step-tone: var( --color-secondary );
	position: relative;
	overflow: visible;
	box-shadow: var( --shadow-1 );
	transition: transform var( --duration-base ), box-shadow var( --duration-base );
}

.pm-step--magenta {
	--pm-step-tone: var( --color-primary );
}

.pm-step--orange {
	--pm-step-tone: var( --color-tertiary );
}

/* Tone bar along the top edge. */
.pm-step::before {
	content: "";
	position: absolute;
	top: -1px;
	right: var( --space-22 );
	left: var( --space-22 );
	height: 3px;
	border-radius: 0 0 var( --radius-circle ) var( --radius-circle );
	background-color: var( --pm-step-tone );
}

.pm-step:hover {
	transform: translateY( -3px );
	box-shadow: var( --shadow-6 );
}

.pm-step__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var( --space-6 );
}

.pm-step__num {
	font-size: var( --text-7xl );
	font-weight: var( --fw-black );
	line-height: 1;
	letter-spacing: -0.02em;
	background: var( --gradient-brand-text );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: .35;
}

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

	.pm-step,
	.pm-step:hover {
		transform: none;
		transition: none;
	}
}

/* =========================================================================
 * CLOSING CTA — dark band on --gradient-deal-banner (§7 step 10)
 * ====================================================================== */

.pm-info-cta {
	display: grid;
	gap: var( --space-20 );
	padding: var( --space-28 ) var( --space-24 );
	border-radius: var( --radius-3xl );
	background-color: var( --surface-dark );
	background-image: var( --gradient-deal-banner );
	color: var( --color-text-invert );
}

.pm-info-cta__icon {
	display: grid;
	place-items: center;
	width: var( --icon-tile-size );
	height: var( --icon-tile-size );
	border-radius: var( --radius-control );
	background-color: var( --surface-on-dark-hover );
	color: var( --color-accent );
}

.pm-info-cta__title {
	margin-bottom: var( --space-6 );
	font-size: var( --text-display-newsletter );
	line-height: var( --lh-tight );
	letter-spacing: var( --ls-tight );
	color: var( --color-text-invert );
}

/* The ghost button on the dark card keeps its resting look — the global
   link hover would turn its text white on the white fill. */
.pm-info-cta .pm-button--ghost,
.pm-info-cta .pm-button--ghost:hover,
.pm-info-cta .pm-button--ghost:focus-visible {
	border-color: var( --color-border );
	background-color: var( --surface );
	color: var( --color-text );
}

.pm-info-cta__text {
	font-size: var( --text-md );
	color: var( --color-text-on-dark );
}

/* =========================================================================
 * KONTAKT — details + CF7 form
 * ====================================================================== */

.pm-contact__main {
	display: grid;
	gap: var( --gap-card );
	align-items: start;
}

.pm-contact__details {
	display: grid;
	gap: var( --gap-card );
	min-width: 0;
}

.pm-contact__legal {
	margin-top: var( --space-14 );
	padding-top: var( --space-14 );
	border-top: var( --border-width ) solid var( --color-border );
	font-size: var( --text-xs );
	line-height: var( --lh-relaxed );
	color: var( --color-text-meta );
}

.pm-contact__address {
	font-size: var( --text-sm );
	font-style: normal;
	line-height: var( --lh-relaxed );
	color: var( --color-text-soft );
}

.pm-contact__card .wpcf7,
.pm-contact__card .wpcf7-form {
	margin: 0;
}

.pm-contact__card .wpcf7-form-control-wrap {
	display: block;
}

.pm-contact__agree {
	font-size: var( --text-sm );
	line-height: var( --lh-normal );
	color: var( --color-text-soft );
}

.pm-contact__card .wpcf7-form .pm-contact__agree a {
	color: var( --color-secondary );
	text-decoration: underline;
}

.pm-contact__card .wpcf7-form .pm-contact__agree a:hover,
.pm-contact__card .wpcf7-form .pm-contact__agree a:focus-visible {
	color: var( --color-primary );
}

/* --- LEGACY CF7 OVERRIDES ----------------------------------------------
 * Scripts Organizer snippet 165 (old theme) restyles every CF7 submit and
 * checkbox, partly !important; the Turnstile integration injects <br>s and
 * inline margins. Out-specified inside the contact card only — same block
 * as pages/brand.css.
 * ---------------------------------------------------------------------- */

.pm-contact__card .wpcf7 .wpcf7-form .pm-contact__submit {
	width: auto;
	height: auto;
	min-height: var( --space-44 );
	margin: 0;
	padding: var( --space-14 ) var( --space-26 );
	border: 0;
	border-radius: var( --radius-control );
	background: var( --surface-dark );
	font-family: inherit;
	font-size: var( --text-base );
	font-weight: var( --fw-bold );
	line-height: var( --lh-none );
	color: var( --color-text-invert );
	box-shadow: none;
	cursor: pointer;
	transition: background-color var( --duration-base );
}

.pm-contact__card .wpcf7 .wpcf7-form .pm-contact__submit:hover,
.pm-contact__card .wpcf7 .wpcf7-form .pm-contact__submit:focus-visible {
	background: var( --color-primary );
	background-position: 0 0;
}

.pm-contact__card .wpcf7 .wpcf7-form input[type="checkbox"] {
	position: absolute !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0;
}

.pm-contact__card .wpcf7 .wpcf7-form .wpcf7-list-item-label {
	display: inline;
	padding: 0;
}

.pm-contact__card .wpcf7 .wpcf7-form input[type="checkbox"] ~ span::before {
	position: static !important;
	bottom: auto !important;
	display: inline-block;
	width: var( --space-18 );
	height: var( --space-18 );
	margin: 0 var( --space-9 ) 0 0;
	border: var( --border-width-box ) solid var( --color-control-border );
	border-radius: var( --radius-3xs );
	background: var( --surface );
	vertical-align: text-bottom;
	content: "";
}

.pm-contact__card .wpcf7 .wpcf7-form input[type="checkbox"] ~ span::after {
	display: none;
}

.pm-contact__card .wpcf7 .wpcf7-form input[type="checkbox"]:checked ~ span::before {
	border-color: var( --color-primary );
	background: var( --color-primary );
}

.pm-contact__card .wpcf7 .wpcf7-form input[type="checkbox"]:focus-visible ~ span::before {
	box-shadow: 0 0 0 var( --space-3 ) var( --color-primary-tint );
}

.pm-contact__card .wpcf7 .wpcf7-form label {
	cursor: pointer;
}

.pm-contact__card .wpcf7-form > br,
.pm-contact__card .cf-turnstile-br {
	display: none;
}

.pm-contact__card .cf7-cf-turnstile {
	margin: 0 !important;
}

.pm-contact__card .cf-turnstile {
	margin-left: 0 !important;
}

.pm-contact__card .wpcf7 .wpcf7-response-output {
	margin: var( --space-14 ) 0 0;
	border-radius: var( --radius-control );
	font-size: var( --text-sm );
}

/* =========================================================================
 * REKLAMÁCIE — service address + RMA tip, withdrawal terms panel
 * ====================================================================== */

.pm-claims__pair {
	display: grid;
	gap: var( --gap-card );
	margin-top: var( --gap-card );
}

.pm-claims__address {
	font-size: var( --text-lg );
	font-style: normal;
	font-weight: var( --fw-bold );
	line-height: var( --lh-normal );
	color: var( --color-text );
}

.pm-claims__note,
.pm-claims__text {
	font-size: var( --text-sm );
	line-height: var( --lh-relaxed );
	color: var( --color-text-muted );
}

.pm-claims__note {
	margin-top: var( --space-14 );
	padding-top: var( --space-14 );
	border-top: var( --border-width ) solid var( --color-border );
}

.pm-claims__code {
	padding: var( --space-2 ) var( --space-8 );
	border-radius: var( --radius-3xs );
	background-color: var( --surface-dark );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-tighter );
	color: var( --color-text-invert );
}

.pm-claims__terms {
	display: grid;
	gap: var( --space-28 );
	margin-top: var( --gap-card );
}

.pm-claims__terms .pm-prose {
	max-width: none;
}

/* =========================================================================
 * TABLE — small two-column value table (Vernostný program)
 * ====================================================================== */

.pm-info-table {
	width: 100%;
	max-width: var( --width-prose-xl );
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background-color: var( --surface );
	font-size: var( --text-md );
}

.pm-info-table th,
.pm-info-table td {
	padding: var( --space-14 ) var( --space-22 );
	text-align: left;
}

.pm-info-table th {
	font-size: var( --text-sm );
	font-weight: var( --fw-bold );
	color: var( --color-text-muted );
	background-color: var( --color-page );
}

.pm-info-table td {
	border-top: var( --border-width ) solid var( --color-border );
	color: var( --color-text-soft );
}

.pm-info-table td:last-child {
	font-weight: var( --fw-black );
	color: var( --color-text );
}

.pm-info__lead {
	margin-bottom: var( --space-20 );
}

.pm-info-card__note {
	margin: 0;
	font-size: var( --text-sm );
	font-weight: var( --fw-semibold );
	color: var( --color-text );
}

/* =========================================================================
 * GRADES — quality class cards (Kvalita tonerov); tones match the product
 * page's class modal (.pm-class--*)
 * ====================================================================== */

.pm-grade {
	--pm-grade-tone: var( --color-text );
	position: relative;
}

.pm-grade--recogreen {
	--pm-grade-tone: var( --color-success );
}

.pm-grade--premium {
	--pm-grade-tone: var( --color-primary );
}

.pm-grade--economy {
	--pm-grade-tone: var( --color-secondary );
}

/* Tone bar along the top edge (same as .pm-step). */
.pm-grade::before {
	content: "";
	position: absolute;
	top: -1px;
	right: var( --space-22 );
	left: var( --space-22 );
	height: 3px;
	border-radius: 0 0 var( --radius-circle ) var( --radius-circle );
	background-color: var( --pm-grade-tone );
}

.pm-grade__head {
	display: flex;
	align-items: center;
	gap: var( --space-12 );
}

.pm-grade__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var( --radius-md );
	background-color: var( --surface-sunken );
	color: var( --pm-grade-tone );
}

.pm-grade .pm-info-card__title {
	font-size: var( --text-xl );
}

.pm-grade__summary {
	margin: 0;
	font-size: var( --text-md );
	font-weight: var( --fw-bold );
	color: var( --pm-grade-tone );
}

/* Bullets come from the editor as a plain <ul>; the tick is drawn in CSS. */
.pm-grade__body ul {
	display: grid;
	gap: var( --space-8 );
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --text-sm );
	line-height: var( --lh-relaxed );
	color: var( --color-text-muted );
}

.pm-grade__body li {
	position: relative;
	padding-left: var( --space-24 );
}

.pm-grade__body li::before {
	content: "";
	position: absolute;
	top: var( --space-4 );
	left: 0;
	width: 16px;
	height: 16px;
	background-color: var( --pm-grade-tone );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.pm-grade__body strong {
	font-weight: var( --fw-bold );
	color: var( --color-text );
}

.pm-grade__body > p {
	margin: 0;
	font-size: var( --text-sm );
	color: var( --color-text-muted );
}

/* =========================================================================
 * COVERAGE — page coverage samples inside a FAQ answer (Kvalita tonerov)
 * ====================================================================== */

.pm-coverage {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --space-8 );
	margin: var( --space-14 ) 0 0;
	padding: 0;
	list-style: none;
}

.pm-coverage img {
	display: block;
	width: 100%;
	height: auto;
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-md );
}

@media ( min-width: 768px ) {

	.pm-coverage {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}
}

/* =========================================================================
 * PROSE — long-form page content (legal documents, withdrawal terms)
 * ====================================================================== */

.pm-prose {
	min-width: 0;
	max-width: var( --width-prose-legal );
	font-size: var( --text-md );
	line-height: var( --lh-relaxed );
	color: var( --color-text-soft );
	overflow-wrap: break-word;
}

.pm-prose > * + * {
	margin-top: var( --space-14 );
}

.pm-prose h2,
.pm-prose h3,
.pm-prose h4 {
	color: var( --color-text );
	scroll-margin-top: var( --sticky-top-sidebar );
}

.pm-prose h2 {
	margin-top: var( --space-40 );
	font-size: var( --text-5xl );
	line-height: var( --lh-tight );
	letter-spacing: var( --ls-tight );
}

.pm-prose h3 {
	margin-top: var( --space-28 );
	font-size: var( --text-xl );
	line-height: var( --lh-snug );
	letter-spacing: var( --ls-tighter );
}

.pm-prose h4 {
	margin-top: var( --space-20 );
	font-size: var( --text-md );
}

.pm-prose > :first-child {
	margin-top: 0;
}

.pm-prose h2 + *,
.pm-prose h3 + *,
.pm-prose h4 + * {
	margin-top: var( --space-10 );
}

.pm-prose strong {
	font-weight: var( --fw-bold );
	color: var( --color-text );
}

.pm-prose a {
	font-weight: var( --fw-semibold );
	color: var( --color-secondary-strong );
	text-decoration: underline;
	text-underline-offset: var( --space-2 );
	transition: var( --transition-color );
}

.pm-prose a:hover,
.pm-prose a:focus-visible {
	color: var( --color-primary );
}

/* Bold link text (`<a><strong>`) keeps the link colour. */
.pm-prose a strong {
	color: inherit;
}

.pm-prose ol,
.pm-prose ul {
	margin-bottom: 0;
	padding-left: var( --space-22 );
}

.pm-prose li + li,
.pm-prose li > ol,
.pm-prose li > ul {
	margin-top: var( --space-8 );
}

.pm-prose li::marker {
	font-weight: var( --fw-bold );
	color: var( --color-text );
}

/* Clause number written into VOP content — "6.2". */
.pm-prose .pm-legal-num {
	margin-right: var( --space-4 );
	font-weight: var( --fw-black );
	color: var( --color-primary );
}

/* Document list written into content — one bordered row per file, its type
   (data-type on the link) as a pill. */
.pm-prose .pm-legal-docs {
	display: grid;
	gap: var( --space-10 );
	padding: 0;
	list-style: none;
}

.pm-prose .pm-legal-docs li + li {
	margin-top: 0;
}

.pm-prose .pm-legal-docs a {
	display: flex;
	align-items: center;
	gap: var( --space-12 );
	min-height: var( --space-44 );
	padding: var( --space-12 ) var( --space-16 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-control );
	background-color: var( --surface );
	font-weight: var( --fw-bold );
	line-height: var( --lh-snug );
	color: var( --color-text );
	text-decoration: none;
	transition: border-color var( --duration-base ), color var( --duration-base );
}

.pm-prose .pm-legal-docs a::before {
	flex-shrink: 0;
	min-width: var( --space-44 );
	padding: var( --space-4 ) var( --space-8 );
	border-radius: var( --radius-pill );
	background-color: var( --color-primary-tint );
	font-size: var( --text-xs );
	font-weight: var( --fw-black );
	text-align: center;
	color: var( --color-primary );
	content: attr( data-type );
}

.pm-prose .pm-legal-docs a:hover,
.pm-prose .pm-legal-docs a:focus-visible {
	border-color: var( --color-primary );
	color: var( --color-primary );
}

/* =========================================================================
 * LEGAL DOCUMENT — table of contents beside the prose (template-legal.php)
 * ====================================================================== */

.pm-legal__layout {
	display: grid;
	gap: var( --space-28 );
	align-items: start;
}

.pm-legal__toc-title {
	margin-bottom: var( --space-12 );
	font-size: var( --text-xs );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-caps );
	text-transform: uppercase;
	color: var( --color-text-meta );
}

.pm-legal__toc-list {
	display: grid;
	gap: var( --space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-legal__toc-link {
	display: flex;
	align-items: center;
	min-height: var( --space-36 );
	font-size: var( --text-sm );
	font-weight: var( --fw-bold );
	line-height: var( --lh-snug );
	color: var( --color-text-soft );
	text-decoration: none;
	transition: var( --transition-color );
}

.pm-legal__toc-link:hover,
.pm-legal__toc-link:focus-visible {
	color: var( --color-primary );
}

/* =========================================================================
 * ODSTÚPENIE OD ZMLUVY — wpify-woo withdrawal / claim form
 *
 * Markup comes from wpify-woo (templates/request-form.php, eligibility
 * section rendered via AJAX) and the intro from the wooptima-withdrawal
 * plugin. Scripts Organizer snippet 246884 (old theme) boxes the form in a
 * 4px --primary border and forces the submit background with !important,
 * so everything is scoped under #pm-content.
 * ====================================================================== */

#pm-content .wwd-withdrawal-form-intro {
	max-width: var( --width-prose-legal );
	margin-bottom: var( --space-24 );
	font-size: var( --text-md );
	line-height: var( --lh-relaxed );
	color: var( --color-text-muted );
}

#pm-content .wwd-withdrawal-form-intro br {
	display: none;
}

#pm-content .wwd-withdrawal-form-intro b,
#pm-content .wwd-withdrawal-form-intro strong {
	display: none;
}

#pm-content .wpify-woo-form {
	display: block;
	max-width: var( --width-prose-legal );
	margin: 0;
	padding: var( --space-20 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	background: var( --surface );
}

#pm-content .wpify-woo-form .woocommerce-form {
	display: grid;
	align-items: start;
	gap: var( --space-16 );
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

#pm-content .wpify-woo-form .form-row {
	display: grid;
	gap: var( --space-6 );
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
}

#pm-content .wpify-woo-form .form-row[hidden] {
	display: none;
}

#pm-content .wpify-woo-form .form-row > label,
#pm-content .wpify-woo-form legend {
	font-size: var( --text-sm );
	font-weight: var( --fw-semibold );
	color: var( --color-text );
}

#pm-content .wpify-woo-form .required {
	margin-left: var( --space-2 );
	color: var( --color-primary );
	text-decoration: none;
	border: 0;
}

#pm-content .wpify-woo-form input[type="text"],
#pm-content .wpify-woo-form input[type="email"],
#pm-content .wpify-woo-form input[type="tel"],
#pm-content .wpify-woo-form select,
#pm-content .wpify-woo-form textarea {
	width: 100%;
	height: auto;
	min-height: var( --control-height );
	margin: 0;
	padding: 0 var( --space-14 );
	border: var( --border-width-strong ) solid var( --color-border );
	border-radius: var( --radius-control );
	background: var( --surface );
	font: inherit;
	font-size: var( --text-sm-5 );
	color: var( --color-text );
	box-shadow: none;
	transition: var( --transition-color );
}

#pm-content .wpify-woo-form textarea {
	min-height: var( --space-120 );
	padding: var( --space-12 ) var( --space-14 );
	resize: vertical;
}

#pm-content .wpify-woo-form input:focus-visible,
#pm-content .wpify-woo-form select:focus-visible,
#pm-content .wpify-woo-form textarea:focus-visible {
	outline: none;
	border-color: var( --color-secondary );
}

#pm-content .wpify-woo-form .form-row-hint,
#pm-content .wpify-woo-form .wpify-woo-helper-text {
	font-size: var( --text-xs );
	line-height: var( --lh-normal );
	color: var( --color-text-meta );
}

/* Submit row — button left, helper text beside/below it. */
#pm-content .wpify-woo-form .form-row:has( > .button ) {
	justify-items: start;
	align-items: start;
	gap: var( --space-10 );
	margin-top: var( --space-4 );
}

#pm-content .wpify-woo-form .wpify-woo-helper-text {
	margin-top: 0 !important;
}

#pm-content .wpify-woo-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: var( --space-44 );
	margin: 0;
	padding: var( --space-14 ) var( --space-26 );
	border: 0;
	border-radius: var( --radius-control );
	background: var( --surface-dark ) !important;
	font-family: inherit;
	font-size: var( --text-base );
	font-weight: var( --fw-bold );
	line-height: var( --lh-none );
	color: var( --color-text-invert );
	box-shadow: none;
	cursor: pointer;
	transition: background-color var( --duration-base );
}

#pm-content .wpify-woo-form button[type="submit"]:hover,
#pm-content .wpify-woo-form button[type="submit"]:focus-visible {
	border: 0;
	background: var( --color-primary ) !important;
	color: var( --color-text-invert ) !important;
}

#pm-content .wpify-woo-form--loading button[type="submit"] {
	opacity: .6;
	pointer-events: none;
}

/* Eligibility step — scope radios + item table. */
#pm-content .wpify-woo-form fieldset {
	display: grid;
	gap: var( --space-8 );
	margin: 0;
	padding: var( --space-16 );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-control );
	background: var( --surface-sunken );
}

#pm-content .wpify-woo-form legend {
	float: left;
	width: 100%;
	margin-bottom: var( --space-4 );
	padding: 0;
}

#pm-content .wpify-woo-scope br {
	display: none;
}

#pm-content .wpify-woo-scope label {
	display: flex;
	align-items: center;
	gap: var( --space-10 );
	min-height: var( --space-44 );
	font-size: var( --text-sm );
	font-weight: var( --fw-semibold );
	color: var( --color-text );
	cursor: pointer;
}

#pm-content .wpify-woo-form input[type="radio"],
#pm-content .wpify-woo-form input[type="checkbox"] {
	width: var( --space-18 );
	height: var( --space-18 );
	margin: 0;
	accent-color: var( --color-primary );
}

#pm-content .wpify-woo-form .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var( --text-sm );
}

#pm-content .wpify-woo-form .shop_table th {
	padding: var( --space-8 ) var( --space-10 );
	border-bottom: var( --border-width ) solid var( --color-border );
	font-size: var( --text-xs );
	font-weight: var( --fw-bold );
	text-align: left;
	color: var( --color-text-meta );
}

#pm-content .wpify-woo-form .shop_table td {
	padding: var( --space-10 );
	border-bottom: var( --border-width ) solid var( --color-border );
	text-align: left;
	vertical-align: middle;
	color: var( --color-text-soft );
}

#pm-content .wpify-woo-form .shop_table tr:last-child td {
	border-bottom: 0;
}

#pm-content .wpify-woo-form .shop_table td:first-child {
	width: var( --space-64 );
}

#pm-content .wpify-woo-form .shop_table input[type="number"] {
	width: var( --space-56 );
	min-height: var( --space-36 );
	padding: 0 var( --space-6 );
	border: var( --border-width-strong ) solid var( --color-border );
	border-radius: var( --radius-md );
	background: var( --surface );
	font: inherit;
	font-weight: var( --fw-bold );
	text-align: center;
}

/* Notices inside the section (errors, "no eligible items", success). */
#pm-content .wpify-woo-form .woocommerce-error,
#pm-content .wpify-woo-form .woocommerce-info,
#pm-content .wpify-woo-form .woocommerce-message {
	margin: 0 0 var( --space-16 );
	padding: var( --space-12 ) var( --space-16 );
	border: 0;
	border-radius: var( --radius-control );
	font-size: var( --text-sm );
	line-height: var( --lh-normal );
	list-style: none;
}

#pm-content .wpify-woo-form .woocommerce-error {
	background: var( --color-primary-tint-soft );
	color: var( --color-primary );
}

#pm-content .wpify-woo-form .woocommerce-info {
	background: var( --surface-chip );
	color: var( --color-text-soft );
}

#pm-content .wpify-woo-form .woocommerce-message {
	margin: 0;
	background: var( --color-success-tint );
	color: var( --color-success-strong );
}

#pm-content .wpify-woo-form .woocommerce-error::before,
#pm-content .wpify-woo-form .woocommerce-info::before,
#pm-content .wpify-woo-form .woocommerce-message::before {
	display: none;
}

#pm-content .wpify-woo-form-empty {
	display: none;
}

/* =========================================================================
 * >= 480px
 * ====================================================================== */

@media ( min-width: 480px ) {

	.pm-info-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.pm-info-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * >= 768px
 * ====================================================================== */

@media ( min-width: 768px ) {

	.pm-info {
		padding-bottom: var( --section-space );
	}

	.pm-info__section {
		padding-top: var( --space-48 );
	}

	.pm-info-hero__inner {
		grid-template-columns: 1fr 0.6fr;
		padding-block: var( --space-48 );
	}

	.pm-info-hero__mascot {
		display: block;
	}

	.pm-info-hero--aside .pm-info-hero__inner {
		grid-template-columns: minmax( 0, 1.6fr ) minmax( 0, 1fr );
		align-items: center;
	}

	.pm-info-grid--3 {
		grid-template-columns: repeat( 3, 1fr );
	}

	.pm-info-card:not( .pm-info-card--row ),
	.pm-ship,
	.pm-step {
		padding: var( --card-padding );
	}

	/* Chevron in the gap between steps. */
	.pm-step:not( :last-child )::after {
		content: "";
		position: absolute;
		top: 50%;
		right: calc( var( --gap-card ) / -2 - 4px );
		z-index: 1;
		width: 8px;
		height: 8px;
		border-top: 2px solid var( --c-gray-400 );
		border-right: 2px solid var( --c-gray-400 );
		transform: translateY( -50% ) rotate( 45deg );
	}

	.pm-info-cta {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var( --space-24 );
		padding: var( --space-36 ) var( --space-40 );
	}

	.pm-contact__card .wpcf7 .wpcf7-form .pm-contact__submit {
		justify-self: start;
	}

	.pm-claims__pair {
		grid-template-columns: repeat( 2, 1fr );
	}

	#pm-content .wpify-woo-form {
		padding: var( --card-padding );
	}

	#pm-content .wpify-woo-form .woocommerce-form {
		grid-template-columns: 1fr 1fr;
		column-gap: var( --space-14 );
	}

	#pm-content .wpify-woo-form .woocommerce-form > * {
		grid-column: 1 / -1;
	}

	#pm-content .wpify-woo-form .woocommerce-form > .form-row-first {
		grid-column: 1;
	}

	#pm-content .wpify-woo-form .woocommerce-form > .form-row-last {
		grid-column: 2;
	}
}

/* =========================================================================
 * >= 1024px
 * ====================================================================== */

@media ( min-width: 1024px ) {

	.pm-info__section {
		padding-top: var( --section-space );
	}

	/* Half and half, spaced like the card grid below. */
	.pm-loyalty__value {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.pm-info-hero__inner {
		grid-template-columns: 1.3fr 0.7fr;
		gap: var( --space-48 );
	}

	.pm-info-grid {
		grid-template-columns: repeat( 4, 1fr );
	}

	.pm-info-grid--3 {
		grid-template-columns: repeat( 3, 1fr );
	}

	.pm-info-grid--2 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.pm-shipping__pay {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var( --space-28 );
	}

	.pm-contact__main {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var( --space-28 );
	}

	.pm-info-card__link,
	.pm-info-card--row .pm-info-card__value {
		min-height: 0;
	}

	.pm-info-card--row .pm-info-card__address {
		margin-block: var( --space-4 );
	}

	.pm-legal__layout--toc {
		grid-template-columns: var( --width-sidebar ) minmax( 0, 1fr );
		gap: var( --space-48 );
	}

	.pm-legal__toc {
		position: sticky;
		top: var( --sticky-top-sidebar );
		max-height: calc( 100vh - var( --sticky-top-sidebar ) - var( --space-20 ) );
		overflow-y: auto;
	}

	.pm-legal__toc-link {
		min-height: var( --space-32 );
	}
}