/* =====================================================
   WBNT Tema SJ Rental
   =====================================================

   ETT designsystem, på ETT ställe. Det tidigare barntemat definierade samma
   färger två gånger under olika namn (--sj-blue och --primary-blue) i två
   filer som båda alltid laddades. Här finns varje värde en gång.

   Färgerna och typsnitten är hämtade rakt ur det gamla temat - sajten ska se
   ut som sig själv, inte som något nytt.

   Ordning i filen: tokens, grund, layout, komponenter, WooCommerce, utskrift.
   ===================================================== */

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

:root {
	/* Varumärke */
	--sj-bla: #2c5aa0;
	--sj-bla-mork: #152235;
	--sj-orange: #f97316;
	--sj-orange-mork: #6f3106;

	/* MÖRKT TEMA. Varmt tonade neutraler, inte blågrå - kylan var det Robin
	   reagerade på först, och den försvinner inte av att bli mörk. */
	--sj-text: #e7e1d8;
	--sj-rubrik: #ffffff;
	--sj-dampad: #9c948a;

	/* YTOR – här sitter värmen.
	 *
	 * Det ärvda temat byggde på blågrå neutraler (#f8fafc, #eff4f8, #cbd5e1).
	 * De är kalla i sig, och tillsammans med mycket vitt blir sidan hård att
	 * vila ögonen på. Neutralerna är därför flyttade åt varmt håll medan
	 * varumärkesfärgerna är exakt oförändrade - blått och orange gör jobbet,
	 * pappret under ska bara vara behagligt.
	 *
	 * Två nivåer med flit: sidan har en varm botten och korten är vita ovanpå.
	 * Då lyfter innehållet av sig självt, utan att varje kort behöver en ram. */
	--sj-botten: #13181e;
	--sj-yta: #1c232c;
	--sj-yta-sektion: #222a35;
	--sj-yta-banner: #0d1218;
	--sj-ram: #333d4a;

	/* Signaler */
	--sj-fara: #f0625c;
	--sj-pris: #8bc16b;

	/* Länkfärg. Varumärkesblå #2c5aa0 är för mörk mot mörk botten - den lever
	   kvar på knappar (vit text ovanpå) men länkar behöver en ljusare syster. */
	--sj-bla-ljus: #7fadea;

	/* Typsnitt. Reservkedjan är inte dekoration: syns inte Google Fonts ska
	   sidan fortfarande vara läsbar, och kondenserade rubriker har en riktig
	   systemmotsvarighet. */
	--sj-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sj-font-rubrik: "Special Gothic Condensed One", "Arial Narrow", "Helvetica Neue Condensed", var(--sj-font);

	/* Mått */
	--sj-radie-s: 4px;
	--sj-radie-m: 10px;
	--sj-radie-l: 14px;

	--sj-steg-1: 4px;
	--sj-steg-2: 8px;
	--sj-steg-3: 12px;
	--sj-steg-4: 16px;
	--sj-steg-5: 20px;
	--sj-steg-6: 28px;
	--sj-steg-7: 44px;
	--sj-steg-8: 72px;

	/* Skuggorna har en varm ton i stället för ren svart. En svart skugga mot
	   ett varmt papper blir gråaktig och död; den här smälter in. */
	/* Mörkt tema: skuggor syns knappt. Djupet kommer i stället av att ytorna
	   är olika ljusa - men en aning skugga håller ihop korten. */
	--sj-skugga-s: 0 1px 3px rgba(0, 0, 0, 0.4);
	--sj-skugga-m: 0 4px 14px rgba(0, 0, 0, 0.45);
	--sj-skugga-l: 0 10px 30px rgba(0, 0, 0, 0.55);

	--sj-bredd: 1200px;
	--sj-bredd-text: 46rem;
}

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

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

/* `hidden` ska betyda dolt, punkt.
 *
 * Webbläsaren har en egen regel för [hidden], men den har lägsta möjliga vikt
 * och slås ut av vilken vanlig display-regel som helst. Temats `label { display:
 * inline-block }` räckte: uthyrningens periodväljare döljer sina råa fält med
 * `hidden` när kalendern tar över, och orden "Från" och "Till" blev synliga
 * lösryckta bredvid knappen.
 *
 * !important är befogat här. Alternativet vore att jaga varje enskild regel som
 * råkar sätta display på något som också kan vara dolt - och missa en. */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	font-family: var(--sj-font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sj-text);
	background: var(--sj-botten);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--sj-font-rubrik);
	color: var(--sj-rubrik);
	line-height: 1.15;
	letter-spacing: 0.02em;
	margin: 0 0 var(--sj-steg-4);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }

