/* Inloff Bulk Pricing — frontend (PDP + cart)
   Elevación 2026-08: "lista editorial". Tokens de marca (navy/heart/cream), sin
   raya lateral (anti-patrón), fila activa con crema cálida + chip "tu cantidad",
   mejor tramo señalado. Usa las variables del theme (inloff-tokens.css) con
   fallbacks por si el plugin se carga sin el theme. */

.inloff-bp-tiers {
    margin: 18px 0 24px;
    padding: 16px 18px 18px;
    background: #FEFDFB; /* blanco cálido (aprobado por el owner); la fila activa crema resalta sobre él */
    border: 1px solid var(--inloff-line, rgba(27,37,64,.10));
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(27,37,64,.04), 0 14px 32px -22px rgba(27,37,64,.22);
    color: var(--inloff-navy, #1B2540);
    font-family: var(--inloff-font-sans, 'Outfit','Helvetica Neue',Helvetica,Arial,sans-serif);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Header → eyebrow editorial ── */
.inloff-bp-tiers__header { margin-bottom: 10px; }
.inloff-bp-tiers__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inloff-navy, #1B2540);
}
.inloff-bp-tiers__title svg { width: 14px; height: 14px; flex: none; color: var(--inloff-heart, #C5A184); }
.inloff-bp-tiers__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--inloff-line, rgba(27,37,64,.10));
}
.inloff-bp-tiers__sub {
    margin: 7px 0 0;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--inloff-ink-soft, #5F5E5A);
}

/* ── Tabla → lista editorial (block + hairlines) ── */
.inloff-bp-tiers__table {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    border-collapse: collapse;
}
.inloff-bp-tiers__table thead { display: none; }
.inloff-bp-tiers__table tbody { display: block; }
.inloff-bp-tiers__table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 14px;
    padding: 11px 12px;
    border-radius: 10px;
    transition: background .25s cubic-bezier(.2,.7,.3,1);
}
.inloff-bp-tiers__table tbody tr + tr { border-top: 1px solid var(--inloff-line, rgba(27,37,64,.10)); }
.inloff-bp-tiers__table tbody td { display: block; padding: 0; border: 0; }

.inloff-bp-tiers__range {
    grid-column: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--inloff-navy, #1B2540);
}
.inloff-bp-tiers__price {
    grid-column: 2;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--inloff-navy, #1B2540);
    font-variant-numeric: tabular-nums;
}
.inloff-bp-tiers__price .woocommerce-Price-amount { color: inherit; }

/* Ahorro: "ahorras X €/ud (N%)" en heart. Oculto en el tramo 1 (sin <span>). */
.inloff-bp-tiers__save {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 600;
    color: var(--inloff-heart-dark, #AD8763);
    margin-top: 2px;
}
.inloff-bp-tiers__table tbody td.inloff-bp-tiers__save:not(:has(span)) { display: none; }
.inloff-bp-tiers__save:has(span)::before { content: "ahorras "; }
.inloff-bp-tiers__save .woocommerce-Price-amount { color: inherit; font-weight: 700; }
.inloff-bp-tiers__save small {
    color: var(--inloff-ink-soft, #5F5E5A);
    font-weight: 500;
    margin-left: 4px;
}

/* ── Fila activa (tu cantidad): crema cálida, SIN raya lateral ── */
.inloff-bp-tiers__table tbody tr.is-active {
    background: var(--inloff-cream, #F2E8D5);
    box-shadow: none;
}
.inloff-bp-tiers__table tbody tr.is-active,
.inloff-bp-tiers__table tbody tr.is-active + tr { border-top-color: transparent; }
.inloff-bp-tiers__table tbody tr.is-active .inloff-bp-tiers__range::after {
    content: "tu cantidad";
    display: inline-block;
    margin-left: 9px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--inloff-navy, #1B2540);
    background: var(--inloff-heart-glow, rgba(197,161,132,.4));
    vertical-align: middle;
}
/* Mejor tramo (último, si no es el activo): reclamo "mejor precio" */
.inloff-bp-tiers__table tbody tr:last-child:not(.is-active) .inloff-bp-tiers__range::after {
    content: "★ mejor precio";
    margin-left: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--inloff-heart-dark, #AD8763);
    vertical-align: middle;
}

/* ── Hint dinámico bajo la tabla → serif itálica editorial ── */
.inloff-bp-tiers__hint {
    display: none;
    margin: 12px 2px 0;
    font-family: var(--inloff-font-serif, Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-size: 13px;
    font-weight: 400;
    color: var(--inloff-ink-soft, #5F5E5A);
}
.inloff-bp-tiers__hint.is-visible { display: block; }
.inloff-bp-tiers__hint b,
.inloff-bp-tiers__hint strong { font-style: normal; font-weight: 700; color: var(--inloff-navy, #1B2540); }

/* ── "Desde X €/ud" en cards de categoría (rebrand ligero a tokens) ── */
.inloff-bp-from {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: inherit;
}
.inloff-bp-from__label {
    font-size: .8em;
    font-weight: 500;
    text-transform: lowercase;
    color: var(--inloff-ink-soft, #5F5E5A);
}
.inloff-bp-from__price { font-weight: 700; }
.inloff-bp-from__qty { font-size: .85em; opacity: .8; white-space: nowrap; }
.inloff-bp-from__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.inloff-bp-from__unit { font-size: .75em; font-weight: 500; color: var(--inloff-ink-soft, #5F5E5A); }

/* ── Mobile: la lista ya es responsive (grid); solo ajuste de aire ── */
@media (max-width: 640px) {
    .inloff-bp-tiers { padding: 14px 15px 16px; }
    .inloff-bp-tiers__table tbody tr { padding: 11px 10px; }
    .inloff-bp-tiers__table tbody tr.is-active .inloff-bp-tiers__range::after,
    .inloff-bp-tiers__table tbody tr:last-child:not(.is-active) .inloff-bp-tiers__range::after {
        display: block;
        width: fit-content;
        margin: 4px 0 0;
    }
}