/*
 * Färgrutorna på produktsidan (flyttat från Code Snippets #27 "Out of stock
 * variations"). Gäller alla besökare, oberoende av storleksväljarens läge.
 */

.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li {
	transition: none !important;
	position: relative !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: #f2f2f2 !important;
	opacity: 1 !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li:hover {
	border: 0 !important;
	box-shadow: none !important;
	background: #f2f2f2 !important;
}

/* Ingen fokusram vid musklick, bara vid tangentbordsnavigering */
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li:focus:not(:focus-visible) {
	outline: none !important;
}

/*
 * Vald färg: tunn svart ram som storlekarna. outline ritas ovanpå bilden (en
 * box-shadow på li:n hamnar under bild-spanen) och gäller utan JS. Står efter
 * fokusregeln så att den inte släcks när rutan har fokus efter klick.
 */
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li:hover,
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li.thwvsf-selected,
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li.thwvsf-selected:focus {
	outline: 1px solid #000 !important;
	outline-offset: -1px;
}

.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li .thwvsf-item-span-color {
	/* Bilderna har vit bakgrund (temat sätter även vit inline) - multiply gör den vita delen grå */
	mix-blend-mode: multiply;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Swatch-pluginets röda kryss (slutsåld och "finns inte i vald storlek") tas bort */
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li::before,
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li::after,
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li .thwvsf-item-span::before,
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li .thwvsf-item-span::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* Färg utan någon storlek i lager: tonad bild och diagonalt streck */
.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li.thwvsf-color-li.wan-color--soldout .thwvsf-item-span-color {
	opacity: 0.7 !important;
}

.wan-color__line {
	display: none;
	position: absolute;
	pointer-events: none;
}

.wan-color--soldout .wan-color__line {
	display: block;
	inset: 0;
	z-index: 2;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23555' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/*
 * Storlekar när den nya storleksväljaren (swatches.css, body.wan-sw-on) inte är
 * aktiv: ett grått diagonalt streck i stället för swatch-pluginets röda kryss.
 */
/* Slutsåld går att välja; "finns inte i vald färg" (deactive) förblir oklickbar,
   annars visar swatch-pluginet alert("No combination") */
body:not(.wan-sw-on) .variations_form .thwvsf-label-li.out_of_stock,
body:not(.wan-sw-on) .variations_form .thwvsf-label-li.deactive {
	opacity: 0.7 !important;
}

body:not(.wan-sw-on) .variations_form .thwvsf-label-li.out_of_stock:not(.deactive) {
	cursor: pointer !important;
	pointer-events: auto !important;
}

body:not(.wan-sw-on) .variations_form .thwvsf-label-li.out_of_stock::before,
body:not(.wan-sw-on) .variations_form .thwvsf-label-li.deactive::before {
	content: none !important;
	display: none !important;
}

body:not(.wan-sw-on) .variations_form .thwvsf-label-li.out_of_stock::after,
body:not(.wan-sw-on) .variations_form .thwvsf-label-li.deactive::after {
	background: #555 !important;
}


/* ---------- Mobil: färgerna direkt under huvudbilden (spegling, se colors.js) ---------- */

.wan-color-mobile {
	display: none;
}

@media (max-width: 39.99875em) {
	.wan-color-mobile {
		display: block;
		margin-top: 12px;
	}

	.wan-color-mobile .wan-color-mobile__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wan-color-mobile .wan-color-mobile__list > li {
		width: 64px !important;
		height: 80px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.wan-color-mobile .thwvsf-item-span-color {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}

	.wan-color-mobile__name {
		margin: 8px 0 0;
		font-size: 14px;
	}

	.wan-color-mobile__name:empty {
		display: none;
	}

	/* Raden i formuläret döljs när speglingen finns (klassen sätts av colors.js) */
	body.wan-color-mobile-on .variations_form table.variations tr:has(select[name="attribute_pa_color"]) {
		display: none !important;
	}

	/* Storleksraden behöver ingen luft ovanför när färgraden är dold */
	body.wan-color-mobile-on.wan-sw-on .variations_form tr:has(select[name="attribute_pa_size"]) th.label {
		padding-top: 0 !important;
	}
}