/* =========================================================
   SELECTOR SPAESTHETIC · MULTISISTEMA
   DISEÑO COMPLETO
   ========================================================= */

.spa-product-selector {
    --spa-accent: #579EA0;
    --spa-dark: #1d1d1b;
    --spa-white: #ffffff;
    --spa-text: #111111;
    --spa-muted: #737373;
    --spa-content-width: 1040px;

    position: relative;
    left: 50%;

    width: 100vw;
    max-width: none !important;

    margin: 0 0 0 -50vw !important;
    padding: 0 !important;

    overflow: hidden;

    color: var(--spa-text);
    background: var(--spa-white);

    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 400;

    box-sizing: border-box;
}

.spa-product-selector *,
.spa-product-selector *::before,
.spa-product-selector *::after {
    box-sizing: border-box;
}


/* =========================================================
   ESTRUCTURA GENERAL
   ========================================================= */

.spa-product-selector .spa-selector-step {
    width: 100%;
    margin: 0;
}

.spa-product-selector .spa-selector-heading {
    width: min(
        calc(100% - 40px),
        var(--spa-content-width)
    );

    margin: 0 auto 28px;
    text-align: center;
}

.spa-product-selector .spa-selector-step-label {
    display: block;

    margin: 0 0 3px;

    color: inherit;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.spa-product-selector .spa-selector-heading h3 {
    margin: 0;

    color: inherit;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}


/* =========================================================
   PASO 1 · ETAPAS
   ========================================================= */

.spa-product-selector .spa-selector-stage-section {
    padding: 62px 20px 0;
    background: var(--spa-white);
}

.spa-product-selector .spa-stages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    justify-content: center;
    gap: 0;

    width: min(
        100%,
        var(--spa-content-width)
    );

    margin: 0 auto;
    padding: 0;

    background: var(--spa-white);
}


/* =========================================================
   REINICIO DE LOS BOTONES
   ========================================================= */

.spa-product-selector .spa-filter-button {
    appearance: none;
    -webkit-appearance: none;

    border-radius: 0;
    outline: none;
    box-shadow: none;

    margin: 0;

    text-decoration: none;
    text-transform: none;

    font-family: "Open Sans", Arial, sans-serif;

    cursor: pointer;
    overflow: visible;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}

.spa-product-selector .spa-filter-button:disabled {
    cursor: wait;
    opacity: 0.65;
}


/* =========================================================
   BOTONES DE ETAPAS
   ========================================================= */

.spa-product-selector .spa-stage-button {
    min-width: 0;
    min-height: 168px;

    padding: 14px 12px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;

    border: 0 !important;

    color: var(--spa-text);
    background: var(--spa-white);
}

.spa-product-selector .spa-stage-button img {
    display: block;

    width: 118px;
    height: 118px;
    max-width: 100%;

    object-fit: contain;

    filter: none;
    pointer-events: none;

    transition:
        filter 0.25s ease,
        transform 0.25s ease;
}

.spa-product-selector
.spa-stage-button .spa-button-label {
    display: block;
    width: 100%;

    color: inherit;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}


/* =========================================================
   ETAPA · ESTADO NORMAL
   ========================================================= */

.spa-product-selector
.spa-stage-button:not(.is-active) {
    color: var(--spa-text);
    background-color: var(--spa-white);
}

.spa-product-selector
.spa-stage-button:not(.is-active) img {
    filter: none;
}


/* =========================================================
   ETAPA · HOVER
   Fondo turquesa, icono negro y texto negro
   ========================================================= */

.spa-product-selector
.spa-stage-button:not(.is-active):hover {
    color: var(--spa-dark) !important;
    background-color: var(--spa-accent) !important;
    transform: none;
}

.spa-product-selector
.spa-stage-button:not(.is-active):hover img {
    filter: none !important;
    transform: none;
}


/* =========================================================
   ETAPA · ACTIVA
   Fondo negro, icono turquesa y texto turquesa
   ========================================================= */

