/* Prototypens komponenter i blockens uppmärkning (fas 2). komponenter.css är prototypens CSS; här står det som
   skiljer: kärnblockens omslag (figure, wp-block-*), länkar och knappar som redigeras i blocken, navigationsblocket,
   minivarukorgen och listor som i prototypen var <ul>/<li> och i blocken är grupper. Värdena är designsystemets. */

/* Kärnblockens egna marginaler bort: komponenterna styr avstånden, som i prototypen */
.wp-block-image,
.wp-block-buttons,
.wp-block-list,
.wp-block-social-links {
	margin: 0;
}

/* Grupperna har inga egna marginaler i kärnan; nollställningen väger noll, så att innehållsbredden (.inre) centreras
   och komponenternas marginaler gäller som i prototypen. Med .wp-block-group stod innehållet till vänster på
   skärmar bredare än 1 440 px (Hugo 2026-10-13) */
:where(.wp-block-group) {
	margin: 0;
}

.wp-block-image img {
	vertical-align: bottom;
}

/* Mallbitarna */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 20;
}

.wp-site-blocks > header.wp-block-template-part .sidhuvud {
	position: static;
}

/* Knappar: kärnblocket Knapp med designsystemets utseende (grön som standard, stilarna Ljus och Kontur) */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--knapp-hojd);
	padding: 0 var(--wp--preset--spacing--50);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.wp-block-button.is-style-ljus .wp-block-button__link {
	background: var(--wp--preset--color--bas);
	border-color: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-ljus .wp-block-button__link:hover {
	background: var(--wp--preset--color--yta);
	border-color: var(--wp--preset--color--yta);
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-kontur .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-kontur .wp-block-button__link:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bas);
}

/* Två knappar bredvid varandra (prototypens .knappar) får mindre luft i sidled i mobilen; en ensam knapp behåller sin */
@media (max-width: 47.99rem) {
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* Länk med pil: klassen står på stycket eller listpunkten runt länken, så att länken redigeras som vanlig text,
   och pilen ritas av CSS (ikonen i/pil) */
:is(p, li).lank-pil {
	display: block;
	min-height: 0;
}

.lank-pil > a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tryckyta);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

/* Pilen; också på en länk med klassen i löptext (Om oss: Trustpilot i Fördelar) */
:is(.lank-pil > a, a.lank-pil)::after {
	content: "";
	flex: none;
	width: var(--wp--custom--ikon-mellan);
	height: var(--wp--custom--ikon-mellan);
	background: currentColor;
	-webkit-mask: url("../bilder/pil.svg") center / contain no-repeat;
	mask: url("../bilder/pil.svg") center / contain no-repeat;
	transition: transform 0.15s;
}

:is(.lank-pil > a, a.lank-pil):hover::after {
	transform: translateX(var(--wp--preset--spacing--10));
}

/* Sidhuvudet: logotypen, navigationsblocket och minivarukorgen */
.sidhuvud__logga a {
	display: block;
}

nav.huvudmeny {
	display: flex;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
}

/* Navigationsblocket lägger klassen huvudmeny också på listan. Prototypens regler för sin egen meny (.huvudmeny
   dold i mobilen och som block på dator) ska inte träffa listan, som är en flexrad i blocket. */
ul.huvudmeny {
	display: flex;
}

.huvudmeny .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--50);
}

.huvudmeny .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.huvudmeny .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gron-mork);
}

.huvudmeny .current-menu-item > .wp-block-navigation-item__content,
.huvudmeny [aria-current="page"],
.snabblankar [aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Undermenyn Hjälp, som prototypens .undermeny (på dator) */
@media (min-width: 64rem) {
	.huvudmeny .wp-block-navigation__submenu-container {
		min-width: 0;
		padding: var(--wp--preset--spacing--20) 0;
		border: 1px solid var(--wp--preset--color--linje);
		background: var(--wp--preset--color--bas);
	}

	.huvudmeny .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-inline: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
		white-space: nowrap;
	}

	.huvudmeny .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--yta);
		color: var(--wp--preset--color--text);
	}
}

/* Mobilmenyn: navigationsblockets eget lager under 64rem i stället för kärnans 600 px, med knappen "Meny" och
   ikonen i/meny. Varukorgen står före knappen, som i prototypen. */
.huvudmeny .wp-block-navigation__responsive-container-open,
.huvudmeny .wp-block-navigation__responsive-container-close {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-width: var(--wp--custom--tryckyta);
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
}

.huvudmeny .wp-block-navigation__responsive-container-open::before,
.huvudmeny .wp-block-navigation__responsive-container-close::before {
	content: "";
	width: var(--wp--custom--ikon);
	height: var(--wp--custom--ikon);
	background: currentColor;
	-webkit-mask: url("../bilder/meny.svg") center / contain no-repeat;
	mask: url("../bilder/meny.svg") center / contain no-repeat;
}

.huvudmeny .wp-block-navigation__responsive-container-close::before {
	-webkit-mask-image: url("../bilder/stang.svg");
	mask-image: url("../bilder/stang.svg");
}

.huvudmeny .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.huvudmeny .wp-block-navigation__responsive-container-close {
	display: inline-flex;
}

@media (min-width: 64rem) {
	.huvudmeny .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

@media (max-width: 63.99rem) {
	/* Knappen Meny står efter varukorgen, med samma mellanrum som prototypens .sidhuvud__verktyg */
	nav.huvudmeny {
		order: 2;
		margin-left: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--60));
	}

	.huvudmeny .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.huvudmeny .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.huvudmeny .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--custom--marginal) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
}

.huvudmeny .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
}

.huvudmeny .is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.huvudmeny .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.huvudmeny .is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	min-height: var(--wp--custom--knapp-hojd);
	font-size: var(--wp--preset--font-size--rubrik-4);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

/* Kärnans regel för undermenyn i lagret har fem klasser (bredd 200 px, indrag 2rem, luft ovanför) */
.huvudmeny .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
}

.huvudmeny .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	width: 100%;
	gap: 0;
}

.huvudmeny .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-dampad);
	pointer-events: none;
}

.huvudmeny .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--bas);
}

/* Minivarukorgen: knappen som prototypens varukorg i sidhuvudet */
.sidhuvud .sidhuvud__korg {
	display: flex;
	margin-left: auto;
	padding: 0;
}

.sidhuvud .sidhuvud__korg .wc-block-mini-cart__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	padding: 0;
	color: var(--wp--preset--color--text);
}

.sidhuvud__korg .wc-block-mini-cart__quantity-badge {
	display: contents;
}

.sidhuvud .sidhuvud__korg .wc-block-mini-cart__icon {
	width: var(--wp--custom--ikon);
	height: var(--wp--custom--ikon);
}

.sidhuvud .sidhuvud__korg .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--gron);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 600;
}

/* Varukorgslådan när den är stängd: WooCommerce döljer den för skärmläsare (aria-hidden) men lämnar knapparna
   i den nåbara med tabb (axe aria-hidden-focus). Dold också för tangentbordet tills den öppnas. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
	visibility: hidden;
}

/* Genvägsraden i mobilen: navigationsblocket i raden */
.snabblankar .wp-block-navigation__container {
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--50);
}

.snabblankar .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

@media (min-width: 64rem) {
	.genvagar-del {
		display: none;
	}
}

/* Hjälten: texten är blocken inuti; länken med pil och löftena. Textblocket får krympa under widgetens bredd i
   320 px (rutnätets element växer annars till sitt innehålls minsta bredd). */
