/*
 * WBNT Tema Elprylar – huvudstilmall.
 *
 * Ordningen är medveten: tokens, reset, typografi, layout, komponenter,
 * WooCommerce. Lägg nytt i rätt block i stället för längst ned, annars
 * börjar selektorerna slåss om varandra.
 *
 * Uttryck: mörkt och blått. Djup marin-slate som botten, ljus text, och en
 * klar blå accent på knappar och länkar. Korten är en aning ljusare yta än
 * botten så de lyfter, och produktbilderna sitter på en vit ruta så själva
 * fotot alltid syns rent mot det mörka. Färg och form bor i tokens (:root) –
 * ändra där, så följer resten med. Vill du ljusare/mörkare botten: skruva
 * på --farg-bakgrund och --farg-yta-kort.
 */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
	/* Bas-palett – mörk marin + klarblå accent. */
	--bla-950: #0a1626; /* mörkaste band: topprad, nav, sidfot */
	--bla-900: #0e1b2e; /* sid-botten */
	--bla-800: #16263f; /* ytor/band */
	--bla-700: #1b2f4d; /* kort */
	--bla-600: #22344f; /* ramar */
	--bla-500: #0e86d1; /* accent – knappar (Kjell-blå, ljusare på mörkt) */
	--bla-400: #2fa1e0;
	--bla-300: #7db3f2; /* länkar på mörkt */
	--bla-100b: #1e3352; /* hover-yta för ikoner m.m. */

	/* Färg */
	--farg-bakgrund: #0e1b2e;
	--farg-yta: #16263f;       /* sektionsband som skiljer sig från botten */
	--farg-yta-kort: #1b2f4d;  /* kort och paneler */
	--farg-text: #e7eef8;
	--farg-text-svag: #9db0c8;
	--farg-rubrik: #f4f8ff;
	--farg-ram: #26374f;
	--farg-primar: #0e86d1;      /* Kjell-blå CTA, upplyft för mörk botten */
	--farg-primar-mork: #2fa1e0; /* "mörk" = hover; ljusare på mörkt underlag */
	--farg-primar-text: #ffffff;
	--farg-accent: #2fa1e0;
	--farg-lank: #7db3f2;
	--farg-mork: #0a1626;      /* mörkaste band */
	--farg-mork-text: #e7eef8;
	--farg-kampanj: #ff6a2b;   /* Kjells kampanj-orange, upplyft för mörkt */
	--farg-rea: #ff5a63;
	--farg-rea-yta: #3a1c22;
	--farg-lager-ja: #35c26a;
	--farg-lager-nej: #ff5a63;

	/* Typografi – systemets egna sans-serif (snabb, ingen extern font). */
	--typsnitt-rubrik: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--typsnitt-brod: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--storlek-mikro: 0.75rem;
	--storlek-liten: 0.875rem;
	--storlek-brod: 1rem;
	--storlek-stor: 1.125rem;
	--storlek-h3: 1.375rem;
	--storlek-h2: 1.875rem;
	--storlek-h1: 2.5rem;
	--radhojd-brod: 1.6;
	--radhojd-rubrik: 1.2;
	--vikt-normal: 400;
	--vikt-medel: 600;
	--vikt-fet: 700;

	/* Mått */
	--avstand-1: 0.25rem;
	--avstand-2: 0.5rem;
	--avstand-3: 1rem;
	--avstand-4: 1.5rem;
	--avstand-5: 2rem;
	--avstand-6: 3rem;
	--avstand-7: 5rem;

	--bredd-behallare: 1280px;
	--bredd-smal: 760px;
	--radie: 4px;         /* stramare hörn, mer Kjell */
	--radie-stor: 6px;
	--radie-knapp: 2px;   /* Kjell-knappar är nästan raka */
	--radie-rund: 999px;
	--ram: 1px solid var(--farg-ram);
	--skugga: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
	--skugga-hog: 0 10px 28px rgba(0, 0, 0, 0.45);
	--overgang: 0.15s ease;
}

/* ------------------------------------------------------------------ 2. Bas */

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

body {
	margin: 0;
	background: var(--farg-bakgrund);
	color: var(--farg-text);
	font-family: var(--typsnitt-brod);
	font-size: var(--storlek-brod);
	line-height: var(--radhojd-brod);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--farg-lank);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4 {
	font-family: var(--typsnitt-rubrik);
	line-height: var(--radhojd-rubrik);
	color: var(--farg-rubrik);
	margin: 0 0 var(--avstand-3);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--storlek-h1); font-weight: var(--vikt-fet); }
h2 { font-size: var(--storlek-h2); font-weight: var(--vikt-fet); }
h3 { font-size: var(--storlek-h3); font-weight: var(--vikt-medel); }

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

.hoppa-till-innehall {
	position: absolute;
	left: -9999px;
}

.hoppa-till-innehall:focus {
	left: var(--avstand-3);
	top: var(--avstand-3);
	z-index: 100;
	padding: var(--avstand-2) var(--avstand-3);
	background: var(--farg-yta-kort);
	color: var(--farg-text);
	border-radius: var(--radie);
	box-shadow: var(--skugga-hog);
}

/* --------------------------------------------------------------- 3. Layout */

.behallare {
	width: 100%;
	max-width: var(--bredd-behallare);
	margin-inline: auto;
	padding-inline: var(--avstand-3);
}

.behallare--smal {
	max-width: var(--bredd-smal);
}

.sajt__innehall {
	padding-block: var(--avstand-5);
}

/* ----------------------------------------------------------- 4. Komponenter */

.knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--avstand-2);
	padding: 0.75rem var(--avstand-4);
	border: 1px solid transparent;
	border-radius: var(--radie-knapp);
	font-size: var(--storlek-liten);
	font-weight: var(--vikt-fet);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--overgang), border-color var(--overgang), color var(--overgang), box-shadow var(--overgang);
}

.knapp:hover { text-decoration: none; }

.knapp--primar {
	background: var(--farg-primar);
	border-color: var(--farg-primar);
	color: var(--farg-primar-text);
}

.knapp--primar:hover {
	background: var(--farg-primar-mork);
	border-color: var(--farg-primar-mork);
	color: #fff;
	box-shadow: var(--skugga);
}

.knapp--sekundar {
	background: transparent;
	border-color: var(--farg-ram);
	color: var(--farg-text);
}

.knapp--sekundar:hover {
	border-color: var(--farg-primar);
	color: #fff;
}

/* Sektionsrubrik (wbnt_te_sektionsrubrik). */
.sektion__huvud { margin-bottom: var(--avstand-4); }
.sektion__rubrik { margin: 0; font-size: var(--storlek-h2); }
.sektion__underrubrik {
	margin: var(--avstand-2) 0 0;
	color: var(--farg-text-svag);
	font-size: var(--storlek-stor);
}

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

.kampanjrad {
	background: var(--bla-950);
	color: var(--farg-mork-text);
	padding-block: var(--avstand-2);
	text-align: center;
	font-size: var(--storlek-liten);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kampanjrad a { color: #fff; text-decoration: underline; }

.huvud__topp {
	background: var(--bla-950);
	color: var(--farg-mork-text);
	font-size: var(--storlek-liten);
}

.huvud__topp-rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--avstand-3);
	min-height: 38px;
}

.huvud__topp a { color: var(--farg-mork-text); }

.toppmeny {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avstand-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kundtypsväxel. */
.kundtyp {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radie-rund);
	padding: 2px;
}

.kundtyp__val {
	border: 0;
	background: transparent;
	color: var(--farg-mork-text);
	padding: 0.25rem 0.9rem;
	border-radius: var(--radie-rund);
	font-size: var(--storlek-liten);
	cursor: pointer;
}

.kundtyp__val[aria-pressed="true"] {
	background: var(--farg-primar);
	color: #fff;
	font-weight: var(--vikt-medel);
}

/* Mellanraden: logotyp, sök, verktyg. */
.huvud__mitt {
	background: var(--farg-bakgrund);
	border-bottom: var(--ram);
}

.huvud__rad {
	display: flex;
	align-items: center;
	gap: var(--avstand-4);
	padding-block: var(--avstand-3);
}

.huvud__namn {
	display: inline-flex;
	align-items: center;
	gap: var(--avstand-2);
	font-size: 1.6rem;
	font-weight: var(--vikt-fet);
	color: var(--farg-rubrik);
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: -0.02em;
}

.huvud__namn:hover { text-decoration: none; }
.huvud__markning { width: 32px; height: 32px; flex: 0 0 auto; }

.huvud__logotyp img { max-height: 48px; width: auto; }

.huvud__sok { flex: 1 1 auto; max-width: 640px; }

.huvud__sok form { display: flex; width: 100%; }

.huvud__sok input[type="search"],
.huvud__sok .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem var(--avstand-3);
	border: 1px solid var(--farg-ram);
	border-right: 0;
	border-radius: var(--radie) 0 0 var(--radie);
	background: var(--bla-800);
	color: var(--farg-text);
	font-size: var(--storlek-brod);
}

.huvud__sok input::placeholder { color: #aebfd6; opacity: 1; }

.huvud__sok input[type="search"]:focus,
.huvud__sok .search-field:focus {
	outline: none;
	border-color: var(--farg-primar);
	box-shadow: inset 0 0 0 1px var(--farg-primar);
}

.huvud__sok button {
	flex: 0 0 auto;
	padding: 0.65rem var(--avstand-4);
	border: 1px solid var(--farg-primar);
	background: var(--farg-primar);
	color: #fff;
	font-weight: var(--vikt-medel);
	border-radius: 0 var(--radie) var(--radie) 0;
	cursor: pointer;
}

.huvud__sok button:hover { background: var(--farg-primar-mork); border-color: var(--farg-primar-mork); }

.huvud__verktyg {
	display: flex;
	align-items: center;
	gap: var(--avstand-4);
	white-space: nowrap;
}

.huvud__konto { color: var(--farg-text); font-weight: var(--vikt-medel); }

.huvud__varukorg {
	display: inline-flex;
	align-items: center;
	gap: var(--avstand-2);
	padding: 0.55rem var(--avstand-3);
	background: var(--farg-primar);
	color: #fff;
	border-radius: var(--radie);
	font-weight: var(--vikt-medel);
}

.huvud__varukorg:hover { background: var(--farg-primar-mork); text-decoration: none; }
.huvud__varukorg-antal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	background: rgba(255, 255, 255, 0.25);
	border-radius: var(--radie-rund);
	font-size: var(--storlek-liten);
}

.huvud__meny-knapp {
	display: none;
	border: 1px solid var(--farg-ram);
	background: var(--bla-800);
	color: var(--farg-text);
	border-radius: var(--radie);
	padding: 0.55rem var(--avstand-3);
	font-weight: var(--vikt-medel);
	cursor: pointer;
}

/* Huvudmenyn. */
.huvud__navigering { background: var(--bla-950); }

