/* Custom styles for swatch buttons */

/* Container for swatch buttons */
.swatch-attribute-buttons-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Improve swatch attribute layout */
.swatch-attribute {
    margin-bottom: 15px;
}

/* Style for attribute label */
.swatch-attribute-label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

/* Style for option buttons */
.swatch-attribute-buttons-container .swatch-option {
    min-width: 40px;
    height: 40px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Hover state */
.swatch-attribute-buttons-container .swatch-option:hover {
    border-color: #999;
    background-color: #f5f5f5;
}

/* Selected state */
.swatch-attribute-buttons-container .swatch-option.selected {
    border-color: #6AAC91;
    outline: 2px solid #6AAC91;
    background-color: #E4F4EA;
}

/* Disabled state */
.swatch-attribute-buttons-container .swatch-option[option-empty="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Placeholder option */
.swatch-attribute-buttons-container .option-placeholder {
    color: #999;
    font-style: italic;
}

/* Make sure color swatches are properly displayed */
.swatch-option.color {
    background-size: cover !important;
    background-position: center !important;
    min-width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Color swatch hover state */
.swatch-option.color:hover {
    border-color: #999;
    outline: 1px solid #999;
}

/* Color swatch selected state */
.swatch-option.color.selected {
    border-color: #6AAC91;
    outline: 2px solid #6AAC91;
}

/* Make sure image swatches are properly displayed */
.swatch-option.image {
    min-width: 40px;
    height: 50px;
    max-width: 50px ;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.swatch-option.text {
    background-color: #f5f5f5;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1;
    position: relative;
}

/* Image swatch hover state */
.swatch-option.image:hover {
    border-color: #999;
    outline: 1px solid #999;
}

/* Image swatch selected state */
.swatch-option.image.selected {
    border-color: #6AAC91;
    outline: 2px solid #6AAC91;
}

/* Hide the original select dropdown */
.swatch-select-hidden {
    display: none !important;
}
.swatch-option.option-placeholder {
    display: none;
}