/**
 * Rapident - Product Page UI
 * Rediseño visual de la página de producto (variaciones + añadir al carrito).
 * Basado en clases reales inspeccionadas en staging.rapident.co:
 *  - Swatches de variación: plugin de "Variation Swatches" (clases .tawcvs-swatches / .swatch)
 *  - Botón / cantidad: WooCommerce nativo (.single_add_to_cart_button, .quantity.buttons_added)
 *  - Texto de entrega: plugin WPC Estimated Delivery Date (clase .wpced-inner)
 * Todo lo de abajo es únicamente presentación (color, forma, layout) — ninguna regla de
 * negocio (precios, envíos, disponibilidad) se toca aquí.
 */

:root {
    --rapident-ppu-teal: #17c3a2;
    --rapident-ppu-teal-dark: #119d82;
    --rapident-ppu-teal-bg: rgba(23, 195, 162, 0.12);
    --rapident-ppu-disabled-bg: #dfe3e6;
    --rapident-ppu-disabled-color: #8a9098;
    --rapident-ppu-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --rapident-ppu-font-price: 'Comfortaa', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Tipografía forzada: Inter en toda la página de producto ----------
 * Este CSS solo se carga en is_product() (ver rapident_ppu_enqueue_assets),
 * así que el selector universal aquí no afecta al resto del sitio. Se aplica
 * a todo (títulos, precio, descripción, tabs, breadcrumbs, botones, etc.). */
body.single-product,
body.single-product * {
    font-family: var(--rapident-ppu-font) !important;
}

/* ---------- Tipografía forzada: Inter en la página de carrito ---------- */
body.woocommerce-cart,
body.woocommerce-cart * {
    font-family: var(--rapident-ppu-font) !important;
}

/* ---------- Fondo blanco en toda la página de producto ----------
 * El tema (Shoptimizer) trae .col-full en #f8f8f8 y .site en #fbfbfd; ese gris
 * es el que se asomaba detrás de la columna del resumen. Se listan los
 * contenedores de layout uno por uno en vez de usar un selector universal,
 * para NO pisar los bloques que sí deben tener color propio: el banner teal
 * .below-content y el .site-footer gris (verificado en vivo: ambos conservan
 * su fondo con estas reglas, porque traen background propio).
 * Scoped a body.single-product: este CSS también carga en tienda/categorías
 * y carrito, y ahí no se pidió cambiar el fondo. */
body.single-product .site,
body.single-product .col-full,
body.single-product .site-content,
body.single-product .content-area,
body.single-product .site-main,
body.single-product div.product,
body.single-product .product-details-wrapper,
body.single-product .summary {
    background-color: #fff !important;
}

/* ---------- Breadcrumb (Inicio / Categoría / Producto) ----------
 * El tema lo trae centrado y con fondo gris (rgba(0,0,0,.05)). Se pide
 * alineado a la izquierda y con fondo blanco.
 * Scoped a body.single-product a propósito: el CSS ahora también carga en
 * tienda/categorías (is_woocommerce()) y no se pidió tocar su breadcrumb. */
body.single-product .woocommerce-breadcrumb {
    background-color: #fff !important;
    text-align: left !important;
}

/* ---------- Sidebar "Categorías" / "Etiquetas" (tienda y archivos) ----------
 * Widget nativo de WooCommerce (#secondary > .widget_product_categories /
 * widget de nube de etiquetas). El tema lo trae con la fuente sans-serif
 * por defecto; se pide Inter para que combine con el resto del rediseño.
 * Scoped a body.woocommerce: desde v1.5.2 este CSS carga en TODO el frontend
 * (por el footer global), así que sin este prefijo la fuente del sidebar
 * cambiaría también en blog y páginas normales, que no es lo que se pidió. */
body.woocommerce #secondary,
body.woocommerce #secondary * {
    font-family: var(--rapident-ppu-font) !important;
}

/* ---------- Footer con fondo blanco (todo el sitio) ----------
 * El tema trae .site-footer en #e8e8e5. Va SIN scope de body a propósito: el
 * footer es el mismo en todas las páginas y se pidió blanco en todas.
 * No se toca .below-content (el banner teal justo encima), que conserva su
 * color propio. */