.huvudmeny {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.huvudmeny li a {
	display: block;
	padding: 0.8rem var(--avstand-3);
	color: var(--farg-mork-text);
	font-weight: var(--vikt-medel);
	font-size: var(--storlek-liten);
	text-decoration: none;
}

.huvudmeny li a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Trygghetsraden. */
.trygghetsrad {
	background: var(--farg-yta);
	border-bottom: var(--ram);
}

.trygghetsrad__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avstand-5);
	margin: 0;
	padding-block: 0.6rem;
	list-style: none;
	font-size: var(--storlek-liten);
	color: var(--farg-text-svag);
}

.trygghetsrad__punkt {
	display: inline-flex;
	align-items: center;
	gap: var(--avstand-2);
}

.trygghetsrad__punkt::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	background: var(--farg-lager-ja);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.3 2.9 8l1.1-1.1 2.2 2.2 5-5L12.3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.3 2.9 8l1.1-1.1 2.2 2.2 5-5L12.3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mobilmeny (off-canvas). JS tar bort [hidden] för att öppna; panelen glider
   in från höger med en mörk backdrop bakom. Klick på backdrop eller Stäng
   stänger. Syns bara på mobil (knappen som öppnar döljs på desktop). */
.mobilmeny {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	justify-content: flex-end;
	background: rgba(0, 0, 0, 0.55);
}

.mobilmeny[hidden] { display: none; }

.mobilmeny__panel {
	width: min(330px, 85vw);
	height: 100%;
	background: var(--bla-900);
	border-left: var(--ram);
	box-shadow: var(--skugga-hog);
	padding: var(--avstand-4);
	overflow-y: auto;
}

.mobilmeny__stang {
	display: block;
	margin-left: auto;
	margin-bottom: var(--avstand-3);
	padding: 0.4rem 0.9rem;
	background: transparent;
	border: 1px solid var(--farg-ram);
	border-radius: var(--radie);
	color: var(--farg-text);
	font-weight: var(--vikt-medel);
	cursor: pointer;
}
.mobilmeny__stang:hover { border-color: var(--farg-primar); color: #fff; }

.mobilmeny__lista { list-style: none; margin: 0; padding: 0; }
.mobilmeny__lista li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobilmeny__lista a {
	display: block;
	padding: 0.85rem 0.25rem;
	color: var(--farg-text);
	font-weight: var(--vikt-medel);
	text-decoration: none;
}
.mobilmeny__lista a:hover { color: #fff; }
.mobilmeny__lista .sub-menu { list-style: none; margin: 0; padding-left: var(--avstand-3); }
.mobilmeny__lista .sub-menu a { font-weight: var(--vikt-normal); color: var(--farg-text-svag); }

/* Lås sidans scroll medan menyn är öppen. */
body.har-oppen-meny { overflow: hidden; }

/* ------------------------------------------------- 6. Startsidans sektioner */

.hero,
.genvagar,
.populara,
.varumarken,
.kategorier,
.guider {
	padding-block: var(--avstand-6);
}

/* Kategorigenvägar – ikonrad. */
.genvagar { padding-block: var(--avstand-5); }

.genvagar__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--avstand-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.genvagar__lank {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--avstand-2);
	height: 100%;           /* fyll cellen så alla boxar blir lika höga */
	min-height: 134px;
	padding: var(--avstand-3) var(--avstand-2);
	text-align: center;
	text-decoration: none;
	color: var(--farg-text);
	border: var(--ram);
	border-radius: var(--radie-stor);
	background: var(--farg-yta-kort);
	transition: border-color var(--overgang), box-shadow var(--overgang), transform var(--overgang);
}

.genvagar__lank:hover {
	border-color: var(--farg-primar);
	box-shadow: var(--skugga);
	transform: translateY(-2px);
	text-decoration: none;
}

.genvagar__ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radie-rund);
	background: var(--bla-100b);
	color: var(--farg-lank);
	font-size: 1.5rem;
}

.genvagar__ikon img { width: 34px; height: 34px; object-fit: contain; }
.genvagar__ikon svg { width: 30px; height: 30px; }

.genvagar__namn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5em;      /* reservera två rader så en radbrytning inte gör boxen högre */
	font-size: var(--storlek-liten);
	font-weight: var(--vikt-medel);
	line-height: 1.25;
	color: var(--farg-rubrik);
}

/* Hero. */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--bla-950) 0%, #123b78 55%, #1b57ad 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radie-stor);
	color: #fff;
}

/* Dekorativ krets-SVG till höger, tonad och bakom texten. */
.hero__dekor {
	position: absolute;
	inset: 0 0 0 auto;
	width: 46%;
	max-width: 460px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: var(--avstand-5);
	opacity: 0.22;
	pointer-events: none;
}

.hero__dekor svg { width: 100%; height: auto; }

.hero__innehall { position: relative; z-index: 1; max-width: 640px; padding-block: var(--avstand-5); }

.hero__rubrik {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.25rem);
	margin: 0 0 var(--avstand-3);
}

.hero__text {
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--storlek-stor);
	margin: 0 0 var(--avstand-4);
}

.hero .knapp--primar {
	background: #fff;
	border-color: #fff;
	color: var(--bla-950);
}

.hero .knapp--primar:hover {
	background: var(--bla-300);
	border-color: var(--bla-300);
	color: var(--bla-950);
}

/* Varumärken. */
.varumarken { background: var(--farg-yta); }

.varumarken__rad {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avstand-4);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}

.varumarken__post {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: 72px;
	padding: var(--avstand-3);
	background: #fff;
	border-radius: var(--radie);
	flex: 1 1 140px;
	max-width: 180px;
	color: #0a1626;
	font-weight: var(--vikt-medel);
}

