/* ==========================================================================
   HYBINET PRICE MODULE — Single Product & Variables
   Arquitectura: máquina de estados vía [data-state] en el contenedor padre.
   Transiciones: opacity + transform (GPU-accelerated, cero CLS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTENEDOR PRINCIPAL (común a simple y variable)
   -------------------------------------------------------------------------- */
.hybinet-product-price {
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--hybinet-color-title, #111);
    letter-spacing: -0.03em;
    display: flex;
    align-items: flex-start;
}

/* Destruir el span.price que WC inyecta en variaciones */
.hybinet-product-price .price {
    all: unset !important;
    display: contents !important;
}

/* Blindar internos contra sobreescrituras de WC/GP */
.hybinet-product-price .woocommerce-Price-amount,
.hybinet-product-price .amount,
.hybinet-product-price bdi {
    color: inherit !important;
    font-size: 1em !important;
    line-height: inherit;
}

.hybinet-product-price .woocommerce-Price-currencySymbol {
    margin-right: 0.1em;
}

/* --------------------------------------------------------------------------
   2. PRODUCTO VARIABLE — Estructura de 2 líneas con altura reservada
   -------------------------------------------------------------------------- */
.hybinet-product-price--variable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Línea 1: precio grande — altura dictada por sus hijos mediante CSS Grid */
.hybinet-price-main {
    display: grid;
    align-items: center;
    min-height: clamp(2rem, 4vw, 2.6rem);
}

/* Ambos slots del precio ocupan la misma celda de la cuadrícula */
.hybinet-price-from,
.hybinet-price-resolved {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.25em;
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

/* Prefijo "Desde" — estilo superscript sutil */
.hybinet-price-from-label {
    font-size: 0.35em;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--hybinet-color-text-meta, #828D85);
    margin-right: 0.3em;
    align-self: flex-start;
    /* Subirlo estilo superscript */
    margin-top: 0.3em;
    /* Ajuste fino visual */
}

/* Forzar grosor 800 solo en el precio actual visible */
.hybinet-sale-price-current ins .woocommerce-Price-amount,
.hybinet-sale-price-current ins .amount,
.hybinet-sale-price-current ins bdi,
.hybinet-price-from .woocommerce-Price-amount,
.hybinet-price-from .amount,
.hybinet-price-from bdi {
    font-weight: 800 !important;
}

/* Línea 2: subtexto pequeño — altura fija reservada siempre */
.hybinet-price-sub {
    position: relative;
    font-size: 0.875rem;
    line-height: 1;
    min-height: 2rem;
    /* Reserva espacio exacto para el alto del badge (font + padding) */
    display: flex;
    align-items: center;
    width: 100%;
}

/* Los tres slots del subtexto conviven en el mismo espacio */
.hybinet-price-guide,
.hybinet-price-error,
.hybinet-price-stock {
    position: absolute;
    top: 0;
    left: 0;
    /* Al usar top/left en lugar de inset, el badge recupera su ancho natural */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    will-change: opacity;
}

/* --------------------------------------------------------------------------
   3. MÁQUINA DE ESTADOS — qué se ve en cada data-state
   Estado inicial: "Desde Q42.00" + "Selecciona las opciones"
   Estado válido:  precio exacto + badge de stock
   Estado inválido: "Desde Q42.00" + "La opción seleccionada no está disponible"
   -------------------------------------------------------------------------- */

/* — Estado "initial" — */
[data-state="initial"] .hybinet-price-from {
    opacity: 1;
    pointer-events: auto;
}

[data-state="initial"] .hybinet-price-resolved {
    opacity: 0;
    pointer-events: none;
}

[data-state="initial"] .hybinet-price-guide {
    opacity: 1;
    pointer-events: auto;
}

[data-state="initial"] .hybinet-price-error {
    opacity: 0;
    pointer-events: none;
}

[data-state="initial"] .hybinet-price-stock {
    opacity: 0;
    pointer-events: none;
}

/* — Estado "valid" — */
[data-state="valid"] .hybinet-price-from {
    opacity: 0;
    pointer-events: none;
}

[data-state="valid"] .hybinet-price-resolved {
    opacity: 1;
    pointer-events: auto;
}

[data-state="valid"] .hybinet-price-guide {
    opacity: 0;
    pointer-events: none;
}

[data-state="valid"] .hybinet-price-error {
    opacity: 0;
    pointer-events: none;
}

[data-state="valid"] .hybinet-price-stock {
    opacity: 1;
    pointer-events: auto;
}

/* — Estado "invalid" — */
[data-state="invalid"] .hybinet-price-from {
    opacity: 1;
    pointer-events: auto;
}

[data-state="invalid"] .hybinet-price-resolved {
    opacity: 0;
    pointer-events: none;
}

[data-state="invalid"] .hybinet-price-guide {
    opacity: 0;
    pointer-events: none;
}

[data-state="invalid"] .hybinet-price-error {
    opacity: 1;
    pointer-events: auto;
}

[data-state="invalid"] .hybinet-price-stock {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. PRECIO EN OFERTA (Híbrido 2 columnas)
   ========================================================================== */
.hybinet-sale-price-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1;
}

.hybinet-sale-price-current ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--hybinet-color-title, #111);
}

