/* Staby Søg — overlay.
   Neutralt holdt, så temaets egne regler ikke slår det ihjel.

   KONTRAST — alt tekst skal bestå WCAG AA (4,5:1 mod hvid).
     #6e767b er den lyseste grå der klarer det (4,54:1). Den bar før
     #9aa2a7 på 2,59:1 — og det er netop den farve der bærer
     «60×60 · Keramik» på hvert kort, altså dét en flisekøber scanner
     efter. Kanter skal klare 3:1 (1.4.11), derfor #868e93.

   FARVER — butikkens egne, ikke opfundne til lejligheden:
     #1f4fd8   knapfarven; står 91 steder på forsiden
     #4054b2   temaets egen CTA-farve
     #2a3f9e   accenttekst; 7,9:1 på chip-baggrunden, godt over AA
     #e9eefc   chip-flade
   Et overlay der dækker hele skærmen må ikke føles som en anden butik.
   Skifter temaet farve, skal de fire her følge med. */

body.ss-laast { overflow: hidden; }

.ss-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background: #fff; display: flex; flex-direction: column;
	font-family: inherit; color: #14181b;
}
.ss-overlay[hidden] { display: none; }

/* Søgesiden — /search-results/.
   Samme opbygning som overlayet, men indlejret i siden i stedet for at ligge
   som et fast lag over den. Der er ingen side bagved at lukke ned til, så
   ingen luk-knap, ingen låst baggrund og ingen egen rulning: siden ruller
   som en side skal. */
.ss-side {
	display: flex; flex-direction: column;
	font-family: inherit; color: #14181b;
	min-height: 60vh;
}
.ss-side .ss-top {
	position: sticky; top: 0; z-index: 5;
	border-bottom: 1px solid #e3e6e8;
	/* Bryder ud af temaets indholdsbredde, så søgefeltet flugter med
	   resultaterne nedenunder i stedet for at stå smallere end dem. */
	padding: 14px 20px;
}
.ss-side .ss-krop { overflow: visible; }
.ss-side .ss-indhold { padding-bottom: 40px; }
/* Facetkolonnen må ikke klæbe fast under det klæbende søgefelt.
   KUN PÅ DESKTOP. Reglen stod uden brydepunkt, og fordi `.ss-side
   .ss-facetter` er (0,2,0) slog den mobilreglens `.ss-facetter` (0,1,0) på
   netop `top` og `max-height`. På telefon startede bundarket derfor 84 px
   nede — søgebjælken stak op over det — og med top:84, bottom:0 og en højde
   låst til 100vh−100px stod der et gennemsigtigt hul på 16 px i bunden hvor
   siden bagved skinnede igennem.
   Grænsen er den samme som mobilarkets, 860 px. */
@media (min-width: 861px) {
	.ss-side .ss-facetter { top: 84px; max-height: calc(100vh - 100px); }
}