p, ul, ol {
	margin: 0 0 var(--sj-steg-4);
}

a {
	color: var(--sj-bla-ljus);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--sj-orange);
}

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

/* Synlig fokusmarkering. Tas den bort går sidan inte att använda med
   tangentbord, och det är en av få saker som inte är en smaksak. */
:focus-visible {
	outline: 3px solid var(--sj-orange);
	outline-offset: 2px;
}

/* Text bara för skärmläsare.
 *
 * `.screen-reader-text` MÅSTE finnas även om temat inte använder den själv:
 * WordPress kärna och varje plugin som döljer en etikett förutsätter att temat
 * definierar den. Utan regeln blir dolda etiketter synliga - på produktsidan
 * dök orden "Från" och "Till" upp lösryckta bredvid periodväljaren, för att
 * uthyrningspluginet döljer dem med just den klassen.
 *
 * `.sj-dold` är temats eget namn för samma sak. Båda finns; ingen är en kopia
 * av den andra, de delar regel. */
.sj-dold,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ... men den ska bli synlig när den får fokus, annars försvinner t.ex.
   hoppa-till-innehåll-länken för den som använder tangentbord. */
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
}

/* Hoppa-till-innehåll: syns först när den får fokus. */
.sj-hoppa {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--sj-steg-3) var(--sj-steg-4);
	background: var(--sj-bla);
	color: #fff;
}

.sj-hoppa:focus {
	left: 0;
}

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

.sj-inner {
	width: 100%;
	max-width: var(--sj-bredd);
	margin-inline: auto;
	padding-inline: var(--sj-steg-4);
}

.sj-sektion {
	padding-block: var(--sj-steg-8);
}

.sj-sektion--tonad {
	background: var(--sj-yta-sektion);
}

.sj-banner {
	background: var(--sj-yta-banner);
	padding-block: var(--sj-steg-8);
	text-align: center;
}

.sj-banner h1 {
	margin-bottom: 0;
}

.sj-brodsmulor {
	font-size: 0.875rem;
	color: var(--sj-dampad);
	padding-block: var(--sj-steg-3);
}

.sj-tva-kolumner {
	display: grid;
	gap: var(--sj-steg-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.sj-tva-kolumner--med-sidokolumn {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

/* ---------------------------------------------------- 4. Sidhuvud */

.sj-huvud {
	background: var(--sj-bla-mork);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 50;
}

.sj-huvud a {
	color: inherit;
}

.sj-huvud__rad {
	display: flex;
	align-items: center;
	gap: var(--sj-steg-5);
	min-height: 72px;
}

.sj-logga {
	display: inline-flex;
	align-items: center;
	gap: var(--sj-steg-3);
	font-family: var(--sj-font-rubrik);
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	margin-right: auto;
}

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

.sj-meny {
	display: none;
	gap: var(--sj-steg-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.sj-meny {
		display: flex;
	}

	.sj-huvud__knapp--meny {
		display: none;
	}
}

.sj-meny a {
	text-decoration: none;
	font-weight: 500;
	padding-block: var(--sj-steg-3);
	border-bottom: 2px solid transparent;
	display: inline-block;
}

.sj-meny .current-menu-item > a,
.sj-meny a:hover,
.sj-meny a:focus {
	border-bottom-color: var(--sj-orange);
}

/* UNDERMENYER. Utan de här reglerna ritas de som vanliga listor rakt in i
 * sidhuvudet - alla poster utfällda ovanpå varandra. Menyn hade tolv poster i
 * två nivåer och blev en enda röra. */
.sj-meny li {
	position: relative;
}

.sj-meny .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 220px;
	margin: 0;
	padding: var(--sj-steg-2) 0;
	list-style: none;
	background: var(--sj-bla-mork);
	border-top: 2px solid var(--sj-orange);
	box-shadow: var(--sj-skugga-l);

	/* Dold men fokuserbar: `display:none` hade gjort den oåtkomlig med
	 * tangentbord, och menyn ska gå att nå utan mus. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.sj-meny li:hover > .sub-menu,
.sj-meny li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sj-meny .sub-menu a {
	display: block;
	padding: var(--sj-steg-2) var(--sj-steg-4);
	border-bottom: 0;
	white-space: nowrap;
	font-weight: 400;
}

.sj-meny .sub-menu a:hover,
.sj-meny .sub-menu a:focus {
	background: rgba(255, 255, 255, 0.1);
}

/* Föräldrar med barn får en liten pil, så det syns att det finns mer. */
.sj-meny .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.7;
}

/* I mobilmenyn finns ingen hover att lita på - där ligger allt utfällt, bara
   indraget så nivåerna syns. */
.sj-mobilmeny .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--sj-steg-5);
	border-left: 2px solid var(--sj-orange);
	margin-left: var(--sj-steg-4);
}

.sj-huvud__verktyg {
	display: flex;
	align-items: center;
	gap: var(--sj-steg-2);
}

.sj-ikonknapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sj-steg-2);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sj-steg-3);
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	border-radius: var(--sj-radie-s);
	text-decoration: none;
}

