/*
 * Archivo Narrow, SIL Open Font License 1.1 - se assets/fonts/OFL.txt.
 *
 * Variabelt snitt: EN fil per teckenuppsättning täcker hela viktomfånget
 * 400-700, därav "font-weight: 400 700". Latin räcker för svenska; latin-ext
 * följer med för namn och orter som inte gör det.
 *
 * font-display: swap - hellre rubriken i reservsnittet direkt än en tom yta
 * medan filen laddas.
 */
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/archivo-narrow-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/archivo-narrow-latin-ext.woff2") format("woff2");
	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;
}

/*
 * WBNT – designsystem.
 *
 * Formspråket är hämtat ur lagrets egen värld: hyllkanter, följesedlar och
 * etiketter. Rubriker i ett smalt grotesk-snitt som skyltningen på ett lager,
 * identifierare och siffror i monospace, hårfina linjer i stället för skuggor.
 *
 * Färgerna ligger som variabler på :root. Mörkt läge skriver bara om
 * variablerna – aldrig enskilda regler – så att varje yta och varje text
 * hämtar sin färg ur samma uppsättning.
 *
 * Ordning i filen: 1 variabler, 2 grund, 3 typografi, 4 knappar och fält,
 * 5 sidhuvud, 6 startsidan, 7 löpande text, 8 WooCommerce, 9 sidfot.
 */

/* ---------- 1. Variabler ---------------------------------------------- */

:root {
	--grund:       #E9ECEF;
	--papper:      #FFFFFF;
	--papper-alt:  #F4F6F7;
	--botten:      #0D1317;
	--ink:         #17222A;
	--ink-svag:    #5C6B76;
	--ink-tunn:    #8494A0;
	--linje:       #C6CFD5;
	--linje-tunn:  #DDE3E7;
	--signal:      #C24417;
	--signal-ink:  #FFFFFF;
	--ok:          #1E6A4C;
	--varning:     #8A6100;
	--fel:         #A82C2C;

	--f-display: "Archivo Narrow", "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", Arial, sans-serif;
	--f-brod:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--f-data:    "Consolas", ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;

	--spalt:  1180px;
	--smal:   720px;
	--kant:   24px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--grund:      #0E1418;
		--papper:     #161E24;
		--papper-alt: #1B242B;
		--botten:     #080C0F;
		--ink:        #E4EAEE;
		--ink-svag:   #94A4AF;
		--ink-tunn:   #6C7C87;
		--linje:      #2C373E;
		--linje-tunn: #222C33;
		--signal:     #FF7442;
		--signal-ink: #12181C;
		--ok:         #4FBF8F;
		--varning:    #D6A430;
		--fel:        #F08A8A;
	}
}

:root[data-theme="dark"] {
	--grund:      #0E1418;
	--papper:     #161E24;
	--papper-alt: #1B242B;
	--botten:     #080C0F;
	--ink:        #E4EAEE;
	--ink-svag:   #94A4AF;
	--ink-tunn:   #6C7C87;
	--linje:      #2C373E;
	--linje-tunn: #222C33;
	--signal:     #FF7442;
	--signal-ink: #12181C;
	--ok:         #4FBF8F;
	--varning:    #D6A430;
	--fel:        #F08A8A;
}

/* ---------- 2. Grund --------------------------------------------------- */

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

body {
	margin: 0;
	background: var(--grund);
	color: var(--ink);
	font-family: var(--f-brod);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

.mitt {
	width: 100%;
	max-width: var(--spalt);
	margin-inline: auto;
	padding-inline: var(--kant);
}
.mitt.smal { max-width: var(--smal); }

.skarmlasare {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.hoppa-till-innehall {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--signal); color: var(--signal-ink);
	padding: 10px 16px; font-family: var(--f-data); font-size: 13px;
}
.hoppa-till-innehall:focus { left: 8px; top: 8px; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
}

.sajt__innehall { display: block; }
.sajt__innehall:not(.sajt__innehall--start) { padding-block: 52px 72px; }

/* ---------- 3. Typografi ----------------------------------------------- */

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	text-wrap: balance;
	margin: 0;
}

h1 {
	font-size: clamp(52px, 8vw, 104px);
	line-height: .92;
	letter-spacing: -.015em;
	text-transform: uppercase;
}

