/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Dec 12 2024 | 08:21:33 */
.image-swatches {
    display: flex;
    flex-wrap: wrap; /* Allow swatches to wrap onto new lines */
    gap: 10px; /* Add space between swatches */
    justify-content: flex-start; /* Align swatches to the left */
}

.image-swatches label.swatch {
    display: inline-flex;
    cursor: pointer;
    margin: 5px;
    width: 70px; /* Set width for each swatch */
    height: 70px; /* Set height for each swatch */
    align-items: center;
    justify-content: center;
}

.image-swatches label.swatch img {
    width: 100%; /* Make the image fill the swatch */
    height: 100%; /* Ensure the image fills the container */
    object-fit: cover; /* Crop the image to fit the container */
    border: 2px solid transparent;
    border-radius: 5px; /* Optional: Make swatches rounded */
    transition: border-color 0.3s ease; /* Add a hover effect */
}

.image-swatches label.swatch.selected img {
    border-color: #333; /* Highlight the selected swatch */
}

@media screen and (min-width: 768px) {
    .image-swatches label.swatch {
        width: 100px; /* Larger size for wider screens */
        height: 100px;
    }
}