.sj-ikonknapp:hover,
.sj-ikonknapp:focus {
	background: rgba(255, 255, 255, 0.12);
}

/* Antalsmärke på konto-/bokningsikonen. */
.sj-marke {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--sj-orange);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.4em;
	text-align: center;
}

/* Mobilmenyn: en enkel utfällning, inget skript krävs för att den ska finnas -
   knappen togglar bara ett attribut. Utan JS står menyn öppen, vilket är
   sämre men inte trasigt. */
.sj-mobilmeny {
	display: block;
	background: var(--sj-bla-mork);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sj-mobilmeny[hidden] {
	display: none;
}

.sj-mobilmeny ul {
	list-style: none;
	margin: 0;
	padding: var(--sj-steg-3) 0;
}

.sj-mobilmeny a {
	display: block;
	padding: var(--sj-steg-3) var(--sj-steg-4);
	text-decoration: none;
}

@media (min-width: 900px) {
	.sj-mobilmeny {
		display: none;
	}
}

/* ---------------------------------------------------- 5. Knappar */

.sj-knapp,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sj-steg-2);
	padding: var(--sj-steg-3) var(--sj-steg-6);
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: var(--sj-radie-s);
	background: var(--sj-bla);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sj-knapp:hover,
.sj-knapp:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
	background: var(--sj-bla-mork);
	color: #fff;
}

.sj-knapp--handling,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--sj-orange);
}

.sj-knapp--handling:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--sj-orange-mork);
}

/* Andrahandsknapp: samma form, tydligt lägre vikt. Den här varianten finns för
   att ett "ta bort allt" aldrig ska se ut som nästa steg i flödet. */
.sj-knapp--tyst {
	background: transparent;
	color: var(--sj-text);
	border-color: currentColor;
}

.sj-knapp--tyst:hover,
.sj-knapp--tyst:focus {
	background: transparent;
	color: var(--sj-bla-mork);
}

.sj-knapp[disabled],
.woocommerce .button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------- 6. Formulär */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
	width: 100%;
	padding: var(--sj-steg-3);
	border: 1px solid var(--sj-ram);
	border-radius: var(--sj-radie-s);
	background: var(--sj-yta);
	font-family: inherit;
	font-size: 1rem;
	color: var(--sj-text);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sj-bla);
}

label {
	display: inline-block;
	margin-bottom: var(--sj-steg-1);
	font-weight: 500;
}

/* ---------------------------------------------------- 7. Kort */

.sj-kort {
	background: var(--sj-yta);
	border: 1px solid var(--sj-ram);
	border-radius: var(--sj-radie-m);
	padding: var(--sj-steg-5);
	box-shadow: var(--sj-skugga-s);
}

.sj-rutnat {
	display: grid;
	gap: var(--sj-steg-5);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

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

.woocommerce ul.products {
	display: grid;
	gap: var(--sj-steg-5);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	background: var(--sj-yta);
	border: 1px solid var(--sj-ram);
	border-radius: var(--sj-radie-m);
	overflow: hidden;
	box-shadow: var(--sj-skugga-s);
}

.woocommerce ul.products li.product > a {
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--sj-yta-sektion);
	padding: var(--sj-steg-4);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sj-font);
	font-size: 1rem;
	font-weight: 600;
	padding: 0 var(--sj-steg-4);
	margin: var(--sj-steg-3) 0 var(--sj-steg-2);
}

.woocommerce ul.products li.product .price {
	padding: 0 var(--sj-steg-4) var(--sj-steg-4);
	color: var(--sj-pris);
	font-weight: 600;
}

.woocommerce div.product .product_title {
	margin-bottom: var(--sj-steg-2);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sj-pris);
	font-size: 1.4rem;
	font-weight: 600;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--sj-radie-s);
	border-left: 4px solid var(--sj-bla);
	background: var(--sj-yta-sektion);
	padding: var(--sj-steg-4);
	margin-bottom: var(--sj-steg-5);
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--sj-fara);
}

