/*
 Theme Name:   CST Park
 Theme URI:    https://reklamco.se
 Description:  Kundtema för CST Park, byggt på CoTheme.
 Author:       Reklam & Co
 Author URI:   https://reklamco.se
 Template:     cotheme
 Version:      1.0.0
 Text Domain:  cst-park
*/

/* Kundspecifik CSS skrivs nedan */

/* Etiketttypsnitt (JetBrains Mono) – färger, rubrik- och brödtexttypsnitt kommer från CoTheme (--cotheme-*) */
:root {
	--cst-font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   Delade klasser för Beaver Builder
   Sätts i modulens/radens fält "Klass" (Avancerat). Rubriker, text och knappar
   är BB:s egna moduler – klasserna ger dem CST Parks utseende.
   ========================================================================== */

:root {
	--cst-deep: #11362f;
	--cst-deep2: #0c2822;
	--cst-lime: #c1ff72;
	--cst-svart: #0b0f0d;
	--cst-ink: #152621;
	--cst-text: #26352f;
	--cst-dampad: #4f5f59;
	--cst-linje: #cfd8cf;
	--cst-bakgrund: #f3f5ef;

	/* Sidhuvudenas rubrikstorlekar – fyra herotyper (analys/skiss-herotyper-v1.html, godkänd 2026-10-22).
	   start: startsidorna och märkessidorna · bild: sidhuvud med bild (branscher, butiker, service)
	   band: mörkt band (kontakt, kategorier, sortiment, varumärken, guideöversikt, sök) · artikel: guider */
	--cst-h-start: clamp(56px, 8vw, 112px);
	--cst-h-bild: clamp(48px, 6.6vw, 92px);
	--cst-h-band: clamp(44px, 5.8vw, 80px);
	--cst-h-artikel: clamp(40px, 4.6vw, 64px);
}
/* Smala telefoner: storlekar efter skärmbredden, så att långa ord (robotgräsklippare) får plats. */
@media (max-width: 400px) {
	:root { --cst-h-start: 14.5vw; --cst-h-bild: 12.5vw; --cst-h-band: 11.5vw; --cst-h-artikel: 10.5vw; }
}

/* Rader ------------------------------------------------------------------ */

/* Mörkgrön rad med vit text. */
.cst-rad--mork > .fl-row-content-wrap { background-color: var(--cst-deep); color: #fff; }
.cst-rad--mork .fl-module-content,
:is(.cst-rad--mork .fl-rich-text, .cst-rad--mork.fl-rich-text) { color: #e2ebe6; }

/* Höjdkurvor som tonar in från höger och rör sig mycket långsamt. */
.cst-rad--topo > .fl-row-content-wrap { position: relative; overflow: hidden; isolation: isolate; }
.cst-rad--topo > .fl-row-content-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	min-width: 520px;
	height: 100%;
	background: url("assets/img/topo-tall.svg") no-repeat left 42% / cover;
	opacity: .8;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
	mask-image: linear-gradient(90deg, transparent 0, #000 38%);
	pointer-events: none;
	z-index: -1;
	animation: cst-topo-in 1.8s cubic-bezier(.2, .7, .2, 1) both, cst-topo-drift 48s ease-in-out 1.8s infinite alternate;
}
@keyframes cst-topo-in { from { clip-path: circle(0% at 72% 48%); } to { clip-path: circle(150% at 72% 48%); } }
@keyframes cst-topo-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.5%, 1.2%); } }

/* Moduler ---------------------------------------------------------------- */

/* Liten etikett ovanför rubriker (Text-modul): överstrykning – mörkgrön mono på en limegrön remsa med raka hörn,
   samma på ljus och mörk botten (vald 2026-10-22, analys/skiss-etikett-varianter.html, variant B).
   Stycket är inline så att remsan följer texten och modulens textjustering, och bryts texten får varje rad
   en egen remsa (box-decoration-break) med luft emellan i stället för en stor limegrön låda. */