.varumarken__post a { color: #0a1626; }
.varumarken__post img {
	max-height: 42px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.8;
	transition: filter var(--overgang), opacity var(--overgang);
}

.varumarken__post a:hover img { filter: grayscale(0); opacity: 1; }

/* Kategorier + Guider – kortrutnät. */
.kategorier__rutnat,
.guider__rutnat {
	display: grid;
	gap: var(--avstand-4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kategorier__kort,
.guider__kort {
	display: flex;
	flex-direction: column;
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-radius: var(--radie-stor);
	overflow: hidden;
	transition: box-shadow var(--overgang), transform var(--overgang), border-color var(--overgang);
}

.kategorier__kort:hover,
.guider__kort:hover {
	box-shadow: var(--skugga-hog);
	border-color: var(--farg-primar);
	transform: translateY(-3px);
}

.kategorier__lank,
.guider__lank { text-decoration: none; color: inherit; }

.kategorier__bild,
.guider__bild {
	aspect-ratio: 16 / 10;
	background: var(--bla-800);
	overflow: hidden;
}

.kategorier__bild img,
.guider__bild img { width: 100%; height: 100%; object-fit: cover; }

.kategorier__rubrik,
.guider__rubrik {
	margin: 0;
	padding: var(--avstand-3) var(--avstand-3) 0;
	font-size: var(--storlek-h3);
}

.kategorier__text,
.guider__text {
	margin: var(--avstand-2) 0 0;
	padding: 0 var(--avstand-3) var(--avstand-3);
	color: var(--farg-text-svag);
	font-size: var(--storlek-liten);
}

/* ------------------------------------------------------- 7. Produktkort (WC) */

.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--avstand-4) !important;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce sätter columns-N på arkivet + en FLOAT-layout som ger ojämna
 * rader (och luckor) när korten är olika höga. Lås till ett jämnt rutnät per
 * kolumnantal så alla rader blir raka. Floaten nollas på li.product nedan.
 */
.woocommerce ul.products[class*="columns-"],
ul.products[class*="columns-"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

/*
 * WooCommerce lägger clearfix-pseudoelement på ul.products (::before/::after).
 * I float-layouten är de osynliga, men när listan blir ett grid räknas de som
 * egna rutnätsceller → ett tomrum i början (::before tar cell 1) och i slutet
 * (::after). Släck dem så produkterna fyller från första cellen.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	clear: none !important;
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-radius: var(--radie-stor);
	padding: var(--avstand-3);
	text-align: left;
	transition: box-shadow var(--overgang), transform var(--overgang), border-color var(--overgang);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--skugga-hog);
	border-color: var(--farg-primar);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
	margin: 0 0 var(--avstand-3);
	border-radius: var(--radie);
	background: #fff; /* fotot på vit ruta – syns rent mot mörk sida */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-size: var(--storlek-brod);
	font-weight: var(--vikt-medel);
	line-height: 1.35;
	color: var(--farg-text);
	min-height: 2.7em;
}

.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: #fff; }

.woocommerce ul.products li.product .price {
	display: block;
	margin: var(--avstand-2) 0 var(--avstand-3);
	color: var(--farg-rubrik);
	font-size: var(--storlek-stor);
	font-weight: var(--vikt-fet);
}

.woocommerce ul.products li.product .price del {
	color: var(--farg-text-svag);
	font-weight: var(--vikt-normal);
	font-size: var(--storlek-liten);
	margin-right: var(--avstand-2);
}

.woocommerce ul.products li.product .price ins { color: var(--farg-rea); text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.6rem var(--avstand-3);
	background: var(--farg-primar);
	color: #fff;
	border: 0;
	border-radius: var(--radie-knapp);
	font-weight: var(--vikt-fet);
	font-size: var(--storlek-liten);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background var(--overgang);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover { background: var(--farg-primar-mork); }

/* Rea-märke. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: var(--avstand-3);
	left: var(--avstand-3);
	margin: 0;
	min-height: auto;
	min-width: auto;
	padding: 0.2rem 0.6rem;
	background: var(--farg-kampanj);
	color: #2a1206;
	border-radius: var(--radie-knapp);
	font-size: var(--storlek-mikro);
	font-weight: var(--vikt-fet);
	text-transform: uppercase;
	line-height: 1.4;
	z-index: 2;
}

.woocommerce ul.products li.product .stock.in-stock,
.produkt__nyttorad { color: var(--farg-lager-ja); }
.woocommerce ul.products li.product .stock.out-of-stock { color: var(--farg-lager-nej); }

.produkt__nyttorad {
	margin: var(--avstand-1) 0;
	font-size: var(--storlek-liten);
	color: var(--farg-text-svag);
}

/* ------------------------------------------------------------- 8. Sidfot */

.sidfot {
	background: var(--bla-950);
	color: var(--farg-mork-text);
	padding-block: var(--avstand-6) var(--avstand-4);
	margin-top: var(--avstand-6);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidfot a { color: var(--farg-mork-text); }
.sidfot a:hover { color: #fff; }

.sidfot__kolumner {
	display: grid;
	gap: var(--avstand-5);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.sidfot__kolumn h2,
.sidfot__kolumn h3 {
	color: #fff;
	font-size: var(--storlek-stor);
	margin-bottom: var(--avstand-3);
}

.sidfot__botten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--avstand-3);
	margin-top: var(--avstand-5);
	padding-top: var(--avstand-4);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--storlek-liten);
	color: rgba(255, 255, 255, 0.7);
}

.sidfotsmeny {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avstand-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----------------------------------------- 8b. WooCommerce butik & produkt */

/* Brödsmulor. */
.woocommerce-breadcrumb {
	margin-bottom: var(--avstand-4);
	color: var(--farg-text-svag);
	font-size: var(--storlek-liten);
}
.woocommerce-breadcrumb a { color: var(--farg-text-svag); }
.woocommerce-breadcrumb a:hover { color: var(--farg-lank); }

/* Butikslayout: filter till vänster, innehåll till höger. Utan aktivt filter
   fyller innehållet hela bredden (grid faller tillbaka på en kolumn). */
.butik__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--avstand-5);
	align-items: start;
}
.butik__layout:has(.butik__filter) { grid-template-columns: 260px 1fr; }
.butik__innehall { min-width: 0; }

.butik__filter {
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-radius: var(--radie-stor);
	padding: var(--avstand-4);
}
.butik__filter .widget + .widget {
	margin-top: var(--avstand-4);
	padding-top: var(--avstand-4);
	border-top: var(--ram);
}
.butik__filter .widget__rubrik { font-size: var(--storlek-stor); margin: 0 0 var(--avstand-3); }

/* Filter-widgetar (WooCommerce): listor, prisreglage, aktiva filter.
   WooCommerce ger dem ljusa standardfärger som försvinner på mörk yta –
   här färgas de om mot temats tokens. */
.butik__filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.butik__filter li { margin: 0; }

/* Kategorilista. Hela sortimentets kategoriträd är stort, så listan hålls i en
   scrollbar ruta i stället för att skjuta ner resten av filtren utom synhåll. */
.butik__filter .product-categories {
	max-height: 22rem;
	overflow-y: auto;
	padding-right: var(--avstand-2);
}
.butik__filter .product-categories a {
	display: inline-block;
	padding: 0.3rem 0;
	color: var(--farg-text);
	text-decoration: none;
}
.butik__filter .product-categories a:hover { color: var(--farg-lank); }
.butik__filter .product-categories .count { color: var(--farg-text-svag); font-size: var(--storlek-liten); }
.butik__filter .product-categories .children {
	margin-left: var(--avstand-3);
	border-left: var(--ram);
	padding-left: var(--avstand-3);
}
.butik__filter .product-categories .current-cat > a { color: var(--farg-lank); font-weight: 600; }

/* Aktiva filter (visas bara när något är valt). */
.butik__filter .woocommerce-widget-layered-nav-filters a,
.butik__filter .widget_layered_nav_filters a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0.4rem 0.4rem 0;
	padding: 0.25rem 0.6rem;
	background: var(--bla-800);
	border: var(--ram);
	border-radius: var(--radie-rund);
	color: var(--farg-text);
	font-size: var(--storlek-liten);
	text-decoration: none;
}
.butik__filter .woocommerce-widget-layered-nav-filters a:hover,
.butik__filter .widget_layered_nav_filters a:hover { border-color: var(--farg-primar); }

/* Prisreglage. */
.butik__filter .price_slider_wrapper { margin-top: var(--avstand-2); }
.butik__filter .price_slider {
	margin: 0.75rem 0 1rem;
	height: 4px;
	background: var(--bla-600);
	border-radius: var(--radie-rund);
	position: relative;
}
.butik__filter .price_slider .ui-slider-range {
	background: var(--farg-primar);
	height: 100%;
	position: absolute;
	border-radius: var(--radie-rund);
}
.butik__filter .price_slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	margin-top: -6px;
	background: var(--farg-primar);
	border: 2px solid #fff;
	border-radius: var(--radie-rund);
	position: absolute;
	top: 0;
	cursor: grab;
}
.butik__filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--avstand-2);
}
.butik__filter .price_slider_amount input[type="text"] {
	width: 5rem;
	padding: 0.4rem 0.5rem;
	background: var(--bla-800);
	border: var(--ram);
	border-radius: var(--radie-stor);
	color: var(--farg-text);
}
.butik__filter .price_slider_amount .price_label {
	width: 100%;
	color: var(--farg-text-svag);
	font-size: var(--storlek-liten);
	order: 1;
}
.butik__filter .price_slider_amount .button {
	order: 2;
	background: var(--farg-primar);
	color: var(--farg-primar-text);
	border: none;
	border-radius: var(--radie-stor);
	padding: 0.45rem 1rem;
	cursor: pointer;
}
.butik__filter .price_slider_amount .button:hover { background: var(--farg-primar-mork); }