/* WooCommerce ritar en ikon i ::before på sina notiser som blir en tom fyrkant
   när temat inte laddar Woos eget ikontypsnitt. Bättre inget än en trasig. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

/* Mitt konto: menyn som kort, innehållet bredvid. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sj-ram);
	border-radius: var(--sj-radie-m);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--sj-steg-3) var(--sj-steg-4);
	text-decoration: none;
	border-bottom: 1px solid var(--sj-ram);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--sj-yta-sektion);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--sj-orange);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 250px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: calc(100% - 290px);
	}
}

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

.sj-sidfot {
	background: var(--sj-bla-mork);
	color: #e2e8f0;
	padding-block: var(--sj-steg-8) var(--sj-steg-5);
	margin-top: var(--sj-steg-8);
}

.sj-sidfot a {
	color: #e2e8f0;
}

.sj-sidfot a:hover,
.sj-sidfot a:focus {
	color: var(--sj-orange);
}

.sj-sidfot__kolumner {
	display: grid;
	gap: var(--sj-steg-6);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sj-widget__rubrik {
	color: var(--sj-orange);
	font-size: 1.1rem;
	margin-bottom: var(--sj-steg-3);
}

.sj-sidfot ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sj-sidfot li {
	margin-bottom: var(--sj-steg-2);
}

.sj-sidfot__slut {
	margin-top: var(--sj-steg-6);
	padding-top: var(--sj-steg-4);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.875rem;
	text-align: center;
}

/* ---------------------------------------------------- 10. Utskrift */

@media print {
	.sj-huvud,
	.sj-sidfot,
	.sj-mobilmeny,
	.sj-hoppa {
		display: none;
	}

	body {
		color: #000;
	}
}

/* =====================================================
   11. KARAKTÄR
   =====================================================

   Robin: "den är fortfarande väldigt tråkig". Den var det - korrekt men
   anonym: vita rutor på varm botten, och orange bara som en prick här och där.

   Det som saknades var inte fler färger utan RYTM och en egen signal. Bolaget
   underhåller järnväg, och loggan bär redan en rälsprofil. Det motivet får
   återkomma som avdelare och accenter i stället för att sitta ensamt i hörnet.

   Reglerna nedan lägger till: en accentlist i sidhuvudet, rälsavdelare mellan
   sektioner, rubriker med ögonbryn, kort som reagerar, och en mörk sektion att
   bryta av med. Inget av det ändrar layouten - det ger den kontrast.
   ===================================================== */

/* Accentlist överst. Två pixlar, men de gör att sidhuvudet slutar se ut som en
   mörk platta och börjar se ut som ett varumärke. */
.sj-huvud::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--sj-orange) 0%, var(--sj-orange) 38%, var(--sj-bla) 38%, var(--sj-bla) 100%);
}

/* RÄLSAVDELARE. Två tunna linjer med slipers emellan - läses som räls på
   avstånd och som ett grafiskt streck på nära håll. Ren CSS, ingen bild. */
.sj-rals {
	position: relative;
	height: 10px;
	margin-block: var(--sj-steg-7);
	border-top: 1px solid color-mix(in srgb, var(--sj-bla) 28%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--sj-bla) 28%, transparent);

	/* Glesa slipers. Första försöket hade dem var 14:e pixel och resultatet
	   läste som en streckkod - motivet ska antydas, inte ropas. */
	background-image: repeating-linear-gradient(
		90deg,
		color-mix(in srgb, var(--sj-bla) 14%, transparent) 0 2px,
		transparent 2px 34px
	);
}

/* Sektionsrubrik med ögonbryn. Den lilla orange etiketten ovanför ger sidan
   hierarki utan att skrika - och den är det enda stället orange får ta plats
   i text. */
.sj-ogonbryn {
	display: inline-block;
	margin-bottom: var(--sj-steg-2);
	color: var(--sj-orange);
	font-family: var(--sj-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Rubriker i innehållet får ett kort streck ovanför. Billigt trick, men det är
   skillnaden mellan "text som råkar vara stor" och "en rubrik". */
.sj-innehall > h2::before,
.sj-sektion > .sj-inner > h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: var(--sj-steg-3);
	background: var(--sj-orange);
}

/* Mörk sektion att bryta av med. En sida som är ljus hela vägen ned blir platt
   oavsett hur fina detaljerna är. */
.sj-sektion--mork {
	background: var(--sj-bla-mork);
	color: #e8eef5;
}

.sj-sektion--mork h1,
.sj-sektion--mork h2,
.sj-sektion--mork h3 {
	color: #fff;
}

.sj-sektion--mork a {
	color: var(--sj-orange);
}

/* ---- Kort och produkter: liv vid hover ---- */

.sj-kort,
.woocommerce ul.products li.product {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sj-kort:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--sj-skugga-m);
}

