/*
 * Tecnovap — WordPress-specific overrides.
 *
 * The prototype CSS (styles.css) is kept byte-for-byte; every adjustment needed to
 * make it behave inside WordPress block markup lives here, scoped and reversible
 * (LESSON 23). Keep this file small and documented.
 */

/* WP wraps every template part in <div class="wp-block-template-part">, which
 * becomes the containing block and breaks position:sticky on .main-row-wrap
 * (and any sticky child). Flatten the wrapper. (LESSON 13) */
.wp-block-template-part {
	display: contents;
}

/* Belt-and-suspenders: the site header part may also receive an area wrapper.
 * Ensure the sticky element's ancestor chain stays transparent. */
.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

/* =================================================================
   Home hero (tv/hero) — responsive H1 fit (Session-18)
   The hero title carries explicit <br> breaks (block.json default:
   "Störst i världen / på professionella / ångtvättar"), so it renders
   as three lines at every width. styles.css steps --fs-3xl 64px -> a
   fixed 40px only at <=480px, with no further step for narrow phones,
   so the longest forced line ("på professionella", ~10.9em incl.
   tracking) overflows the .hero-content padding box and clips on
   ~320-430px screens. --fs-3xl is used ONLY by .hero-title, so make
   the heading fluid here: 64px on desktop (cap, unchanged) scaling
   down so the longest line always fits on phones. Scoped and
   reversible (LESSON 23). */
.hero-title {
	font-size: clamp(1.3rem, 9vw - 0.4rem, 4rem);
}

/* =================================================================
   tv-support — Support hub card grid (Session-6, G3)
   New section with no prototype equivalent; tokens from styles.css,
   scoped .tv-support-* (LESSON 23). wp-scripts does not auto-compile
   per-block style.css here, so support/FAQ CSS lives in this shared
   (globally enqueued) file under delimited markers.
   ================================================================= */
.tv-support {
	background: var(--c-surface);
	padding: 72px 0 88px;
}

.tv-support-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-support-heading {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--c-text);
	margin: 0 0 32px;
}

.tv-support-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.tv-support-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	height: 100%;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 30px 32px;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04);
	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.4s ease,
		border-color 0.25s ease;
}

.tv-support-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-yellow);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.025),
		0 8px 16px rgba(0, 0, 0, 0.04),
		0 20px 40px rgba(0, 0, 0, 0.08);
}

.tv-support-card-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--c-yellow);
	color: var(--c-text);
}

.tv-support-card-icon svg {
	width: 26px;
	height: 26px;
}

.tv-support-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

.tv-support-card-title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--c-text);
}

.tv-support-card-text {
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--c-text-2);
}

.tv-support-card-arrow {
	flex: 0 0 auto;
	align-self: center;
	color: var(--c-text-4);
	transition: transform 0.3s ease, color 0.25s ease;
}

.tv-support-card-arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.tv-support-card:hover .tv-support-card-arrow {
	transform: translateX(4px);
	color: var(--c-text);
}

@media (max-width: 768px) {
	.tv-support {
		padding: 48px 0 64px;
	}
	.tv-support-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.tv-support-card {
		padding: 24px;
		gap: 16px;
	}
}
/* ===== end tv-support ===== */

/* =================================================================
   tv-faq — Vanliga frågor: filter pills + accessible accordion
   (Session-6, G3). Scoped .tv-faq-* (LESSON 23). Panels are toggled
   via the [hidden] attribute by view.js; filtering hides .tv-faq-item.
   ================================================================= */
.tv-faq {
	background: var(--c-surface);
	padding: 56px 0 88px;
}

.tv-faq-inner {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 24px;
}

.tv-faq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 36px;
}

.tv-faq-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-text-2);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tv-faq-pill:hover {
	border-color: var(--c-border-strong);
	color: var(--c-text);
}

.tv-faq-pill.is-active {
	background: var(--c-yellow);
	border-color: var(--c-yellow);
	color: var(--c-text);
	font-weight: var(--fw-semibold);
}

.tv-faq-pill-count {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--c-text-4);
}

.tv-faq-pill.is-active .tv-faq-pill-count {
	color: var(--c-text);
}

.tv-faq-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-border);
}

.tv-faq-item {
	border-bottom: 1px solid var(--c-border);
}

.tv-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 22px 4px;
	font-family: var(--font);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--c-text);
	transition: color 0.2s ease;
}

.tv-faq-q:hover {
	color: var(--c-accent);
}

.tv-faq-q-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-text);
	transition: transform 0.3s ease, background 0.2s ease;
}

.tv-faq-q-icon svg {
	width: 17px;
	height: 17px;
}

.tv-faq-item.is-open .tv-faq-q-icon {
	transform: rotate(45deg);
	background: var(--c-yellow);
}

.tv-faq-a-inner {
	padding: 0 4px 26px;
	max-width: 760px;
	font-size: var(--fs-base);
	line-height: var(--lh-loose);
	color: var(--c-text-2);
}

.tv-faq-a-inner p {
	margin: 0 0 14px;
}

.tv-faq-a-inner p:last-child {
	margin-bottom: 0;
}

.tv-faq-a-inner a {
	color: var(--c-accent);
	text-decoration: underline;
}

.tv-faq-empty {
	margin: 28px 0 0;
	color: var(--c-text-3);
	font-size: var(--fs-base);
}

@media (max-width: 768px) {
	.tv-faq {
		padding: 40px 0 64px;
	}
	.tv-faq-q {
		font-size: var(--fs-base);
		padding: 18px 2px;
		gap: 16px;
	}
}
/* ===== end tv-faq ===== */

/* =================================================================
   tv-video — Demo & instruktionsfilmer: consent-gated (click-to-load)
   YouTube galleries (Session-6 W2b, G4). Scoped .tv-video-* / .tv-demo-*.
   Privacy by default: no external request until .tv-video-trigger click,
   then view.js injects a youtube-nocookie iframe into .tv-video-frame.
   ================================================================= */
.tv-video-section {
	background: var(--c-surface);
	padding: 64px 0 88px;
}

.tv-video-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-video-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.tv-video {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tv-video-trigger,
.tv-video-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
}

.tv-video-trigger {
	cursor: pointer;
	background: linear-gradient(140deg, #2f2f2f 0%, #1a1a1a 100%);
}

.tv-video-poster {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

/* Self-hosted thumbnail (Session-19): fills the 16:9 facade; no YouTube/Google
   request before the play click — only view.js (on click) talks to YouTube. */
.tv-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scrim only when a thumbnail is present, so the yellow play button keeps
   contrast over bright frames; lifts on hover/focus. */
.tv-video-poster--img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
	transition: background 0.2s ease;
}

.tv-video-trigger:hover .tv-video-poster--img::after,
.tv-video-trigger:focus-visible .tv-video-poster--img::after {
	background: rgba(0, 0, 0, 0.1);
}

.tv-video-play {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--c-yellow);
	color: var(--c-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
}

.tv-video-play svg {
	width: 28px;
	height: 28px;
	margin-left: 3px;
}

.tv-video-trigger:hover .tv-video-play,
.tv-video-trigger:focus-visible .tv-video-play {
	transform: scale(1.08);
	background: var(--c-yellow-hover);
}

.tv-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tv-video-caption {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--c-text-2);
}

.tv-video-consent-note {
	margin: 36px 0 0;
	font-size: var(--fs-sm);
	color: var(--c-text-3);
}

.tv-video-back {
	margin: 14px 0 0;
}

@media (max-width: 1000px) {
	.tv-video-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.tv-video-section {
		padding: 44px 0 64px;
	}
	.tv-video-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}
/* ===== end tv-video ===== */

/* =================================================================
   tv-service — Service & underhåll (Session-6 W3, G5). Reuses
   .download-card / .tv-support-card; this only adds layout (a
   responsive download grid for the PDF-heavy detail pages) + spacing.
   ================================================================= */
.tv-service-detail {
	background: var(--c-surface);
	padding: 64px 0 88px;
}

.tv-service-detail-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-service-group {
	margin-bottom: 48px;
}

.tv-service-group .product-section-heading {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--c-text);
	margin: 0 0 8px;
}

.tv-service-group .product-section-lead {
	color: var(--c-text-2);
	margin: 0 0 24px;
}

/* Many PDFs per page → lay the download cards out in a responsive grid. */
.tv-service-downloads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.tv-service-cats {
	margin-top: 8px;
}

.tv-service-back {
	margin: 8px 0 0;
}

@media (max-width: 640px) {
	.tv-service-detail {
		padding: 44px 0 64px;
	}
	.tv-service-downloads {
		grid-template-columns: 1fr;
	}
}
/* ===== end tv-service ===== */

/* =================================================================
   tv-prodcat — Product-category grid (Session-9, G10 P-4)
   Card grid of produkt posts on a nested /produkter/{kategori}/ page.
   Scoped .tv-prodcat-* (LESSON 23). Mirrors the .tv-support card
   language (white card, yellow hover, arrow nudge).
   ================================================================= */
.tv-prodcat {
	background: var(--c-surface);
	padding: 64px 0 88px;
}

.tv-prodcat-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-prodcat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.tv-prodcat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	overflow: hidden;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04);
	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.4s ease,
		border-color 0.25s ease;
}

.tv-prodcat-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-yellow);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.025),
		0 8px 16px rgba(0, 0, 0, 0.04),
		0 20px 40px rgba(0, 0, 0, 0.08);
}

.tv-prodcat-card-img {
	background: var(--c-surface);
	aspect-ratio: 1 / 1;
	min-height: 0;
	overflow: hidden;
	padding: 22px;
}