.hjalte > .hjalte__text {
	min-width: 0;
}

.hjalte__loften,
.hjalte__loften > *,
.ts-trustpilot {
	min-width: 0;
	max-width: 100%;
}

.hjalte .lank-pil > a {
	color: var(--wp--preset--color--bas);
}

.hjalte .lank-pil > a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hjalte__loften > * {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tryckyta-tat);
}

.hjalte--redigerare {
	min-height: 0;
	background: var(--wp--preset--color--skog);
}

/* Trustpilots Micro Star, med länken till upplysningen om omdömena bredvid (J-16) */
.ts-trustpilot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--liten);
}

/* Micro Star centrerar betygsordet, stjärnorna och loggan i sin ruta. Rutan är lika bred som innehållet (omkring
   265 px med "Utmärkt", mätt på staging 2026-10-14), så att betyget börjar vid textkanten i stället för 20 px in.
   Aldrig bredare än raden (320 px) */
.ts-trustpilot .trustpilot-widget {
	flex: 0 1 auto;
	min-width: 0;
	width: 16.75rem;
	max-width: 100%;
	min-height: var(--wp--custom--ikon);
}

.ts-trustpilot__upplysning {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
	color: inherit;
}

.ts-trustpilot--mork .ts-trustpilot__upplysning {
	color: var(--wp--preset--color--bas);
}

.ts-trustpilot--redigerare {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--linje-mork);
}

/* Orbit Stellar i två former: bilden utan länk, namnet och knappen leder till produkten */
.form__bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.form__text .wp-block-buttons {
	margin-top: 0;
}

/* Oval mot rund: Fördel och Passar som fetstil i början av raden */
.formen__fakta p strong::after {
	content: ":";
}

/* Bild och text */
.bild-text__bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Reservdelar: länkarna i en lista utan punkter */
.delar__lankar {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

.delar__bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Tre argument och länkkorten: grupper i stället för listpunkter */
.argument > *,
.lankkort > * {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
}

.lankkort > * {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.argument img,
.lankkort img {
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--wp--preset--spacing--20);
	object-fit: cover;
}

.lankkort .wp-block-buttons {
	margin-top: auto;
}

.lankkort .wp-block-image {
	width: 100%;
}

/* Avslutningen: bilden i hela ytan */
.avslut__bild {
	position: absolute;
	inset: 0;
}

.avslut__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% 50%;
}

.avslut .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--20);
}

@media (min-width: 64rem) {
	.avslut__bild img {
		object-position: 50% 50%;
	}
}

/* Sidfoten: navigationsblocken som prototypens listor, sociala länkar som runda ikonknappar */
.sidfot__logga img {
	width: var(--wp--custom--logga-bredd);
	height: auto;
	border-radius: 0;
	filter: brightness(0) invert(1);
}

.sidfot__kolumn .wp-block-navigation {
	font-size: var(--wp--preset--font-size--liten);
}

.sidfot__kolumn .wp-block-navigation__container {
	gap: 0;
}

.sidfot__kolumn .wp-block-navigation-item__content,
.sidfot__lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
	color: var(--wp--preset--color--skog-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sidfot__kolumn .wp-block-navigation-item__content:hover,
.sidfot__lista a:hover {
	color: var(--wp--preset--color--bas);
	text-decoration: underline;
}

.sidfot__lista {
	display: grid;
	padding: 0;
	list-style: none;
}

.sidfot .wp-block-social-links.sidfot__sociala {
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
}

.sidfot .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--skog-text);
}

.sidfot .wp-block-social-links .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 1px solid var(--wp--custom--linje-skog);
	border-radius: 50%;
}

.sidfot .wp-block-social-links .wp-block-social-link-anchor svg {
	width: var(--wp--custom--ikon-mellan);
	height: var(--wp--custom--ikon-mellan);
}

/* Prototypens linjeikoner (inc/meny.php); kärnan fyller sociala ikoner med textfärgen */
.sidfot .wp-block-social-links .wp-block-social-link-anchor svg.ikon {
	fill: none;
	stroke: currentColor;
}

/* Genvägar med rubrik och länk (404, Trampoliner): grupper i stället för listpunkter */
.genvagar > * {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------------------------------------------------------
   Produktsidan (pass 2): WooCommerces block med prototypens galleri (.galleri) och köpruta (.kopruta). WooCommerces
   egna regler står mest i :where() och väger noll; där de väger mer står varför.
   ------------------------------------------------------------------------------------------------------------------ */

/* Galleriet: visningsytan i 3:2 med pilarna inuti, miniatyrerna i en rad om fem under (prototypens .galleri) */
.produkt .galleri.wc-block-product-gallery {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.galleri .wc-block-product-gallery-large-image {
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--yta);
}

.galleri .wc-block-product-gallery-large-image__container,
.galleri .wc-block-product-gallery-large-image__wrapper {
	height: 100%;
}

.galleri .wc-block-product-gallery-large-image__wrapper {
	aspect-ratio: 3 / 2;
}

/* Bilderna fyller ytan; produktbilden på vit botten (den första) visas hel. Blocket skriver object-fit i
   bildens style-attribut, så det här behöver !important */
.galleri .wc-block-product-gallery-large-image__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
}

.galleri .wc-block-product-gallery-large-image__wrapper:first-child {
	background: var(--wp--preset--color--bas);
}

.galleri .wc-block-product-gallery-large-image__wrapper:first-child img {
	object-fit: contain !important;
}

/* Med 3D-modellen (beslut 94) är första rutan modellens affisch och produktbilden ligger sist; båda på vit botten,
   hela (inc/produkt.php märker rutorna) */
.galleri .wc-block-product-gallery-large-image__wrapper.galleri__ruta--vit {
	background: var(--wp--preset--color--bas);
}

.galleri .wc-block-product-gallery-large-image__wrapper.galleri__ruta--vit img {
	object-fit: contain !important;
}

/* Pilarna: prototypens .galleri__pil, också i mobilen (WooCommerce döljer dem under 601 px med två klasser) */
.galleri .wc-block-product-gallery-large-image__inner-blocks {
	inset: 0;
	width: auto;
	height: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.galleri .wc-block-next-previous-buttons.wc-block-next-previous-buttons {
	display: flex;
}

.galleri .wc-block-next-previous-buttons__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

/* Prototypens pil (ikonen i/pil) i stället för WooCommerces vinkel; bakåt är samma pil spegelvänd */
.galleri .wc-block-next-previous-buttons__button svg {
	display: none;
}

.galleri .wc-block-next-previous-buttons__button::before {
	content: "";
	width: var(--wp--custom--ikon);
	height: var(--wp--custom--ikon);
	background: currentColor;
	-webkit-mask: url("../bilder/pil.svg") center / contain no-repeat;
	mask: url("../bilder/pil.svg") center / contain no-repeat;
}

.galleri .wc-block-next-previous-buttons__button:first-child::before {
	transform: scaleX(-1);
}

.galleri .wc-block-next-previous-buttons__button[aria-disabled="true"] {
	color: var(--wp--preset--color--linje-mork);
	cursor: default;
}

/* Miniatyrerna på en rad i 3:2, lika breda oavsett antal (fem bilder, eller fem och filmen), den visade med en ram
   (prototypens .galleri__tummar) */
.galleri .wc-block-product-gallery-thumbnails.wc-block-product-gallery-thumbnails {
	width: 100%;
	height: auto;
	aspect-ratio: auto !important;
	order: 0;
}

.galleri .wc-block-product-gallery-thumbnails__scrollable {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	height: auto;
	overflow: visible;
}

.galleri .wc-block-product-gallery-thumbnails__thumbnail,
.galleri .wc-block-product-gallery-thumbnails__thumbnail__image {
	width: 100%;
	height: auto;
}

.galleri .wc-block-product-gallery-thumbnails__thumbnail__image {
	max-height: none;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 2px solid transparent;
	background: var(--wp--preset--color--yta);
	object-fit: cover;
	outline-offset: var(--wp--custom--fokus);
}

.galleri .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border-color: var(--wp--preset--color--text);
}

