/*
 * Storleksväljaren på produktsidan. Gäller när body har klassen wan-sw-on (sätts i
 * PHP när modulen är aktiv) - selektorerna bygger på swatch-pluginets markup så att
 * stilen gäller redan innan swatches.js har kört. Temat och swatch-pluginet har mycket specifika selektorer
 * (två id:n) och !important, därav !important här.
 */

/*
 * Code Snippets #27 "Out of stock variations" lägger en egen statusrad under
 * storlekarna och egna slutsåld-stilar på storlekarna. Modulen visar status
 * själv, så de döljs/neutraliseras här (snippetens färgrutor påverkas inte).
 */
body.wan-sw-on .variations_form .westiro-stock-status-row {
	display: none !important;
}

/* Luft mellan färgraden och storlekarna */
body.wan-sw-on .variations_form tr:has(select[name="attribute_pa_size"]) th.label {
	padding-top: 20px !important;
}

body.wan-sw-on .variations_form .thwvsf-wrapper-ul:has(> li[data-attribute_name="attribute_pa_size"]) {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0 !important;
	padding: 0 !important;
}

body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"] {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 52px !important;
	width: auto !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #000 !important;
	opacity: 1 !important;
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto !important;
}

body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"] .item-span-text {
	color: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1;
}

body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"]:hover {
	box-shadow: inset 0 0 0 2px #000 !important;
}

/* Vald: svart, ingen ram */
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].thwvsf-selected {
	background: #1d1c1c !important;
	box-shadow: none !important;
	color: #fff !important;
}

/* Slutsåld eller finns inte i vald färg: grå, svart ram, överkryssad - även när den är vald */
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].wan-sw--soldout,
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].wan-sw--missing,
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].wan-sw--soldout.thwvsf-selected,
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].wan-sw--missing.thwvsf-selected {
	background: #ececec !important;
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #8a8a8a !important;
}

/* Swatch-pluginets röda kryss (::before/::after med transform) ersätts av ett diagonalt streck */
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"]::after {
	content: none !important;
	display: none !important;
}

body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"]::before {
	content: none !important;
}

body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].wan-sw--soldout::before,
body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"].wan-sw--missing::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 1 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	/* SVG-linje med fast tjocklek - ett gradientstreck kan försvinna vid avrundning */
	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='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: none;
}

body.wan-sw-on .variations_form li.thwvsf-label-li[data-attribute_name="attribute_pa_size"]:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

body.wan-sw-on .variations_form .wan-sw__msg {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #c62828;
}

body.wan-sw-on .variations_form .wan-sw__msg:empty {
	display: none;
}