.spa-product-selector
.spa-stage-button.is-active {
    color: var(--spa-accent) !important;
    background-color: var(--spa-dark) !important;
}

.spa-product-selector
.spa-stage-button.is-active img {
    filter:
        invert(61%)
        sepia(20%)
        saturate(1020%)
        hue-rotate(133deg)
        brightness(89%)
        contrast(88%) !important;
}


/* Mantener diseño activo al pasar el cursor */

.spa-product-selector
.spa-stage-button.is-active:hover {
    color: var(--spa-accent) !important;
    background-color: var(--spa-dark) !important;
    transform: none;
}

.spa-product-selector
.spa-stage-button.is-active:hover img {
    filter:
        invert(61%)
        sepia(20%)
        saturate(1020%)
        hue-rotate(133deg)
        brightness(89%)
        contrast(88%) !important;

    transform: none;
}


/* =========================================================
   PASO 2 · NIVELES DE SENSIBILIDAD
   ========================================================= */

.spa-product-selector .spa-selector-level-section {
    padding: 32px 20px 42px;

    color: var(--spa-white);
    background: var(--spa-dark);
}

.spa-product-selector
.spa-selector-level-section
.spa-selector-heading {
    margin-bottom: 42px;
    color: var(--spa-white);
}

.spa-product-selector .spa-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-content: center;
    gap: 40px;

    width: min(
        100%,
        820px
    );

    margin: 0 auto;
    padding: 0;

    background: transparent;
}


/* =========================================================
   BOTONES DE SENSIBILIDAD
   ========================================================= */

.spa-product-selector .spa-level-button {
    min-width: 0;
    min-height: 95px;

    padding: 10px 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*
     * El borde transparente reserva el espacio.
     * Así el botón no cambia de tamaño al activarse.
     */
    border: 2px solid transparent !important;

    color: var(--spa-white);
    background: transparent;
}


/*
 * Los iconos de sensibilidad permanecen ocultos,
 * como en el diseño de referencia.
 */

.spa-product-selector .spa-level-button img {
    display: none;
}

.spa-product-selector
.spa-level-button .spa-button-label {
    display: block;
    width: 100%;

    color: inherit;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 19px;
    line-height: 1.15;
    font-weight: 700;
    text-align: center;
}

.spa-product-selector
.spa-level-button .spa-level-description {
    display: block;
    width: 100%;

    margin: 2px 0 0;

    color: inherit;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}


/* =========================================================
   SENSIBILIDAD · ESTADO NORMAL
   ========================================================= */

.spa-product-selector
.spa-level-button:not(.is-active) {
    color: var(--spa-white);
    background-color: transparent;
    border-color: transparent !important;
}


/* =========================================================
   SENSIBILIDAD · HOVER
   Fondo turquesa y texto blanco
   ========================================================= */

.spa-product-selector
.spa-level-button:not(.is-active):hover {
    color: var(--spa-white) !important;
    background-color: var(--spa-accent) !important;
    border-color: var(--spa-accent) !important;
    transform: none;
}


/* =========================================================
   SENSIBILIDAD · ACTIVA
   Fondo transparente, borde y texto turquesa
   ========================================================= */

.spa-product-selector
.spa-level-button.is-active {
    color: var(--spa-accent) !important;
    background-color: transparent !important;
    border-color: var(--spa-accent) !important;
}


/* Mantener el borde cuando pasa el cursor */

.spa-product-selector
.spa-level-button.is-active:hover {
    color: var(--spa-accent) !important;
    background-color: transparent !important;
    border-color: var(--spa-accent) !important;
    transform: none;
}


/* =========================================================
   ACCESIBILIDAD CON TECLADO
   ========================================================= */

.spa-product-selector
.spa-filter-button:focus-visible {
    outline: 3px solid var(--spa-accent);
    outline-offset: -6px;
}


/* =========================================================
   PASO 3 · PRODUCTOS
   ========================================================= */

.spa-product-selector
.spa-selector-products-section {
    padding: 26px 20px 65px;
    background: var(--spa-white);
}