:is(.cst-etikett .fl-rich-text, .cst-etikett.fl-rich-text) { line-height: 32px; text-wrap: balance; }
:is(.cst-etikett .fl-rich-text, .cst-etikett.fl-rich-text) p { display: inline; margin: 0; padding: 5px 9px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--cst-lime); color: var(--cst-deep); font-family: var(--cst-font-mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
/* På limegrön botten blir remsan mörkgrön. */
.cst-rad--lime :is(.cst-etikett .fl-rich-text, .cst-etikett.fl-rich-text) p { background: var(--cst-deep); color: var(--cst-lime); }
/* I mobil och på surfplatta står heroetiketten direkt under bildramen – ge remsan luft. */
@media (max-width: 992px) { .cst-hero :is(.cst-etikett .fl-rich-text, .cst-etikett.fl-rich-text) { padding-top: 20px; } }

/* Stor rubrik i heron (Heading-modul, H1). <em> i rubriken blir lime. */
:is(.cst-rubrik-hero .fl-heading, .cst-rubrik-hero.fl-heading) { font-size: var(--cst-h-start); line-height: .95; letter-spacing: .01em; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.fl-heading em { font-style: normal; color: var(--cst-lime); }
/* Surfplatta: i den staplade heron har rubriken hela bredden – radbrytningen döljs så att den står på en rad.
   Rubriken måste ha ett mellanslag före <br> ("Nu blir vi <br><em>CST Park</em>"), annars flyter orden ihop
   – CSS kan inte göra <br> till ett mellanslag. (2026-11-04) */
@media (min-width: 561px) and (max-width: 992px) {
	.cst-hero :is(.cst-rubrik-hero .fl-heading, .cst-rubrik-hero.fl-heading) br { display: none; }
}
.cst-rad--ljus .fl-heading em { color: var(--cst-deep); }

/* Ingress (Text-modul). */
:is(.cst-ingress .fl-rich-text, .cst-ingress.fl-rich-text) { max-width: 52ch; font-size: 16px; }
:is(.cst-ingress .fl-rich-text, .cst-ingress.fl-rich-text) p:last-child { margin-bottom: 0; }

/* Knappar: Button- eller Button Group-modul. I en grupp blir första knappen lime och resten ghost. */
.fl-builder-content :is(.cst-knappar .fl-button-group-buttons, .cst-knappar.fl-button-group-buttons) { display: flex; flex-flow: row wrap; gap: 12px; }
/* BB:s clearfix blir annars ett flexelement när skalet är ihopslaget med gruppen – första knappen hamnade 12 px in (/husqvarna/). */
.fl-builder-content .cst-knappar.fl-button-group-buttons::before, .fl-builder-content .cst-knappar.fl-button-group-buttons::after { content: none; display: none; }
.fl-builder-content .cst-knappar .fl-button-group-button { width: auto; margin: 0; }
/* BB:s knappavstånd (5 px utfyllnad runt varje knapp) flyttade knapparna in från textens kant – gap ger avståndet. */
.fl-builder-content .fl-module.cst-knappar .fl-button-group .fl-button-group-buttons .fl-button-group-button,
.fl-builder-content .fl-module.cst-knappar.fl-button-group.fl-button-group-buttons .fl-button-group-button { padding: 0; } /* Båda formerna: BB slår ibland ihop modulens skal med gruppen. */
.fl-builder-content .cst-knappar a.fl-button,
.fl-builder-content .cst-knapp--lime a.fl-button,
.fl-builder-content .cst-knapp--ghost a.fl-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--cotheme-font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.fl-builder-content .cst-knappar .fl-button-group-button:first-child a.fl-button,
.fl-builder-content .cst-knapp--lime a.fl-button { background: var(--cst-lime); color: var(--cst-deep); }
.fl-builder-content .cst-knappar .fl-button-group-button:first-child a.fl-button:hover,
.fl-builder-content .cst-knapp--lime a.fl-button:hover { background: #d3ff97; color: var(--cst-deep); }
.fl-builder-content .cst-knappar .fl-button-group-button:not(:first-child) a.fl-button,
.fl-builder-content .cst-knapp--ghost a.fl-button { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.fl-builder-content .cst-knappar .fl-button-group-button:not(:first-child) a.fl-button:hover,
.fl-builder-content .cst-knapp--ghost a.fl-button:hover { border-color: #fff; color: #fff; }
.fl-builder-content .cst-knappar a.fl-button .fl-button-text,
.fl-builder-content .cst-knapp--lime a.fl-button .fl-button-text,
.fl-builder-content .cst-knapp--ghost a.fl-button .fl-button-text { color: inherit; }
.fl-builder-content .cst-knappar a.fl-button:focus-visible { outline: 2px solid var(--cst-lime); outline-offset: 3px; }

/* Ljus sektion (standardbakgrund) och lime-band. */
.cst-rad--ljus > .fl-row-content-wrap { background-color: var(--cst-bakgrund); color: var(--cst-text); }
.cst-rad--lime > .fl-row-content-wrap { background-color: var(--cst-lime); color: var(--cst-deep); }

/* Sektionsrubrik (Heading-modul, H2). */
:is(.cst-rubrik-sektion .fl-heading, .cst-rubrik-sektion.fl-heading) { font-size: clamp(40px, 5vw, 68px); line-height: .95; letter-spacing: .01em; color: var(--cst-ink); text-wrap: balance; }
.cst-rad--mork :is(.cst-rubrik-sektion .fl-heading, .cst-rubrik-sektion.fl-heading) { color: #fff; }

/* Sektionshuvud: rubrik till vänster, länk längst ner till höger (kolumngrupp med två kolumner). */
/* BB:s kolumngrupp är inte flex utan "Lika höjd" – utan display: flex hamnar länken i överkant i stället för i linje med rubrikens nederkant. */
/* last baseline: länkens text står på samma linje som rubrikens sista rad (Bebas har luft under versalerna, så flex-end
   ställer länken några pixlar för lågt). Webbläsare utan stöd faller tillbaka på flex-end. */
.cst-sektionshuvud .fl-col-group:first-child { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; }
/* BB:s clearfix (::before/::after med display: table) har ingen baslinje och gör att last baseline faller tillbaka på nederkanten. */
.cst-sektionshuvud .fl-col-group:first-child::before, .cst-sektionshuvud .fl-col-group:first-child::after,
.cst-sektionshuvud .fl-col-group:first-child :is(.fl-col, .fl-col-content, .fl-module, .fl-module-content)::before,
.cst-sektionshuvud .fl-col-group:first-child :is(.fl-col, .fl-col-content, .fl-module, .fl-module-content)::after { display: none; }
.cst-sektionshuvud .fl-col-group:first-child .fl-col:last-child .fl-module-content { text-align: right; }
/* En ingress i stället för länken (t.ex. Följ oss): vänsterställd text längst till höger. */
.cst-sektionshuvud .fl-col-group:first-child .fl-col:last-child :is(.cst-ingress .fl-rich-text, .cst-ingress.fl-rich-text) { max-width: 46ch; margin-left: auto; text-align: left; font-size: 15px; }

/* Avdelare: där två ljusa rader möts får den nedre en mörkgrön linje i innehållets bredd, och luften blir
   lika på båda sidor om linjen oavsett radernas egna utfyllnader. Dolda rader (t.ex. referensraden utan case)
   räknas som grannar, men de ligger alltid mellan två ljusa rader, så linjen hamnar ändå rätt.
   Undantag: CST Maskinfokus (mörkt band som själv avgränsar) och produktsidan (Produktinfo har egen linje). */
body:not(.single-product) .cst-rad--ljus:not(.cst-bransch-maskin):has(+ .cst-rad--ljus:not(.cst-bransch-maskin)) > .fl-row-content-wrap { padding-bottom: var(--cst-avdelare-luft); }
body:not(.single-product) .cst-rad--ljus:not(.cst-bransch-maskin) + .cst-rad--ljus:not(.cst-bransch-maskin) > .fl-row-content-wrap { padding-top: 0; }
body:not(.single-product) .cst-rad--ljus:not(.cst-bransch-maskin) + .cst-rad--ljus:not(.cst-bransch-maskin) > .fl-row-content-wrap > .fl-row-content { padding-top: var(--cst-avdelare-luft); border-top: 1px solid var(--cst-deep); }
:root { --cst-avdelare-luft: 72px; }
@media (max-width: 768px) { :root { --cst-avdelare-luft: 56px; } }

/* Textlänk med lime understrykning (Button-modul). */
.fl-builder-content .cst-lank a.fl-button { padding: 0 0 2px; border: 0; border-bottom: 2px solid var(--cst-lime); border-radius: 0; background: none; color: var(--cst-deep); font-size: 14px; font-weight: 600; }
.fl-builder-content .cst-lank a.fl-button:hover { background: none; color: var(--cst-ink); border-bottom-color: var(--cst-deep); }
.fl-builder-content .cst-lank a.fl-button .fl-button-text { color: inherit; }
/* Mobil (BB:s brytpunkt 768 px): rubrik och länk staplas i full bredd, länken vänsterställd under rubriken. */
@media (max-width: 768px) {
	/* BB centrerar annars smala kolumner (fl-col-small) med max-width 400px när de staplas. */
	.cst-sektionshuvud .fl-col-group:first-child > .fl-col { flex: 1 1 100%; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
	.cst-sektionshuvud .fl-col-group:first-child .fl-col:last-child .fl-module-content { text-align: left; }
	.cst-sektionshuvud .fl-col-group:first-child .fl-col:last-child :is(.cst-ingress .fl-rich-text, .cst-ingress.fl-rich-text) { margin-left: 0; }
}
/* Pil efter länktexten – visar att länken leder vidare. */
.fl-builder-content .cst-lank a.fl-button .fl-button-text::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .2s ease; }
.fl-builder-content .cst-lank a.fl-button:hover .fl-button-text::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .fl-builder-content .cst-lank a.fl-button .fl-button-text::after { transition: none; } }
.cst-rad--mork .fl-builder-content .cst-lank a.fl-button,
.fl-builder-content .cst-rad--mork .cst-lank a.fl-button { color: #fff; }

/* USP-rad (Text-modul, ett stycke per punkt): punkterna sprids ut på en rad. */
:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; font-family: var(--cst-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) p { margin: 0; }
/* BB:s clearfix blir annars flexceller och knuffar första punkten åt höger när raden bryts. */
:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text)::before, :is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text)::after { content: none; }
/* Surfplatta: punkterna bröts 2 + 1 och hamnade ojämnt – i stället lika breda kolumner med tunn linje emellan.
   Upp till 1100 px, eftersom /husqvarna/ har längre punkter som bröts även vid 1024 (2026-11-04). */
@media (min-width: 561px) and (max-width: 1100px) {
	:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 20px; line-height: 1.5; }
	:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) p + p { padding-left: 20px; border-left: 1px solid rgba(17, 54, 47, .3); }
}
@media (max-width: 560px) {
	:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) p:last-child { display: none; }
	/* Staplade punkter flyter annars ihop till en mening – tunn linje emellan. */
	:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) { flex-direction: column; gap: 10px; }
	:is(.cst-usp .fl-rich-text, .cst-usp.fl-rich-text) p + p { padding-top: 10px; border-top: 1px solid rgba(17, 54, 47, .3); }
}