h2 {
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.02;
	letter-spacing: -.005em;
	text-transform: uppercase;
}

h3 { font-size: 21px; line-height: 1.2; }

p { margin: 0; }

/* Etiketten. Det lilla monospace-ordet som sitter över varje rubrik, som en
   artikeltext på en hyllkant. */
.stampel {
	font-family: var(--f-data);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-tunn);
	margin: 0;
}

/* ---------- 4. Knappar och fält ---------------------------------------- */

.knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.knapp,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-block;
	font-family: var(--f-data);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.4;
	padding: 11px 18px;
	border: 1px solid var(--signal);
	border-radius: 0;
	background: var(--signal);
	color: var(--signal-ink);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.knapp:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: transparent;
	color: var(--signal);
}

.knapp--tom {
	background: transparent;
	color: var(--ink);
	border-color: var(--linje);
}
.knapp--tom:hover { border-color: var(--signal); color: var(--signal); }

.knapp--liten { padding: 8px 13px; font-size: 11px; }

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
	font-family: var(--f-brod);
	font-size: 15px;
	padding: 10px 12px;
	background: var(--papper);
	color: var(--ink);
	border: 1px solid var(--linje);
	border-radius: 0;
}

.sokform { display: flex; gap: 8px; margin-top: 20px; }
.sokform input[type="search"] { flex: 1 1 auto; min-width: 0; }

/* ---------- 5. Sidhuvud ------------------------------------------------ */

.topp {
	position: sticky; top: 0; z-index: 20;
	background: var(--papper);
	border-bottom: 1px solid var(--linje);
}

.topp__rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 62px;
}