/* Every product image renders in the same square box via object-fit:contain, so a
   tall portrait shot (e.g. SpaceVac with extension poles) shows in full AND all
   card titles align across the row. NB: intentionally NO display:grid here — a grid
   item's height:100% resolves against the auto-sized grid row, so the image would
   overflow the aspect-ratio box and get clipped by overflow:hidden (cropping the
   product). A plain block child makes height:100% resolve to the box itself. */
.tv-prodcat-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tv-prodcat-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 22px 26px;
	border-top: 1px solid var(--c-border);
}

.tv-prodcat-card-title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--c-text);
}

.tv-prodcat-card-arrow {
	flex: 0 0 auto;
	color: var(--c-text-4);
	transition: transform 0.3s ease, color 0.25s ease;
}

.tv-prodcat-card-arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.tv-prodcat-card:hover .tv-prodcat-card-arrow {
	transform: translateX(4px);
	color: var(--c-text);
}

.tv-prodcat-empty {
	font-size: var(--fs-md);
	color: var(--c-text-2);
}

/* "Serier"-band on accessory landings + series pages (accessory-series kit).
   Sub-headings split the series band from the flat all-accessories grid. */
.tv-prodcat-subheading {
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--c-text);
	margin: 0 0 22px;
}

.tv-prodcat-grid--series {
	margin-bottom: 48px;
}

@media (max-width: 960px) {
	.tv-prodcat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.tv-prodcat {
		padding: 44px 0 60px;
	}
	.tv-prodcat-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}
/* ===== end tv-prodcat ===== */

/* ===== tv-acc (accessory/spare-part detail, P-5) ===== */
.tv-acc-detail {
	padding: 56px 0 72px;
}
.tv-acc-detail-inner {
	max-width: var(--content-max, 1100px);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 48px;
	align-items: start;
}
.tv-acc-media {
	background: #f7f7f7;
	border-radius: 16px;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tv-acc-media .tv-acc-img {
	width: 100%;
	height: auto;
	max-width: 480px;
	object-fit: contain;
}
.tv-acc-info {
	padding-top: 8px;
}
.tv-acc-meta {
	margin: 0 0 24px;
	border-top: 1px solid #ededed;
	padding-top: 20px;
}
.tv-acc-meta dt {
	font-size: var(--fs-sm, 0.85rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
	margin-bottom: 4px;
}
.tv-acc-meta dd {
	margin: 0;
	font-size: var(--fs-lg, 1.15rem);
	font-weight: 600;
	color: #1a1a1a;
	word-break: break-word;
}
.tv-acc-note {
	color: #4a4a4a;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 42ch;
}
.tv-acc-cta {
	display: inline-block;
}
@media (max-width: 860px) {
	.tv-acc-detail-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.tv-acc-media .tv-acc-img {
		max-width: 360px;
	}
}
/* ===== end tv-acc ===== */

/* ===== Reservdel-kit: post-content neutraliser (Session-14) =====
   The accessory single now renders via core/post-content (kit pattern) so the tagline
   + SKU are editable on-canvas. With useRootPaddingAwareAlignments + contentSize the
   post-content wrapper would otherwise constrain/pad the full-bleed page-hero /
   tv-acc-detail / contact-cta sections — strip it so the page renders exactly as the
   standalone block did. Scoped to the accessory page template. */
.page-template-tv-accessory-detail .wp-block-post-content {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}
/* ===== end Reservdel-kit ===== */

/* ===== use-case single: post-content wrapper neutraliser (Session-12 hybrid) =====
   The single now renders via core/post-content so the SSR detail block is editable in
   the post editor. With useRootPaddingAwareAlignments + contentSize, the post-content
   wrapper would otherwise constrain/pad the full-bleed sections — strip it so the page
   renders exactly as before. Scoped to the use-case single body class. */
.single-anvandningsomrade .wp-block-post-content,
.single-kundcase .wp-block-post-content,
.single-produkt .wp-block-post-content,
.page-template-tv-product-category .wp-block-post-content {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}
/* ===== end use-case post-content neutraliser ===== */

/* ===== use-case editor controls (Session-13, EDITOR-ONLY classes) =====
   These .tv-uc-* classes appear ONLY in src/usecase-detail/edit.js (the block edit
   preview), never in render.php, so styling them here is a no-op on the front-end
   while it tidies the on-canvas repeater UI inside the editor iframe (add_editor_style
   loads this file there). Layout helpers only; the @wordpress/components buttons carry
   their own styling. */
.tv-uc-edit-note {
	margin: 0 0 14px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #555;
	background: #fffbe6;
	border-left: 3px solid #fff000;
	border-radius: 3px;
}
.tv-uc-row {
	position: relative;
}
.tv-uc-row-tools {
	display: flex;
	gap: 2px;
	justify-content: flex-end;
	margin-top: 2px;
	opacity: 0.55;
	transition: opacity 0.12s ease;
}
.tv-uc-row:hover > .tv-uc-row-tools,
.tv-uc-card:hover > .tv-uc-row-tools,
.tv-uc-videocard-head .tv-uc-row-tools {
	opacity: 1;
}
.tv-uc-card {
	position: relative;
}
.tv-uc-iconpick {
	max-width: 220px;
	margin-bottom: 6px;
}
.tv-uc-add {
	margin-top: 8px;
}
.usecase-applications-list .tv-uc-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.usecase-applications-list .tv-uc-row .tv-uc-row-tools {
	margin-top: 0;
}
.tv-uc-check {
	flex: 0 0 auto;
}
.tv-uc-videocard {
	margin-bottom: 20px;
	padding: 16px;
	border: 1px dashed #d0d0d0;
	border-radius: 6px;
}
.tv-uc-videocard-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.tv-uc-videocard-head .components-base-control {
	flex: 1 1 auto;
	max-width: 340px;
}
.tv-uc-imgph {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	color: #888;
	font-size: 13px;
	background: #f3f3f3;
	border: 1px dashed #ccc;
}
.tv-uc-imgbtn {
	margin-top: 8px;
}
.tv-uc-videoph {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	justify-content: center;
	padding: 16px;
	min-height: 160px;
	background: #f3f3f3;
	border: 1px dashed #ccc;
}
.tv-uc-video-badge {
	font-weight: 600;
	color: #1a1a1a;
	background: #fff000;
	padding: 2px 8px;
	border-radius: 3px;
}
.tv-uc-avbtn {
	text-align: center;
	margin: 4px 0 10px;
}
/* ===== end use-case editor controls ===== */

/* ===== Kundcase section-block kit (Session-14) =====
   The original tv/case-detail rendered <article class="case-detail"> wrapping the
   header → product, and that article supplied the column's vertical rhythm
   (padding: 56px 0 80px; mobile 40px 0 56px). Now that header/slideshow/body/reasons/
   product are top-level section blocks, reproduce that exact rhythm via two inert marker
   classes the kit's render.php adds (.tv-case-header on the header, .tv-case-product on
   the product band). Scoped to those classes so a NOT-yet-migrated (monolithic
   tv/case-detail, still inside .case-detail) case is untouched during rollout. */
.tv-case-header {
	padding-top: 56px;
}
.tv-case-product {
	margin-bottom: 80px;
}
@media (max-width: 760px) {
	.tv-case-header {
		padding-top: 40px;
	}
	.tv-case-product {
		margin-bottom: 56px;
	}
}

/* Editor-only controls for the kundcase kit (these classes appear ONLY in the blocks'
   edit.js previews, never in render.php, so styling them is a no-op on the front-end
   while tidying the on-canvas repeaters inside the editor iframe). */
.tv-case-slideshow-edit .tv-uc-videocard {
	border-style: solid;
}
.tv-case-slide-media {
	margin-bottom: 10px;
}
.tv-case-slide-media img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}
.tv-case-slide-caption {
	margin: 6px 0 0;
	font-size: 13px;
	color: #555;
}
.tv-case-video-edit {
	margin: 24px 0;
}
.tv-case-video-edit figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: #555;
	text-align: center;
}
/* ===== end kundcase section-block kit ===== */

/* ===== Produkt section-block kit (Session-14, EDITOR-ONLY classes) =====
   These .tv-product-*-edit / .tv-uc-edit-label / .tv-uc-add--block classes appear ONLY in
   the product blocks' edit.js previews (src/product-*/edit.js), never in render.php, so
   styling them is a no-op on the front-end while tidying the on-canvas repeaters inside the
   editor iframe. The heavy lifting (.tv-uc-videocard / .tv-uc-row / .tv-uc-row-tools /
   .tv-uc-add / .tv-uc-imgph / .tv-uc-imgbtn / .tv-case-slide-media) is reused from the
   use-case + kundcase editor CSS above. */
.tv-product-hero-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
@media (max-width: 900px) {
	.tv-product-hero-cols {
		grid-template-columns: 1fr;
	}
}
.tv-uc-edit-label {
	margin: 18px 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #777;
}
.tv-uc-add--block {
	margin-top: 8px;
}
/* Nested row repeaters (specs groups / variant cards): label/value/note side by side. */
.tv-product-rows-edit {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.tv-product-rows-edit .tv-uc-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 6px;
}
.tv-product-rows-edit .tv-uc-row .components-base-control {
	flex: 1 1 0;
}
.tv-product-description-edit .product-quickfacts .tv-uc-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.tv-product-description-edit .product-quickfacts .tv-uc-row .components-base-control {
	flex: 1 1 0;
}
/* ===== end produkt section-block kit ===== */

/* ===== Static-page content blocks (Session-14) =====
   The static pages (om-anga first) were bespoke layouts whose copy lived in a single
   wp:html block + a scoped <style>. They are now decomposed into editable blocks
   (tv/page-hero, tv/benefit-grid, tv/link-grid, tv/prose-band + reused tv/cta-band) rendered
   from post_content. The pages' formerly page-scoped CSS is hoisted here VERBATIM (class
   names unchanged → the front-end looks identical) and is now shared by every static page
   that uses these blocks. The blocks' render.php emit exactly these classes. */