/* Mörk knapp (Button-modul). */
.fl-builder-content .cst-knapp--mork a.fl-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 999px; background: var(--cst-deep); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; }
.fl-builder-content .cst-knapp--mork a.fl-button:hover { background: var(--cst-deep2); color: #fff; }
.fl-builder-content .cst-knapp--mork a.fl-button .fl-button-text { color: inherit; }
/* Konturknapp (Button-modul) bredvid den mörka, t.ex. "Kontakta oss". Konturen är en inre skugga så att
   knappen blir exakt lika stor som den mörka. */
.fl-builder-content .cst-knapp--kontur a.fl-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--cst-deep); color: var(--cst-deep); font-size: 14px; font-weight: 600; line-height: 1.2; }
.fl-builder-content .cst-knapp--kontur a.fl-button:hover,
.fl-builder-content .cst-knapp--kontur a.fl-button:focus-visible { background: var(--cst-deep); color: #fff; }
.fl-builder-content .cst-knapp--kontur a.fl-button .fl-button-text { color: inherit; }

/* Etikett som svart block (på bild). */
:is(.cst-etikett--block .fl-rich-text, .cst-etikett--block.fl-rich-text) p { padding: 6px 10px; background: var(--cst-svart); color: var(--cst-lime); }

/* Poster: helbild med mörk toning nedåt och lime-ram (radklass, bakgrundsbild sätts i radens inställningar). */
.cst-poster > .fl-row-content-wrap { position: relative; isolation: isolate; color: #fff; }
.cst-poster > .fl-row-content-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(11, 15, 13, .15) 0%, rgba(11, 15, 13, .35) 35%, rgba(11, 15, 13, .94) 100%);
	pointer-events: none;
}
.cst-poster > .fl-row-content-wrap::before {
	content: "";
	position: absolute;
	inset: 32px;
	z-index: 1;
	pointer-events: none;
	--h: 26px;
	--t: 1.5px;
	background:
		linear-gradient(var(--cst-lime), var(--cst-lime)) top left / var(--h) var(--t),
		linear-gradient(var(--cst-lime), var(--cst-lime)) top left / var(--t) var(--h),
		linear-gradient(var(--cst-lime), var(--cst-lime)) top right / var(--h) var(--t),
		linear-gradient(var(--cst-lime), var(--cst-lime)) top right / var(--t) var(--h),
		linear-gradient(var(--cst-lime), var(--cst-lime)) bottom left / var(--h) var(--t),
		linear-gradient(var(--cst-lime), var(--cst-lime)) bottom left / var(--t) var(--h),
		linear-gradient(var(--cst-lime), var(--cst-lime)) bottom right / var(--h) var(--t),
		linear-gradient(var(--cst-lime), var(--cst-lime)) bottom right / var(--t) var(--h);
	background-repeat: no-repeat;
}
.cst-poster > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 2; }
.cst-poster .fl-col-group { align-items: flex-end; }
.cst-poster :is(.cst-ingress .fl-rich-text, .cst-ingress.fl-rich-text) { max-width: 44ch; color: #f1f5f2; font-weight: 500; }
:is(.cst-rubrik-poster .fl-heading, .cst-rubrik-poster.fl-heading) { font-size: clamp(48px, 6vw, 88px); line-height: .95; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 560px) {
	:is(.cst-rubrik-poster .fl-heading, .cst-rubrik-poster.fl-heading) { font-size: clamp(44px, 14vw, 64px); }
	.cst-poster > .fl-row-content-wrap::before { inset: 16px; }
}

/* Steg (Text-modul med numrerad lista): 01, 02 … i mono, linjer mellan stegen. */
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) ol { list-style: none; counter-reset: cst-steg; margin: 0; padding: 0; border-bottom: 1px solid var(--cst-deep); }
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li { counter-increment: cst-steg; display: grid; grid-template-columns: 56px 1fr; gap: 2px 8px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--cst-deep); font-size: 14px; color: var(--cst-dampad); }
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li::before { content: counter(cst-steg, decimal-leading-zero); grid-row: span 2; color: var(--cst-dampad); font-family: var(--cst-font-mono); font-size: 12px; letter-spacing: .08em; }
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong { display: block; font-size: 16px; font-weight: 600; color: var(--cst-ink); }
/* Steg som länkar (t.ex. tjänsterna på /service/ som leder till bokningen): rubriken är länken, med pil. */
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong a { color: inherit; text-decoration: none; }
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong a::after { content: "→"; display: inline-block; margin-left: 8px; color: var(--cst-deep); transition: transform .2s ease; }
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong a:hover,
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong a:focus-visible { color: var(--cst-ink); text-decoration: underline; text-decoration-color: var(--cst-lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { :is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li strong a::after { transition: none; } }
@media (max-width: 560px) {
	:is(.cst-steg .fl-rich-text, .cst-steg.fl-rich-text) li { grid-template-columns: 40px 1fr; }
}

/* Telefonnummer (Text-modul: liten rad + nummer som länk). */
:is(.cst-tel .fl-rich-text, .cst-tel.fl-rich-text) p { margin: 0; color: var(--cst-dampad); font-family: var(--cst-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
:is(.cst-tel .fl-rich-text, .cst-tel.fl-rich-text) a { display: inline-block; margin-top: 2px; font-family: var(--cotheme-font-heading); font-size: 44px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--cst-deep); text-decoration: none; }
:is(.cst-tel .fl-rich-text, .cst-tel.fl-rich-text) a:hover { text-decoration: underline; text-decoration-color: var(--cst-lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (max-width: 400px) {
	:is(.cst-tel .fl-rich-text, .cst-tel.fl-rich-text) a { font-size: 36px; }
}

/* Svart rad (kampanj). */
.cst-rad--svart > .fl-row-content-wrap { background-color: var(--cst-svart); color: #fff; }
:is(.cst-rad--svart .fl-rich-text, .cst-rad--svart.fl-rich-text) { color: #e2ebe6; }

/* Kampanjrubrik (Heading H2) och prisbubbla (Text-modul). */
:is(.cst-rubrik-kampanj .fl-heading, .cst-rubrik-kampanj.fl-heading) { font-size: clamp(48px, 7vw, 96px); line-height: .95; color: #fff; text-wrap: balance; }
:is(.cst-bubbla .fl-rich-text, .cst-bubbla.fl-rich-text) p { display: inline-block; margin: 0; padding: 8px 22px; border-radius: 24px 24px 24px 4px; background: var(--cst-lime); color: var(--cst-deep); font-family: var(--cotheme-font-heading); font-size: 44px; line-height: 1.1; }
@media (max-width: 400px) {
	:is(.cst-rubrik-kampanj .fl-heading, .cst-rubrik-kampanj.fl-heading) { font-size: 15vw; }
}

/* Kampanj: raden är i full bredd för löptexten – innehållet under centreras till sidans bredd. */
.cst-kampanj .fl-col-group + .fl-col-group { max-width: 1240px; margin-inline: auto; align-items: center; }
/* Mobil: raden har ingen egen sidmarginal (löptexten går kant i kant), så gruppen under får sidans marginal
   (24 px, 16 px under 400 px). BB centrerar annars de staplade smala kolumnerna med max-width 400px. */
@media (max-width: 768px) {
	.cst-kampanj .fl-col-group + .fl-col-group { padding-left: 24px; padding-right: 24px; }
	.cst-kampanj .fl-col-group + .fl-col-group > .fl-col { align-self: stretch; max-width: none; margin-left: 0; margin-right: 0; }
	.cst-kampanj .fl-col-group + .fl-col-group .fl-col-content { padding-left: 0; padding-right: 0; }
}
@media (max-width: 400px) {
	.cst-kampanj .fl-col-group + .fl-col-group { padding-left: 16px; padding-right: 16px; }
}

/* Höjdkurvor över hela raden, svaga och tonade nedåt (butiksraden). */
.cst-rad--topo-bred > .fl-row-content-wrap { position: relative; overflow: hidden; isolation: isolate; }
.cst-rad--topo-bred > .fl-row-content-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/img/topo-wide.svg") no-repeat center top / cover;
	opacity: .2;
	-webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .25) 100%);
	mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .25) 100%);
	pointer-events: none;
}

/* Bild + text i två kolumner (serviceavsnittet): luft emellan, bilden lika hög som texten,
   texten centrerad i höjdled och knapp + telefon bredvid varandra. Radklass: cst-bild-text. */
.cst-bild-text .fl-col-group { align-items: stretch; }
.cst-bild-text .cst-bild-text__bild > .fl-col-content { height: 100%; display: flex; flex-direction: column; }
.cst-bild-text .cst-bild-text__bild > .fl-col-content > .fl-module,
.cst-bild-text .cst-bild-text__bild > .fl-col-content > .fl-module > .fl-module-content { flex: 1; display: flex; flex-direction: column; }
.cst-bild-text .cst-bild-text__bild .cst-bildram { flex: 1; }
/* Radriktning uttryckligen – BB:s "Lika höjd" sätter annars flex-direction: column, vilket med wrap flödar ut i sidled. */
.cst-bild-text .fl-col-group .cst-bild-text__text > .fl-col-content { height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; justify-content: flex-start; column-gap: 28px; padding-left: 72px; }
/* BB:s clearfix-pseudoelement skulle annars bli flexelement och knuffa raderna. */
.cst-bild-text :is(.cst-bild-text__bild, .cst-bild-text__text) > .fl-col-content::before,
.cst-bild-text :is(.cst-bild-text__bild, .cst-bild-text__text) > .fl-col-content::after { content: none; display: none; }
.cst-bild-text .cst-bild-text__text > .fl-col-content > .fl-module { flex: 0 0 100%; min-width: 0; }
.cst-bild-text .cst-bild-text__text > .fl-col-content > .fl-module:is(.cst-knapp--mork, .cst-knapp--lime, .cst-knapp--kontur, .cst-tel) { flex: 0 0 auto; }
.cst-bild-text .cst-bild-text__text > .fl-col-content > .cst-tel { padding-left: 28px; border-left: 1px solid var(--cst-linje); }
.cst-bild-text .cst-bild-text__text > .fl-col-content > .fl-module.cst-knapp--kontur { margin-left: -16px; } /* 12 px mellan knapparna i stället för kolumnens 28. */
@media (max-width: 1100px) {
	.cst-bild-text .fl-col-group .cst-bild-text__text > .fl-col-content { padding-left: 40px; }
}
@media (max-width: 768px) {
	.cst-bild-text .fl-col-group .cst-bild-text__text > .fl-col-content { padding-left: 0; padding-top: 32px; }
}
@media (max-width: 560px) {
	.cst-bild-text .cst-bild-text__text > .fl-col-content > .fl-module:is(.cst-knapp--mork, .cst-knapp--lime, .cst-tel) { flex: 0 0 100%; }
	.cst-bild-text .cst-bild-text__text > .fl-col-content > .cst-tel { padding-left: 0; border-left: 0; }
	/* Knapparna bredvid varandra när de får plats, annars under varandra – utan negativ marginal som kan hamna i kanten. */
	.cst-bild-text .fl-col-group .cst-bild-text__text > .fl-col-content:has(> .cst-knapp--kontur) { column-gap: 12px; }
	.cst-bild-text .cst-bild-text__text > .fl-col-content:has(> .cst-knapp--kontur) > .fl-module:is(.cst-knapp--mork, .cst-knapp--lime) { flex: 0 0 auto; }
	.cst-bild-text .cst-bild-text__text > .fl-col-content > .fl-module.cst-knapp--kontur { margin-left: 0; }
}

/* Varför oss (Text-modul med punktlista, /pro/): tre kort i en ram. I varje punkt är första fetstilen
   det stora talet ("Pro", "1", "3"), andra fetstilen rubriken och resten texten. */
:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text)::before, :is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text)::after { content: none; }
:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border: 1px solid var(--cst-deep); background: #fff; }
:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) li { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 32px 30px 30px; color: var(--cst-dampad); font-size: 14px; line-height: 1.6; }
:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) li + li { border-left: 1px solid var(--cst-deep); }
:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) li strong:first-child { font-family: var(--cotheme-font-heading); font-weight: 400; font-size: clamp(72px, 7vw, 104px); line-height: .85; color: var(--cst-deep); }
:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) li strong + strong { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--cst-ink); }
@media (max-width: 992px) {
	:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) ul { grid-template-columns: 1fr; }
	:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) li + li { border-left: 0; border-top: 1px solid var(--cst-deep); }
}
@media (max-width: 640px) {
	:is(.cst-varfor .fl-rich-text, .cst-varfor.fl-rich-text) li { padding: 24px 20px; }
}

