/* Product photos in WoodMart's native card choices; the existing grid owns layout. */
.wd-product .wd-swatches-grid {
    justify-content: flex-start;
    gap: 4px;
    margin-block: 10px 8px;
    max-width: 100%;
}
.wd-product .wd-swatches-grid .wd-swatch {
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
}
.wd-product .wd-swatches-grid .wd-swatch.wd-bg { width: 44px; }
.wd-product .wd-swatches-grid .wd-swatch-bg {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}
.wd-product .wd-swatches-grid .wd-swatch-bg img { width: 100%; height: 100%; object-fit: contain; }
.wd-product .wd-swatches-grid .wd-swatch:after { display: none; }
.wd-product .wd-swatches-grid .wd-swatch.wd-active { border-color: var(--madness-ink, #111); }
.wd-product .wd-swatches-grid .wd-swatch:focus-visible,
.wd-product .wd-swatches-grid .wd-swatch-divider:focus-visible { outline: 2px solid var(--madness-ink, #111); outline-offset: 2px; }
.wd-product .wd-swatches-grid .wd-swatch-divider {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.wd-product .wd-swatches-grid.wd-all-shown { max-height: 228px; overflow-y: auto; align-content: flex-start; }
/* Hover must keep the chosen colour photograph, including a server-filtered card. */
.wd-product.madness-filtered-photo .wd-product-img-hover { display: none; }