.site-footer {
    background-color: #fff !important;
}

/* ---------- Precio con sufijo "COP" ----------
 * El markup real es <p class="price"><span class="woocommerce-Price-amount">…
 * Para producto VARIABLE, al elegir variación WooCommerce reemplaza el precio
 * dentro de .woocommerce-variation-price, por eso van los dos selectores.
 * El "COP" se pinta con ::after (no se toca el HTML ni el formato de moneda de
 * WooCommerce, que sigue mandando en el símbolo y los separadores). */
/* Aire alrededor del precio: el tema lo deja pegado al título (gap 0) y a
 * 18px del formulario de variaciones. El diseño lo quiere claramente separado
 * de ambos, así que se iguala arriba y abajo. El margin-top del form.cart se
 * anula para que no se sume al margin-bottom del precio (no colapsan porque
 * el form es flex). */
body.single-product .summary p.price {
    margin-top: 26px !important;
    margin-bottom: 26px !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
}

body.single-product .summary form.cart {
    margin-top: 0 !important;
}

/* El tema deja el precio en 18px/700 (pequeño y muy grueso). El diseño lo pide
 * grande y de trazo más ligero: 28px con peso 600.
 * Tipografía Comfortaa (no Inter): hay que declararla explícitamente porque la
 * regla de arriba fuerza Inter en `body.single-product *` con !important — esta
 * gana por especificidad, no por orden. El "COP" del ::after la hereda. */
body.single-product .summary p.price,
body.single-product .summary p.price .woocommerce-Price-amount,
body.single-product .summary p.price .woocommerce-Price-amount *,
body.single-product .woocommerce-variation-price .woocommerce-Price-amount,
body.single-product .woocommerce-variation-price .woocommerce-Price-amount * {
    font-family: var(--rapident-ppu-font-price) !important;
}

body.single-product .summary p.price .woocommerce-Price-amount,
body.single-product .woocommerce-variation-price .woocommerce-Price-amount {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
}

body.single-product .summary p.price .woocommerce-Price-amount::after,
body.single-product .woocommerce-variation-price .woocommerce-Price-amount::after {
    content: "COP";
    margin-left: 8px;
    font-weight: 400;
    color: #8A8F98;
}

/* ---------- Fila de variación: label a la izquierda, swatches al lado ----------
 * El tema pone th.label y td.value en `display:list-item` (uno debajo del otro).
 * Se convierte la tabla en bloques y el <tr> en flex para que "Presentación"
 * quede en la MISMA fila que los swatches, como en el diseño.
 * La tabla también trae fondo rgba(0,0,0,.05) del tema — se limpia. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce div.product form.cart table.variations tr {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 10px 0 !important;
}

.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

.woocommerce div.product form.cart table.variations th.label {
    flex: 0 0 auto !important;
}

.woocommerce div.product form.cart table.variations th.label label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin: 0 !important;
}

.woocommerce div.product form.cart table.variations td.value {
    flex: 1 1 auto !important;
}

/* ---------- Swatches de variación (Tipo / Presentación) ----------
 * OJO con la especificidad: el plugin de swatches trae reglas con !important
 * que incluyen la clase de forma (.swatch-shape-circle, que impone
 * border-radius:50% → elipses en etiquetas largas) y el teal fuerte
 * rgba(64,225,171,.78) en .selected. Verificado en vivo: un selector con
 * `.swatch-item-wrapper .swatch` NO les gana ni con !important; hay que
 * repetir .swatch-shape-circle y anclar en html/body para superarlas. */
.woocommerce div.product .tawcvs-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.woocommerce div.product .tawcvs-swatches .swatch-item-wrapper {
    margin: 0 !important;
}

html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch,
html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch.swatch-shape-circle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent !important;
    background-color: #F1F2F4 !important;
    color: #1A1A1A !important;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px;
    line-height: 1.2;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch .text {
    color: inherit !important;
}

