/* ═══════════════════════════════════════════════════════════
   VARIATIONS UI — CHIPS + PRECIO ARRIBA (xstore-child)
   Lenguaje visual: tarjetas redondeadas, pills, acento #e95d2a
   ═══════════════════════════════════════════════════════════ */

/* Pre-hide del select nativo cuando hay JS (evita el FOUC del
   selector antiguo mientras carga el script). Sin JS el select
   nativo se conserva. El sticky cart de XStore queda excluido
   (no tiene ancestro .et_product-block). */
html.mpl-js .single-product .et_product-block form.variations_form table.variations {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

/* Oculta el <p class="price"> base de la tarjeta cuando la UI
   de chips está activa (el precio vive en .gs-variation-price-top) */
.single-product .mpl-var-card > p.price {
    display: none !important;
}

/* Tabla de variaciones nativa oculta (los selects siguen en el
   DOM para que WooCommerce core siga funcionando) */
.single-product .mpl-variations-ui table.variations {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
.single-product .mpl-variations-ui table.variations a.reset_variations {
    display: none !important;
}

/* ── Bloque de precio arriba ── */
.single-product .gs-variation-price-top {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e9e9e9;
}
.single-product .gs-variation-price-top .mpl-price-hint {
    margin: 0;
    font-size: 13px;
    color: #565959;
}
.single-product .gs-variation-price-top .gs-price-legend-wrap {
    margin: 0;
}

/* El precio/stock que WC inyecta en .single_variation queda
   oculto: ya se muestra arriba en .gs-variation-price-top */
.single-product .mpl-hide-native-single .woocommerce-variation.single_variation {
    display: none !important;
}
.single-product .mpl-variations-ui .single_variation_wrap {
    border-top: 1px solid #e9e9e9;
    padding-top: 14px;
}

/* ── Resumen "Tu selección" ── */
.single-product .mpl-var-summary {
    display: none;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #F7F7F7;
    border: 1px solid #D5D9D9;
    border-radius: 12px;
}
.single-product .mpl-var-summary.is-visible {
    display: block;
}
.single-product .mpl-var-summary-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #0F1111;
}
.single-product .mpl-var-summary-title::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #007600;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.single-product .mpl-var-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.single-product .mpl-var-summary li {
    padding: 2px 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #565959;
}
.single-product .mpl-var-summary li b {
    color: #0F1111;
    font-weight: 600;
}

/* ── Grupo de atributo ── */
.single-product .mpl-var-group {
    margin-bottom: 16px;
}
.single-product .mpl-var-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.single-product .mpl-var-head-left {
    display: flex;
    align-items: center;
    gap: 9px;
}
.single-product .mpl-var-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffa03d 0%, #e95d2a 60%, #d84315 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(233, 93, 42, .25);
}
.single-product .mpl-var-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F1111;
}

/* ── Botón "Quitar selección" (ghost pill) ── */
.single-product .mpl-var-reset {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #d5d9d9;
    border-radius: 999px;
    background: #fff;
    color: #565959;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.single-product .mpl-var-reset.is-visible {
    display: inline-flex;
}
.single-product .mpl-var-reset:hover {
    border-color: #e95d2a;
    color: #B12704;
    background: #fff5f0;
}
.single-product .mpl-var-reset-x {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Chips ── */
.single-product .mpl-var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.single-product .mpl-var-chip {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 11px 14px 11px 36px;
    border: 1.5px solid #d5d9d9;
    border-width: 1.5px;
    border-radius: 14px;
    background: #fff;
    color: #0F1111 !important;
    font-size: 13.5px;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* El texto del chip es SIEMPRE negro, en cualquier estado:
   el tema pone blanco en button:hover:focus (var(--et_white-2-dark)) */
.single-product .mpl-var-chip:hover,
.single-product .mpl-var-chip:focus,
.single-product .mpl-var-chip:active,
.single-product .mpl-var-chip.is-selected,
.single-product .mpl-var-chip.is-selected:hover,
.single-product .mpl-var-chip.is-selected:focus {
    color: #0F1111 !important;
}
.single-product .mpl-var-chip::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 13px;
    width: 16px;
    height: 16px;
    border: 2px solid #c4c4c4;
    border-radius: 50%;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.single-product .mpl-var-chip:hover:not(.is-disabled):not(.is-selected) {
    border-color: #e95d2a;
}
.single-product .mpl-var-chip:focus-visible {
    outline: 2px solid #e95d2a;
    outline-offset: 2px;
}
.single-product .mpl-var-chip.is-selected {
    border-color: #e95d2a;
    background: linear-gradient(135deg, #fff6ef, #ffe9db);
    box-shadow: 0 3px 10px rgba(233, 93, 42, .12);
    font-weight: 600;
}
.single-product .mpl-var-chip.is-selected::before {
    border-color: #e95d2a;
    background: #e95d2a;
    box-shadow: inset 0 0 0 3px #fff;
}
.single-product .mpl-var-chip.is-disabled {
    border-color: #eee;
    background: #fafafa;
    color: #a7a7a7 !important;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: #cfcfcf;
}
.single-product .mpl-var-chip.is-filtered-out {
    display: none;
}

/* Chips compactos (códigos cortos tipo "517") */
.single-product .mpl-var-chips--compact .mpl-var-chip {
    width: auto;
    min-width: 72px;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    text-align: center;
    font-weight: 600;
}
.single-product .mpl-var-chips--compact .mpl-var-chip::before {
    display: none;
}

/* ── Scroll interno para grupos largos ── */
.single-product .mpl-chips-scroll {
    position: relative;
    max-height: 124px;
    border-radius: 14px;
}
.single-product .mpl-chips-scroll-inner {
    max-height: 124px;
    overflow-y: auto;
    padding: 2px 4px 40px 2px;
    border-radius: 14px;
    scrollbar-width: thin;
}
/* Fade inferior: overlay hermano del área scrolleable → nunca se
   desplaza y queda SIEMPRE pegado al borde inferior del contenedor */
.single-product .mpl-chips-fade {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.single-product .mpl-chips-scroll.has-overflow .mpl-chips-fade {
    display: block;
}

/* ── Buscador ── */
.single-product .mpl-var-search-wrap {
    position: relative;
    margin-bottom: 10px;
}
.single-product .mpl-var-search {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #d5d9d9;
    border-radius: 12px;
    background: #fff;
    color: #0F1111;
    font-size: 13.5px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.single-product .mpl-var-search:focus {
    border-color: #e95d2a;
    box-shadow: 0 0 0 3px rgba(233, 93, 42, .12);
}
.single-product .mpl-var-search-wrap::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #8a8a8a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.single-product .mpl-var-search-count {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #565959;
}

/* ── Disponibilidad debajo de los chips ── */
.single-product .mpl-var-availability:empty {
    display: none;
}

/* ── Responsive: chips compactos en 3 columnas en desktop ── */
@media only screen and (max-width: 480px) {
    .single-product .mpl-chips-scroll,
    .single-product .mpl-chips-scroll-inner {
        max-height: 110px;
    }
    .single-product .mpl-var-chip {
        font-size: 13px;
    }
}