/* Produktkortets titel får en orange linje som växer fram. Signalen är liten
   men den säger "det här går att klicka på". */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title::after {
	content: "";
	position: absolute;
	left: var(--sj-steg-4);
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--sj-orange);
	transition: right 0.22s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title::after {
	right: var(--sj-steg-4);
}

/* Bildytan i kortet tonas, så vitkantade produktfoton inte flyter ihop med
   kortet och alla kort får samma optiska tyngd. */
.woocommerce ul.products li.product img {
	background: var(--sj-yta-sektion);
	transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

/* Priset ska synas. Det är det kunden letar efter. */
.woocommerce ul.products li.product .price {
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}

/* ---- Knappar: en aning mer fysiska ---- */

.sj-knapp,
.woocommerce .button {
	letter-spacing: 0.02em;
	transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.sj-knapp:hover,
.woocommerce .button:hover {
	transform: translateY(-1px);
	box-shadow: var(--sj-skugga-s);
}

.sj-knapp:active,
.woocommerce .button:active {
	transform: none;
	box-shadow: none;
}

/* ---- Sidhuvudet krymper när man scrollar ---- */

.sj-huvud__rad {
	transition: min-height 0.2s ease;
}

/* Respektera den som bett om mindre rörelse. Animationer är trevliga; att
   strunta i den inställningen är det inte. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =====================================================
   12. TOPPRAD OCH SIDFOT
   =====================================================

   Sidfoten var en mörk remsa med en copyrightrad. Det är det sista varje
   besökare ser på varje sida, och en tom sidfot får hela sajten att kännas
   oavslutad oavsett hur resten ser ut. Nu bär den kontaktuppgifter, en kort
   presentation och snabbnavigering - allt ur Anpassa, inget hårdkodat.
   ===================================================== */

.sj-topprad {
	background: rgba(0, 0, 0, 0.25);
	font-size: 0.85rem;
}

.sj-topprad__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sj-steg-5);
	justify-content: flex-end;
	padding-block: var(--sj-steg-2);
}

.sj-topprad a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.sj-topprad a:hover,
.sj-topprad a:focus {
	color: var(--sj-orange);
}

/* ---- Sidfoten ---- */

.sj-sidfot {
	padding-block: var(--sj-steg-8) var(--sj-steg-5);
}

.sj-sidfot__kolumner {
	display: grid;
	gap: var(--sj-steg-7);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Varumärkeskolumnen får mer luft än de andra - den bär loggan och tonen. */
.sj-sidfot__kolumn--brand {
	max-width: 34ch;
}

.sj-sidfot__logga img {
	max-height: 54px;
	width: auto;
	margin-bottom: var(--sj-steg-3);
}

.sj-sidfot__om {
	opacity: 0.85;
}

.sj-sidfot__orgnr {
	font-size: 0.85rem;
	opacity: 0.6;
	margin: 0;
}

.sj-kontaktlista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sj-kontaktlista li {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-bottom: var(--sj-steg-3);
}

/* Ikonen ska ligga i linje med första textraden, inte mitt i ett flerradigt
   adressblock. */
.sj-kontaktlista svg {
	flex: 0 0 auto;
	margin-top: 0.25em;
	color: var(--sj-orange);
}

.sj-sidfot__meny,
.sj-sidfot__minimeny {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sj-sidfot__meny li {
	margin-bottom: var(--sj-steg-2);
}

.sj-sidfot__meny a {
	text-decoration: none;
}

.sj-sidfot__meny a:hover,
.sj-sidfot__meny a:focus {
	text-decoration: underline;
}

.sj-sidfot__slut {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sj-steg-3) var(--sj-steg-5);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--sj-steg-7);
	padding-top: var(--sj-steg-4);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.85rem;
	text-align: left;
}

.sj-sidfot__slut p {
	margin: 0;
	opacity: 0.7;
}

.sj-sidfot__minimeny {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sj-steg-4);
}

/* =====================================================
   13. SIDANS EGEN RUBRIK
   =====================================================

   Sidorna bär sin rubrik i innehållet (se page.php). Utan behandling startar
   varje sida med en rubrik hårt mot det klistrade sidhuvudet. Den behöver luft
   och en markering för att läsas som en sidrubrik och inte som vilken text
   som helst.
   ===================================================== */

.sj-innehall > h1:first-child,
.sj-innehall > h2:first-child,
.sj-innehall > .wp-block-heading:first-child {
	margin-top: var(--sj-steg-6);
	padding-bottom: var(--sj-steg-4);
	border-bottom: 1px solid var(--sj-ram);
}