.marke { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marke__ord {
	font-family: var(--f-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 24px;
}
.marke__tag {
	font-family: var(--f-data);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--signal-ink);
	background: var(--signal);
	padding: 3px 6px 2px;
}

.custom-logo { max-height: 40px; width: auto; }

.topp__meny { display: flex; align-items: center; gap: 26px; }
.topp__lista { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.topp__lista a,
.topp__lank { font-size: 14px; text-decoration: none; color: var(--ink-svag); }
.topp__lista a:hover,
.topp__lank:hover { color: var(--signal); }

.topp__konto { display: flex; align-items: center; gap: 16px; }
.topp__antal {
	font-size: 11px;
	margin-left: 6px;
	padding-left: 6px;
	border-left: 1px solid currentColor;
	font-variant-numeric: tabular-nums;
}

/* Menyknappen finns bara på små skärmar. Två streck räcker – tre är en vana,
   inte ett krav. */
.topp__oppna {
	display: none;
	background: transparent;
	border: 1px solid var(--linje);
	padding: 10px 12px;
	cursor: pointer;
}
.topp__streck,
.topp__streck::before {
	display: block;
	width: 18px; height: 1px;
	background: var(--ink);
}
.topp__streck::before { content: ""; transform: translateY(-5px); }

@media (max-width: 860px) {
	.topp__oppna { display: block; }
	.topp__meny {
		display: none;
		position: absolute;
		inset: 62px 0 auto 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 22px var(--kant) 26px;
		background: var(--papper);
		border-bottom: 1px solid var(--linje);
	}
	.topp__meny.ar-oppen { display: flex; }
	.topp__lista { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- 6. Startsidan ---------------------------------------------- */

.hjalte { background: var(--papper); border-bottom: 1px solid var(--linje); }

.hjalte__rutnat {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
	align-items: start;
	padding-block: clamp(48px, 7vw, 92px) clamp(44px, 6vw, 76px);
}
@media (max-width: 900px) {
	.hjalte__rutnat { grid-template-columns: 1fr; gap: 40px; }
}

/* Ingen följesedel att visa - då är hjälten en spalt, inte en halv. */
.hjalte__rutnat--ensam { grid-template-columns: 1fr; }
.hjalte__rutnat--ensam .hjalte__ingress { max-width: 58ch; }

.hjalte__ingress {
	max-width: 46ch;
	margin-top: 24px;
	font-size: 19px;
	color: var(--ink-svag);
}

/* Strimlan: ett hårfint bandmönster i hyllkantens anda. Härlett ur sajtens
   namn, inte slumpat – samma sida ska se likadan ut vid varje laddning. */
.strimla { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-bottom: 22px; }
.strimla i { display: block; height: 100%; background: var(--ink); }

/* Följesedeln */
.sedel { background: var(--papper-alt); border: 1px solid var(--linje); }
.sedel__topp {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 14px 18px; border-bottom: 1px solid var(--linje);
}
.sedel__rader { list-style: none; margin: 0; padding: 0; }
.sedel__rader li {
	display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
	padding: 9px 18px; border-bottom: 1px solid var(--linje-tunn); font-size: 14px;
}
.sedel__rader li span:last-child {
	font-family: var(--f-data); font-size: 12px; color: var(--ink-tunn);
	font-variant-numeric: tabular-nums;
}
.sedel__summa {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 14px 18px;
	font-family: var(--f-data); font-size: 13px;
	text-transform: uppercase; letter-spacing: .1em;
}
.sedel__summa b {
	font-family: var(--f-display); font-size: 26px; letter-spacing: 0;
	color: var(--signal);
}

/* Påståendena */
.pastaenden {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--linje);
}
@media (max-width: 860px) { .pastaenden { grid-template-columns: 1fr; } }

.pastaende {
	padding: 34px 30px 38px;
	background: var(--papper);
	border-right: 1px solid var(--linje);
}
.pastaende:last-child { border-right: 0; }
@media (max-width: 860px) {
	.pastaende { border-right: 0; border-bottom: 1px solid var(--linje); }
	.pastaende:last-child { border-bottom: 0; }
}
.pastaende__rubrik { font-size: 21px; text-transform: none; letter-spacing: 0; margin-block: 12px 10px; }
.pastaende p { color: var(--ink-svag); font-size: 15px; }

/* Sektioner */
.sektion { padding-block: clamp(56px, 7vw, 88px); }
.sektion--tat { padding-top: 0; }
.sektion__huvud {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; margin-bottom: 34px;
}
.sektion__huvud p:not(.stampel) { color: var(--ink-svag); max-width: 52ch; margin-top: 12px; }
.sektion__huvud h2 { margin-top: 4px; }

/* Katalogen */
.katalog { background: var(--papper); border: 1px solid var(--linje); overflow-x: auto; }
.katalog table { width: 100%; border-collapse: collapse; min-width: 640px; }
.katalog th,
.katalog td { text-align: left; padding: 11px 18px; vertical-align: baseline; }
.katalog thead th {
	font-family: var(--f-data); font-size: 10px; font-weight: 400;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-tunn);
	background: var(--papper-alt);
	border-bottom: 1px solid var(--linje);
}
.katalog tbody tr { border-bottom: 1px solid var(--linje-tunn); }
.katalog tbody tr:hover td { background: var(--papper-alt); }
.katalog tr.grupp td {
	font-family: var(--f-data); font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--signal); background: var(--papper-alt);
	padding-block: 9px;
}
.katalog tr.grupp:hover td { background: var(--papper-alt); }
.katalog .namn { font-weight: 600; white-space: nowrap; }
.katalog .namn a { text-decoration: none; }
.katalog .namn a:hover { color: var(--signal); }
.katalog td.gor { color: var(--ink-svag); font-size: 14px; }
/* Kolumnen heter belopp och inte pris: .pris är rutnätet i prisblocket längre
   ner, och två regler med samma namn hade dragit i samma celler. */
.katalog .belopp { white-space: nowrap; font-variant-numeric: tabular-nums; }

/*
 * Momsraden under priset.
 *
 * Woo lägger sin momsmärkning sist i prissträngen som ett <small>. Den
 * bär nu även beloppet med moms, och blir för lång för att stå på samma
 * rad som priset - särskilt i katalogen, där 31 rader ligger under
 * varandra och ögat följer sifferkolumnen.
 */
.woocommerce-price-suffix {
	display: block;
	margin-top: 3px;
	font-family: var(--f-data);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .03em;
	color: var(--ink-tunn);
}


/* Stegen */
.steg {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	list-style: none; margin: 0; padding: 0;
	background: var(--linje); border: 1px solid var(--linje);
}
@media (max-width: 860px) { .steg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steg { grid-template-columns: 1fr; } }

.steg__ruta { background: var(--papper); padding: 26px 24px 30px; }
.steg__nr { font-family: var(--f-data); font-size: 11px; letter-spacing: .14em; color: var(--signal); }
.steg__ruta h3 { margin-block: 10px 8px; font-size: 19px; }
.steg__ruta p { font-size: 14px; color: var(--ink-svag); }

/* Pris */
.pris { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 780px) { .pris { grid-template-columns: 1fr; } }

.pris__kort { background: var(--papper); border: 1px solid var(--linje); padding: 30px 28px 32px; }
.pris__belopp {
	font-family: var(--f-display);
	font-size: 56px; line-height: 1;
	letter-spacing: -.01em;
	margin-block: 14px 4px;
	font-variant-numeric: tabular-nums;
}
.pris__belopp .woocommerce-Price-amount { font-family: inherit; }
.pris__belopp .woocommerce-price-suffix {
	margin-top: 10px;
	font-family: var(--f-brod);
	font-size: 13px;
	letter-spacing: 0;
}
.pris__belopp .woocommerce-price-suffix .woocommerce-Price-amount { font-family: inherit; }
.pris__kort .pris__under { margin-top: 8px; }
.pris__fran { font-family: var(--f-data); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tunn); margin-right: 6px; }
.pris__enhet,
.pris__period { font-family: var(--f-data); font-size: 13px; letter-spacing: .08em; color: var(--ink-tunn); }
.pris__belopp .pris__enhet { margin-left: 6px; }
.pris__saknas { color: var(--ink-tunn); }
.pris__under { font-family: var(--f-data); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tunn); }
.pris__kort > p:last-child { margin-top: 16px; font-size: 15px; color: var(--ink-svag); }
.pris__moms { margin-top: 20px; font-family: var(--f-data); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tunn); }