/* --- søgefelt --------------------------------------------------- */
.ss-top { border-bottom: 1px solid #e3e6e8; padding: 14px 20px; background: #fff; flex: none; }
.ss-felt {
	/* INDRYKNINGEN AF PLADSHOLDEREN.
	   Teksten startede 44 px inde: 14 padding + 18 lup + 12 mellemrum. Det
	   er meget, når det første kunden læser er en instruktion — «Søg på mål,
	   farve, serie eller anvendelse» — og ikke et ikon.
	   12 + 16 + 8 = 36. Luppen bliver, den fylder bare ikke feltets forkant.
	   Mellemrummet gælder også højre side, så ryd-knappen rykker tilsvarende
	   tættere på teksten — hvilket er rigtigt: den hører til søgeordet. */
	display: flex; align-items: center; gap: 8px;
	max-width: 1240px; margin: 0 auto;
	/* Rolig i hviletilstand, tydelig når man skriver. 2px nærsort hele tiden
	   blev til en kasse på 1240px der lignede en fejltilstand — og feltet
	   havde omvendt INGEN fokusmarkering, fordi .ss-input har outline: 0.
	   box-shadow frem for en tykkere kant, så der ikke hopper 1px ved fokus. */
	/* #868e93 (3,33:1) frem for en lysere grå: kanten ER det der viser hvor
	   feltet slutter, og WCAG 1.4.11 kræver 3:1 på den slags. */
	/* UDFYLDT FELT, ikke bare en kant.
	   Butikkens eget søgefelt gør det samme — `.site-search input` har
	   background #f8f8f8 — så et fyldt felt er sidens sprog. Det læses som et
	   sted man kan skrive, uden at der skal en hård ramme til.
	   Fylden alene er dog IKKE en afgrænsning: #f2f4f5 mod den hvide bjælke
	   er 1,10:1. WCAG 1.4.11 kræver 3:1 på grænsen om et betjeningselement,
	   så kanten bliver — den er bare ikke længere alene om jobbet.
	   #868e93 giver 3,02:1 mod fylden. */
	background: #f2f4f5;
	border: 1px solid #868e93; border-radius: 3px; padding: 0 12px; height: 52px;
	transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Fokus er BLÅ, ikke nærsort.
   Feltet får fokus i det sekund overlayet åbner, så fokustilstanden er den
   tilstand kunden ser hele tiden — ikke en undtagelse. En 2px nærsort ramme
   dér læses som en fejl, præcis som kommentaren ovenfor advarer om for
   hviletilstanden. Blå er butikkens egen accentfarve og læses som «aktiv».
   Glødet udenom giver markeringen vægt uden at lægge en hård kant om
   feltet. */
/* Ved fokus bliver feltet HVIDT. Det er den tydeligste besked man kan give
   uden at råbe: fladen åbner sig, og der er noget der skal skrives. */
.ss-felt:focus-within {
	background: #fff;
	border-color: #1f4fd8;
	box-shadow: 0 0 0 3px rgba(31, 79, 216, .16);
}
.ss-felt > svg { flex: none; color: #676e73; }
/* #676e73 giver 4,69:1 mod fylden #f2f4f5 — pladsholderen bærer eksemplet
   «fx 60x60 grå», og det er dét der lærer kunden hvad der virker her. */
.ss-felt .ss-input::placeholder { color: #676e73; opacity: 1; }
/* TEMAET SKAL SLÅS PÅ SPECIFICITET, ikke bare overskrives.
   Shoptimizer giver alle søgefelter en ramme:
       input[type="search"]      border: 1px solid #d2d6dc; box-shadow: …
       input[type=search]:focus  border-color: #999
   Den anden er den mørke kasse: feltet får fokus i det sekund overlayet
   åbner, så fokustilstanden er den kunden ser hele tiden.
   `.ss-input` er (0,1,0) og taber til `input[type=search]:focus` (0,2,1).
   Derfor `.ss-felt input.ss-input:focus` (0,3,1), som vinder — og derfor
   ikke !important, som ville skjule at det overhovedet er en kamp. */
.ss-felt input.ss-input,
.ss-felt input.ss-input:focus,
.ss-felt input.ss-input:focus-visible {
	border: 0; border-radius: 0; box-shadow: none; outline: 0;
	background: none;
	/* PADDING OG HØJDE SKAL NULSTILLES HER — ikke kun kant og skygge.
	   Temaet har `input[type="search"] { padding-left: 43px }` til sit eget
	   felt med lup bag ved. Specificiteten er (0,1,1) og slår `.ss-input`
	   (0,1,0), mens denne blok er (0,2,1) og vinder — men den satte kun
	   border/radius/shadow/outline/background.
	   Følgen: pladsholderen begyndte 12 + 16 + 8 + 43 ≈ 79 px inde, og hele
	   afvejningen ovenfor om 36 px var uden virkning. Højden lå på temaets
	   værdi i et felt på 52, så et klik i feltets over- og underkant ramte
	   ingenting — `.ss-felt` har ingen klik-håndtering der fanger det. */
	padding: 0; height: 100%;
}
.ss-input {
	flex: 1; border: 0; outline: 0; background: none; height: 100%;
	font-size: 17px; color: #14181b; font-family: inherit; min-width: 0;
	-webkit-appearance: none; appearance: none;
}
.ss-input::-webkit-search-cancel-button { display: none; }
/* Ryd søgeordet. Sidder inde i feltet, hvor teksten slutter — det er den
   knap kunden leder efter når hun vil skrive noget andet. */
.ss-ryd {
	flex: none; border: 0; background: none; cursor: pointer;
	color: #6a7176; line-height: 0; padding: 6px; border-radius: 3px;
}
.ss-ryd:hover { color: #14181b; background: #f2f4f5; }
.ss-ryd:focus-visible { outline: 2px solid #1f4fd8; outline-offset: 1px; }

/* Luk søgningen. Uden for feltet, yderst til højre som modvægt til logoet
   til venstre — så den ikke forveksles med «ryd». */
.ss-luk {
	flex: none; border: 0; background: none; cursor: pointer;
	font-size: 21px; color: #6a7176; line-height: 1;
	padding: 0; width: 44px; height: 44px; border-radius: 3px;
}
.ss-luk:hover { color: #14181b; background: #f2f4f5; }
.ss-luk:focus-visible { outline: 2px solid #1f4fd8; outline-offset: 2px; }
.ss-luk:hover { color: #14181b; }
.ss-spin {
	flex: none; width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid #868e93; border-top-color: #1f4fd8;
	animation: ss-snurre .7s linear infinite;
}
@keyframes ss-snurre { to { transform: rotate(360deg); } }

/* overscroll-behavior: scroll-kæden må ikke løbe videre til siden bagved,
   når resultatlisten rammer bunden. */
.ss-krop {
	flex: 1; overflow-y: auto; overflow-x: hidden;
	overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.ss-indhold { max-width: 1240px; margin: 0 auto; padding: 18px 20px 60px; }

/* --- tom tilstand ------------------------------------------------ */
.ss-start { padding: 8px 0; }
.ss-blok { margin-bottom: 26px; }
.ss-blok-titel {
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: #6e767b; margin-bottom: 11px;
}
.ss-pil-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-pil {
	border: 1px solid #868e93; background: #fff; color: #14181b;
	border-radius: 3px; padding: 8px 13px; font-size: 14px;
	font-family: inherit; cursor: pointer;
}
/* Hover er neutral. Blå er butikkens handlingsfarve og skal betyde «valgt»
   eller «her er fokus» — bruges den også til at svæve over, mister den sin
   betydning, og skærmen blinker blåt hver gang musen bevæger sig. */
.ss-pil:hover { border-color: #14181b; background: #f5f6f7; }
.ss-pil--lille { padding: 5px 10px; font-size: 13px; }

.ss-genveje {
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.ss-genvej {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	border: 1px solid #e8ebec; padding: 12px 14px;
	text-decoration: none; color: #14181b;
}
.ss-genvej:hover { border-color: #868e93; background: #f7f8f9; }
.ss-genvej-navn { font-size: 14.5px; font-weight: 500; }
.ss-genvej-antal { font-size: 12px; color: #6e767b; white-space: nowrap; }

/* --- forslagsstribe ---------------------------------------------- */
.ss-forslag {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding-bottom: 16px; margin-bottom: 4px;
}
.ss-forslag-mrk {
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6e767b;
}

/* --- svar-kort ---------------------------------------------------- */
.ss-svar {
	display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
	padding: 14px 16px; border: 1px solid #1f4fd8; background: #f3f6fe;
	border-radius: 3px; text-decoration: none; color: #14181b;
}
/* Hover hører til den udgave af kortet der ER et link.
   Kontaktkortet er en <div> med selvstændige links indeni — en hover på hele
   fladen dér lover en klikbarhed der ikke findes. Derfor `a.ss-svar`.

   Og farven er nu kortets EGEN, bare dybere. Den var #f7ebe4 — en varm beige
   på et kort der ellers er blåt (#f3f6fe med #1f4fd8 kant). Det var ikke en
   dæmpning, det var et spring til en anden farvefamilie, og det læses som en
   fejl frem for som en reaktion. #e4ebfc er samme blå, et trin ned: tydelig
   nok til at mærkes, tæt nok på til at høre til. */
a.ss-svar:hover { background: #e4ebfc; }
.ss-svar-bil {
	width: 56px; height: 56px; flex: none; border-radius: 2px;
	background: #fff; overflow: hidden;
}
.ss-svar-bil img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-svar-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-svar-mrk {
	font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #2a3f9e;
}
.ss-svar-tekst strong { font-size: 17px; font-weight: 600; }
.ss-svar-und { font-size: 12.5px; color: #6a7176; }
.ss-svar-knap {
	margin-left: auto; flex: none; background: #1f4fd8; color: #fff;
	padding: 9px 15px; border-radius: 2px; font-size: 13.5px; font-weight: 500;
}

/* --- layout: facetter + resultater -------------------------------- */
/* minmax(0, …) så indholdet ikke kan gøre kolonnen bredere end pladsen. */
.ss-layout {
	display: grid; grid-template-columns: 210px minmax(0, 1fr);
	gap: 26px; align-items: start;
}
.ss-hoved { min-width: 0; }

/* Klæbende sidebar med EGEN scroll.
   Uden max-height og overflow bliver en facetliste der er højere end
   skærmen hængende ved toppen, og bunden kan aldrig nås — man scroller
   bare resultatlisten forbi den. Højden er skærmen minus søgelinjen
   (28px polstring + 52px felt + 1px streg) og lidt luft. */
.ss-facetter {
	overscroll-behavior: contain;
	position: sticky;
	top: 0;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
}
/* Synlig, men diskret scrollbar — ellers ved man ikke at der er mere. */
.ss-facetter::-webkit-scrollbar { width: 8px; }
.ss-facetter::-webkit-scrollbar-thumb {
	background: #868e93; border-radius: 4px;
}
.ss-facetter::-webkit-scrollbar-thumb:hover { background: #868e93; }
.ss-facetter::-webkit-scrollbar-track { background: transparent; }
.ss-facet-top { display: none; }
/* «Vis N varer» hører til bundarket på mobil. På desktop opdaterer gitteret
   sig ved siden af, og knappen ville være meningsløs. */
.ss-facet-vis { display: none; }
.ss-fgruppe { margin-bottom: 20px; }
.ss-fgruppe h4 {
	font-size: 12px; margin: 0 0 8px; letter-spacing: .06em;
	text-transform: uppercase; color: #6a7176; font-weight: 600;
}
.ss-fopt {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 0; font-size: 13.5px; color: #4a5257; cursor: pointer;
}
.ss-fopt:hover { color: #14181b; }
.ss-fopt input { margin: 0; flex: none; accent-color: #1f4fd8; }
.ss-fopt-navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-fopt-antal { font-size: 11.5px; color: #6e767b; flex: none; }
.ss-fopt--valgt { color: #14181b; font-weight: 500; }
.ss-flere summary {
	cursor: pointer; font-size: 12.5px; color: #2a3f9e; padding: 5px 0; list-style: none;
}
.ss-flere summary::-webkit-details-marker { display: none; }

/* --- resultatbar --------------------------------------------------- */
.ss-bar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding-bottom: 14px; font-size: 14px; color: #4a5257;
}
.ss-bar b { font-variant-numeric: tabular-nums; color: #14181b; }
.ss-filterknap { display: none; }

.ss-chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: #e9eefc; color: #2a3f9e; border: 0; border-radius: 3px;
	padding: 5px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.ss-chip:hover { background: #ead6cd; }
.ss-chip span { opacity: .6; }
.ss-chip--ryd { background: none; color: #6a7176; text-decoration: underline; padding: 5px 4px; }

/* --- produktgitter --------------------------------------------------
   Fast antal kolonner frem for auto-fill: på en bred skærm blev der
   ellers seks-syv kort i rækken, og de blev for små til at man kunne se
   forskel på en grå og en lysegrå flise.
   minmax(0, 1fr) i stedet for 1fr — ellers kan et langt produktnavn
   presse kolonnen bredere end beholderen og skubbe gitteret ud af siden. */
.ss-gitter {
	display: grid; gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.ss-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ss-kort {
	background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 7px;
	text-decoration: none; color: #14181b;
	/* Stregen tegnes på selve kortet, ikke som gitterets baggrund gennem
	   afstanden. Ellers får en halv sidste række grå felter der ligner
	   varer der mangler at blive indlæst. Naboernes ringe lapper over
	   hinanden i den 1px afstand og bliver til én streg. */
	box-shadow: 0 0 0 1px #e8ebec;
}
.ss-kort:hover, .ss-kort--markeret { background: #f7f8f9; }
.ss-kort--markeret { outline: 2px solid #1f4fd8; outline-offset: -2px; }
.ss-kort:focus-visible { outline: 2px solid #1f4fd8; outline-offset: -2px; }
.ss-bil {
	display: block; aspect-ratio: 1; background: #f2f4f5;
	border-radius: 2px; overflow: hidden;
}
.ss-bil img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ss-navn { font-size: 13.5px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.ss-spec { font-size: 11.5px; color: #6e767b; font-variant-numeric: tabular-nums; }

/* Enheden skal ALTID stå ved prisen. 6.836 kr/palle og 48 kr/stk
   må ikke se ens ud — det er den vigtigste information på en fliseshop. */
/* margin-top:auto skubber prisen til bunden, så den flugter på tværs af
   rækken uanset hvor mange linjer produktnavnet fylder. */
.ss-pris {
	font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
	letter-spacing: -.01em; margin-top: auto;
}
.ss-enhed { font-size: 11.5px; font-weight: 400; color: #6a7176; }
.ss-fra { font-size: 11.5px; font-weight: 400; color: #6a7176; }
.ss-pris--ukendt { font-size: 13px; font-weight: 500; color: #6a7176; }

.ss-lev { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.35; }
.ss-lev i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; margin-top: 4px; }
.ss-lev--gron { color: #2c6a4a; }
.ss-lev--gul  { color: #8a6420; }
.ss-lev--rod  { color: #9a3327; }

/* --- pladsholdere -------------------------------------------------- */
.ss-skelet {
	background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 9px;
	box-shadow: 0 0 0 1px #e8ebec;
}
.ss-skelet-bil, .ss-skelet-linje {
	background: linear-gradient(90deg, #f2f4f5 25%, #e8ebec 37%, #f2f4f5 63%);
	background-size: 400% 100%; animation: ss-glimt 1.3s ease infinite; border-radius: 2px;
}
.ss-skelet-bil { aspect-ratio: 1; }
.ss-skelet-linje { height: 12px; }
.ss-skelet-linje.kort { width: 55%; }
@keyframes ss-glimt { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --- sidetal -------------------------------------------------------- */
.ss-sidetal {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	margin-top: 20px; font-size: 13.5px; color: #6a7176;
}
.ss-side-knap {
	border: 1px solid #868e93; background: #fff; color: #14181b;
	border-radius: 3px; padding: 8px 15px; font-size: 13.5px;
	font-family: inherit; cursor: pointer;
}
.ss-side-knap:hover:not(:disabled) { border-color: #14181b; background: #f5f6f7; }
.ss-side-knap:disabled { opacity: .4; cursor: default; }

/* --- vejledning og sider -------------------------------------------- */
.ss-sider { margin-top: 26px; border-top: 1px solid #e3e6e8; padding-top: 18px; }
/* HED FØR .ss-side — og det var en navnekollision med alvorlige følger.
   `.ss-side` er søgeresultat-SIDEN (den selvstændige /search-results/),
   og den sætter `min-height: 60vh`. Artiklerne i listen arvede den, så
   hver eneste af dem fyldte to tredjedele af skærmen.
   To ting kan ikke hedde det samme, heller ikke når ordet passer på begge. */
.ss-sidekort {
	display: block; padding: 11px 13px; margin-bottom: 1px;
	border: 1px solid #e8ebec; text-decoration: none; color: #14181b;
	min-height: 0;
}
.ss-sidekort:hover { border-color: #868e93; background: #f7f8f9; }
.ss-side-type {
	display: inline-block; font-size: 10.5px; letter-spacing: .08em;
	text-transform: uppercase; color: #2a3f9e; margin-right: 9px;
}
.ss-side-navn { font-size: 14.5px; font-weight: 500; }
.ss-side-ud {
	display: block; font-size: 12.5px; color: #6a7176; margin-top: 3px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- tom / fejl ------------------------------------------------------ */
.ss-tom { padding: 46px 0; text-align: center; }
.ss-tom h3 { font-size: 19px; margin: 0 0 8px; }
.ss-hint { color: #6a7176; font-size: 14.5px; margin: 0 0 16px; }

/* --- mobil ------------------------------------------------------------
   Facetterne bliver til et panel bag en knap. På en telefon er der ikke
   plads til en sidebar, og en kunde skal kunne se varerne først. */
@media (max-width: 860px) {
	.ss-layout { grid-template-columns: 1fr; gap: 0; }
	.ss-filterknap {
		display: inline-flex; align-items: center; gap: 7px;
		border: 1px solid #14181b; background: #fff; color: #14181b;
		border-radius: 3px; padding: 8px 14px; font-size: 13.5px;
		font-family: inherit; cursor: pointer;
	}
	.ss-filterknap span {
		background: #1f4fd8; color: #fff; border-radius: 10px;
		padding: 1px 7px; font-size: 11.5px;
	}
	.ss-facetter {
		position: fixed; inset: 0; z-index: 10; background: #fff;
		max-height: none; padding: 0 20px 24px; overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(100%); transition: transform .22s ease;
		visibility: hidden;
	}
	.ss-facetter--aaben { transform: none; visibility: visible; }
	.ss-facet-top {
		display: flex; align-items: center; justify-content: space-between;
		position: sticky; top: 0; background: #fff; padding: 16px 0;
		border-bottom: 1px solid #e3e6e8; margin-bottom: 16px;
		font-size: 16px; font-weight: 600;
	}
	.ss-facet-luk {
		border: 0; background: none; font-size: 19px; color: #6a7176;
		cursor: pointer; padding: 4px 6px;
	}
	/* Bundarket skal have en bekræft-knap. Uden den ved kunden ikke hvornår
	   hun er færdig med at filtrere — og på en telefon er panelet den eneste
	   vej til at gøre 833 fliser håndterbare. */
	.ss-facet-vis {
		display: block; position: sticky; bottom: 0; width: 100%;
		margin-top: 8px; padding: 14px; min-height: 48px;
		border: 0; border-radius: 3px; background: #14181b; color: #fff;
		font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
		box-shadow: 0 -12px 16px -8px rgba(255, 255, 255, .95);
	}
	/* 44px er den trykflade en tommelfinger rammer i træk uden at ramme
	   forkert. 36px er for lidt i et panel hvor man sætter flere filtre. */
	.ss-fopt { padding: 9px 0; font-size: 15px; min-height: 44px; }
	.ss-indhold { padding: 14px 14px 50px; }
	.ss-top { padding: 10px 14px; }
	/* Logo + felt + luk skal kunne være der på 360px. */
	.ss-linje { gap: 10px; }
	.ss-felt { height: 46px; }
	.ss-input { font-size: 16px; }   /* under 16px zoomer iOS ind */
	.ss-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-svar { flex-wrap: wrap; }
	.ss-svar-knap { margin-left: 0; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-spin, .ss-skelet-bil, .ss-skelet-linje { animation: none; }
	.ss-felt { transition: none; }
	.ss-facetter { transition: none; }
}

/* Omdirigeringskort. Vises kun ved præcist match på søgeordet — «fragt»,
   «returret», «åbningstider». En forkert omdirigering er værre end ingen. */
.ss-svar--side { border-color: #14181b; background: #f7f8f9; }
a.ss-svar--side:hover { background: #f2f4f5; }
.ss-svar--side .ss-svar-mrk { color: #6a7176; }
.ss-svar--side .ss-svar-knap { background: #14181b; }

/* Logo i søgelinjen.
   Overlayet dækker hele skærmen, så kunden mister al kontekst om hvor hun
   er. Logoet holder hende i butikken — og er samtidig vejen ud. */
.ss-linje {
	display: flex; align-items: center; gap: 18px;
	max-width: 1240px; margin: 0 auto;
}
.ss-linje .ss-felt { flex: 1; margin: 0; min-width: 0; }
.ss-logo { flex: none; display: block; line-height: 0; }
.ss-logo img {
	height: 58px; width: auto; display: block;
	object-fit: contain;
}
.ss-logo:focus-visible { outline: 2px solid #1f4fd8; outline-offset: 3px; }

@media (max-width: 860px) {
	.ss-linje { gap: 12px; }
	.ss-logo img { height: 44px; }
}
/* Beholdes selv på de smalleste skærme — pointen er netop at kunden ikke
   skal være i tvivl om hvis butik hun står i. */
@media (max-width: 420px) {
	.ss-linje { gap: 10px; }
	.ss-logo img { height: 34px; }
}

/* «Vis flere» under de mest solgte i den tomme tilstand.
   Rolig og sekundær — det er en genvej, ikke sidens hovedhandling. */
.ss-mere {
	display: block; margin: 20px auto 0;
	padding: 10px 22px; border: 1px solid #868e93; border-radius: 3px;
	background: #fff; color: #14181b; font: inherit; font-size: 14px;
	font-weight: 600; cursor: pointer;
}
.ss-mere:hover:not([disabled]) { border-color: #14181b; }
.ss-mere:focus { outline: 2px solid #1f4fd8; outline-offset: 2px; }
.ss-mere[disabled] { opacity: .6; cursor: default; }

/* --- faneblade: Produkter / Sider -----------------------------------
   Fanen holder STEDET, svarkortet ovenover forfremmer SVARET. De to gør
   ikke det samme: kortet er en handling, fanen er et sted at lede.
   Derfor kan begge stå — og derfor tør reglen bag kortet være stram, for
   rammer den forkert, er fanen der stadig. */
.ss-faner {
	display: flex; gap: 26px; margin: 4px 0 18px;
	border-bottom: 1px solid #e3e6e8;
}
.ss-fane {
	appearance: none; background: none; border: 0; font: inherit;
	font-size: 14.5px; color: #6a7176; cursor: pointer;
	padding: 9px 0 11px; margin-bottom: -1px;
	border-bottom: 2px solid transparent; white-space: nowrap;
}
.ss-fane:hover:not([disabled]) { color: #14181b; }
.ss-fane--valgt { color: #14181b; font-weight: 600; border-bottom-color: #1f4fd8; }
.ss-fane-tal { color: #6a7176; font-weight: 400; margin-left: 5px;
	font-variant-numeric: tabular-nums; }
/* Ingen sider — så lover fanen ikke noget den ikke kan holde. */
.ss-fane--tom { opacity: .45; cursor: default; }
.ss-fane:focus-visible { outline: 2px solid #1f4fd8; outline-offset: 2px; }

/* Under sin egen fane fylder listen bredden — der er ingen facetter at
   tage hensyn til, for facetterne filtrerer varer. */
.ss-sider--fane { margin-top: 0; padding-top: 0; border-top: 0; }
.ss-sidefane { padding-bottom: 20px; }

/* --- genvej med telefon og e-mail ------------------------------------
   Kortet er ikke ét link, men en flade med flere handlinger. Derfor <div>
   og ikke <a>: et link inde i et link er ugyldigt HTML, og skærmlæsere kan
   ikke oplæse det entydigt.

   Første udgave lagde de to felter til venstre og en fyldt blå knap ude i
   højre kant. På 1170px blev der en håndsbred tomhed imellem, og knappen
   trak øjet væk fra nummeret — som ER svaret. Nu står de tre handlinger
   samlet på én linje i den rækkefølge de betyder noget. */
.ss-svar--kontakt { display: block; }
.ss-kontakt {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px; margin-top: 11px;
}
.ss-kontakt-el {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 9px 15px; border-radius: 3px;
	border: 1px solid #868e93; background: #fff;
	text-decoration: none; color: #14181b; font-size: 13px;
}
.ss-kontakt-el b {
	font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}
/* Én fyldt knap, og det er den der svarer på spørgsmålet: ruten når
   genvejen har en adresse, ellers telefonen. To fyldte ville konkurrere,
   og så er der ingen der fører. */
.ss-kontakt-el--primaer {
	background: #1f4fd8; border-color: #1f4fd8; color: #fff;
}
/* Farven skal sættes EKSPLICIT på hover. Uden den arver knappen temaets
   generelle linkfarve, og hvid tekst på blå bliver til noget ulæseligt i det
   øjeblik musen rammer. */
.ss-kontakt-el--primaer,
.ss-kontakt-el--primaer:hover,
.ss-kontakt-el--primaer:focus,
.ss-kontakt-el--primaer:active { color: #fff; }
.ss-kontakt-el--primaer:hover { background: #1a43b8; border-color: #1a43b8; }
.ss-kontakt-el:not(.ss-kontakt-el--primaer),
.ss-kontakt-el:not(.ss-kontakt-el--primaer):hover { color: #14181b; }
/* Den rolige hover gælder de IKKE-primære knapper.
   Her stod `:not(.ss-kontakt-el--tlf)` — en klasse der aldrig blev skrevet i
   markupen, så undtagelsen ramte ingenting. Telefonknappen er netop den
   primære når der ikke er en adresse, og fordi `:not()` tæller sit argument
   med, var denne regel (0,3,0) mod den primæres (0,2,0). Den grå baggrund
   vandt, mens `color:#fff` blev stående: hvid tekst på lysegrå. */
.ss-kontakt-el:not(.ss-kontakt-el--primaer):hover {
	border-color: #14181b; background: #f7f8f9;
}
.ss-kontakt-el:focus-visible { outline: 2px solid #1f4fd8; outline-offset: 2px; }
/* Siden er tredje valg: nummeret er svaret, siden er stedet hvor det også
   står. Derfor et roligt link og ikke en knap. */
.ss-kontakt-side {
	font-size: 13px; color: #2a3f9e; text-decoration: underline;
	text-underline-offset: 2px; margin-left: 4px;
}
.ss-kontakt-side:hover { color: #14181b; }
@media (max-width: 560px) {
	.ss-kontakt-el { flex: 1 1 100%; justify-content: center; }
	.ss-kontakt-side { margin: 4px 0 0; }
}

/* Fakta under handlingerne: adresse og åbningstider.
   De skal LÆSES, ikke trykkes på — derfor ingen ramme, ingen baggrund og
   ingen af knappernes vægt. Står de på knappernes linje, ligner de knapper
   der ikke virker. */
.ss-fakta {
	display: flex; flex-wrap: wrap; gap: 4px 22px;
	margin-top: 11px; font-size: 13.5px; color: #4a5257; line-height: 1.5;
}
.ss-fakta-el { display: block; }

/* Åbningstider fra Google — butikken og udstillingen.
   De to har vidt forskellige tider (butik 07-16, udstilling 07-21), og
   pointen er at kunden kan se det med det samme. Derfor status først og
   fremhævet, ugeskemaet ikke med: skal man kende lørdagens tid, er man
   ovre i noget der hører hjemme på en side. */
.ss-tider { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 11px; }
.ss-tid { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.ss-tid-prik {
	width: 8px; height: 8px; border-radius: 50%; background: #0b6b3a; flex: none;
}
.ss-tid-prik--lukket { background: #8a5300; }
.ss-tid-navn { color: #4a5257; }
.ss-tid-status { font-weight: 600; color: #14181b; }

/* Adressen på et «find vej»-kort.
   Den ER svaret på spørgsmålet, ikke en fodnote til en knap — derfor står
   den før handlingerne og i en størrelse man kan læse på afstand af en
   telefon i en bil. */
.ss-adresse {
	display: block; margin-top: 6px;
	font-size: 16px; font-weight: 500; color: #14181b;
}

/* --- besked til skærmlæsere -------------------------------------- */
/* Synlig for skærmlæsere, usynlig på skærmen. `display:none` og
   `visibility:hidden` ville skjule den for BEGGE — en live-region skal
   findes i tilgængelighedstræet for at blive læst op. Derfor klippes den
   ned til ét pixel i stedet. */
.ss-status {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}