/**
 * Märkessidornas moduler (CST Märkeshuvud, Märkesband, Märkeskategorier, Märkesprodukter, Märkeskort,
 * Hjälpkort – se inc/class-cst-markesdel.php). Grundstilarna kommer från CST Sortimentsöversikt
 * (cst-sov__*), här bara tilläggen. Förlaga: analys/skiss-varumarkesmall-v1.html.
 */

/* Telefonnummer i hjälpkortens text bryts inte mitt i (013-510 / 00 i mobil). */
.cst-msd__tel { white-space: nowrap; }

/* Huvud: text till vänster, produktbild med lime hörn till höger */
.cst-msd .cst-msd__topo { width: 65%; }
.cst-msd__huvud-inre {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 40px;
	align-items: center;
	padding-block: 26px 56px;
	min-height: 520px;
}
.cst-msd__huvud--utan .cst-msd__huvud-inre { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 26px 64px; }
.cst-msd .cst-msd__logga { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; margin: 30px 0 22px; }
.cst-msd .cst-msd__logga + .cst-msd__h1 { margin-top: 0; }
/* Märkessidan har startherons form (text och bild i ram, limegrönt band) – herotyp 1. */
.cst-sov .cst-msd__h1 { font-size: var(--cst-h-start); overflow-wrap: break-word; }
/* *Ord* i rubriken (blir <em>) är limegröna, som i startsidans hero (style.css). */
.cst-msd .cst-msd__h1 em { font-style: normal; color: var(--cst-sov-lime); }
.cst-msd .cst-msd__ingress { max-width: 54ch; margin-top: 16px; font-size: 17px; }
.cst-msd__knappar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.cst-msd .cst-msd__knapp--ljus { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.cst-msd .cst-msd__knapp--ljus:hover,
.cst-msd .cst-msd__knapp--ljus:focus-visible { background: #fff; border-color: #fff; color: var(--cst-sov-deep); }
/* Länk till tillverkarens webbplats under knapparna (fältet "Tillverkarens webbplats" på varumärket). */
.cst-msd .cst-msd__webbplats { margin: 22px 0 0; font-size: 14px; }
.cst-msd .cst-msd__webbplats a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cst-sov-lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cst-msd .cst-msd__webbplats a:hover,
.cst-msd .cst-msd__webbplats a:focus-visible { color: var(--cst-sov-lime); }

.cst-msd__bild { position: relative; aspect-ratio: 5 / 4; }
.cst-msd .cst-msd__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
}
/* Miljöbild (CST Märkeshuvud avgör typen med cst_bild_typ()): fyller ramen ut till de limegröna hörnen. */
.cst-msd .cst-msd__bild--fyll img { object-fit: cover; filter: none; }
/* Hörnen ligger då strax utanför bilden så att de syns. */
.cst-msd__bild--fyll .cst-msd__horn--a { top: -10px; left: -10px; }
.cst-msd__bild--fyll .cst-msd__horn--b { bottom: -10px; right: -10px; }
.cst-msd__horn { position: absolute; width: 26px; height: 26px; border: 0 solid var(--cst-sov-lime); z-index: 1; }
.cst-msd__horn--a { top: 0; left: 0; border-width: 1px 0 0 1px; }
.cst-msd__horn--b { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.cst-msd__tagg {
	position: absolute;
	left: 0;
	bottom: 12px;
	z-index: 1;
	background: var(--cst-sov-svart);
	color: var(--cst-sov-lime);
	padding: 6px 10px;
	font-family: var(--cst-sov-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Lime band under huvudet */
.cst-msd__band { background: var(--cst-sov-lime); color: var(--cst-sov-deep); }
.cst-msd .cst-msd__band-inre {
	display: flex;
	justify-content: space-between;
	gap: 6px 18px;
	flex-wrap: wrap;
	padding-block: 14px;
	font-family: var(--cst-sov-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cst-msd :is(.cst-msd__kategorier, .cst-msd__produkter) { scroll-margin-top: 110px; }

/* Märkets mörka kort som band */
.cst-msd__cta { background: var(--cst-sov-deep); color: #fff; position: relative; overflow: hidden; margin-top: 72px; }
.cst-msd__cta::before { content: ""; position: absolute; inset: 0; background: var(--cst-sov-topo-bred) no-repeat right center / cover; opacity: .18; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.cst-msd__cta-inre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-block: 56px; }
.cst-msd__cta .cst-sov__etikett { color: var(--cst-sov-lime); }
.cst-msd__cta .cst-sov__h2 { color: #fff; }
.cst-msd .cst-msd__cta-text { color: #e2ebe6; max-width: 56ch; margin-top: 12px; line-height: 1.6; }

@media (max-width: 1000px) {
	.cst-msd__huvud-inre { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.cst-msd__bild { order: -1; width: 100%; max-width: 520px; }
	.cst-msd__cta-inre { grid-template-columns: minmax(0, 1fr); }
	.cst-msd__cta-inre .cst-sov__knapp { justify-self: start; }
}

@media (max-width: 640px) {
	.cst-msd .cst-msd__logga { height: 26px; margin: 24px 0 16px; }
	.cst-msd .cst-msd__band-inre { flex-direction: column; }
	.cst-msd__cta { margin-top: 56px; }
	.cst-msd__cta-inre { padding-block: 44px; }
}

/* Bara i BB-redigeraren: en del som inte visas för det här märket (CST_Markesdel_Module::tom()). */
.cst-msd__tom { margin: 0; padding: 20px 24px; background: #f3f5ef; border: 1px dashed #cfd8cf; color: #4f5f59; font-family: var(--cst-font-mono, monospace); font-size: 13px; }

/* En rad vars del inte visas för märket (t.ex. produktraden när det finns kategorikort) tar ingen plats. */
.fl-row.cst-markessida:not(:has(.cst-msd, .cst-mkat, .cst-msd__tom)) { display: none; }