/* Links navigate to the color's own product, preserving its images and stock. */
.pg-product-colors { margin: 0 0 24px; color: #000; font: 13px/1.5 var(--sans); }
.pg-product-colors .pg-product-colors__label { margin: 0 0 10px; color: #000; }
.pg-product-colors__label strong { font-weight: 500; }
.pg-product-colors .pg-product-colors__options {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
.pg-product-colors__options > li { min-width: 0; margin: 0; padding: 0; }
.pg-product-colors a.pg-color-link {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    height: 100%; min-width: 0; padding: 8px; border: 1px solid #d9ddd7; border-radius: 3px;
    background: #fff; color: #000; text-decoration: none; text-align: center;
}
.pg-product-colors a.pg-color-link:hover { border-color: #111; }
.pg-product-colors a.pg-color-link.is-current { border: 2px solid #111; padding: 7px; }
.pg-color-link.is-current::after {
    content: '✓'; position: absolute; top: 3px; right: 3px; display: grid; place-items: center;
    width: 16px; height: 16px; border-radius: 50%; background: #111; color: #fff; font-size: 10px;
}
.pg-product-colors .pg-color-link__image { display: block; width: 100%; height: 70px; margin: 0; object-fit: contain; background: #fff; }
.pg-color-link__name { color: #000; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.pg-color-link__stock { color: #000; font-size: 10px; line-height: 1.4; }
.pg-product-colors a.pg-color-link:focus-visible { outline: 2px solid #486851; outline-offset: 3px; }