/* Selector de colores por gamas (views/js/color-selector.js). Mismo lenguaje que el selector de
   acabado de la madera del tema: Montserrat, borde de 2 px, #2e2a29. */
.product-variants ul[data-adsel="1"] { display: none !important; }
/* Mientras llega el JS, la lista plana no se pinta (si en 5 s no llega, color-selector-head.js pone adsel-tarde y vuelve) */
html.adsel-js:not(.adsel-tarde) .product-variants ul.variant-links:not([data-adsel]):not(.adsel-lista) { display: none !important; }
.adsel { flex: 1 1 100%; min-width: 0; }              /* debajo del título, como la lista original */
.adsel [hidden] { display: none !important; }

.adsel-gamas { display: flex; flex-wrap: wrap; gap: 10px; }
.adsel-gama {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    flex: 0 1 auto; min-height: 50px; padding: 0 18px; margin: 0;
    font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; color: #2e2a29;
    background: transparent; border: 2px solid #d9d6d4; border-radius: 0; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
@media (hover: hover) { .adsel-gama:hover { border-color: #2e2a29; } }   /* en táctil el hover se queda pegado */
.adsel-gama:focus { outline: none; }
.adsel-gama:focus-visible { outline: 2px solid #2e2a29; outline-offset: 2px; }
.adsel-gama--activa { border-color: #2e2a29; }
.adsel-gama--abierta { background: #f4f3f2; border-color: #2e2a29; }
.adsel-chev {
    width: 8px; height: 8px; margin-top: -4px; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s ease, margin .15s ease;
}
.adsel-gama--abierta .adsel-chev { transform: rotate(-135deg); margin-top: 4px; }

.adsel-elegido { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.adsel-muestra {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    background-size: cover; background-position: center; box-shadow: 0 0 16px rgba(0, 0, 0, .15);
}
.adsel-nombre { font-family: Montserrat, sans-serif; font-size: 14px; color: #2e2a29; line-height: 1.3; }
.adsel-cambiar {
    position: relative; width: 28px; height: 28px; flex: 0 0 28px; padding: 0; margin: 0;
    background: #fff; border: 1px solid #bdbdbd; border-radius: 50%; cursor: pointer;
    transition: border-color .15s ease;
}
.adsel-cambiar::before, .adsel-cambiar::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
    background: #2e2a29; transform: translate(-50%, -50%) rotate(45deg);
}
.adsel-cambiar::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) { .adsel-cambiar:hover { border-color: #2e2a29; } }
.adsel-cambiar:focus { outline: none; }
.adsel-cambiar:focus-visible { outline: 2px solid #2e2a29; outline-offset: 2px; }

.adsel-panel { margin-top: 16px; }
.adsel--sin-gamas .adsel-panel { margin-top: 0; }
.adsel-fila + .adsel-fila { margin-top: 6px; }
.adsel-fila-titulo {
    display: block; margin: 0 0 8px; font-family: Montserrat, sans-serif;
    font-size: 13px; font-weight: 700; color: #000; line-height: 1.4;
}
.adsel-lista { margin: 0; padding: 0; }
.adsel-li { position: relative; }
/* El tema no marca el foco de las muestras (el radio va oculto): contorno al llegar con el teclado */
.adsel-li:has(input:focus-visible) label { outline: 2px solid #2e2a29; outline-offset: 3px; }
.adsel-check { display: none; }
.adsel-li--sel .adsel-check {
    display: block; position: absolute; top: -4px; right: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #2e2a29; pointer-events: none; z-index: 2;
}
.adsel-li--sel .adsel-check::after {
    content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media (max-width: 575px) {
    .adsel-gamas { gap: 8px; }
    .adsel-gama { flex: 1 1 0; padding: 0 10px; font-size: 14px; }
}