/* Arkivets rubrik + rad med antal och sortering. */
.woocommerce-products-header__title,
.woocommerce-products-header h1 { margin-bottom: var(--avstand-4); }

.woocommerce-result-count { color: var(--farg-text-svag); font-size: var(--storlek-liten); }
.woocommerce-ordering select,
.woocommerce select {
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	background: var(--bla-800);
	color: var(--farg-text);
	border: 1px solid var(--farg-ram);
	border-radius: var(--radie);
}

/* Native <option> ärver inte alltid select-färgerna, så den öppnade listan -
   och framför allt platshållaren "Välj ett alternativ" på variabla produkter -
   ritades i webbläsarens default och blev nästan oläslig på det mörka temat.
   Tvinga samma mörka bakgrund + ljusa text på alternativen. */
.woocommerce-ordering select option,
.woocommerce select option {
	background: var(--bla-800);
	color: var(--farg-text);
}

/* Sparbadge (ersätter Woos rea-flash). */
.produkt__sparbadge {
	position: absolute;
	top: var(--avstand-3);
	left: var(--avstand-3);
	z-index: 2;
	padding: 0.25rem 0.6rem;
	background: var(--farg-rea);
	color: #2a0a0d;
	border-radius: var(--radie-knapp);
	font-size: var(--storlek-mikro);
	font-weight: var(--vikt-fet);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.woocommerce div.product .produkt__sparbadge { top: var(--avstand-4); left: var(--avstand-4); }

/* Enskild produkt: bild till vänster, köpruta till höger. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--avstand-6);
	align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { position: relative; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radie-stor); background: #fff; }
.woocommerce div.product .summary { margin: 0; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }

.woocommerce div.product .product_title {
	margin: 0 0 var(--avstand-2);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.woocommerce div.product .price,
.woocommerce div.product p.price {
	color: var(--farg-rubrik);
	font-size: 1.6rem;
	font-weight: var(--vikt-fet);
	margin: 0 0 var(--avstand-3);
}
.woocommerce div.product .price del { color: var(--farg-text-svag); font-weight: var(--vikt-normal); font-size: 1.1rem; }
.woocommerce div.product .price ins { color: var(--farg-rea); text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--farg-text);
	margin-bottom: var(--avstand-4);
}

.woocommerce .stock.in-stock { color: var(--farg-lager-ja); font-weight: var(--vikt-medel); }
.woocommerce .stock.out-of-stock { color: var(--farg-lager-nej); font-weight: var(--vikt-medel); }

/* Antal + köpknapp. */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--avstand-3); align-items: center; margin: var(--avstand-4) 0; }
.woocommerce .quantity input.qty {
	width: 4.5rem;
	padding: 0.6rem;
	text-align: center;
	background: var(--bla-800);
	color: var(--farg-text);
	border: 1px solid var(--farg-ram);
	border-radius: var(--radie);
}