.utkast {
	display: inline-block; flex: none;
	font-family: var(--f-data); font-size: 10px;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--varning); border: 1px solid currentColor;
	padding: 3px 7px 2px;
}

/* Villkoren */
.villkor__stampel { margin-bottom: 18px; }
.villkor {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px;
	margin: 0; border-top: 1px solid var(--linje);
}
@media (max-width: 700px) { .villkor { grid-template-columns: 1fr; } }
.villkor > div {
	display: grid; grid-template-columns: 150px 1fr; gap: 16px;
	padding: 13px 0; border-bottom: 1px solid var(--linje-tunn); font-size: 14px;
}
.villkor dt {
	font-family: var(--f-data); font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-tunn); padding-top: 2px;
}
.villkor dd { margin: 0; color: var(--ink-svag); }

/* Avslutet */
.avslut { background: var(--botten); }
.avslut .mitt { padding-block: clamp(52px, 6vw, 78px); }
.avslut h2 { color: #FFFFFF; margin-top: 4px; }
.avslut p:not(.stampel) { color: #9AA8B2; max-width: 48ch; margin-top: 14px; }
.avslut .stampel { color: #7A8892; }
.avslut .knapp--tom { color: #E7ECEF; border-color: #37444C; }
.avslut .knapp--tom:hover { color: var(--signal); border-color: var(--signal); }

/* ---------- 7. Löpande text -------------------------------------------- */

.artikel__huvud { margin-bottom: 26px; }
.artikel__rubrik { font-size: clamp(32px, 5vw, 52px); line-height: 1.02; }
.artikel__text { font-size: 17px; max-width: 65ch; }
.artikel__text > * + * { margin-top: 1.1em; }
.artikel__text h2 { font-size: 28px; margin-top: 1.8em; }
.artikel__text h3 { margin-top: 1.6em; }
.artikel__text ul,
.artikel__text ol { padding-left: 1.3em; }
.artikel__text li + li { margin-top: .4em; }
.artikel__text a { color: var(--signal); }
.artikel__text blockquote {
	border-left: 2px solid var(--signal);
	padding-left: 18px; color: var(--ink-svag);
}

/* Manualrutor: fälla, kvitto och obs.
 *
 * Selektorn är .artikel__text .manual-ruta och inte bara .manual-ruta -
 * blockquote-regeln ovan är .artikel__text blockquote och väger tyngre än en
 * ensam klass. Utan den extra nivån hade rutorna sett ut som vanliga citat och
 * färgkodningen aldrig synts.
 *
 * Bakgrunden blandas fram ur samma token som kanten, så tonen följer med i
 * mörkt läge utan en enda extra färg. Raden före är en reserv för webbläsare
 * utan color-mix; då blir rutan neutralt tonad i stället för ofärgad. */
.artikel__text .manual-ruta {
	border-left-width: 3px;
	padding: 16px 18px;
	color: var(--ink);
	background: var(--papper-alt);
}
.artikel__text .manual-ruta > *:first-child { margin-top: 0; }

.artikel__text .manual-fal {
	border-left-color: var(--fel);
	background: color-mix(in srgb, var(--fel) 8%, var(--papper));
}
.artikel__text .manual-kvitto {
	border-left-color: var(--ok);
	background: color-mix(in srgb, var(--ok) 8%, var(--papper));
}
.artikel__text .manual-obs {
	border-left-color: var(--varning);
	background: color-mix(in srgb, var(--varning) 8%, var(--papper));
}

/* Kodrutor inne i en manualruta ska inte konkurrera med tonen. */
.artikel__text .manual-ruta pre {
	background: var(--papper);
	margin-block: .8em;
}
.artikel__text code { font-family: var(--f-data); font-size: .92em; background: var(--papper-alt); padding: 2px 5px; }
.artikel__text pre { background: var(--papper-alt); border: 1px solid var(--linje); padding: 16px; overflow-x: auto; }

.artikel + .artikel { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--linje); }

.traff { padding-block: 22px; border-bottom: 1px solid var(--linje-tunn); }
.traff__rubrik { font-size: 24px; text-transform: none; letter-spacing: 0; margin-block: 6px 8px; }
.traff__rubrik a { text-decoration: none; }
.traff__rubrik a:hover { color: var(--signal); }
.traff__text { color: var(--ink-svag); font-size: 15px; }

.sida__huvud { margin-bottom: 30px; }
.tomt { color: var(--ink-svag); padding: 26px 0; }
.fyrahundrafyra p { color: var(--ink-svag); margin-top: 14px; max-width: 46ch; }

.pagination,
.navigation { margin-top: 40px; font-family: var(--f-data); font-size: 13px; }
.navigation a { text-decoration: none; }
.navigation a:hover { color: var(--signal); }

/* ---------- 8. WooCommerce --------------------------------------------- */

.sajt__innehall--butik { padding-block: 32px 72px; }

.woocommerce-breadcrumb {
	font-family: var(--f-data); font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-tunn); margin-bottom: 26px;
}
.woocommerce-breadcrumb a { text-decoration: none; color: var(--ink-tunn); }
.woocommerce-breadcrumb a:hover { color: var(--signal); }

.woocommerce .page-title,
.woocommerce-products-header__title { font-size: clamp(32px, 5vw, 52px); margin-bottom: 26px; }

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0; padding: 0;
	background: var(--linje);
	border: 1px solid var(--linje);
	list-style: none;
}
@media (max-width: 860px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/*
 * WooCommerce clearfix på listan blir en tom ruta.
 *
 * Deras ::before och ::after finns för att hålla ihop flytande kort. I en grid
 * räknas varje pseudoelement som ett eget rutnätsbarn, så listan inleddes med
 * en tom cell och produkterna sköts ett steg fram.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/*
 * Bredden måste vinna över WooCommerce egen.
 *
 * Woo skriver kolumnantalet som en klass PÅ LISTAN - ul.products.columns-3 -
 * och den extra klassen gör deras regel mer specifik än temats. Temats
 * width:auto förlorade, och varje kort blev 30,75 % av sin egen rutnätscell:
 * bilderna krympte till frimärken och rutnätet spretade.
 *
 * Attributselektorn väger lika mycket som deras klass, och temats stilmall
 * laddas sist. Den träffar dessutom alla kolumnantal, så regeln överlever att
 * loop_shop_columns ändras.
 */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto; float: none; margin: 0;
	background: var(--papper);
	padding: 24px 22px 26px;
	display: flex; flex-direction: column; gap: 8px;
}
.woocommerce ul.products li.product:hover { background: var(--papper-alt); }
.woocommerce ul.products li.product a img { margin-bottom: 8px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--f-display); font-size: 22px; line-height: 1.15;
	padding: 0; margin: 0;
}
.woocommerce ul.products li.product .price {
	color: var(--ink); font-size: 17px; margin: 0;
	font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .button { align-self: flex-start; margin-top: 8px; }
.woocommerce ul.products li.product .onsale { display: none; }

.woocommerce div.product .product_title { font-size: clamp(34px, 5vw, 56px); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ink); font-size: 30px;
	font-family: var(--f-display);
	font-variant-numeric: tabular-nums;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--linje); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--papper-alt); border-color: var(--linje); border-radius: 0;
	font-family: var(--f-data); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--papper); border-bottom-color: var(--papper); }

