.variants-selector > .variant-fields-container > .variant-field { margin: 8px 0; }
.modal.shop .variants-selector > .variant-fields-container > .variant-field { padding: 0; width: 100%; }


.variant-field-options { display:  flex; flex-direction: row; flex-wrap: wrap; margin: 0 -6px; }
.variant-field-options > .variant-field-option-container { flex: 1 1; margin: 6px; }
.variant-field-options > .variant-field-option-container > input { display: none; }
.variant-field-options > .variant-field-option-container > .variant-field-option { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 10px; align-items: center; width: 100%; background-color: #fbfbfb; border: 1px solid #ccc; border-radius: 8px; }
.variant-field-options > .variant-field-option-container > input:checked + .variant-field-option { border-color: var(--main-color); background-color: var(--main-color-light-1); color: #fff; }

.availability-badge { display: inline-block; width: 6px; height: 6px; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: #444; }

.variant-field-options > .variant-field-option-container > .variant-field-option > .availability-badge { position: absolute; top: 4px; right: 4px; }
.variant-field-options > .variant-field-option-container > .variant-field-option.availability-out-of-stock { background-color: #ddd; color: #666; }

.availability-in-stock .availability-badge { background-color: var(--shop-stock-ok); }
.availability-out-of-stock .availability-badge { background-color: var(--shop-stock-out); }
.availability-resupply .availability-badge { background-color: var(--shop-stock-resupply); }

.availability-in-stock .availability-message { color: var(--shop-stock-ok); }
.availability-out-of-stock .availability-message { color: var(--shop-stock-out); }
.availability-resupply .availability-message { color: var(--shop-stock-resupply); }

.variant-field.field-taille .variant-field-options { justify-content: flex-start; }
.variant-field.field-taille .variant-field-options > .variant-field-option-container { max-width: 40px; }

.variants-selector > .variant-products-container { margin: 8px 0; }
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option > span { display: block; width: 100%; height: 100%; }
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option > span > .product-variant { display: flex; flex-direction: row; height: 100%; }
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option > span > .product-variant > figure { flex: 1 1; width: 45px; max-width: 45px; height: 100%; margin-right: 10px; }
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option > span > .product-variant > figure > img { width: 100%; height: 100%; object-fit: contain; }
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option > span > .product-variant > .product-info > .title { display: flex; justify-content: flex-start; align-items: center;}
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option > span > .product-variant > .product-info > .price { margin-top: 3px; color: #444; font-weight: bold;}
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option .availability { margin-top: 4px; display: flex; flex-direction: row; align-items: center; font-size: 10px; }
.variants-selector > .variant-products-container > .variant-products > .pretty-select .option .availability > .availability-badge { margin-right: 4px; }