/* Generella WC-knappar (single, varukorg, kassa) – bara utseende. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--avstand-2);
	padding: 0.75rem var(--avstand-4);
	background: var(--farg-primar);
	color: #fff;
	border: 0;
	border-radius: var(--radie-knapp);
	font-weight: var(--vikt-fet);
	font-size: var(--storlek-liten);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background var(--overgang);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover { background: var(--farg-primar-mork); color: #fff; }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button { background: var(--farg-primar); }
.woocommerce .single_add_to_cart_button { padding-inline: var(--avstand-5); }

/* Produktmeta (SKU, kategorier). */
.woocommerce div.product .product_meta {
	margin-top: var(--avstand-4);
	padding-top: var(--avstand-3);
	border-top: var(--ram);
	color: var(--farg-text-svag);
	font-size: var(--storlek-liten);
}
.woocommerce div.product .product_meta a { color: var(--farg-lank); }

/* Flikar (beskrivning / mer information / recensioner). */
/* Produktflikar (Beskrivning / Ytterligare information / Recensioner).
   WooCommerce ritar som förval ljusa boxar med hörn-trianglar och en egen
   underkantslinje - det lös igenom mot det mörka temat och såg ostylat ut.
   Här nollställs den default-chromen och flikarna blir en ren understruken
   flikrad: aktiv flik markeras med primärfärgad underkant, som nav-flikarna
   i övrigt. Selektorerna matchar WooCommerces egen specificitet
   (.woocommerce div.product .woocommerce-tabs ...) så våra regler vinner. */
.woocommerce-tabs { margin-top: var(--avstand-6); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 var(--avstand-4);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--farg-ram);
}
/* WooCommerces egen heltäckande underkantslinje. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent;
	border: 0;
	border-radius: 0;
}
/* WooCommerces hörn-trianglar på varje flik. */
.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 a {
	display: block;
	padding: 0.7rem var(--avstand-3);
	margin-bottom: -1px; /* lägg fliken ovanpå radens underkantslinje */
	color: var(--farg-text-svag);
	font-weight: var(--vikt-medel);
	text-decoration: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--farg-text);
}
/* WooCommerce lägger den vita boxen på LI:t i aktivt läge (li.active), som har
   högre specificitet än vår li-regel ovan. Utan att överstyra just .active blev
   den vita rutan kvar - och den ljusa aktiv-texten hamnade som ljust på vitt och
   blev oläslig. Matcha .active-specificiteten och nollställ box + trianglar. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	background: transparent;
	border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--farg-rubrik);
	background: transparent;
	border-bottom-color: var(--farg-primar);
}
.woocommerce-tabs .panel { color: var(--farg-text); }

/* Relaterat/merförsäljning – rubrik + återanvänder produktkorten. */
.woocommerce .related > h2,
.woocommerce .up-sells > h2 { margin-top: var(--avstand-6); font-size: var(--storlek-h2); }

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { margin-top: var(--avstand-6); }

@media (max-width: 768px) {
	.butik__layout:has(.butik__filter) { grid-template-columns: 1fr; }
	.woocommerce div.product { grid-template-columns: 1fr; gap: var(--avstand-4); }
}

/* ------------------------------ 8c. WooCommerce varukorg, kassa, mitt konto */

/*
 * Bara utseende – strukturen och funktionen ägs av WooCommerce. Täcker de
 * klassiska sid-mallarna (kortkoder). Använder butiken Woos block-baserade
 * varukorg/kassa kan enstaka detaljer behöva en extra puts.
 */

/* Formulärfält (kassa, konto, adresser). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-account form input.input-text,
.woocommerce .select2-container .select2-selection,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce #order_comments {
	padding: 0.6rem 0.75rem;
	background: var(--bla-800);
	color: var(--farg-text);
	border: 1px solid var(--farg-ram);
	border-radius: var(--radie);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--farg-primar);
	box-shadow: inset 0 0 0 1px var(--farg-primar);
}
.woocommerce form .form-row label { color: var(--farg-text); font-weight: var(--vikt-medel); }

/* Platshållartext i de mörka formulärfälten ritades i webbläsarens default och
   blev för svag mot den mörka bakgrunden. Ljusare, full opacitet (Firefox sänker
   annars placeholder-opaciteten). Kassa-blockens LJUSA fält har en egen mörk
   placeholder med !important och påverkas inte. */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.woocommerce-account form input.input-text::placeholder,