.sj-innehall > h1:first-child::before,
.sj-innehall > h2:first-child::before,
.sj-innehall > .wp-block-heading:first-child::before {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-bottom: var(--sj-steg-4);
	background: var(--sj-orange);
}

/* =====================================================
   14. PRODUKTKORTEN, FINSLIPADE
   =====================================================

   Första utkastet gav varje kort en fylld blå knapp i full bredd. Med
   tjugofyra produkter blev butiken en vägg av blått där ingenting stack ut -
   och en knapp som ropar lika högt som tjugotre andra ropar inte alls.

   Nu är bilden och rubriken det som lockar, priset det som svarar, och knappen
   en lugn inbjudan. Kortet i sin helhet är ändå klickbart via rubriken.
   ===================================================== */

.woocommerce ul.products li.product {
	padding-bottom: var(--sj-steg-4);
}

/* Bildytan får fast proportion så raden blir jämn även när fotona inte är det. */
.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: var(--sj-steg-5);
	margin-bottom: 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 var(--sj-steg-4) var(--sj-steg-3);
	margin: 0;
	color: var(--sj-pris);
	font-weight: 700;
}

/* Knappen i listan: samma form som andra knappar, men tydligt andrahands. */
.woocommerce ul.products li.product .button {
	display: inline-flex;
	width: auto;
	/* Kortet är en flex-kolumn och sträcker annars knappen över hela bredden -
	   samma vägg av knappar som skulle undvikas, bara i outline. */
	align-self: flex-start;
	margin: 0 var(--sj-steg-4);
	padding: var(--sj-steg-2) var(--sj-steg-5);
	background: transparent;
	color: var(--sj-bla);
	border: 1px solid currentColor;
	font-size: 0.95rem;
	min-height: 0;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
	background: var(--sj-bla);
	color: #fff;
	border-color: var(--sj-bla);
	transform: none;
}

/* Titeln ska orka bära två rader utan att kortet hoppar i höjd. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	line-height: 1.35;
	margin-bottom: var(--sj-steg-2);
}

/* Puffa ned priset så knappen alltid hamnar i botten, oavsett titellängd. */
.woocommerce ul.products li.product .price {
	margin-top: auto;
}

/* Antalsraden ("Visar 1–24 av …") är information, inte rubrik. */
.woocommerce .woocommerce-result-count {
	color: var(--sj-dampad);
	font-size: 0.9rem;
	margin-bottom: var(--sj-steg-5);
}

/* =====================================================
   15. DJUP OCH TYNGD
   =====================================================

   Robin: "det är för ljust". Sidan låg som en enda ljus yta med vita kort
   ovanpå ett nästan lika vitt papper - ingenting hade tyngd.

   Grunden är därför mörkare (--sj-botten), och det som ska läsas ligger på
   vita kort som nu faktiskt lyfter. Bannern är mörk i stället för beige, så
   varje sida börjar med en tyngdpunkt i stället för att tona ut.

   Innehållets egna färger är valda för ljus botten och rörs INTE - därför blir
   det inte mörkt tema rakt igenom. Vill vi dit måste sidornas färgval göras om
   först, annars blir mörk text på mörk botten.
   ===================================================== */

/* Bannern: mörk, med rälsmotivet svagt i botten. */
.sj-banner {
	position: relative;
	color: #fff;
	overflow: hidden;
}

.sj-banner h1,
.sj-banner h2 {
	color: #fff;
	position: relative;
	z-index: 1;
}

.sj-banner::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 8px;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.16) 0 2px,
		transparent 2px 30px
	);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Brödsmulorna ligger direkt under det mörka huvudet och behöver en egen ton
   för att inte flyta ihop med sidan. */
.sj-brodsmulor {
	background: rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid var(--sj-ram);
}

/* Innehållsytan på vanliga sidor blir ett ark, inte en fri text på pappret. */
.sj-innehall {
	background: var(--sj-yta);
	padding: var(--sj-steg-7);
	border-radius: var(--sj-radie-m);
	box-shadow: var(--sj-skugga-s);
}

/* Blocken som går i full bredd ska ändå få göra det - annars klipps
   startsidans hjältebild in i arket. */
.sj-innehall > .alignfull {
	margin-inline: calc(var(--sj-steg-7) * -1);
	width: calc(100% + var(--sj-steg-7) * 2);
	max-width: none;
}