/* I mobilen blir miniatyrerna prickar (varv 7, beslut 83), så att pris, storlek och köpknapp ryms i första skärmen.
   Prickarna är WooCommerces egna miniatyrer, så valet, svepningen och tangentbordet fungerar som förut; tryckytan är
   36 px (WCAG 2.5.8) och fokus ritas runt pricken (2.4.7). Reglerna står efter miniatyrernas och vinner därför. */
@media (max-width: 63.99rem) {
	.galleri .wc-block-product-gallery-thumbnails__scrollable {
		display: flex;
		justify-content: center;
		gap: var(--wp--preset--spacing--10);
	}

	.galleri .wc-block-product-gallery-thumbnails__thumbnail {
		position: relative;
		flex: none;
		width: var(--wp--custom--tryckyta-tat);
		height: var(--wp--custom--tryckyta-tat);
	}

	.galleri .wc-block-product-gallery-thumbnails__thumbnail::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--wp--preset--color--linje-mork);
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	.galleri .wc-block-product-gallery-thumbnails__thumbnail:has(.wc-block-product-gallery-thumbnails__thumbnail__image--is-active)::after {
		background: var(--wp--preset--color--text);
	}

	.galleri .wc-block-product-gallery-thumbnails__thumbnail:has(:focus-visible) {
		outline: 2px solid var(--wp--preset--color--text);
		outline-offset: 2px;
		border-radius: 50%;
	}

	.galleri .wc-block-product-gallery-thumbnails__thumbnail__image {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border: 0;
		background: transparent;
		opacity: 0;
		outline: none;
	}
}

/* Köprutan: namnet, betyget, priset, storleken, lagret, knappen och löftena med samma avstånd (prototypens .kopruta).
   Formuläret och dess grupper bidrar med sina delar till samma rutnät */
.kopruta .wc-block-add-to-cart-with-options,
.kopruta .wc-block-add-to-cart-with-options .wp-block-woocommerce-add-to-cart-with-options-variation-selector {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.kopruta .single_variation_wrap {
	display: contents;
}

/* WooCommerces klassiska CSS ger formuläret (form.cart) en marginal och en clearfix, som blir en tom rad i rutnätet */
.kopruta form.wc-block-add-to-cart-with-options {
	margin: 0;
}

.kopruta form.wc-block-add-to-cart-with-options::before,
.kopruta form.wc-block-add-to-cart-with-options::after {
	content: none;
}

.kopruta .ts-trustpilot__upplysning {
	color: var(--wp--preset--color--text-dampad);
}

.kopruta__pris .wp-block-woocommerce-product-price,
.kopruta__pris .wc-block-components-product-price {
	font: inherit;
}

/* Variantvalet: WooCommerces knappar (role="radio"), en grupp per egenskap med namnet ovanför. Reservdelarna har
   prototypens .variant__val (en knapp per alternativ i en rad som bryts), studsmattorna dess .storlek (rutor med
   storlekens namn och mått) */
.variantval {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
}

.variantval .wp-block-woocommerce-product-filter-chips {
	font-size: inherit;
}

.variantval .wc-block-product-filter-chips__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.variantval .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.variantval .wc-block-product-filter-chips__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	text-align: left;
	cursor: pointer;
}

.variantval .wc-block-product-filter-chips__item:hover {
	border-color: var(--wp--preset--color--text);
}

.variantval .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.variantval .wc-block-product-filter-chips__item:focus {
	outline: none;
}

.variantval .wc-block-product-filter-chips__item:focus-visible {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: var(--wp--custom--fokus);
}

/* Ett alternativ som inte finns med de andra valen: synligt, med streck och dämpad text, och avstängt (F-5);
   produkt.js visar vid ett klick vad som krockar, utan att ändra något val */
.variantval .wc-block-product-filter-chips__item.ts-otillganglig,
.variantval .wc-block-product-filter-chips__item:disabled {
	border-style: dashed;
	border-color: var(--wp--preset--color--linje-mork);
	color: var(--wp--preset--color--text-dampad);
	text-decoration: line-through;
	opacity: 1;
}

.variantval .wc-block-product-filter-chips__item.ts-otillganglig,
.variantval .wc-block-product-filter-chips__item:disabled {
	cursor: not-allowed;
}

.variantval .wc-block-product-filter-chips__item.ts-otillganglig:hover {
	border-color: var(--wp--preset--color--linje-mork);
}

.variantval .wc-block-product-filter-chips__label {
	display: block;
}

/* Studsmattornas storlekar: rutor i ett rutnät, namnet och måtten på var sin rad. Texten är "Large", en
   radbrytning och "4,9 × 3,3 m" (inc/produkt.php), och första raden får namnets stil (prototypens .storlek__namn
   och .storlek__matt) */
.studsmatta .variantval .wc-block-product-filter-chips__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}

.studsmatta .variantval .wc-block-product-filter-chips__item {
	display: grid;
	align-content: center;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.studsmatta .variantval .wc-block-product-filter-chips__item[aria-checked="true"] {
	font-weight: inherit;
}

.studsmatta .variantval .wc-block-product-filter-chips__text {
	display: block;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	line-height: 1.6;
	white-space: pre-line;
}

.studsmatta .variantval .wc-block-product-filter-chips__text::first-line {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
}

/* Köpblockets ram är WooCommerces notisruta runt formuläret, med notisernas marginal (1,5em) */
.kopruta .wc-block-components-notices {
	margin: 0;
}

/* Tomma rader i köprutan tar ingen plats i rutnätet: lagret innan en variant är vald, och bevakningen när den valda
   varianten finns i lager */
.kopruta .kopruta__lager:not(:has(> :not([hidden], :empty))),
.kopruta .bevakningar:not(:has(> :not([hidden]))) {
	display: none;
}

/* Lagret och variantens text på en rad (prototypens .kopruta__lager med .lager) */
.kopruta .kopruta__lager {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--liten);
}

.kopruta__lager .wc-block-components-product-stock-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	color: var(--wp--preset--color--gron-mork);
	font-size: inherit;
	font-weight: 600;
}

.kopruta__lager .wc-block-components-product-stock-indicator:empty,
.kopruta__lager .wc-block-components-product-stock-indicator[hidden] {
	display: none;
}

.kopruta__lager .wc-block-components-product-stock-indicator::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--gron);
}

/* Slut i lager: prototypens .lager--slut */
.kopruta__lager .wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--preset--color--orange-mork);
}

.kopruta__lager .wc-block-components-product-stock-indicator--out-of-stock::before {
	background: var(--wp--preset--color--orange);
}

.kopruta__lager .wp-block-woocommerce-add-to-cart-with-options-variation-description,
.kopruta__lager .wp-block-woocommerce-add-to-cart-with-options-variation-description p {
	margin: 0;
}

.studsmatta .kopruta__lager .wp-block-woocommerce-add-to-cart-with-options-variation-description :is(b, strong) {
	font-weight: inherit;
}