.woocommerce #order_comments::placeholder,
.woocommerce .quantity input.qty::placeholder {
	color: #aebfd6;
	opacity: 1;
}

/* Notiser. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-left: 4px solid var(--farg-primar);
	border-radius: var(--radie);
	color: var(--farg-text);
	padding: var(--avstand-3) var(--avstand-4);
	list-style: none;
}
.woocommerce-message { border-left-color: var(--farg-lager-ja); }
.woocommerce-error { border-left-color: var(--farg-rea); }

/* Tabeller (varukorg, orderöversikt, kontots ordrar). */
.woocommerce table.shop_table {
	width: 100%;
	border: var(--ram);
	border-radius: var(--radie-stor);
	border-collapse: collapse;
	overflow: hidden;
	background: var(--farg-yta-kort);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--avstand-3);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--farg-text);
}
.woocommerce table.shop_table thead th {
	background: var(--bla-800);
	color: var(--farg-rubrik);
	border-top: 0;
	text-align: left;
}
.woocommerce table.shop_table a { color: var(--farg-lank); }

/* Varukorgens/kassans summaruta. */
.woocommerce .cart_totals,
.woocommerce #order_review,
.woocommerce-checkout #payment {
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-radius: var(--radie-stor);
	padding: var(--avstand-4);
}
.woocommerce-checkout #payment { background: var(--bla-800); }
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading { font-size: var(--storlek-h3); margin-top: 0; }

/* Kupongfält. */
.woocommerce table.cart td.actions .coupon { display: flex; gap: var(--avstand-2); }

/* Mitt konto: navigering + innehåll sida vid sida. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--ram);
	border-radius: var(--radie-stor);
	overflow: hidden;
	background: var(--farg-yta-kort);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.8rem var(--avstand-3);
	color: var(--farg-text);
	font-weight: var(--vikt-medel);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bla-800); color: #fff; }

@media (min-width: 769px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 240px; }
	.woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 280px); }
}

/* Inloggnings-/registreringsrutor. */
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2,
.woocommerce form.login,
.woocommerce form.register {
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-radius: var(--radie-stor);
	padding: var(--avstand-4);
}

/* -------------------------------- 8d. WooCommerce block-varukorg & -kassa */

/*
 * Block-varukorgen/-kassan (Cart/Checkout-blocken) antar en MÖRK sida och gör
 * därför text och etiketter ljusa – men renderar samtidigt VITA inmatningsfält.
 * Ljus text på vitt fält blir osynligt (t.ex. "E-postadress", "Ange kod"). Vi
 * tvingar därför fälten att ha mörk text och mörka etiketter/platshållare.
 * !important behövs för att slå blockens egna, hårt specificerade regler.
 */
.wc-block-components-text-input input,
.wc-block-components-text-input input.input-text,
.wc-block-components-address-form input,
.wc-block-components-totals-coupon__input input,
.wc-block-components-address-form .components-combobox-control input {
	color: #17202e !important;
	background: #fff !important;
}
.wc-block-components-text-input input::placeholder,
.wc-block-components-totals-coupon__input input::placeholder {
	color: #6a7788 !important;
	opacity: 1;
}
/* Flytande etikett – både i vilo­läge (inne i fältet) och upplyft. */
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description { color: #5a6472 !important; }

/* Skicka/Upphämtning-växeln och fraktvalen görs mörka så texten syns. */
.wc-block-checkout__shipping-method-option,
.wc-block-components-shipping-rates-control__package {
	background: var(--bla-800) !important;
	color: var(--farg-text) !important;
	box-shadow: inset 0 0 0 1px var(--farg-ram) !important;
}
.wc-block-checkout__shipping-method-option--selected {
	box-shadow: inset 0 0 0 2px var(--farg-primar) !important;
}
.wc-block-checkout__shipping-method-option-title,
.wc-block-checkout__shipping-method-option-price { color: var(--farg-text) !important; }

/* Frakt-/ombudsval (radioraderna, inkl. upphämtningsplats). Det VALDA får annars
   en ljus bakgrund men behåller ljus text → oläsligt. Vi gör alla rader mörka
   med ljus text och markerar det valda med en blå kant i stället. */
.wc-block-components-radio-control__option {
	background: var(--bla-800) !important;
	color: var(--farg-text) !important;
}
.wc-block-components-radio-control__option:has( input:checked ),
.wc-block-components-radio-control__option--checked-option-highlight {
	box-shadow: inset 0 0 0 2px var(--farg-primar) !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description {
	color: var(--farg-text) !important;
}
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description { color: var(--farg-text-svag) !important; }

/* Block-knappar (Tillämpa, Fortsätt till kassan, Lägg order) i temats accent. */
.wc-block-components-button:not(.is-link),
.wp-element-button.wc-block-components-button {
	background: var(--farg-primar);
	color: #fff;
	border-radius: var(--radie);
}
.wc-block-components-button:not(.is-link):hover { background: var(--farg-primar-mork); color: #fff; }

/* ------------------------------------------- 8e. Övriga sidor (404, sök) */

/* Fristående sökformulär utanför sidhuvudet (404-sidan, sökresultat). */
.sajt__innehall .woocommerce-product-search,
.sajt__innehall form.search-form {
	display: flex;
	gap: var(--avstand-2);
	max-width: 480px;
	margin: var(--avstand-4) 0;
}
.sajt__innehall .woocommerce-product-search input[type="search"],
.sajt__innehall .search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	background: var(--bla-800);
	color: var(--farg-text);
	border: 1px solid var(--farg-ram);
	border-radius: var(--radie);
}
.sajt__innehall .woocommerce-product-search button,
.sajt__innehall .search-form button {
	padding: 0.6rem var(--avstand-3);
	background: var(--farg-primar);
	color: #fff;
	border: 0;
	border-radius: var(--radie);
	font-weight: var(--vikt-medel);
	cursor: pointer;
}

.sida__rubrik,
.arkiv__rubrik { margin-bottom: var(--avstand-4); }
.arkiv__rubrik span { color: var(--farg-lank); }

/* Sidmallen "Nytt i sortimentet": inledning + produktrutnät + paginering. */
.sida__huvud { margin-bottom: var(--avstand-5); }
.sida__huvud .sida__innehall { color: var(--farg-text-svag); max-width: 70ch; }
.nyinkommet { margin-top: var(--avstand-4); }

/* Paginering (delas av arkiv och sidmallen). WooCommerce ger en <ul>; vi gör
   den till en rad med tydliga, klickbara sidnummer i temats färger. */
.woocommerce-pagination { margin-top: var(--avstand-5); }
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avstand-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination ul li { margin: 0; }
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--farg-yta-kort);
	border: var(--ram);
	border-radius: var(--radie-knapp);
	color: var(--farg-text);
	text-decoration: none;
}
.woocommerce-pagination a:hover { border-color: var(--farg-primar); color: var(--farg-lank); }
.woocommerce-pagination span.current {
	background: var(--farg-primar);
	border-color: var(--farg-primar);
	color: var(--farg-primar-text);
}