/* Full-bleed post-content for the static page templates (page-*.html main has .tv-static-single). */
.tv-static-single .wp-block-post-content {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

/* The breadcrumb-only variant is used two ways: as a bare breadcrumb strip (kontakt /
   hyra, whose real <h1> sits in a section below — the tight 20px in styles.css is right
   there), AND as a full content hero (om-anga / vi-ar-tecnovap / integritetspolicy, which
   carry eyebrow + heading + body). In the latter the 20px strip squeezes the content, so
   give those — and only those (they contain .page-hero-heading) — the normal page-hero
   rhythm. Bare strips have no .page-hero-heading and stay tight. */
.page-hero--breadcrumb-only:has(.page-hero-heading) {
	padding: 64px 0 56px;
}
.page-hero--breadcrumb-only:has(.page-hero-heading) .breadcrumbs {
	margin-bottom: 24px;
}
@media (max-width: 760px) {
	.page-hero--breadcrumb-only:has(.page-hero-heading) { padding: 48px 0 40px; }
}

/* Band layout (from the "Om ånga" page <style>; reused by benefit-grid / link-grid). */
.tv-about-band { padding: 88px 0; }
.tv-about-band--grey { background: var(--c-surface-3); }
.tv-about-band--alt { background: var(--c-surface-2); }
.tv-about-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.tv-about-band .section-heading { margin-bottom: 14px; }
/* Centred by default: .section-heading above it is centred globally, and a 760px intro in
   an 1100px column that is NOT centred sits 146px left of its own heading. Every block that
   reuses this shell (benefit-grid, link-grid, people-grid, soap2o-story) wants it centred -
   this used to be three separate :has(+ grid) opt-ins, one added per new consumer, which is
   how the fourth one shipped misaligned (André 2026-09-22). */
.tv-about-intro { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--c-text-2); max-width: 760px; margin: 0 auto 40px; text-align: center; }

/* Numbered benefit cards (tv/benefit-grid). */
.tv-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.tv-benefit { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; padding: 32px 28px; box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04); }
.tv-benefit-num { width: 44px; height: 44px; border-radius: 12px; background: var(--c-yellow); color: var(--c-text); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 19px; margin: 0 0 18px; }
.tv-benefit-title { font-size: 19px; font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-text); margin: 0 0 10px; }
.tv-benefit-body { flex: 1; font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0; }

/* Link-card grid (tv/link-grid). */
.tv-applink-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.tv-applink { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 22px 24px; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-text); transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease; }
.tv-applink:hover { border-color: var(--c-yellow); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.tv-applink span.tv-applink-arrow { color: var(--c-text-3); flex: 0 0 auto; }

/* Prose band (tv/prose-band). The "center" variant reproduces the old .tv-omanga-clients band. */
.tv-prose-band { padding: 88px 0; }
.tv-prose-band--grey { background: var(--c-surface-3); }
.tv-prose-band--alt { background: var(--c-surface-2); }
.tv-prose-band .tv-prose-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.tv-prose-band .tv-prose-inner > p { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0 0 18px; }
.tv-prose-band .tv-prose-inner > p:last-child { margin-bottom: 0; }
.tv-prose-band--center { background: var(--c-surface-2); padding: 56px 0; }
.tv-prose-band--center .tv-prose-inner { max-width: 900px; }
.tv-prose-band--center .tv-prose-inner > p { text-align: center; font-size: var(--fs-md); margin: 0 auto; }

@media (max-width: 880px) {
	.tv-benefit-grid, .tv-applink-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.tv-about-band, .tv-prose-band { padding: 56px 0; }
	.tv-benefit-grid, .tv-applink-grid { grid-template-columns: 1fr; }
}

/* "Vi är Tecnovap" structures (tv/two-col-prose + tv/people-grid). Hoisted verbatim from the
   page's <style> (class names unchanged → identical). .tv-about-* are defined above. */
.tv-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px; }
.tv-history-col h3 { font-size: 20px; font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-text); margin: 0 0 16px; }
.tv-history-col p { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0 0 16px; }
.tv-history-col p:last-child { margin-bottom: 0; }

.tv-team-grid, .tv-dist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.tv-team-card, .tv-dist-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; padding: 32px 28px; box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04); }
.tv-team-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--c-yellow); color: var(--c-text); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 26px; letter-spacing: 0.02em; margin: 0 0 20px; }
.tv-team-name { font-size: 20px; font-weight: var(--fw-bold); color: var(--c-text); margin: 0 0 4px; }
.tv-team-role { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-text-3); margin: 0 0 16px; }
.tv-team-contact { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-text-2); margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tv-team-contact a, .tv-dist-meta a { color: var(--c-text); text-decoration: none; }
.tv-team-contact a:hover, .tv-dist-meta a:hover { text-decoration: underline; }

.tv-dist-country { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-text-3); margin: 0 0 6px; }
.tv-dist-name { font-size: 22px; font-weight: var(--fw-bold); color: var(--c-text); margin: 0 0 10px; }
.tv-dist-person { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-text); margin: 0 0 8px; }
.tv-dist-meta { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-text-2); margin: 0 0 4px; }

.tv-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; margin: 8px auto 0; }
.tv-office { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 26px 28px; }
/* Address as a map link, same affordance as .footer-address-link: the address stays body
   text until hover/focus, then reads as a link. */
.tv-office-link { display: block; color: inherit; text-decoration: none; transition: color .15s ease; }
.tv-office-link:hover p, .tv-office-link:focus-visible p { color: var(--c-text); text-decoration: underline; }
.tv-office-link:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; border-radius: 6px; }
.tv-office h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text); margin: 0 0 10px; }
.tv-office p { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0; }

@media (max-width: 880px) {
	.tv-team-grid, .tv-dist-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
	.tv-history-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.tv-team-grid, .tv-dist-grid, .tv-offices { grid-template-columns: 1fr; }
}

/* Legal page reading column + cookie table + consent control (integritetspolicy-och-kakor).
   Hoisted verbatim from that page's former scoped <style> (class names unchanged → identical).
   The legal prose + cookie table stay a single wp:html block in post_content; this CSS styles it. */
.tv-legal { background: var(--c-surface); padding: 72px 0 96px; }
.tv-legal-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.tv-legal-lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0 0 32px; }
.tv-legal h2 { font-size: 24px; font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-text); margin: 44px 0 16px; }
.tv-legal h2:first-of-type { margin-top: 0; }
.tv-legal p { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0 0 18px; }
.tv-legal ul { margin: 0 0 18px; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.tv-legal li { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-text-2); }
.tv-legal a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.tv-legal a:hover { color: var(--c-text-2); }
.tv-legal-note { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-text-3); margin: 0 0 18px; }
.tv-legal-table-wrap { overflow-x: auto; margin: 8px 0 28px; -webkit-overflow-scrolling: touch; }
.tv-legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tv-legal-table th, .tv-legal-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.tv-legal-table thead th { background: var(--c-surface-2); font-weight: var(--fw-semibold); color: var(--c-text); white-space: nowrap; }
.tv-legal-table tbody th { font-weight: var(--fw-semibold); color: var(--c-text); }
.tv-legal-table td { color: var(--c-text-2); line-height: var(--lh-normal); }
.tv-legal-table code { font-size: 0.92em; background: var(--c-surface-2); padding: 1px 5px; border-radius: 4px; }
.tv-legal-consent { display: inline-flex; margin: 4px 0 8px; }
@media (max-width: 600px) {
	.tv-legal { padding: 48px 0 64px; }
	.tv-legal h2 { font-size: 21px; }
}
/* ===== end static-page content blocks ===== */

/* ===== search results: branded fallback for cards with no real image =====
   Replaces the bare type-emoji tile on image-less search hits (service/demo/
   static pages) with a brand-yellow card carrying the Tecnovap wordmark. Scoped
   to its own modifier so the news archive's emoji placeholders stay untouched. */
.nyheter-card-image--brandfallback {
	background: linear-gradient(135deg, #fffdf0 0%, #fff7b8 55%, #ffe94d 100%);
}
.nyheter-card-brandmark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56%;
	max-width: 190px;
}
.nyheter-card-brandmark img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.92;
}

/* ===== 404 page (templates/404.html) =====
   Brand-styled, centred not-found page: eyebrow + heading + lead + site search +
   quick links. Header/footer come from the template parts; this styles the main. */
.tv-404 { padding: 96px 24px 112px; background: var(--c-surface); }
.tv-404-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.tv-404-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-text-3); margin: 0 0 12px; }
.tv-404-title { font-size: 44px; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.015em; color: var(--c-text); margin: 0 0 14px; }
.tv-404-lead { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--c-text-2); margin: 0 auto 32px; max-width: 520px; }
.tv-404-search { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 32px; }
.tv-404-search-input { flex: 1 1 auto; min-width: 0; padding: 14px 18px; font-size: var(--fs-sm); font-family: var(--font); color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; }
.tv-404-search-input::placeholder { color: var(--c-text-3); }
.tv-404-search-input:focus { outline: none; border-color: var(--c-yellow); box-shadow: 0 0 0 3px rgba(255, 240, 0, 0.25); }
.tv-404-search-submit { flex-shrink: 0; }
.tv-404-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.tv-404-link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); padding: 12px 18px; border: 1px solid var(--c-border); border-radius: 999px; transition: border-color 0.2s ease, background 0.2s ease; }
.tv-404-link:hover { border-color: var(--c-yellow); background: var(--c-surface-2); }
@media (max-width: 600px) {
	.tv-404 { padding: 64px 20px 80px; }
	.tv-404-title { font-size: 32px; }
	.tv-404-search { flex-direction: column; }
}