.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
	border: 1px solid var(--linje); border-radius: 0; border-collapse: collapse;
	background: var(--papper);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--linje-tunn); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 26px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--signal);
	background: var(--papper);
	border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--signal); }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linje); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--linje-tunn); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block; padding: 11px 16px; text-decoration: none;
	font-family: var(--f-data); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-svag);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: var(--signal); background: var(--papper-alt); }

/* ---------- 9. Sidfot --------------------------------------------------- */

.sidfot { background: var(--botten); color: #6E7C86; }
.sidfot__widgetar {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px; padding-block: 44px 34px;
	border-bottom: 1px solid #1E272D;
}
.widget__rubrik {
	font-family: var(--f-data); font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase;
	color: #7A8892; margin-bottom: 12px;
}
.sidfot__widgetar ul { list-style: none; margin: 0; padding: 0; }
.sidfot__widgetar li + li { margin-top: 8px; }

.sidfot__rad {
	display: flex; flex-wrap: wrap; justify-content: space-between;
	gap: 16px; padding-block: 26px; font-size: 13px;
}
.sidfot a { color: #9AA8B2; text-decoration: none; }
.sidfot a:hover { color: var(--signal); }
.sidfot__lista { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* ---------- Rörelse ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

.katalog tr.ar-paket { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.paketmarke { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 2px; background: var(--signal); color: var(--signal-ink); font-family: var(--f-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.paketspar { display: block; margin-top: 2px; font-family: var(--f-data); font-size: 11px; color: var(--ink-tunn); }
.paketspar del { margin-right: 6px; }

/* Paketets innehåll på produktsidan */
.paketruta {
	margin: 22px 0;
	padding: 18px 20px 20px;
	background: var(--papper-alt);
	border: 1px solid var(--linje);
}
.paketruta__rubrik {
	margin: 0 0 12px;
	font-family: var(--f-data);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--signal);
}
.paketruta__lista { list-style: none; margin: 0; padding: 0; }
.paketruta__lista li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--linje-tunn);
	font-size: 14px;
}
.paketruta__lista li:last-child { border-bottom: 0; }
.paketruta__lista a { text-decoration: none; }
.paketruta__lista a:hover { color: var(--signal); }
/* Sifferkolumnen ska gå att läsa nedåt, som i katalogen. */
.paketruta__pris {
	flex: none;
	font-family: var(--f-data);
	font-size: 13px;
	color: var(--ink-tunn);
	font-variant-numeric: tabular-nums;
}
.paketruta__spar {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--ink-svag);
}

/* "Ingår i"-rutan på en medlemsprodukt. Samma ruta som paketets, men
   antalet plugin står under namnet i stället för i priskolumnen - annars
   tävlar två siffror om samma plats och ingen av dem läses. */
.paketruta--medlem .paketruta__lista a { display: block; }
.paketruta__antal {
	display: block;
	font-family: var(--f-data);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-svag);
}

/* ---------- 10. Blockkassan och blockvarukorgen ----------------------- */

/*
 * WooCommerces block är skrivna för en ljus sida: fälten får vita bakgrunder
 * och mörk text ur blockens egen CSS, medan vår sida byter palett efter
 * besökarens systeminställning. I mörkt läge blev resultatet nästan oläsligt -
 * ljus text på vit ruta, eller mörk text på mörk yta.
 *
 * Lösningen är INTE att tvinga vita fält (då går temats mörka läge sönder för
 * den som valt det) utan att låta fälten hämta sina färger ur samma variabler
 * som resten av sidan. Då stämmer de i båda lägena, och ändringar i paletten
 * följer med hit av sig själv.
 */

/*
 * Berätta för webbläsaren vilket läge sidan är i.
 *
 * Utan detta ritar den själva WIDGETARNA ljusa - landlistans rullgardin,
 * autofyllda fält, rullisterna - och en del webbläsare "hjälper" dessutom
 * till genom att måla om vita ytor till mörka vid uppritningen, vilket gör
 * att det vi läser i CSS:en inte är det som syns.
 */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { color-scheme: dark; }
}