/* Startsidan är byggd av egna helbreddssektioner och ska inte ligga i ett ark. */
.home .sj-innehall {
	background: transparent;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

.home .sj-innehall > .alignfull {
	margin-inline: 0;
	width: 100%;
}

/* Produktsidans sammanfattning blir ett kort, så priset och bokningsrutan
   hänger ihop i stället för att sväva. */
.woocommerce div.product .summary {
	background: var(--sj-yta);
	padding: var(--sj-steg-6);
	border-radius: var(--sj-radie-m);
	box-shadow: var(--sj-skugga-s);
}

.woocommerce div.product .woocommerce-product-gallery {
	background: var(--sj-yta);
	padding: var(--sj-steg-5);
	border-radius: var(--sj-radie-m);
	box-shadow: var(--sj-skugga-s);
}

/* Flikarna under produkten hör till samma ark. */
.woocommerce div.product .woocommerce-tabs {
	background: var(--sj-yta);
	padding: var(--sj-steg-6);
	border-radius: var(--sj-radie-m);
	box-shadow: var(--sj-skugga-s);
	margin-top: var(--sj-steg-7);
}

/* Varukorgsikonen: brickan sitter i hörnet på ikonen, inte bredvid. */
.sj-korg {
	position: relative;
}

.sj-korg .sj-marke {
	position: absolute;
	top: 4px;
	right: 2px;
	font-size: 0.68rem;
	min-width: 1.5em;
	line-height: 1.5em;
	pointer-events: none;
}

/* Bokningsrutan ligger inuti produktkortet. Två ramar utanpå varandra ser ut
   som ett misstag - rutan får i stället en tonad platta och en orange kant som
   säger "det är här du gör något". */
.woocommerce div.product .summary .wbnt-uh-boka {
	border: 0;
	border-left: 3px solid var(--sj-orange);
	border-radius: 0 var(--sj-radie-s) var(--sj-radie-s) 0;
	background: var(--sj-yta-sektion);
	padding: var(--sj-steg-5);
}

/* =====================================================
   16. MÖRKT TEMA – JUSTERINGAR
   =====================================================

   Reglerna ovan skrevs för ljus botten. Här rättas det som inte kan lösas
   genom att bara byta ett värde i tokens.
   ===================================================== */

/* Brödsmulorna låg på en halvvit platta - lyser som en list på mörk botten. */
.sj-brodsmulor {
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid var(--sj-ram);
}

/* Bannern var mörk redan; nu behöver den skilja sig från sidan bakom. */
.sj-banner {
	border-bottom: 1px solid var(--sj-ram);
}

/* Kort och ark: ramen bär skillnaden när skuggan inte syns. */
.sj-kort,
.sj-innehall,
.woocommerce div.product .summary,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-tabs,
.woocommerce ul.products li.product {
	border: 1px solid var(--sj-ram);
}

/* PRODUKTBILDER. Nästan alla foton är frilagda mot vitt. Mot en mörk platta
   blir de vita fyrkanter, så bildytan förblir ljus med flit - produkten ska
   synas, inte platsen den ligger på. */
.woocommerce ul.products li.product img,
.woocommerce div.product .woocommerce-product-gallery img {
	background: #f4f1ec;
	border-radius: var(--sj-radie-s);
}

.woocommerce div.product .woocommerce-product-gallery {
	background: var(--sj-yta);
}

/* Formulärfält: ljusa fält på mörk botten bländar. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
	background: #10151b;
	color: var(--sj-text);
	border-color: var(--sj-ram);
}

input::placeholder,
textarea::placeholder {
	color: var(--sj-dampad);
}

/* WooCommerce-notiser: den tonade sektionsfärgen räcker som platta. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--sj-yta-sektion);
	color: var(--sj-text);
}

/* Mitt konto-menyn. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border-color: var(--sj-ram);
	background: var(--sj-yta);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	border-bottom-color: var(--sj-ram);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--sj-yta-sektion);
}

/* Andrahandsknappen ärver textfärgen, som nu är ljus - stämmer redan. Men
   knappen i produktlistan pekade på den mörka varumärkesblåa. */
.woocommerce ul.products li.product .button {
	color: var(--sj-bla-ljus);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
	background: var(--sj-bla-ljus);
	color: #10151b;
	border-color: var(--sj-bla-ljus);
}

/* Rälsavdelaren ritades i mörkblått mot ljust papper - osynlig nu. */
.sj-rals {
	border-top-color: rgba(255, 255, 255, 0.16);
	border-bottom-color: rgba(255, 255, 255, 0.16);
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.10) 0 2px,
		transparent 2px 34px
	);
}

/* Sidfoten är nu nästan samma ton som sidan. Den behöver en kant för att
   fortfarande läsas som en avslutning. */