/* =================================================================
   Responsive audit fixes (Session-18) — surgical, scoped.
   From the desktop/tablet/mobile audit (one page per layout type x 8
   widths, 1440..360). Each rule neutralises a verified break; the
   prototype design and the breakpoint system are left intact
   (LESSON 23). Refs point at the styles.css line the fix addresses.
   ================================================================= */

/* F1 — .page-hero-heading (styles.css:1540/1712: 44px, 32px at <=760). A long
   single Swedish word ("Användningsområden" 18ch, "Integritetspolicy" 17ch) is
   wider than the column at <=~445px and overflowed/clipped. NEVER break mid-word
   (André) — instead shrink the heading fluidly on narrow phones so the longest
   word fits WHOLE. Desktop 44px + tablet/481-760 32px stay exactly as the
   prototype; only <=480 scales (mirrors the Session-18 hero clamp). Verified:
   "Användningsområden" fits whole at 360 (22.3px), 0 overflow 320-480, no break. */
@media (max-width: 480px) {
	.page-hero-heading {
		font-size: clamp(20px, 6.2vw, 32px);
	}
}

/* F2 — support/demo hub cards: the icon-left flex card left the title body only
   ~125px wide at a 360 viewport, so long title words ("instruktionsvideos",
   "Höghöjdsstädning") either overflowed (~15px) or broke mid-word. Stack the
   card on phones (icon above the body) so the title gets the full card width
   (~231px) and every title fits whole — no break, no overflow. The arrow is
   decorative (the whole card is the link) so it's hidden when stacked. Verified:
   0 titles overflow, 0 sideways scroll at 360 on support + demo hub. */
@media (max-width: 600px) {
	.tv-support-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.tv-support-card-arrow {
		display: none;
	}
}

/* F3 — global header icon controls: .nav-toggle (styles.css:356, ~38x30) and
   .search-btn (styles.css:222, ~32x18) were below the 44px tap-target min.
   Expand the hit area; the visual icon is unchanged (centred in the box). */
.nav-toggle,
.search-btn {
	min-width: 44px;
	min-height: 44px;
}
.nav-toggle {
	align-items: center;
	justify-content: center;
}

/* F4 — kundcase slideshow controls. .case-detail-slideshow-btn is 44x44 at
   base but styles.css:4950 shrinks it to 38x38 at <=760; keep it >=44. The
   10px dots (styles.css:4685) get a larger transparent hit area (the visual
   dot stays 10px via background-clip:content-box). */
@media (max-width: 760px) {
	.case-detail-slideshow-btn {
		width: 44px;
		height: 44px;
	}
}
.case-detail-slideshow-dot {
	padding: 12px;
	box-sizing: content-box;
	background-clip: content-box;
}
.case-detail-slideshow-dots {
	gap: 0;
}

/* F5 — FAQ filter pills (overrides.css:193) rendered ~39px tall; raise to the
   44px tap-target minimum (the row already flex-wraps). */
.tv-faq-pill {
	min-height: 44px;
}
/* ===== end responsive audit fixes ===== */

/* ===== SOAP2O brand-story block (tv/soap2o-story) — /produkter/soap-2-o/ landing.
   Reuses the static-page band shell (.tv-about-band / .tv-about-inner /
   .section-heading); the step-flow, stats row and benefits grid are scoped here. ===== */
.tv-soap2o-eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-text-2);
}
.tv-soap2o .section-heading { margin-bottom: 14px; }
/* .tv-soap2o-intro: the centring it used to add is now the .tv-about-intro default. */

/* Steps — numbered "just add water" flow */
.tv-soap2o-steps {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.tv-soap2o-step { margin: 0; }
.tv-soap2o-step-num {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--c-yellow);
	color: var(--c-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-bold);
	font-size: 19px;
	margin: 0 0 16px;
}
.tv-soap2o-step-title { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-text); margin: 0 0 8px; }
.tv-soap2o-step-body { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-text-2); margin: 0; }

/* Impact stats row */
.tv-soap2o-stats {
	list-style: none;
	margin: 44px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--c-border);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.tv-soap2o-stat { display: flex; flex-direction: column; gap: 6px; }
.tv-soap2o-stat-value { font-size: 40px; font-weight: var(--fw-bold); line-height: 1.05; color: var(--c-text); }
.tv-soap2o-stat-label { font-size: var(--fs-base); line-height: 1.4; color: var(--c-text-2); }

/* Benefits grid */
.tv-soap2o-benefits {
	margin: 44px 0 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.tv-soap2o-benefit {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 16px;
	padding: 24px 22px;
}
.tv-soap2o-benefit-check {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--c-yellow);
	color: var(--c-text);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 14px;
}
.tv-soap2o-benefit-check svg { width: 20px; height: 20px; }
/* Reserve two lines for every benefit title (2 x 1.3 line-height) so a title that
   wraps to two lines (e.g. "100 procent atervinningsbart") no longer pushes its body
   down out of line with its rowmates - keeps the bodies aligned and both rows equal. */
.tv-soap2o-benefit-title { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.3; min-height: 2.6em; color: var(--c-text); margin: 0 0 6px; }
.tv-soap2o-benefit-body { font-size: 14px; line-height: var(--lh-loose); color: var(--c-text-2); margin: 0; }

/* Editor-only section labels (render.php never emits these) */
.tv-soap2o-editlabel {
	margin: 32px 0 12px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: var(--fw-bold);
	color: var(--c-text-2);
}

@media (max-width: 900px) {
	.tv-soap2o-steps,
	.tv-soap2o-stats,
	.tv-soap2o-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.tv-soap2o-steps,
	.tv-soap2o-benefits { grid-template-columns: 1fr; }
}

/* Cloudflare Turnstile widget on the lead forms (tv-leadform.js injects
   .tv-turnstile inside each form) — reserve height so the late-loading
   challenge iframe doesn't shift the submit button (CLS). */
.tv-turnstile {
	min-height: 70px;
	margin: 6px 0 16px;
}

/* ===== header search: type-ahead suggestions (tv/v1/suggest) — Session-25 =====
   The panel in styles.css:250 animates via max-height with overflow:hidden, so a
   dropdown inside it would be clipped at 140px. Rather than fight the overflow
   (which is what drives the collapse animation), the panel simply grows when the
   .has-suggestions class is present — it already behaves as a drawer inside the
   sticky .main-row-wrap, so results push the page down instead of overlaying it.
   ============================================================================= */

.search-panel.is-open.has-suggestions {
	max-height: 560px;
}

.tv-suggest {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x) 18px;
}

.tv-suggest[hidden] {
	display: none;
}

.tv-suggest-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--c-border);
}

.tv-suggest-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 8px;
	border-bottom: 1px solid var(--c-border);
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	transition: background 0.15s ease;
}

/* Hover and keyboard highlight share one state so arrow keys and the mouse
   never disagree about which row is current. */
.tv-suggest-item:hover,
.tv-suggest-item.is-active,
.tv-suggest-all:hover,
.tv-suggest-all.is-active {
	background: var(--c-surface-2);
}

.tv-suggest-item:focus-visible,
.tv-suggest-all:focus-visible {
	outline: 2px solid var(--c-yellow);
	outline-offset: -2px;
}

.tv-suggest-thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--c-surface-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tv-suggest-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Image-less hit: the brand tile, same idea as .nyheter-card-image--brandfallback
   on the results page. */
.tv-suggest-thumb--fallback {
	background: linear-gradient(135deg, var(--c-yellow) 0%, var(--c-yellow-active) 100%);
}

.tv-suggest-body {
	flex: 1 1 auto;
	min-width: 0;
}

.tv-suggest-title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium, 500);
	color: var(--c-text);
	line-height: 1.35;
	/* Long product names must not push the badge off the row. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tv-suggest-badge {
	flex-shrink: 0;
	padding: 4px 10px;
	background: var(--c-surface-3);
	font-size: 10px;
	font-weight: var(--fw-bold, 700);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-text-2);
	border-radius: 999px;
}

.tv-suggest-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 8px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold, 700);
	color: var(--c-text);
	text-decoration: none;
	border-radius: 8px;
}

.tv-suggest-all::after {
	content: "→";
	font-size: 15px;
	line-height: 1;
}

.tv-suggest-empty {
	padding: 16px 8px;
	margin: 0;
	border-top: 1px solid var(--c-border);
	font-size: var(--fs-sm);
	color: var(--c-text-3);
}

@media (max-width: 780px) {
	.search-panel.is-open.has-suggestions {
		max-height: 460px;
	}

	.tv-suggest {
		padding-bottom: 12px;
		overflow-y: auto;
		max-height: 360px;
	}

	/* Tablets are touch devices too: the 37px submit and 40px close were below the
	   44px minimum here as well, even though the row is wide enough otherwise. */
	.search-submit {
		min-height: 44px;
	}

	.search-close {
		width: 44px;
		height: 44px;
	}
}

/* Phone only: the row is too narrow to carry a badge as well as the title. On a
   tablet (601-780px) there is room, so it stays. */
@media (max-width: 600px) {
	.tv-suggest-badge {
		display: none;
	}
}

/* "Menade du …?" row in the suggestion dropdown (zero-result path). */
.tv-suggest-dym {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 8px;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
	text-decoration: none;
	border-top: 1px solid var(--c-border);
	border-radius: 8px;
}

.tv-suggest-dym strong {
	color: var(--c-text);
}

.tv-suggest-dym:hover,
.tv-suggest-dym.is-active {
	background: var(--c-surface-2);
}

/* Mobile search row: the panel spent 136px of a 390px screen on the icon and the
   two buttons, leaving the input 148px for a placeholder needing 374px, and both
   buttons sat under the 44px tap-target minimum. Reclaim the space (the magnifier
   inside the panel is redundant — the visitor just tapped one to open it) and size
   the controls for touch. */