.hybinet-sale-price-side {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hybinet-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #fff1f2;
    color: #e11d48;
    font-size: 0.75em;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    margin: 0;
    border-radius: 4px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.hybinet-save-badge svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.hybinet-sale-price-old {
    margin: 0;
    padding: 0;
}

.hybinet-sale-price-old del {
    color: var(--hybinet-color-text-meta, #999);
    font-size: 0.85em;
    text-decoration: line-through;
    opacity: 0.8;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.hybinet-sale-price-old del .woocommerce-Price-amount,
.hybinet-sale-price-old del .amount,
.hybinet-sale-price-old del bdi {
    font-weight: 500 !important;
    font-size: inherit !important;
}

/* VERSIÓN HUGE (Exclusiva para el bloque principal del Single Product) */
.hybinet-price-main .hybinet-sale-price-wrapper {
    gap: 0.75rem;
}

.hybinet-price-main .hybinet-sale-price-current ins {
    display: flex;
    align-items: flex-start;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hybinet-price-main .hybinet-sale-price-side {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 0.2rem;
    font-size: 1rem;
}

.hybinet-price-main .hybinet-save-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    gap: 0.35rem;
}

.hybinet-price-main .hybinet-save-badge svg {
    width: 14px;
    height: 14px;
}

.hybinet-price-main .hybinet-sale-price-old del {
    font-size: 1rem;
    opacity: 0.75;
}

.hybinet-price-main .hybinet-sale-price-old del .woocommerce-Price-amount,
.hybinet-price-main .hybinet-sale-price-old del .amount,
.hybinet-price-main .hybinet-sale-price-old del bdi {
    font-size: 1rem !important;
}

/* --------------------------------------------------------------------------
   5. BADGE DE ESTADOS Y DISPONIBILIDAD
   ========================================================================== */
.hybinet-product-stock {
    margin-bottom: 1.5rem;
}

.hybinet-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: var(--hybinet-radius-md, 8px);
    letter-spacing: -0.01em;
}

.hybinet-stock-badge svg {
    flex-shrink: 0;
}

.hybinet-stock-badge--neutral {
    background-color: var(--hybinet-color-bg-secondary, #F4F4F0);
    color: var(--hybinet-color-text-secondary, #4B564E);
}

.hybinet-stock-badge--in {
    background-color: #f0fdf4;
    color: #15803d;
}

.hybinet-stock-badge--low {
    background-color: #fff7ed;
    color: #c2410c;
}

.hybinet-stock-badge--out {
    background-color: #fff1f2;
    color: #be123c;
}


.hybinet-product-price {
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    /* <-- Esto elimina el espacio invisible superior e inferior */
    margin-bottom: 0.25rem;
    /* Margen muy sutil */
    color: var(--hybinet-color-title, #111);
    letter-spacing: -0.03em;
    display: flex;
    align-items: flex-start;
}

/* Destruir completamente el CSS de WooCommerce y herencias globales */
.hybinet-product-price .price {
    all: unset !important;
    display: contents !important;
}

/* Grosor por defecto para los montos numéricos principales */
.hybinet-product-price .woocommerce-Price-amount,
.hybinet-product-price .amount,
.hybinet-product-price bdi {
    color: inherit !important;
    font-size: 1em !important;
    line-height: inherit;
}

/* Forzar que el precio principal tenga grosor 800 (Aplica a variable y simple) */
.hybinet-product-price>.woocommerce-Price-amount,
.hybinet-product-price>.amount,
.hybinet-product-price>bdi,
.hybinet-sale-price-current ins .woocommerce-Price-amount,
.hybinet-sale-price-current ins .amount,
.hybinet-sale-price-current ins bdi {
    font-weight: 800 !important;
}

.hybinet-product-price .woocommerce-Price-currencySymbol {
    margin-right: 0.1em;
}

/* ==========================================================================
   PRECIOS EN OFERTA (Híbrido 2 columnas)
   ========================================================================== */
.hybinet-sale-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Columna izquierda: el precio rebajado grande */
.hybinet-sale-price-current ins {
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--hybinet-color-title, #111);
    letter-spacing: -0.03em;
}

/* Columna derecha: badge + precio original, apilados */
.hybinet-sale-price-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 0.2rem;
    font-size: 1rem !important;
    /* <-- Esto previene que hereden el clamp(2rem...) gigante */
    line-height: 1;
}

.hybinet-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #fff1f2;
    color: #e11d48;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    margin: 0 !important;
    border-radius: 6px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.hybinet-save-badge svg {
    flex-shrink: 0;
}

.hybinet-sale-price-old {
    margin: 0 !important;
    padding: 0 !important;
}

.hybinet-sale-price-old del {
    color: var(--hybinet-color-text-meta, #999);
    font-size: 1rem;
    text-decoration: line-through;
    opacity: 0.75;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-start;
}

/* El precio tachado siempre debe ser más delgado (500) y de 1rem máximo */
.hybinet-sale-price-old del .woocommerce-Price-amount,
.hybinet-sale-price-old del .amount,
.hybinet-sale-price-old del bdi {
    font-weight: 500 !important;
    font-size: 1rem !important;
}

/* ==========================================================================
   DISPONIBILIDAD Y STOCK
   ========================================================================== */
.hybinet-product-stock {
    margin-bottom: 1.5rem;
}

/* Badge base */
.hybinet-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: var(--hybinet-radius-md, 8px);
    letter-spacing: -0.01em;
}

/* En stock — verde suave */
.hybinet-stock-badge--in {
    background-color: #f0fdf4;
    color: #15803d;
}

/* Stock bajo — naranja cálido */
.hybinet-stock-badge--low {
    background-color: #fff7ed;
    color: #c2410c;
}

/* Sin existencias — rosa/rojo suave */
.hybinet-stock-badge--out {
    background-color: #fff1f2;
    color: #be123c;
}