/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Product Color Swatches on Shop/Archive Pages */
.product-color-swatches {
    display: flex;
    gap: 8px;
    margin: 0 0 10px 0;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    order: -1; /* This ensures it appears above other content */
}

.product-color-swatches .color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-color-swatches .color-swatch:hover {
    transform: scale(1.15);
    border-color: #000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Color Filter Swatches in Sidebar */
.color-filter-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #ddd;
    vertical-align: middle;
    margin-right: 5px;
}

/* Ensure the product card layout supports the color swatches positioning */
.product-grid-item .product-wrapper,
.product-list-item .product-wrapper {
    display: flex;
    flex-direction: column;
}

.product-grid-item .product-element-top,
.product-list-item .product-element-top {
    display: flex;
    flex-direction: column;
}

/* Make sure color swatches appear at the top */
.product-element-top .product-color-swatches {
    order: -1;
}