/* ==========================================================================
   Variation Visual Selector — Catalogus strip  v1.8.8
   ========================================================================== */

/* ── Strip ───────────────────────────────────────────────────────────────── */
.vvs-catalog-strip {
    display:         flex;
    flex-direction:  row;
    flex-wrap:       nowrap;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    margin:          3px 0 0;
    padding:         0;
    max-width:       100%;
}

/* ── Thumbnail ───────────────────────────────────────────────────────────── */
.vvs-catalog-thumb {
    display:         block;
    flex-shrink:     0;
    box-sizing:      border-box;
    border:          1px solid #ddd;
    border-radius:   4px;
    overflow:        hidden;
    background:      #fff;
    padding:         0;
    cursor:          pointer;
    text-decoration: none;
    outline:         none;
    transition:      border-color 0.15s ease;
}

.vvs-catalog-thumb img {
    display:    block;
    width:      38px;
    height:     38px;
    object-fit: contain;
}

.vvs-catalog-thumb:hover:not(.is-unavailable) {
    border-color: #aaa;
}

.vvs-catalog-thumb.is-active {
    border-color: #000;
    box-shadow:   0 0 0 1px #000;
}

.vvs-catalog-thumb.is-unavailable {
    opacity:  0.40;
    cursor:   not-allowed;
    position: relative;
}

.vvs-catalog-thumb.is-unavailable::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        135deg,
        transparent 44%, rgba(255,255,255,.6) 47%,
        rgba(255,255,255,.6) 53%, transparent 56%
    );
    pointer-events: none;
}

/* ── "(+N)" chip ─────────────────────────────────────────────────────────── */
.vvs-catalog-more {
    display:     flex;
    align-items: center;
    height:      40px;
    padding:     0 4px;
    font-size:   12px;
    font-weight: 600;
    color:       #666;
    white-space: nowrap;
    cursor:      default;
    user-select: none;
    flex-shrink: 0;
}

/* ── Overlay: variant-preview boven de hoofdafbeelding ───────────────────── */
.vvs-overlay {
    position:            absolute;
    inset:               0;
    z-index:             3;           /* boven de .back-image (z-index ~2) */
    background-color:    #fff;        /* witte achtergrond voor transparante PNG's */
    background-size:     contain;
    background-position: center;
    background-repeat:   no-repeat;
    opacity:             0;
    pointer-events:      none;        /* klikken gaat door naar de kaart */
    transition:          opacity 0.18s ease;
}

/* Zichtbaar bij hover via JS-klasse */
.vvs-overlay--visible {
    opacity: 1;
}

/* Flatsome: box-image heeft al position:relative — overlay werkt direct */

/* ── Verminderde bewegingsvoorkeur ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vvs-catalog-thumb,
    .vvs-overlay {
        transition: none;
    }
}