.spa-product-selector
.spa-selector-products-section
.spa-selector-heading {
    margin-bottom: 8px;
}

.spa-product-selector .spa-selector-status {
    width: min(
        calc(100% - 40px),
        var(--spa-content-width)
    );

    margin: 0 auto 35px;

    color: var(--spa-muted);

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

.spa-product-selector .spa-selector-products {
    width: min(
        100%,
        1180px
    );

    min-height: 220px;
    margin: 0 auto;

    transition: opacity 0.2s ease;
}


/* Mantener centrada la cuadrícula WooCommerce */

.spa-product-selector
.spa-selector-products ul.products {
    width: 100%;

    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}


/* =========================================================
   TARJETAS DE PRODUCTO · ESTILO DE LA TIENDA
   ========================================================= */

/* Centrar la información inferior sin modificar las imágenes */

.spa-product-selector
.spa-resultados-productos
ul.products
li.product {
    text-align: center !important;
}


/* Enlaces de la tarjeta */

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.woocommerce-loop-product__link {
    color: var(--spa-text) !important;
    text-decoration: none !important;
}


/* Nombre del producto */

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.woocommerce-loop-product__title {
    width: 100%;
    min-height: 72px;

    margin: 18px 0 8px !important;
    padding: 0 12px !important;

    color: #252525 !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
}

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.woocommerce-loop-product__link:hover
.woocommerce-loop-product__title {
    color: var(--spa-accent) !important;
}


/* Precio */

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.price {
    display: block;
    width: 100%;

    margin: 0 0 18px !important;

    color: var(--spa-accent) !important;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.price .amount,

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.price ins {
    color: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.price del {
    color: #999999 !important;
    opacity: 0.8;
}


/* Centrar el botón sin cambiar el diseño definido por la tienda */

.spa-product-selector
.spa-resultados-productos
ul.products
li.product
.button {
    display: table !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* =========================================================
   OCULTAR QUICK VIEW EN ESTE SELECTOR
   ========================================================= */

.spa-product-selector
.qqvfw-quick-view-button-wrapper,

.spa-product-selector
.qqvfw-quick-view-button {
    display: none !important;
}


/* =========================================================
   ESTADO DE CARGA
   ========================================================= */

.spa-product-selector .spa-selector-loading {
    width: min(
        calc(100% - 40px),
        var(--spa-content-width)
    );

    min-height: 45px;
    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 400;
    text-align: center;
}

.spa-product-selector
.spa-selector-loading[hidden] {
    display: none !important;
}

.spa-product-selector
.spa-selector-spinner {
    width: 22px;
    height: 22px;

    display: inline-block;

    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--spa-accent);
    border-radius: 50%;

    animation: spa-selector-spin 0.7s linear infinite;
}

@keyframes spa-selector-spin {
    to {
        transform: rotate(360deg);
    }
}

.spa-product-selector.is-loading
.spa-selector-products {
    opacity: 0.4;
    pointer-events: none;
}


/* =========================================================
   PANTALLAS GRANDES
   ========================================================= */

@media only screen and (min-width: 1440px) {

    .spa-product-selector {
        --spa-content-width: 1080px;
    }

    .spa-product-selector
    .spa-stage-button {
        min-height: 175px;
    }

    .spa-product-selector
    .spa-stage-button img {
        width: 125px;
        height: 125px;
    }
}


/* =========================================================
   TABLETA
   ========================================================= */

@media only screen and (max-width: 1024px) {

    .spa-product-selector
    .spa-selector-stage-section {
        padding-top: 48px;
    }

    .spa-product-selector .spa-stages {
        grid-template-columns: repeat(5, 150px);
        justify-content: start;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;

        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .spa-product-selector
    .spa-stage-button {
        min-height: 158px;
        scroll-snap-align: start;
    }

    .spa-product-selector
    .spa-stage-button img {
        width: 104px;
        height: 104px;
    }

    .spa-product-selector .spa-levels {
        width: min(100%, 760px);
        gap: 20px;
    }

    .spa-product-selector
    .spa-selector-products {
        max-width: 940px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media only screen and (max-width: 767px) {

    .spa-product-selector
    .spa-selector-stage-section {
        padding: 38px 0 0;
    }

    .spa-product-selector
    .spa-selector-heading {
        width: calc(100% - 32px);
        margin-bottom: 22px;
    }

    .spa-product-selector
    .spa-selector-step-label {
        font-size: 12px;
    }

    .spa-product-selector
    .spa-selector-heading h3 {
        font-size: 23px;
        line-height: 1.18;
    }


    /* Etapas con desplazamiento horizontal */

    .spa-product-selector .spa-stages {
        grid-template-columns: repeat(5, 128px);

        overflow-x: auto;

        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .spa-product-selector
    .spa-stage-button {
        min-height: 145px;

        padding: 12px 9px 10px;

        scroll-snap-align: start;
    }

    .spa-product-selector
    .spa-stage-button img {
        width: 90px;
        height: 90px;
    }

    .spa-product-selector
    .spa-stage-button
    .spa-button-label {
        font-size: 14px;
    }


    /* Sensibilidad */

    .spa-product-selector
    .spa-selector-level-section {
        padding: 28px 0 32px;
    }

    .spa-product-selector
    .spa-selector-level-section
    .spa-selector-heading {
        margin-bottom: 24px;
    }

    .spa-product-selector .spa-levels {
        grid-template-columns: repeat(3, 130px);
        justify-content: start;
        gap: 0;

        width: 100%;

        overflow-x: auto;

        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .spa-product-selector
    .spa-level-button {
        min-height: 78px;

        padding: 8px 10px;

        scroll-snap-align: center;
    }

    .spa-product-selector
    .spa-level-button
    .spa-button-label {
        font-size: 16px;
    }

    .spa-product-selector
    .spa-level-button
    .spa-level-description {
        font-size: 13px;
    }


    /* Productos */

    .spa-product-selector
    .spa-selector-products-section {
        padding: 25px 16px 50px;
    }

    .spa-product-selector
    .spa-selector-status {
        width: 100%;

        margin-bottom: 25px;

        font-size: 14px;
    }

    .spa-product-selector
    .spa-resultados-productos
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height: 0;

        margin-top: 12px !important;
        padding: 0 5px !important;

        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .spa-product-selector
    .spa-resultados-productos
    ul.products
    li.product
    .price {
        margin-bottom: 13px !important;
        font-size: 15px !important;
    }
}


/* =========================================================
   EXTENSIÓN MULTISISTEMA: ICONOS SVG CON COLOR DINÁMICO
   El icono activo usa el color exacto de --spa-accent.
   Un filtro CSS fijo no puede reproducir todos los colores.
   ========================================================= */
.spa-product-selector .spa-stage-button {
    position: relative;
    --spa-stage-icon-size: 118px;
}

.spa-product-selector .spa-stage-button.is-active img,
.spa-product-selector .spa-stage-button.is-active:hover img {
    opacity: 0 !important;
    filter: none !important;
}

.spa-product-selector .spa-stage-button.is-active::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: var(--spa-stage-icon-size);
    height: var(--spa-stage-icon-size);
    transform: translateX(-50%);
    background-color: var(--spa-accent);
    -webkit-mask-image: var(--spa-icon-url);
    mask-image: var(--spa-icon-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

@media only screen and (min-width: 1440px) {
    .spa-product-selector .spa-stage-button {
        --spa-stage-icon-size: 125px;
    }
}
@media only screen and (max-width: 1024px) {
    .spa-product-selector .spa-stage-button {
        --spa-stage-icon-size: 104px;
    }
}
@media only screen and (max-width: 767px) {
    .spa-product-selector .spa-stage-button {
        --spa-stage-icon-size: 90px;
    }
    .spa-product-selector .spa-stage-button.is-active::before {
        top: 12px;
    }
}