.ndx-product-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.ndx-product-colors-card { justify-content: center; margin: 8px 8px 4px; }
.ndx-color-swatch { display: inline-flex; width: 26px; height: 26px; padding: 2px; border: 1px solid #cfd3d7; background: #fff; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ndx-color-swatch:hover { border-color: #555; transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ndx-color-swatch > span { width: 100%; height: 100%; display: block; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ndx-shape-circle .ndx-color-swatch,
.ndx-shape-circle .ndx-color-swatch > span { border-radius: 50%; }
.ndx-shape-square .ndx-color-swatch,
.ndx-shape-square .ndx-color-swatch > span { border-radius: 3px; }
.ndx-color-fallback { background: linear-gradient(135deg,#eee 0,#eee 45%,#bbb 46%,#bbb 54%,#eee 55%,#eee 100%); }
.ndx-color-more { font-size: 12px; line-height: 26px; padding: 0 3px; color: #555; }

/* Hover en cards (1.9.0): capa sobre la imagen original del tema */
.ndx-pc-hover-host-pos { position: relative; }
.ndx-pc-hover-host-block { display: block; }
.ndx-pc-hover-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; background: #fff;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.ndx-pc-hover-img.is-visible {
    opacity: 1; visibility: visible;
    transition: opacity .2s ease, visibility 0s linear 0s;
}
@media (hover: none), (pointer: coarse) {
    .ndx-pc-hover-img { display: none !important; }
}