@media (max-width: 600px) {
	.search-form {
		padding-left: 16px;
		padding-right: 16px;
		gap: 8px;
	}

	.search-form-icon {
		display: none;
	}

	.search-input {
		flex: 1 1 auto;
		min-width: 0;
	}

	.search-submit {
		min-height: 44px;
		padding: 0 16px;
		flex-shrink: 0;
	}

	.search-close {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
	}

	.tv-suggest {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Phone: the badge is hidden here, so let a long product name use the freed space
   and wrap to two lines rather than being cut mid-word by the desktop ellipsis. */
@media (max-width: 600px) {
	.tv-suggest-title {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ===== chat + consent widgets vs the search dropdown =====
   Weply fixes its bubble bottom-right with a very high z-index, so on phones it
   sat on top of the dropdown's last row ("Visa alla resultat"). While the
   suggestions are open we drop it (and our own cookie button, z-index 1001)
   below the sticky header's 100, so the panel wins.

   assets/js/chat.js tags whatever Weply appends to <body> with .tv-chat-node —
   we never depend on their class names. !important is required because the
   widget sets its stacking inline; a non-important inline style still loses to
   an important rule. pointer-events is belt-and-braces: even if a future Weply
   version out-stacked us, it could not swallow a tap meant for a suggestion. */
body.tv-search-open .tv-chat-node,
body.tv-search-open .tv-cookie-fab {
	z-index: 40 !important;
	pointer-events: none !important;
}

/* =================================================================
   product-video — film section on product/accessory pages (S25).
   Reuses the S19 .tv-video-* facade (consent-gated click-to-load,
   self-hosted thumbnail); only the section shell + grid sizing here.
   ================================================================= */
.product-video {
	background: var(--c-white);
	padding: 64px 0 88px;
}

.product-video-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

/* One film renders comfortably large; two sit side by side; phones stack. */
.tv-video-grid--product {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	max-width: 960px;
}

@media (max-width: 560px) {
	.product-video {
		padding: 44px 0 60px;
	}
}
/* ===== end product-video ===== */

/* ===== Teknisk information: spec-rader kollapsade etikettkolumnen =====
   styles.css:2673 sizes the row as `minmax(0, 1fr) auto`. The `auto` value track
   demands its max-content width, so a long value ("Rostfritt stål AISI 304 (med
   patenterat utbytbart värmeelement)") took the whole row and the 1fr label track
   resolved to 0px — the label text then spilled out of its zero-width box and was
   painted straight over the value. Measured on Junior Star Max 8 at 390px:
   grid-template-columns computed to "0px 254px", label overflowing 91px.

   Swapping the tracks fixes the cause rather than the symptom: the label sizes to
   its own content and the value takes what is left and wraps. Verified across
   every product page — including the opposite case (long label, short value),
   where the label keeps 168px and the value still fits.
   ===================================================================== */
.spec-list > div {
	grid-template-columns: auto minmax(0, 1fr);
}

/* Long single words (SKUs, model codes) must break rather than push the row wide. */
.spec-list dt,
.spec-list dd {
	overflow-wrap: anywhere;
}

/* On a phone the label's `auto` track can still claim so much of a 270px row that
   a long value has nowhere to wrap (measured 6-14px of overflow on six Delfin
   rows). Split the row evenly there: both tracks can shrink, both wrap, and the
   designed label-left / value-right alignment is kept. */
@media (max-width: 600px) {
	.spec-list > div {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
	}
}

/* ===== Produkthjälte: långa sammansatta ord sprängde sidbredden =====
   Found while sweeping every product page for the spec-row overlap. Four titles
   contain a Swedish compound too wide to fit a phone: "Bandrengöringssystem" and
   three "…industridammsugare". A grid item defaults to min-width:auto, i.e. it
   refuses to shrink below its longest word, so the hero column grew past the
   viewport and the whole page scrolled sideways (measured 419-456px on a 390px
   screen).

   Two parts, both needed: min-width:0 lets the column shrink, and a fluid title
   lets the word stay whole inside it. Shrinking rather than breaking follows the
   call made in Session-18 (commit 2d4320d) — hyphens:auto was rejected there
   because it chopped ordinary words, so headings shrink to fit instead.
   The cap (2.25rem) is today's 36px, so nothing changes above ~545px width.
   ==================================================================== */
.product-hero-grid > * {
	min-width: 0;
}

@media (max-width: 600px) {
	.product-title {
		font-size: clamp(1.3rem, 6.6vw, 2.25rem);
	}
}

/* ===== Generisk YouTube-fasad: self-hostad förhandsbild =====
   Session-19 gave the demo galleries a real front image but only wired
   tv_video_facade(); the generic .tv-embed--yt facade used by every kundcase and
   användningsområde kept rendering a bare black box. inc/embeds.php now reads the
   same tv_demo_thumbs store, so those pages show the actual film frame — still
   from our own domain, so no YouTube/Google request happens before the click.
   The scrim only appears when there IS an image, so the play button and the
   consent note keep contrast over a bright frame. */
.tv-embed {
	position: relative;
	overflow: hidden;
}

.tv-embed-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tv-embed--img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
	transition: background 0.3s ease;
}

.tv-embed--img:hover::after,
.tv-embed--img:focus-visible::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}

/* Keep the play button and labels above both image and scrim. */
.tv-embed > span {
	position: relative;
	z-index: 1;
}

/* Wrapper for a facade that replaced a raw oEmbed iframe in prose (see
   tv_embed_gate_raw_youtube in inc/embeds.php). The old iframe carried its own
   width/height attributes; the facade is a button, so it needs the 16:9 box. */
.tv-embed-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 28px 0;
	border-radius: 14px;
	overflow: hidden;
}

.tv-embed-frame .tv-embed {
	position: absolute;
	inset: 0;
	min-height: 0;
}

/* =============================================================
   Delfin accessory pages - the variants table inside tv/accessory-detail.
   Prefixed .tv-accvar-* on purpose: the theme already owns .tv-acc-* on these
   pages (.tv-acc-note among them), and a second meaning for one of those names
   restyles every accessory page in the catalogue.
   ============================================================= */

.tv-accvar {
	margin: 0 0 24px;
	max-width: 42ch;
}

.tv-accvar-heading {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-text-3);
	margin: 0 0 10px;
}

.tv-accvar-wrap {
	border: 1px solid var(--c-border);
	border-radius: 12px;
	overflow: hidden;
	overflow-x: auto;
}

.tv-accvar-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	text-align: left;
}

.tv-accvar-table th,
.tv-accvar-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--c-border);
}

.tv-accvar-table thead {
	background: var(--c-surface-2);
}

.tv-accvar-table thead th {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-text-3);
}

.tv-accvar-table tbody tr:last-child td {
	border-bottom: 0;
}

.tv-accvar-code {
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Webbplatskarta (tv/html-sitemap, 2026-09-22): one group per section,
 * nested lists for hierarchy, long flat lists flow in three columns.
 * ------------------------------------------------------------------ */

.tv-sitemap-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 56px var(--header-padding-x) 96px;
}

.tv-sitemap-group + .tv-sitemap-group {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--c-border);
}

.tv-sitemap-heading {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--c-text);
	margin: 0 0 20px;
}

.tv-sitemap-heading a {
	color: inherit;
}

.tv-sitemap-heading a:hover {
	color: var(--c-accent);
}

.tv-sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tv-sitemap-list li {
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	padding: 4px 0;
	break-inside: avoid;
}

.tv-sitemap-list > li > a {
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.tv-sitemap-list a:hover {
	color: var(--c-accent);
}

.tv-sitemap-list .tv-sitemap-list {
	margin: 6px 0 14px 18px;
	padding-left: 16px;
	border-left: 2px solid var(--c-border);
}

.tv-sitemap-list .tv-sitemap-list > li > a {
	font-weight: var(--fw-regular);
	color: var(--c-text-2);
}

.tv-sitemap-list--columns {
	columns: 3;
	column-gap: 40px;
}

@media (max-width: 960px) {
	.tv-sitemap-list--columns {
		columns: 2;
	}
}

@media (max-width: 640px) {
	.tv-sitemap-list--columns {
		columns: 1;
	}
}

/* ------------------------------------------------------------------
 * Footer (2026-09-22): the two link columns sit content-width at the
 * right edge and the contact column takes the rest - three equal thirds
 * left the lists stranded mid-row with empty space to their right.
 * 2026-10-12 (André): the map is its own grid item (.footer-col--map,
 * after the contact column in the markup) and, from 1201 px, its own
 * column in the gap between the contact details and the lists, level
 * with the first line under the headings. 961-1200 px: under the contact
 * details as before (the column would be too narrow). ≤960px stays one
 * column (styles.css), contact -> map -> lists in markup order.
 * ------------------------------------------------------------------ */

@media (min-width: 961px) {
	.site-footer .footer-inner {
		grid-template-columns: minmax(280px, 1fr) max-content max-content;
		grid-template-areas:
			"contact products usecases"
			"map     products usecases";
		grid-template-rows: auto 1fr;
		column-gap: 96px;
		row-gap: 24px;
	}

	.site-footer .footer-col--contact  { grid-area: contact; }
	.site-footer .footer-col--map      { grid-area: map; }
	.site-footer .footer-col--products { grid-area: products; }
	.site-footer .footer-col--usecases { grid-area: usecases; }

	/* The map keeps its old width instead of stretching across the wider column. */
	.site-footer .footer-map {
		max-width: 380px;
	}
}

@media (min-width: 961px) and (max-width: 1200px) {
	.site-footer .footer-inner {
		column-gap: 56px;
	}
}

@media (min-width: 1201px) {
	.site-footer .footer-inner {
		grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
		grid-template-areas: "contact map products usecases";
		grid-template-rows: auto;
		column-gap: 64px;
	}

	/* Centred in the gap; pushed down by the heading's line + its 24 px margin so the map's
	   top edge lines up with "Kontor & Säljavdelning" and the first list items. */
	.site-footer .footer-col--map {
		justify-self: center;
		width: 100%;
		max-width: 380px;
		margin-top: calc(var(--fs-sm) * var(--lh-tight) + 24px);
	}
}

@media (min-width: 1400px) {
	.site-footer .footer-inner {
		column-gap: 96px;
	}
}

/* =================================================================
   tv/product-category — editorial zone under the grid (2026-09-22).
   Scoped .tv-pc-* (LESSON 23/35). Three optional parts printed by
   src/product-category/render.php between .tv-prodcat and .contact-cta:
   prose (H2 + H3/body sections), a consent-gated film with a text column
   (same facade + media box as .usecase-video), and a <details> FAQ that
   mirrors the .tv-faq accordion look without its view.js. The zone
   renders nothing when every part is empty, so untouched category pages
   are unaffected. Also loaded in the editor (add_editor_style).
   ================================================================= */
.tv-pc-content {
	background: var(--c-surface-2);
	border-top: 1px solid var(--c-border);
	padding: 80px 0 88px;
}

.tv-pc-content-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-pc-content-inner > * + * {
	margin-top: 72px;
}

.tv-pc-heading {
	font-family: var(--font);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--c-text);
	margin: 0 0 28px;
}

