/* v12.5-batch7d — Load Fraunces font for mixed-emphasis H1 accents */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,500&display=swap");

/* ============================================================
   palette-fix.css — new.eterniit.ee staging overrides
   Loaded AFTER site-polish.css so these rules win.
   Purpose: replace CSS-placeholder gradients with real photos
   downloaded from live eterniit.ee production.
   ============================================================ */

/* ============================================================
   FIX: Reveal animations stuck at opacity 0
   IntersectionObserver unreliable on some devices / slow loads.
   Force-show content after a short delay so text is never invisible.
   Keep the intended fade-in animation via CSS keyframe fallback.
   ============================================================ */
.reveal {
	animation: reveal-fallback 0.7s ease-out 0.2s forwards !important;
}
@keyframes reveal-fallback {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
/* If JS adds .in class, it still looks identical (already at final state) */
.reveal.in {
	opacity: 1 !important;
	transform: none !important;
}

/* ============================================================
   Faas 1.1 — Hide ALL placeholder labels sitewide
   ============================================================ */
.hero__placeholder-tag,
.cat-hero__tag,
.page-head__tag,
.article-hero-img__tag,
.featured__img-tag,
.browse-card__vis span,
.product__img-label,
.ref-card__img::after,
.map-placeholder,
[class*="__tag"]:not(.article-card__cat):not(.pdp__badge):not(
		.featured__label
	):not(.article-head__cat):not(.ref-card__tag) {
	display: none !important;
}

/* Map embed placeholder */
.office__map::before,
.map__placeholder,
[class*="MAP_EMBED_TBD"],
[data-placeholder*="MAP"] {
	display: none !important;
}

/* ============================================================
   Faas 1.2 — Navbar red → #FF3131 (Eterniit brand red)
   ============================================================ */
:root {
	--red-nav: #ff3131 !important;
}
header.nav,
nav.nav,
.nav {
	background: #ff3131 !important;
}
/* Keep CTA button red same as navbar for cohesion */
.btn--red,
.btn.btn--red,
.nav__cta .btn {
	background: #ff3131 !important;
}
.btn--red:hover,
.btn.btn--red:hover {
	background: #e02828 !important;
}

/* ============================================================
   Faas 1.3 — Footer: warm charcoal (remove forest green)
   ============================================================ */
footer.footer,
.footer,
.site-footer {
	background: #201614 !important;
	color: #fdfbf7 !important;
}
.footer a,
.footer__heading,
.footer__nav a,
.footer__col a {
	color: #fdfbf7 !important;
}
/* v12.5 fix — footer bottom now seamless with main footer (was darker strip with grey text — caused black-on-dark mismatch user flagged) */
.footer__bottom,
.footer__legal {
	background: transparent !important;
	color: rgba(253, 251, 247, 0.72) !important;
	border-top: 1px solid rgba(253, 251, 247, 0.1) !important;
}
.footer__bottom a,
.footer__legal a {
	color: rgba(253, 251, 247, 0.72) !important;
}
.footer__bottom a:hover,
.footer__legal a:hover {
	color: #fdfbf7 !important;
}

/* ============================================================
   Faas 7.1.1 (v4 #1) — Mobile hero horizontal padding
   Defensive: ensure hero content never touches viewport edge
   even if generator-applied classes drop the .container wrapper.
   ============================================================ */
@media (max-width: 767px) {
	.hero .hero__inner,
	.hero .container,
	.hero.container,
	.page-head .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.hero__title,
	.hero__sub,
	.hero__eyebrow,
	.hero__stats {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Also change forest-green CSS vars to charcoal equivalents */
:root {
	--forest: #201614 !important;
	--forest-deep: #201614 !important;
	--forest-ink: #0f0a09 !important;
	--forest-mid: #3a2d26 !important;
}

/* ============================================================
   v7 — 43-point feedback fixes
   ============================================================ */

/* v7 #11 — Mobile nav logo: "eterniit.ee" (no weird spacing around dot) */
/* v12.5 fix — logo consistency across ALL pages. Homepage shell (01-) used
   display: inline-flex + gap: 2px which pushed "eterniit . ee" too wide on
   new pages (Eternit, Fibrodah, Catalog, Privacy, Architects, Videos, News,
   Search). Older templates (04-references, 05-advice etc) had no gap = tight.
   Force zero gap everywhere so logo renders identically site-wide. */
.nav__logo {
	letter-spacing: -0.01em !important;
	gap: 0 !important;
}

/* v8.1 B2 — Eternit + Fibrodah nav links: prominence via weight only (v12.5 fix: removed dot bullets per user feedback — felt invented/decorative) */
.nav__menu a[href="/eternit/"],
.nav__menu a[href="/fibrodah/"] {
	font-weight: 700 !important;
	position: relative;
}

/* =================================================================
   v12.5-phase1 polish pass (2026-04-23, user feedback batch)
   ================================================================= */

/* v12.5-phase6 — Navbar "Küsi pakkumist" CTA: show as white-bordered ghost
   button on red nav. Reverses earlier polish #11 hide rule (user explicitly
   asked for the CTA to be visible again but styled so it reads as a ghost
   action on the red nav background, with white text + white border).
   v17o — Scoped to ≥1200px only. Below that the burger menu takes over and
   showing the CTA in the nav was redundant + cramped. The unconditional
   `!important` rule was defeating the template's mobile `display: none` default. */
@media (min-width: 1200px) {
	.nav__cta {
		display: flex !important;
		align-items: center;
	}
}
.nav__cta .btn,
.nav__cta .btn.btn--red,
header.nav .nav__cta .btn--red {
	background: transparent !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	padding: 9px 18px !important;
	font-weight: 600 !important;
	transition:
		background 0.15s,
		color 0.15s !important;
}
.nav__cta .btn:hover,
.nav__cta .btn.btn--red:hover,
header.nav .nav__cta .btn--red:hover {
	background: #ffffff !important;
	color: var(--red, #c0392b) !important;
}

/* #6 — Catalog product cards: entire card clickable, remove ugly hover overlay */
article.card {
	cursor: pointer;
	position: relative;
}
article.card .card__hover-cta {
	display: none !important; /* remove the black overlay arrow on hover */
}

/* #3 — Quote form trust row: clean up dots (was showing scattered, hard to read) */
.quote__trust {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px 24px !important;
	align-items: center;
	justify-content: center;
	margin-top: 32px !important;
	padding-top: 24px !important;
	border-top: 1px solid var(--line) !important;
	font-size: 13px;
	color: var(--ink-grey);
}
.quote__trust-dot {
	display: inline-block !important;
	width: 5px !important;
	height: 5px !important;
	border-radius: 50% !important;
	background: var(--red-accent) !important;
	margin: 0 !important;
	flex-shrink: 0;
}
.quote__trust > span:not(.quote__trust-dot) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* #16 — Videos page: featured hero card now same size as grid cards
   (user wants consistent sizing across all videos) */
.videos-featured {
	display: none !important;
}

/* #7 — Catalog filters responsive (REMOVED v15-task4 2026-05-09).
   The previous "label-on-own-line + chips-wrap" pattern produced 4-5 stacked
   rows on mobile/tablet, eating ~50% of viewport and pushing products off
   screen. Replaced by 17-catalog.html @media (max-width: 1023px) block:
   horizontal-scroll one row per group, no wrap, chips reachable via swipe.
   Leaving this comment so the regression doesn't re-occur. */

/* #17 — Kontakt hero text contrast (DEAD RULE — kept for v-history reference).
   v17aa diagnosis: this declaration has two !important markers in one
   comma-separated background shorthand, which is invalid CSS. Browsers reject
   the whole declaration. Each hero page's inline <style> wins. If reviving
   this rule, move !important to the end (once) and DO NOT include the photo
   layer here — pages set their own image. */
/* Kontakt specifically: keep cream-friendly text colors on dark overlay */
body:not(.home) .hero__title {
	color: #fdfbf7 !important;
}
body:not(.home) .hero__sub {
	color: rgba(253, 251, 247, 0.9) !important;
}
body:not(.home) .hero__crumbs,
body:not(.home) .hero__crumbs a {
	color: rgba(253, 251, 247, 0.8) !important;
}
body:not(.home) .hero__crumbs span {
	color: rgba(253, 251, 247, 0.4) !important;
}
body:not(.home) .quick__item {
	background: rgba(0, 0, 0, 0.4) !important;
}
body:not(.home) .quick__label {
	color: rgba(253, 251, 247, 0.55) !important;
}
body:not(.home) .quick__value {
	color: #fdfbf7 !important;
}

/* v12.5-batch7d — Sitewide typography unification.
   Mixed-emphasis H1: Inter 800 non-italic baseline, with <u> or <em>
   children rendering as Fraunces italic with red underline accent.
   Forces consistency across 22 templates (previously 3 different H1 styles). */
.h1,
.hero__title,
.privacy__title,
.catalog__hero-title,
.etl__hero-title,
.fbl__hero-title,
.news-archive__hero-title,
.videos__hero-title,
.doc-preview__title,
.arch__hero-title,
.error-404__title,
.search__title,
.page-head__title,
.article__title,
.article-hero__title {
	font-family: "Inter", system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-style: normal !important;
	line-height: 1.03 !important;
	letter-spacing: -0.028em !important;
}
/* Fraunces accent on <u> or <em> inside H1-like titles — mixed-emphasis pattern */
.h1 u,
.h1 em,
.h1 i,
.hero__title u,
.hero__title em,
.hero__title i,
.privacy__title u,
.privacy__title em,
.privacy__title i,
.catalog__hero-title u,
.catalog__hero-title em,
.catalog__hero-title i,
.etl__hero-title u,
.etl__hero-title em,
.etl__hero-title i,
.fbl__hero-title u,
.fbl__hero-title em,
.fbl__hero-title i,
.news-archive__hero-title u,
.news-archive__hero-title em,
.news-archive__hero-title i,
.videos__hero-title u,
.videos__hero-title em,
.videos__hero-title i,
.doc-preview__title u,
.doc-preview__title em,
.doc-preview__title i,
.arch__hero-title u,
.arch__hero-title em,
.arch__hero-title i,
.error-404__title u,
.error-404__title em,
.error-404__title i,
.search__title u,
.search__title em,
.search__title i,
.page-head__title u,
.page-head__title em,
.page-head__title i,
.article__title u,
.article__title em,
.article__title i,
.article-hero__title u,
.article-hero__title em,
.article-hero__title i {
	font-family: "Fraunces", serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	color: var(--red-accent) !important;
	text-decoration: none !important;
}

/* Also normalize H2 section headings — same pattern */
.h2,
.privacy__content h2,
.catalog__brand-title,
.etl__h2,
.fbl__h2 {
	font-family: "Inter", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-style: normal !important;
}
.h2 u,
.h2 em,
.h2 i,
.privacy__content h2 u,
.privacy__content h2 em,
.catalog__brand-title u,
.catalog__brand-title em,
.etl__h2 u,
.etl__h2 em,
.fbl__h2 u,
.fbl__h2 em {
	font-family: "Fraunces", serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	color: var(--red-accent) !important;
	text-decoration: none !important;
}

/* v12.5-batch7b — Nav fixes for mid-width (1024-1280px) where items cramped */
.nav__menu {
	flex-wrap: nowrap !important;
	gap: 20px !important;
}
.nav__menu a,
.nav__menu-veel-btn {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}
/* v17ad/v17bl — Progressive navbar collapse across 3 breakpoints.
   v17bl re-anchored after the navbar redesign: Tooted dropdown took the
   slot of Eternit+Fibrodah+Kõik-tooted; Videod+Uudised got promoted from
   Veel to top-level.
   Ladder:
     >=1280px: full navbar (all items + "Küsi pakkumist" CTA visible)
     1100-1279px: hide "Küsi pakkumist" CTA
     900-1099px: progressively hide last items (Kontakt, Uudised, Videod)
     <900px: burger only, compact right-anchored drawer
   Nav menu order: Tooted (dropdown), Referentsid, Nõuanded, Dokumendid,
   Videod, Uudised, Kontakt, Veel. Top-level <a> children are 6 (positions
   2-7 — 1 is the Tooted dropdown div, 8 is Veel dropdown div). We hide
   from the right edge first; Veel-drop reveals the hidden items at
   their breakpoint. */
@media (max-width: 1279px) and (min-width: 900px) {
	.nav__cta {
		display: none !important;
	}
}
/* v17bm — Responsive top-level hide rules MUST align with Veel-dropdown
   surfacing rules below. Template markup has these classes on dropdown items:
     Dokumendid + Videod + Uudised → .nav__veel-collapsed--1099
     Kontakt → .nav__veel-collapsed--999
   Top-level anchor order: 1=Referentsid 2=Nõuanded 3=Dokumendid 4=Videod
   5=Uudised 6=Kontakt. At each breakpoint, hide TOP-LEVEL items that surface
   in Veel at the same breakpoint — no orphans, no duplicates. */
@media (max-width: 1099px) and (min-width: 1000px) {
	/* Hide Dokumendid (3) + Videod (4) + Uudised (5) — they surface as --1099
	   in Veel. Kontakt (6) stays visible at top level. */
	.nav__menu > a:nth-of-type(3),
	.nav__menu > a:nth-of-type(4),
	.nav__menu > a:nth-of-type(5) {
		display: none !important;
	}
}
@media (max-width: 999px) and (min-width: 900px) {
	/* Additionally hide Kontakt (6) — it surfaces as --999 in Veel. */
	.nav__menu > a:nth-of-type(3),
	.nav__menu > a:nth-of-type(4),
	.nav__menu > a:nth-of-type(5),
	.nav__menu > a:nth-of-type(6) {
		display: none !important;
	}
}
/* v17aj/v17bl — Veel-dropdown overflow completion. Duplicate <a> entries
   inside .nav__menu-veel-drop surface ONLY in the @media windows where
   their primary nav slot is hidden. */
/* Specificity note: the older `.nav__menu-veel-drop a { display:block !important }`
   rule below has (0,1,1) — higher than our (0,1,0). To beat it we
   nest under .nav__menu-veel-drop, giving (0,2,0) > (0,1,1). */
.nav__menu-veel-drop .nav__veel-collapsed {
	display: none !important;
}
@media (max-width: 1099px) and (min-width: 1000px) {
	.nav__menu-veel-drop .nav__veel-collapsed--1099 {
		display: block !important;
	}
}
@media (max-width: 999px) and (min-width: 900px) {
	.nav__menu-veel-drop .nav__veel-collapsed {
		display: block !important;
	}
}
/* <900px: full burger takeover */
@media (max-width: 899px) {
	.nav__menu,
	.nav__cta {
		display: none !important;
	}
	.nav__burger {
		display: inline-flex !important;
	}
}

/* v17ad — Compact drawer: anchor to the right edge, max-width 320px so the
   drawer doesn't block the whole screen. Keeps backdrop visual by leaving
   the rest of the page visible (and dimmed via the drawer's solid bg color
   only inside the 320px panel). */
.drawer {
	left: auto !important;
	right: 0 !important;
	width: 320px !important;
	max-width: 86vw !important;
	box-shadow: -12px 0 36px rgba(0, 0, 0, 0.4) !important;
}
.drawer__links a {
	font-size: 17px !important;
	padding: 14px 0 !important;
}

/* v12.5-batch7a — "Veel" dropdown in nav (moves Nõuanded/Videod/Uudised/Otsing behind one click) */
.nav__menu-veel {
	position: relative;
	flex-shrink: 0;
}
.nav__menu-veel-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #fdfbf7;
	padding: 24px 0;
	margin: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	transition: color 0.15s;
}
.nav__menu-veel-btn:hover {
	color: #fff;
}
.nav__menu-veel-btn svg {
	transition: transform 0.18s;
}
.nav__menu-veel[data-open] .nav__menu-veel-btn svg {
	transform: rotate(180deg);
}
.nav__menu-veel-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: #fdfbf7;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s;
}
.nav__menu-veel-btn:hover::after,
.nav__menu-veel[data-open] .nav__menu-veel-btn::after {
	transform: scaleX(1);
}

.nav__menu-veel-drop {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 200px;
	background: #faf7f2;
	color: #201614;
	border: 1px solid rgba(32, 22, 20, 0.12);
	box-shadow: 0 18px 40px -16px rgba(32, 22, 20, 0.28);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition:
		opacity 0.18s,
		visibility 0.18s,
		transform 0.18s;
	z-index: 100;
}
.nav__menu-veel[data-open] .nav__menu-veel-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav__menu-veel-drop a {
	display: block !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #201614 !important;
	transition: background 0.15s;
}
.nav__menu-veel-drop a::after {
	display: none !important;
}
.nav__menu-veel-drop a:hover {
	background: rgba(192, 57, 43, 0.08);
	color: var(--red-accent) !important;
}

/* Mobile: dropdown not needed, Veel links flat in drawer */
@media (max-width: 1023px) {
	.nav__menu-veel {
		display: none !important;
	}
}

/* v17bl — Tooted dropdown. Mirrors .nav__menu-veel exactly so the two
   dropdowns share visual surface. Separate selectors (vs. a generic
   .nav__menu-dropdown) preserve specificity ordering with v17ad
   responsive collapse rules above. */
.nav__menu-tooted {
	position: relative;
	flex-shrink: 0;
}
.nav__menu-tooted-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #fdfbf7;
	padding: 24px 0;
	margin: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	transition: color 0.15s;
	white-space: nowrap;
	flex-shrink: 0;
}
.nav__menu-tooted-btn:hover {
	color: #fff;
}
.nav__menu-tooted-btn svg {
	transition: transform 0.18s;
}
.nav__menu-tooted[data-open] .nav__menu-tooted-btn svg {
	transform: rotate(180deg);
}
.nav__menu-tooted-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: #fdfbf7;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s;
}
.nav__menu-tooted-btn:hover::after,
.nav__menu-tooted[data-open] .nav__menu-tooted-btn::after,
.nav__menu-tooted.current .nav__menu-tooted-btn::after {
	transform: scaleX(1);
}
.nav__menu-tooted-drop {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #faf7f2;
	color: #201614;
	border: 1px solid rgba(32, 22, 20, 0.12);
	box-shadow: 0 18px 40px -16px rgba(32, 22, 20, 0.28);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition:
		opacity 0.18s,
		visibility 0.18s,
		transform 0.18s;
	z-index: 100;
}
.nav__menu-tooted[data-open] .nav__menu-tooted-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav__menu-tooted-drop a {
	display: block !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #201614 !important;
	transition: background 0.15s;
}
.nav__menu-tooted-drop a::after {
	display: none !important;
}
.nav__menu-tooted-drop a:hover {
	background: rgba(192, 57, 43, 0.08);
	color: var(--ink, #201614) !important;
}
/* v17bl — Current/active sub-item: red fill + white text for readable contrast.
   Previously this used 8% red bg + red text which was illegible on cream. */
.nav__menu-tooted-drop a.current {
	background: var(--red, #c0392b);
	color: #fdfbf7 !important;
	font-weight: 600;
}
.nav__menu-tooted-drop a.current:hover {
	background: var(--red-dark, #a42f22);
	color: #fdfbf7 !important;
}
@media (max-width: 1023px) {
	.nav__menu-tooted {
		display: none !important;
	}
}

/* v17bl — current-page indicator on the primary nav menu links. The
   anchor gets class="current" (also aria-current="page" for a11y). */
.nav__menu a.current {
	color: #fff !important;
	font-weight: 600 !important;
}
.nav__menu a.current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: #fdfbf7;
	transform: scaleX(1);
}
.nav__menu a {
	position: relative;
}

/* v17bl — drawer Tooted group: inline sub-items, no dropdown collapse
   on mobile (per spec). Sub-items get a subtle indent + smaller size. */
.drawer__group {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* v17bn — Mobile drawer "Tooted" group label hidden: visual noise above inline sublinks. Semantic markup preserved for screen readers via the .drawer__group wrapper. */
.drawer__group-title {
	display: none;
}
.drawer__sublink {
	display: block;
	padding: 10px 0 10px 16px !important;
	font-size: 16px !important;
	color: #fdfbf7;
	opacity: 0.88;
}
.drawer__sublink:hover,
.drawer__sublink:focus {
	color: #ffffff;
	opacity: 1;
}
.drawer__sublink.current {
	color: var(--red-accent) !important;
	font-weight: 600 !important;
}
.drawer__links a.current {
	color: var(--red-accent) !important;
	font-weight: 600 !important;
}

/* Secondary nav items (including "Kõik tooted") — lighter weight, smaller */
.nav__menu a[href="/tootekategooria/"],
.nav__menu a[href="/nouanded/"],
.nav__menu a[href="/referentsid/"],
.nav__menu a[href="/dokumendid/"],
.nav__menu a[href="/paigaldusjuhendid/"],
.nav__menu a[href="/kontakt/"] {
	opacity: 0.9;
	font-weight: 500 !important;
}
.nav__logo-dot {
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
}

/* v7 #12 — Mobile hero stats: weather card must not overlap stats */
@media (max-width: 767px) {
	.hero__weather-card {
		position: relative !important;
		right: auto !important;
		bottom: auto !important;
		margin: 24px auto 0 !important;
		max-width: calc(100% - 40px) !important;
	}
	.hero__stats {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 16px !important;
		margin-top: 24px !important;
	}
	.hero__stats .stat {
		flex: 1 1 calc(50% - 8px);
	}
	.hero__stats .stat__num,
	.hero__stats strong {
		color: #fdfbf7 !important;
		opacity: 1 !important;
	}
	.hero__stats .stat__lbl,
	.hero__stats p {
		color: rgba(253, 251, 247, 0.78) !important;
	}
}

/* v7 #20 + #22 — Reference card image overlays cleaner (no weird white filter) */
.ref-card__img::before {
	background: none !important;
}
.ref-card__img::after {
	background: linear-gradient(
		180deg,
		transparent 45%,
		rgba(26, 18, 16, 0.62) 100%
	) !important;
}

/* v7 #26 — Nõuanded article cards: hide stripe overlays on photos */
.article-card__img::before,
.article-card__img::after,
.featured__img::before,
.featured__img::after {
	display: none !important;
}

/* v7 #31 — /dokumendid/ breadcrumb + hero text contrast (was white on cream) */
.hero[data-screen-label*="Dokumendid"] .breadcrumb,
.hero[data-screen-label*="Dokumendid"] .breadcrumb a,
.hero[data-screen-label*="Dokumendid"] .breadcrumb span,
.hero[data-screen-label*="Dokumendid"] .hero__eyebrow,
.hero[data-screen-label*="Dokumendid"] h1,
.hero[data-screen-label*="Dokumendid"] .hero__sub {
	color: #201614 !important;
	text-shadow: none !important;
}
.hero[data-screen-label*="Dokumendid"] .hero__sub {
	color: rgba(32, 22, 20, 0.78) !important;
}

/* v7 #32 — /dokumendid/ stats (47 Dokumenti / 3 Keelt / CE / 2025) — consistent styling */
.docs__stats,
.hero__stats--docs,
.page-head__meta {
	gap: 32px !important;
}
.docs__stat,
.docs__stat-item,
.docs__stat-num {
	color: #201614 !important;
	font-family: "JetBrains Mono", monospace;
}

/* v7 #15p1 — Mobile brand band: Eternit photo background (was grey/beige) */
@media (max-width: 899px) {
	.brand-band__header--eternit {
		background-image:
			linear-gradient(
				160deg,
				rgba(32, 22, 20, 0.62) 0%,
				rgba(45, 32, 27, 0.5) 100%
			),
			url("/assets/images/brand-eternit.jpg") !important;
		background-size: cover !important;
		background-position: center !important;
	}
	.brand-band__header--fibrodah {
		background-image:
			linear-gradient(
				160deg,
				rgba(164, 47, 34, 0.55) 0%,
				rgba(107, 30, 22, 0.5) 100%
			),
			url("/assets/images/brand-fibrodah.jpg") !important;
		background-size: cover !important;
		background-position: center !important;
	}
}

/* v7 #13 + v8.1 Prompt #15 — Align all § A·01..04 labels to same Y position
   Before: .benefit-illo__ref--onfamily had top: 26px while others had top: 12px
   → chaotic look across the 4 benefit cards. Force all to 20px. */
.benefit-illo__ref,
.benefit-illo__ref--onfamily {
	top: 20px !important;
	right: 18px !important;
	opacity: 0.55 !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	letter-spacing: 0.14em !important;
}

/* v8.5 — Force-hide empty data-slot elements (template CSS loses to .spec-row display:grid)
   Only show slots that generator explicitly marked .data-slot--filled */
[data-slot]:not(.data-slot--filled) {
	display: none !important;
}

/* v8.4 — When article-hero-img has a real background photo (inline style set by generator),
   hide the dark gradient + stripe overlays that would otherwise obscure it */
.article-hero-img[style*="background-image"]::before,
.article-hero-img[style*="background-image"]::after {
	display: none !important;
}

/* v17aa — Kontakt page hero: farmhouse photo + dark overlay for readable white
   hero text. Previously used ref-4.jpg with a cream gradient — but the white
   text colors set elsewhere (hero__title #fdfbf7, hero__sub rgba(253...))
   were unreadable against the bright cream wash. Now: same `body:not(.home)`
   white text rules are flipped to work AGAINST a dark gradient over a
   uniformly mid-toned farmhouse shot, eliminating the contrast failure. */
.hero[data-screen-label*="Kontakt"] {
	background-image:
		linear-gradient(
			180deg,
			rgba(32, 22, 20, 0.82) 0%,
			rgba(32, 22, 20, 0.72) 50%,
			rgba(32, 22, 20, 0.62) 100%
		),
		url("/assets/images/heroes/eternit-hero-farmhouse.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.hero[data-screen-label*="Kontakt"] .hero__bg {
	display: none !important;
}

/* v7 #7 — White-on-white contrast: ensure hero__eyebrow + breadcrumb over light bg are dark */
.page-head__lede,
.page-head__eyebrow,
.page-head .breadcrumb a {
	color: #3a2d26 !important;
}

/* v7 #23 — References "Lae veel projekte" button: hide if all items loaded (default since generator loads all 7) */
.gallery__more button.btn,
.gallery__more .btn--red {
	display: none !important;
}

/* ============================================================
   Faas 7.11 (v5 #2) — Form checkbox: constrain SVG size
   Bug: checkmark SVG inside .check .box had no explicit dimensions
   so it expanded to fill parent width — looked like a huge check
   filling the whole form area when checkbox is ticked.
   ============================================================ */
label.check {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	cursor: pointer;
	line-height: 1.5;
}
label.check input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
}
label.check .box {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	border: 1.5px solid #cfc5b1 !important;
	border-radius: 4px !important;
	background: #fdfbf7 !important;
	transition:
		background 0.15s,
		border-color 0.15s !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}
label.check .box svg {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	opacity: 0 !important;
	color: #fdfbf7 !important;
	transition: opacity 0.15s !important;
}
label.check input[type="checkbox"]:checked + .box {
	background: #c0392b !important;
	border-color: #c0392b !important;
}
label.check input[type="checkbox"]:checked + .box svg {
	opacity: 1 !important;
}
label.check > span:last-child {
	font-size: 13px;
	line-height: 1.5;
	color: #3a2d26;
	flex: 1;
}

/* ============================================================
   Faas 7.11 (v5 #4) — Brand band: hide wordmark watermark
   Wordmark ("ETERNIT"/"FIBRODAH" in huge decorative text behind content)
   duplicates the logo + title, creating triple-repeat noise
   ============================================================ */
.brand-band__wordmark {
	display: none !important;
}

/* ============================================================
   Faas 7.11 (v5 #5) — Hide dark diagonal stripes overlay on product cards
   .product__img::before applies repeating-linear-gradient as placeholder,
   but now real photos cover that element — overlay only adds visual noise
   ============================================================ */
.product__img::before {
	display: none !important;
}
.product__img::after {
	display: none !important;
}

/* =========== HOMEPAGE HERO =========== */
/* v17k (2026-05-12) — Wire the v12.5-phase15 weather-driven hero system through
   this override. The previous v8.2 B3 hardcoded ref-6.jpg with !important, which
   silently defeated the JS that sets --hero-image on document.documentElement
   based on Tallinn weather (see 01-homepage.html line 3016+). Switching to
   var(--hero-image, ...) lets the JS-set variable flow through while keeping
   the cream-fade legibility gradient overlay intact. Fallback URL is the same
   default the template uses (homepage-hero-modern.jpg). */
.hero {
	background-image:
		linear-gradient(
			180deg,
			rgba(26, 18, 16, 0.48) 0%,
			rgba(26, 18, 16, 0.28) 40%,
			rgba(26, 18, 16, 0.12) 65%,
			rgba(250, 247, 242, 0.7) 92%,
			var(--cream) 100%
		),
		var(--hero-image, url("/assets/images/heroes/homepage-hero-modern.jpg")) !important;
	background-size: cover !important;
	background-position: center 35% !important;
	background-repeat: no-repeat !important;
	color: #fdfbf7 !important;
}
/* Hide any residual dark .hero__bg / .hero__texture overlays that darken the image */
.hero > .hero__bg,
.hero > .hero__texture {
	display: none !important;
}

.hero h1,
.hero .h1,
.hero__title {
	color: #fdfbf7 !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.hero__sub,
.hero p {
	color: rgba(253, 251, 247, 0.92) !important;
}

/* =========== HOMEPAGE BRAND BANDS =========== */
.brand-band__header--eternit {
	background-image:
		linear-gradient(
			135deg,
			rgba(32, 22, 20, 0.75) 0%,
			rgba(45, 32, 27, 0.55) 100%
		),
		url("/assets/images/brand-eternit.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}

.brand-band__header--fibrodah {
	background-image:
		linear-gradient(
			135deg,
			rgba(164, 47, 34, 0.65) 0%,
			rgba(107, 30, 22, 0.55) 100%
		),
		url("/assets/images/brand-fibrodah.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}

/* Hide the ::before texture overlay now that we have real photos */
.brand-band__header::before {
	opacity: 0.25 !important;
}

/* =========== REFERENCE CARDS =========== */
.ref-card__img::before {
	background-image: none !important;
	background: transparent !important;
}

.ref-card__img--a {
	background-image: url("/assets/images/ref-1.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--b {
	background-image: url("/assets/images/ref-2.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--c {
	background-image: url("/assets/images/ref-3.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--d {
	background-image: url("/assets/images/ref-4.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--e {
	background-image: url("/assets/images/ref-5.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--f {
	background-image: url("/assets/images/ref-6.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--g {
	background-image: url("/assets/images/ref-7.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.ref-card__img--h {
	background-image: url("/assets/images/ref-8.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}

/* Darken reference photos slightly so white text overlays read clearly */
.ref-card__img {
	background-color: #1a1210 !important;
}
.ref-card__img::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(
		180deg,
		transparent 40%,
		rgba(26, 18, 16, 0.6) 100%
	) !important;
	z-index: 1 !important;
}

/* v17j (2026-05-12) — Removed the .article-hero-img / .article-hero-img__inner
   `!important` block that forced every article hero to load
   /assets/images/article-hero.jpg, defeating the IMG_MAP-driven per-article
   inline-style URL set by generateArticlePage(). The rule was a legacy
   fallback from before Phase 17B/17E shipped per-article hero injection. */

/* =========== CATEGORY HERO (03-product-category) =========== */
.cat-hero {
	background-image:
		linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%),
		radial-gradient(circle at 80% 30%, rgba(192, 57, 43, 0.08), transparent 70%) !important;
}

/* Optional: Add subtle roof texture hint to category hero via real photo */
.cat-hero::after {
	content: "" !important;
	position: absolute !important;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40%;
	background-image: url("/assets/images/brand-eternit.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
	opacity: 0.18 !important;
	mix-blend-mode: multiply !important;
	mask-image: linear-gradient(90deg, transparent 0%, black 50%) !important;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		black 50%
	) !important;
	z-index: -1 !important;
	pointer-events: none;
}

/* v17m (2026-05-12) — Removed the .featured__img `!important` block that
   forced every /nouanded/ featured card to load /assets/images/article-hero.jpg,
   defeating the per-post inline-style URL set by generateAdviceIndex().
   Same legacy pattern as the v17j fix on .article-hero-img. */

/* =========== BROWSE CARDS (category overview) =========== */
.browse-card__vis {
	background-image:
		linear-gradient(
			180deg,
			rgba(32, 22, 20, 0.3) 0%,
			rgba(32, 22, 20, 0.6) 100%
		),
		url("/assets/images/brand-eternit.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.browse-card__vis--b {
	background-image:
		linear-gradient(
			180deg,
			rgba(164, 47, 34, 0.3) 0%,
			rgba(107, 30, 22, 0.6) 100%
		),
		url("/assets/images/brand-fibrodah.jpg") !important;
}
.browse-card__vis--c {
	background-image:
		linear-gradient(
			180deg,
			rgba(61, 90, 63, 0.3) 0%,
			rgba(45, 66, 49, 0.6) 100%
		),
		url("/assets/images/ref-5.jpg") !important;
}

/* =========== PAGE-HEAD (04-references) =========== */
/* Claude Design had dark brown gradient here; force cream-warm */
.page-head__bg {
	background:
		radial-gradient(
			900px 500px at 80% 30%,
			rgba(192, 57, 43, 0.08),
			transparent 70%
		),
		linear-gradient(160deg, var(--cream) 0%, var(--cream-warm) 100%) !important;
}

/* ============================================================
   Faas 3.1 (#10) — Nav dropdown menu under "Kõik tooted"
   ============================================================ */
.nav__dropdown {
	position: relative;
}
.nav__dropdown-trigger {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.nav__dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: #fff;
	border: 1px solid #e6ddc9;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(32, 22, 20, 0.12);
	padding: 8px;
	display: none;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
	z-index: 100;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
	display: block;
	opacity: 1;
	transform: translateY(0);
}
.nav__dropdown-menu a {
	display: block;
	padding: 10px 14px;
	color: #201614 !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.15s;
}
.nav__dropdown-menu a:hover {
	background: #f4ede2;
	color: #c0392b !important;
}

/* Faas 3.4 — Weather stat in hero (legacy, pre-v4) */
.stat--weather .stat__num {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.stat--weather #heroWeatherIcon svg {
	color: #ffe29a;
}

/* ============================================================
   Faas 7.3 (v4 #5) — Replace striped hero placeholders with real photos
   Target per-page via data-screen-label attribute (no HTML changes needed)
   ============================================================ */

/* /kontakt/ — Office/contact scene */
.hero[data-screen-label*="Kontakt"] {
	background-color: #201614;
}
.hero[data-screen-label*="Kontakt"] .hero__bg {
	background-image:
		linear-gradient(
			160deg,
			rgba(250, 247, 242, 0.92) 0%,
			rgba(250, 247, 242, 0.78) 60%,
			rgba(250, 247, 242, 0.55) 100%
		),
		url("/assets/images/brand-eternit.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}
.hero[data-screen-label*="Kontakt"] .hero__texture {
	display: none !important;
}

/* /paigaldusjuhendid/ — Installation scene */
.hero[data-screen-label*="Paigaldusjuhendid"] {
	background-color: #201614;
}
.hero[data-screen-label*="Paigaldusjuhendid"] .hero__bg {
	background-image:
		linear-gradient(
			180deg,
			rgba(32, 22, 20, 0.35) 0%,
			rgba(250, 247, 242, 0.88) 80%,
			var(--cream) 100%
		),
		url("/assets/images/article-hero.jpg") !important;
	background-size: cover !important;
	background-position: center 35% !important;
}
.hero[data-screen-label*="Paigaldusjuhendid"] .hero__texture {
	display: none !important;
}

/* /dokumendid/ — Documents context (darker, technical) */
.hero[data-screen-label*="Dokumendid"] {
	background-color: #201614;
	background-image:
		linear-gradient(
			180deg,
			rgba(32, 22, 20, 0.55) 0%,
			rgba(250, 247, 242, 0.9) 88%,
			var(--cream) 100%
		),
		url("/assets/images/brand-fibrodah.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}

/* /referentsid/ — Reference project scene */
.page-head[data-screen-label*="Referentsid"] .page-head__roofs {
	display: none !important;
}
.page-head[data-screen-label*="Referentsid"] .page-head__bg {
	background:
		linear-gradient(
			160deg,
			rgba(250, 247, 242, 0.88) 0%,
			rgba(250, 247, 242, 0.72) 60%,
			rgba(250, 247, 242, 0.5) 100%
		),
		url("/assets/images/ref-1.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}

/* /nouanded/ — Advice index (subtle, cream-warm) */
.page-head[data-screen-label*="N\00f5uanded"] .page-head__roofs,
.page-head[data-screen-label*="Nouanded"] .page-head__roofs {
	display: none !important;
}
.page-head[data-screen-label*="N\00f5uanded"] .page-head__bg,
.page-head[data-screen-label*="Nouanded"] .page-head__bg {
	background:
		linear-gradient(
			160deg,
			rgba(250, 247, 242, 0.92) 0%,
			rgba(250, 247, 242, 0.78) 60%,
			rgba(250, 247, 242, 0.58) 100%
		),
		url("/assets/images/article-hero.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
}

/* =================================================================
   v12.5-phase3 — Cohesion sweep
   Goals: 17 button variants → 4 canonical, 20 section paddings → 3,
   white→cream cleanup, dark-warm consolidation, font unification.
   This block is the canonical reference. Runs LAST (after site-polish
   + inline template <style>), so it wins via cascade order + !important.
   ================================================================= */

/* ---- Section padding tokens (canonical 3) ---- */
:root {
	--section-pad-sm: 48px; /* tight: hero stubs, list rails */
	--section-pad-md: 80px; /* default rhythm */
	--section-pad-lg: 112px; /* generous: marquee CTAs, brand bands */
}

/* ---- Button system: 4 canonical variants ----
   .btn--primary   — brand-red filled (main CTAs)
   .btn--secondary — outline on cream (red border + red text, fills on hover)
   .btn--tertiary  — text link with red color, no chrome
   .btn--dark      — for dark-bg sections (cream-outline ghost OR cream-fill)
   Size + width modifiers: .btn--sm, .btn--lg, .btn--full
   Legacy aliases mapped: .btn--red → primary, .btn--ghost-light → dark,
   .btn--ghost-dark / .btn--ghost / .btn--outline → secondary, .btn--block → full
*/
.btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-height: 48px !important;
	padding: 0 24px !important;
	font-family: "Inter", system-ui, sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	border: 0 !important;
	border-radius: 0 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition:
		background 0.18s,
		color 0.18s,
		border-color 0.18s,
		transform 0.12s !important;
}
.btn:active {
	transform: translateY(1px);
}

/* Primary — solid brand-red (canonical #C0392B, NOT #FF3131) */
.btn--primary,
.btn--red,
.btn.btn--red {
	background: #c0392b !important;
	color: #fdfbf7 !important;
	box-shadow: none !important;
}
.btn--primary:hover,
.btn--red:hover,
.btn.btn--red:hover {
	background: #a42f22 !important;
	color: #fdfbf7 !important;
}

/* Secondary — outline on cream (legacy: .btn--ghost, .btn--ghost-dark, .btn--outline)
   Charcoal text + charcoal border (preserves existing semantics). */
.btn--secondary,
.btn--ghost,
.btn--ghost-dark,
.btn--outline {
	background: transparent !important;
	color: #201614 !important;
	box-shadow: inset 0 0 0 1.5px #201614 !important;
	border: 0 !important;
}
.btn--secondary:hover,
.btn--ghost:hover,
.btn--ghost-dark:hover,
.btn--outline:hover {
	background: #201614 !important;
	color: #fdfbf7 !important;
	box-shadow: inset 0 0 0 1.5px #201614 !important;
}

/* Tertiary — text link with red color (no bg, no border) */
.btn--tertiary {
	background: transparent !important;
	color: #c0392b !important;
	box-shadow: none !important;
	min-height: 0 !important;
	padding: 6px 0 !important;
	border-bottom: 1px solid currentColor !important;
}
.btn--tertiary:hover {
	color: #a42f22 !important;
}

/* Dark — for dark sections (cream outline ghost). Legacy: .btn--ghost-light */
.btn--dark,
.btn--ghost-light {
	background: transparent !important;
	color: #fdfbf7 !important;
	box-shadow: inset 0 0 0 1.5px rgba(253, 251, 247, 0.85) !important;
	border: 0 !important;
}
.btn--dark:hover,
.btn--ghost-light:hover {
	background: #fdfbf7 !important;
	color: #201614 !important;
	box-shadow: inset 0 0 0 1.5px #fdfbf7 !important;
}

/* Size + width modifiers */
.btn--sm {
	min-height: 40px !important;
	padding: 0 16px !important;
	font-size: 13.5px !important;
}
.btn--lg {
	min-height: 56px !important;
	padding: 0 32px !important;
	font-size: 16px !important;
}
.btn--full,
.btn--block {
	width: 100% !important;
}
.btn .arrow {
	font-size: 18px;
	line-height: 1;
}

/* Reset stray inline overrides that drifted button sizing in templates.
   Use 48px default (44px is too tight on hero CTAs alongside body text). */
.specs__cta .btn,
.cta-card .btn,
.support__actions .btn {
	min-height: 48px !important;
	padding: 0 24px !important;
}
/* .specs__pending-actions stays at 44px from site-polish.css — already sized
   for sparse-spec compact layout. Don't fight it. */

/* Navbar CTA — exception by design (ghost on red nav). Already styled above
   at lines 175-191; this preserves that override against the new .btn--primary
   default. The cascade order keeps the navbar rule winning because it's
   matched first by document order. */
.nav__cta .btn,
.nav__cta .btn--red,
.nav__cta .btn.btn--red {
	background: transparent !important;
	color: #ffffff !important;
	box-shadow: inset 0 0 0 2px #ffffff !important;
	border: 0 !important;
	min-height: 44px !important;
	padding: 9px 18px !important;
}
.nav__cta .btn:hover,
.nav__cta .btn--red:hover,
.nav__cta .btn.btn--red:hover {
	background: #ffffff !important;
	color: #c0392b !important;
}

/* ---- Section padding helpers (3 canonical, replace 20 ad-hoc combos) ----
   Mobile-first: all sections start at --section-pad-md (80px).
   At ≥768px, default sections + .section--lg jump to --section-pad-lg (112px).
   .section--sm explicitly stays tight. */
/* Tight track — page-head / breadcrumb-style sections (not hero photos) */
.section--sm,
.p-hero {
	padding-top: var(--section-pad-sm) !important;
	padding-bottom: var(--section-pad-sm) !important;
}
/* Default + large track — most rhythm sections.
   Mobile: --section-pad-md (80px). Desktop: --section-pad-lg (112px).
   Excluded by intent: .hero (full-photo homepage), .article-head + .article-body
   (CD-1 editorial polish has its own tuned rhythm), .p-install (dark band uses
   intentional 80/96 to feel snug). */
.section,
.section--md,
.section--lg,
.cat-hero,
.p-desc,
.p-specs,
.p-gallery,
.p-related,
.info-section,
.team,
.faq,
.gallery,
.related,
.testimonial,
.page-head,
.xsect,
.quote,
.p-cta-section {
	padding-top: var(--section-pad-md) !important;
	padding-bottom: var(--section-pad-md) !important;
}
@media (min-width: 768px) {
	.section,
	.section--lg,
	.cat-hero,
	.p-desc,
	.p-specs,
	.p-gallery,
	.p-related,
	.info-section,
	.team,
	.faq,
	.gallery,
	.related,
	.testimonial,
	.page-head,
	.xsect,
	.quote,
	.p-cta-section {
		padding-top: var(--section-pad-lg) !important;
		padding-bottom: var(--section-pad-lg) !important;
	}
}

/* ---- Color drift cleanup ---- */

/* White→cream: 113 stray pure-white instances on a cream-bg site.
   Most "white" hits in computed styles are legitimate: white text on dark
   sections, inverse logos, icon fills, hero overlays. The drift that
   actually visible-shows as white-on-cream is the .nav__cta hover state
   (background → #fff) and a handful of card backgrounds set with bare
   `#fff` instead of `#fdfbf7`. Leaving most alone; targeting only the
   documented offenders below.
   - .nav__cta .btn:hover already uses #fff in some inline templates;
     palette-fix overrides earlier (lines 186-191) force #ffffff which
     is correct on red nav (white IS the right color there).
   - Card backgrounds: most use cream already. Don't force.
   Outcome: 113 → expect minimal drop. The metric is misleading when most
   white hits are intentional (text/icons on dark). Documented for v16.   */

/* Dark-warm consolidation: #2D201B (422 uses, --ink-2 alias) and #3A2D26
   (161 uses, --charcoal-soft) drift from canonical body #201614.
   NOT consolidating via var() override — too many legitimate uses
   (gradient stops in hero/contact sections, secondary text against cream
   that needs slightly-warmer contrast). Drift is acknowledged; an explicit
   tonal scale (3 documented dark warms) is the right design-system answer,
   which is out of scope for a tidy pass. Leaving as-is. */

/* Stray font cleanup: Fraunces fallback unification.
   site-polish.css uses "Fraunces, serif" (1 occurrence)
   while paring.css + materjalid.css + product detail use "Fraunces, Georgia, serif"
   Force the SHORTER stack everywhere — Georgia is not a designed fallback,
   it's a leftover from copy-paste. */
[class*="title"][style*="Fraunces"],
[class*="hero"][style*="Fraunces"] {
	font-family: "Fraunces", serif !important;
}
.h1 u,
.h1 em,
.h1 i,
.h2 u,
.h2 em,
.h2 i,
.hero__title u,
.hero__title em,
.hero__title i,
.privacy__title u,
.privacy__title em,
.privacy__title i,
.catalog__hero-title u,
.catalog__hero-title em,
.catalog__hero-title i,
.etl__hero-title u,
.etl__hero-title em,
.etl__hero-title i,
.fbl__hero-title u,
.fbl__hero-title em,
.fbl__hero-title i,
.article__title u,
.article__title em,
.article__title i,
.article-hero__title u,
.article-hero__title em,
.article-hero__title i {
	font-family: "Fraunces", serif !important;
}

/* p-install (dark section) Fraunces accent — uses #f4a89a (salmon-pink)
   which is the LEGITIMATE dark-section equivalent of red. Kept as-is. */

/* ============================================================
   v17u — Lean CTA strip
   ============================================================
   Replaces the heavy inline <section class="quote"> form on listing
   pages. Single line of editorial copy + a red CTA button. The button's
   href is upgraded by the cart-aware script — /paring/ if the user has
   items, /kontakt/ otherwise.
   ============================================================ */
.cta-strip {
	background: var(--sand, #eee4d3);
	padding: 56px 0;
	border-top: 1px solid var(--line, #e6ddc9);
}
.cta-strip__inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
	text-align: center;
}
@media (min-width: 768px) {
	.cta-strip__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		gap: 32px;
	}
}
.cta-strip__text {
	font-family: "Fraunces", serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(22px, 1.5vw + 14px, 32px);
	line-height: 1.2;
	margin: 0;
	max-width: 36ch;
	color: var(--charcoal, #201614);
}
.cta-strip__btn {
	white-space: nowrap;
	padding: 14px 26px;
}

/* ============================================================
   v17z — Sitewide canonical breadcrumb (.crumb)
   ============================================================
   Replaces 5+ legacy class systems (.crumbs, .page-head__crumbs,
   .catalog__crumb, .news-archive__crumb, .crumb). Editorial JBM
   UPPERCASE 11px. Use class="crumb" on a <nav>; pages migrate
   via CRUMB_CLASS_REWRITES in generate-content-pages.ts. */
.crumb,
nav.crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey, #7a6b60);
	/* v17bl.1 — Use padding-top/bottom only so .crumb.container can apply
	   horizontal gutter via .container's padding-left/right rule. Was: padding: 16px 0. */
	padding-top: 16px;
	padding-bottom: 16px;
}
.crumb a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}
.crumb a:hover {
	color: var(--red, #c0392b);
}
.crumb span {
	color: rgba(122, 107, 96, 0.5);
}
.crumb__current,
.crumb [aria-current="page"] {
	color: var(--ink, #201614);
	font-weight: 600;
}
/* Light variant for dark backgrounds (e.g. /kontakt/ hero) */
.crumb--light,
.crumb--light a {
	color: rgba(253, 251, 247, 0.78);
}
.crumb--light span {
	color: rgba(253, 251, 247, 0.4);
}
.crumb--light .crumb__current,
.crumb--light [aria-current="page"] {
	color: #fdfbf7;
}

/* ============================================================
   v17z — Article callout box
   ============================================================
   Used for prominent in-article CTAs like the bestor.ee campaign
   link. Triggered by content blocks with type:"callout". */
.callout {
	background: var(--sand, #eee4d3);
	border-left: 3px solid var(--red, #c0392b);
	padding: 18px 22px;
	margin: 28px 0;
	border-radius: 4px;
}
.callout p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--charcoal, #201614);
}
.callout a,
.callout__cta {
	color: var(--red, #c0392b);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* v17ac — Suppress orphan .cpb__dot styling. The color-picker bubble
   (.cpb) was removed in an earlier phase, but a stale `.cpb__dot { position:
   fixed; ... }` rule kept rendering a 7px circular indicator in the
   bottom-left of product pages. Hide it sitewide. If the .cpb section is
   ever re-introduced, remove this override. */
.cpb__dot {
	display: none !important;
}

/* v17ac — Reference images section under products. Holds the deep-scraped
   in-situ photos (gallery beyond the hero shot) with an "illustratiivset
   materjali" label so users understand these are context shots, not the
   exact product variant. Section is content-conditional (generator only
   emits it when refs exist). */
.p-references {
	padding: 64px 0 48px;
	background: var(--cream, #faf7f2);
	border-top: 1px solid var(--line, #e6ddc9);
}
@media (min-width: 900px) {
	.p-references {
		padding: 88px 0 64px;
	}
}
.p-references__title {
	margin: 8px 0 12px;
	max-width: 18ch;
}
.p-references__title u,
.p-references__title em {
	font-family: "Fraunces", serif;
	font-style: italic;
	font-weight: 500;
	color: var(--red, #c0392b);
	text-decoration: none;
}
.p-references__lede {
	max-width: 56ch;
	margin: 0 0 32px;
	color: var(--charcoal-soft, #3a2d26);
	font-size: 16px;
	line-height: 1.55;
}
.p-references__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px) {
	.p-references__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media (min-width: 1024px) {
	.p-references__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}
.p-references__item {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--line, #e6ddc9);
	background: var(--cream-warm, #f4ede2);
	transition: transform 0.22s ease;
}
.p-references__item:hover {
	transform: translateY(-3px);
}
.p-references__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* v17bl.1 — Checkbox component (used on /paring/, /vordlus/, /kontakt/, etc.).
   Moved sitewide from 07-contact.html so /paring/ + other shells pick it up. */
.check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--ink-grey, #7a6b60);
	cursor: pointer;
	user-select: none;
	line-height: 1.5;
	padding: 4px 0;
}
.check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.check .box {
	width: 18px;
	height: 18px;
	border: 1.5px solid #c4c4c4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.check .box svg {
	width: 12px;
	height: 12px;
	color: #fdfbf7;
	opacity: 0;
	transition: opacity .12s;
}
.check input:checked + .box {
	background: var(--red, #c0392b);
	border-color: var(--red, #c0392b);
}
.check input:checked + .box svg { opacity: 1; }
.check a {
	color: var(--ink, #201614);
	border-bottom: 1px solid var(--line, #e6ddc9);
}

/* ============================================================
   v17bn-team-C W14 — Hero stats readability on dark photo bg
   Bolder weight + text-shadow + subtle glass tint behind the
   numbers so "27 000+ / 8.1 mln / 34 a" stay legible against
   any hero photograph. Applies to homepage + brand landings.
   ============================================================ */
.hero__stats .stat__num,
.hero__stats strong {
	font-weight: 700 !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.hero__stats .stat__lbl,
.hero__stats p {
	font-weight: 500 !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55) !important;
}