/* Reservdelarna: variantens text i en egen ruta under lagret (prototypens .kopruta__variant), med köprutans avstånd */
.produkt--del .kopruta .kopruta__lager {
	row-gap: var(--wp--preset--spacing--50);
}

.produkt--del .kopruta__lager .wp-block-woocommerce-add-to-cart-with-options-variation-description {
	display: grid;
	flex-basis: 100%;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--yta);
	font-size: var(--wp--preset--font-size--bas);
}

.produkt--del .kopruta__lager .wp-block-woocommerce-add-to-cart-with-options-variation-description[hidden] {
	display: none;
}

/* Knappen i hela bredden (prototypens .knapp--bred). Studsmattorna köps en i taget: antalet visas inte */
.kopruta .kopruta__kop {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.kopruta .wc-block-components-product-button {
	align-items: stretch;
	width: 100%;
	margin: 0;
}

.kopruta .wc-block-components-product-button .wc-block-components-product-button__button {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	margin: 0;
	text-align: center;
}

/* Studsmattorna: utan ett giltigt val (ingen storlek vald, eller slut i lager) ser knappen avstängd ut, som prototypens
   .knapp:disabled. Reservdelarnas knapp ser alltid ut som en knapp: ett klick utan alla val ger beskedet under den
   (produkt.js, prototypens .kopruta__fel) */
.studsmatta .kopruta .wc-block-add-to-cart-with-options.is-invalid .wc-block-components-product-button__button {
	border-color: var(--wp--preset--color--linje);
	background: var(--wp--preset--color--yta);
	color: var(--wp--preset--color--text-dampad);
	opacity: 1;
	cursor: not-allowed;
}

/* WooCommerce gör knappen halvgenomskinlig utan giltigt val; reservdelarnas knapp är en vanlig knapp (se ovan) */
.produkt--del .kopruta .wc-block-add-to-cart-with-options.is-invalid .wc-block-components-product-button__button {
	opacity: 1;
	cursor: pointer;
}

/* Antalet (prototypens .antal): minus, antalet och plus i en ram med tryckytor */
.kopruta .wc-block-components-quantity-selector {
	display: inline-grid;
	grid-template-columns: var(--wp--custom--tryckyta) minmax(var(--wp--custom--tryckyta-tat), auto) var(--wp--custom--tryckyta);
	align-items: center;
	min-width: 0;
	height: auto;
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
}

.kopruta .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 0;
	min-height: var(--wp--custom--tryckyta);
	padding: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--rubrik-4);
	opacity: 1;
	cursor: pointer;
}

.kopruta .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--wp--preset--color--linje-mork);
	cursor: not-allowed;
}

.kopruta .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	width: 100%;
	min-width: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
	text-align: center;
}

.kopruta .wc-block-components-quantity-selector :is(button, input):focus {
	box-shadow: none;
}

.kopruta .wc-block-components-quantity-selector :is(button, input):focus-visible {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: calc(-1 * var(--wp--custom--fokus));
}

.studsmatta .kopruta .wc-block-add-to-cart-with-options__quantity-selector {
	display: none;
}

.studsmatta .kopruta .kopruta__kop {
	grid-template-columns: minmax(0, 1fr);
}

.kopruta__loften {
	list-style: none;
}

/* Produktens beskrivning (inläggets innehåll) med beskrivningstextens avstånd mellan styckena */
.beskrivning__text > .wp-block-post-content {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* Beskrivningen: produktens korta beskrivning i prototypens uppmärkning. WooCommerce gör rubrikerna i den små */
.beskrivning .wc-block-components-product-summary {
	margin: 0;
}

.beskrivning .wc-block-components-product-summary h2 {
	color: inherit;
	font-size: var(--wp--preset--font-size--rubrik-2);
}

/* Punkterna i beskrivningen (prototypens dl.punkter som lista). Bara listans egna punkter: Monteringstips har
   punktlistor inuti .punkter--tre */
ul.punkter {
	padding: 0;
	list-style: none;
}

/* Rubriken (fetstilen) på en egen rad och texten under, med en länk i texten där den står (Om oss: Trustpilot) */
ul.punkter > li {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--text);
	color: var(--wp--preset--color--text-dampad);
}