.wc-block-checkout input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.wc-block-checkout select,
.wc-block-checkout textarea,
.wp-block-woocommerce-cart input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.wp-block-woocommerce-cart select,
.wc-block-components-form input:not([type="radio"]):not([type="checkbox"]),
.wc-block-components-text-input input,
.wc-block-components-textarea {
	background-color: var(--papper) !important;
	color: var(--ink) !important;
	/* Autofyllda fält målar texten med -webkit-text-fill-color, inte color. */
	-webkit-text-fill-color: var(--ink);
	border-color: var(--linje) !important;
}

.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder,
.wc-block-checkout input::-webkit-input-placeholder,
.wc-block-components-text-input input::placeholder,
.wc-block-components-text-input input::-webkit-input-placeholder,
.wp-block-woocommerce-cart input::placeholder {
	color: var(--ink-svag) !important;
	opacity: 1; /* Firefox dämpar platshållaren en gång till. */
}

/* Flytande etiketter ligger INUTI fältet och måste följa fältets bakgrund. */
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description,
.wc-block-components-address-card__edit,
.wc-block-components-form .wc-block-components-text-input.is-active label {
	color: var(--ink-svag) !important;
}

/* Etiketter PÅ sidans egen bakgrund ska vara ljusa i mörkt läge - de ärver
   --ink och ska inte fångas av regeln ovan. */
