/**
 * Selectores visuales de variaciones — frontend (v6.17.0)
 *
 * Estética inspirada en el selector de variantes de Amazon (tarjetas
 * con borde destacado al seleccionar) pero con la paleta del
 * personalizador SCM. Sin tocar el DOM de Blocksy: todo vive dentro
 * de .scm-variation-row.
 */

/* ------------------------------------------------------------------ */
/* El select tradicional queda oculto SOLO cuando el JS activó la UI   */
/* visual (mejora progresiva: sin JS, el select sigue visible).        */
/* ------------------------------------------------------------------ */
.scm-variation-row.scm-vs-active .scm-variation-select {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Texto "Color seleccionado: Gris"                                    */
/* ------------------------------------------------------------------ */
.scm-vs-current {
    margin: 2px 0 8px;
    font-size: 0.92em;
    color: var(--scm-text-muted, #64748b);
}

.scm-vs-current .scm-vs-current-value {
    color: var(--scm-text-color, #1e293b);
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Contenedor de opciones y distribuciones                             */
/* ------------------------------------------------------------------ */
.scm-vs-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.scm-vs-layout-vertical .scm-vs-options {
    flex-direction: column;
    align-items: stretch;
}

.scm-vs-layout-grid .scm-vs-options {
    display: grid;
    grid-template-columns: repeat(var(--scm-vs-cols-d, 4), minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .scm-vs-layout-grid .scm-vs-options {
        grid-template-columns: repeat(var(--scm-vs-cols-t, 3), minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .scm-vs-layout-grid .scm-vs-options {
        grid-template-columns: repeat(var(--scm-vs-cols-p, 2), minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* Opción base (todos los tipos)                                       */
/* ------------------------------------------------------------------ */
.scm-vs-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    background: var(--scm-bg-color, #ffffff);
    border: 2px solid var(--scm-border-color, #e2e8f0);
    border-radius: 10px;
    color: var(--scm-text-color, #1e293b);
    font: inherit;
    font-size: 0.95em;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.scm-vs-option:hover:not(.scm-vs-oos) {
    border-color: var(--scm-primary-color, #2563eb);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.scm-vs-option:focus-visible {
    outline: 3px solid var(--scm-primary-color, #2563eb);
    outline-offset: 2px;
}

/* Borde destacado de la opción activa (estilo Amazon) */
.scm-vs-option.scm-vs-selected {
    border-color: var(--scm-primary-color, #2563eb);
    box-shadow: 0 0 0 1px var(--scm-primary-color, #2563eb),
                0 2px 10px rgba(37, 99, 235, 0.18);
    background: color-mix(in srgb, var(--scm-primary-color, #2563eb) 6%, var(--scm-bg-color, #ffffff));
}

/* ------------------------------------------------------------------ */
/* Agotadas: visibles pero claramente inertes                          */
/* ------------------------------------------------------------------ */
.scm-vs-option.scm-vs-oos {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--scm-bg-secondary, #f8fafc);
}

.scm-vs-option.scm-vs-oos .scm-vs-text {
    text-decoration: line-through;
}

.scm-vs-option.scm-vs-oos.scm-vs-selected {
    border-color: var(--scm-secondary-color, #64748b);
    box-shadow: 0 0 0 1px var(--scm-secondary-color, #64748b);
}

.scm-vs-oos-tag {
    position: absolute;
    top: -8px;
    right: -6px;
    padding: 2px 7px;
    background: var(--scm-danger-color, #ef4444);
    color: #fff;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    text-transform: uppercase;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Botones de texto                                                    */
/* ------------------------------------------------------------------ */
.scm-vs-type-buttons .scm-vs-option {
    min-width: 64px;
}

/* ------------------------------------------------------------------ */
/* Botones de radio                                                    */
/* ------------------------------------------------------------------ */
.scm-vs-type-radios .scm-vs-options {
    flex-direction: column;
    gap: 6px;
}

.scm-vs-type-radios .scm-vs-option {
    justify-content: flex-start;
    text-align: left;
    border-width: 1px;
    padding: 9px 12px;
}

.scm-vs-radio-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--scm-border-color, #e2e8f0);
    border-radius: 50%;
    background: var(--scm-bg-color, #ffffff);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.scm-vs-option.scm-vs-selected .scm-vs-radio-dot {
    border-color: var(--scm-primary-color, #2563eb);
    box-shadow: inset 0 0 0 4px var(--scm-primary-color, #2563eb);
}

/* ------------------------------------------------------------------ */
/* Muestras de color                                                   */
/* ------------------------------------------------------------------ */
/* (v6.17.1) Tamaño configurable vía --scm-vs-swatch-size (24–96 px)   */
.scm-vs-type-colors .scm-vs-option {
    padding: 4px;
    border-radius: 50%;
    width: var(--scm-vs-swatch-size, 44px);
    height: var(--scm-vs-swatch-size, 44px);
}

/* (v6.17.1) Cuadrado con bordes redondeados */
.scm-vs-type-colors.scm-vs-shape-rounded .scm-vs-option {
    border-radius: calc(var(--scm-vs-swatch-size, 44px) * 0.22);
}

/* (v6.17.1) Rectángulo con bordes redondeados: el tamaño configurado
   es el ALTO; el ancho se calcula proporcional (1.7x, estilo botón) */
.scm-vs-type-colors.scm-vs-shape-rect .scm-vs-option {
    border-radius: calc(var(--scm-vs-swatch-size, 44px) * 0.22);
    width: calc(var(--scm-vs-swatch-size, 44px) * 1.7);
}

.scm-vs-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.scm-vs-type-mixed .scm-vs-swatch {
    flex: 0 0 auto;
    /* (v6.17.1) Escala con el tamaño configurado (22px por defecto) */
    width: calc(var(--scm-vs-swatch-size, 44px) / 2);
    height: calc(var(--scm-vs-swatch-size, 44px) / 2);
    border-radius: 50%;
}

.scm-vs-swatch-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scm-vs-type-colors .scm-vs-oos-tag {
    top: -6px;
    right: -10px;
}

/* ------------------------------------------------------------------ */
/* Opciones con imagen                                                 */
/* ------------------------------------------------------------------ */
.scm-vs-type-images .scm-vs-option {
    flex-direction: column;
    padding: 6px;
    width: 76px;
}

.scm-vs-type-images .scm-vs-body {
    display: none; /* la miniatura habla; el nombre va en tooltip/aria */
}

.scm-vs-thumb {
    display: block;
    width: 100%;
    border-radius: 7px;
    overflow: hidden;
    background: var(--scm-bg-secondary, #f8fafc);
}

.scm-vs-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Tarjetas estilo Amazon y selector mixto                             */
/* ------------------------------------------------------------------ */
.scm-vs-type-cards .scm-vs-option,
.scm-vs-type-mixed .scm-vs-option {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    min-width: 110px;
    max-width: 170px;
    justify-content: flex-start;
}

.scm-vs-layout-grid.scm-vs-type-cards .scm-vs-option,
.scm-vs-layout-grid.scm-vs-type-mixed .scm-vs-option,
.scm-vs-layout-vertical.scm-vs-type-cards .scm-vs-option,
.scm-vs-layout-vertical.scm-vs-type-mixed .scm-vs-option {
    max-width: none;
}

.scm-vs-type-mixed .scm-vs-option {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.scm-vs-type-cards .scm-vs-thumb {
    margin-bottom: 8px;
}

.scm-vs-type-mixed .scm-vs-thumb {
    flex: 0 0 44px;
    width: 44px;
}

.scm-vs-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.scm-vs-type-cards .scm-vs-body {
    align-items: center;
}

.scm-vs-type-mixed .scm-vs-body {
    align-items: flex-start;
}

.scm-vs-text {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.scm-vs-desc {
    font-size: 0.82em;
    color: var(--scm-text-muted, #64748b);
}

.scm-vs-sku {
    font-size: 0.76em;
    color: var(--scm-text-muted, #64748b);
    letter-spacing: 0.02em;
}

.scm-vs-price {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--scm-text-color, #1e293b);
}

.scm-vs-qty {
    font-size: 0.78em;
    color: var(--scm-text-muted, #64748b);
}

.scm-vs-stock-in {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--scm-accent-color, #10b981);
}

/* ------------------------------------------------------------------ */
/* Mini tarjetas con color (v6.17.2)                                   */
/* Estructura de tarjeta, pero el "lugar de la foto" es un bloque del  */
/* color de la opción. Su alto usa el tamaño de muestra configurado.   */
/* ------------------------------------------------------------------ */
.scm-vs-type-color_cards .scm-vs-option {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px;
    min-width: 92px;
    max-width: 150px;
}

.scm-vs-layout-grid.scm-vs-type-color_cards .scm-vs-option,
.scm-vs-layout-vertical.scm-vs-type-color_cards .scm-vs-option {
    max-width: none;
}

.scm-vs-cardswatch {
    display: block;
    width: 100%;
    height: calc(var(--scm-vs-swatch-size, 44px) * 1.15);
    border-radius: 8px;
    margin-bottom: 7px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* (v6.17.7) Opción sin color: bloque blanco liso (solo el anillo
   interior sutil heredado de .scm-vs-swatch lo delimita). Así el
   neón y demás efectos caen al color azul principal por defecto. */
.scm-vs-cardswatch-empty {
    background: #ffffff;
}

.scm-vs-type-color_cards .scm-vs-thumb {
    margin-bottom: 7px;
}

.scm-vs-type-color_cards .scm-vs-body {
    align-items: center;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Efectos al seleccionar (v6.17.3)                                    */
/* La clase scm-vs-effect-* viene del ajuste "Efecto al seleccionar".  */
/* Cada efecto aplica su versión completa a la opción seleccionada y   */
/* una versión sutil al hover. Todos se apagan con movimiento reducido.*/
/* ------------------------------------------------------------------ */

/* Elevación */
.scm-vs-effect-lift .scm-vs-option.scm-vs-selected {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px var(--scm-primary-color, #2563eb),
                0 8px 18px rgba(0, 0, 0, 0.16);
}
.scm-vs-effect-lift .scm-vs-option:hover:not(.scm-vs-oos):not(.scm-vs-selected) {
    transform: translateY(-3px);
}

/* Zoom */
.scm-vs-effect-zoom .scm-vs-option.scm-vs-selected {
    transform: scale(1.06);
    z-index: 1;
}
.scm-vs-effect-zoom .scm-vs-option:hover:not(.scm-vs-oos):not(.scm-vs-selected) {
    transform: scale(1.03);
}

/* Resplandor */
.scm-vs-effect-glow .scm-vs-option.scm-vs-selected {
    box-shadow: 0 0 0 1px var(--scm-primary-color, #2563eb),
                0 0 14px 3px color-mix(in srgb, var(--scm-primary-color, #2563eb) 45%, transparent);
}

/* Anillo doble */
.scm-vs-effect-ring .scm-vs-option.scm-vs-selected {
    outline: 2px solid var(--scm-primary-color, #2563eb);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--scm-primary-color, #2563eb);
}

/* Pulso: halo que late suavemente mientras está seleccionada */
@keyframes scm-vs-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--scm-primary-color, #2563eb) 45%, transparent); }
    70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--scm-primary-color, #2563eb) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--scm-primary-color, #2563eb) 0%, transparent); }
}
.scm-vs-effect-pulse .scm-vs-option.scm-vs-selected {
    animation: scm-vs-pulse 1.8s ease-out infinite;
}

/* Rebote: pequeño salto en el momento de elegir */
@keyframes scm-vs-bounce {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-7px); }
    60%  { transform: translateY(0); }
    80%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.scm-vs-effect-bounce .scm-vs-option.scm-vs-selected {
    animation: scm-vs-bounce 0.45s ease-out 1;
}

/* ================== Efectos continuos (v6.17.4) =================== */

/* Latido: doble golpe de escala, como pulso cardíaco */
@keyframes scm-vs-heartbeat {
    0%, 28%, 56%, 100% { transform: scale(1); }
    14% { transform: scale(1.06); }
    42% { transform: scale(1.05); }
}
.scm-vs-effect-heartbeat .scm-vs-option.scm-vs-selected {
    animation: scm-vs-heartbeat 1.6s ease-in-out infinite;
    z-index: 1;
}

/* Flotación: levitación lenta y sutil */
@keyframes scm-vs-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.scm-vs-effect-float .scm-vs-option.scm-vs-selected {
    animation: scm-vs-float 2.6s ease-in-out infinite;
    box-shadow: 0 0 0 1px var(--scm-primary-color, #2563eb),
                0 6px 14px rgba(0, 0, 0, 0.14);
}

/* Brillo deslizante: destello diagonal que cruza cada ciclo.
   Requiere recortar el pseudoelemento; se excluyen las agotadas para
   no recortar su etiqueta externa "Agotado". */
@keyframes scm-vs-shine {
    0%, 55% { transform: translateX(-130%) skewX(-18deg); }
    85%, 100% { transform: translateX(230%) skewX(-18deg); }
}
.scm-vs-effect-shine .scm-vs-option.scm-vs-selected:not(.scm-vs-oos) {
    overflow: hidden;
}
.scm-vs-effect-shine .scm-vs-option.scm-vs-selected:not(.scm-vs-oos)::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 45%;
    height: 120%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    animation: scm-vs-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* Borde giratorio: degradado cónico del color principal rotando.
   Usa @property para interpolar el ángulo (Chrome/Edge/Safari/Firefox
   modernos); sin soporte, queda el borde degradado estático. */
@property --scm-vs-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes scm-vs-spin {
    to { --scm-vs-angle: 360deg; }
}
.scm-vs-effect-spin_border .scm-vs-option.scm-vs-selected {
    border-color: transparent;
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--scm-primary-color, #2563eb) 6%, var(--scm-bg-color, #ffffff)),
            color-mix(in srgb, var(--scm-primary-color, #2563eb) 6%, var(--scm-bg-color, #ffffff))
        ),
        conic-gradient(
            from var(--scm-vs-angle),
            var(--scm-primary-color, #2563eb) 0%,
            transparent 25%,
            var(--scm-primary-color, #2563eb) 50%,
            transparent 75%,
            var(--scm-primary-color, #2563eb) 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: none;
    animation: scm-vs-spin 2.4s linear infinite;
}

/* Neón respirando: el resplandor sube y baja de intensidad.
   (v6.17.5) Brilla con el color de la PROPIA opción cuando está
   configurado (--scm-vs-opt-color, inyectado por PHP en el botón);
   sin color configurado, cae al color principal. */
@keyframes scm-vs-neon {
    0%, 100% {
        box-shadow: 0 0 0 1px var(--scm-vs-opt-color, var(--scm-primary-color, #2563eb)),
                    0 0 6px 1px color-mix(in srgb, var(--scm-vs-opt-color, var(--scm-primary-color, #2563eb)) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 0 1px var(--scm-vs-opt-color, var(--scm-primary-color, #2563eb)),
                    0 0 18px 5px color-mix(in srgb, var(--scm-vs-opt-color, var(--scm-primary-color, #2563eb)) 60%, transparent);
    }
}
.scm-vs-effect-neon .scm-vs-option.scm-vs-selected {
    border-color: var(--scm-vs-opt-color, var(--scm-primary-color, #2563eb));
    animation: scm-vs-neon 2.2s ease-in-out infinite;
}

/* Parpadeo de borde: alterna color principal y color de acento */
@keyframes scm-vs-blink {
    0%, 100% {
        border-color: var(--scm-primary-color, #2563eb);
        box-shadow: 0 0 0 1px var(--scm-primary-color, #2563eb);
    }
    50% {
        border-color: var(--scm-accent-color, #10b981);
        box-shadow: 0 0 0 1px var(--scm-accent-color, #10b981);
    }
}
.scm-vs-effect-blink .scm-vs-option.scm-vs-selected {
    animation: scm-vs-blink 1.6s ease-in-out infinite;
}

/* ================ Efectos de una sola vez (v6.17.4) =============== */

/* Pop: encoge y crece con rebasamiento al elegir */
@keyframes scm-vs-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.92); }
    65%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.scm-vs-effect-pop .scm-vs-option.scm-vs-selected {
    animation: scm-vs-pop 0.35s ease-out 1;
}

/* Insignia de check: palomita del color de acento en la esquina, con
   entrada tipo pop. En agotadas no se muestra (la esquina la ocupa la
   etiqueta "Agotado" y una agotada no debe parecer confirmada).
   (v6.17.5) Activada por .scm-vs-badge-on: el checkbox independiente
   la combina con cualquier efecto; el efecto 'check' de v6.17.4
   también agrega esta clase (compatibilidad). */
@keyframes scm-vs-check-in {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.scm-vs-badge-on .scm-vs-option.scm-vs-selected:not(.scm-vs-oos)::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scm-accent-color, #10b981);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    animation: scm-vs-check-in 0.3s ease-out 1;
    pointer-events: none;
}
/* En muestras circulares pequeñas la insignia se ajusta al borde */
.scm-vs-badge-on.scm-vs-type-colors .scm-vs-option.scm-vs-selected:not(.scm-vs-oos)::after {
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    font-size: 11px;
}

/* Movimiento reducido: los efectos quedan solo en el borde destacado */
@media (prefers-reduced-motion: reduce) {
    .scm-vs-effect-lift .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-lift .scm-vs-option:hover:not(.scm-vs-oos):not(.scm-vs-selected),
    .scm-vs-effect-zoom .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-zoom .scm-vs-option:hover:not(.scm-vs-oos):not(.scm-vs-selected) {
        transform: none;
    }
    .scm-vs-effect-pulse .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-bounce .scm-vs-option.scm-vs-selected,
    /* (v6.17.4) */
    .scm-vs-effect-heartbeat .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-float .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-shine .scm-vs-option.scm-vs-selected:not(.scm-vs-oos)::before,
    .scm-vs-effect-spin_border .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-neon .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-blink .scm-vs-option.scm-vs-selected,
    .scm-vs-effect-pop .scm-vs-option.scm-vs-selected,
    /* La insignia de check permanece visible (es informativa), solo
       pierde su animación de entrada */
    .scm-vs-badge-on .scm-vs-option.scm-vs-selected:not(.scm-vs-oos)::after {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Tarjetas estilo Amazon + Color (v7.0.0)                             */
/* Misma tarjeta que 'cards' (imagen + nombre + datos), pero el color  */
/* de la opción NO se dibuja dentro: se traslada al borde y a los      */
/* efectos. Truco: el wrapper guarda el color del personalizador en    */
/* --scm-vs-base y cada botón redefine --scm-primary-color con SU      */
/* color; así los 15 efectos existentes (resplandor, neón, anillo,     */
/* pulso...) pasan a usar el color de la opción sin duplicar reglas.   */
/* Sin color configurado, cae al color principal de siempre.           */
/* ------------------------------------------------------------------ */
.scm-vs-type-cards_color {
    --scm-vs-base: var(--scm-primary-color, #2563eb);
}

.scm-vs-type-cards_color .scm-vs-option {
    --scm-primary-color: var(--scm-vs-opt-color, var(--scm-vs-base, #2563eb));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 10px;
    min-width: 110px;
    max-width: 170px;
}

.scm-vs-layout-grid.scm-vs-type-cards_color .scm-vs-option,
.scm-vs-layout-vertical.scm-vs-type-cards_color .scm-vs-option {
    max-width: none;
}

.scm-vs-type-cards_color .scm-vs-thumb {
    margin-bottom: 8px;
}

.scm-vs-type-cards_color .scm-vs-body {
    align-items: center;
}

/* Borde de la opción activa con el color de la opción; el ancho sube
   a 3px porque un color claro necesita más superficie para leerse */
.scm-vs-type-cards_color .scm-vs-option.scm-vs-selected {
    border-width: 3px;
    border-color: var(--scm-vs-opt-color, var(--scm-vs-base, #2563eb));
    background: color-mix(in srgb, var(--scm-vs-opt-color, var(--scm-vs-base, #2563eb)) 7%, var(--scm-bg-color, #ffffff));
}

/* Anillo exterior gris tenue: garantiza que un color muy claro
   (blanco, marfil, crema) siga distinguiéndose del fondo */
.scm-vs-type-cards_color .scm-vs-option.scm-vs-selected::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid var(--scm-border-color, #e2e8f0);
    border-radius: 13px;
    pointer-events: none;
}

/* El brillo deslizante ya usa ::before para su destello: en ese efecto
   se cede el pseudoelemento y el anillo no se dibuja */
.scm-vs-type-cards_color.scm-vs-effect-shine .scm-vs-option.scm-vs-selected::before {
    inset: auto;
    border: 0;
    border-radius: 0;
}

.scm-vs-type-cards_color .scm-vs-option:hover:not(.scm-vs-oos) {
    border-color: var(--scm-vs-opt-color, var(--scm-vs-base, #2563eb));
}

/* ------------------------------------------------------------------ */
/* Ajustes móviles                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
    .scm-vs-options {
        gap: 8px;
    }

    .scm-vs-option {
        padding: 9px 12px;
        font-size: 0.9em;
    }

    .scm-vs-type-images .scm-vs-option {
        width: 66px;
    }

    .scm-vs-type-cards .scm-vs-option,
    .scm-vs-type-mixed .scm-vs-option,
    .scm-vs-type-cards_color .scm-vs-option {
        min-width: 96px;
    }
}

/* ------------------------------------------------------------------ */
/* Movimiento reducido                                                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .scm-vs-option {
        transition: none;
    }
    .scm-vs-option:hover:not(.scm-vs-oos) {
        transform: none;
    }
}