ul.punkter > li > strong {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

/* Fördelarna i säljtexten: fetstil följd av kolon, utan punkter (prototypens dl.fordelar) */
ul.fordelar {
	padding: 0;
	list-style: none;
}

.fordelar li strong {
	font-weight: 600;
}

.fordelar li strong::after {
	content: ":";
}

/* Bilderna i mosaiken och bildtexterna */
.mosaik .wp-block-image {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.mosaik .wp-element-caption {
	margin: 0;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Manualerna */
ul.dokument {
	padding: 0;
	list-style: none;
}

/* Produktsamlingarna (WooCommerces produktmall med klassen produktlista, inc/produktlista.php): korten som
   prototypens .produktkort. WooCommerce ger kortens delar en marginal under, som kommer utöver kortets avstånd */
.produktlista > .produktkort > :not(.produktkort__bild) {
	margin: 0;
}

.produktlista > .produktkort > .produktkort__bild {
	height: auto;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.produktlista .produktkort__pris .wc-block-components-product-price {
	font: inherit;
}

/* Namnet är en vanlig länk i rubriken, som i prototypen; kärnan gör inläggstitelns länk till ett inline-block */
.produktlista .produktkort__namn a {
	display: inline;
}

.wp-block-woocommerce-product-collection:has(> .produktlista) {
	margin: 0;
}

/* Produktsamlingens notisruta (tom tills en vara läggs i varukorgen från listan) har notisernas marginal */
.wp-block-woocommerce-product-collection > .wc-block-components-notices {
	margin: 0;
}

/* ------------------------------------------------------------------------------------------------------------------
   Köpet (pass 4): varukorgslådan, varukorgen och kassan av WooCommerces block, med prototypens .korglada, .korgrad,
   .summor, .varukorg och .kassa. WooCommerces regler för raderna väger mycket (table.wc-block-cart-items …), så
   reglerna här börjar med lådan eller varukorgen
   ------------------------------------------------------------------------------------------------------------------ */

/* Lådan: glider in från höger, prototypens bredd och färger. Den ligger över kakrutan (Complianz), som annars täckte
   lådans knappar tills kakvalet var gjort */
.wc-block-components-drawer__screen-overlay {
	z-index: 100000;
	background-color: var(--wp--custom--yta-pa-bild);
}

.wc-block-mini-cart__drawer.wc-block-components-drawer {
	--drawer-width: min(100vw, calc(var(--wp--custom--textbredd) - var(--wp--preset--spacing--80)));
	--neg-drawer-width: calc(-1 * var(--drawer-width));
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--bas);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
	height: 100%;
	padding: 0;
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Lådans notisruta (tom tills något går fel) har WooCommerces marginaler */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices {
	margin: 0;
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices:has(.wc-block-components-notice-banner) {
	margin: var(--wp--preset--spacing--30) var(--wp--custom--marginal) 0;
}

/* Huvudet: rubriken och stängknappen på en rad, med en linje under (WooCommerce tonar ut rubrikens nedre kant) */
.wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
	-webkit-mask-image: none;
	mask-image: none;
	display: flex;
	align-items: center;
	min-height: calc(var(--wp--custom--tryckyta) + 2 * var(--wp--preset--spacing--40));
	margin: 0;
	padding: var(--wp--preset--spacing--40) calc(var(--wp--custom--marginal) + var(--wp--custom--tryckyta)) var(--wp--preset--spacing--40) var(--wp--custom--marginal);
	border-bottom: 1px solid var(--wp--preset--color--linje);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-3);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: calc(var(--wp--custom--marginal) - var(--wp--preset--spacing--20));
	z-index: 10;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	position: static;
	display: grid;
	place-items: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text);
	opacity: 1;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
	width: var(--wp--custom--ikon);
	max-width: none;
	height: var(--wp--custom--ikon);
}

/* Listan rullar för sig mellan huvudet och foten */
.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	flex: 1;
	overflow-y: auto;
	padding: 0 var(--wp--custom--marginal);
}

.wc-block-mini-cart__drawer .korglada__tom {
	padding: var(--wp--preset--spacing--50) var(--wp--custom--marginal);
	text-align: left;
}

/* En rad (prototypens .korgrad): bild, namn och variant, pris, antal och Ta bort. Tabellens celler läggs i ett
   rutnät; produktcellen och dess omslag släpper sina barn till rutnätet, och ordningen sätts med order */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items,
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: var(--wp--preset--spacing--90) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	align-items: start;
	padding: var(--wp--preset--spacing--50) 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row > td {
	padding: 0;
	border: 0;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-row: 1 / span 5;
	order: 0;
	width: auto;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--wp--preset--color--yta);
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: contents;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	grid-column: 2;
	order: 1;
	color: inherit;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
	text-decoration: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name:hover {
	text-decoration: underline;
}

/* Styckpriset står inte på raden; radens pris (antal gånger pris) står under varianten, som i prototypen */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata__description,
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-badge {
	display: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
	grid-column: 2;
	order: 2;
	margin: 0;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Varianten som i prototypen: "Large, 4,9 × 3,3 m", utan egenskapens namn. Tilläggens uppgifter (måtten, inc/kassa.php)
   och egenskaperna (Storlek) står i var sin lista. Listorna ställs ut (display: contents), så att varje uppgift får sin
   plats: egenskaperna först, sedan tilläggen, med komma emellan. Lägsta pris (ts-core pris) står på en egen rad med sitt
   namn; WooCommerce gör klassen av namnet, i lådan med "ä" och i varukorgen med ett bindestreck i stället */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-metadata.wc-block-components-product-metadata {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-metadata > :not(.wc-block-components-product-details) {
	display: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details.wc-block-components-product-details {
	display: contents;
	font-size: inherit;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details.wc-block-components-product-details[hidden] {
	display: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > * {
	display: inline-flex;
	order: 2;
	margin: 0;
	padding: 0;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details:last-of-type > * {
	order: 1;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > *::before {
	content: ",\a0";
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details:last-of-type > :first-child::before {
	content: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details__name,
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > * > [hidden],
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > * > span:last-child:not(.wc-block-components-product-details__value),
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > [hidden] {
	display: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > [class*="pris-senaste-30-dagarna"] {
	display: block;
	flex-basis: 100%;
	order: 3;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > [class*="pris-senaste-30-dagarna"]::before {
	content: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > [class*="pris-senaste-30-dagarna"] .wc-block-components-product-details__name {
	display: inline;
	margin-right: 0.25em;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-row: auto;
	grid-column: 2;
	order: 3;
	justify-content: flex-start;
	text-align: left;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	align-items: flex-start;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	display: grid;
	grid-row: auto;
	grid-column: 2;
	order: 4;
	justify-items: start;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--20);
}

/* Ta bort: prototypens textlänk i stället för papperskorgen; knappens namn för skärmläsare är WooCommerces */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: var(--wp--custom--tryckyta-tat);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	text-decoration: underline;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link svg {
	display: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::before {
	content: "Ta bort";
}

/* Antalet som i köprutan (prototypens .antal) */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-components-quantity-selector {
	display: inline-grid;
	grid-template-columns: var(--wp--custom--tryckyta) minmax(var(--wp--custom--tryckyta-tat), auto) var(--wp--custom--tryckyta);
	align-items: center;
	width: auto;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-components-quantity-selector::after {
	content: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 0;
	min-height: var(--wp--custom--tryckyta);
	padding: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--rubrik-4);
	opacity: 1;
	cursor: pointer;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--wp--preset--color--linje-mork);
	cursor: not-allowed;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	width: 100%;
	min-width: 0;
	padding: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
	text-align: center;
}

/* Lådans fot (prototypens .korglada__fot): delsumman, frakten och leveranstiden, Gå till kassan, Fortsätt handla
   och länken till varukorgen */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--custom--marginal);
	border-top: 1px solid var(--wp--preset--color--linje);
	box-shadow: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer::after {
	content: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--bas);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
	flex: none;
	font-weight: 400;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	margin: 0;
	font-weight: 600;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	display: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
	width: 100%;
	min-height: var(--wp--custom--tryckyta);
	margin: 0;
}

/* Visa varukorg är en länk under knapparna (prototypens .korglada__lank) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button.is-style-outline {
	justify-self: center;
	width: auto;
	min-height: var(--wp--custom--tryckyta-tat);
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--bas);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
	text-decoration: underline;
}

/* Varukorgssidan (prototypens .varukorg): raderna till vänster och summorna i en grå ruta till höger på dator */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
	margin: 0;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > :empty {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-components-sidebar {
	width: auto;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-cart table.wc-block-cart-items {
	border-top: 1px solid var(--wp--preset--color--linje);
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--yta);
}

@media (min-width: 48rem) {
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: var(--wp--preset--spacing--90) minmax(0, 1fr) auto auto;
		align-items: center;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-row: 1 / span 3;
		align-self: start;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		display: contents;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
		grid-row: 1 / span 3;
		grid-column: 3;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
		grid-row: 1 / span 3;
		grid-column: 4;
	}
}

@media (min-width: 64rem) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.wp-block-woocommerce-cart .wc-block-cart__sidebar {
		position: sticky;
		top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
	}
}

/* Summorna (prototypens .summor): rubriken, raderna med beloppet till höger och totalen med en linje över. Rutans
   delar ligger i ett rutnät, så att betalsätten (kassa.js, WooCommerces plats för tillägg i summorna) kan stå efter
   knappen, som i prototypen */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	display: contents;
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__submit {
	order: 1;
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar .slot-wrapper {
	order: 2;
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__totals-title {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-3);
	font-weight: 500;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

.wp-block-woocommerce-cart .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block {
	padding: 0;
	border: 0;
}

.wp-block-woocommerce-cart .wc-block-components-totals-wrapper::after {
	content: none;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--40);
	padding: 0;
	font-size: var(--wp--preset--font-size--bas);
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-weight: 600;
	text-transform: none;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value strong {
	font-weight: inherit;
	text-transform: none;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__description {
	flex-basis: 100%;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__description:empty {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linje-mork);
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 600;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-formatted-money-amount) {
	font-size: inherit;
}

.wp-block-woocommerce-cart .wc-block-cart__submit {
	margin: var(--wp--preset--spacing--20) 0 0;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	width: 100%;
	min-height: var(--wp--custom--tryckyta);
}

/* Rabattkoderna: en diskret rad som fälls ut */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	margin: 0;
	padding: var(--wp--preset--spacing--10) 0;
	font-size: var(--wp--preset--font-size--liten);
}

/* Kassans sidhuvud: Återgå till varukorgen med pilen före texten och vänd bakåt (prototypens .lank-pil--tillbaka) */
.sidhuvud__tillbaka {
	margin-left: auto;
}

.lank-pil--tillbaka > a {
	flex-direction: row-reverse;
}

.lank-pil--tillbaka > a::after {
	transform: rotate(180deg);
}

.lank-pil--tillbaka > a:hover::after {
	transform: rotate(180deg) translateX(var(--wp--preset--spacing--10));
}

/* Kassan (prototypens .kassa): formuläret till vänster och sammanfattningen till höger på dator */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	align-items: start;
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout > :empty {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	width: auto;
	margin: 0;
	padding: 0;
}

@media (min-width: 64rem) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
		position: sticky;
		top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
	}
}

/* Stegen: rubriken med numret i en rund markering, innehållet under, inget streck i kanten */
.wp-block-woocommerce-checkout .wc-block-checkout__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-checkout__form > :empty {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step::after,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__container::after {
	content: none;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-container,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title.wc-block-components-title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
}

.wp-block-woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	content: counter(checkout-step);
	position: static;
	display: grid;
	flex: none;
	place-items: center;
	width: var(--wp--custom--ikon-mellan);
	height: var(--wp--custom--ikon-mellan);
	border-radius: 50%;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bas);
	font-family: var(--wp--preset--font-family--bas);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 600;
	line-height: 1;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__content,
.wp-block-woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content {
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	margin: 0;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* "Du är just nu en besökande gäst." visas inte (Hugo 2026-11-10): butiken har inga kundkonton (beslut 16), så raden
   säger ingenting. kassa.js tar bort den ur e-postfältets beskrivning, så att skärmläsare inte heller läser den. */
.wp-block-woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
	display: none;
}

/* Obligatoriska fält har en asterisk efter etiketten, med förklaringen överst i formuläret (Hugo 2026-11-10;
   WCAG 3.3.2, teknik H90). Fälten har också attributet required, som skärmläsare läser; frivilliga fält har
   WooCommerces "(valfritt)". */
.wp-block-woocommerce-checkout .wc-block-checkout__form::before {
	content: "Fält märkta med * är obligatoriska.";
	display: block;
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input:has(input:required) label::after {
	content: " *";
}

/* Fälten (prototypens .kassa__falt och .falt): etiketten ovanför fältet i stället för WooCommerces flytande etikett,
   en spalt i mobilen och förnamn och efternamn, postnummer och ort bredvid varandra från 30rem */
.wp-block-woocommerce-checkout .wc-block-components-address-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.wp-block-woocommerce-checkout .wc-block-components-address-form > * {
	width: auto;
	margin: 0;
}

@media (min-width: 30rem) {
	.wp-block-woocommerce-checkout .wc-block-components-address-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-woocommerce-checkout .wc-block-components-address-form > * {
		grid-column: 1 / -1;
	}

	.wp-block-woocommerce-checkout .wc-block-components-address-form > :is(.wc-block-components-address-form__first_name, .wc-block-components-address-form__last_name, .wc-block-components-address-form__postcode, .wc-block-components-address-form__city) {
		grid-column: auto;
	}
}

.wp-block-woocommerce-checkout .wc-block-components-address-address-wrapper,
.wp-block-woocommerce-checkout .wc-block-components-address-form-wrapper {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input,
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
	position: static;
	max-width: none;
	margin: 0;
	transform: none;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
	line-height: var(--wp--custom--radavstand-tat);
	white-space: normal;
}

/* Klassen står två gånger och fälttypen anges, så att regeln väger tyngre än WooCommerces regler för ifyllda och
   automatiskt ifyllda fält (.wc-block-components-form .wc-block-components-text-input.is-active input[type=…] och
   input:-webkit-autofill). De lägger 24 px luft upptill för den flytande etiketten, som temat inte använder: texten
   hamnade lågt och fältet blev högre när det fylldes i (Hugo 2026-11-10). Storleken anges, eftersom rabattkodens
   fält annars ärver den lilla texten från sin rad. */
.wp-block-woocommerce-checkout .wc-block-components-text-input.wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
	width: 100%;
	min-height: var(--wp--custom--knapp-hojd);
	height: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--bas);
	line-height: var(--wp--custom--radavstand-tat);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: 0;
	border-color: var(--wp--preset--color--text);
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.has-error input,
.wp-block-woocommerce-checkout .has-error .wc-blocks-components-select__select {
	border-color: var(--wp--preset--color--orange-mork);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--orange-mork);
}

.wp-block-woocommerce-checkout .wc-block-components-validation-error {
	color: var(--wp--preset--color--orange-mork);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-components-validation-error svg {
	fill: currentColor;
}

/* Landväljaren: etiketten ovanför, pilen i fältet */
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: auto;
	border: 0;
	background: none;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	appearance: none;
	padding-right: calc(2 * var(--wp--preset--spacing--40) + var(--wp--custom--ikon-liten));
}

.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__expand {
	top: auto;
	right: var(--wp--preset--spacing--40);
	bottom: calc((var(--wp--custom--knapp-hojd) - var(--wp--custom--ikon)) / 2);
	transform: none;
}

/* "+ Lägg till lägenhet …": prototypens .falt__lagg-till */
.wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	margin: 0;
	color: var(--wp--preset--color--gron-mork);
	font-size: var(--wp--preset--font-size--bas);
	text-decoration: underline;
}

/* Kryssrutor och valrader (prototypens .kryss och .valrad): fraktsätt och betalsätt som rader med namn och pris */
.wp-block-woocommerce-checkout .wc-block-components-checkbox {
	margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox label {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tryckyta);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	margin: 0;
	border-color: var(--wp--preset--color--linje-mork);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--gron);
	background: var(--wp--preset--color--gron);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--bas);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label {
	font-size: var(--wp--preset--font-size--bas);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked {
	display: grid;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control::after,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after {
	content: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control > .wc-block-components-radio-control__option {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: 0;
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control > .wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
	margin-top: -1px;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(> label input:checked),
.wp-block-woocommerce-checkout .wc-block-components-radio-control > .wc-block-components-radio-control__option:has(input:checked) {
	position: relative;
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--knapp-hojd);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option::after {
	content: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
	position: relative;
	top: auto;
	left: auto;
	flex: none;
	width: var(--wp--custom--ikon-liten);
	height: var(--wp--custom--ikon-liten);
	min-width: 0;
	min-height: 0;
	margin: calc((1lh - var(--wp--custom--ikon-liten)) / 2) 0 0;
	transform: none;
	border-color: var(--wp--preset--color--linje-mork);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--gron);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--gron);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-layout {
	flex: 1;
	padding: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__label-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label > * {
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
	text-transform: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-description {
	width: 100%;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content {
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) calc(2 * var(--wp--preset--spacing--40) + var(--wp--custom--ikon-liten));
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Villkoren och knapparna: Återgå till varukorgen och Köp och betala på en rad (prototypens .kassa__knappar) */
.wp-block-woocommerce-checkout .wc-block-checkout__terms {
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border-top: 1px solid var(--wp--preset--color--linje-mork);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.wp-block-woocommerce-checkout .wc-block-checkout__actions {
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tryckyta);
	padding: 0;
	color: var(--wp--preset--color--gron-mork);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
	text-decoration: none;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button svg {
	position: static;
	width: var(--wp--custom--ikon-mellan);
	height: var(--wp--custom--ikon-mellan);
	transform: none;
	fill: currentColor;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	min-width: 50%;
	min-height: var(--wp--custom--tryckyta);
}

/* Sammanfattningen (prototypens .kassa__sammanfattning): en grå ruta med raderna och summorna */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	padding: var(--wp--preset--spacing--50);
	border: 0;
	background: var(--wp--preset--color--yta);
}

.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout .wc-block-components-order-summary,
.wp-block-woocommerce-checkout .checkout-order-summary-block-fill-wrapper,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__content {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper::after {
	content: none;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	border: 0;
}

.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--10) 0;
	font-size: var(--wp--preset--font-size--bas);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
	font-weight: 600;
	text-transform: none;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__value strong {
	font-weight: inherit;
	text-transform: none;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__description {
	flex-basis: 100%;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__description:empty {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linje-mork);
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-formatted-money-amount) {
	font-size: inherit;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	padding: 0 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--linje-mork);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
	display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	border-color: var(--wp--preset--color--bas);
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bas);
	box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--liten);
}

/* Rabattkodens fält och knapp står på samma linje och är lika höga; knappen sträcktes annars över etiketten också */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form {
	align-items: flex-end;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
	min-height: var(--wp--custom--knapp-hojd);
	padding-top: 0;
	padding-bottom: 0;
}

/* Betalsätten och Trustpilot under summorna (kassa.js) */
.kop-fortroende {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

.kop-fortroende .betyg__not {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kop-fortroende > div:has(.ts-trustpilot) {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

/* Sammanfattningen i mobilen: hopfälld överst med totalen (WooCommerce), totalen i textens storlek */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
}

/* Orderbekräftelsen (prototypens .tack, komponenter.css) av WooCommerces block: blockens egna bredder och
   marginaler nollställs, sammanfattningen och raderna får prototypens utseende */
/* Uppmaningen om recension står direkt under rubriken, före beställningen (Hugo 2026-11-10: "vi vill gärna ha
   reviews"). Bandet är lägre än en vanlig sektion, så att beställningen inte trycks långt ner. */
.sektion.tack__recension {
	padding-block: var(--wp--preset--spacing--70);
}

.sektion.tack__recension + .sektion {
	padding-top: var(--wp--preset--spacing--80);
}

.tack :is(.wc-block-order-confirmation-status, .wc-block-order-confirmation-summary, .wc-block-order-confirmation-totals, .wp-block-woocommerce-order-confirmation-totals-wrapper, .wp-block-woocommerce-order-confirmation-shipping-wrapper, .wp-block-woocommerce-order-confirmation-billing-wrapper) {
	max-width: none;
	margin: 0;
}

.tack .wc-block-order-confirmation-status p {
	margin: 0;
}

/* När kunden öppnar bekräftelsen senare eller i en annan webbläsare ber WooCommerce om e-postadressen: stycket i
   vanlig vikt under statusraden, och fältet och knappen under varandra med luft emellan (de låg kant i kant) */
.tack .wc-block-order-confirmation-status-description {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--textbredd);
	margin: var(--wp--preset--spacing--30) 0 0;
	font-weight: 400;
}

.tack .woocommerce-verify-email {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	margin: 0;
	padding: 0;
	border: 0;
}

/* WooCommerce sätter fältets bredd till 50 % med en id-selektor, så regeln här har också id:t */
.tack .wc-block-order-confirmation-status-description .woocommerce-verify-email #verify-email {
	width: 100%;
}

.tack .woocommerce-verify-email .form-row {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	max-width: 30rem;
	margin: 0;
	padding: 0;
}

.tack .woocommerce-verify-email .form-row label {
	margin: 0;
	font-weight: 600;
	line-height: var(--wp--custom--radavstand-tat);
}

.tack .woocommerce-verify-email .required {
	color: inherit;
	text-decoration: none;
}

.tack .woocommerce-verify-email input[type="submit"] {
	justify-self: start;
	min-height: var(--wp--custom--knapp-hojd);
}

.tack .wc-block-order-confirmation-summary-list {
	display: contents;
	list-style: none;
}

.tack .wc-block-order-confirmation-summary-list-item {
	display: grid;
	margin: 0;
	padding: 0;
	border: 0;
}

.tack .wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

.tack .wc-block-order-confirmation-summary-list-item__value {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.tack .wp-block-woocommerce-order-confirmation-totals-wrapper {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.tack .wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.tack .wc-block-order-confirmation-totals__table :is(th, td) {
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linje);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.tack .wc-block-order-confirmation-totals__table :is(th, td):last-child {
	text-align: right;
}

.tack .wc-block-order-confirmation-totals__table thead th {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.tack .wc-block-order-confirmation-totals__table tbody a {
	color: inherit;
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

.tack .wc-block-order-confirmation-totals__table tfoot tr:last-child :is(th, td) {
	border-top: 1px solid var(--wp--preset--color--linje-mork);
	border-bottom: 0;
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 600;
}

.tack .wc-block-order-confirmation-totals__table .includes_tax {
	display: block;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

/* Adresserna utan ram, bredvid varandra när de får plats */
.tack__adresser {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tack__adresser > * {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.tack :is(.wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-billing-address) {
	margin: 0;
	padding: 0;
	border: 0;
}

.tack :is(.wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-billing-address) address {
	font-style: normal;
}

/* Varukorgsblocket har en lägsta höjd, så att sidfoten inte flyttar sig medan skriptet ritar om blocket (laddningsläget,
   ett tomt ögonblick och sedan varukorgen: CLS 0,4–0,8 i Lighthouse med en tom varukorg) */
.wp-block-woocommerce-cart {
	min-height: 16rem;
}

/* Tom varukorg innan blockets skript har ritat (inc/kassa.php): texten direkt, inget laddningsläge */
/* Den fyllda varukorgen visas aldrig när sidan ritats med tom varukorg: skriptet ritar först den fyllda varukorgens
   laddningsläge (sidfoten flyttades ut ur bilden och tillbaka, CLS 0,37) och varukorgen kan inte fyllas på sidan */
.wp-block-woocommerce-cart.ts-tom-varukorg .wp-block-woocommerce-filled-cart-block {
	display: none;
}

.wp-block-woocommerce-cart.is-loading.ts-tom-varukorg .wp-block-woocommerce-empty-cart-block {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------------------------------------------------------
   Innehållssidorna (pass 5): sidorna är prototypens uppmärkning i kärnans block (prototyp/verktyg/till-block.py).
   ------------------------------------------------------------------------------------------------------------------ */

/* Dragspelen (prototypens .dragspel): kärnans detaljblock med svaret som grupp (.dragspel__svar). Prototypens linjer
   ersätter detaljblockets linje under (theme.json), och pilen ritas med CSS i stället för prototypens ikon */
.dragspel .wp-block-details {
	border-bottom: 0;
}

.dragspel summary::after {
	content: "";
	flex: none;
	width: var(--wp--custom--ikon);
	height: var(--wp--custom--ikon);
	background: currentColor;
	-webkit-mask: url("../bilder/pil-ner.svg") center / contain no-repeat;
	mask: url("../bilder/pil-ner.svg") center / contain no-repeat;
	transition: transform 0.2s;
}

.dragspel details[open] > summary::after {
	transform: rotate(180deg);
}

/* Köpvalen (Trampoliner): grupper i stället för listpunkter (prototypens .kopval li) */
.kopval > * {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
}

/* Listan utan punkter (stilen Utan punkter): på sidan får den role="list" (inc/innehall.php), här för redigeraren */
.wp-block-list.is-style-utan-punkter {
	padding: 0;
	list-style: none;
}

/* Bilder med komponentens klass: klassen står på bildblockets figure, och bilden fyller den (prototypens klasser stod
   på img) */
:is(.kvalitet__bild, .beskrivning__bild) img {
	width: 100%;
}

/* Bildblockets nollställda marginal (överst) väger lika mycket som prototypens luft ovanför bilden */
.wp-block-image.beskrivning__bild {
	margin-top: var(--wp--preset--spacing--40);
}

.beskrivning__bild img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Märket (Testvinnare): hela bilden, ingen beskärning */
.bild-text--markning .bild-text__bild img {
	aspect-ratio: auto;
	object-fit: contain;
}

/* Uppmaningen: texten och knappgruppen; prototypens regel för textrutan (.uppmaning > div) gäller inte knapparna */
.uppmaning > .wp-block-buttons {
	display: flex;
	max-width: none;
}

/* Hoppskolans filmer: spela-ikonen före namnet ritas med CSS (prototypens ikon i/spela, fylld grön) */
.filmlista a::before {
	content: "";
	flex: none;
	width: var(--wp--custom--ikon);
	height: var(--wp--custom--ikon);
	background: var(--wp--preset--color--gron);
	-webkit-mask: url("../bilder/spela.svg") center / contain no-repeat;
	mask: url("../bilder/spela.svg") center / contain no-repeat;
}

/* Tabellerna (prototypens .jamfor) i tabellblocket: blockets figure är rutan som rullar i sidled. Kärnans ramar,
   luft och linje under rubrikraden bort; prototypens linjer över raderna */
.wp-block-table.jamfor {
	margin-bottom: 0;
}

.wp-block-table.jamfor thead {
	border-bottom: 0;
}

.wp-block-table.jamfor :is(th, td) {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--linje);
}

.wp-block-table.jamfor thead th {
	border-top: 0;
}

/* Tidslinjen (Om oss): grupper i stället för listpunkter (prototypens .tidslinje li), årtalet som stycke */
.tidslinje > * {
	display: grid;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--linje-mork);
}

.tidslinje p.tidslinje__ar {
	max-width: none;
	color: var(--wp--preset--color--gron-mork);
}

@media (min-width: 48rem) {
	.tidslinje > * {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	}
}

/* Ångra avtalet här (ts-core angra): stegen är egna formulär, så att Enter i ett steg inte skickar ett annat. De står
   i prototypens rutnät (.formular och .angra__order) som om formulären inte fanns */
.angra > form,
.angra__steg {
	display: contents;
}

/* En rad med flera exemplar: antalet att ångra bredvid namnet */
.valrad select {
	width: auto;
	min-height: var(--wp--custom--tryckyta);
}

/* Lägsta pris senaste 30 dagarna (ts-core pris, beslut 14): under reapriset, i textens dämpade färg */
.pris__lagsta {
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

/* Filmen i galleriets andra ruta (varv 7, beslut 83): klippet fyller rutan som bilderna, chipet "Se studsen" ligger
   på produktbilden och paus- och spelknappen på filmen (produkt.js). Miniatyren och pricken för filmen får en
   spelsymbol, så att filmen går att hitta också när miniatyrerna är prickar. */
.galleri .wc-block-product-gallery-large-image__wrapper {
	position: relative;
}

.galleri .wc-block-product-gallery-large-image__wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	background: var(--wp--preset--color--yta);
}

.galleri__chips,
.galleri .galleri__paus {
	position: absolute;
	top: auto;
	right: auto;
	bottom: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--40);
	z-index: 2;
}

.galleri__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tryckyta-tat);
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--linje-pa-bild);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--custom--yta-pa-bild);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	cursor: pointer;
}

.galleri__chip .ikon {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Kuben för 3D är streckad som temats övriga ikoner, spelsymbolen fylld */
.galleri__chip .ikon--streck {
	fill: none;
	stroke-width: 2;
}

/* Chipen i en rad nere till vänster på produktbilden: "Visa i 3D" (beslut 93) och "Se studsen" (beslut 83) */
.galleri__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	max-width: calc(100% - 2 * var(--wp--preset--spacing--40));
}

.galleri__chip[aria-busy="true"] {
	cursor: progress;
}

/* 3D-modellen i galleriets första ruta (beslut 93): model-viewer ovanpå produktbilden, som döljs när modellen är
   laddad. Förloppsraden i textfärgen. Kubikonen är streckad som de andra ikonerna. */
.galleri__3d {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--bas);
	--progress-bar-color: var(--wp--preset--color--text);
	--progress-bar-height: 3px;
	--poster-color: transparent;
}

.galleri__ruta--3d img {
	visibility: hidden;
}

/* Zoomknapparna + och − uppe till höger i 3D-läget, i pilarnas utförande; hjulet, två fingrar och tangenterna
   + och − gör samma sak. Uppe, så att de inte krockar med chipen nere till vänster i 360 px */
.galleri__zoom {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	z-index: 2;
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.galleri .galleri__zoom__knapp {
	position: static;
	transform: none;
}

/* WooCommerces spelsymbol på filmens miniatyr, i designsystemets storlek */
.galleri .wc-block-product-gallery-thumbnails__thumbnail--video::after {
	font-size: 1.25rem;
}

/* "3D" på modellens miniatyr på dator (beslut 94); i mobilen är den en prick som de andra */
@media (min-width: 64rem) {
	.galleri .galleri__tumme--3d {
		position: relative;
	}

	.galleri .galleri__tumme--3d::after {
		content: "3D";
		position: absolute;
		right: var(--wp--preset--spacing--10);
		bottom: var(--wp--preset--spacing--10);
		padding: 0 var(--wp--preset--spacing--10);
		border-radius: 2px;
		background: var(--wp--preset--color--text);
		color: var(--wp--preset--color--bas);
		font-size: 0.625rem;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.02em;
		pointer-events: none;
	}
}

@media (max-width: 63.99rem) {
	/* Filmens prick är en liten triangel, ritad med clip-path så att den blir lika skarp som prickarna */
	.galleri .wc-block-product-gallery-thumbnails__thumbnail--video::after {
		content: "";
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 0;
		clip-path: polygon(10% 0, 100% 50%, 10% 100%);
	}
}

/* Hjälpraderna under variantvalen (produkt.js), och beskedet när kunden trycker på ett avstängt alternativ */
.variantval__tips {
	max-width: var(--wp--custom--textbredd);
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--liten);
	color: var(--wp--preset--color--text-dampad);
}

.variantval__sparr {
	color: var(--wp--preset--color--text);
}

/* Hjälpraderna under kassans fält (kassa.js): telefonnumret och förslaget vid felstavad e-post */
.ts-falthjalp {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--liten);
	color: var(--wp--preset--color--text-dampad);
}

.ts-falthjalp__forslag {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gron-mork);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* Notis i köprutan (del-produkt.php), till exempel att en stege redan ingår med studsmattan i varukorgen */
.kopruta__notis {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--orange);
	background: var(--wp--preset--color--orange-ljus);
	font-size: var(--wp--preset--font-size--liten);
}

.kopruta__notis[hidden] {
	display: none;
}

/* Stegen i varukorgen när en studsmatta också ligger där (inc/kassa.php, egenskapen "Obs"): en egen rad som notis,
   inte en del av variantens rad med kommatecken */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > [class*="__obs"] {
	display: block;
	flex-basis: 100%;
	order: 3;
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--orange);
	background: var(--wp--preset--color--orange-ljus);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--liten);
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-details > [class*="__obs"]::before {
	content: none;
}