/* --------------------------------- 8f. Shipit ombuds-/upphämtningsväljare */

/*
 * wc-shipit (woo-carrier-agents) ritar en LJUS widget för ombudsval: vit lista,
 * valt ombud får ljusblå bakgrund (#e8f7ff). På det mörka temat blir texten där
 * osynlig. Vi gör hela väljaren mörk och läsbar, och markerar det valda ombudet
 * med blå kant i stället för ljus bakgrund. Klasser från pluginets egen CSS.
 */
#woo-carrier-agents-container,
#woo-carrier-agents,
#woo-carrier-agents .woo-carrier-agent {
	background: var(--bla-800) !important;
	color: var(--farg-text) !important;
	border-color: var(--farg-ram) !important;
}
#woo-carrier-agents .woo-carrier-agent:hover { background: var(--bla-700) !important; }
#woo-carrier-agents .woo-carrier-agent.active,
#woo-carrier-agents .woo-carrier-agent.active:hover {
	background: var(--bla-100b) !important;
	box-shadow: inset 0 0 0 2px var(--farg-primar) !important;
}
#woo-carrier-agents .woo-carrier-agent-name { color: var(--farg-rubrik) !important; }
#woo-carrier-agents .woo-carrier-agent-address,
#woo-carrier-agents .woo-carrier-agent-info,
#woo-carrier-agents-displaying-all,
.carrier-agent-address { color: var(--farg-text-svag) !important; }

/* --------------------------------------------------------------- 9. Rörelse */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------- 10. Mobil */

@media (max-width: 900px) {
	:root { --storlek-h1: 2rem; --storlek-h2: 1.5rem; }
	.huvud__rad { flex-wrap: wrap; }
	.huvud__sok { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 768px) {
	.huvud__topp-rad { flex-wrap: wrap; }
	.huvud__navigering { display: none; }
	.huvud__meny-knapp { display: inline-block; }
	.hero__dekor { display: none; }
	.genvagar__lista { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--avstand-3) !important; }
	/* Butiksarkivet: tre kolumner på mobil (slår !important-reglerna ovan). */
	.woocommerce ul.products[class*="columns-"],
	ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.sidfot__botten { flex-direction: column; align-items: flex-start; }
}

/* Butiksarkivet: fyra kolumner på surfplatta. */
@media (min-width: 769px) and (max-width: 1024px) {
	.woocommerce ul.products[class*="columns-"],
	ul.products[class*="columns-"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ------------------------------------------------------- 11. Produktbilder */

/*
 * Bilderna kommer i olika format och beskärs aldrig i WordPress. Rutan
 * håller formen, bilden skalas in i den, resten blir vitt. Byt till
 * "Fyll rutan" under Anpassa → Produktbilder om du hellre vill kapa.
 */

:root{
	--bild-form: 1 / 1;
	--bild-passning: contain;
	--bild-luft: var(--avstand-2);
}

.har-fyllda-bilder{
	--bild-passning: cover;
	--bild-luft: 0;
}

.woocommerce ul.products li.product img,
.produkt .bild img,
.smakort__post .bild img{
	aspect-ratio: var(--bild-form);
	width: 100%;
	height: auto;
	object-fit: var(--bild-passning);
	padding: var(--bild-luft);
	background: #fff;
}

/* Produktsidans huvudbild får vara högre än den är bred – armaturer och
   kabelvindor tappar annars för mycket. */
.woocommerce div.product .woocommerce-product-gallery__image img{
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: var(--bild-passning);
	background: #fff;
}

/* Galleriets små bilder hålls kvadratiska så raden blir jämn. */
.woocommerce div.product .flex-control-thumbs img,
.woocommerce div.product .woocommerce-product-gallery__wrapper .flex-control-nav img{
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}