.wc-block-checkout__shipping-method-option-title,
.wc-block-components-radio-control__option,
.wc-block-components-checkbox__label,
.wc-block-components-totals-item__label {
	color: var(--ink);
}

/*
 * Antalsbrickan ritas med currentColor på BÅDE text och bakgrund, så siffran
 * blir osynlig oavsett palett. Den får signalfärgen i stället - antalet är
 * det enda som skiljer två annars identiska rader.
 */
.wc-block-components-order-summary-item__quantity {
	background: var(--signal) !important;
	color: var(--signal-ink) !important;
	border-color: var(--signal) !important;
	box-shadow: none;
}

/* Fel- och hjälptext ska läsas, inte gissas. */
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
	color: var(--fel) !important;
}

/* ---------- 11. Raderna i varukorg och kassa -------------------------- */

/*
 * Blockvarukorgen ritar ALL radmetadata på en enda rad, separerad med " / ":
 * "Artikelnummer: wbnt-pos / Lagerstatus: I lager / ...". Den som letar efter
 * ett artikelnummer får läsa en mening. Varje uppgift ska ha en egen rad, och
 * skiljetecknet - som bara finns för synens skull - ska bort.
 */
.wc-block-components-product-details > span { display: block; }
.wc-block-components-product-details span[aria-hidden="true"] { display: none; }

/*
 * I KASSAN är man klar med att välja. Där ska raden svara på "är det här rätt
 * sak?" och inget mer: namn, artikelnummer och antal. Lagerstatus, komponent-
 * listor och den korta beskrivningen hör hemma i varukorgen, inte här.
 *
 * Återvisningen måste matcha "> span" för att vinna på specificitet.
 */
.wc-block-checkout .wc-block-components-product-details > span { display: none; }
.wc-block-checkout .wc-block-components-product-details > span.wc-block-components-product-details__artikelnummer { display: block; }
.wc-block-checkout .wc-block-components-product-metadata__description { display: none; }

/* Antalet skrivs ut av kassaskriptet - blocken visar det bara i brickan. */
.wbnt-kassa-antal {
	margin-top: 4px;
	font-family: var(--f-data);
	font-size: 12px;
	color: var(--ink-svag);
}

/* Produktnamnet blir en länk (kassaskriptet). Den ska se ut som text tills
   man pekar på den - kassan är ingen katalog att surfa vidare i. */
.wc-block-checkout .wc-block-components-product-name a { color: inherit; text-decoration: none; }
.wc-block-checkout .wc-block-components-product-name a:hover,
.wc-block-checkout .wc-block-components-product-name a:focus { text-decoration: underline; }