body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-next-tier th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-next-tier td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-preorder-exclusion th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-preorder-exclusion td {
  color: var(--sst-checkout-muted, #68635f);
  font-size: 13px;
  line-height: 1.35;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-next-tier td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-preorder-exclusion td {
  text-align: right;
}

body.woocommerce-checkout .sst-bulk-discount-next-tier__value {
  color: var(--sst-checkout-ink, #171717);
  font-weight: 650;
  white-space: nowrap;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-discount.coupon-sst-bulk-auto th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-discount.coupon-sst-bulk-auto td {
  color: var(--sst-checkout-ink, #171717);
}

/* Cart page totals table (classic [woocommerce_cart]): the same muted
   next-tier row as the checkout review table. Both tables are themed per row,
   so the row keeps WooCommerce's <tr><th><td> shape and only borrows colour. */
body.woocommerce-cart .cart_totals tr.sst-bulk-discount-next-tier th,
body.woocommerce-cart .cart_totals tr.sst-bulk-discount-next-tier td {
  color: var(--sst-checkout-muted, #68635f);
  font-size: 13px;
  line-height: 1.35;
}

body.woocommerce-cart .cart_totals tr.sst-bulk-discount-next-tier td {
  text-align: right;
}

body.woocommerce-cart .sst-bulk-discount-next-tier__value {
  color: var(--sst-checkout-ink, #171717);
  font-weight: 650;
  white-space: nowrap;
}

/* The "reached" copy is a sentence, not a price, so it may wrap: nowrap on a
   long string would push the totals column sideways on a narrow screen. The
   bar itself is unchanged - same track, same #17643a fill, just full. */
body.woocommerce-checkout .sst-bulk-discount-next-tier--reached .sst-bulk-discount-next-tier__value,
body.woocommerce-cart .sst-bulk-discount-next-tier--reached .sst-bulk-discount-next-tier__value {
  white-space: normal;
}

/* Progress meter — same light palette as the quick-order bulk gauge
   (quick-order-critical.css: track #e7eee9, fill #17643a, 5px, radius 999px).
   Block-level and full width so it sits under the value inside the cell. */
.sst-bulk-discount-next-tier__meter {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eee9;
}

.sst-bulk-discount-next-tier__meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #17643a;
  transition: width .18s ease;
}

/* Themes style the spans inside these cells; keep the meter a block bar.
   The fill's own width is inline (server-rendered), so it is never set here. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-next-tier td .sst-bulk-discount-next-tier__meter,
body.woocommerce-cart .cart_totals tr.sst-bulk-discount-next-tier td .sst-bulk-discount-next-tier__meter {
  display: block;
  width: 100%;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.sst-bulk-discount-next-tier td .sst-bulk-discount-next-tier__meter > span,
body.woocommerce-cart .cart_totals tr.sst-bulk-discount-next-tier td .sst-bulk-discount-next-tier__meter > span {
  display: block;
  height: 100%;
}

.sst-bulk-discount-preorder-note {
  margin: 8px 0 12px;
  padding: 9px 10px;
  border: 1px solid #e6ded6;
  background: #fffaf4;
  color: #6c4c2d;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}