/* Vanos Color Swatches — frontend */

.vanos-hidden-select-row {
    display: none !important;
}

.vanos-color-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 16px;
}

.vanos-swatch-label {
    width: 100%;
    font-size: 0.875em;
    color: #555;
    margin-bottom: 4px;
    min-height: 1.2em;
}

.vanos-swatch {
    display: inline-block;
    position: relative;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 0;
}

.vanos-swatch.vanos-swatch-oos {
    opacity: 0.5;
    cursor: not-allowed;
}

.vanos-swatch.vanos-swatch-oos::after {
    content: '';
    position: absolute;
    inset: 2px;
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1.5px),
            rgba(200, 0, 0, 0.85) calc(50% - 1.5px),
            rgba(200, 0, 0, 0.85) calc(50% + 1.5px),
            transparent calc(50% + 1.5px)),
        linear-gradient(to top left,
            transparent calc(50% - 1.5px),
            rgba(200, 0, 0, 0.85) calc(50% - 1.5px),
            rgba(200, 0, 0, 0.85) calc(50% + 1.5px),
            transparent calc(50% + 1.5px));
    border-radius: 2px;
    pointer-events: none;
}

.vanos-swatch:hover {
    border-color: #aaa;
}

.vanos-swatch.selected {
    border-color: #333;
    box-shadow: 0 0 0 1px #333;
}

.vanos-swatch img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 2px;
}

/*
 * OOS-markering voor maat-swatches (CFVSW label-type).
 *
 * CFVSW's eigen swatches.css tekent zelf al een kruis (Dashicons "\f335") via
 * ::before op .cfvsw-swatches-blur-cross(-disable) — hetzelfde kruis als bij
 * andere leveranciers. We tekenen daarom bewust GEEN eigen kruis meer (dat gaf
 * een tweede, afwijkende diagonaal bovenop de native). Onze JS voegt alleen de
 * classes cfvsw-swatches-blur-cross + cfvsw-swatches-out-of-stock toe voor de
 * "uitverkocht binnen deze kleur"-maten, zodat CFVSW ze identiek stijlt.
 */