/*
 * Usamos la paleta de color GLOBAL de Astra (la que configurás en
 * Apariencia → Personalizar → Colores globales). Astra expone esos
 * colores como variables CSS (--ast-global-color-0 a 8) en todo el sitio.
 * Si tu instalación no las tiene disponibles por algún motivo, cada var()
 * trae un valor de respaldo (después de la coma) para no romper el diseño.
 */
:root {
    --svs-primario: var(--ast-global-color-0, #CC2229);   /* color principal de Astra (botones, links) */
    --svs-oscuro: var(--ast-global-color-3, #1A1A1A);     /* color de texto/oscuro de Astra */
    --svs-gris: #F3F3F3;
}

/* No tocamos header, navegación, botones ni footer — Astra ya los pinta
   con la paleta que configuraste en el Customizer. Solo estilamos la
   estructura del catálogo (que Astra no controla por sí solo). */

/* Layout del catálogo (grid, columnas, imagen arriba): lo maneja Astra
   con su vista por defecto — no lo tocamos. Solo estilamos la tabla de
   precio que va DENTRO de cada card, eso sí es contenido nuestro. */

/* =========================================================
   TABLA DE PRECIO (dentro de span.price) —
   Precio lista / + IVA / Descuento / Costo neto / Costo con IVA
   ========================================================= */
.svs-precio-tabla {
    width: 100%;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 12px;
    table-layout: fixed;
}
.svs-precio-tabla tr {
    border-bottom: 1px solid #eee;
}
.svs-precio-tabla tr:nth-child(odd) {
    background: #fafafa;
}
.svs-precio-tabla td {
    padding: 3px 8px !important;
    border: none !important;
}
.svs-td-label {
    color: #777;
    text-align: left;
    width: 60%;
}
.svs-td-valor {
    color: var(--svs-oscuro);
    font-weight: 700;
    text-align: right;
    width: 40%;
    white-space: nowrap;
}
.svs-fila-descuento td {
    text-align: center !important;
    padding: 4px 0 !important;
}
.svs-badge-dto {
    display: inline-block;
    background: var(--svs-primario);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
}
.svs-fila-costo-neto {
    background: var(--svs-gris) !important;
    border-top: 2px solid #ddd;
}
.svs-fila-costo-neto .svs-td-label,
.svs-fila-costo-neto .svs-td-valor {
    color: var(--svs-oscuro) !important;
    font-weight: 700;
}
.svs-fila-final {
    background: var(--svs-oscuro) !important;
}
.svs-fila-final .svs-td-label,
.svs-fila-final .svs-td-valor {
    color: #fff !important;
    font-size: 13px;
    padding: 5px 8px !important;
}

/* Dentro de una card del grid (más angosta que una fila completa), la
   tabla ocupa el ancho disponible sin desbordar */
.woocommerce ul.products li.product .svs-precio-tabla {
    font-size: 12px;
}

/* Ficha de producto individual: tabla un poco más grande */
.woocommerce div.product .summary .svs-precio-tabla {
    max-width: 420px;
    font-size: 14px;
}