/* Anillo exterior del plugin: al seleccionar, el swatch dibuja un ::before con
 * `border:1px solid #674399` y `border-radius:50%` — se veía como una elipse
 * morada rodeando la pill (verificado en vivo, no es un outline del navegador
 * ni un box-shadow). Se elimina para dejar solo el borde teal. */
html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch::before,
html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch.selected::before {
    display: none !important;
    content: none !important;
}

html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch.swatch-shape-circle:hover {
    border-color: var(--rapident-ppu-teal) !important;
    background-color: #EAFBF5 !important;
}

html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch.selected,
html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch.swatch-shape-circle.selected,
html body.single-product div.product form.cart .tawcvs-swatches .swatch-item-wrapper div.swatch.swatch-shape-circle.selected .text {
    background-color: #EAFBF5 !important;
    border-color: var(--rapident-ppu-teal) !important;
    color: #1A1A1A !important;
}

/* ---------- Contenedor del formulario: sin caja gris del tema ----------
 * El tema (Shoptimizer) trae form.cart con fondo rgba(0,0,0,.05) y
 * padding:5px por defecto (la "caja gris" alrededor de cantidad+botón).
 * La quitamos en escritorio; el layout en fila se arma abajo. */
.woocommerce div.product form.cart {
    background-color: #fff !important;
    padding: 0 !important;
}

/* ---------- Fila cantidad + botón (antes apilados, ahora en línea) ----------
 * Producto VARIABLE (con swatches): el layout en fila ya lo arma
 * WooCommerce dentro de .woocommerce-variation-add-to-cart (contiene
 * únicamente cantidad + botón, aislado de la tabla de variaciones). */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* Producto SIMPLE (sin variaciones): aquí cantidad y botón son hijos
 * directos de form.cart, así que el propio form.cart es la fila. Se
 * excluye .variations_form para no afectar el caso de arriba. Cualquier
 * otro contenido inyectado dentro del form (p. ej. el widget de
 * descuento por cantidad) se fuerza a su propia línea completa con
 * flex-basis:100% en vez de competir por espacio en la fila. */