.tv-pc-subheading {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--c-text);
	margin: 0 0 12px;
}

/* --- prose: full content width (André 2026-09-22: no early wrap) --- */
.tv-pc-prose {
	max-width: var(--content-max);
}

.tv-pc-prose-section + .tv-pc-prose-section {
	margin-top: 28px;
}

.tv-pc-prose p,
.tv-pc-video-text p,
.tv-pc-faq-a p {
	font-size: var(--fs-base);
	line-height: var(--lh-loose);
	color: var(--c-text-2);
	margin: 0 0 16px;
}

.tv-pc-prose p:last-child,
.tv-pc-video-text p:last-child,
.tv-pc-faq-a p:last-child {
	margin-bottom: 0;
}

.tv-pc-prose ul,
.tv-pc-faq-a ul {
	margin: 0 0 16px;
	padding-left: 22px;
	color: var(--c-text-2);
	line-height: var(--lh-loose);
}

.tv-pc-prose a,
.tv-pc-video-text a,
.tv-pc-faq-a a {
	color: var(--c-accent);
	text-decoration: underline;
}

.tv-pc-prose p strong,
.tv-pc-video-text p strong {
	color: var(--c-text);
}

/* --- film + text column (mirrors .usecase-video-inner) --- */
.tv-pc-video {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.tv-pc-video-media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 16px 40px rgba(0, 0, 0, 0.1);
}

.tv-pc-video-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.tv-pc-video-text .tv-pc-heading {
	margin-bottom: 20px;
}

/* --- FAQ (<details>, styled like .tv-faq), centred block --- */
.tv-pc-faq {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

.tv-pc-faq > .tv-pc-heading {
	text-align: center;
}

.tv-pc-faq-list {
	border-top: 1px solid var(--c-border);
}

.tv-pc-faq-item {
	border-bottom: 1px solid var(--c-border);
}

.tv-pc-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	list-style: none;
	cursor: pointer;
	padding: 22px 4px;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--c-text);
	transition: color 0.2s ease;
}

.tv-pc-faq-q::-webkit-details-marker {
	display: none;
}

.tv-pc-faq-q::marker {
	content: "";
}

.tv-pc-faq-q:hover {
	color: var(--c-accent);
}

.tv-pc-faq-q-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-text);
	transition: transform 0.3s ease, background 0.2s ease;
}

.tv-pc-faq-q-icon svg {
	width: 17px;
	height: 17px;
}

.tv-pc-faq-item[open] .tv-pc-faq-q-icon {
	transform: rotate(45deg);
	background: var(--c-yellow);
}

.tv-pc-faq-a {
	padding: 0 4px 26px;
	max-width: 760px;
}

@media (max-width: 960px) {
	.tv-pc-content {
		padding: 56px 0 64px;
	}

	.tv-pc-content-inner > * + * {
		margin-top: 48px;
	}

	.tv-pc-video {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* editor only: the zone's parts are always visible on the canvas, stacked */
.tv-pc-content--edit .tv-pc-content-inner > * + * {
	margin-top: 32px;
}

.tv-pc-content--edit .tv-pc-video {
	align-items: start;
}

/* Hyra: price list split into category tables (Tommie 2026-10-01). Fixed column widths
   so the three tables line up; the article-number column is gone (not shown to customers). */
.hyra-pricing-group + .hyra-pricing-group {
	margin-top: 40px;
}

.hyra-pricing-group-heading {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	text-align: left;
	margin: 0 0 16px;
}

.hyra-pricing-table--grouped {
	table-layout: fixed;
	min-width: 560px;
}

.hyra-pricing-table--grouped col.hyra-col-machine {
	width: 46%;
}

.hyra-pricing-table--grouped col.hyra-col-amount {
	width: 18%;
}

/* Mobile (André 2026-10-01): the footer-bar links sat on one unbroken row (434 px at a 390 px
   viewport), which widened the whole page by ~22-29 px on every page - and with it the fixed
   cookie banner, positioned against the widened layout viewport. Let the row wrap. */
@media (max-width: 760px) {
	.footer-nav ul {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
	}
}

/* Hyra "Det här kan du hyra": stacked 4:3 image cards were ~460 px tall each on a phone.
   Below 760 px (single column) lay each card out as a row: product shot left, text right. */
@media (max-width: 760px) {
	.hyra-category-card {
		flex-direction: row;
		align-items: stretch;
	}

	.hyra-category-image {
		flex: 0 0 116px;
		aspect-ratio: auto;
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hyra-category-image img {
		height: auto;
		max-height: 104px;
	}

	.hyra-category-meta {
		border-top: 0;
		border-left: 1px solid var(--c-border);
		padding: 16px 18px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.hyra-category-title {
		font-size: 16px;
		margin-bottom: 4px;
	}
}

/* Internal links in running text get the front page's .red-link look (André 2026-10-01):
   bold, yellow 2 px underline. Before this, the same kind of link was invisible in product
   descriptions, legacy red in category/series prose and FAQ, and black in articles.
   Scope: class-less internal links inside paragraphs, list items and table cells in <main>.
   Buttons, cards and menus carry classes or sit outside <main>; the HTML sitemap list and
   the front-page product captions are excluded. External links keep their current style. */
main :is(p, li, td, dd) a:not([class]):is([href^="/"], [href^="#"], [href*="//papagena.templweb.com"], [href*="//tecnovap.se"], [href*="//www.tecnovap.se"]):not(:is(.tv-sitemap-list, .product-caption) a) {
	color: var(--c-text);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-decoration-color: var(--c-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: text-decoration-thickness 0.2s ease, text-decoration-color 0.2s ease;
}

main :is(p, li, td, dd) a:not([class]):is([href^="/"], [href^="#"], [href*="//papagena.templweb.com"], [href*="//tecnovap.se"], [href*="//www.tecnovap.se"]):not(:is(.tv-sitemap-list, .product-caption) a):hover {
	text-decoration-color: var(--c-yellow-active);
	text-decoration-thickness: 3px;
}

/* /tillbehor/ category cards (André 2026-10-01): the 13 images are now square, trimmed to the
   subject and centred (card/*-sq.jpg), so give every image box the same white ground and an
   even inner margin instead of the mixed dark/white boxes with edge-to-edge images. */
.tillbehor .tillbehor-image {
	background: #fff !important; /* some cards carry an inline background */
	/* 2026-10-09: 20 px air around the studio images inside the box (André) */
	padding: 20px;
	/* the divider used to be a grey 1 px row baked into each image; now one CSS line for all */
	border-bottom: 1px solid var(--c-border);
}

.tillbehor .tillbehor-image img {
	object-fit: contain !important; /* some cards carry an inline object-fit */
}

/* /kontakt/ "Vi är Tecnovap" band: optional button under the body (2026-10-01). */
.kontakt-about-cta {
	margin: 32px 0 0;
}

/* /vi-ar-tecnovap/ "Det är vi som är Tecnovap": the three staff cards get the same hover as the
   phone cards on /kontakt/ (.kontakt-channel) - lift + soft shadow. Not a link (André 2026-10-01).
   Same for the distributor cards under "Återförsäljare i Norden" (.tv-dist-card) and the
   office cards under "Hitta oss" (.tv-office). */
.tv-team-card,
.tv-dist-card,
.tv-office {
	transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.2s ease;
}

.tv-team-card:hover,
.tv-dist-card:hover,
.tv-office:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.025),
		0 8px 16px rgba(0, 0, 0, 0.04),
		0 20px 40px rgba(0, 0, 0, 0.07);
}

/* Footer bottom row (André 2026-10-01): copyright left, the five links centred, agency credit
   right. Three-column grid so the links sit on the true centre whatever the side widths. Below
   960 px styles.css already stacks the row centred; keep that. */
@media (min-width: 961px) {
	.footer-bar-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.footer-copy {
		justify-self: start;
	}

	.footer-nav {
		justify-self: center;
	}

	.footer-credit {
		justify-self: end;
	}
}

.footer-credit {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: #eee;
}

.footer-credit a {
	color: var(--c-inverse);
	transition: color 0.15s ease;
}

.footer-credit a:hover {
	text-decoration: underline;
}

/* Footer column headings link to their hub pages (André 2026-10-01). Same look as before;
   they light up on hover like the other footer links. */
.footer-heading-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-heading-link:hover,
.footer-heading-link:focus-visible {
	color: var(--c-inverse);
}

/* Accessory detail image box (André 2026-10-01: Hydrobox-handtag and Glasmopp "ser olika ut").
   379 of 414 accessory images carry a white background baked in, 7 are transparent; on the
   #f7f7f7 box the white ones showed as a white square on grey. A white box with a hairline
   border makes both kinds read the same, like the white image card on the product pages. */
.tv-acc-media {
	background: #fff;
	border: 1px solid var(--c-border);
}

/* Front page: product-area teasers (tv/category-teasers, André/Fredrik 2026-10-09 - Tommie
   wants Tecnovap read as broader than steam). Three photo cards under the hero on the light
   section grey, so the white feature cards below still separate. Card chrome follows
   .produkter-card / .feature-card: 18px radius, hairline border, lift on hover. */
.tv-cat-teasers {
	background: var(--c-surface-2);
	padding: 96px 0;
	scroll-margin-top: 80px;
}

.tv-cat-teasers-inner {
	/* same grid as the header (André 2026-10-09): cards start in line with the logo */
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-cat-teasers .section-heading {
	margin-bottom: 16px;
}

.tv-cat-teasers-intro {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--c-text-2);
	text-wrap: balance;
}

.tv-cat-teasers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}

.tv-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04);
	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.4s ease,
		border-color 0.25s ease;
}