.sj-sidfot {
	background: var(--sj-yta-banner);
	border-top: 1px solid var(--sj-ram);
	color: var(--sj-text);
}

/* Tonad sektion får vara ljusare än sidan, inte mörkare. */
.sj-sektion--tonad {
	background: var(--sj-yta-sektion);
}

/* =====================================================
   17. HUVUDMENYN, OMGJORD
   =====================================================

   Robin: "Sen gillar jag inte huvudmenyn, ser tråkig ut". Den var det, och den
   var dessutom trång: inklämd mellan en bred logga och fyra ikoner bröts
   "Om Oss" och "Mitt konto" i två rader redan på 1440 px.

   Nu ligger navigeringen på egen rad. Det ger utrymme för versaler och
   spärrning - ett formspråk som klär en industriell verkstad bättre än vanlig
   brödtext - och för en markering som växer fram i stället för att bara tändas.
   ===================================================== */

.sj-huvud__navrad {
	display: none;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(0, 0, 0, 0.15);
}

@media (min-width: 900px) {
	.sj-huvud__navrad {
		display: block;
	}

	/* Menyknappen ska bort på bred skärm. Regeln behöver TVÅ klasser: den
	   generella .sj-ikonknapp står senare i filen och vann annars på
	   källordning, så hamburgaren hängde kvar bredvid en fullt synlig meny. */
	.sj-huvud .sj-huvud__knapp--meny {
		display: none;
	}
}

.sj-meny {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sj-meny > li > a {
	position: relative;
	display: block;
	padding: var(--sj-steg-4) var(--sj-steg-5);
	border-bottom: 0;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	opacity: 0.85;
}

.sj-meny > li > a:hover,
.sj-meny > li > a:focus {
	opacity: 1;
}

/* Markeringen växer ut från mitten. Ett streck som bara tänds är en tillstånds-
   ändring; ett som växer är en rörelse, och det är skillnaden mellan en meny
   som känns död och en som svarar. */
.sj-meny > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 10px;
	height: 2px;
	background: var(--sj-orange);
	transition: left 0.2s ease, right 0.2s ease;
}

.sj-meny > li > a:hover::after,
.sj-meny > li > a:focus::after,
.sj-meny > li.current-menu-item > a::after,
.sj-meny > li.current-menu-parent > a::after,
.sj-meny > li.current-menu-ancestor > a::after {
	left: var(--sj-steg-5);
	right: var(--sj-steg-5);
}

/* Undermenyerna hänger nu under navraden, inte under sidhuvudets överdel. */
.sj-meny .sub-menu {
	top: 100%;
	border-top-width: 2px;
}

.sj-meny .sub-menu a {
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.9;
}

/* Pilen på föräldrar: mindre och tystare nu när posterna är versaler. */
.sj-meny .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: calc(var(--sj-steg-5) - 10px);
	top: 50%;
	width: 0.32em;
	height: 0.32em;
	margin-top: -0.25em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
}

.sj-meny .menu-item-has-children > a {
	padding-right: calc(var(--sj-steg-5) + 10px);
}

/* Den gamla pilen satt på ::after, som nu är markeringsstrecket. */
.sj-meny .menu-item-has-children > a::after {
	border: 0;
	margin-left: 0;
	width: auto;
	height: 2px;
	transform: none;
}

/* =====================================================
   WOOCOMMERCES FORMULÄRFÄLT
   =====================================================

   Temat säger att fält ska vara mörka. Inuti WooCommerce-formulär blev de
   ändå vita rutor med svart text - läsbara, men tvärtemot designen och som
   lysande fyrkanter mitt i ett mörkt formulär.

   Orsaken är specificitet, inte en saknad regel:

       .woocommerce form .form-row .input-text   (WooCommerce)
       input[type="text"]                        (temat)

   Fyra selektorer mot två. WooCommerce vinner, varje gång.

   LÖSNINGEN ÄR INTE ATT SKRIVA EN TYNGRE SELEKTOR eller att ta till
   !important. WooCommerce läser sina egna färger ur CSS-variabler med
   inbyggda förval - att sätta variablerna är det de finns till för, och det
   fungerar även när WooCommerce ändrar sina selektorer i nästa version.

   Elprylars motsvarande post rekommenderade en bred !important-regel mot
   blockkassan. Den behövs inte här: sjrental kör den klassiska kortkodskassan,
   och variabelvägen är renare på båda.
   ===================================================== */

.woocommerce,
.woocommerce-page {
	--wc-form-color-background: #10151b;
	--wc-form-color-text: var(--sj-text);
	--wc-form-border-color: var(--sj-ram);
	--wc-form-border-width: 1px;
}