/* скрываем все .tab-content */
.vs-content {
	display: none;
}

/* отображаем только тот контент, который соответствует отмеченной радоикнопки */
.variant_selector-options:has(>.options_with_label>.options_list>.vs-1:checked)~.option_view>.group-1,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-2:checked)~.option_view>.group-2,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-3:checked)~.option_view>.group-3,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-4:checked)~.option_view>.group-4,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-5:checked)~.option_view>.group-5,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-6:checked)~.option_view>.group-6 {
	display: block;
}
.variant_selector-options:has(>.options_with_label>.options_list>.vs-a:checked)~.option_view>.vs-content>.group-a,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-b:checked)~.option_view>.vs-content>.group-b,
.variant_selector-options:has(>.options_with_label>.options_list>.vs-c:checked)~.option_view>.vs-content>.group-c {
	display: block;
}

.variant_selector {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.variant_selector-options {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	gap: 20px;
	align-self: stretch;
	flex-wrap: wrap;
}

.options_with_label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 0;
	/* other params are media-specific */
}

.options_list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.options_list [type="radio"] {
	display: none;
}
.options_list label {
	display: flex;
	align-items: flex-start;
	border: 1px solid var(--TXT-Pale-ghost, #969696);
	color: var(--TXT-Bright, #222D26);
	/* other params are media-specific */
}
.options_list [type="radio"]:checked + label {
	border: 1px solid var(--TXT-Bright, #222D26);
	background: var(--TXT-Bright, #222D26);
	color: var(--White, #FFFFFF);
}








/*
Mobile Only    Mobile Only    Mobile Only    Mobile Only    
Mobile Only    Mobile Only    Mobile Only    Mobile Only    
Mobile Only    Mobile Only    Mobile Only    Mobile Only    
Mobile Only    Mobile Only    Mobile Only    Mobile Only    
Mobile Only    Mobile Only    Mobile Only    Mobile Only    */

@media (max-width: 599px) {
	.variant_selector {
		min-width: 240px;
		gap: 8px;
		flex: 1 0 0;
	}
	.options_with_label {
		min-width: 240px;
		gap: 4px;
	}
	.options_list label {
		padding: 5px 12px 7px 12px;
		border-radius: 40px;
	}
}




/*
Tablet Only    Tablet Only    Tablet Only    Tablet Only    
Tablet Only    Tablet Only    Tablet Only    Tablet Only    
Tablet Only    Tablet Only    Tablet Only    Tablet Only    
Tablet Only    Tablet Only    Tablet Only    Tablet Only    
Tablet Only    Tablet Only    Tablet Only    Tablet Only     */

@media (min-width: 600px) and (max-width: 1024px) {
	.variant_selector {
		min-width: 280px;
		gap: 12px;
		flex: 1 0 0;
	}
	.options_with_label {
		min-width: 280px;
		gap: 4px;
	}
	.options_list label {
		padding: 5px 12px 7px 12px;
		border-radius: 40px;
	}
}





/* 
Desktop S    Desktop S    Desktop S    Desktop S    
Desktop S    Desktop S    Desktop S    Desktop S    
Desktop S    Desktop S    Desktop S    Desktop S    
Desktop S    Desktop S    Desktop S    Desktop S    
Desktop S    Desktop S    Desktop S    Desktop S     */

@media (min-width: 1025px) and (max-width: 1200px) {
	.variant_selector {
		min-width: 480px;
		gap: 16px;
		flex: 1 0 0;
	}
	.options_with_label {
		min-width: 360px;
		gap: 4px;
	}
	.options_list label {
		padding: 7px 16px 9px 16px;
		border-radius: 40px;
	}
}




/* 
Desktop M-XL    Desktop M-XL    Desktop M-XL    Desktop M-XL    
Desktop M-XL    Desktop M-XL    Desktop M-XL    Desktop M-XL    
Desktop M-XL    Desktop M-XL    Desktop M-XL    Desktop M-XL    
Desktop M-XL    Desktop M-XL    Desktop M-XL    Desktop M-XL    
Desktop M-XL    Desktop M-XL    Desktop M-XL    Desktop M-XL     */

@media (min-width: 1201px) {
	.variant_selector {
		min-width: 480px;
		gap: 20px;
		flex: 1 0 0;
	}
	.options_with_label {
		min-width: 360px;
		gap: 4px;
	}
	.options_list label {
		padding: 7px 16px 9px 16px;
		border-radius: 40px;
	}
}