.tv-cat-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.025),
		0 8px 16px rgba(0, 0, 0, 0.04),
		0 20px 40px rgba(0, 0, 0, 0.08);
}

.tv-cat-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-surface-3);
}

.tv-cat-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tv-cat-card:hover .tv-cat-card-media img {
	transform: scale(1.04);
}

.tv-cat-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 28px 30px;
}

.tv-cat-card-eyebrow {
	margin: 0 0 6px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-text-3);
}

.tv-cat-card-title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-text);
}

.tv-cat-card-title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.2s ease;
}

.tv-cat-card-title a:hover,
.tv-cat-card-title a:focus-visible {
	text-decoration-color: var(--c-yellow);
}

.tv-cat-card-text {
	flex: 1;
	margin: 0 0 20px;
	font-size: var(--fs-base);
	line-height: var(--lh-loose);
	color: var(--c-text-2);
}

.tv-cat-card-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Text link with the brand arrow; yellow underline like .red-link. */
.tv-cat-card-link {
	color: var(--c-text);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-base);
	text-decoration: underline;
	text-decoration-color: var(--c-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.2s ease;
}

.tv-cat-card-link::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin: -2px 0 0 10px;
	width: 16px;
	height: 11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1l5 5-5 5M1 6h16'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.25s ease;
}

.tv-cat-card-link:hover,
.tv-cat-card-link:focus-visible {
	text-decoration-color: var(--c-yellow-active);
}

.tv-cat-card-link:hover::after,
.tv-cat-card-link:focus-visible::after {
	transform: translateX(4px);
}

.tv-cat-teasers-more {
	margin: 48px 0 0;
	text-align: center;
	font-size: var(--fs-md);
	color: var(--c-text-2);
}

@media (max-width: 960px) {
	.tv-cat-teasers-grid { grid-template-columns: 1fr 1fr; }
	.tv-cat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.tv-cat-card:last-child:nth-child(odd) .tv-cat-card-media { aspect-ratio: 16 / 7; }
}

@media (max-width: 640px) {
	.tv-cat-teasers { padding: 64px 0; }
	.tv-cat-teasers-intro { margin-bottom: 32px; font-size: var(--fs-base); }
	.tv-cat-teasers-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 480px) {
	.tv-cat-teasers-inner { padding: 0 16px; } /* the header row is 16 px here too */
	.tv-cat-card:last-child:nth-child(odd) .tv-cat-card-media { aspect-ratio: 4 / 3; }
	.tv-cat-card-body { padding: 22px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.tv-cat-card,
	.tv-cat-card-media img,
	.tv-cat-card-link::after { transition: none; }
	.tv-cat-card:hover { transform: none; }
	.tv-cat-card:hover .tv-cat-card-media img { transform: none; }
}

/* Front-page hero (André 2026-10-09): text block in the bottom-left corner of the video box,
   the same distance from the left edge as from the bottom (--header-padding-x: 96 px desktop,
   32 px mid widths, 16 px phones). Up to 1440 px that also lines the text up with the logo.
   The contrast gradient sits behind the corner. */
.hero-content {
	max-width: none;
	margin: 0;
	padding: 0 var(--header-padding-x) var(--header-padding-x);
	align-items: flex-start;
	justify-content: flex-end;
}

.hero-overlay {
	max-width: 960px; /* room for "Professionell rengöring" on one line at full size */
	text-align: left;
}

.hero-title {
	/* sentence case, only the first letter capital (André 2026-10-09); the overlay's wide
	   tracking was set for capitals, so the title gets the heading tracking instead */
	text-transform: none;
	letter-spacing: -0.01em;
}

.hero-subtitle {
	max-width: 760px;
	text-wrap: balance; /* two even lines instead of one orphaned word */
	text-transform: none; /* sentence case like the title (André 2026-10-09) */
	letter-spacing: normal;
}

.hero::after {
	background: radial-gradient(
		ellipse 80% 90% at 18% 78%,
		rgba(0, 0, 0, 0.62) 0%,
		rgba(0, 0, 0, 0.45) 35%,
		rgba(0, 0, 0, 0.18) 65%,
		rgba(0, 0, 0, 0) 85%
	);
}

@media (max-width: 480px) {
	.hero-content { padding: 0 16px 16px; }
	.hero::after {
		background: linear-gradient(20deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.1) 100%);
	}
}

/* Front page: every section on the header's grid (André 2026-10-09: "för mycket whitespace").
   Content starts in line with the logo and ends the same distance from the right edge.
   Scoped to body.home - these section classes are reused on other pages. */
body.home .features-inner,
body.home .news-inner,
body.home .products-inner,
body.home .about-steam-inner,
body.home .testimonials-inner,
body.home .brands-inner,
body.home .cases-inner,
body.home .contact-cta-inner {
	max-width: var(--max-width);
	padding-left: var(--header-padding-x);
	padding-right: var(--header-padding-x);
}

@media (max-width: 480px) {
	body.home .features-inner,
	body.home .news-inner,
	body.home .products-inner,
	body.home .about-steam-inner,
	body.home .testimonials-inner,
	body.home .brands-inner,
	body.home .cases-inner,
	body.home .contact-cta-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Front page: "Om Tecnovap Scandinavia" (André 2026-10-12, proposal A "Brevet"; replaces the old
   "Om ångtvättar" .about-steam section, whose rules in styles.css are now unused on the front page).
   A letter from Tommie on a white band (grey until André 2026-10-12 hid "Våra ångtvättar" with
   blockVisibility: false and the grey news section became its neighbour above): centred kicker +
   heading + lead, then the body in two
   columns across the header grid like the other front-page sections (André 2026-10-12: first
   built as one 680 px column, widened to the logo's edge), then Tommie's name and title (the
   initials badge was dropped the same day, André). The body links take the site-wide
   internal-link style (main :is(p, li, td, dd) a:not([class]) above), so no link rules here.
   Proposals: AI-OS 10-kunder/tecnovap/material/om-tecnovap-forslag-2026-10-12/. */
.tv-home-about {
	background: var(--c-surface);
	padding: 96px 0;
}

.tv-home-about-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-home-about-head {
	margin: 0 0 48px;
	text-align: center;
}

.tv-home-about-kicker {
	margin: 0 0 14px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text);
}

.tv-home-about-kicker::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 4px;
	margin: -2px 10px 0 0;
	border-radius: 2px;
	background: var(--c-text); /* yellow on the #ededed band all but vanished (André 2026-10-12) */
	vertical-align: middle;
}

.tv-home-about .section-heading {
	margin: 0;
	text-align: inherit;
}

.tv-home-about-lead {
	margin: 18px 0 0;
	font-size: var(--fs-lg);
	line-height: 1.5;
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.tv-home-about-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 64px;
}

.tv-home-about-body p {
	margin: 0 0 20px;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-text-2);
}

.tv-home-about-col p:last-child {
	margin-bottom: 0;
}

.tv-home-about-foot {
	margin: 48px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--c-border-strong);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px 24px;
}

.tv-home-about-sig {
	margin: 0;
}

.tv-home-about-name {
	display: block;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	color: var(--c-text);
}

.tv-home-about-role {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--c-text-2);
}

/* Same text-link treatment as the category teasers' "Läs mer" (.tv-cat-card-link, André
   2026-10-12): yellow 2 px underline under the text only, darker yellow + arrow nudge on hover. */
.tv-home-about-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	text-decoration: underline;
	text-decoration-color: var(--c-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.2s ease;
}

.tv-home-about-more:hover,
.tv-home-about-more:focus-visible {
	text-decoration-color: var(--c-yellow-active);
}

.tv-home-about-more svg {
	transition: transform 0.25s ease;
}

.tv-home-about-more:hover svg,
.tv-home-about-more:focus-visible svg {
	transform: translateX(4px);
}

