/* ==========================================================================
   KakelDirekt – riktning C: turkos, ett typsnitt, enkelt och stilrent.

   Variablerna under :root är dem designpanelen i Pedesign Core skriver
   över. Använd dem i stället för hårdkodade färger.
   ========================================================================== */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--color-accent: #0E6E6A;
	--color-accent-2: #19A39B;
	--color-dark: #16211F;
	--color-bg: #ffffff;
	--color-tint: #EEF5F4;
	--color-line: #D5DEDC;
	--color-muted: #4A5553;
	--color-sale: #B3261A;
	--color-warn-bg: #FBF3DC;
	--font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--radie: 6px;
	--ram: 1360px;
	--kant: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Attributet hidden ska alltid vinna, även över element som har en egen display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.45;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(32px, 4vw, 52px); }
h2 { font-size: clamp(24px, 2.6vw, 34px); }

p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--color-accent-2); outline-offset: 2px; }

.ram { max-width: var(--ram); margin: 0 auto; padding: 0 var(--kant); }
.ram--smal { max-width: 860px; }

.dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hoppa { position: absolute; left: -9999px; top: 0; background: var(--color-dark); color: #fff; padding: 12px 18px; z-index: 100; }
.hoppa:focus { left: 0; }

.ingress { font-size: 19px; max-width: 46em; color: var(--color-muted); }

.etikett { display: block; font-weight: 600; margin-bottom: 8px; }

.lank { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-weight: 500; }
.lank:hover { color: var(--color-accent); }

/* ---------- Knappar ---------- */

.knapp {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 24px;
	background: var(--color-accent); color: #fff;
	border: 1px solid var(--color-accent); border-radius: var(--radie);
	font-weight: 600; cursor: pointer; text-align: center;
}
.knapp:hover { background: #0a5754; border-color: #0a5754; color: #fff; }
.knapp--kant { background: #fff; color: var(--color-accent); }
.knapp--kant:hover { background: var(--color-tint); color: var(--color-accent); }
.knapp--stor { min-height: 56px; width: 100%; font-size: 18px; }
.knapp:disabled { background: var(--color-line); border-color: var(--color-line); color: #3F4A48; cursor: not-allowed; }

/* ---------- Banderoll ---------- */

.banderoll { background: var(--color-dark); color: #fff; text-align: center; padding: 10px var(--kant); font-size: 15px; }
.banderoll a { text-decoration: underline; }
.banderoll--tom { background: #fff; color: var(--color-muted); border: 1px dashed var(--color-muted); }

/* ---------- Sidhuvud ---------- */

.ikon { display: block; flex: none; }

.sidtopp { position: sticky; top: 0; z-index: 30; background: #fff; transition: box-shadow .2s; }
.admin-bar .sidtopp { top: 32px; }
@media (max-width: 782px) { .admin-bar .sidtopp { top: 0; } }
.sidtopp.ar-rullad { box-shadow: 0 6px 24px rgba(22, 33, 31, .1); }

.sidhuvud { border-bottom: 1px solid var(--color-line); }
.sidhuvud-inre { display: flex; align-items: center; gap: 14px 48px; padding-top: 16px; padding-bottom: 16px; }
.logga img { height: 46px; width: auto; }

.sokruta {
	flex: 1 1 360px; max-width: 720px; display: flex; align-items: center;
	border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; background: #fff;
	box-shadow: 0 2px 8px rgba(22, 33, 31, .06); padding-left: 16px; color: var(--color-muted);
}
.sokruta:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(25, 163, 155, .2); }
.sokruta input { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; padding: 0 14px; background: transparent; color: var(--color-dark); outline: 0; }
.sokruta button { align-self: stretch; padding: 0 30px; border: 0; background: var(--color-accent); color: #fff; font-weight: 600; cursor: pointer; }
.sokruta button:hover { background: #0a5754; }

.sidhuvud-lankar { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.sidhuvud-lankar a { display: flex; align-items: center; gap: 8px; padding: 10px 0; }

.huvudmeny { border-bottom: 1px solid var(--color-line); font-weight: 500; font-size: 16px; }
.huvudmeny-inre { display: flex; justify-content: space-between; align-items: center; gap: 0 32px; }
.meny { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 52px); }
.meny > li { position: relative; }
.meny a { display: flex; align-items: center; gap: 8px; padding: 15px 0; }
.meny .current-menu-item > a { color: var(--color-accent); }
.meny .rea > a, .meny .kampanj > a { color: var(--color-sale); font-weight: 600; }

/* Undermenyer: en pil efter namnet och en ruta som fälls ned. */
.meny .menu-item-has-children > a::after {
	content: ''; width: 7px; height: 7px; margin: -3px 0 0 4px;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
.meny .sub-menu {
	list-style: none; margin: 0; padding: 8px 0; position: absolute; left: -16px; top: 100%; min-width: 240px; z-index: 40;
	background: #fff; border: 1px solid var(--color-line); border-radius: 8px; box-shadow: 0 14px 36px rgba(22, 33, 31, .14);
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.meny li:hover > .sub-menu, .meny li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.meny .sub-menu a { padding: 9px 18px; font-weight: 400; white-space: nowrap; }
.meny .sub-menu a:hover { background: var(--color-tint); }

.meny--genvagar { gap: 0 28px; font-size: 14px; font-weight: 400; color: var(--color-muted); }
.meny--genvagar a:hover { color: var(--color-accent); }

/* ---------- Startsidans bild ---------- */

.hero { position: relative; overflow: hidden; isolation: isolate; background: #F7F5F1; padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.4vw, 32px); }

.hero-bild {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center 50%;
	transform-origin: 60% 40%;
	animation: kd-zoom 26s ease-out both;
}

/* Bilden hålls diskret: ett ljust, jämnt skikt över hela ytan, ingen mörk toning. */
.hero::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(250, 248, 244, .72) 0%, rgba(250, 248, 244, .55) 45%, rgba(250, 248, 244, .85) 100%);
}

@keyframes kd-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero-inre { position: relative; }
.hero-text { max-width: 900px; margin: 0 auto; }
.hero-etikett { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted); }
.hero-etikett::before { content: ''; width: 36px; height: 1.5px; background: var(--color-accent); }
.hero-text { text-align: center; }
.hero h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 10px; }
.hero-ingress { font-size: clamp(16px, 1.4vw, 19px); color: var(--color-muted); max-width: 40em; margin: 0 auto; line-height: 1.5; }

/* ---------- Sökkortet ---------- */

.hero-kort {
	max-width: 1200px; margin: clamp(18px, 2.4vw, 28px) auto 0;
	background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-radius: 12px; padding: clamp(18px, 2.2vw, 30px);
	box-shadow: 0 24px 60px rgba(22, 33, 31, .14);
}
.hero-kort .filter { margin-top: 22px; padding-top: 22px; border: 0; border-top: 1px solid var(--color-line); border-radius: 0; background: transparent; }
.hero-kort .filter-knapp { display: none; }

.kompakt-rubrik { font-size: 18px; font-weight: 600; margin: 0 0 14px; }

.kompakt-sok { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 0 18px; border: 1.5px solid var(--color-line); border-radius: 10px; background: #fff; color: var(--color-muted); }
.kompakt-sok:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(25, 163, 155, .2); }
.kompakt-sok-text { flex: 1 1 auto; min-width: 0; height: 58px; border: 0; background: transparent; font-size: 18px; color: var(--color-dark); outline: 0; }

.kompakt-rum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-bottom: 18px; }
.kompakt-tips { margin: -4px 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--color-tint); font-size: 15px; color: var(--color-dark); }
.kompakt-rubrik--forfina { padding-top: 18px; border-top: 1px solid var(--color-line); }
.kompakt-chip.ar-tips, .kompakt-farg.ar-tips { border-color: var(--color-accent-2); box-shadow: inset 0 0 0 1px var(--color-accent-2); }
.kompakt-chip.ar-tips::after { content: ' · tips'; color: var(--color-accent); font-size: 13px; }
.kompakt-rumknapp {
	display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 62px; padding: 0 16px;
	background: #fff; border: 1px solid var(--color-line); border-radius: 8px; font-size: 17px; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.kompakt-rumknapp:hover { border-color: var(--color-dark); }
.kompakt-rumknapp.ar-vald { background: #E3F3F1; border-color: var(--color-accent-2); color: var(--color-dark); }
.ikon-hallare { display: inline-flex; }

.kompakt-rad { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 18px 20px; padding: 4px 0 20px; }
@media (min-width: 860px) and (max-width: 1239px) { .kompakt-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kompakt-grupp:nth-child(3) { border-left: 0; padding-left: 0; } }
.kompakt-grupp { display: flex; flex-direction: column; gap: 12px; }
.kompakt-grupp + .kompakt-grupp { border-left: 1px solid var(--color-line); padding-left: 20px; }
.kompakt-etikett { font-weight: 600; font-size: 16px; }
.kompakt-val { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kompakt-grupp--farg .kompakt-val { flex-wrap: nowrap; gap: 4px; }

.kompakt-farg { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; min-width: 50px; background: none; border: 0; cursor: pointer; font-size: 13.5px; color: var(--color-muted); }
.kompakt-prick { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(22, 33, 31, .18); box-shadow: inset 0 0 0 3px #fff; }
.kompakt-farg.ar-vald { color: var(--color-dark); font-weight: 600; }
.kompakt-farg.ar-vald .kompakt-prick { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.kompakt-chip { min-width: 0; min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--color-line); border-radius: 6px; cursor: pointer; font-size: 15px; }
.kompakt-chip:hover { border-color: var(--color-dark); }
.kompakt-chip.ar-vald { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.kompakt-fot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.kompakt-visa:disabled { opacity: .55; cursor: default; }
.kompakt-fler { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; background: #fff; border: 1px solid var(--color-dark); border-radius: 6px; cursor: pointer; font-size: 16px; }
.kompakt-fler:hover { background: var(--color-tint); }
.kompakt-hoger { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.kompakt-antal { color: var(--color-muted); }
.kompakt-visa { gap: 10px; min-height: 52px; padding: 0 28px; font-size: 17px; }

.resultat { padding: 36px 0 72px; }
.resultat-rubrik { scroll-margin-top: 110px; font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 14px; }
.resultat .sok-rad { margin-top: 12px; }

/* Aktiva val som chips */
.sok-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.sok-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px 0 14px; border: 1px solid var(--color-accent); border-radius: 999px; background: #E3F3F1; color: var(--color-dark); font-size: 14px; cursor: pointer; }
.sok-chip:hover { background: #d3ece9; }
.sok-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 16px; line-height: 1; }

/* "Fler filter" i sökkortet */
.filter--kompakt .ark-huvud, .filter--kompakt .ark-fot { display: none; }
.filtergrupp.ar-rekommenderad legend::after { content: 'Rekommenderas'; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 12px; font-weight: 600; vertical-align: 2px; }
@media (min-width: 860px) {
	.filter--kompakt .filter-inre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.filter--kompakt .filtergrupp { grid-column: auto; }
	.filter--kompakt .filtergrupp--fg, .filter--kompakt .filtergrupp--stl { grid-column: 1 / -1; }
	.kompakt-grupp--stil { display: flex; }
}

/* Startsidans sidhuvud: en rad, sökningen bakom en ikon */
.sidtopp--hem .sidhuvud-inre { gap: 14px 32px; padding-top: 12px; padding-bottom: 12px; }
.huvudmeny--inline { border: 0; }
.huvudmeny--inline .meny { flex-wrap: nowrap; gap: 0 clamp(18px, 2.2vw, 36px); }
.sok-ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--color-dark); cursor: pointer; }
.sok-ikon:hover, .sok-ikon[aria-expanded="true"] { background: var(--color-tint); }
.sokruta--falla { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); max-width: none; margin-top: 8px; background: #fff; box-shadow: 0 18px 40px rgba(22, 33, 31, .16); z-index: 40; }
.sidtopp--hem .sidhuvud { position: relative; }

@media (prefers-reduced-motion: reduce) {
	.hero-bild { animation: none; }
}

/* ---------- Startsida ---------- */

.fordelar { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.fordelar-inre { display: flex; flex-wrap: wrap; }
.fordel { flex: 1 1 260px; padding: 28px 24px 28px 0; display: flex; flex-direction: column; gap: 4px; }
.fordel span { font-size: 16px; color: var(--color-muted); }

/* ---------- Innehållssidor (mallen KakelDirekt-sida) ---------- */

.sidhero { position: relative; overflow: hidden; isolation: isolate; background: var(--color-tint); padding: clamp(28px, 4vw, 56px) 0; }
.sidhero--bild { padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); background: #F4F1EC; }
.sidhero-bild { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; animation: kd-zoom 26s ease-out both; }
.sidhero--bild::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(250, 248, 244, .94) 0%, rgba(250, 248, 244, .82) 45%, rgba(250, 248, 244, .15) 100%); }
.sidhero h1 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 650; letter-spacing: -0.03em; max-width: 16ch; margin-bottom: 14px; }
.sidhero-ingress { font-size: clamp(17px, 1.5vw, 21px); color: var(--color-muted); max-width: 36em; margin: 0; }
.sidhero .smulor { margin-bottom: 18px; }

.sidtext { padding: clamp(36px, 5vw, 72px) 0; }
.sidtext--bilder .sidtext-inre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sidtext .brodtext { font-size: 17px; }
.sidtext .brodtext h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.025em; margin: 0 0 .6em; }
.sidtext .brodtext h2 + * { margin-top: 0; }
.sidtext .brodtext h3 { font-size: 21px; font-weight: 600; margin: 1.4em 0 .4em; letter-spacing: -0.01em; }
.sidtext .brodtext ul { padding-left: 1.2em; }
.sidtext .brodtext li { margin-bottom: .3em; }
.sidtext-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sidtext-bilder img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.sidtext-bilder img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

.faq { padding: 0 0 clamp(40px, 6vw, 80px); }
.faq-fraga { border-bottom: 1px solid var(--color-line); }
.faq-fraga:first-child { border-top: 1px solid var(--color-line); }
.faq-fraga summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 600; font-size: 18px; }
.faq-fraga summary::-webkit-details-marker { display: none; }
.faq-fraga summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; color: var(--color-accent); }
.faq-fraga[open] summary::after { content: '−'; }
.faq-svar { padding: 0 0 20px; color: var(--color-muted); max-width: 46em; }

.sidverktyg { padding: clamp(24px, 4vw, 48px) 0 72px; border-top: 1px solid var(--color-line); }
.sidverktyg h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; margin-bottom: 20px; }

@media (max-width: 859px) {
	.sidtext--bilder .sidtext-inre { grid-template-columns: minmax(0, 1fr); }
	.sidhero--bild::before { background: rgba(250, 248, 244, .86); }
}

/* ---------- Arkiv och sidor ---------- */

.arkiv, .sida, .korg { padding: 32px 0 72px; }
.arkiv h1, .sida h1, .korg h1 { margin-bottom: 24px; }
.arkiv-text { max-width: 46em; margin-top: 56px; }

.smulor { font-size: 15px; color: var(--color-muted); margin-bottom: 14px; }
.smulor a { text-decoration: underline; }
.smulor span { margin: 0 6px; }

.brodtext { max-width: 46em; }
.brodtext a { color: var(--color-accent); text-decoration: underline; }
.brodtext h2 { margin: 1.4em 0 .5em; }

/* ==========================================================================
   Sökverktyget
   ========================================================================== */

.sok-laddar { padding: 40px 0; color: var(--color-muted); }

.sok-text {
	width: 100%; height: 54px; padding: 0 18px;
	border: 1px solid var(--color-dark); border-radius: var(--radie); background: #fff;
	margin-bottom: 16px;
}

.filter { border: 1px solid var(--color-line); border-radius: var(--radie); background: #fff; }
.filter-knapp { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.filter-knapp::-webkit-details-marker { display: none; }
.filter-knapp::after { content: '+'; font-size: 22px; font-weight: 300; line-height: 1; }
.filter[open] > .filter-knapp::after { content: '−'; }
.filter-inre { padding: 4px 18px 18px; display: grid; gap: 18px; }

.filtergrupp { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtergrupp legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.filtergrupp[hidden] { display: none; }

.filter-mer-knapp { justify-self: start; grid-column: 1 / -1; font-size: 15px; min-height: 32px; }
.filter-mer { grid-column: 1 / -1; display: grid; gap: 18px; }

.val-lista { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.val {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 40px; padding: 6px 12px;
	background: #fff; border: 1px solid var(--color-line); border-radius: var(--radie);
	cursor: pointer; font-size: 15px; line-height: 1.2;
}
.val:hover { border-color: var(--color-dark); }
.val.ar-vald { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.val.ar-tom { opacity: .45; cursor: default; }
.val.ar-tom:hover { border-color: var(--color-line); }
.val-antal { font-size: 13px; color: var(--color-muted); }
.val.ar-vald .val-antal { color: rgba(255, 255, 255, .85); }
.val--fler { border-style: dashed; font-weight: 500; }

.stl-ruta { display: inline-block; border: 1.5px solid currentColor; border-radius: 1px; flex: none; }
.stl-ruta--mosaik { background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 7px 7px; }

.stl-fler { flex: 1 1 100%; display: grid; gap: 12px; padding-top: 6px; }
.stl-form-namn { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 6px; }

.fargprick { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(22, 33, 31, .25); flex: none; }

.filtergrupp select, .sok-rad select {
	min-height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--color-line); border-radius: var(--radie);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316211F' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance: none; -webkit-appearance: none; font-size: 15px; cursor: pointer;
}

.kryss { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; min-height: 40px; }
.kryss input { width: 20px; height: 20px; accent-color: var(--color-accent); margin: 0; flex: none; }

.sok-rad { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 20px 0; }
.sok-rad-v, .sok-rad-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.sok-antal { margin: 0; font-weight: 600; }

.falt-enhet { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-dark); border-radius: var(--radie); padding: 0 14px; background: #fff; }
.falt-enhet input { border: 0; outline: 0; width: 90px; height: 52px; background: transparent; font-size: 20px; font-weight: 500; }
.falt-enhet:focus-within { outline: 3px solid var(--color-accent-2); outline-offset: 2px; }
.falt-enhet--liten { border-color: var(--color-line); font-size: 15px; }
.falt-enhet--liten input { width: 56px; height: 38px; font-size: 16px; text-align: right; }

.sok-tomt { grid-column: 1 / -1; padding: 48px 20px; text-align: center; background: var(--color-tint); border-radius: var(--radie); display: flex; flex-direction: column; gap: 6px; }

.sok-fler { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; color: var(--color-muted); }
.sok-fler:empty { display: none; }

/* ---------- Kort ---------- */

.kort-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 20px; }
.kort-lista--sma { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.kort { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kort-lank, a.kort { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kort-lank:hover .kort-namn, a.kort:hover .kort-namn { text-decoration: underline; }

.kort-bild {
	position: relative; display: block; aspect-ratio: 1; margin-bottom: 9px;
	background: var(--color-tint); border-radius: var(--radie); overflow: hidden;
}
.kort-bild img { width: 100%; height: 100%; object-fit: cover; }
.kort-bild--tom { border: 1px solid var(--color-line); }

.bricka { position: absolute; left: 0; top: 0; background: var(--color-accent); color: #fff; font-weight: 600; font-size: 14px; padding: 5px 11px; border-bottom-right-radius: var(--radie); }
.bricka--rea { background: var(--color-sale); }

.kort-marke { font-size: 14px; color: var(--color-muted); min-height: 1em; }
.kort-namn { font-weight: 500; overflow-wrap: anywhere; }
.kort-stl { font-size: 14px; color: var(--color-muted); }
.kort-pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; }
.kort-pris strong { font-size: 21px; font-weight: 600; }
.kort-pris.ar-rea strong { color: var(--color-sale); }
.pris-ord { font-size: 15px; text-decoration: line-through; color: var(--color-muted); }
.kort-summa { font-size: 14px; background: var(--color-tint); border-radius: 4px; padding: 4px 8px; align-self: flex-start; }

.kort-lager { font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.kort-lager::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); flex: none; }
.kort-lager--best::before { background: #fff; border: 1.5px solid var(--color-dark); }
.kort-lager--nej::before { background: var(--color-sale); }

.kort-farger { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fargruta {
	width: 34px; height: 34px; padding: 0; border-radius: 4px; cursor: pointer;
	border: 1px solid var(--color-line); background-color: var(--color-tint); background-size: cover; background-position: center;
}
.fargruta:hover { border-color: var(--color-dark); }
.fargruta.ar-vald { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fargruta-fler { font-size: 14px; color: var(--color-muted); padding-left: 2px; }

/* ==========================================================================
   Produktsidan
   ========================================================================== */

.produkt { padding: 24px 0 72px; }
.produkt-topp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }

.galleri-stor { position: relative; aspect-ratio: 1; background: var(--color-tint); border-radius: var(--radie); overflow: hidden; }
.galleri-stor img { width: 100%; height: 100%; object-fit: contain; }
.galleri-tom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-muted); }
.galleri-sma { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.galleri-liten { width: 76px; height: 76px; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radie); overflow: hidden; cursor: pointer; background: var(--color-tint); }
.galleri-liten img { width: 100%; height: 100%; object-fit: cover; }
.galleri-liten.ar-vald { border-color: var(--color-accent); outline: 2px solid var(--color-accent); }

.produkt-kop { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.produkt-marke { margin: 0 0 -10px; color: var(--color-muted); }
.produkt-kop h1 { font-size: clamp(28px, 3.2vw, 44px); overflow-wrap: anywhere; }

.produkt-pris { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pris-stort { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; }
.produkt-pris.ar-rea .pris-stort { color: var(--color-sale); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--color-line); border-radius: 100px; padding: 5px 14px; font-size: 15px; }

.varianter-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.variant { border: 1px solid var(--color-line); border-radius: var(--radie); padding: 9px 14px; font-size: 15px; }
.variant:hover { border-color: var(--color-dark); color: inherit; }
.variant.ar-vald { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.lagerruta { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radie); background: var(--color-tint); }
.lagerruta > div { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.lagerruta strong { font-weight: 600; font-size: 17px; }
.lagerruta-prick { width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); flex: none; margin-top: 6px; }
.lagerruta-datum { font-size: 14px; color: var(--color-muted); }
.lagerruta--best { background: #F3F1E7; }
.lagerruta--best .lagerruta-prick { background: var(--color-dark); }
.lagerruta--slut { background: #FBEDEB; }
.lagerruta--slut .lagerruta-prick { background: var(--color-sale); }

.raknare { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.raknare .etikett { margin-bottom: -4px; }
.raknare-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.raknare-text { margin: 0; flex: 1 1 200px; font-size: 16px; }
.raknare-lagd { margin: 0; font-weight: 500; }
.raknare-lagd a { color: var(--color-accent); text-decoration: underline; }
.raknare-stangd { padding: 16px 18px; background: #FBEDEB; border-radius: var(--radie); }
.raknare-stangd a { text-decoration: underline; font-weight: 600; }

.stegare { display: inline-flex; align-items: center; border: 1px solid var(--color-dark); border-radius: var(--radie); overflow: hidden; flex: none; }
.stegare button { width: 48px; height: 48px; border: 0; background: #fff; font-size: 22px; cursor: pointer; }
.stegare button:hover { background: var(--color-tint); }
.stegare output { min-width: 92px; padding: 0 8px; text-align: center; font-weight: 600; }

.over-saldo { padding: 16px 18px; background: var(--color-warn-bg); border-radius: var(--radie); display: flex; flex-direction: column; gap: 10px; }
.over-saldo[hidden] { display: none; }
.over-saldo p { margin: 0; font-size: 16px; }
.over-saldo-val { display: flex; flex-wrap: wrap; gap: 10px; }
.over-saldo-val .knapp { flex: 1 1 200px; }

.kopfakta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; color: var(--color-muted); }

.produkt-info { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 64px; }
.produkt-info h2, .syskon h2 { margin-bottom: 18px; }
.produkt-info > :only-child { grid-column: 1 / -1; max-width: 640px; }

.fakta { margin: 0; }
.fakta > div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--color-line); }
.fakta dt { color: var(--color-muted); }
.fakta dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

.syskon { margin-top: 72px; }
.kort-lista--sma .kort-namn { font-size: 15px; }
.kort-lista--sma .kort-pris { font-weight: 600; }

/* ==========================================================================
   Varukorgen
   ========================================================================== */

.korg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(24px, 4vw, 56px); align-items: start; }

.korg-rader { border-top: 1px solid var(--color-line); }
.korg-rad { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.korg-bild { width: 96px; height: 96px; background: var(--color-tint); border-radius: var(--radie); overflow: hidden; grid-row: span 2; }
.korg-bild img { width: 100%; height: 100%; object-fit: cover; }
.korg-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; grid-row: span 2; }
.korg-namn { font-weight: 600; overflow-wrap: anywhere; }
.korg-namn:hover { text-decoration: underline; }
.korg-detalj { font-size: 15px; color: var(--color-muted); }
.korg-radsumma { text-align: right; font-size: 19px; font-weight: 600; white-space: nowrap; }
.korg-tabort { grid-column: 3 / -1; justify-self: end; font-size: 15px; }
.korg-rad .stegare button { width: 42px; height: 42px; }
.korg-rad .stegare output { min-width: 46px; }

.korg-notis { padding: 12px 16px; background: var(--color-warn-bg); border-radius: var(--radie); margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 16px; }

.korg-summering { background: var(--color-tint); border-radius: var(--radie); padding: 24px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.korg-summering h2 { font-size: 24px; }
.korg-summering dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.korg-summering dl > div { display: flex; justify-content: space-between; gap: 16px; }
.korg-summering dd { margin: 0; font-weight: 500; text-align: right; }
.korg-total { border-top: 1px solid var(--color-line); padding-top: 12px; margin-top: 4px; font-size: 20px; }
.korg-total dd { font-weight: 600 !important; }
.korg-liten { font-size: 15px; color: var(--color-muted); margin: 0; }
.korg-tom { padding: 48px 0; }

/* ---------- Dialog ---------- */

.dialog { border: 0; border-radius: 10px; padding: 28px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(22, 33, 31, .3); color: var(--color-dark); }
.dialog::backdrop { background: rgba(22, 33, 31, .55); }
.dialog h2 { margin-bottom: 10px; padding-right: 40px; }
.dialog-stang { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; background: none; font-size: 20px; cursor: pointer; border-radius: var(--radie); }
.dialog-stang:hover { background: var(--color-tint); }
.dialog form { display: grid; gap: 12px; }
.dialog form[hidden] { display: none; }
.dialog label { display: grid; gap: 4px; font-weight: 500; font-size: 15px; }
.dialog input, .dialog textarea { border: 1px solid var(--color-dark); border-radius: var(--radie); padding: 11px 12px; font-size: 17px; font-weight: 400; width: 100%; }
.dialog-fel { margin: 0; padding: 10px 14px; background: #FBEDEB; border-radius: var(--radie); color: #7A1A12; }
.dialog-klart { margin: 0; padding: 16px 18px; background: var(--color-tint); border-radius: var(--radie); font-weight: 500; }

/* ---------- Sidfot ---------- */

.sidfot-epost { overflow-wrap: anywhere; }

/* ---------- WooCommerces sidor (kassa, konto) ---------- */

.woocommerce-info, .woocommerce-message, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radie); background: var(--color-tint); }
.woocommerce-error { background: #FBEDEB; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button { background: var(--color-accent); color: #fff; border-radius: var(--radie); font-weight: 600; }
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: #0a5754; color: #fff; }
.kd-sparning a { color: var(--color-accent); text-decoration: underline; font-weight: 600; }

/* ==========================================================================
   Smalare skärmar
   ========================================================================== */

@media (min-width: 860px) {
	.filter { border: 0; }
	.filter-knapp { display: none; }
	.filter-inre { padding: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 32px; }
	.filtergrupp { grid-column: span 4; }
	.filtergrupp--stl { grid-column: 1 / -1; }
	.filtergrupp--fg { grid-column: span 8; }
	.filter-mer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; }
	.filter-mer .filtergrupp { grid-column: auto; }
}

@media (max-width: 859px) {
	body { font-size: 16px; }
	.sidhuvud-inre { flex-wrap: wrap; gap: 12px 20px; padding-top: 12px; padding-bottom: 12px; }
	.logga img { height: 36px; }
	.sokruta { order: 3; flex-basis: 100%; max-width: none; }
	.sokruta input { height: 46px; }
	.sidhuvud-lankar { gap: 18px; }
	.huvudmeny-inre { overflow-x: auto; scrollbar-width: none; }
	.huvudmeny-inre::-webkit-scrollbar { display: none; }
	.meny { flex-wrap: nowrap; gap: 0 24px; }
	.meny a { white-space: nowrap; }
	.meny .sub-menu { display: none; }
	.meny .menu-item-has-children > a::after { display: none; }
	.meny--genvagar { display: none; }
	.hero::before { background: rgba(250, 248, 244, .84); }
	.kompakt-rum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.kompakt-rumknapp { min-height: 54px; font-size: 16px; gap: 10px; }
	.kompakt-rad { grid-template-columns: minmax(0, 1fr); }
	.kompakt-grupp + .kompakt-grupp { border-left: 0; padding-left: 0; }
	.kompakt-grupp--stil { display: none; }
	.kompakt-fot { flex-direction: column; align-items: stretch; }
	.kompakt-fler { width: 100%; justify-content: center; }
	.kompakt-visa { width: 100%; justify-content: center; }
	.kompakt-sok-text { height: 50px; font-size: 16px; }
	.hero-kort { padding: 16px; }
	.sidtopp--hem .huvudmeny--inline { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
	.sidtopp--hem .huvudmeny--inline .meny a { padding: 6px 0 4px; }
	.sidtopp--hem .sidhuvud-lankar { gap: 6px; }
	/* Fler filter som panel nedifrån */
	.filter--kompakt:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 86svh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 !important; border-radius: 16px 16px 0 0 !important; background: #fff !important; box-shadow: 0 0 0 100vmax rgba(22, 33, 31, .45); }
	.filter--kompakt .filter-inre { padding: 0 16px; }
	.filter--kompakt .ark-huvud { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; margin: 0 -16px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--color-line); font-size: 18px; }
	.ark-stang { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-tint); font-size: 24px; line-height: 1; cursor: pointer; }
	.filter--kompakt .ark-fot { display: block; position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--color-line); }
	.ark-visa { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; }
	html.kd-ark-oppet, html.kd-ark-oppet body { overflow: hidden; }
	.produkt-topp, .produkt-info { grid-template-columns: minmax(0, 1fr); }
	.produkt-info { margin-top: 44px; }
	.korg-layout { grid-template-columns: minmax(0, 1fr); }
	.korg-summering { position: static; }
	.kort-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
	.kort-pris strong { font-size: 19px; }
}

@media (max-width: 560px) {
	.korg-rad { grid-template-columns: 72px minmax(0, 1fr); }
	.korg-bild { width: 72px; height: 72px; grid-row: auto; }
	.korg-info { grid-row: auto; }
	.korg-rad .stegare { grid-column: 1 / -1; justify-self: start; }
	.korg-radsumma { grid-column: 1 / -1; text-align: left; }
	.korg-tabort { grid-column: 1 / -1; justify-self: start; }
	.fargruta { width: 30px; height: 30px; }
	.stegare output { min-width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@media (max-width: 859px) {
	.hero-kort { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
	html.kd-ark-oppet .hero { z-index: 70; }
}

@media (max-width: 480px) {
	.korg-ord { display: none !important; }
	.sidtopp--hem .sidhuvud-inre { flex-wrap: wrap; }
	.sidtopp--hem .sidhuvud-lankar { margin-left: auto; }
}

/* ---------- Plattväljaren: kompakt med visuella prov (0.1.4) ---------- */

.hero-kort { padding: 24px clamp(18px, 2vw, 28px); }
.kompakt-sok { margin-bottom: 16px; }
.kompakt-sok-text { height: 52px; font-size: 17px; }
.kompakt-rubrik { font-size: 16px; margin-bottom: 10px; }
.kompakt-rumknapp { min-height: 50px; font-size: 16px; }
.kompakt-rum { padding-bottom: 16px; border-bottom: 1px solid var(--color-line); margin-bottom: 16px; }
.kompakt-tips { margin: 0 0 14px; }
.kompakt-rad { padding: 0 0 16px; align-items: start; }
.kompakt-grupp { gap: 8px; }
.kompakt-etikett { font-size: 15px; }
.kompakt-fot { padding-top: 0; border-top: 0; }
.kompakt-fler, .kompakt-visa { min-height: 48px; }

/* Ett prov: liten platta med etikett under. Hela knappen är klickytan (minst 44 px). */
.kompakt-prov {
	display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
	min-width: 56px; min-height: 44px; padding: 4px 3px;
	background: none; border: 0; border-radius: 8px; cursor: pointer;
	font-size: 13.5px; color: var(--color-muted);
}
.kompakt-prov:hover { color: var(--color-dark); }
.kompakt-prov .prov, .kompakt-prov .prov-ram { transition: box-shadow .15s, border-color .15s; }
.kompakt-prov.ar-vald { color: var(--color-accent); }
.kompakt-prov.ar-vald .prov, .kompakt-prov.ar-vald .prov-ram { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.kompakt-prov.ar-vald .prov-ram { background: #E3F3F1; }
.kompakt-prov.ar-tips .prov { box-shadow: 0 0 0 2px var(--color-accent-2); }
.kompakt-prov.ar-tips .prov-namn::after { content: ' · tips'; color: var(--color-accent); }
.kompakt-prov:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Formatprov: plattans form i skala inne i en ljus ruta. */
.prov-ram { display: flex; align-items: center; justify-content: center; width: 64px; height: 38px; border: 1px solid var(--color-line); border-radius: 6px; background: #fff; }
.prov-format { display: block; border: 1.5px solid #5E6664; border-radius: 1.5px; background: #FAFAF8; }
.kompakt-prov.ar-vald .prov-format { border-color: var(--color-accent); background: #fff; }

/* Material- och ytprov: bara CSS, inga bilder. */
.prov { display: block; width: 38px; height: 38px; border: 1px solid rgba(22, 33, 31, .16); border-radius: 5px; background-color: #E6E3DD; }
.prov--sten {
	background-color: #DCD6CB;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(120, 108, 92, .22) 0 1px, transparent 1.5px),
		radial-gradient(circle at 70% 60%, rgba(120, 108, 92, .2) 0 1px, transparent 1.5px),
		radial-gradient(circle at 45% 80%, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px),
		radial-gradient(circle at 85% 20%, rgba(90, 82, 70, .25) 0 1.2px, transparent 1.8px);
	background-size: 9px 9px, 11px 11px, 7px 7px, 13px 13px;
}
.prov--betong {
	background-color: #C9C9C5;
	background-image:
		radial-gradient(ellipse at 25% 35%, rgba(255, 255, 255, .45), transparent 55%),
		radial-gradient(ellipse at 75% 70%, rgba(110, 112, 110, .25), transparent 60%),
		radial-gradient(circle at 60% 25%, rgba(90, 92, 90, .3) 0 .8px, transparent 1.2px);
	background-size: 100% 100%, 100% 100%, 8px 8px;
}
.prov--marmor {
	background-color: #F3F2EF;
	background-image:
		linear-gradient(118deg, transparent 38%, rgba(140, 142, 140, .45) 40%, transparent 42.5%),
		linear-gradient(140deg, transparent 62%, rgba(150, 150, 148, .3) 63.5%, transparent 65%),
		linear-gradient(100deg, transparent 18%, rgba(160, 160, 158, .25) 19%, transparent 20.5%);
}
.prov--matt { background: #DEDBD5; }
.prov--blank { background: linear-gradient(135deg, #E9E7E3 0%, #E9E7E3 34%, rgba(255, 255, 255, .95) 46%, #E9E7E3 58%, #DFDCD7 100%); }
.prov--strukturerad {
	background-color: #DCD9D3;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(90, 88, 84, .12) 2px 3px, transparent 3px 4px);
}

/* Färgerna: etiketten alltid under cirkeln, samma rytm som proven. */
.kompakt-farg { min-height: 44px; gap: 5px; }
.kompakt-prick { width: 38px; height: 38px; }
.kompakt-grupp--farg .kompakt-val, .kompakt-grupp--stl .kompakt-val, .kompakt-grupp--stil .kompakt-val, .kompakt-grupp--yta .kompakt-val { gap: 6px; flex-wrap: nowrap; }

@media (max-width: 859px) {
	.hero-kort { padding: 16px; }
	.kompakt-rad { gap: 14px; }
	.kompakt-grupp--farg .kompakt-val, .kompakt-grupp--stl .kompakt-val, .kompakt-grupp--stil .kompakt-val, .kompakt-grupp--yta .kompakt-val { flex-wrap: wrap; gap: 8px 10px; }
	.kompakt-prov { min-width: 60px; }
	.kompakt-fot { flex-direction: column; align-items: stretch; }
}

/* ---------- Mjuk visning (0.1.5) ----------
   Allt här gäller bara när <html> har kd-anim, som sätts i <head> när
   webbläsaren klarar det och besökaren inte valt minskad rörelse. */

/* Skelett: ett lugnt skimmer över bildytan tills bilden laddats. */
.laddar { background: #EDF1F0; }
.laddar::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 70%);
	background-size: 220% 100%; animation: kd-skimmer 1.4s ease-in-out infinite;
}
.laddar img { position: relative; z-index: 1; }
@keyframes kd-skimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.kort--skelett { pointer-events: none; }
.skelett-rad { position: relative; overflow: hidden; display: block; height: 14px; width: 70%; border-radius: 4px; background: #EDF1F0; }
.skelett-rad--kort { width: 40%; }

/* Bilder tonas fram när de laddats. */
.kd-anim img.kd-tona { opacity: 0; transition: opacity .45s ease; }
.kd-anim img.kd-tona.ar-laddad { opacity: 1; }

/* Block glider fram när de rullas in. */
.kd-anim .kd-visa { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.kd-anim .kd-visa.ar-synlig { opacity: 1; transform: none; }

/* Mjuk start överst på sidan. */
.kd-anim .hero-text, .kd-anim .hero-kort, .kd-anim .sidhero-inre { animation: kd-upp .6s cubic-bezier(.2, .7, .2, 1) both; }
.kd-anim .hero-kort { animation-delay: .08s; }
@keyframes kd-upp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

body.pe-editing .kd-visa, body.pe-editing img.kd-tona { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	.laddar::before { animation: none; }
	.kd-visa, img.kd-tona { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
	.kd-visa, img.kd-tona { opacity: 1 !important; transform: none !important; }
}
.kort-bild .bricka { z-index: 2; }

/* ---------- Mjukare hover överallt (0.1.6) ---------- */

a, button, .knapp, .val, .kompakt-rumknapp, .kompakt-prov, .sok-chip, select, input {
	transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease;
}
.meny a { transition: color .25s ease; }
.meny .sub-menu { transition: opacity .25s ease, transform .25s ease, visibility .25s; }

/* Produktbilder och bildlänkar: en lugn zoom inne i ramen. */
.kort-bild img, a img, .sidtext-bilder img { transition: opacity .45s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.kort-lank:hover .kort-bild img, a.kort:hover .kort-bild img, a:hover > img:not(.logga img):not(.sidfot-logga) { transform: scale(1.045); }
.kort-lank:hover .kort-bild, a.kort:hover .kort-bild { box-shadow: 0 10px 26px rgba(22, 33, 31, .10); }
.kort-bild { transition: box-shadow .4s ease; }
.knapp:hover { transform: translateY(-1px); }
.kompakt-rumknapp:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22, 33, 31, .07); }

/* Tydligare inglidning vid skroll. */
.kd-anim .kd-visa { transform: translateY(22px); transition-duration: .7s; }

@media (prefers-reduced-motion: reduce) {
	a, button, .knapp, img { transition: none !important; transform: none !important; }
}

/* Färgbyte i ett kort: ny bild tonas fram över den gamla (0.1.7). */
.kort-bild-under { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kort-bild.byter img:not(.kort-bild-under) { position: relative; z-index: 1; opacity: 0 !important; transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.kort-bild.byter.bytt img:not(.kort-bild-under) { opacity: 1 !important; }

/* Nya träffar efter ett filterval tonas fram i en kort våg (0.1.8). */
.kd-anim .kort-in { animation: kd-kort-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes kd-kort-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kd-anim .sok-antal, .kd-anim .kompakt-visa span { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .kort-in { animation: none !important; } }

/* ---------- Filterkortet laddas fram (0.1.9) ---------- */

/* Kortet glider upp och växer en aning in på plats. */
.kd-anim .hero-kort { animation: kd-kort-upp .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes kd-kort-upp { from { opacity: 0; transform: translateY(18px) scale(.985); box-shadow: 0 0 0 rgba(22, 33, 31, 0); } to { opacity: 1; transform: none; } }

/* Medan sortimentet hämtas: ett skelett i kortets höjd i stället för en textrad, så att kortet inte hoppar. */
.hero-kort .sok-laddar {
	position: relative; overflow: hidden; min-height: 351px; margin: 0; padding: 0;
	border-radius: 10px; color: transparent; user-select: none;
	background:
		linear-gradient(#EDF1F0, #EDF1F0) 0 0 / 100% 52px no-repeat,
		linear-gradient(#EDF1F0, #EDF1F0) 0 86px / 100% 50px no-repeat,
		linear-gradient(#EDF1F0, #EDF1F0) 0 176px / 100% 96px no-repeat,
		linear-gradient(#EDF1F0, #EDF1F0) 0 303px / 150px 48px no-repeat,
		linear-gradient(#EDF1F0, #EDF1F0) 100% 303px / 220px 48px no-repeat;
}
.hero-kort .sok-laddar::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 70%);
	background-size: 220% 100%; animation: kd-skimmer 1.4s ease-in-out infinite;
}
@media (max-width: 859px) { .hero-kort .sok-laddar { min-height: 693px; } }

/* När kortet byggts kommer delarna fram en i taget: sök, rum, val, knappar. */
.kd-anim .kompakt > * { animation: kd-upp .5s cubic-bezier(.2, .7, .2, 1) both; }
.kd-anim .kompakt > :nth-child(1) { animation-delay: 0ms; }
.kd-anim .kompakt > :nth-child(2) { animation-delay: 60ms; }
.kd-anim .kompakt > :nth-child(3) { animation-delay: 110ms; }
.kd-anim .kompakt > :nth-child(4) { animation-delay: 160ms; }
.kd-anim .kompakt > :nth-child(5) { animation-delay: 210ms; }
.kd-anim .kompakt > :nth-child(n+6) { animation-delay: 260ms; }
.kd-anim .kompakt-rad .kompakt-grupp { animation: kd-upp .5s cubic-bezier(.2, .7, .2, 1) both; }
.kd-anim .kompakt-rad .kompakt-grupp:nth-child(2) { animation-delay: 220ms; }
.kd-anim .kompakt-rad .kompakt-grupp:nth-child(3) { animation-delay: 270ms; }
.kd-anim .kompakt-rad .kompakt-grupp:nth-child(4) { animation-delay: 320ms; }

/* "Fler filter" öppnas mjukt, på mobilen glider panelen upp nedifrån. */
.kd-anim .filter--kompakt:not([hidden]) .filter-inre { animation: kd-upp .35s cubic-bezier(.2, .7, .2, 1) both; }
@media (max-width: 859px) {
	.kd-anim .filter--kompakt:not([hidden]) { animation: kd-ark-upp .38s cubic-bezier(.2, .7, .2, 1) both; }
	.kd-anim .filter--kompakt:not([hidden]) .filter-inre { animation: none; }
}
@keyframes kd-ark-upp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.hero-kort, .kompakt > *, .kompakt-grupp, .filter--kompakt, .filter-inre { animation: none !important; }
	.hero-kort .sok-laddar::after { animation: none; }
}

/* ---------- Innehållssidor (0.2.0) ---------- */
.brodtext .sidbild { margin: 22px 0; }
.brodtext .sidbild img { width: 100%; height: auto; border-radius: 8px; }
.brodtext .sidgalleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; }
.brodtext .sidgalleri .sidbild { margin: 0; }
.brodtext .sidgalleri img { aspect-ratio: 4 / 3; object-fit: cover; }
.brodtext p > .knapp { margin-right: 8px; }
.brodtext p:has(> .knapp) { display: inline-block; margin: 0 8px 12px 0; }
.brodtext h2 { margin-top: 1.6em; }
.brodtext h2:first-child { margin-top: 0; }
.brodtext a.knapp { text-decoration: none; color: var(--color-dark); }

/* ---------- Innehållssidor: bred layout, bild till höger, bildvisare (0.2.1) ---------- */

.sidtext .brodtext { max-width: none; }
.sidtext:not(.sidtext--bilder) .brodtext { max-width: 52em; }
.sidtext--bilder .sidtext-inre { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.sidtext-bilder { position: sticky; top: 110px; }
.sidtext-bilder--en { grid-template-columns: 1fr; }
.sidtext-bilder--en img:first-child { aspect-ratio: 4 / 3.4; }

.sidgalleri-sektion { padding: 0 0 clamp(36px, 5vw, 72px); }
.sidgalleri-sektion .sidgalleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; }
.sidgalleri-sektion .sidbild { margin: 0; }
.sidgalleri-sektion img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* Bilder som går att förstora: lugn zoom och skugga vid hovring. */
img.kan-forstoras { cursor: zoom-in; transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, opacity .45s ease; }
.sidbild, .sidtext-bilder { overflow: visible; }
.sidbild { overflow: hidden; border-radius: 8px; }
img.kan-forstoras:hover { transform: scale(1.03); box-shadow: 0 14px 34px rgba(22, 33, 31, .16); }
.sidbild img.kan-forstoras:hover { transform: scale(1.05); box-shadow: none; }
img.kan-forstoras:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* Bildvisaren */
.visare { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 56px 72px; background: rgba(16, 22, 21, .9); opacity: 0; transition: opacity .25s ease; }
.visare.ar-oppen { opacity: 1; }
.visare[hidden] { display: none !important; }
.visare-ram { margin: 0; max-width: 100%; max-height: 100%; display: flex; }
.visare-bild { max-width: 100%; max-height: calc(100vh - 112px); object-fit: contain; border-radius: 6px; opacity: 0; transform: scale(.98); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.visare-bild.ar-laddad { opacity: 1; transform: none; }
.visare-pil, .visare-stang { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s ease; }
.visare-pil:hover, .visare-stang:hover { background: rgba(255, 255, 255, .28); }
.visare-pil--bak { left: 16px; top: 50%; transform: translateY(-50%); }
.visare-pil--fram { right: 16px; top: 50%; transform: translateY(-50%); }
.visare-stang { top: 14px; right: 16px; }
.visare-antal { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 14px; }
html.visare-oppen, html.visare-oppen body { overflow: hidden; }

@media (max-width: 859px) {
	.sidtext-bilder { position: static; }
	.visare { padding: 56px 8px; }
	.visare-pil { top: auto; bottom: 8px; transform: none; }
	.visare-pil--bak { left: 12px; }
	.visare-pil--fram { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	img.kan-forstoras, .visare, .visare-bild { transition: none; }
	img.kan-forstoras:hover { transform: none; }
}

/* Plattan på bilden (0.2.2) */
.sidbild[data-kd-serie] { position: relative; }
.sidbild figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; pointer-events: none; }
.sidbild-lank { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--color-dark) !important; text-decoration: none !important; font-size: 14px; box-shadow: 0 4px 14px rgba(22, 33, 31, .14); transition: background .25s ease, transform .25s ease; }
.sidbild-lank:hover { background: #fff; transform: translateY(-1px); }
.sidbild-etikett { display: none; }
.sidbild-namn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidbild-lank .ikon-hallare { color: var(--color-accent); flex: none; }
.visare-text { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); }
.visare-text[hidden] { display: none; }
.visare-lank { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--color-dark); text-decoration: none; font-size: 15px; white-space: nowrap; }
.visare-lank:hover { background: #E3F3F1; }
.visare-lank .ikon-hallare { color: var(--color-accent); }
@media (max-width: 859px) { .visare-text { bottom: 70px; } .sidbild figcaption { left: 8px; right: 8px; bottom: 8px; } .sidbild-lank { font-size: 13px; } }
.sidtext-figur .sidbild { margin: 0; } .sidtext-figur img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 8px; }

/* Fler storlekar: vanliga som knappar, resten i en rullista (0.2.3). */
.stl-fler { flex-basis: 100%; display: grid; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--color-line); }
.stl-valj-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.stl-valj { min-height: 44px; min-width: 240px; padding: 0 36px 0 14px; border: 1px solid var(--color-line); border-radius: 6px; background: #fff; font: inherit; font-size: 15px; color: var(--color-dark); cursor: pointer; }
.stl-valj:hover, .stl-valj:focus { border-color: var(--color-dark); }
@media (max-width: 560px) { .stl-valj { min-width: 0; width: 100%; } }

/* "+ Fler" i slutet av färg, storlek och stil (0.2.4). */
.kompakt-mer { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 46px; min-height: 44px; padding: 4px 2px; background: none; border: 0; cursor: pointer; font-size: 13.5px; color: var(--color-muted); }
.kompakt-mer[hidden] { display: none; }
.kompakt-mer-plus { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px dashed #9AA5A3; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--color-dark); transition: border-color .25s ease, background-color .25s ease, color .25s ease; }
.kompakt-grupp--stl .kompakt-mer-plus, .kompakt-grupp--stil .kompakt-mer-plus { border-radius: 6px; }
.kompakt-grupp--stl .kompakt-mer-plus { width: 44px; }
.kompakt-mer:hover { color: var(--color-dark); }
.kompakt-mer:hover .kompakt-mer-plus { border-style: solid; border-color: var(--color-accent); background: #E3F3F1; color: var(--color-accent); }
.kompakt-mer.ar-vald { color: var(--color-accent); }
.kompakt-mer.ar-vald .kompakt-mer-plus { border-style: solid; border-color: var(--color-accent); background: #E3F3F1; color: var(--color-accent); }
.kompakt-mer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; }
.kompakt-prov { min-width: 52px; }
.kompakt-farg { min-width: 46px; }

/* Gruppen man hoppade till blinkar till en gång. */
.filtergrupp.ar-markerad { animation: kd-markera 1.6s ease; border-radius: 8px; }
@keyframes kd-markera { 0%, 40% { box-shadow: 0 0 0 6px #E3F3F1; background: #E3F3F1; } 100% { box-shadow: 0 0 0 6px rgba(227, 243, 241, 0); background: transparent; } }
@media (prefers-reduced-motion: reduce) { .filtergrupp.ar-markerad { animation: none; } }
@media (min-width: 860px) { .filter--kompakt .filtergrupp--uts { grid-column: 1 / -1; } }

/* Utfällning i kortet: fler färger, storlekar eller stilar direkt under de vanligaste (0.2.5). */
.kompakt-utfall { margin: -4px 0 18px; padding: 14px 16px 16px; border: 1px solid var(--color-line); border-radius: 10px; background: #FAFBFB; }
.kompakt-utfall[hidden] { display: none; }
.kompakt-utfall.ar-ny { animation: kd-utfall .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes kd-utfall { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kompakt-utfall-huvud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kompakt-utfall-rubrik { font-size: 15px; }
.kompakt-utfall-stang { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--color-tint); font-size: 20px; line-height: 1; cursor: pointer; }
.kompakt-utfall-stang:hover { background: #dcebe9; }
.kompakt-utfall .filtergrupp { margin: 0; padding: 0; border: 0; }
.kompakt-utfall .filtergrupp > legend { display: none; }
.kompakt-utfall .val--fler { display: none; }
.kompakt-utfall .stl-fler { margin-top: 10px; }
.kompakt-mer[aria-expanded="true"] .kompakt-mer-plus { border-style: solid; border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .kompakt-utfall.ar-ny { animation: none; } }

/* Räcker lagret till din yta? (0.2.6) */
.kort-lager--del { color: #7A4B00; }
.kort-lager--del::before { background: #fff; border: 2px solid #D99A1E; }
.sok-racker { white-space: nowrap; font-size: 15px; }
.sok-racker.ar-av { opacity: .5; cursor: default; }
.sok-racker.ar-av input { cursor: default; }


/* ==========================================================================
   Sidfot (0.2.7): serviceband, fyra kolumner, populära sökningar, bottenrad
   ========================================================================== */

.service { background: #fff; border-top: 1px solid var(--color-line); }
.service-inre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-block { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 24px 32px; text-align: center; color: var(--color-dark); text-decoration: none; transition: background-color .25s ease; }
.service-block + .service-block { border-left: 1px solid var(--color-line); }
.service-block:hover { background: #F6FAF9; }
.service-block strong { font-size: 18px; font-weight: 600; }
.service-block span:last-child { font-size: 15px; color: var(--color-muted); }
.service-ikon { display: inline-flex; margin-bottom: 6px; color: var(--color-accent); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.service-ikon svg { stroke-width: 1.3; }
.service-block:hover .service-ikon { transform: translateY(-2px); }

.sidfot {
	position: relative; overflow: hidden; color: rgba(255, 255, 255, .86); background-color: #10201E;
	/* Ett ton-i-ton-plattmönster längst ut till höger, 6 % opacitet. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M210 10l100 100-100 100-100-100z'/%3E%3Cpath d='M310 110l100 100-100 100-100-100z'/%3E%3Cpath d='M210 210l100 100-100 100-100-100z'/%3E%3Cpath d='M110 110l100 100-100 100L10 210z'/%3E%3Cpath d='M360 -40l100 100-100 100-100-100z'/%3E%3Cpath d='M410 160l100 100-100 100-100-100z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right -60px top 20px;
}
.sidfot a { color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .2s ease; }
.sidfot a:hover { color: #fff; }
.sidfot-inre { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; padding-top: 56px; padding-bottom: 40px; }
.sidfot-kol { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 32px; }
.sidfot-kol:first-child { padding-left: 0; }
.sidfot-kol + .sidfot-kol { border-left: 1px solid rgba(255, 255, 255, .12); }
.sidfot-logga { height: 40px; width: auto; }
.sidfot-logga-lank { align-self: flex-start; margin-bottom: 8px; }
.sidfot-slogan { margin: 0 0 10px; font-size: 17px; color: #fff; }
.sidfot-rad { display: flex; align-items: center; gap: 10px; margin: 0; }
.sidfot-rad svg, .sidfot-lista svg, .sidfot-knapp svg { color: var(--color-accent-2); flex: none; }
.sidfot-rubrik { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 0; }
.sidfot-text { margin: 0; }
.sidfot-knapp { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 46px; margin-top: 10px; padding: 0 20px; border: 1.5px solid var(--color-accent-2); border-radius: 6px; color: #fff !important; font-weight: 500; transition: background-color .25s ease; }
.sidfot-knapp:hover { background: rgba(25, 163, 155, .16); }
.sidfot-lista, .sidfot-meny { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sidfot-lista a, .sidfot-meny a { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.sidfot-lista a span, .sidfot-meny a span { min-width: 0; overflow-wrap: anywhere; }
.sidfot-telefon { color: var(--color-accent-2) !important; font-size: 18px; font-weight: 600; }
.sidfot-telefon:hover { color: #5fd3cb !important; }
.sidfot-meny a { justify-content: space-between; }
.sidfot-meny svg { opacity: .55; transition: transform .25s ease, opacity .25s ease; }
.sidfot-meny a:hover svg { opacity: 1; transform: translateX(3px); }

.sidfot-sok { padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sidfot-sok summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: default; }
.sidfot-sok summary::-webkit-details-marker { display: none; }
.sidfot-sok summary > svg, .sidfot-sok summary .ikon-hallare { display: none; }
.sidfot-sok .sidfot-rubrik { margin: 0 0 10px; font-size: 15px; }
.sidfot-sok-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.sidfot-sok-lista li { display: flex; align-items: center; }
.sidfot-sok-lista li + li::before { content: ''; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; background: var(--color-accent-2); }
.sidfot-sok-lista a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: rgba(255, 255, 255, .72); }
.sidfot-sok-lista a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.sidfot-botten { background: #0B1716; font-size: 14px; color: rgba(255, 255, 255, .68); }
.sidfot-botten-inre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 60px; }
.sidfot-botten p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.sidfot-cookie { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sidfot-cookie:hover { color: #fff; }
.sidfot-trygg { gap: 8px !important; }
.sidfot-trygg svg { color: var(--color-accent-2); }
.sidfot :focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 1099px) {
	.sidfot-inre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.sidfot-kol:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 859px) {
	.service-inre { grid-template-columns: minmax(0, 1fr); }
	.service-block { flex-direction: row; text-align: left; align-items: center; gap: 4px 16px; padding: 18px 0; display: grid; grid-template-columns: auto 1fr; }
	.service-block .service-ikon { grid-row: span 2; margin: 0; }
	.service-block + .service-block { border-left: 0; border-top: 1px solid var(--color-line); }
	.service-block strong { font-size: 16px; }
	.sidfot { background-position: right -180px top 0; }
	.sidfot-inre { grid-template-columns: minmax(0, 1fr); padding-top: 40px; row-gap: 0; }
	.sidfot-kol { padding: 22px 0 !important; border-left: 0 !important; }
	.sidfot-kol + .sidfot-kol { border-top: 1px solid rgba(255, 255, 255, .12); }
	.sidfot-kol:first-child { padding-top: 0 !important; }
	.sidfot-sok { padding: 0; }
	.sidfot-sok summary { min-height: 56px; cursor: pointer; }
	.sidfot-sok summary .sidfot-rubrik { margin: 0; }
	.sidfot-sok summary > svg, .sidfot-sok summary .ikon-hallare { display: inline-flex; color: var(--color-accent-2); transition: transform .25s ease; }
	.sidfot-sok[open] summary > svg, .sidfot-sok[open] summary .ikon-hallare { transform: rotate(180deg); }
	.sidfot-sok-lista { flex-direction: column; align-items: stretch; padding-bottom: 14px; }
	.sidfot-sok-lista li + li::before { display: none; }
	.sidfot-sok-lista a { width: 100%; font-size: 15px; }
	.sidfot-botten-inre { flex-direction: column; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Produktkort, förenklade (0.2.8) ---------- */

.kort-lista { gap: 22px 18px; align-items: stretch; }
.kort {
	position: relative; display: flex; flex-direction: column; gap: 0; height: 100%;
	padding: 12px 12px 14px; background: #fff; border: 1px solid #E7ECEB; border-radius: 10px;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.kort:hover { border-color: #D5DEDC; box-shadow: 0 8px 24px rgba(22, 33, 31, .06); }
.kort-lank { gap: 4px; flex: 1 1 auto; }
.kort-bild { margin-bottom: 12px; border-radius: 6px; }
.kort-lank:hover .kort-bild, a.kort:hover .kort-bild { box-shadow: none; }
.kort-marke { font-size: 13.5px; }
.kort-namn {
	font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.kort-egenskaper { font-size: 14px; color: var(--color-muted); min-height: 1.4em; }
.kort-pris { margin-top: 6px; }
.kort-pris strong { font-size: 20px; }
.kort-lager { margin-top: 2px; }
.kort-lager--fa::before { background: #E08A1E; }

.bricka--utgar { background: rgba(255, 255, 255, .94); color: var(--color-dark); font-weight: 500; font-size: 13px; left: 10px; top: 10px; border-radius: 999px; padding: 5px 11px; box-shadow: 0 2px 8px rgba(22, 33, 31, .12); }

/* Favorit på bilden */
.kort-favorit {
	position: absolute; top: 20px; right: 20px; z-index: 3;
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--color-dark); cursor: pointer;
	box-shadow: 0 2px 10px rgba(22, 33, 31, .12); transition: transform .2s ease, color .2s ease;
}
.kort-favorit:hover { transform: scale(1.06); color: var(--color-accent); }
.kort-favorit.ar-vald { color: var(--color-accent); }
.kort-favorit.ar-vald path { fill: currentColor; }

/* Format: en tunn avdelare och en kort rad */
.kort-fot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #E7ECEB; font-size: 14px; color: var(--color-muted); }
.kort-fot:empty { visibility: hidden; }
.kort-format { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kort-format-lank { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-dark); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.kort-format-lank:hover { color: var(--color-accent); }
.kort-format-knapp { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: 6px; color: var(--color-dark); white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.kort-format-knapp:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Högst fyra prover, sedan "+N" */
.kort-farger { min-height: 52px; gap: 8px; padding-top: 4px; flex-wrap: nowrap; }
.fargruta { width: 44px; height: 44px; border-radius: 6px; flex: none; }
.fargruta-fler { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--color-muted); text-decoration: none; }
.fargruta-fler:hover { color: var(--color-accent); }

@media (max-width: 859px) {
	.kort { padding: 8px 8px 10px; }
	.kort-namn { font-size: 15.5px; }
	.kort-pris strong { font-size: 18px; }
	.kort-favorit { top: 14px; right: 14px; width: 40px; height: 40px; }
	.kort-fot { flex-wrap: wrap; min-height: 44px; }
	.kort-farger { gap: 6px; }
	.fargruta { width: 34px; height: 34px; }
	.fargruta-fler { min-width: 34px; }
}
@media (max-width: 859px) {
	.kort-farger { flex-wrap: wrap; min-height: 0; }
	.kort-fot { font-size: 13px; }
	.kort-format { white-space: normal; }
}
.kort-farger { gap: 6px; }
.fargruta { width: 38px; height: 38px; }
.fargruta-fler { min-width: 34px; }
@media (max-width: 859px) {
	.kort-farger { flex-wrap: nowrap; }
	.fargruta { width: 36px; height: 36px; }
	.fargruta-fler { min-width: 30px; }
}

/* Tätare rader i korten: namn och egenskaper sitter ihop, ledig höjd hamnar ovanför formatraden (0.2.9). */
.kort-lank { gap: 2px; }
.kort-bild { margin-bottom: 10px; }
.kort-namn { min-height: 0; line-height: 1.25; }
.kort-egenskaper { min-height: 0; margin-top: 1px; }
.kort-pris { margin-top: 8px; }
.kort-lager { margin-top: 0; }
.kort-fot { margin-top: auto; min-height: 42px; padding-top: 8px; }
.kort-lank { margin-bottom: 12px; }
.kort-farger { min-height: 46px; padding-top: 2px; }

/* Formatväljare på produktsidan: storlek, yta och färg i serien (0.3.0) */
.formatval { display: grid; gap: 16px; margin: 4px 0 22px; scroll-margin-top: 120px; }
.formatval-grupp .etikett { display: block; margin-bottom: 8px; }
.formatval-antal { font-weight: 400; color: var(--color-muted); }
.formatval-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.formatval-val { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 14px; border: 1px solid var(--color-line); border-radius: 8px; background: #fff; color: var(--color-dark); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.formatval-val:hover { border-color: var(--color-dark); }
.formatval-val.ar-vald { border-color: var(--color-accent); background: #E3F3F1; box-shadow: inset 0 0 0 1px var(--color-accent); }
.formatval-namn { font-weight: 600; font-size: 15px; line-height: 1.2; }
.formatval-pris { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted); }
.formatval-prick { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.formatval-prick--best { background: #fff; border: 1.5px solid var(--color-dark); }
.formatval-prick--slut { background: var(--color-sale); }
.formatval-grupp--farg .formatval-val { flex-direction: row; align-items: center; gap: 10px; }
.formatval-grupp--farg .formatval-val > span:not(.formatval-pris) { display: block; }
.formatval-grupp--farg img { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }

/* Färgnamn på proverna, alla färger i kortet, byte på produktsidan (0.3.2) */
.kort-farger { position: relative; }
.kort-farger.ar-alla { flex-wrap: wrap; }
.fargruta { position: relative; }
.fargruta[data-namn]:hover::after, .fargruta[data-namn]:focus-visible::after {
	content: attr(data-namn); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5;
	padding: 5px 9px; border-radius: 6px; background: var(--color-dark); color: #fff; font-size: 12.5px; white-space: nowrap; pointer-events: none;
}
.fargruta-fler { border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; border-radius: 6px; }
.fargruta-fler:hover { background: var(--color-tint); }
.fargruta-fler--farre { padding: 0 8px; }

#kd-produkt.ar-byter .produkt-topp { opacity: .55; transition: opacity .2s ease; pointer-events: none; }
#kd-produkt.ar-ny .produkt-topp { animation: kd-produkt-in .35s ease both; }
@keyframes kd-produkt-in { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #kd-produkt.ar-ny .produkt-topp { animation: none; } }

/* ---------- Startsidan: Kampanj, Nyheter, Inspiration (0.3.3) ---------- */

.hylla, .inspiration { padding: clamp(36px, 4vw, 56px) 0; border-top: 1px solid var(--color-line); }
.hylla--kampanj { background: #FAF7F2; border-top: 0; }
.hylla[hidden] { display: none; }
.hylla-huvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.hylla-huvud h2 { margin: 0 0 4px; font-size: clamp(24px, 2.4vw, 32px); }
.hylla-ingress { margin: 0; color: var(--color-muted); }
.hylla-knappar { display: flex; gap: 8px; }
.hylla-pil { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-line); border-radius: 50%; background: #fff; color: var(--color-dark); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.hylla-pil:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hylla-pil[data-kd-hylla-pil="-1"] svg { transform: rotate(180deg); }

.kort-lista--hylla {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); grid-template-columns: none;
	gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px;
}
.kort-lista--hylla::-webkit-scrollbar { display: none; }
.kort-lista--hylla > .kort { scroll-snap-align: start; }

.inspiration-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inspiration-kort { display: flex; flex-direction: column; gap: 4px; color: var(--color-dark); text-decoration: none; }
.inspiration-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; margin-bottom: 10px; background: var(--color-tint); }
.inspiration-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.inspiration-kort:hover .inspiration-bild img { transform: scale(1.04); }
.inspiration-kort strong { font-size: 19px; }
.inspiration-kort > span:not(.inspiration-bild):not(.inspiration-lank) { color: var(--color-muted); }
.inspiration-lank { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--color-accent); font-weight: 500; }
.inspiration-kort:hover .inspiration-lank svg { transform: translateX(3px); }
.inspiration-lank svg { transition: transform .2s ease; }

@media (max-width: 1099px) { .kort-lista--hylla { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 859px) {
	.kort-lista--hylla { grid-auto-columns: 72%; gap: 12px; margin-right: calc(-1 * var(--kant)); padding-right: var(--kant); }
	.hylla-knappar { display: none; }
	.inspiration-lista { grid-template-columns: minmax(0, 1fr); }
}

/* Varumärken som loggor (0.3.4) */
.varumarken { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 22px 0 28px; }
.brodtext a.varumarke, .varumarke {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 96px; padding: 16px 14px; border: 1px solid var(--color-line); border-radius: 10px; background: #fff;
	color: var(--color-dark); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.varumarke:hover { border-color: var(--color-accent); box-shadow: 0 8px 22px rgba(22, 33, 31, .08); transform: translateY(-2px); }
.varumarke img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .25s ease, opacity .25s ease; }
.varumarke:hover img { filter: none; opacity: 1; }
.varumarke-namn { font-size: 19px; font-weight: 600; letter-spacing: .02em; }
.varumarke-lank { font-size: 13px; color: var(--color-muted); }
.varumarke:hover .varumarke-lank { color: var(--color-accent); }
.sidtext-bilder:not(.sidtext-bilder--en) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sidtext-bilder:not(.sidtext-bilder--en) img { grid-column: span 3; aspect-ratio: 4 / 3; }
.sidtext-bilder:not(.sidtext-bilder--en) img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.sidtext-bilder img:first-child:nth-last-child(4) ~ img { grid-column: span 2; aspect-ratio: 1; }
.sidtext-bilder img:first-child:nth-last-child(2) ~ img { grid-column: 1 / -1; }
@media (max-width: 859px) {
	.sidtext--bilder .sidtext-inre { grid-template-columns: minmax(0, 1fr); }
	.varumarken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.varumarke { min-height: 80px; }
}

/* Utvald serie på ortsidorna (0.3.5) */
.spotlight { padding: clamp(36px, 5vw, 64px) 0; background: #F6F3EE; }
.spotlight-inre { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.spotlight-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spotlight-bild { margin: 0; overflow: hidden; border-radius: 10px; }
.spotlight-bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.spotlight-bild:first-child { grid-column: 1 / -1; }
.spotlight-bild:first-child img { aspect-ratio: 16 / 9; }
.spotlight-etikett { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.spotlight-text h2 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 40px); }
.spotlight-text ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 8px; }
.spotlight-text li { position: relative; padding-left: 26px; }
.spotlight-text li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); }
.spotlight-text .knapp { text-decoration: none; color: #fff; }
@media (max-width: 859px) { .spotlight-inre { grid-template-columns: minmax(0, 1fr); } }
.brodtext a.knapp:not(.knapp--kant), .spotlight-text.brodtext a.knapp { color: #fff; text-decoration: none; }

/* Bläddra bland färgerna i en utvald serie (0.3.6) */
.spotlight-farger { margin: 6px 0 22px; }
.serie-farger-rubrik { display: block; margin-bottom: 10px; font-size: 14px; color: var(--color-muted); }
.serie-farger { display: flex; flex-wrap: wrap; gap: 10px; }
.serie-farg { display: grid; grid-template-columns: 52px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 64px; padding: 6px 14px 6px 6px; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; text-align: left; font: inherit; color: var(--color-dark); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.serie-farg:hover { border-color: var(--color-dark); }
.serie-farg.ar-vald { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); background: #F2FAF9; }
.serie-farg-bild { grid-row: span 2; width: 52px; height: 52px; border-radius: 6px; background: var(--color-tint) center / cover; }
.serie-farg-namn { font-weight: 600; font-size: 15px; align-self: end; }
.serie-farg-pris { font-size: 13px; color: var(--color-muted); align-self: start; }
.spotlight-bild.visar-platta img { object-fit: cover; }
.serie-farg-bild.ar-tom { background: repeating-linear-gradient(45deg, #EEF2F1 0 6px, #E4EAE8 6px 12px); }

/* Favoriter (0.3.8) */
.favlank.har-favoriter svg path { fill: var(--color-accent); stroke: var(--color-accent); }
.favrad { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin: 0 0 16px; padding: 16px 18px; border-radius: 10px; background: #F2FAF9; border: 1px solid #CFE6E3; }
.favrad-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.favrad-text svg { color: var(--color-accent); }
.favrad-text strong { font-size: 18px; }
.favrad-text span:last-child { color: var(--color-muted); }
.favrad-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.favrad-knappar .knapp { min-height: 44px; }
.favrad-falt { flex-basis: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--color-line); border-radius: 6px; font: inherit; font-size: 14px; }
.favrad-tom { color: var(--color-muted); }
.favlank [data-kd-favantal] { font-variant-numeric: tabular-nums; }

/* Ikonlänkar i sidhuvudet: antal som bricka på ikonen (0.3.9).
   Startsidan: texten under ikonen, så att menyn får plats på samma rad. */
.ikonlank { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; white-space: nowrap; }
.ikonlank-ikon { position: relative; display: inline-flex; }
.ikonlank-antal {
	position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.ikonlank-antal[hidden] { display: none; }
.sidtopp--hem .sidhuvud-lankar { gap: 22px; align-items: center; }
.sidtopp--hem .ikonlank { flex-direction: column; gap: 3px; padding: 4px 2px; font-size: 12px; color: var(--color-muted); }
.sidtopp--hem .ikonlank:hover { color: var(--color-dark); }
.sidtopp--hem .sok-ikon { flex-direction: column; }
.huvudmeny--inline .meny a { white-space: nowrap; }
@media (max-width: 1240px) { .sidtopp--hem .huvudmeny--inline .meny { gap: 0 18px; font-size: 15px; } }
@media (max-width: 859px) {
	.ikonlank-text { display: none; }
	.sidhuvud-lankar .ikonlank { padding: 8px 6px; }
}
.ikonlank:not(:has(.ikonlank-antal[hidden])) { gap: 14px; }
.sidtopp--hem .ikonlank { gap: 3px !important; }
@media (max-width: 859px) {
	.sidtopp--hem .sidhuvud-lankar, .sidhuvud-lankar { gap: 2px; }
	.sidhuvud-lankar .ikonlank, .sidhuvud-lankar .sok-ikon { padding: 8px; }
	.logga img { height: 30px; width: auto; }
}

/* Varumärkessidor: loggan som rubrik (0.4.0) */
.sidhero-logga { margin: 0 0 18px; line-height: 0; }
.sidhero-logga img { display: block; width: auto; max-width: min(420px, 80%); max-height: 96px; object-fit: contain; object-position: left center; }
@media (max-width: 859px) { .sidhero-logga img { max-height: 64px; } }

/* ---------- 0.4.2: infällt sökkort och menyns skrolltips på mobil ---------- */
.hero-kort-knapp { display: none; }
@media (max-width: 859px) {
	.hero-kort-knapp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 2px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
	.hero-kort-knapp-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
	.hero-kort-knapp-text small { color: var(--color-muted); font-size: 14px; }
	.hero-kort-knapp > svg:last-child { transition: transform .3s ease; }
	.js .hero-kort[data-kd-fall]:not(.hero-kort--oppen) > :not(.hero-kort-knapp) { display: none; }
	.hero-kort--oppen > .hero-kort-knapp { margin-bottom: 14px; }
	.hero-kort--oppen > .hero-kort-knapp > svg:last-child { transform: rotate(180deg); }
	.hero-kort--oppen > :not(.hero-kort-knapp) { animation: kd-upp .35s ease both; }
	/* Menyn: tona kanten där det finns mer att skrolla till */
	.huvudmeny-inre.kan-hoger, .huvudmeny--inline.kan-hoger { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
	.huvudmeny-inre.kan-vanster, .huvudmeny--inline.kan-vanster { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
	.huvudmeny-inre.kan-hoger.kan-vanster, .huvudmeny--inline.kan-hoger.kan-vanster { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
}
@media (max-width: 859px) and (prefers-reduced-motion: reduce) { .hero-kort--oppen > :not(.hero-kort-knapp) { animation: none; } }
@media (max-width: 859px) {
	.meny .menu-item-has-children > a::after { display: inline-block; content: ""; width: 7px; height: 7px; margin-left: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
	.meny .under-oppen > a { color: var(--color-accent); }
	.meny .under-oppen > a::after { transform: translateY(0) rotate(-135deg); }
	.mobilunder { flex-basis: 100%; order: 4; margin: 0 -16px; padding: 4px 16px 10px; background: #fff; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); animation: kd-upp .25s ease both; }
	.mobilunder-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.mobilunder-lista a { display: block; padding: 11px 0; font-weight: 500; color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-line); }
	.mobilunder-lista .sub-menu { display: none; }
	.mobilunder-alla { grid-column: 1 / -1; }
	.mobilunder-alla a { color: var(--color-accent); }
}

/* ---------- 0.4.4: "Just nu" och startsidans två lägen ---------- */
.justnu { padding: clamp(28px, 3.4vw, 44px) 0 8px; }
.justnu[hidden] { display: none; }
.justnu-rubrik { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 32px); }
.justnu-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.justnu-kort { display: grid; grid-template-columns: 44% 1fr; min-height: 170px; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.justnu-kort:hover { box-shadow: 0 14px 34px rgba(22, 33, 31, .1); transform: translateY(-2px); }
.justnu-bild { display: block; overflow: hidden; }
.justnu-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.justnu-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; }
.justnu-etikett { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #eef2f1; color: var(--color-accent); }
.justnu-kort--kampanj .justnu-etikett { background: #fbe9e7; color: #a5321f; }
.justnu-kort--nyhet .justnu-etikett { background: #fbf1dc; color: #7a5410; }
.justnu-text h3 { margin: 4px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.2; }
.justnu-text p { margin: 0; color: var(--color-muted); font-size: 15px; line-height: 1.45; }
.justnu-lank { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-accent); }
.justnu-kort:hover .justnu-lank svg { transform: translateX(3px); }
.justnu-lank svg { transition: transform .25s ease; }
.justnu--in { animation: kd-tona-ned .22s ease-out both; }
.resultat--in { animation: kd-tona-ned .2s ease-out both; }
@keyframes kd-tona-ned { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .justnu--in, .resultat--in { animation: none; } }
@media (max-width: 1100px) { .justnu-lista { grid-template-columns: minmax(0, 1fr); } .justnu-kort { grid-template-columns: 34% 1fr; min-height: 140px; } }
@media (max-width: 859px) {
	.justnu-lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; }
	.justnu-lista::-webkit-scrollbar { display: none; }
	.justnu-kort { flex: 0 0 86%; scroll-snap-align: start; grid-template-columns: 38% 1fr; }
	.justnu-text { padding: 14px 16px; }
	.sok-rad-v .lank { font-weight: 600; text-decoration: underline; }
}

/* ---------- 0.4.5: sök och rum på samma rad (dator) ---------- */
@media (min-width: 1100px) {
	.kompakt-topp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--color-line); }
	.kompakt-topp .kompakt-sok { margin: 0; }
	.kompakt-topp .kompakt-sok-text { height: 52px; font-size: 17px; }
	.kompakt-topp .kompakt-rubrik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.kompakt-topp .kompakt-rum { padding: 0; margin: 0; border: 0; gap: 8px; }
	.kompakt-topp .kompakt-rumknapp { min-height: 55px; padding: 0 10px; gap: 8px; font-size: 15px; }
	.kompakt-topp .kompakt-rumknapp svg { width: 22px; height: 22px; flex: none; }
}

/* 0.4.6: tvåsiffrigt antal i korgikonen */
.ikonlank-antal { min-width: 18px; padding: 0 4px; width: auto; }

/* 0.4.7: korgikonen reagerar mjukt när antalet ändras */
.korg-upp .ikonlank-ikon > svg { animation: kd-korg-gung .6s cubic-bezier(.3, .7, .3, 1); transform-origin: 50% 80%; }
.korg-upp .ikonlank-antal { animation: kd-korg-puls .6s cubic-bezier(.3, .7, .3, 1); }
.korg-ner .ikonlank-antal { animation: kd-korg-krymp .45s ease-out; }
@keyframes kd-korg-gung { 0% { transform: none; } 30% { transform: translateY(-3px) rotate(-8deg); } 60% { transform: translateY(0) rotate(4deg); } 100% { transform: none; } }
@keyframes kd-korg-puls { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 163, 155, .55); } 35% { transform: scale(1.35); } 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(25, 163, 155, 0); } }
@keyframes kd-korg-krymp { 0% { transform: scale(1); } 40% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }

/* 0.4.8: samma rörelse för favoriter – i sidhuvudet och på kortens hjärtan */
.kort-favorit.fav-pop svg { animation: kd-hjarta-pop .55s cubic-bezier(.3, .7, .3, 1); }
.kort-favorit.fav-pop { animation: kd-korg-puls .6s cubic-bezier(.3, .7, .3, 1); }
.kort-favorit.fav-av svg { animation: kd-korg-krymp .4s ease-out; }
@keyframes kd-hjarta-pop { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kort-favorit.fav-pop, .kort-favorit.fav-pop svg, .kort-favorit.fav-av svg, .korg-upp .ikonlank-ikon > svg, .korg-upp .ikonlank-antal, .korg-ner .ikonlank-antal { animation: none; } }

/* ---------- 0.4.9: Mitt konto och kassan i full bredd ---------- */
.brodtext.brodtext--bred { max-width: none; }
.brodtext--bred .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); align-items: start; }
.brodtext--bred .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
.brodtext--bred .woocommerce-MyAccount-navigation, .brodtext--bred .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; border: 1px solid var(--color-line); border-radius: 12px; background: #fff; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--color-dark); text-decoration: none; font-weight: 500; transition: background .2s ease, color .2s ease; }
.woocommerce-MyAccount-navigation a:hover { background: #f3f5f4; }
.woocommerce-MyAccount-navigation .is-active a { background: #E3F3F1; color: var(--color-accent); }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-line); }
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-content th, .woocommerce-MyAccount-content td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-line); }
.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce-orders-table__cell-order-actions .button { margin: 2px 4px 2px 0; }
@media (max-width: 859px) {
	.brodtext--bred .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
	.woocommerce-MyAccount-navigation a { white-space: nowrap; }
	.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
	.woocommerce-orders-table__cell-order-actions { white-space: normal; }
}

/* 0.5.0: Woos clearfix-pseudoelement tog en egen gridcell – menyn hamnade i spalt två */
.brodtext--bred .woocommerce::before, .brodtext--bred .woocommerce::after, .woocommerce-Addresses::before, .woocommerce-Addresses::after { display: none !important; }
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.woocommerce-Addresses .woocommerce-Address { float: none !important; width: auto !important; padding: 22px 24px; border: 1px solid var(--color-line); border-radius: 12px; background: #fff; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.woocommerce-Address-title h2 { margin: 0 !important; font-size: 22px; }
.woocommerce-Address-title a { float: none !important; font-size: 15px; white-space: nowrap; }
.woocommerce-Address address { font-style: normal; line-height: 1.6; color: var(--color-muted); }
@media (max-width: 700px) { .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); } }

/* 0.5.1: Woos notisikon (ikonfont som temat inte laddar) blev en ruta mitt i texten */
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none !important; display: none !important; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border-top: 0 !important; line-height: 1.5; }
.woocommerce-info .button, .woocommerce-message .button, .woocommerce-error .button { float: none !important; order: 2; margin: 0 !important; }
.woocommerce-error { flex-direction: column; align-items: flex-start; }

/* ---------- 0.5.2: Tillbehör & verktyg ---------- */
.tb-kat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tb-chip { padding: 9px 16px; border: 1.5px solid var(--color-line); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--color-dark); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.tb-chip:hover { border-color: var(--color-dark); }
.tb-chip.ar-vald { background: #E3F3F1; border-color: var(--color-accent-2, var(--color-accent)); color: var(--color-accent); }
.tb-rad { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.tb-sok { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1.5px solid var(--color-line); border-radius: 10px; background: #fff; color: var(--color-muted); }
.tb-sok:focus-within { border-color: var(--color-accent); }
.tb-sok-text { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--color-dark); outline: 0; }
.tb-val { height: 48px; padding: 0 14px; border: 1.5px solid var(--color-line); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; }
.tb-antal { margin: 0 0 14px; color: var(--color-muted); font-size: 15px; }
.tb-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tb-kort { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.tb-kort:hover { box-shadow: 0 12px 30px rgba(22, 33, 31, .09); transform: translateY(-2px); }
.tb-bild { display: block; aspect-ratio: 1; background: #f6f5f2; }
.tb-bild img { width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block; mix-blend-mode: multiply; }
.tb-info { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 10px; flex: 1; }
.tb-marke { font-size: 13px; color: var(--color-muted); }
.tb-namn { color: var(--color-dark); text-decoration: none; font-weight: 500; line-height: 1.3; }
.tb-namn:hover { color: var(--color-accent); }
.tb-pris { margin-top: auto; padding-top: 6px; font-size: 18px; }
.tb-lager { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tb-lager::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e9e6a; }
.tb-lager--best::before, .tb-lager--fa::before { background: #d99a1e; }
.tb-lager--nej::before { background: #c2412d; }
.tb-kop-rad { display: flex; gap: 8px; padding: 0 16px 16px; }
.tb-antal-falt { width: 64px; height: 42px; padding: 0 8px; border: 1.5px solid var(--color-line); border-radius: 8px; font: inherit; text-align: center; }
.tb-kop { flex: 1; height: 42px; min-height: 0; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; transition: background .25s ease; }
.tb-kop.ar-lagd { background: #2e9e6a; }
.tb-fler { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 600px) {
	.tb-kat { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px; }
	.tb-kat::-webkit-scrollbar { display: none; }
	.tb-chip { white-space: nowrap; }
	.tb-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.tb-kop-rad { flex-direction: column; }
	.tb-antal-falt { width: 100%; }
}

/* ---------- 0.5.3: tillbehörsförslag ---------- */
.forslag { padding: clamp(28px, 4vw, 48px) 0; background: #faf9f6; border-top: 1px solid var(--color-line); }
.forslag:has(> [hidden]) { display: none; }
.forslag--korg { margin-top: 32px; padding: 24px; border: 1px solid var(--color-line); border-radius: 12px; }
.forslag--korg[hidden] { display: none; }
.forslag-huvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.forslag-huvud h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); }
.forslag-text { margin: 4px 0 0; color: var(--color-muted); }
.forslag-alla { font-weight: 600; color: var(--color-accent); }
.tb-lista--forslag { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-kort { position: relative; }
.tb-behov { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(22, 33, 31, .12); font-size: 12px; font-weight: 600; color: var(--color-accent); }
@media (max-width: 900px) { .tb-lista--forslag { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 0.5.4: systemväljare i förslagen */
.forslag-system { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; color: var(--color-muted); }
.forslag-system .tb-chip { padding: 6px 14px; font-size: 14px; }
.forslag-huvud > .forslag-alla { white-space: nowrap; }
.tb-lista--forslag { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* 0.5.6: kortbeskrivningen under priset */
.produkt-kort { margin: 4px 0 16px; color: var(--color-muted); font-size: 16px; line-height: 1.55; }
.produkt-kort p { margin: 0 0 .5em; }
.produkt-kort ul { margin: 0 0 .5em; padding-left: 1.2em; }

/* 0.5.8: provplatta under bilderna */
.provbest { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 12px; background: #fff; }
.provbest-ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #E3F3F1; color: var(--color-accent); }
.provbest-info { flex: 1; min-width: 0; }
.provbest-info strong { display: block; font-size: 16px; }
.provbest-text { margin: 2px 0 0; font-size: 14px; color: var(--color-muted); line-height: 1.45; }
.provbest-text a { color: var(--color-accent); }
.provbest-knapp { flex: none; white-space: nowrap; }
.provbest-knapp.ar-lagd { border-color: #2e9e6a; color: #2e9e6a; }
@media (max-width: 600px) { .provbest { flex-wrap: wrap; } .provbest-knapp { width: 100%; } }

/* 0.5.9: toast */
.kd-toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; max-width: min(92vw, 460px); padding: 14px 20px; border-radius: 12px; background: var(--color-dark, #16211f); color: #fff; font-size: 15px; line-height: 1.4; box-shadow: 0 14px 40px rgba(22, 33, 31, .25); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.kd-toast.ar-synlig { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .kd-toast { transition: none; } }

/* 0.6.1: tillbehör på startsidan */
.tbstart { padding: clamp(36px, 5vw, 64px) 0; background: #faf9f6; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.tbstart[hidden] { display: none; }
.tbstart .hylla-huvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.tbstart .forslag-alla { display: inline-flex; align-items: center; gap: 6px; }
.tbstart-kat { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.tbstart-kat .tb-chip { text-decoration: none; }
.tbstart-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tbstart-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tbstart-kat { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 18px; padding: 0 16px; } .tbstart-kat .tb-chip { white-space: nowrap; } }

/* 0.6.2: kassan (Qliro One) i sidans bredd. Kassasidan använder sidmallen, vars textspalt har läsbredd. */
.woocommerce-checkout .sidtext .brodtext, .woocommerce-account .sidtext .brodtext, .woocommerce-cart .sidtext .brodtext { max-width: none; }
.woocommerce-checkout .sidhero { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }
#qliro-one-wrapper { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important; gap: 40px !important; }
#qliro-order-review { position: sticky; top: 110px; align-self: start; padding: 24px; border-radius: 12px; background: var(--color-tint); }
#qliro-order-review table.shop_table { width: 100%; margin: 0; border: 0 !important; border-collapse: collapse; }
#qliro-order-review .shop_table th, #qliro-order-review .shop_table td { padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(22, 33, 31, .1) !important; background: none !important; vertical-align: top; }
#qliro-order-review .shop_table td:last-child, #qliro-order-review .shop_table th:last-child { text-align: right; }
#qliro-order-review .order-total th, #qliro-order-review .order-total td { font-size: 20px; border-bottom: 0 !important; }
@media (max-width: 860px) {
	#qliro-one-wrapper { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
	#qliro-order-review { position: static; }
}

/* 0.6.3: banderollens färger, av/på och läsbarhet i redigeringsläget */
.banderoll--petrol { background: var(--color-accent); color: #fff; }
.banderoll--sand { background: #efe6d6; color: var(--color-dark); }
.banderoll--rod { background: #b3341f; color: #fff; }
.banderoll--gul { background: #f6d77a; color: var(--color-dark); }
.banderoll--av { opacity: .55; }
.banderoll--av::after { content: " (dold för besökare)"; font-size: 13px; }
/* Motorn lägger en ljus bakgrund på fältet man redigerar – låt banderollen behålla sina egna färger. */
.banderoll.banderoll--mork { background: var(--color-dark) !important; color: #fff !important; }
.banderoll.banderoll--petrol { background: var(--color-accent) !important; color: #fff !important; }
.banderoll.banderoll--sand { background: #efe6d6 !important; color: var(--color-dark) !important; }
.banderoll.banderoll--rod { background: #b3341f !important; color: #fff !important; }
.banderoll.banderoll--gul { background: #f6d77a !important; color: var(--color-dark) !important; }
.banderoll.banderoll--tom { border: 0; }
.banderoll * { color: inherit !important; background: transparent !important; }
.pe-editing .banderoll { outline: 1px dashed currentColor; outline-offset: -4px; }
.pe-editing .banderoll ::selection, .banderoll ::selection { background: rgba(255, 255, 255, .35); color: inherit; }
.banderoll--sand ::selection, .banderoll--gul ::selection { background: rgba(0, 0, 0, .15); }

/* 0.6.4: bildspel i startsidans hero med ken burns */
.hero--bildspel .hero-bild { opacity: 0; animation: none; transition: opacity 1.6s ease; }
.hero--bildspel .hero-bild.ar-aktiv { opacity: 1; animation: kd-kenburns 9s ease-out both; }
.hero--bildspel .hero-bild--ut.ar-aktiv { animation-name: kd-kenburns-ut; }
.hero--bildspel .hero-bild.ar-forra { opacity: 0; animation-play-state: paused; }
@keyframes kd-kenburns { from { transform: scale(1.1) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes kd-kenburns-ut { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@media (prefers-reduced-motion: reduce) { .hero--bildspel .hero-bild, .hero--bildspel .hero-bild.ar-aktiv { animation: none; transition: none; } }
.hero-bildval { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: flex; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 20px rgba(22, 33, 31, .15); }
.hero-bildval-ruta img, .hero-bildval-tom { display: grid; place-items: center; width: 72px; height: 48px; border-radius: 6px; object-fit: cover; font-size: 12px; color: var(--color-muted); border: 1px dashed var(--color-line); cursor: pointer; }

/* 0.6.5: rubriken i hero syns direkt (räknas som största innehållet av Google) – bara en lätt rörelse, ingen toning */
@keyframes kd-upp-synlig { from { transform: translateY(10px); } to { transform: none; } }
.kd-anim .hero-text { animation: kd-upp-synlig .6s cubic-bezier(.2, .7, .2, 1) both; }