/* Hero ------------------------------------------------------------------- */

/* Märkets introrad under heron (/husqvarna/): text till vänster, märkets logga i färg på vit yta till höger.
   Husqvarnas negativa logga får bara ligga på Husqvarnas blå, så loggan står inte i heron. Radklass:
   cst-markesintro, kolumnerna cst-markesintro__text och __logga, Photo-modulen cst-markeslogga-farg. */
.cst-markesintro .fl-module.cst-ingress { margin-top: 20px; }
.cst-markesintro .fl-module.cst-lank { margin-top: 28px; }
/* Länk till en annan webbplats: pil snett uppåt i stället för framåt. */
.fl-builder-content .cst-lank--extern a.fl-button .fl-button-text::after { content: "↗"; }
.cst-markesintro .cst-markeslogga-farg :is(.fl-photo, .fl-photo-content) { display: block; width: 100%; }
.cst-markesintro .cst-markeslogga-farg .fl-photo-content { display: flex; align-items: center; justify-content: center; min-height: 280px; padding: 48px; background: #fff; border: 1px solid var(--cst-linje); box-sizing: border-box; }
.cst-markesintro .cst-markeslogga-farg img { display: block; width: 100%; max-width: 320px; height: auto; }
@media (min-width: 769px) {
	.cst-markesintro .fl-col-group { display: flex; align-items: center; }
	.cst-markesintro .fl-col-group::before, .cst-markesintro .fl-col-group::after { content: none; display: none; }
	.cst-markesintro .cst-markesintro__logga > .fl-col-content { padding-left: 48px; }
}
@media (max-width: 768px) {
	.cst-markesintro .fl-col-group > .fl-col { max-width: none; margin-left: 0; margin-right: 0; }
	.cst-markesintro .cst-markesintro__logga { margin-top: 32px; }
	.cst-markesintro .cst-markeslogga-farg .fl-photo-content { min-height: 0; padding: 40px 32px; }
}

.cst-hero .fl-col-group { align-items: center; }
/* Varumärkets logga överst i herotexten (märkessidor som /husqvarna/). Klass på Photo-modulen: cst-markeslogga. */
.cst-markeslogga img { display: block; height: 64px; width: auto; }
/* Mobil och surfplatta (≤ 992 px, BB:s medium): heron staplas med bilden eller filmen först på egen rad.
   Mellan 769 och 992 px står kolumnerna annars bredvid varandra och filmen blir en liten ruta (2026-11-03). */
@media (max-width: 992px) {
	.cst-hero .fl-col-group { display: flex; flex-direction: column; }
	.cst-hero .cst-hero__bild { order: -1; }
	/* BB centrerar staplade smala kolumner (fl-col-small: margin auto, max-width 400px) – en kolumn med bara ett
	   foto (absolut placerat) krymper då till 0 px. BB:s width: auto !important går inte att skriva över – kolumnen
	   sträcks i stället ut av gruppen. På surfplatta staplar inte BB kolumnerna själv – där behövs full bredd. */
	.cst-hero .fl-col-group > .fl-col { align-self: stretch; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
	/* CST Bildram får 16:10 först under 900 px – i den staplade heron gäller det hela vägen till 992. */
	.cst-hero .cst-bildram--foto { min-height: 0; aspect-ratio: 16 / 10; padding: 0; }
}
@media (max-width: 768px) {
	.cst-markeslogga img { height: 48px; }
	/* Moduler som byggts i kod har BB:s globala 20 px modulmarginal – i mobil hamnade de 20 px innanför resten av sidan.
	   Produktmallarnas rader har ingen egen sidmarginal över 400 px, så modulerna får 16 px här och 0 under 400 px
	   (där raden har 16 px). Märkeskategoriers rad har egen marginal (som rubriken ovanför) – där räcker 0. */
	.fl-builder-content :is(.fl-module-cst-produkttopp, .fl-module-cst-produktinfo, .fl-module-cst-produktlista) > .fl-module-content { margin-left: 16px; margin-right: 16px; }
	.fl-builder-content .fl-module-cst-markeskategorier > .fl-module-content { margin-left: 0; margin-right: 0; }
	.cst-rad--topo > .fl-row-content-wrap::before { width: 100%; min-width: 0; height: 62%; opacity: .45; background-position: center 40%; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
}
@media (max-width: 400px) {
	/* Samma sidomarginal som headern på de smalaste telefonerna. */
	.fl-row[class*="cst-rad--"] > .fl-row-content-wrap { padding-left: 16px; padding-right: 16px; }
	/* Kampanjraden: löptexten går kant i kant, innehållet under har egen marginal. */
	.fl-row.cst-kampanj[class*="cst-rad--"] > .fl-row-content-wrap { padding-left: 0; padding-right: 0; }
	.fl-builder-content :is(.fl-module-cst-produkttopp, .fl-module-cst-produktinfo, .fl-module-cst-produktlista) > .fl-module-content { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cst-rad--topo > .fl-row-content-wrap::before { animation: none; }
}

/* WooCommerce-blockens produktlista (t.ex. "Du kanske också gillar" i varukorgen och kassan) har -8 px marginal
   på sidorna – kortens egen utfyllnad. Klipps i sidled så att sidan inte scrollar 8 px i mobil. */
.wc-block-grid { overflow-x: clip; }

/* Cookiepolicyns kaklista (CoCookies [cocookie_cookie_list]): fyra kolumner får inte plats i mobil – sidan scrollade
   i sidled. Under 600 px blir varje kaka ett kort med kolumnrubrikerna som etiketter. Texterna i ::before följer
   tabellens kolumnordning (Cookie, Leverantör, Syfte, Livslängd). */
@media (max-width: 600px) {
	.cocookie-declaration .cocookie-declaration-table,
	.cocookie-declaration .cocookie-declaration-table tbody,
	.cocookie-declaration .cocookie-declaration-table tr,
	.cocookie-declaration .cocookie-declaration-table td { display: block; width: 100%; }
	.cocookie-declaration .cocookie-declaration-table { border: 0; }
	.cocookie-declaration .cocookie-declaration-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.cocookie-declaration .cocookie-declaration-table tr { border: 1px solid var(--cst-linje, #cfd8cf); margin-bottom: 12px; }
	.cocookie-declaration .cocookie-declaration-table td { border: 0; padding: 6px 12px; }
	.cocookie-declaration .cocookie-declaration-table td:first-child { padding-top: 12px; }
	.cocookie-declaration .cocookie-declaration-table td:last-child { padding-bottom: 12px; }
	.cocookie-declaration .cocookie-declaration-table td::before { display: block; font-size: 12px; font-weight: 600; color: var(--cst-dampad, #4f5f59); }
	.cocookie-declaration .cocookie-declaration-table td:nth-child(1)::before { content: "Cookie"; }
	.cocookie-declaration .cocookie-declaration-table td:nth-child(2)::before { content: "Leverantör"; }
	.cocookie-declaration .cocookie-declaration-table td:nth-child(3)::before { content: "Syfte"; }
	.cocookie-declaration .cocookie-declaration-table td:nth-child(4)::before { content: "Livslängd"; }
}