@media (max-width: 960px) {
	.tv-home-about { padding: 56px 0; }
	.tv-home-about-body { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.tv-home-about-head { margin-bottom: 32px; text-align: left; }
	.tv-home-about-lead { font-size: var(--fs-md); }
	.tv-home-about-body p { font-size: var(--fs-base); }
}

@media (max-width: 480px) {
	.tv-home-about-inner { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tv-home-about-more svg { transition: none; }
}

/* Front page: trust banner under the hero (tv/trust-banner, André 2026-10-09, variant B, no links).
   A full-width white band flush with the bottom of the film, light-grey lines; content on the header
   grid; kept tight (about 30 % lower than the first B). 15 px of white above and below the items,
   so the dividers stop short of the band's edges (André 2026-10-12). Icons sit in a black circle (yellow glyph)
   and play a short animation on hover:
   reach = the pole extends into the corner, rent = the key turns, problem = sparkles twinkle.
   Variant C (white cards) is in ~/backups/overrides.css.20261009p if it comes back. */
.tv-trust {
	background: var(--c-surface);
	padding-block: 15px;
}

.tv-trust-inner {
	list-style: none;
	margin: 0 auto;
	max-width: var(--max-width);
	padding: 0 var(--header-padding-x);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.tv-trust-link {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 14px;
	row-gap: 1px;
	align-items: center;
	height: 100%;
	padding: 11px 28px 11px 0;
	color: inherit;
	text-decoration: none;
}

.tv-trust-item + .tv-trust-item .tv-trust-link {
	padding-left: 36px;
	border-left: 1px solid var(--c-border);
}

.tv-trust-item:last-child .tv-trust-link {
	padding-right: 0;
}

.tv-trust-row {
	display: contents;
}

.tv-trust-icon {
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-text);
	color: var(--c-yellow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tv-trust-link:hover .tv-trust-icon {
	transform: scale(1.08) rotate(-6deg);
}

.tv-trust-svg {
	width: 21px;
	height: 21px;
	overflow: visible;
}

.tv-trust-svg * {
	transform-box: view-box;
}

.tv-trust-title {
	align-self: end;
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--c-text);
}

.tv-trust-text {
	align-self: start;
	grid-column: 2;
	font-size: 14px;
	line-height: 1.4;
	color: var(--c-text-2);
}

.tv-trust-more {
	display: none;
}

/* reach: the pole pushes up into the corner and settles back; the corner answers */
.tv-ti-pole { transform-origin: 3px 21px; }
.tv-trust-link:hover .tv-ti-pole,
.tv-trust-link:focus-visible .tv-ti-pole { animation: tv-trust-reach 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
.tv-trust-link:hover .tv-ti-corner,
.tv-trust-link:focus-visible .tv-ti-corner { animation: tv-trust-corner 0.9s ease; }
@keyframes tv-trust-reach {
	0% { transform: translate(0, 0); }
	45% { transform: translate(3px, -3px); }
	100% { transform: translate(0, 0); }
}
@keyframes tv-trust-corner {
	0%, 30% { transform: translate(0, 0); }
	50% { transform: translate(1px, -1px); }
	100% { transform: translate(0, 0); }
}

/* rent: the key turns in the lock and back */
.tv-ti-key { transform-origin: 7.5px 15.5px; }
.tv-trust-link:hover .tv-ti-key,
.tv-trust-link:focus-visible .tv-ti-key { animation: tv-trust-key 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
@keyframes tv-trust-key {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-28deg); }
	65% { transform: rotate(10deg); }
	100% { transform: rotate(0deg); }
}

/* problem: the big sparkle pulses, the two small ones twinkle one after the other */
.tv-ti-star { transform-origin: 12px 12px; }
.tv-ti-spark-a { transform-origin: 20px 5px; }
.tv-ti-spark-b { transform-origin: 4px 18px; }
.tv-trust-link:hover .tv-ti-star,
.tv-trust-link:focus-visible .tv-ti-star { animation: tv-trust-star 0.9s ease; }
.tv-trust-link:hover .tv-ti-spark,
.tv-trust-link:focus-visible .tv-ti-spark { animation: tv-trust-spark 0.9s ease; }
.tv-trust-link:hover .tv-ti-spark-b,
.tv-trust-link:focus-visible .tv-ti-spark-b { animation-delay: 0.18s; }
@keyframes tv-trust-star {
	0% { transform: scale(1) rotate(0deg); }
	45% { transform: scale(1.14) rotate(12deg); }
	100% { transform: scale(1) rotate(0deg); }
}
@keyframes tv-trust-spark {
	0%, 100% { transform: scale(1); opacity: 1; }
	40% { transform: scale(0.2); opacity: 0.2; }
	70% { transform: scale(1.35); opacity: 1; }
}

/* the header gutter drops from 96 to 32 px at 1280 (styles.css), and the hero text sits one
   gutter above the film's edge - so the overlap must stop at the same breakpoint */
@media (max-width: 900px) {
	.tv-trust-inner { grid-template-columns: 1fr; }
	.tv-trust-link,
	.tv-trust-item + .tv-trust-item .tv-trust-link { padding: 12px 0; border-left: 0; }
	.tv-trust-item + .tv-trust-item .tv-trust-link { border-top: 1px solid var(--c-border); }
}

@media (max-width: 480px) {
	.tv-trust-inner { padding: 0 16px; }
	.tv-trust-link { grid-template-columns: 40px 1fr; }
	.tv-trust-icon { width: 40px; height: 40px; }
	.tv-trust-svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.tv-trust-icon { transition: none; }
	.tv-trust-link:hover .tv-trust-icon { transform: none; }
	.tv-trust-svg * { animation: none !important; }
}

/* News-feed cards (André 2026-10-09): excerpt cut after four lines, "[…]" added by
   assets/js/tv-clamp.js; the CSS clamp is the no-JS fallback ("…"). "Läs mer" follows the
   excerpt directly instead of being pushed to the card's bottom edge. */
.news-excerpt[data-clamp] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.news-excerpt[data-clamp].is-fitting {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.news .news-readmore {
	margin-top: 0;
}

/* Footer in the logo's black (André 2026-10-12). #000 is the black measured in assets/logo.png,
   not the text black #1a1a1a. The inverted logo (assets/logo-inverted.png: the header logo with
   its black recoloured to white and the sun's #ffec00 untouched, anti-aliasing kept) sits on its
   own row above the three columns, on the same padding as .footer-inner. The bottom bar joins
   the black with a hairline instead of its own grey, and list-link hovers turn yellow (the old
   red accent was off-brand and low-contrast on the dark ground). */
.site-footer,
.footer-bar {
	background: #000;
}

.footer-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-brand {
	max-width: var(--max-width);
	margin: 0 auto 40px;
	padding: 0 var(--header-padding-x);
}

.footer-brand-link {
	display: inline-block;
}

.footer-brand-link img {
	display: block;
	width: 150px;
	height: auto;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--c-yellow);
}

@media (max-width: 480px) {
	.footer-brand { margin-bottom: 32px; }
	.footer-brand-link img { width: 130px; }
}

/* Front page "Beskriv ditt problem" dialog (inc/problem-modal.php, André 2026-10-12).
   The fields reuse the Kontakt form classes (.kontakt-form, .kontakt-field,
   .kontakt-form-row, .kontakt-form-footer, .kontakt-form-policy) so both forms look the
   same; only the frame and the close button are new. Full screen on
   phones. html.tv-pmodal-open locks the page scroll while it is open. */
html.tv-pmodal-open {
	overflow: hidden;
}

.tv-pmodal {
	width: min(640px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--c-surface);
	color: var(--c-text-2);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	overflow: auto;
	overscroll-behavior: contain;
}

.tv-pmodal::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.tv-pmodal-panel {
	position: relative;
	padding: 40px 40px 32px;
}

.tv-pmodal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-text);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tv-pmodal-close:hover,
.tv-pmodal-close:focus-visible {
	background: var(--c-yellow);
}

.tv-pmodal-close:focus-visible {
	outline: 2px solid var(--c-text);
	outline-offset: 2px;
}

.tv-pmodal-kicker {
	margin: 0 0 10px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text);
}

.tv-pmodal-kicker::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 4px;
	margin: -2px 10px 0 0;
	border-radius: 2px;
	background: var(--c-text);
	vertical-align: middle;
}

.tv-pmodal-title {
	margin: 0;
	padding-right: 48px;
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--c-text);
}

.tv-pmodal-title:focus {
	outline: none;
}

.tv-pmodal-intro {
	margin: 10px 0 28px;
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--c-text-2);
}

/* Bottom row (André 2026-10-12): "Skicka" left with the policy line right under it, the
   Turnstile box to the right on the same row. tv-leadform.js inserts .tv-turnstile right
   before .kontakt-form-footer, both direct children of the form, so a two-column grid
   with dense packing pulls the footer back into the row the Turnstile box starts. Every
   other child spans both columns. One column on phones (Turnstile, then the button). */
.tv-pmodal-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-auto-flow: row dense;
	column-gap: 24px;
	row-gap: 20px;
}

.tv-pmodal-form > * {
	grid-column: 1 / -1;
}

.tv-pmodal-form > .tv-turnstile {
	grid-column: 2;
	align-self: start;
	margin: 0; /* the Kontakt rule's 6 px top margin put it below the button's top edge */
}

.tv-pmodal-form > .kontakt-form-footer {
	grid-column: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 0;
}

.tv-pmodal .kontakt-form-policy a {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 560px) {
	.tv-pmodal {
		width: 100%;
		height: 100%;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}

	.tv-pmodal-panel {
		padding: 64px 20px 28px;
	}

	.tv-pmodal-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.tv-pmodal-form > .tv-turnstile,
	.tv-pmodal-form > .kontakt-form-footer {
		grid-column: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tv-pmodal-close {
		transition: none;
	}
}

/* Front page FAQ (inc/home-faq.php, André 2026-10-14), between the news and the footer.
   White band on the header grid like the other front-page sections; the question rows
   are the category pages' FAQ classes (.tv-pc-faq-list/-item/-q/-a), so both FAQs look
   the same. The answers keep their 760 px measure from .tv-pc-faq-a. */
.tv-home-faq {
	background: var(--c-surface);
	padding: 96px 0;
}

.tv-home-faq-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--header-padding-x);
}

.tv-home-faq-more {
	margin: 32px 0 0;
	text-align: center;
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--c-text-2);
}

@media (max-width: 960px) {
	.tv-home-faq { padding: 56px 0; }
}

@media (max-width: 480px) {
	.tv-home-faq-inner { padding: 0 16px; }
}