/* Bade togglen och sorteringsdropdownen centreras individuellt (var och en
   sitt eget block-boxade, centrerade "rad") istallet for att sitta i en
   gemensam flex-rad med space-between - det var det som tidigare klippte
   isar dem till motsatta kanter pa desktop. Samma regler galler pa alla
   skarmstorlekar med flit, sa desktop speglar den staplade mobilvyn. */
.pokestasch-sold-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.875rem;
	user-select: none;
	width: fit-content;
	margin: 0.75rem auto 0;
}

.pokestasch-sold-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pokestasch-sold-toggle__track {
	position: relative;
	width: 2.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: #d0d0d0;
	transition: background-color 0.15s ease;
	flex-shrink: 0;
}

.pokestasch-sold-toggle__track::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pokestasch-sold-toggle input:checked + .pokestasch-sold-toggle__track {
	background: #2f6f4e;
}

.pokestasch-sold-toggle input:checked + .pokestasch-sold-toggle__track::before {
	transform: translateX(1rem);
}

.pokestasch-sold-toggle input:focus-visible + .pokestasch-sold-toggle__track {
	outline: 2px solid #2f6f4e;
	outline-offset: 2px;
}

.pokestasch-sold-toggle__label {
	white-space: nowrap;
}

/* Sorteringsdropdownens egen box ar annars full bredd med sitt innehall
   hoger-justerat internt (darav att den hamnade langst till hoger tidigare).
   Krymp den till sitt eget innehall och centrera den likt togglen ovan. */
.wc-block-catalog-sorting {
	width: fit-content;
	margin: 0 auto;
}

/* Extra "luftigare" padding och avstand ar ENDAST ett desktop-onskemal -
   mobilen sag redan bra ut med temats standardstorlek och ska inte
   paverkas (Alejandro bekraftade mobilen fore dessa tva regler). */
@media (min-width: 601px) {
	.wc-block-catalog-sorting {
		margin: 0.75rem auto 2rem;
	}

	.wc-block-catalog-sorting select {
		padding: 0.7rem 2.75rem 0.7rem 1.35rem !important;
		font-size: 0.95rem !important;
	}
}

.pokestasch-sold-date {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: #767676;
}

/* Pa mobil ska togglen sitta direkt efter sorteringsknappen utan
   mellanrum, som Alejandro bekraftade var perfekt innan desktop-
   centreringsfixen av misstag lade pa en gemensam margin-top ovanpa. */
@media (max-width: 600px) {
	.pokestasch-sold-toggle {
		margin-top: 0;
	}
}