/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }
/* Emitrix blocks. Tokens come from the theme (--emx-*); fallbacks keep blocks usable elsewhere. */
:root {
	--emx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--emx-ease-state: cubic-bezier(0.65, 0, 0.35, 1);
}

.emx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.emx-note { font-size: .875rem; color: var(--emx-text-muted, #9BA39D); line-height: 1.5; max-width: 65ch; }
.emx-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--emx-text-muted, #9BA39D); max-width: 60ch; }
.emx-eyebrow { display: flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: 500; color: var(--emx-text, #EDEFEC); margin: 0 0 16px; }
.emx-eyebrow::before { content: ""; width: 32px; height: 3px; background: var(--emx-accent-ink, #5AFF00); flex: none; }
.emx-textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--emx-accent-ink, #5AFF00); font-weight: 600; text-decoration: none; min-height: 24px; }
.emx-textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.emx-textlink .emx-icon { transition: transform 150ms var(--emx-ease-out); }
.emx-textlink:hover .emx-icon { transform: translateX(3px); }
.emx-icon { flex: none; }


/* ---------- switch (Ljusbrytaren control) ---------- */
.emx-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--emx-line-strong, #5C655E); background: color-mix(in srgb, var(--emx-bg, #0B0D0C) 55%, transparent); color: var(--emx-text, #EDEFEC); font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; transition: border-color 150ms; -webkit-tap-highlight-color: transparent; }
.emx-switch:hover { border-color: var(--emx-text-muted, #9BA39D); }
.emx-switch:active { transform: translateY(1px) scale(.98); }
.emx-switch__track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--emx-surface-2, #1A1E1B); border: 1px solid var(--emx-line-strong, #5C655E); flex: none; }
.emx-switch__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--emx-text, #EDEFEC); transition: transform 240ms var(--emx-ease-state), background-color 240ms; }
.emx-switch[aria-checked="true"] .emx-switch__thumb { transform: translateX(20px); background: var(--emx-accent, #5AFF00); }
.emx-switch__label { opacity: .72; transition: opacity 240ms; }
.emx-switch[aria-checked="false"] .emx-switch__label:first-child,
.emx-switch[aria-checked="true"] .emx-switch__label:last-child { opacity: 1; }

.emx-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--emx-line-strong, #5C655E); background: transparent; color: var(--emx-text, #EDEFEC); font: inherit; font-size: .9375rem; cursor: pointer; }
.emx-pause__icon--play, .emx-pause[aria-pressed="true"] .emx-pause__icon--pause { display: none; }
.emx-pause[aria-pressed="true"] .emx-pause__icon--play { display: inline-flex; }

/* ---------- two-state media stack ---------- */
.emx-stack { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--emx-bg, #0B0D0C); }
.emx-layer { position: absolute; inset: 0; }
.emx-layer picture, .emx-layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emx-layer--a { transition: opacity 350ms var(--emx-ease-state); }
.is-b .emx-layer--a, [aria-checked="true"] ~ * .emx-layer--a { opacity: 0; }
.emx-stack.is-off .emx-layer--a { opacity: 0; transition-duration: 900ms; }
/* Night vision is monochrome white phosphor, made from the same plate. */
.emx-stack[data-mode="nightvision"] .emx-layer--a img { filter: brightness(.34) saturate(.55); }
.emx-stack[data-mode="nightvision"] .emx-layer--b img { filter: grayscale(1) brightness(1.9) contrast(1.15) sepia(.12) hue-rotate(160deg) saturate(.6); }
.emx-stack[data-mode="nightvision"] .emx-layer--b::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.85) 78%); pointer-events: none; }

/* ---------- hero (Källan) ---------- */
.emx-hero { position: relative; min-height: 100svh; min-height: max(560px, 100svh); display: flex; align-items: center; overflow: hidden; isolation: isolate; color: #EDEFEC; background: #0B0D0C; }
.emx-hero__media { position: absolute; inset: 0; z-index: -1; }
.emx-hero__media .emx-stack { position: absolute; inset: 0; }
.emx-hero .emx-layer img { object-position: 62% 50%; }
.emx-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; transition: opacity 500ms var(--emx-ease-state); }
.emx-hero.is-video .emx-hero__video { opacity: 1; }
.emx-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,13,12,.78) 0%, rgba(11,13,12,.45) 36%, rgba(11,13,12,0) 58%); }
.emx-hero__inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: calc(var(--emx-header-h, 72px) + 32px) var(--emx-gutter, clamp(16px, 4vw, 40px)) 96px; }
.emx-hero__copy { max-width: 36rem; }
.emx-hero__copy h1 { margin: 0 0 20px; color: #EDEFEC; }
.emx-hero__copy > p { font-size: 1.1875rem; line-height: 1.55; color: #D9DED9; margin: 0 0 28px; max-width: 32rem; }
.emx-hero__controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.emx-hero .emx-switch { background: rgba(11,13,12,.55); color: #EDEFEC; border-color: #6B746D; }
.emx-hero__rm-caption { display: none; font-size: .875rem; color: #C9CFCA; margin: 16px 0 0; }
/* Arrival: a slow camera settle on the capsule and the copy rising in. The light itself never changes. */
@keyframes emx-hero-settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes emx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.motion-ok .emx-hero .emx-layer img { animation: emx-hero-settle 2.6s cubic-bezier(.2,.7,.2,1) both; }
html.motion-ok .emx-hero__copy > * { animation: emx-rise .9s cubic-bezier(.2,.7,.2,1) both; }
html.motion-ok .emx-hero__copy > :nth-child(1) { animation-delay: .15s; }
html.motion-ok .emx-hero__copy > :nth-child(2) { animation-delay: .3s; }
html.motion-ok .emx-hero__copy > :nth-child(n+3) { animation-delay: .45s; }
@media (max-width: 767px) {
	.emx-hero { align-items: flex-end; }
	.emx-hero .emx-layer img, .emx-hero__video { object-position: 70% 40%; }
	.emx-hero__scrim { background: linear-gradient(0deg, rgba(11,13,12,.92) 0%, rgba(11,13,12,.62) 42%, rgba(11,13,12,0) 72%); }
	.emx-hero__inner { padding-bottom: 56px; }
	.emx-hero__copy > p { font-size: 1.0625rem; }
}
/* Portrait phones with the 4:5 crops: picture on top (centred on the capsule), text below on black. */
@media (max-width: 767px) and (orientation: portrait) {
	.emx-hero--m .emx-hero__media { bottom: auto; height: min(125vw, 72svh); }
	.emx-hero--m .emx-stack--m .emx-layer img { object-position: 50% 65%; }
	.emx-hero--m .emx-hero__scrim { background: linear-gradient(0deg, #0B0D0C 0%, rgba(11,13,12,.7) 16%, rgba(11,13,12,0) 42%); }
}

/* ---------- capsule sequence (sticky media + steps in flow) ---------- */
.emx-seq { position: relative; padding-block: clamp(4rem, 2rem + 6vw, 8rem); }
.emx-seq__head { max-width: 1320px; margin: 0 auto 32px; padding-inline: var(--emx-gutter, clamp(16px, 4vw, 40px)); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.emx-seq__title { margin: 0; }
.emx-seq__skip { font-size: .875rem; color: var(--emx-text-muted, #9BA39D); }
.emx-seq__body { max-width: 1320px; margin: 0 auto; padding-inline: var(--emx-gutter, clamp(16px, 4vw, 40px)); }
.emx-seq__media { display: none; }
.emx-seq__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; counter-reset: step; }
.emx-step { counter-increment: step; }
.emx-step__media { position: relative; aspect-ratio: 1; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #0B0D0C; margin-bottom: 20px; }
.emx-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emx-step__text h3 { margin: 0 0 8px; }
.emx-step__text h3::before { content: counter(step) ". "; color: var(--emx-accent-ink, #5AFF00); }
.emx-step__text p { margin: 0; color: var(--emx-text-muted, #9BA39D); max-width: 42ch; font-size: 1.0625rem; line-height: 1.6; }
.emx-step__caption { font-size: .8125rem !important; margin-top: 8px !important; }
.emx-ov { position: absolute; inset: 0; width: 100%; height: 100%; color: #EDEFEC; pointer-events: none; }
.emx-ov text { font-family: var(--emx-font-body, system-ui); }
.emx-seq__end { max-width: 1320px; margin: 32px auto 0; padding-inline: var(--emx-gutter, clamp(16px, 4vw, 40px)); }

@media (min-width: 1024px) and (min-height: 700px) {
	html.motion-ok .emx-seq__body { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
	html.motion-ok .emx-seq__media { display: block; position: sticky; top: calc(var(--emx-header-h, 72px) + var(--emx-adminbar, 0px) + 24px); height: calc(100svh - var(--emx-header-h, 72px) - 48px); }
	html.motion-ok .emx-seq__frame { position: relative; height: 100%; max-height: 780px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #0B0D0C; }
	html.motion-ok .emx-seq__img { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--emx-ease-state); }
	html.motion-ok .emx-seq__img.is-active { opacity: 1; }
	html.motion-ok .emx-seq__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
	html.motion-ok .emx-seq__note { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: .8125rem; color: #C9CFCA; background: rgba(11,13,12,.72); padding: 2px 8px; border-radius: 4px; z-index: 3; }
	html.motion-ok .emx-seq__progress { position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; }
	html.motion-ok .emx-seq__progress span { display: block; height: 2px; width: 100%; background: var(--emx-accent-ink, #5AFF00); transform-origin: left; transform: scaleX(var(--p, 0)); }
	html.motion-ok .emx-seq__steps { gap: 0; }
	html.motion-ok .emx-step { min-height: 62svh; display: flex; align-items: center; opacity: .38; transition: opacity 300ms var(--emx-ease-state); }
	html.motion-ok .emx-step.is-active { opacity: 1; }
	html.motion-ok .emx-step:last-child { min-height: 70svh; }
	html.motion-ok .emx-step__media { display: none; }
	html.motion-ok .emx-seq--home .emx-step { min-height: 50svh; }
}

/* ---------- sector chapters ---------- */
.emx-chapters { padding-block: clamp(4rem, 2rem + 6vw, 8rem); }
.emx-chapters__head { max-width: 1320px; margin: 0 auto 24px; padding-inline: var(--emx-gutter, clamp(16px, 4vw, 40px)); }
.emx-chapters__head h2 { margin: 0; max-width: 20ch; }
.emx-tabs { position: sticky; top: calc(var(--emx-header-h, 72px) + var(--emx-adminbar, 0px)); z-index: 5; background: color-mix(in srgb, var(--emx-bg, #0B0D0C) 96%, transparent); border-bottom: 1px solid var(--emx-line, #262B27); }
.emx-tabs ul { list-style: none; margin: 0 auto; padding: 0 var(--emx-gutter, clamp(16px, 4vw, 40px)); max-width: 1320px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.emx-tabs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; margin-right: 20px; color: var(--emx-text-muted, #9BA39D); text-decoration: none; white-space: nowrap; font-weight: 500; border-bottom: 2px solid transparent; }
.emx-tabs a[aria-current="true"] { color: var(--emx-text, #EDEFEC); border-bottom-color: var(--emx-accent-ink, #5AFF00); }
.emx-chapters__list { max-width: 1320px; margin: 0 auto; padding-inline: var(--emx-gutter, clamp(16px, 4vw, 40px)); }
.emx-chapter { display: grid; gap: 24px; padding-block: 40px; scroll-margin-top: calc(var(--emx-header-h, 72px) + 56px); }
.emx-chapter__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #0B0D0C; }
.emx-chapter__frame > .emx-stack { position: absolute; inset: 0; }
.emx-chapter__product { position: absolute; left: 12px; top: 12px; z-index: 3; margin: 0; width: clamp(96px, 16%, 150px); background: rgba(11,13,12,.8); border: 1px solid var(--emx-line, #262B27); border-radius: 12px; padding: 6px; }
.emx-chapter__product .emx-stack { aspect-ratio: 1; border-radius: 8px; }
.emx-chapter__product figcaption { font-size: .75rem; line-height: 1.35; color: #C9CFCA; margin-top: 6px; }
.emx-chapter__product a { color: #EDEFEC; }
.emx-chapter__text h3 { margin: 0 0 12px; }
.emx-chapter__text p { color: var(--emx-text-muted, #9BA39D); max-width: 52ch; }
.emx-chapter__text ul { padding-left: 1.1em; color: var(--emx-text, #EDEFEC); }
.emx-chapter__text li { margin: 4px 0; }
.emx-chapter__controls { margin: 20px 0 8px; }
.emx-chapter.is-b .emx-layer--a { opacity: 0; transition-duration: 900ms; }
@media (min-width: 1024px) {
	.emx-chapter { grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; min-height: 72svh; }
	.emx-chapter:nth-child(even) .emx-chapter__media { order: 2; }
}

/* ---------- standalone switch media ---------- */
.emx-switchmedia { margin: 0; }
.emx-switchmedia__frame { position: relative; aspect-ratio: var(--emx-ratio, 16/9); border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #0B0D0C; }
.emx-switchmedia__frame > .emx-stack { position: absolute; inset: 0; }
.emx-switchmedia.is-b .emx-layer--a { opacity: 0; }
.emx-switchmedia__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.emx-switchmedia__caption { font-size: .875rem; color: var(--emx-text-muted, #9BA39D); max-width: 70ch; }
@media (max-width: 767px) { .emx-switchmedia__frame { aspect-ratio: 4 / 5; } }

/* ---------- colour row ---------- */
.emx-colors { margin: 0; }
.emx-colors { margin-top: 32px; }
.emx-colors__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; }
.emx-colors__row > li:last-child { grid-column: span 2; }
@media (min-width: 1024px) { .emx-colors__row { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 16px; } }
.emx-colors__item { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px 4px; border-radius: 12px; background: var(--emx-night, #141816); border: 1px solid transparent; font: inherit; color: inherit; cursor: pointer; transition: border-color 200ms, transform 200ms var(--emx-ease-out, ease); }
.emx-colors__item:hover { border-color: var(--emx-line-strong, #5C655E); }
.emx-colors__item[aria-pressed="true"] { border-color: var(--emx-accent-ink, #5AFF00); transform: translateY(-2px); }
.emx-colors__stage { display: grid; justify-items: center; gap: 12px; margin: 0 0 24px; padding: clamp(24px, 5vw, 56px) 16px; border-radius: var(--emx-r-media, 16px); background: radial-gradient(ellipse at 50% 45%, #121614 0%, #070908 70%); }
.emx-colors__big { position: relative; width: min(420px, 80%); aspect-ratio: 4 / 1; border-radius: 999px; }
.emx-colors__glass { position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(215, 230, 221, .55); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 45%, rgba(255,255,255,.08)); z-index: 2; }
.emx-colors__light { position: absolute; inset: 9%; border-radius: 999px; background: var(--c); opacity: var(--b); box-shadow: 0 0 calc(40px * var(--b)) calc(8px * var(--b)) var(--c); transition: background-color 400ms, opacity 400ms, box-shadow 400ms; }
.emx-colors__big.is-ir .emx-colors__light { background: #1c1f1d; box-shadow: none; opacity: 1; }
.emx-colors__readout { margin: 0; font-size: 1rem; color: #D9DED9; text-align: center; }
.emx-colors__readout strong { color: #EDEFEC; }
.emx-colors__tube { width: 12px; height: 56px; border-radius: 999px; background: var(--c); opacity: var(--b); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; }
.emx-colors__tube--ir { background: #2A2E2B; opacity: 1; box-shadow: 0 0 0 1px #5C655E inset; }
.emx-colors__name { font-size: .875rem; font-weight: 500; color: #EDEFEC; }
.emx-colors__val { font-size: .8125rem; color: #9BA39D; font-family: var(--emx-font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.emx-colors__photo { margin-top: 24px; border-radius: var(--emx-r-media, 16px); overflow: hidden; max-width: 600px; }
.emx-colors__photo img { display: block; width: 100%; height: auto; }

/* ---------- lifetime ---------- */
.emx-life { margin: 0; }
.emx-life__svg { width: 100%; height: auto; max-width: 720px; display: block; }
.emx-life__axis { stroke: var(--emx-line-strong, #5C655E); stroke-width: 1; }
.emx-life__line { fill: none; stroke: var(--emx-accent-ink, #5AFF00); stroke-width: 2; }
.emx-life__dot { fill: var(--emx-bg, #0B0D0C); stroke: var(--emx-accent-ink, #5AFF00); stroke-width: 2; }
.emx-life__val { fill: var(--emx-text, #EDEFEC); font-size: 13px; font-family: var(--emx-font-mono, ui-monospace, monospace); }
.emx-life__yr { fill: var(--emx-text-muted, #9BA39D); font-size: 12px; font-family: var(--emx-font-mono, ui-monospace, monospace); }

/* ---------- dose chart ---------- */
.emx-dose { margin: 0; }
/* 1.4.2: the axis spans exactly the bar tracks (label column + gap to value column + gap), so the ticks sit over the right doses. */
.emx-dose__axis { position: relative; height: 22px; margin: 0 180px 8px calc(var(--emx-dose-label, 38%) + 12px); font-size: .75rem; color: var(--emx-text-muted, #9BA39D); font-family: var(--emx-font-mono, ui-monospace, monospace); }
.emx-dose__axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.emx-dose__group { margin: 20px 0 8px; font-weight: 600; font-size: .9375rem; }
.emx-dose__row { display: grid; grid-template-columns: var(--emx-dose-label, 38%) minmax(0, 1fr) 168px; gap: 12px; align-items: center; min-height: 36px; border-top: 1px solid var(--emx-line, #262B27); }
.emx-dose__label { font-size: .9375rem; line-height: 1.35; padding: 6px 0; min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.emx-dose__track { position: relative; height: 10px; }
.emx-dose__bar, .emx-dose__range { position: absolute; top: 0; left: 0; height: 10px; border-radius: 999px; background: var(--emx-text-muted, #9BA39D); transform-origin: left; }
.emx-dose__range { background: repeating-linear-gradient(90deg, var(--emx-text-muted, #9BA39D) 0 6px, transparent 6px 9px); }
.emx-dose__row.is-tritium .emx-dose__bar { background: var(--emx-accent-ink, #5AFF00); }
.emx-dose__val { font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .875rem; text-align: right; white-space: nowrap; }
html.motion-ok .emx-dose[data-emx="reveal"]:not(.is-in) .emx-dose__bar { transform: scaleX(0); }
html.motion-ok .emx-dose .emx-dose__bar { transition: transform 600ms var(--emx-ease-out); }
.emx-dose__table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: .9375rem; }
.emx-dose__table caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.emx-dose__table th, .emx-dose__table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--emx-line, #262B27); }
.emx-dose__table td:nth-child(2) { font-family: var(--emx-font-mono, ui-monospace, monospace); white-space: nowrap; }
/* 1.4.5: hide the wrapper, not the table (a table grows to its content whatever its height says). */
.emx-dose--compact .emx-dose__tablewrap { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767px) {
	.emx-dose__axis { display: none; }
	.emx-dose__row { grid-template-columns: 1fr auto; }
	.emx-dose__track { grid-column: 1 / -1; grid-row: 2; margin-bottom: 8px; }
}
/* 1.4.7: the compact chart (start page and Säkerhet) stacks each row at every width: text and value on one line, the
   bar across the full width under them, with the axis and faint decade lines over the same width. Before, the bars
   had only the narrow middle column, the axis labels ran into each other and the CT range was a loose striped piece. */
.emx-dose--compact .emx-dose__axis { display: block; height: 20px; margin: 0 0 6px; }
.emx-dose--compact .emx-dose__axis span.is-first { transform: none; }
.emx-dose--compact .emx-dose__row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; align-items: baseline; min-height: 0; padding: 12px 0 14px; }
.emx-dose--compact .emx-dose__label { grid-column: 1; grid-row: 1; padding: 0; }
.emx-dose--compact .emx-dose__val { grid-column: 2; grid-row: 1; }
.emx-dose--compact .emx-dose__track { grid-column: 1 / -1; grid-row: 2; margin: 0; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--emx-line-strong, #5C655E) 0 1px, transparent 1px var(--emx-dose-dec, 22.336%)), color-mix(in srgb, var(--emx-text, #EDEFEC) 6%, transparent); }
.emx-dose--compact .emx-dose__row.is-tritium .emx-dose__label { font-weight: 600; }
.emx-dose__bar.is-range { background: linear-gradient(90deg, var(--emx-text-muted, #9BA39D) 0 var(--emx-dose-solid, 50%), color-mix(in srgb, var(--emx-text-muted, #9BA39D) 40%, transparent) var(--emx-dose-solid, 50%) 100%); }

/* ---------- process ---------- */
.emx-process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.emx-process__step { position: relative; padding: 0 0 28px 48px; }
.emx-process__step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--emx-line, #262B27); }
.emx-process__step:last-child::before { display: none; }
.emx-process__n { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--emx-line-strong, #5C655E); font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .875rem; }
.emx-process__step h3 { margin: 2px 0 4px; font-size: 1.125rem; }
.emx-process__step p { margin: 0; color: var(--emx-text-muted, #9BA39D); }
@media (min-width: 1024px) {
	.emx-process { grid-template-columns: repeat(6, 1fr); gap: 24px; }
	.emx-process__step { padding: 48px 0 0; }
	.emx-process__step::before { left: 34px; right: -24px; top: 15px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- product families bento ---------- */
.emx-families__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1024px) { .emx-families__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .emx-families__cell.is-wide { grid-column: span 2; } .emx-families__cell.is-tall .emx-families__img { aspect-ratio: 4 / 5; } }
.emx-families__cell { display: flex; flex-direction: column; gap: 10px; }
.emx-families__link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.emx-families__img { display: block; aspect-ratio: 1; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #121513; }
.emx-families__cell.is-wide .emx-families__img { aspect-ratio: 2 / 1; }
.emx-families__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--emx-ease-out); }
.emx-families__link:hover img { transform: scale(1.03); }
.emx-families__name { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }
.emx-families__name .emx-icon { vertical-align: -3px; margin-left: 4px; }

/* ---------- badges ---------- */
.emx-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--emx-surface-2, #1A1E1B); border: 1px solid var(--emx-line, #262B27); color: var(--emx-text, #EDEFEC); font-size: .8125rem; font-weight: 500; text-decoration: none; width: fit-content; line-height: 1.2; }
a.emx-badge:hover { border-color: var(--emx-line-strong, #5C655E); }

/* ---------- buy rows ---------- */
.emx-buy__rows { margin: 0; display: grid; gap: 0; }
.emx-buy__row { display: grid; gap: 8px 24px; padding: 18px 0; border-top: 1px solid var(--emx-line, #262B27); }
@media (min-width: 768px) { .emx-buy__row { grid-template-columns: 300px 1fr; align-items: center; } }
.emx-buy__row dd { margin: 0; font-size: 1.0625rem; }
.emx-buy__steps { list-style: none; margin: 32px 0 16px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .emx-buy__steps { grid-template-columns: repeat(4, 1fr); } }
.emx-buy__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; }
.emx-buy__n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--emx-line-strong, #5C655E); display: grid; place-items: center; font-size: .8125rem; font-family: var(--emx-font-mono, ui-monospace, monospace); }
.emx-buy__links { display: flex; flex-wrap: wrap; gap: 24px; }

/* ---------- language switch ---------- */
.emx-lang { display: inline-flex; border: 1px solid var(--emx-line-strong, #5C655E); border-radius: 999px; padding: 2px; }
.emx-lang a { display: inline-grid; place-items: center; min-width: 40px; min-height: 36px; border-radius: 999px; color: var(--emx-text-muted, #9BA39D); text-decoration: none; font-size: .8125rem; font-weight: 600; }
.emx-lang a abbr { text-decoration: none; }
.emx-lang a[aria-current="true"] { background: var(--emx-surface-2, #1A1E1B); color: var(--emx-text, #EDEFEC); }

/* ---------- reduced motion / motion off ---------- */
@media (prefers-reduced-motion: reduce) {
	.emx-layer--a, .emx-switch__thumb, .emx-hero__video, .emx-seq__img, .emx-step { transition: none !important; }
	.emx-hero__rm-caption { display: block; }
}
html[data-motion="off"] .emx-layer--a, html[data-motion="off"] .emx-switch__thumb, html[data-motion="off"] .emx-seq__img { transition: none !important; }
html[data-motion="off"] .emx-hero__rm-caption { display: block; }


/* =====================================================================
   Scroll motion (v1.0.4): capsule explainer, product rail, lifetime readout, process line.
   Without html.motion-ok everything below shows its finished, static state.
   ===================================================================== */

/* ---------- capsule explainer ---------- */
/* Dark islands (explainer, colour stage) keep the dark palette in the light theme too. */
.emx-cx, .emx-colors__stage { --emx-text: #EDEFEC; --emx-text-muted: #9BA39D; --emx-accent: #5AFF00; --emx-accent-ink: #5AFF00; --emx-on-accent: #0B0D0C; --emx-line: #262B27; --emx-line-strong: #5C655E; --emx-focus: #5AFF00; }
.emx-cx { --cx-dark: 0; position: relative; color: #EDEFEC; background: #080A09; }
.emx-cx__pin { box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: clamp(3rem, 2rem + 4vw, 6rem) var(--emx-gutter, 16px); display: grid; gap: 24px; }
.emx-cx__head h2 { margin: 0; color: #EDEFEC; font-size: var(--wp--preset--font-size--heading-l, clamp(2rem, 1.4rem + 2.4vw, 3.25rem)); }
.emx-cx__stage { position: relative; border-radius: var(--emx-r-media, 16px); background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, #111512 calc(100% - var(--cx-dark) * 100%), #030403) 0%, #050606 75%); overflow: hidden; }
.emx-cx__svg { display: block; width: 100%; height: auto; }
.emx-cx .cx-outer { stroke: #d7e6dd; }
.emx-cx .cx-inner { stroke: #bcd3c6; stroke-opacity: .55; }
.emx-cx .cx-hl { stroke: #ffffff; stroke-opacity: .42; }
.emx-cx .cx-phos { stroke: #dfe7da; stroke-opacity: .9; }
.emx-cx .cx-phos-glow { stroke: #5cff66; }
.emx-cx .cx-gas circle { fill: #9fb6c9; opacity: .85; }
.emx-cx .cx-track { stroke: #d8f0ff; stroke-width: 2; stroke-dasharray: 3 5; fill: none; opacity: .8; }
.emx-cx .cx-flash { fill: #7dff86; opacity: .8; }
.emx-cx .cx-electron { fill: #eaf6ff; }
.emx-cx .cx-rays path { stroke: #7dff86; opacity: .8; }
.emx-cx .cx-ruler path { stroke: #7a857d; fill: none; }
.emx-cx .cx-ruler text, .emx-cx .cx-lbl text { fill: #C9CFCA; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: 20px; }
.emx-cx .cx-lbl path { stroke: #7a857d; stroke-width: 1.5; fill: none; }
.emx-cx .cx-lbl--stop text { fill: #EDEFEC; font-family: var(--emx-font-body, system-ui, sans-serif); font-size: 21px; }
.emx-cx__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: none; }
.emx-cx__step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.emx-cx__num { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #5C655E; display: grid; place-items: center; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .875rem; color: #C9CFCA; }
.emx-cx__step h3 { margin: 2px 0 4px; font-size: 1.25rem; color: #EDEFEC; }
.emx-cx__step p { margin: 0; color: #C9CFCA; }
.emx-cx__foot { display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.emx-cx__bar { display: none; }
html.motion-ok .emx-cx.is-live .emx-cx__pin { min-height: 100svh; align-content: center; grid-template-rows: auto 1fr auto; padding-block: calc(var(--emx-header-h, 72px) + 16px) 24px; gap: 16px; }
html.motion-ok .emx-cx.is-live .emx-cx__stage { align-self: center; }
html.motion-ok .emx-cx.is-live .emx-cx__steps { position: relative; min-height: 8.5em; display: block; }
html.motion-ok .emx-cx.is-live .emx-cx__step { position: absolute; inset: 0 auto auto 0; max-width: 42rem; opacity: 0; transform: translateY(12px); transition: opacity 350ms var(--emx-ease-state, ease), transform 350ms var(--emx-ease-out, ease); pointer-events: none; }
html.motion-ok .emx-cx.is-live .emx-cx__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
html.motion-ok .emx-cx.is-live .emx-cx__num { border-color: var(--emx-accent-ink, #5AFF00); color: var(--emx-accent-ink, #5AFF00); }
html.motion-ok .emx-cx.is-live .emx-cx__bar { display: block; flex: 1; height: 2px; background: #262B27; }
html.motion-ok .emx-cx.is-live .emx-cx__bar span { display: block; height: 2px; background: var(--emx-accent-ink, #5AFF00); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1024px) {
	.emx-cx__steps { grid-template-columns: repeat(3, 1fr); }
	html.motion-ok .emx-cx.is-live .emx-cx__pin { max-width: 1440px; grid-template-columns: minmax(300px, 4fr) 8fr; grid-template-rows: 1fr auto 1fr auto; column-gap: 56px; row-gap: 20px; }
	html.motion-ok .emx-cx.is-live .emx-cx__head { grid-column: 1; grid-row: 1; align-self: end; }
	html.motion-ok .emx-cx.is-live .emx-cx__head h2 { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); }
	html.motion-ok .emx-cx.is-live .emx-cx__steps { grid-column: 1; grid-row: 2 / 4; align-self: start; min-height: 12em; }
	html.motion-ok .emx-cx.is-live .emx-cx__stage { grid-column: 2; grid-row: 1 / 4; align-self: center; }
	html.motion-ok .emx-cx.is-live .emx-cx__step h3 { font-size: 1.625rem; }
	html.motion-ok .emx-cx.is-live .emx-cx__foot { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------- product rail ---------- */
.emx-rail { position: relative; background: var(--emx-bg, #0B0D0C); overflow: hidden; }
.emx-rail__pin { padding: clamp(3rem, 2rem + 4vw, 6rem) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.emx-rail__head { max-width: 1320px; width: 100%; margin: 0 auto; padding-inline: var(--emx-gutter, 16px); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; justify-content: space-between; }
.emx-rail__head h2 { margin: 0 0 8px; }
.emx-rail__intro { margin: 0; color: var(--emx-text-muted, #9BA39D); }
.emx-rail__viewport { box-sizing: border-box; min-width: 0; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--emx-gutter, 16px); }
.emx-rail__viewport::-webkit-scrollbar { display: none; }
.emx-rail__track { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 16px; width: max-content; }
.emx-rail__card { --dark: 0; scroll-snap-align: center; width: min(78vw, 360px); }
.emx-rail__link { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.emx-rail__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #0f1210; }
.emx-rail__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emx-rail__img--dark { opacity: var(--dark); }
.emx-rail__card:not(.has-dark) .emx-rail__img { transform: scale(calc(1 + var(--dark) * .04)); transition: transform 200ms linear; }
.emx-rail__meta { display: grid; gap: 8px; justify-items: start; }
.emx-rail__meta h3 { margin: 0; font-size: 1.375rem; }
.emx-rail__count { margin: 0; font-size: .8125rem; color: var(--emx-text-muted, #9BA39D); font-family: var(--emx-font-mono, ui-monospace, monospace); }
.emx-rail__price { margin: 0; font-size: .9375rem; color: var(--emx-text, #EDEFEC); }
.emx-rail__link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.emx-rail__foot { display: none; }
@media (min-width: 1024px) {
	html.motion-ok .emx-scrub .emx-rail__viewport, html.motion-ok.emx-scrub .emx-rail__viewport { overflow: visible; scroll-snap-type: none; }
	html.motion-ok.emx-scrub .emx-rail__pin { box-sizing: border-box; min-height: 100svh; align-content: center; padding-block: calc(var(--emx-header-h, 72px) + 8px) 32px; }
	html.motion-ok.emx-scrub .emx-rail__track { will-change: transform; }
	.emx-rail__card { width: clamp(260px, 22vw, 340px); }
	.emx-rail__media { aspect-ratio: 1; }
	html.motion-ok.emx-scrub .emx-rail__foot { display: block; max-width: 1320px; width: 100%; margin: 0 auto; padding-inline: var(--emx-gutter, 16px); }
	.emx-rail__bar { height: 2px; background: var(--emx-line, #262B27); }
	.emx-rail__bar span { display: block; height: 2px; background: var(--emx-accent-ink, #5AFF00); transform-origin: left; transform: scaleX(0); }
}
@media (hover: hover) { .emx-rail__card.has-dark:hover { --dark: 1 !important; } }
.emx-rail__card.has-dark:focus-within { --dark: 1 !important; }
/* Without scroll motion (reduced motion, motion switch off, no JS) wide screens get a grid, so
   every family is in view without sideways scrolling. */
@media (min-width: 1024px) {
	html:not(.emx-scrub) .emx-rail__viewport { overflow: visible; scroll-snap-type: none; max-width: 1320px; margin-inline: auto; }
	html:not(.emx-scrub) .emx-rail__track { width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 20px; }
	html:not(.emx-scrub) .emx-rail__card { width: auto; }
}

/* ---------- lifetime readout ---------- */
.emx-life__readout { display: none; align-items: center; gap: 16px; margin: 0 0 16px; }
.emx-life.is-live .emx-life__readout { display: flex; }
.emx-life__readout p { margin: 0; font-size: 1.125rem; }
.emx-life__readout strong { font-family: var(--emx-font-mono, ui-monospace, monospace); color: var(--emx-accent-ink, #5AFF00); }
.emx-life__tube { --rel: 1; width: 72px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(215,230,221,.6); background: #5AFF00; background: color-mix(in srgb, #5AFF00 calc(var(--rel) * 100%), #1a1e1b); box-shadow: 0 0 calc(18px * var(--rel)) rgba(90,255,0, calc(.6 * var(--rel))); flex: none; }

/* ---------- process line ---------- */
@media (min-width: 1024px) {
	html.motion-ok.emx-scrub .emx-process::after { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; height: 2px; background: var(--emx-accent-ink, #5AFF00); transform-origin: left; transform: scaleX(var(--line, 0)); z-index: 0; }
	html.motion-ok.emx-scrub .emx-process__n { background: var(--emx-bg, #0B0D0C); position: relative; z-index: 1; }
}

/* ---------- night-vision wipe edge ---------- */
.emx-stack.is-wiping::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--wipe, 0%); width: 2px; background: rgba(237,239,236,.8); box-shadow: 0 0 12px rgba(237,239,236,.5); z-index: 3; pointer-events: none; }

/* =====================================================================
   Shop
   ===================================================================== */
.emx-shopx { max-width: 1320px; margin: 0 auto; }
.emx-shopx__head { margin-bottom: 24px; }
.emx-shopx__head .woocommerce-breadcrumb { font-size: .875rem; color: var(--emx-text-muted, #9BA39D); margin-bottom: 16px; }
.emx-shopx__head .woocommerce-breadcrumb a { color: var(--emx-text-muted, #9BA39D); }
.emx-shopx__head h1 { margin: 0 0 12px; font-size: var(--wp--preset--font-size--heading-l, clamp(2rem, 1.4rem + 2.4vw, 3.25rem)); }
.emx-shopx__intro { color: var(--emx-text-muted, #9BA39D); max-width: 65ch; }
.emx-shopx__intro p { margin: 0; }

/* 1.4.0: the category pills (.emx-catnav) and the filter chips (.emx-chips) are gone; tiles, toolbar and filter panel are in "1.4.0: Produkter" below.
   .emx-chip itself stays: the footer's motion and theme switches use it (base style in the theme). */
.emx-chip { white-space: nowrap; text-decoration: none; }
.emx-sort { display: flex; align-items: center; gap: 8px; font-size: .9375rem; }
.emx-sort select { min-height: 44px; border-radius: var(--emx-r-field, 12px); background: var(--emx-surface-2, #1A1E1B); color: var(--emx-text, #EDEFEC); border: 1px solid var(--emx-line-strong, #5C655E); padding: 0 12px; font: inherit; }

.emx-shelf { margin: 0 0 56px; }
.emx-shelf__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.emx-shelf__head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.emx-shelf__head h2 { margin: 0; font-size: var(--wp--preset--font-size--heading-s, 1.5rem); }
.emx-shelf__head h2 a { color: inherit; text-decoration: none; }
.emx-shelf__head h2 a:hover { text-decoration: underline; }

.emx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
@media (min-width: 768px) { .emx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; } }
@media (min-width: 1200px) { .emx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Product card: same square photo frame everywhere; where a dark photo exists it glows on hover (and when centred on phones). */
.emx-card { --dark: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.emx-card__media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #f3f4f2; border: 1px solid var(--emx-line, #262B27); }
.emx-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--emx-ease-out, ease), opacity 450ms var(--emx-ease-state, ease); }
.emx-card__img--dark { opacity: var(--dark); }
.emx-card .emx-card__img { height: 100%; } /* 1.4.0: WooCommerce's `.woocommerce-page img { height: auto }` won, so a photo that is not square left an empty band in the frame */
.emx-card:hover .emx-card__img { transform: scale(1.03); }
.emx-card.has-dark:hover, .emx-card.has-dark:focus-within, .emx-card.has-dark.is-glow { --dark: 1; }
.emx-card__hint { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-size: .75rem; padding: 3px 8px; border-radius: 999px; background: rgba(11,13,12,.72); color: #EDEFEC; opacity: calc(1 - var(--dark)); transition: opacity 300ms; }
.emx-card__noimg { position: absolute; inset: 0; background: var(--emx-surface-2, #1A1E1B); }
.emx-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; } /* 1.4.0: a column, so the CTA can sit at the bottom */
.emx-card__cat { margin: 0; font-size: .75rem; letter-spacing: .02em; color: var(--emx-text-muted, #9BA39D); text-transform: uppercase; }
.emx-card__title { margin: 0; font-family: var(--emx-font-body, system-ui, sans-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.emx-card__title a { color: var(--emx-text, #EDEFEC); text-decoration: none; }
.emx-card__title a::after { content: ""; position: absolute; inset: 0; }
.emx-card { position: relative; }
.emx-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.emx-card .emx-badge { font-size: .75rem; min-height: 26px; }
.emx-card__swatches { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.emx-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.emx-card__swcount { margin-left: 6px; font-size: .75rem; color: var(--emx-text-muted, #9BA39D); }
.emx-card__price { font-size: 1rem; font-variant-numeric: tabular-nums; }
.emx-card__price .price { display: grid; gap: 2px; }
.emx-card__price .woocommerce-price-suffix { display: block; font-size: .75rem; color: var(--emx-text-muted, #9BA39D); }
/* 1.4.0: one CTA geometry. Every card ends with a full-width button at the same height, buy (primary) or quote and options (ghost). */
.emx-card__cta { margin-top: auto; align-self: stretch; padding-top: 6px; position: relative; z-index: 2; }
.emx-card__cta .emx-btn { width: 100%; box-sizing: border-box; padding-inline: 12px; }
.emx-btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.emx-btn--ghost { background: transparent; color: var(--emx-text, #EDEFEC); border: 1px solid var(--emx-line-strong, #5C655E); }
.emx-btn--ghost:hover { border-color: var(--emx-text, #EDEFEC); }
.emx-btn--block { width: 100%; box-sizing: border-box; }
.emx-btn.is-busy { opacity: .6; pointer-events: none; }
/* 1.4.0: narrow cards keep the words and drop the bag icon (1.3.0 dropped the words, so buttons had two sizes). */
.emx-card { container: emx-card / inline-size; }
@container emx-card (max-width: 199px) { .emx-card__cta .emx-btn .emx-icon { display: none; } .emx-card__cta .emx-btn { padding-inline: 8px; } }
@container emx-card (max-width: 149px) { .emx-card__cta .emx-btn { font-size: .875rem; padding-inline: 4px; } }
.emx-shopx__empty { padding: 48px 0; display: grid; gap: 16px; justify-items: start; }
.emx-shopx__licence { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--emx-line, #262B27); scroll-margin-top: calc(var(--emx-header-h, 72px) + 16px); }
.emx-shopx__licence > h2 { margin: 0 0 8px; }
.emx-shopx__licence > p { margin: 0 0 20px; color: var(--emx-text-muted, #9BA39D); }
.emx-shopx__help { margin-top: 24px; padding: 24px; border-radius: var(--emx-r-signature, 16px 64px 16px 16px); background: var(--emx-surface, #121513); border: 1px solid var(--emx-line, #262B27); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.emx-shopx__help h2 { margin: 0 0 4px; font-size: 1.25rem; }
.emx-shopx__help p { margin: 0; color: var(--emx-text-muted, #9BA39D); }
.emx-pagination { margin-top: 32px; }
.emx-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.emx-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--emx-line, #262B27); color: var(--emx-text, #EDEFEC); text-decoration: none; padding: 0 12px; }
.emx-pagination .page-numbers.current { border-color: var(--emx-accent-ink, #5AFF00); }
[data-theme="light"] .emx-card__media { border-color: var(--emx-line, #D9DDD8); }

/* =====================================================================
   1.4.0: Produkter. Category tiles (navigation), one toolbar (count, Filter, Sortera),
   the filter panel (<details>; a bottom sheet on phones when view.js runs) and the
   active filters as removable tags. Two-class selectors, so the theme's
   `main li > a:only-child` and `:focus-visible` rules do not reshape them.
   ===================================================================== */

/* ---------- category tiles ---------- */
/* Phones: one list, a row per category (photo, name, count). Swedish compounds such as
   "Utrymningsskyltar" do not fit beside a photo in half a phone width, and not every phone
   hyphenates Swedish. From 600 px: tiles, as many columns as fit at 220 px (at most 4). */
.emx-cats { margin: 0 0 28px; }
.emx-cats .emx-cats__h { margin: 0 0 12px; font-family: var(--emx-font-body, system-ui, sans-serif); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--emx-text-muted, #9BA39D); }
.emx-cats .emx-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--emx-line, #262B27); border-radius: 14px; background: var(--emx-surface, #121513); }
.emx-cats .emx-cats__grid > li { margin: 0; min-width: 0; max-width: none; }
.emx-cats .emx-cats__grid > li + li { border-top: 1px solid var(--emx-line, #262B27); }
.emx-cats .emx-cat { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; min-height: 52px; padding: 6px 14px 6px 6px; color: var(--emx-text, #EDEFEC); text-decoration: none; transition: border-color 150ms, background-color 150ms; }
@media (hover: hover) { .emx-cats .emx-cat:hover { background: var(--emx-surface-2, #1A1E1B); } }
@media (max-width: 599px) {
	.emx-cats .emx-cats__grid > li:first-child > .emx-cat { border-radius: 13px 13px 0 0; }
	.emx-cats .emx-cats__grid > li:last-child > .emx-cat { border-radius: 0 0 13px 13px; }
	.emx-cats .emx-cat:focus-visible { outline-offset: -2px; box-shadow: none; }
}
.emx-cats .emx-cat[aria-current="page"] { background: var(--emx-surface-2, #1A1E1B); box-shadow: inset 0 0 0 2px var(--emx-accent-ink, #5AFF00); }
.emx-cats .emx-cat__img { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #0f1210; display: grid; place-items: center; }
.emx-cats .emx-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emx-cats .emx-cat--all .emx-cat__img { box-sizing: border-box; background: var(--emx-surface-2, #1A1E1B); border: 1px solid var(--emx-line, #262B27); color: var(--emx-text, #EDEFEC); }
.emx-cats .emx-cat__text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.emx-cats .emx-cat__name { min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.emx-cats .emx-cat__count { font-size: .875rem; line-height: 1.3; color: var(--emx-text-muted, #9BA39D); white-space: nowrap; }
@media (max-width: 359px) { .emx-cats .emx-cat__text { display: grid; grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) {
	.emx-cats .emx-cats__grid { grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 36px) / 4)), 1fr)); gap: 12px; border: 0; border-radius: 0; background: none; }
	.emx-cats .emx-cats__grid > li + li { border-top: 0; }
	.emx-cats .emx-cats__grid > li > .emx-cat { min-height: 64px; gap: 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--emx-line, #262B27); border-radius: 14px; background: var(--emx-surface, #121513); }
	.emx-cats .emx-cats__grid > li > .emx-cat:hover { border-color: var(--emx-line-strong, #5C655E); }
	.emx-cats .emx-cats__grid > li > .emx-cat[aria-current="page"] { border-color: var(--emx-accent-ink, #5AFF00); box-shadow: inset 0 0 0 1px var(--emx-accent-ink, #5AFF00); background: var(--emx-surface-2, #1A1E1B); }
	.emx-cats .emx-cat__img { width: 48px; height: 48px; border-radius: 10px; }
	.emx-cats .emx-cat__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (min-width: 1200px) {
	.emx-cats .emx-cats__grid > li > .emx-cat { gap: 12px; padding-right: 12px; }
	.emx-cats .emx-cat__img { width: 56px; height: 56px; }
}

/* ---------- toolbar ---------- */
.emx-shopx__bar { margin-bottom: 32px; padding-block: 12px; border-block: 1px solid var(--emx-line, #262B27); }
.emx-shopbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.emx-shopbar .emx-shopbar__count { margin: 0; font-size: 1rem; color: var(--emx-text-muted, #9BA39D); }
.emx-shopbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.emx-shopbar .emx-sort label { margin: 0; color: var(--emx-text-muted, #9BA39D); } /* a global label rule gave it a bottom margin, so it sat above the select */
@media (max-width: 599px) {
	.emx-shopbar__tools { flex: 1 1 100%; }
	.emx-shopbar .emx-sort { flex: 1 1 0; min-width: 0; }
	.emx-shopbar .emx-sort select { flex: 1 1 auto; min-width: 0; width: 100%; }
	html:not(.js) .emx-shopbar .emx-sort { flex-basis: 100%; } /* without JS the form has its own Sortera button */
}

/* ---------- Filter button (the <summary>) ---------- */
.emx-filter .emx-filter__btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--emx-line-strong, #5C655E); border-radius: 999px; background: transparent; color: var(--emx-text, #EDEFEC); font-size: .9375rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.emx-filter .emx-filter__btn::-webkit-details-marker { display: none; }
.emx-filter .emx-filter__btn::marker { content: ""; }
.emx-filter .emx-filter__btn:hover { border-color: var(--emx-text, #EDEFEC); }
.emx-filter[open] > .emx-filter__btn { background: var(--emx-surface-2, #1A1E1B); border-color: var(--emx-text, #EDEFEC); }
.emx-filter .emx-filter__n { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--emx-accent, #5AFF00); color: var(--emx-on-accent, #0B0D0C); font-size: .8125rem; font-weight: 700; }

/* ---------- filter panel: a dropdown under the toolbar (and the no-JS panel on every screen) ---------- */
.emx-filter__panel { box-sizing: border-box; position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(720px, 100%); max-width: 100%; padding: 20px 24px 16px; background: var(--emx-surface, #121513); color: var(--emx-text, #EDEFEC); border: 1px solid var(--emx-line-strong, #5C655E); border-radius: var(--emx-r-media, 16px); box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
[data-theme="light"] .emx-filter__panel { box-shadow: 0 18px 48px rgba(18, 21, 19, .16); }
.emx-filter__panel:focus { outline: none; }
.emx-filter__head { display: none; }
.emx-filter__groups { display: grid; gap: 20px; }
@media (min-width: 768px) { .emx-filter__groups { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; } }
.emx-filter .emx-filter__gh { margin: 0 0 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--emx-text-muted, #9BA39D); }
.emx-filter .emx-filter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.emx-filter .emx-filter__list > li { margin: 0; max-width: none; }
.emx-filter .emx-fopt { box-sizing: border-box; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; min-height: 44px; margin-inline: -10px; padding: 10px; border-radius: 10px; color: var(--emx-text, #EDEFEC); text-decoration: none; }
@media (hover: hover) { .emx-filter .emx-fopt:hover { background: var(--emx-surface-2, #1A1E1B); } }
.emx-filter .emx-fopt__mark { box-sizing: border-box; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--emx-line-strong, #5C655E); }
.emx-filter .emx-fopt[aria-current="true"] .emx-fopt__mark { border-color: var(--emx-accent-ink, #5AFF00); background: radial-gradient(circle, var(--emx-accent-ink, #5AFF00) 0 4px, transparent 4.5px); }
.emx-filter .emx-fopt__label { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.emx-filter .emx-fopt[aria-current="true"] .emx-fopt__label { font-weight: 600; }
.emx-filter .emx-fopt__hint { grid-column: 2; font-size: .875rem; line-height: 1.45; color: var(--emx-text-muted, #9BA39D); }
.emx-filter .emx-filter__foot { margin: 12px 0 0; padding-top: 4px; border-top: 1px solid var(--emx-line, #262B27); max-width: none; }
html.motion-ok .emx-filter[open] .emx-filter__panel { animation: emx-filter-in 160ms var(--emx-ease-out, ease); }
@keyframes emx-filter-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Phones with view.js: a bottom sheet over a dimmed page, with its own title and close button.
   Without JavaScript the panel stays the dropdown above, closed again with the Filter button. */
@media (max-width: 767px) {
	.emx-filter .emx-fopt__hint, .emx-filter .emx-filter__btn, .emx-shopbar .emx-sort { font-size: 1rem; } /* 16 px: body size, and iOS does not zoom into the select */
	.emx-filter .emx-filter__gh { font-size: .875rem; }
	.emx-filter.is-js[open]::before { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); }
	.emx-filter.is-js .emx-filter__panel { position: fixed; z-index: 61; inset: auto 0 0 0; top: auto; width: auto; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--emx-gutter, 16px) calc(16px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
	.emx-filter.is-js .emx-filter__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 calc(var(--emx-gutter, 16px) * -1) 8px; padding: 8px 8px 8px var(--emx-gutter, 16px); background: var(--emx-surface, #121513); border-bottom: 1px solid var(--emx-line, #262B27); }
	.emx-filter.is-js .emx-filter__title { margin: 0; font-family: var(--emx-font-display, system-ui, sans-serif); font-size: 1.25rem; font-weight: 600; }
	html.motion-ok .emx-filter.is-js[open] .emx-filter__panel { animation: emx-sheet-in 260ms var(--emx-ease-out, ease); }
}
@keyframes emx-sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
html.emx-sheet-open { overflow: hidden; }

/* ---------- active filters ---------- */
.emx-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.emx-active .emx-active__label { margin: 0; font-size: .9375rem; color: var(--emx-text-muted, #9BA39D); }
.emx-active .emx-active__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.emx-active .emx-active__list > li { margin: 0; max-width: none; }
.emx-active .emx-ftag { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 14px; border: 1px solid var(--emx-line-strong, #5C655E); border-radius: 999px; background: var(--emx-surface-2, #1A1E1B); color: var(--emx-text, #EDEFEC); font-size: .9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; }
.emx-active .emx-ftag:hover { border-color: var(--emx-text, #EDEFEC); }
.emx-active .emx-ftag .emx-icon { color: var(--emx-text-muted, #9BA39D); }
.emx-active .emx-ftag:hover .emx-icon { color: var(--emx-text, #EDEFEC); }
.emx-active .emx-active__clear { font-size: .9375rem; }
@media (pointer: coarse) { .emx-active .emx-ftag { min-height: 44px; } }
@media (max-width: 767px) { .emx-active .emx-ftag, .emx-active .emx-active__label, .emx-active .emx-active__clear { font-size: 1rem; } }
@media (forced-colors: active) { .emx-filter .emx-filter__btn, .emx-cats .emx-cat, .emx-active .emx-ftag, .emx-filter .emx-fopt__mark { border-color: CanvasText; } .emx-filter .emx-fopt[aria-current="true"] .emx-fopt__mark { background: CanvasText; } }

/* ---------- product page gallery ---------- */
.emx-gallery { display: grid; gap: 10px; min-width: 0; }
.emx-gallery__main { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--emx-r-media, 16px); overflow: hidden; background: #f3f4f2; }
.emx-gallery__main > .emx-stack { position: absolute; inset: 0; }
.emx-gallery__main img, .emx-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emx-gallery__switch { position: absolute; left: 12px; bottom: 12px; z-index: 4; }
.emx-gallery__switch .emx-switch { background: rgba(11,13,12,.72); color: #EDEFEC; border-color: #6B746D; }
.emx-gallery__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.emx-gallery__thumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--emx-surface-2, #1A1E1B); cursor: pointer; opacity: .7; }
.emx-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emx-gallery__thumb.is-active, .emx-gallery__thumb:hover { opacity: 1; border-color: var(--emx-accent-ink, #5AFF00); }

/* ---------- sticky buy bar (phones) ---------- */
.emx-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--emx-gutter, 16px) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--emx-bg, #0B0D0C) 96%, transparent); border-top: 1px solid var(--emx-line, #262B27); transform: translateY(110%); transition: transform 250ms var(--emx-ease-out, ease); }
.emx-buybar.is-shown { transform: none; }
.emx-buybar__name { margin: 0; font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.emx-buybar__price { margin: 0; font-size: .875rem; color: var(--emx-text-muted, #9BA39D); }
.emx-buybar__price .woocommerce-price-suffix { display: none; }
@media (min-width: 1024px) { .emx-buybar { display: none !important; } }

/* ---------- slide-out cart ---------- */
.emx-drawer, .emx-drawer * { box-sizing: border-box; }
.emx-drawer { margin: 0 0 0 auto; padding: 0; border: 0; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--emx-surface, #121513); color: var(--emx-text, #EDEFEC); }
.emx-drawer::backdrop { background: rgba(0,0,0,.6); }
.emx-drawer[open] { animation: emx-drawer-in 280ms var(--emx-ease-out, ease); }
@keyframes emx-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .emx-drawer[open] { animation: none; } }
.emx-drawer__panel { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.emx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--emx-line, #262B27); }
.emx-drawer__head h2 { margin: 0; font-size: 1.375rem; }
.emx-drawer__body { overflow-y: auto; padding: 16px 24px; }
.emx-drawer__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.emx-drawer__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--emx-line, #262B27); }
.emx-drawer__item.is-busy { opacity: .5; }
.emx-drawer__item img, .emx-drawer__noimg { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--emx-surface-2, #1A1E1B); display: block; }
.emx-drawer__info { display: grid; gap: 4px; min-width: 0; }
.emx-drawer__name { color: var(--emx-text, #EDEFEC); font-weight: 600; text-decoration: none; line-height: 1.3; }
.emx-drawer__var, .emx-drawer__lic { margin: 0; font-size: .8125rem; color: var(--emx-text-muted, #9BA39D); }
.emx-drawer__side { display: grid; justify-items: end; gap: 6px; }
.emx-drawer__price { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.emx-drawer__side .emx-textlink { font-size: .8125rem; color: var(--emx-text-muted, #9BA39D); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.emx-qty { display: inline-flex; align-items: center; border: 1px solid var(--emx-line-strong, #5C655E); border-radius: 999px; margin-top: 6px; width: fit-content; }
.emx-qty button { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 1.125rem; cursor: pointer; border-radius: 999px; }
.emx-qty button:disabled { opacity: .35; cursor: default; }
.emx-qty span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.emx-drawer__foot { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--emx-line, #262B27); display: grid; gap: 12px; }
.emx-drawer__totals { margin: 0; display: grid; gap: 4px; }
.emx-drawer__totals > div { display: flex; justify-content: space-between; gap: 16px; }
.emx-drawer__totals dt { font-weight: 600; }
.emx-drawer__totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.emx-drawer__vat dt, .emx-drawer__vat dd { font-weight: 400; font-size: .875rem; color: var(--emx-text-muted, #9BA39D); }
.emx-drawer__note { margin: 0; font-size: .8125rem; color: var(--emx-text-muted, #9BA39D); }
.emx-drawer__cartlink { justify-self: center; }
.emx-drawer__msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--emx-surface-2, #1A1E1B); font-size: .9375rem; }
.emx-drawer__msg--err { border: 1px solid var(--emx-danger, #FF6B5E); }
.emx-drawer__empty { display: grid; gap: 16px; justify-items: start; padding-top: 16px; }
.emx-card__price .emx-price-request { font-size: 1rem; }

@media (max-width: 1023px) {
	html.motion-ok .emx-cx.is-live .emx-cx__pin { grid-template-rows: auto auto auto auto; align-content: center; gap: 20px; }
	html.motion-ok .emx-cx.is-live .emx-cx__steps { min-height: 10.5em; }
	.emx-cx__head h2 { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); }
}
@media (max-width: 767px) {
	.emx-cx .cx-ruler text, .emx-cx .cx-lbl text { font-size: 36px; }
	.emx-cx .cx-lbl--stop text { font-size: 30px; }
	.emx-cx .cx-dimh { display: none; }
	.emx-cx .cx-lbl--gas path, .emx-cx .cx-lbl--phos path, .emx-cx .cx-lbl--glass path { stroke-width: 3; }
	.emx-cx__stage { margin-inline: calc(var(--emx-gutter, 16px) * -0.5); }
}

/* Safety and buying: one section, the two answers close together. */
.emx-pair .emx-pair__second { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--emx-line, #262B27); }

/* =====================================================================
   1.2.0: loop video, product list, home development section, FAQ page,
   Applikationer hub and the application pages.
   ===================================================================== */

/* ---------- loop video (block emitrix/loop-video) ---------- */
.emx-loopvid { margin: 0; }
.emx-loopvid__frame { position: relative; aspect-ratio: var(--lv-ratio, 16/9); overflow: hidden; border-radius: var(--emx-r-media, 16px); background: var(--emx-surface-2, #1A1E1B); isolation: isolate; }
@media (max-width: 767px) { .emx-loopvid__frame { aspect-ratio: var(--lv-ratio-m, var(--lv-ratio, 16/9)); } }
.emx-loopvid__frame picture { position: absolute; inset: 0; display: block; }
.emx-loopvid__frame img, .emx-loopvid__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.emx-loopvid--contain .emx-loopvid__frame img { object-fit: contain; }
.emx-loopvid--contain .emx-loopvid__frame { background: var(--lv-bg, var(--emx-surface-2, #1A1E1B)); } /* 1.3.0: the photo's own edge colour (render.php) */
.emx-loopvid__video { opacity: 0; transition: opacity 450ms ease; }
.emx-loopvid.is-playing .emx-loopvid__video { opacity: 1; }
html:not(.motion-ok) .emx-loopvid__video { display: none; }
.emx-loopvid__caption { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--emx-text-muted, #9BA39D); }
@media (prefers-reduced-motion: reduce) { .emx-loopvid__video { transition: none; } }

/* ---------- product list (block emitrix/product-list) ---------- */
.emx-plist { margin-top: 28px; }

/* ---------- home: development (#utveckling) ---------- */
.emx-dev .emx-dev__head { align-items: flex-end !important; gap: clamp(16px, 4vw, 72px); margin: 0 !important; padding-bottom: clamp(28px, 4vw, 56px); }
.emx-dev .emx-dev__head h2 { margin: 0; font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.04; letter-spacing: -.015em; }
.emx-dev .emx-dev__head .emx-lead { margin: 0 0 14px; color: var(--emx-text, #EDEFEC); }
.emx-dev .emx-dev__head .emx-lead + p { margin: 0; color: var(--emx-text-muted, #9BA39D); max-width: 60ch; }
.emx-dev__cards { gap: 16px !important; margin: 0 !important; padding-bottom: clamp(48px, 7vw, 96px); }
.emx-dev__card { position: relative; box-sizing: border-box; height: 100%; margin: 0; padding: clamp(24px, 3vw, 40px); background: var(--emx-bg, #0B0D0C); border: 1px solid var(--emx-line, #262B27); border-radius: var(--emx-r-media, 16px); overflow: hidden; }
.emx-dev__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--emx-accent-ink, #5AFF00), transparent 72%); }
.emx-dev__card > * { max-width: 48ch; }
.emx-dev__tag { margin: 0 0 clamp(18px, 3vw, 36px); font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .8125rem; letter-spacing: .14em; color: var(--emx-accent-ink, #5AFF00); }
.emx-dev__card h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.15; }
.emx-dev__card p:last-child { margin: 0; color: var(--emx-text-muted, #9BA39D); }
.emx-dev__steps-h { margin: 0 0 32px; font-family: var(--emx-font-mono, ui-monospace, monospace) !important; font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--emx-text-muted, #9BA39D); }
.emx-dev__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--emx-line, #262B27); }
.emx-dev__cta > p { margin: 0; max-width: 56ch; font-size: 1.0625rem; }
.emx-dev__cta .wp-block-buttons { margin: 0; gap: 12px; }
@media (max-width: 781px) { .emx-dev__cards > .wp-block-column + .wp-block-column { margin-top: 0; } }

/* ---------- FAQ page and the questions on the application pages ---------- */
.emx-faq__group { gap: clamp(8px, 4vw, 72px) !important; margin: 0 !important; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--emx-line, #262B27); }
.emx-section > .alignwide > .emx-faq__group:first-child, .emx-faq__group:first-child { border-top: 0; padding-top: 0; }
.emx-faq__group .wp-block-heading { margin: 0 0 8px; font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem); line-height: 1.15; }
.emx-faq__group .wp-block-details:first-child { border-top: 1px solid var(--emx-line, #262B27); }
.emx-faq__group .wp-block-details p { margin-top: 0; }
@media (min-width: 782px) {
	.emx-faq__group > .wp-block-column:first-child { flex: 0 0 34% !important; }
	.emx-faq__group > .wp-block-column:first-child > * { position: sticky; top: calc(var(--emx-header-h, 72px) + 24px); }
	.emx-faq__group .wp-block-details:first-child { border-top: 0; }
	.emx-faq__group .wp-block-details:first-child summary { padding-top: 4px; }
}

/* ---------- Applikationer hub: four doors ---------- */
.emx-doors { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 600px) { .emx-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .emx-doors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 1.3.0: three areas, three columns from tablet width, every picture 4:3. */
@media (min-width: 600px) { .emx-doors--3 { grid-template-columns: 1fr; } }
@media (min-width: 760px) { .emx-doors--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.emx-door { position: relative; display: flex; flex-direction: column; margin: 0; background: var(--emx-surface, #121513); border: 1px solid var(--emx-line, #262B27); border-radius: var(--emx-r-media, 16px); overflow: hidden; transition: border-color 150ms ease, transform 150ms var(--emx-ease-out); }
.emx-door:hover { border-color: var(--emx-line-strong, #5C655E); }
.emx-door:focus-within { outline: 2px solid var(--emx-focus, #5AFF00); outline-offset: 2px; }
.emx-door .emx-loopvid { margin: 0; }
.emx-door .emx-loopvid__frame { border-radius: 0; }
.emx-door h2 { margin: 20px 22px 8px; font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); line-height: 1.2; }
.emx-door h2 a { color: var(--emx-text, #EDEFEC); text-decoration: none; }
.emx-door h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.emx-door h2 a:focus-visible { outline: none; box-shadow: none; }
.emx-door:hover h2 a { text-decoration: underline; text-underline-offset: 4px; }
.emx-door p { margin: 0 22px 24px; color: var(--emx-text-muted, #9BA39D); font-size: 1rem; }

/* ---------- application pages ---------- */
.emx-app-hero { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.emx-app-hero__cols { align-items: center !important; gap: clamp(28px, 4vw, 72px) !important; }
.emx-app-hero h1 { margin: 0 0 20px; font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem); line-height: 1.04; letter-spacing: -.015em; }
.emx-app-hero .emx-lead { margin: 0 0 28px; }
.emx-app-hero .wp-block-buttons { gap: 12px; }
.emx-app-crumb a { color: inherit; text-decoration: none; }
.emx-app-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 782px) { .emx-app-hero__cols > .wp-block-column:first-child { flex: 1 1 52%; } .emx-app-hero__cols > .wp-block-column:last-child { flex: 1 1 48%; } }

.emx-app-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 600px) { .emx-app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .emx-app-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .emx-app-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 1099px) { .emx-app-cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.emx-app-card { margin: 0; padding: clamp(20px, 2.4vw, 28px); background: var(--emx-surface, #121513); border: 1px solid var(--emx-line, #262B27); border-radius: var(--emx-r-media, 16px); }
.emx-section--surface .emx-app-card { background: var(--emx-bg, #0B0D0C); }
.emx-app-card::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 18px; background: var(--emx-accent-ink, #5AFF00); }
.emx-app-card h3 { margin: 0 0 8px; font-size: 1.1875rem; line-height: 1.25; }
.emx-app-card p { margin: 0; font-size: 1rem; color: var(--emx-text-muted, #9BA39D); }
/* Card with a real product photo on top (1.2.0, Försvar och blåljus). */
.emx-app-card--photo { padding: 0; overflow: hidden; }
.emx-app-card--photo::before { display: none; }
.emx-app-card--photo .emx-loopvid { margin: 0; }
.emx-app-card--photo .emx-loopvid__frame { border-radius: 0; }
.emx-app-card--photo h3 { margin: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px) 8px; }
.emx-app-card--photo p { margin: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }

.emx-app-rows > .alignwide > h2 { margin-bottom: clamp(32px, 4vw, 64px); }
.emx-app-row { align-items: center !important; gap: clamp(24px, 4.5vw, 80px) !important; margin: 0 !important; }
.emx-app-row + .emx-app-row { margin-top: clamp(56px, 7vw, 112px) !important; }
@media (min-width: 782px) {
	.emx-app-row > .wp-block-column:first-child { flex: 1 1 56%; }
	.emx-app-row > .wp-block-column:last-child { flex: 1 1 44%; }
	.emx-app-row--flip { flex-direction: row-reverse; }
}
.emx-app-kicker { margin: 0 0 12px; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--emx-accent-ink, #5AFF00); }
.emx-app-num { color: var(--emx-text-muted, #9BA39D); margin-right: 6px; }
.emx-app-row h3 { margin: 0 0 14px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem); line-height: 1.08; letter-spacing: -.01em; }
.emx-app-facts { list-style: none; margin: 20px 0 22px !important; padding: 0 !important; border-top: 1px solid var(--emx-line, #262B27); }
.emx-app-facts li { position: relative; margin: 0; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--emx-line, #262B27); font-size: .9375rem; line-height: 1.5; }
.emx-app-facts li::before { content: ""; position: absolute; left: 2px; top: calc(10px + .45em); width: 8px; height: 8px; border-radius: 50%; background: var(--emx-accent-ink, #5AFF00); }

.emx-app-band { margin-block: 0 !important; padding-bottom: var(--emx-section, 6rem); }
.emx-app-band .emx-loopvid__frame { border-radius: var(--emx-r-media, 16px); }

.emx-app-real { align-items: center !important; gap: clamp(24px, 4.5vw, 80px) !important; }
.emx-app-real h2 { margin-top: 0; }
.emx-app-note { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--emx-line-strong, #5C655E); border-left: 3px solid var(--emx-accent-ink, #5AFF00); border-radius: 12px; }
.emx-app-note h3 { margin: 0 0 6px; font-size: 1rem; }
.emx-app-note p { margin: 0; font-size: .9375rem; color: var(--emx-text-muted, #9BA39D); }

.emx-app-products h2 { margin-top: 0; }
.emx-app-split { gap: clamp(28px, 5vw, 96px) !important; }
.emx-app-split h2 { margin-top: 0; }
.emx-app-licence { list-style: none; margin: 0 0 20px !important; padding: 0 !important; display: grid; gap: 12px; }
.emx-app-licence li { margin: 0; padding: 14px 16px; background: var(--emx-surface, #121513); border: 1px solid var(--emx-line, #262B27); border-radius: 12px; font-size: .9375rem; line-height: 1.55; }
.emx-app-licence strong { color: var(--emx-text, #EDEFEC); }
.emx-app-split ol { padding-left: 1.25em; }
.emx-app-split ol li { margin-bottom: 10px; }
/* Grids and lists built from flow-layout groups: no block-gap margins inside them. */
.emx-app-cards > *, .emx-doors > *, .emx-dev__cards .emx-dev__card, .emx-app-licence > li, .emx-app-facts > li { margin-block: 0 !important; }
.emx-app-licence { margin-top: 20px !important; }
.emx-faq__group .wp-block-details { margin-block: 0 !important; }
.emx-faq__group .wp-block-details summary { padding: 16px 0; }
/* Full-width sections follow each other without a strip of page background between them. */
.wp-block-post-content > .alignfull.emx-section + .alignfull.emx-section { margin-block-start: 0; }

/* ---------- Säkerhet: the brochure's dose list (content-src/page_safety.py, wp:html with the .emx-dose classes) ---------- */
.emx-dose--plain .emx-dose__list { list-style: none; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--emx-line, #262B27); }
.emx-dose--plain .emx-dose__row { margin: 0 !important; min-height: 52px; }
.emx-dose--plain .emx-dose__label { font-size: 1rem; }
.emx-dose--plain .emx-dose__val { font-size: 1rem; }
.emx-dose--plain .emx-dose__bar { min-width: 6px; }
.emx-dose--plain .is-tritium .emx-dose__label { font-weight: 600; }
.emx-dose--plain figcaption { margin-top: 16px; }
@media (max-width: 767px) {
	.emx-dose--plain .emx-dose__label { padding-top: 10px; }
}

/* 1.3.0: application pages teach the use cases; each use case ends with its links (the product, and its shop category). */
.emx-app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; max-width: none !important; }
.emx-app-links .emx-textlink { min-height: 44px; }
.emx-app-card--photo .emx-app-links { margin-top: -8px; }

/* 1.3.0: phones. Standalone links and chips are at least 44 px tall; body copy at least 16 px. */
.emx-textlink { min-height: 44px; }
.emx-app-facts li { font-size: 1rem; }
@media (pointer: coarse) {
	a.emx-badge { min-height: 44px; }
	.emx-card .emx-badge { min-height: 26px; } /* inside a product card the whole card is the link */
}
.emx-card__cta .emx-btn { min-width: 48px; min-height: 48px; }
.emx-card__title a { display: inline-block; padding-block: 2px; }
@media (max-width: 767px) {
	.emx-note, .emx-buybar__name, .emx-facts dd { font-size: 1rem; }
	.emx-loopvid__caption, figcaption.emx-note { font-size: .875rem; }
}
.emx-app-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.emx-app-licence li { font-size: 1rem; }
.emx-app-links a, .emx-shelf__head h2 a, main h3 > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) {
	.emx-dose__table, .emx-buy__steps li, .emx-af__note { font-size: 1rem; }
	.emx-af__product figcaption { font-size: .8125rem; } /* a photo caption, not body copy */
}
.emx-shelf__head h2 a, main h3 > a:only-child { min-width: 44px; }

/* ---------- header navigation (1.4.2) ---------- */
/* Ten items since Hem, Nyheter and Media joined the header. The theme shows the one-line navigation from 1181 px;
   up to 1299 px the links are a little smaller and tighter so all ten fit next to the logo and the tools. */
@media (min-width: 1181px) and (max-width: 1299px) {
	.emx-header .emx-nav ul { gap: 2px; }
	.emx-header .emx-nav a { padding: 0 7px; font-size: .875rem; }
}

/* ---------- 1.4.3 ---------- */
/* Logo: the logo file is 500 x 200 with about 7.5 % empty space left and 9 % right, so at the theme's 40 px the
   mark was only about 28 px tall. Bigger, with the empty sides pulled in so the 1181-1299 px header still fits
   all ten links (measured spare room there: about 26 px). */
.emx-header .emx-logo .emx-logo__img { height: 56px; margin: 0 -12px 0 -10px; }
@media (min-width: 1440px) { .emx-header .emx-logo .emx-logo__img { height: 64px; margin: 0 -14px 0 -12px; } }
@media (max-width: 767px) { .emx-header .emx-logo .emx-logo__img { height: 46px; margin: 0 -10px 0 -8px; } }

/* No automatic hyphenation: the theme hyphenates paragraphs and list items (p, li, dd { hyphens: auto }), which split
   words such as "tech-nology" in the hero and in the development section. Words now wrap whole; a word longer
   than its box still breaks rather than overflowing. */
body p, body li, body dd, body h1, body h2, body h3, body h4,
.emx-dose__label, .emx-families__name, .emx-cats .emx-cat__name, .emx-af__product figcaption {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}

/* "Utgående" label on a product that is sold while stock lasts (products.json 'phaseout'). */
.emx-phaseout { display: inline-flex; align-items: center; width: fit-content; min-height: 26px; margin: 6px 0 0; padding: 0 10px; border: 1px dashed var(--emx-line-strong, #5C655E); border-radius: 999px; color: var(--emx-text-muted, #9BA39D); font-size: .75rem; font-weight: 500; line-height: 1.2; }
.emx-card .emx-phaseout { display: flex; }

/* ---------- 1.4.5 ---------- */
/* Application pages: "Är det farligt?" card instead of the one-line safety note (it sat alone and small in a column). */
.emx-safety { position: relative; box-sizing: border-box; margin: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid color-mix(in srgb, var(--emx-accent-ink, #5AFF00) 28%, var(--emx-line, #262B27)); border-radius: var(--emx-r-media, 16px); background: color-mix(in srgb, var(--emx-accent-ink, #5AFF00) 5%, var(--emx-bg, #0B0D0C)); }
.emx-safety::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 0 18px; background: var(--emx-accent-ink, #5AFF00);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.2 3v5.4c0 4.6-3 8.5-7.2 10-4.2-1.5-7.2-5.4-7.2-10V5.8z'/%3E%3Cpath d='M8.6 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.2 3v5.4c0 4.6-3 8.5-7.2 10-4.2-1.5-7.2-5.4-7.2-10V5.8z'/%3E%3Cpath d='M8.6 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.emx-safety .emx-safety__h { margin: 0 0 12px; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; }
.emx-safety p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--emx-text, #EDEFEC); }
.emx-safety .emx-app-links { margin-top: 16px; }
.wp-block-column > .emx-safety:not(:first-child) { margin-top: 32px; }

/* Footer logo: bigger, with the logo file's empty left side pulled in so it lines up with the text below. */
.emx-footer .emx-logo .emx-logo__img { height: 72px; margin-left: -13px; }
@media (max-width: 767px) { .emx-footer .emx-logo .emx-logo__img { height: 60px; margin-left: -11px; } }

/* Nyheter: show the whole picture (no 3:2 crop), so pictures with text, such as the Defence Expo banner, can be read. */
body.blog .wp-block-post-featured-image, body.single-post .wp-block-post-featured-image, body.archive .wp-block-post-featured-image { aspect-ratio: auto !important; height: auto !important; }
body.blog .wp-block-post-featured-image img, body.single-post .wp-block-post-featured-image img, body.archive .wp-block-post-featured-image img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }

/* Kontakt: the quote form is folded away until the visitor opens it (it opens by itself for #offert links). */
.wp-block-details.emx-offert { box-sizing: border-box; padding: 0 clamp(20px, 3vw, 32px); border: 1px solid var(--emx-line-strong, #5C655E); border-radius: var(--emx-r-media, 16px); background: var(--emx-bg, #0B0D0C); scroll-margin-top: calc(var(--emx-header-h, 72px) + var(--emx-adminbar, 0px) + 16px); }
.wp-block-details.emx-offert > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: clamp(20px, 2.5vw, 28px) 0; font-family: var(--emx-font-display, inherit); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; line-height: 1.15; color: var(--emx-text, #EDEFEC); list-style: none; }
.wp-block-details.emx-offert > summary::after { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--emx-line-strong, #5C655E); border-radius: 50%; font-size: 1.375rem; color: var(--emx-text, #EDEFEC); }
.wp-block-details.emx-offert > summary:hover::after { border-color: var(--emx-accent-ink, #5AFF00); }
.wp-block-details.emx-offert[open] > summary { border-bottom: 1px solid var(--emx-line, #262B27); margin-bottom: 24px; }
.wp-block-details.emx-offert > :not(summary) { color: var(--emx-text, #EDEFEC); }
.wp-block-details.emx-offert > p { color: var(--emx-text-muted, #9BA39D); }
.wp-block-details.emx-offert > :last-child { margin-bottom: clamp(24px, 3vw, 32px); }

/* Teknologi, colour lab on phones: two rows of colours instead of three, so the whole section (heading, text,
   capsule and colours) fits on the screen while it holds the scroll. */
@media (max-width: 767px) {
	.emx-colors__row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
	.emx-colors__item { padding: 10px 2px; gap: 4px; }
	.emx-colors__tube { width: 10px; height: 40px; }
	.emx-colors__name { font-size: .8125rem; }
	.emx-colors__val { font-size: .75rem; }
	.emx-colors__stage { margin-bottom: 16px; }
}

/* Teknologi (scroll.js holdSection): the section content stays in view while the scroll plays the chart or the colours. */
html.emx-scrub .emx-hold > .alignwide { position: sticky; z-index: 1; }
.emx-hold__space { margin: 0 !important; padding: 0; }

/* ---------- 1.4.11: newsletter sign-up (site footer, #nyhetsbrev) ---------- */
/* A card at the top of the footer that floats over the aurora photo, with the Contact Form 7 form (e-mail and a pill
   button on one line, consent under it). Each sign-up is mailed to mail@emitrix.se. */
.emx-nl { grid-column: 1 / -1; position: relative; z-index: 1; display: grid; gap: 24px 56px; box-sizing: border-box; padding: clamp(24px, 4vw, 48px); border: 1px solid color-mix(in srgb, var(--emx-accent-ink, #5AFF00) 32%, var(--emx-line, #262B27)); border-radius: var(--emx-r-signature, 16px 64px 16px 16px); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--emx-accent-ink, #5AFF00) 12%, transparent), transparent 60%), var(--emx-surface, #121513); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); scroll-margin-top: calc(var(--emx-header-h, 72px) + var(--emx-adminbar, 0px) + 24px); }
@media (min-width: 900px) { .emx-nl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; } }
.emx-footer__band + .emx-footer__inner .emx-nl { margin-top: calc(-1 * clamp(56px, 8vw, 120px)); }
.emx-nl .emx-eyebrow { margin-bottom: 12px; }
.emx-nl .emx-nl__h { margin: 0 0 12px; font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: 1.12; }
.emx-nl__p { margin: 0; color: var(--emx-text-muted, #9BA39D); max-width: 46ch; }
.emx-nl .wpcf7 { margin: 0; }
.emx-nl .wpcf7 form { display: grid; gap: 12px; max-width: none; }
.emx-nl__row { display: flex; gap: 10px; align-items: flex-start; }
.emx-nl .emx-nl__field { flex: 1 1 auto; min-width: 0; display: block; }
.emx-nl__field .wpcf7-form-control-wrap { display: block; }
.emx-nl .wpcf7 input[type="email"] { min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--emx-bg, #0B0D0C); } /* 1.4.12: beats the theme's .wpcf7 input rule (site.css loads after this file) */
.emx-nl .wpcf7-submit { min-height: 52px; padding: 0 26px; flex: none; }
.emx-nl .wpcf7-submit:disabled { opacity: .45; cursor: not-allowed; }
.emx-nl .wpcf7-spinner { display: none; }
.emx-nl form.submitting .wpcf7-submit { opacity: .6; cursor: progress; }
.emx-nl__consent { font-size: .875rem; line-height: 1.45; color: var(--emx-text-muted, #9BA39D); }
.emx-nl__consent .wpcf7-list-item { margin: 0; }
.emx-nl .emx-nl__consent .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; min-height: 0; font-size: .875rem; font-weight: 400; } /* 1.4.12: box at the first line, over the theme's centred label */
.emx-nl .emx-nl__consent input[type="checkbox"] { flex: none; margin: 0; }
.emx-nl__consent a { color: var(--emx-text, #EDEFEC); }
.emx-nl .wpcf7-not-valid-tip { margin-top: 6px; padding-left: 20px; }
.emx-nl .wpcf7-response-output { margin: 4px 0 0 !important; padding: 10px 16px !important; font-size: .9375rem; }
.emx-nl .wpcf7 form.sent .wpcf7-response-output { border-color: var(--emx-accent-ink, #5AFF00) !important; }
/* 1.4.12: Contact Form 7 wraps the contents of each div in a <p> (its autop): the field and the button sit in that p,
   so the p is the flex row. */
.emx-nl__row > p { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.emx-nl__consent > p { margin: 0; }
@media (max-width: 559px) { .emx-nl__row, .emx-nl__row > p { flex-direction: column; align-items: stretch; } .emx-nl .wpcf7-submit { width: 100%; } }
/* Nyheter: a link under the heading to the sign-up in the footer. */
.emx-nl-link { margin-top: 8px; }

/* 1.4.16: phones with the WordPress admin bar (logged-in editors). Below 600 px WordPress lets the admin bar scroll
   away, but the site header is fixed at the top, so on first load the admin bar covered the upper part of the header
   until the page was scrolled. Keep the admin bar fixed there too and put the header under it. */
@media (max-width: 600px) {
	html body.admin-bar #wpadminbar { position: fixed; }
	body.admin-bar { --emx-adminbar: 46px; }
}

/* 1.4.18: phones, home page. The header is transparent over the hero until the page has moved 80 px (motion.js,
   emx-scrolled), and on phones the hero photo starts 38 px down, right under the header's icons. So on first load the
   header looked cut in half: a dark band with the icons, then the photo, and the full header only came with scrolling.
   Phones get the solid header from the start, the same as after scrolling. */
@media (max-width: 767px) {
	html.js body.emx-front:not(.emx-scrolled) .emx-site-header .emx-header { background: color-mix(in srgb, var(--emx-bg) 96%, transparent); border-color: var(--emx-line); color: inherit; }
	html.js body.emx-front:not(.emx-scrolled) .emx-site-header .emx-nav a { color: var(--emx-text); }
}

/* 1.4.18: Säkerhet, condensed. The short facts (a broken light source, recycling, licence) sit together under the
   intro instead of in three full sections of their own. */
.emx-safety-facts { gap: clamp(24px, 3vw, 40px) !important; margin: clamp(32px, 4vw, 48px) 0 0 !important; }
.emx-safety-facts > .wp-block-column { box-sizing: border-box; padding-top: 20px; border-top: 1px solid var(--emx-line, #262B27); }
.emx-safety-facts .emx-safety-facts__h { margin: 0 0 10px; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.2; }
.emx-safety-facts p { margin: 0; line-height: 1.55; }
.emx-safety-facts p + p { margin-top: 10px; }
@media (max-width: 781px) { .emx-safety-facts { gap: 28px !important; } }
.emx-safety-doses > * { max-width: var(--wp--style--global--content-size, 720px); }
.emx-nowrap { white-space: nowrap; }

/* ---------- 1.4.19: spam protection in the forms (inc/captcha.php) ---------- */
.emx-captcha { display: grid; gap: 8px; margin: 0 0 16px; }
.emx-captcha__widget:not(:has(iframe)) { display: none; }
.emx-captcha__widget iframe { max-width: 100%; }
.emx-captcha__note { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: none; font-size: .8125rem; line-height: 1.45; color: var(--emx-text-muted, #9BA39D); }
.emx-captcha__note .emx-icon { flex: none; margin-top: 1px; color: var(--emx-accent-ink, #5AFF00); }
.emx-captcha__note a { color: inherit; }
.emx-captcha__msg { margin: 0; max-width: none; padding: 10px 14px; border: 1px solid var(--emx-danger, #FF6B5E); border-radius: var(--emx-r-field, 12px); background: color-mix(in srgb, var(--emx-danger, #FF6B5E) 10%, transparent); color: var(--emx-text, #EDEFEC); font-size: .9375rem; line-height: 1.45; }
.emx-captcha__msg[hidden] { display: none; }
.emx-captcha__msg[data-kind="info"] { border-color: var(--emx-line-strong, #5C655E); background: transparent; }
form.is-captcha [type="submit"], form.is-captcha .wpcf7-submit { cursor: progress; opacity: .7; }
.emx-nl .emx-captcha { margin: 0; }
.woocommerce-checkout .place-order .emx-captcha { margin: 0 0 14px; }
.woocommerce-form-login .emx-captcha, .woocommerce-ResetPassword .emx-captcha, .woocommerce-form-register .emx-captcha { margin: 4px 0 16px; }
/* Google allows hiding the reCAPTCHA badge when the form shows its text (the note above). */
.grecaptcha-badge { visibility: hidden !important; }

/* ---------- 1.4.19: cookie banner (inc/consent.php) ---------- */
.emx-consent { display: none; position: fixed; z-index: 90; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); pointer-events: none; }
html.emx-consent-ask .emx-consent { display: block; }
.emx-consent__card { box-sizing: border-box; pointer-events: auto; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: var(--emx-surface, #121513); color: var(--emx-text, #EDEFEC); border: 1px solid var(--emx-line-strong, #5C655E); border-radius: var(--emx-r-signature, 16px 40px 16px 16px); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
@media (min-width: 768px) {
	.emx-consent { left: 24px; right: auto; bottom: 24px; }
	.emx-consent__card { width: 440px; padding: 24px; }
}
html.emx-consent-ask .emx-consent__card { animation: emx-consent-in 420ms var(--emx-ease-out, ease-out) both; }
@keyframes emx-consent-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { html.emx-consent-ask .emx-consent__card { animation: none; } }
.emx-consent .emx-consent__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.125rem; line-height: 1.2; font-weight: 600; }
.emx-consent__h .emx-icon { flex: none; color: var(--emx-accent-ink, #5AFF00); }
.emx-consent__p { margin: 0; max-width: none; font-size: .9375rem; line-height: 1.5; color: var(--emx-text-muted, #9BA39D); }
.emx-consent__p a { color: var(--emx-text, #EDEFEC); }
.emx-consent__prefs { display: grid; gap: 12px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--emx-line, #262B27); }
.emx-consent__prefs[hidden] { display: none; }
.emx-consent__opt { display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; line-height: 1.45; color: var(--emx-text-muted, #9BA39D); cursor: pointer; }
.emx-consent__opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--emx-accent-ink, #5AFF00); }
.emx-consent__opt input:disabled { opacity: .6; }
.emx-consent__opt strong { display: block; margin-bottom: 2px; font-size: .9375rem; font-weight: 600; color: var(--emx-text, #EDEFEC); }
.emx-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
/* Accept and refuse are the same size and look. */
.emx-consent__btn { min-height: 48px; padding: 0 8px; border: 1px solid var(--emx-text, #EDEFEC); border-radius: 999px; background: var(--emx-text, #EDEFEC); color: var(--emx-bg, #0B0D0C); font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 150ms, transform 150ms; }
.emx-consent__btn:hover { background: color-mix(in srgb, var(--emx-text, #EDEFEC) 84%, var(--emx-bg, #0B0D0C)); }
.emx-consent__btn:active { transform: translateY(1px) scale(.98); }
.emx-consent__btn[data-emx-consent="save"] { grid-column: 1 / -1; }
.emx-consent__btn[hidden], .emx-consent__more[hidden] { display: none; }
.emx-consent__more { grid-column: 1 / -1; justify-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--emx-text, #EDEFEC); font: inherit; font-size: .9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 359px) { .emx-consent__actions { grid-template-columns: 1fr; } }
@media print { .emx-consent { display: none !important; } }