.woocommerce div.product form.cart:not(.variations_form) {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.woocommerce div.product form.cart:not(.variations_form) > *:not(.quantity):not(.single_add_to_cart_button) {
    flex-basis: 100%;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity.buttons_added,
.woocommerce div.product form.cart .quantity.buttons_added {
    float: none;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

/* ---------- Botón "Añadir al carrito" ---------- */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.button {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none;
    border-radius: 8px !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--rapident-ppu-teal) !important;
    border-color: var(--rapident-ppu-teal) !important;
    box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button.button::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-mask: url('../icons/add-cart.svg') no-repeat center / contain;
    mask: url('../icons/add-cart.svg') no-repeat center / contain;
    flex-shrink: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button.button:hover:not(.disabled) {
    background-color: var(--rapident-ppu-teal-dark) !important;
    border-color: var(--rapident-ppu-teal-dark) !important;
}

/* Estado deshabilitado (sin variación elegida): gris neutro, no rojo/salmón del tema */
.woocommerce div.product form.cart .single_add_to_cart_button.button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.button.wc-variation-selection-needed {
    background-color: var(--rapident-ppu-disabled-bg) !important;
    border-color: var(--rapident-ppu-disabled-bg) !important;
    color: var(--rapident-ppu-disabled-color) !important;
    cursor: not-allowed;
}

/* ---------- Botón "Añadir al carrito" / "Seleccionar opciones" en grillas
 * (tienda, categorías, etiquetas) ----------
 * Mismo diseño que el botón de la página de producto: fondo teal, esquinas
 * redondeadas e ícono de carrito blanco. Cubre ambos casos de WooCommerce:
 * product_type_simple (agrega directo, ajax) y product_type_variable
 * (lleva a la página del producto para elegir variación). El tema aplica
 * altura/line-height fijos (40px) e inline-block; se cambia a inline-flex
 * para poder centrar ícono + texto sin pelear con esas reglas. */
.woocommerce ul.products li.product a.add_to_cart_button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px !important;
    background-color: var(--rapident-ppu-teal) !important;
    border-color: var(--rapident-ppu-teal) !important;
    color: #fff !important;
    box-shadow: none;
}

.woocommerce ul.products li.product a.add_to_cart_button.button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    -webkit-mask: url('../icons/add-cart.svg') no-repeat center / contain;
    mask: url('../icons/add-cart.svg') no-repeat center / contain;
    flex-shrink: 0;
}

.woocommerce ul.products li.product a.add_to_cart_button.button:hover {
    background-color: var(--rapident-ppu-teal-dark) !important;
    border-color: var(--rapident-ppu-teal-dark) !important;
    color: #fff !important;
}

/* ---------- Botón "Ver carrito" (link que WooCommerce inyecta tras añadir) ----------
 * Es `a.added_to_cart.wc-forward`, insertado por AJAX después del botón, así que
 * no existe en el HTML inicial. Se le fuerza Inter porque las reglas de
 * tipografía de arriba están scoped a body.single-product / #secondary y este
 * botón aparece también en las grillas de tienda y categorías. */
.woocommerce a.added_to_cart,
.woocommerce a.added_to_cart.wc-forward,
a.added_to_cart.wc-forward {
    font-family: var(--rapident-ppu-font) !important;
}

/* ---------- Estado "Añadido" (2 segundos tras añadir al carrito) ----------
 * La clase la pone/quita rapident-add-to-cart-feedback.js. Se usa teal oscuro
 * para que se note el cambio, y se reemplaza el ícono de carrito por un check
 * (dibujado con borders rotados — sin archivo extra ni petición de red). */
.woocommerce ul.products li.product a.add_to_cart_button.button.rapident-btn-added,
.woocommerce div.product form.cart .single_add_to_cart_button.button.rapident-btn-added,
a.add_to_cart_button.button.rapident-btn-added,
button.rapident-btn-added {
    background-color: var(--rapident-ppu-teal-dark) !important;
    border-color: var(--rapident-ppu-teal-dark) !important;
    color: #fff !important;
}

.woocommerce ul.products li.product a.add_to_cart_button.button.rapident-btn-added::before,
.woocommerce div.product form.cart .single_add_to_cart_button.button.rapident-btn-added::before {
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    border-radius: 1px;
}

/* ---------- Texto "Tiempo estimado de entrega" (plugin WPC Estimated Delivery Date) ---------- */
.woocommerce div.product .summary .wpced.wpced-product {
    margin-top: 14px;
}

.woocommerce div.product .summary .wpced.wpced-product .wpced-inner {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Ocultar tabs nativas (Descripción / Información adicional) ----------
 * Respaldo por CSS del remove_action en PHP (rapident_ppu_remove_product_tabs):
 * si algo re-engancha las tabs con otra prioridad, esto las sigue tapando. */
body.single-product .woocommerce-tabs {
    display: none !important;
}

/* ---------- Acordeón "Características" (descripción corta del producto) ----------
 * Reemplaza visualmente a las tabs ocultas arriba. El JS
 * (rapident-product-page-ui.js) mueve este bloque justo después del texto de
 * "Tiempo estimado de entrega" sin importar en qué orden lo insertó PHP.
 * Cerrado por defecto: el contenido trae el atributo [hidden] desde el PHP. */
.rapident-ppu-features {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.rapident-ppu-features-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: var(--rapident-ppu-font);
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    text-align: left;
}

.rapident-ppu-features-chevron {
    width: 8px;
    height: 8px;
    border: solid #6b7280;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform .15s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.rapident-ppu-features-toggle[aria-expanded="true"] .rapident-ppu-features-chevron {
    transform: rotate(-135deg);
}

.rapident-ppu-features-content {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.rapident-ppu-features-content[hidden] {
    display: none;
}

.rapident-ppu-features-content p:last-child {
    margin-bottom: 0;
}

/* =====================================================================
 * CARRITO — estilos visuales
 * ===================================================================== */

/* ---------- Botón "Siguiente" (proceder al pago) ----------
 * El tema trae el botón con border-radius bajo (4px) y fondo salmón
 * (#FF5C68). Solo se redondea el borde aquí; el color ya coincide con
 * el diseño. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    border-radius: 999px !important;
}

/* ---------- Botón "Actualizar carrito" ----------
 * Dos estados distintos, a propósito:
 *  - DESHABILITADO (mientras no se cambia ninguna cantidad): se deja tal cual
 *    lo trae el tema, gris. Pedido explícito del usuario.
 *  - ACTIVO: salmón #ff5c68. El tema lo pone en negro (#111) con el borde ya
 *    en ese salmón; aquí se lleva el mismo color al fondo.
 * El :not(:disabled) es lo que mantiene los dos estados separados — sin él,
 * el botón se vería salmón también cuando no se puede pulsar. */
body.woocommerce-cart button[name="update_cart"]:not(:disabled),
body.woocommerce-cart input[name="update_cart"]:not(:disabled) {
    background-color: #ff5c68 !important;
    border-color: #ff5c68 !important;
    color: #fff !important;
}

body.woocommerce-cart button[name="update_cart"]:not(:disabled):hover,
body.woocommerce-cart input[name="update_cart"]:not(:disabled):hover {
    background-color: #f04654 !important;
    border-color: #f04654 !important;
}

/* ---------- Tabla de totales: sin líneas separadoras ----------
 * Decisión del usuario (confirmada): las filas van sin bordes, como en el
 * diseño de referencia. Se declara explícito y no como efecto colateral del
 * border-collapse de abajo, para que no reaparezcan si el tema cambia.
 * border-collapse:separate es necesario para que border-radius funcione en
 * celdas de tabla (con "collapse" el navegador lo ignora); border-spacing
 * vertical de 4px da el aire entre filas. */
.woocommerce-cart .cart_totals .shop_table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    border: none !important;
}

.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td,
.woocommerce-cart .cart_totals .shop_table tr {
    border: none !important;
}

/* La fila de ahorro real es tr.cart-total-savings (la imprime y colorea
 * bar-free-rapident.php con CSS inline y !important). .cart-discount es la
 * fila de CUPÓN de WooCommerce — se incluye también para que ambas compartan
 * el mismo look de pill. Los selectores llevan body.woocommerce-cart y
 * table.shop_table a propósito: el CSS de bar-free-rapident va inline en el
 * <head> con !important, así que hace falta igualar o superar su
 * especificidad para que el border-radius no se pierda. */
body.woocommerce-cart .cart_totals table.shop_table tr.cart-total-savings th,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-total-savings td,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount th,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount td {
    background-color: #e3fbf3 !important;
    color: #0d6e5c !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body.woocommerce-cart .cart_totals table.shop_table tr.cart-total-savings th,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount th {
    border-radius: 24px 0 0 24px !important;
}

body.woocommerce-cart .cart_totals table.shop_table tr.cart-total-savings td,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount td {
    border-radius: 0 24px 24px 0 !important;
}

body.woocommerce-cart .cart_totals table.shop_table tr.cart-total-savings td .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount td .woocommerce-Price-amount {
    color: #0d6e5c !important;
    font-weight: 600;
}

/* ---------- Subtotal y Total: color y peso ----------
 * El tema los trae en negrita fuerte (700+) y con su gris por defecto.
 * Se piden en #1A1A1A y con menos peso. Se separa Subtotal (500, texto
 * normal) de Total (600, sigue destacando pero sin ser tan grueso).
 * Los selectores incluyen body.woocommerce-cart + table.shop_table para
 * ganarle al CSS inline de bar-free-rapident.php, igual que arriba. */
body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td bdi {
    color: #1A1A1A !important;
    font-weight: 500 !important;
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td strong,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td bdi {
    color: #1A1A1A !important;
    font-weight: 600 !important;
}

/* ---------- "COP" junto al total ----------
 * Se agrega antes del importe de la fila "Total" únicamente.
 * El marcador bdi contiene: <span class="woocommerce-Price-currencySymbol">$</span>XXXXX
 * font-weight propio (400) para que no herede el 600 de la regla de arriba. */
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td bdi::before {
    content: "COP";
    font-size: 16px;
    font-weight: 400 !important;
    color: #6b7280;
    margin-right: 8px;
    vertical-align: middle;
}