.dt-markup-table {
    margin-top: 20px;
    border: 2px solid #000;
    border-radius: 4px;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%; /* ✅ Cambia max-width por width */
}

.dt-markup-table h4 {
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 8px 12px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
}

.dt-markup-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dt-markup-table th {
    background-color: #EF4023;
    color: #fff;
    text-align: center;
    padding: 6px;
}

.dt-markup-table td {
    font-family: "Proxima Nova", -apple-system, "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: .9em;
    color: #EF4023;
    text-align: center;
    padding: 6px;
    border-top: 1px solid #ddd;
}

.dt-markup-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.dt-markup-table {
    margin: 15px 0 25px 0;
}

/* Fuerza a mostrarse cuando hay variación encontrada */
.single-product .variations_form .woocommerce-variation-add-to-cart{
  gap:.5rem; align-items:center;
}

.woocommerce-variation-price {
    display: none;
}

/* Corrección aspecto de tabla */

/* === HOMS · Estilo original para la tabla de rangos === */

/* 0) Contenedor: sin marco grueso ni radio */
.dt-markup-table{
  margin: 0 0 15px 0;
  border: 0;
  border-radius: 0;
  width: 100%;
  font-family: "Proxima Nova", -apple-system, "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
  overflow: visible;
}

/* 1) Oculta el título negro "Escala de precios por cantidad" (el original no lo muestra) */
.dt-markup-table h4{ display:none !important; }

/* 2) Tabla: sin zebra, bordes finos entre filas */
.dt-markup-table table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.dt-markup-table tr:nth-child(even){ background: transparent; }
.dt-markup-table td,
.dt-markup-table th{
  border-bottom: 1px solid #e6e6e6;
  padding: 10px 12px;
}

/* 3) Encabezado gris claro, texto oscuro, mayúsculas */
.dt-markup-table thead th{
  background: #e6e6e6;
  color: #111;
  font-weight: 700;
  text-transform: uppercase;
}
.dt-markup-table thead th:first-child{ text-align: left; }
.dt-markup-table thead th:last-child{ text-align: right; }

/* 4) Celdas: rojo corporativo, mismo peso que el original */
.dt-markup-table tbody td{
  font-weight: 700;
  color: #EF4023;
  background: #fff;
}
.dt-markup-table tbody td:first-child{ text-align: left; }
.dt-markup-table tbody td:last-child{ text-align: right; }

/* 5) Ajustes de layout junto al botón y aviso negro (no tocamos esos bloques) */
.single-product .variations_form .woocommerce-variation-add-to-cart{ gap:.5rem; align-items:center; }
.woocommerce-variation-price{ display:none; }

/* Alineación como el original */
.dt-markup-table thead th:first-child,
.dt-markup-table tbody td:first-child { text-align: left; }
.dt-markup-table thead th:last-child,
.dt-markup-table tbody td:last-child  { text-align: left; }

.dt-markup-table thead th:last-child,
.dt-markup-table tbody td:last-child { text-align: left; }

/* =========================================================
   ÍCONO SVG: FLECHA BLANCA SOBRE CÍRCULO NEGRO
   ========================================================= */

.dt-best-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
}

.dt-best-icon {
    width: 18px;
    height: 18px;
    display: block;
}