[custom-styles="variant"]{
    display: flex !important;
    flex-direction: row-reverse;
    column-gap: 1rem;
    justify-content: flex-end;
}

.variant-type-container
h3.custom-variant-title{
	margin-bottom: 0.6rem;
	text-align: center;
	padding: 0.3rem 0rem;
	border-radius: 50px;
	font-size: 0.85rem;
}

.custom-variant-container
.variant-type-container{
	flex-grow: 1;
	width: 50%;
}


.custom-variant-container
.variant-type-container
.swatches{
	flex-wrap:nowrap;
}

.custom-variant-container
.variant-type-container
.swatches > li{
	width: 100%;
}

.custom-variant-container
.variant-type-container
.swatches > li label{
	width: 100%;
	text-align:center;
	background-color: #fff;
}

.lien-custom-variant:hover label:after {
	--tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
	--tw-shadow-color: rgb(var(--color-foreground));
	--tw-shadow: var(--tw-shadow-colored);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.input[checked] label:after {
	--tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
	--tw-shadow-color: rgb(var(--color-foreground));
	--tw-shadow: var(--tw-shadow-colored);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.checked-selected{
	pointer-events:none;
}


.custom-variant-container
.variant-type-container
.swatches
label.label-swatch br{
	dispaly:none;
}


/* .checked-selected label:after {
	box-shadow: #000000 0 0 0px 1.5px;
} */


.variant-selection-container{
    margin: 0 auto 0 0;
    background-color: rgba(23, 23, 23, .04);
    border-radius: 0.5em;
    padding: 1rem 1.5rem;
}


.btn-tableau-comp{
    color: #00327f;
    margin: -14px auto 0 auto;
    position: relative;
    display: flex;
    width: fit-content;
    font-weight: 500;
    margin-top: 10px;
    height: 45px;
    background-color: rgb(var(--color-button-background));
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 100%;
    border-radius: 50px;
}

.variant-selection-container .btn-tableau-comp {
    background-color: #fff;
}

.variant-selection-container .btn-tableau-comp .btn-fill {
    background-color: rgb(62 72 86);
}

.variant-selection-container .btn-tableau-comp .btn-text{
	color: rgb(62 72 86);
}

.variant-selection-container .btn-tableau-comp:hover .btn-text{
	color: #fff;
}


@media (max-width: 600px){
	
	.variant-type-container h3.custom-variant-title{
		font-size: 0.7rem;
	}
	
	.custom-variant-container{
		gap: 0.5rem;
	}
	
	.custom-variant-container
	.variant-type-container{
		width: 50%;
		display: flex;
		flex-direction: column;
	}
	
	.custom-variant-container
	.variant-type-container
	.swatches{
		gap:0.5rem;
	}
	
	
	.custom-variant-container
	.variant-type-container
	.swatches
	label.label-swatch{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.custom-variant-container
	.variant-type-container
	.swatches
	label.label-swatch br{
		display:block;
	}
}