/* Native controls, scrollbars and Chrome autofill all render LIGHT until the
   document declares its scheme. computed color-scheme was `normal` on a store
   that is entirely INK - which is why checkout autofill paints white boxes. */
:root{ color-scheme: dark; }

/* =========================================================================
   MoshTee - chrome & commerce UX repairs
   Added 2026-08-17 after the first real browser pass over the storefront.

   READ THIS BEFORE EDITING. Every rule here fixes a defect that PASSED every
   server-side check and was only visible in a browser.

   1. BLOOD IS PAINTING EVERY BUTTON ON THE SITE.
      style.css line 180 is machine-generated from TeeSpace's Redux accent dump:
        button,[type="button"],[type="reset"],[type="submit"]{background-color:#A3121F!important}
      That is the hamburger, the search toggle, the cart-drawer close, the
      block-cart quantity steppers and the block-cart remove control - all
      rendered as red blocks. brand.md: blood is a scalpel, ~5% of a surface,
      never a background band.
      sections.css ALREADY sets these to transparent, but without !important, so
      an element-level !important beat it. A class-level !important wins, which
      is why the rules below carry one. style.css itself is NOT edited: it is
      regenerated on every theme update and hand edits are lost.

   2. THE CART DRAWER NEVER WENT DARK.
      inc/chrome.php painted it with `.mt-cart .cart-side-widget` (0,2,0) while
      the parent sets
        .haru-cart .haru-cart-wrap.cart-side .cart-side-widget{background-color:#fff}
      at (0,3,0). The background lost and the text colour won, so the panel
      rendered bone-on-white - the header, the product title and the subtotal
      label were literally invisible. Every drawer rule below is written at
      (0,4,0) or higher for that reason. DO NOT "simplify" these selectors.

   3. THE BLOCK CART WAS BLACK TEXT ON A BLACK PAGE.
      Measured, not guessed: .wc-block-components-product-name,
      .wc-block-components-product-details__name and
      .wc-block-components-totals-item__label/value all computed to rgb(0,0,0)
      on the INK background. 1.0:1. The cart page was unreadable one step
      before checkout.

   4. ONE CLOSE AFFORDANCE, NOT TWO.
      The drawer showed an X in its header AND a second, differently drawn X on
      the line item (TeeSpace renders it from the haruicons font). Two X glyphs
      in one panel is ambiguous - one closes the panel, one deletes your order.
      The line item now reads "Remove".
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Chrome buttons: give back the transparency sections.css asked for.
   ------------------------------------------------------------------------- */
.mt-hamburger,
.mt-icon-btn,
.mt-search-toggle,
.mt-cart .haru-cart-wrap.cart-side .cart-side-close,
.wc-block-components-quantity-selector__button,
.wc-block-cart-item__remove-link,
.wc-block-components-panel__button {
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mt-hamburger:hover,
.mt-icon-btn:hover,
.mt-search-toggle:hover,
.wc-block-components-quantity-selector__button:hover,
.wc-block-cart-item__remove-link:hover,
.wc-block-components-panel__button:hover {
  background-color: transparent !important;
}

.mt-hamburger span { background: var(--mt-bone) !important; }

/* The search toggle is a <button> and the cart is an <a>. They sit next to each
   other, so they have to be the same object. */
.mt-header-icons .mt-icon-btn { color: var(--mt-bone) !important; }
.mt-header-icons .mt-icon-btn:hover { color: var(--mt-blood) !important; }

/* -------------------------------------------------------------------------
   2. Cart drawer. Selectors are deliberately (0,4,0)+ - see the header note.
   ------------------------------------------------------------------------- */
.mt-cart .haru-cart-wrap.cart-side .cart-side-widget {
  background-color: var(--mt-ink) !important;
  color: var(--mt-bone);
  width: min(380px, 88vw);
  border-left: 1px solid var(--mt-hairline);
}

.mt-cart .haru-cart-wrap.cart-side .cart-side-widget.in {
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
}

.mt-cart .cart-mask-overlay { background: rgba(5, 5, 5, .72); }

/* Header row */
.mt-cart .haru-cart-wrap.cart-side .cart-side-header {
  color: var(--mt-bone);
  border-bottom: 1px solid var(--mt-hairline);
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mt-cart .haru-cart-wrap.cart-side .cart-side-close {
  color: var(--mt-bone) !important;
  border: 0;
  padding: 6px;
  margin: -6px -6px -6px auto;
  line-height: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.mt-cart .haru-cart-wrap.cart-side .cart-side-close:hover { color: var(--mt-blood) !important; }
.mt-cart .haru-cart-wrap.cart-side .cart-side-close:focus-visible {
  outline: 2px solid var(--mt-bone);
  outline-offset: 2px;
}

/* Body */
.mt-cart .haru-cart-wrap.cart-side .widget_shopping_cart_content { padding: 0; }
.mt-cart .haru-cart-wrap.cart-side .cart_list {
  padding: 6px 18px;
  overscroll-behavior: contain;
}
.mt-cart .haru-cart-wrap.cart-side .cart_list li.woocommerce-mini-cart-item {
  border-top: 1px solid var(--mt-hairline) !important;
  padding: 16px 0;
  gap: 14px;
}
.mt-cart .haru-cart-wrap.cart-side .cart_list li.woocommerce-mini-cart-item:first-child {
  border-top: 0 !important;
}

/* TeeSpace prints the product title TWICE - once as the alt-text sibling of the
   thumbnail inside .cart-left, once properly in .cart-right. Clip the first. */
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-left {
  flex: 0 0 64px;
  width: 64px;
  font-size: 0;
}
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-left img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: var(--mt-ink-raised);
}

.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-right a:not(.remove) {
  color: var(--mt-bone) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-right a:not(.remove):hover {
  color: var(--mt-blood) !important;
}
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 6px;
  color: var(--mt-steel-text) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .quantity .amount,
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .quantity bdi,
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .quantity .woocommerce-Price-currencySymbol {
  color: var(--mt-bone) !important;
}

/* ONE X. The line item stops being a second close button and says what it does.
   TeeSpace draws its glyph from the haruicons font in ::before, so the font has
   to be reset or the word renders as a symbol. */
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-right a.remove {
  position: static !important;
  display: inline-block;
  margin-top: 8px;
  color: var(--mt-steel-text) !important;
  font-size: 0 !important;
  line-height: 1;
  text-decoration: none;
  touch-action: manipulation;
}
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-right a.remove:before {
  content: "Remove" !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit !important;
}
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-right a.remove:hover,
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart-item .cart-right a.remove:hover:before {
  color: var(--mt-blood) !important;
}

/* Empty state */
.mt-cart .haru-cart-wrap.cart-side .woocommerce-mini-cart__empty-message,
.mt-cart .haru-cart-wrap.cart-side li.empty {
  color: var(--mt-steel-text) !important;
  padding: 40px 18px;
  text-align: center;
}

/* Footer: subtotal + actions */
.mt-cart .haru-cart-wrap.cart-side .cart-total {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--mt-hairline) !important;
  background: var(--mt-ink);
}
.mt-cart .haru-cart-wrap.cart-side .cart-total .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
  color: var(--mt-bone);
}
.mt-cart .haru-cart-wrap.cart-side .cart-total .total strong {
  color: var(--mt-steel-text) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mt-cart .haru-cart-wrap.cart-side .cart-total .total .amount,
.mt-cart .haru-cart-wrap.cart-side .cart-total .total .amount bdi,
.mt-cart .haru-cart-wrap.cart-side .cart-total .total .amount .woocommerce-Price-currencySymbol {
  float: none !important;
  color: var(--mt-bone) !important;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Two actions, two weights. Checkout is the job; View cart is the escape hatch.
   Both were identical blood blocks, which is a hierarchy with no hierarchy. */
.mt-cart .haru-cart-wrap.cart-side .cart-total .buttons .button {
  display: block;
  width: 100%;
  padding: 14px 18px !important;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-color: transparent !important;
  border: 1px solid var(--mt-hairline-strong) !important;
  color: var(--mt-bone) !important;
}
.mt-cart .haru-cart-wrap.cart-side .cart-total .buttons .button:hover {
  border-color: var(--mt-bone) !important;
  background-color: transparent !important;
}
.mt-cart .haru-cart-wrap.cart-side .cart-total .buttons .button.checkout {
  margin-top: 10px !important;
  background-color: var(--mt-blood) !important;
  border-color: var(--mt-blood) !important;
  color: var(--mt-bone) !important;
}
.mt-cart .haru-cart-wrap.cart-side .cart-total .buttons .button.checkout:hover {
  background-color: var(--mt-blood-hover) !important;
  border-color: var(--mt-blood-hover) !important;
}

/* The free-shipping bar plugin prints an empty wrap into the mini-cart on every
   render. Nothing to show until mt-bundle-offer.php exists - do not leave a
   16px hole where a promise will eventually go. */
.wpcfb-wrap.wpcfb-wrap-empty { display: none !important; }

/* -------------------------------------------------------------------------
   3. WooCommerce block cart - readable on INK.
   ------------------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-cart-item__wrap a,
.wp-block-woocommerce-cart .wc-block-components-product-details__name,
.wp-block-woocommerce-cart .wc-block-components-product-details__value,
.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-cart th,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  color: var(--mt-bone) !important;
}

.wp-block-woocommerce-cart .wc-block-components-product-details__name,
.wp-block-woocommerce-cart .wc-block-components-product-metadata {
  color: var(--mt-steel-text) !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__label {
  font-weight: 700;
  letter-spacing: .04em;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--mt-hairline-strong) !important;
  border-radius: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
  color: var(--mt-bone) !important;
  border: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  color: var(--mt-blood) !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  color: var(--mt-steel-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: var(--mt-blood) !important;
}

/* Proceed to Checkout is the one place blood belongs on this page. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  background-color: var(--mt-blood) !important;
  border-radius: 0 !important;
  color: var(--mt-bone) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}

/* -------------------------------------------------------------------------
   4. Blood as text. tokens.css already repaired `.amount`, but the generated
      sheet colours the inner <bdi> and the currency symbol separately, so the
      price still rendered at 2.51:1. Finish the job.
   ------------------------------------------------------------------------- */
body.dark-mode .price .amount bdi,
body.dark-mode .price .amount .woocommerce-Price-currencySymbol,
body.dark-mode .product-item .price bdi,
body.dark-mode ins .amount bdi,
body.dark-mode ins .amount .woocommerce-Price-currencySymbol {
  color: var(--mt-bone) !important;
}

/* del/strikethrough stays quiet but must clear 4.5:1 */
body.dark-mode del,
body.dark-mode del .amount,
body.dark-mode del bdi,
body.dark-mode del .woocommerce-Price-currencySymbol {
  color: var(--mt-steel-text) !important;
}

/* -------------------------------------------------------------------------
   5. Focus + touch. Nothing in the chrome had a visible focus ring except
      .mt-icon-btn, so the drawer and the mobile nav were keyboard dead ends.
   ------------------------------------------------------------------------- */
.mt-hamburger:focus-visible,
.mt-mobile-nav a:focus-visible,
.mt-search-panel input:focus-visible,
.mt-cart .haru-cart-wrap.cart-side a:focus-visible,
.wp-block-woocommerce-cart a:focus-visible,
.wp-block-woocommerce-cart button:focus-visible {
  outline: 2px solid var(--mt-bone);
  outline-offset: 2px;
}

.mt-hamburger,
.mt-icon-btn,
.mt-cart .haru-cart-wrap.cart-side .button,
.wp-block-woocommerce-cart button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(237, 232, 223, .12);
}

/* =========================================================================
   MoshTee - product page chrome, part 2 (2026-08-17)

   Same root cause as chrome-ux.css section 1: the generated style.css paints
   EVERY <button> blood red with !important, so three more controls on the
   product page were rendering as red blocks that read like primary CTAs.

   Audited live, not guessed - every <button>/<a> on the PDP whose computed
   background was rgb(163,18,31):

     .single_add_to_cart_button   KEEP RED - it is the primary action
     .button.checkout (drawer)    KEEP RED - it is the primary action
     newsletter "Join"            KEEP RED - it is the primary action
     .mt-size-guide-link          FIX - a helper link outshouting Add to cart
     .slick-prev / .slick-next    FIX - red discs sitting on the product photo
     .mt-modal__close             FIX - the THIRD close-X style on the site

   That last one is the rest of Pavel's "different X": the drawer closed with a
   stroked SVG, the cart line item closed with a haruicons glyph, and the size
   guide closed with a literal x character on a red block. One close affordance,
   drawn one way.
   ========================================================================= */

/* Size guide is a helper, not a call to action. It sat beside the SIZE label as
   a filled blood button, which made the most important control on the page -
   the size swatches - the second loudest thing in its own row. */
.mt-size-guide-link {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  color: var(--mt-steel-text) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
}
.mt-size-guide-link:hover { color: var(--mt-bone) !important; }
.mt-size-guide-link:focus-visible {
  outline: 2px solid var(--mt-bone);
  outline-offset: 3px;
}

/* Gallery arrows: they sit ON the product photograph, which is the one thing on
   the page that has to sell. Bone chevron, ink scrim, no disc. */
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
  background-color: rgba(10, 10, 10, .55) !important;
  border: 1px solid var(--mt-hairline) !important;
  border-radius: 0 !important;
  color: var(--mt-bone) !important;
}
.slick-prev.slick-arrow:hover,
.slick-next.slick-arrow:hover {
  background-color: rgba(10, 10, 10, .85) !important;
  border-color: var(--mt-hairline-strong) !important;
}
.slick-arrow.slick-disabled { opacity: .35; }

/* The third X. Matches the cart drawer's close: no fill, bone glyph, blood on
   hover, visible focus ring. */
.mt-modal__close {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--mt-bone) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 6px !important;
  height: auto !important;
  width: auto !important;
  touch-action: manipulation;
}
.mt-modal__close:hover { color: var(--mt-blood) !important; }
.mt-modal__close:focus-visible {
  outline: 2px solid var(--mt-bone);
  outline-offset: 2px;
}

/* The Black swatch is #0A0A0A on a #0A0A0A page - it reads as an empty ring
   rather than a colour. Give the swatch row a raised well so every colourway,
   including black, is a visible object. */
.cfvsw-swatches-container .cfvsw-swatches-option[data-slug="Black"] {
  box-shadow: inset 0 0 0 1px var(--mt-hairline-strong);
}

/* =========================================================================
   MoshTee - vertical rhythm on the commerce pages (2026-08-17)

   Measured on /cart/ at 390x844: `.haru-page-title` is 170px tall with
   `padding:50px 0 60px` and `margin-bottom:70px`. That is **240px between the
   header and the first cart row**, spent on the single word "Cart" - 28% of the
   first screen on a phone, on the page directly before checkout. The same band
   sits on /shop/ and /checkout/.

   The band is kept (it carries the H1 and the schema wrapper) and tightened.
   ========================================================================= */

.haru-page-title {
  /* 2026-08-18: bottom padding + margin halved again. The 08-17 pass took the
     band from 240px to ~70px; measured on /checkout/ that still left 87px
     between a one-word H1 and the first field on the page before payment. */
  padding: 30px 0 14px !important;
  margin-bottom: 14px !important;
}

@media screen and (max-width: 767px) {
  .haru-page-title {
    padding: 18px 0 10px !important;
    margin-bottom: 10px !important;
  }
}

/* Headings that wrap to a lonely last word - the founder eyebrow breaks after
   "MAKES" and drops "THESE" onto its own line at .28em tracking. */
.haru-page-title h1,
.mt-founder h2,
.mt-founder .mt-eyebrow,
.mt-section-title,
.mt-hero h1 {
  text-wrap: balance;
}

/* The gap between the trust block and the accordion stack on the PDP was a
   ~60px hole with nothing in it. */
.mt-trust-badges { margin-bottom: 28px !important; }

/* Cart line items carried stray part-width rules either side of the quantity
   stepper - leftovers from the theme's table styling inside a block cart. */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity,
.wp-block-woocommerce-cart .wc-block-cart-item__total {
  border: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items__row td,
.wp-block-woocommerce-cart .wc-block-cart-items__row th {
  border-color: var(--mt-hairline) !important;
}

/* The founder eyebrow is .mt-founder__eyebrow (BEM), not .mt-founder .mt-eyebrow -
   the first attempt at this rule missed it and the orphan word stayed. It sets
   .28em tracking on all-caps, so it wraps early and drops one word alone. */
.mt-founder__eyebrow,
.mt-founder__title,
.trust-badge__title{ text-wrap: balance; }

/* =========================================================================
   Logo, 2026-08-17. The Fiverr lockup landed and replaced the letter-spaced
   MOSHTEE <span> placeholder in header.php and footer.php.

   assets/moshtee-logo.svg is the full lockup (horned M + wordmark) in BONE,
   cropped to the artwork bbox measured off the real paths with getBBox():
   550.6 815.6 2898.8 768.8 - aspect 3.771:1. Height drives the size, width is
   auto, so the ratio can never be squashed by a container.

   The placeholder .mt-logo-word rules in sections.css are now dead; they only
   still apply if the <img> fails to load.
   ========================================================================= */
.mt-logo-img{
  display:block;
  height:40px;
  width:auto;
  max-width:100%;
}
.mt-logo{ line-height:0; }
.mt-logo-img.mt-footer-logo{ height:30px; }
@media screen and (max-width:767px){
  .mt-logo-img{ height:36px; }
  .mt-logo-img.mt-footer-logo{ height:24px; }
}

/* The footer brand column ran the tagline paragraph straight into the
   newsletter heading with no gap - it read as one block of text rather than
   two things. .mt-signup carries no top margin of its own. */
.mt-footer-brand .mt-signup{ margin-top:26px; }
.mt-footer-brand > p{ margin-bottom:0; }

/* =========================================================================
   Block CHECKOUT order summary, 2026-08-20. Reported off Pavel's phone the
   morning the ads went live: Subtotal / Delivery / Total were invisible.

   MEASURED, not guessed, in a real WebKit iPhone 15 on /checkout/ with one
   tee in the cart:
     .wc-block-components-totals-item__label   rgb(0,0,0)   on ink -> 1.06:1
     .wc-block-components-totals-item__value   rgb(0,0,0)   on ink -> 1.06:1
     total money span                          #A3121F      on ink -> 2.51:1
     quantity badge number                     #fff on bone         -> 1.22:1

   WHY IT SURVIVED. Section 3 above repaired exactly these classes on
   2026-08-17 but scoped every selector to `.wp-block-woocommerce-cart`. The
   checkout is a DIFFERENT block - `.wp-block-woocommerce-checkout` - and
   renders its own copy of the same order summary, so it got none of it. Cart
   was readable, checkout was not, and nothing on the cart page could show it.

   THE SOURCE is the generated style.css, which declares
     .wc-block-components-totals-item__label{color:#000}
     .wc-block-components-totals-item__value{color:#000}
   at (0,1,0). The block inherits BONE from every one of its ancestors, but an
   INHERITED colour loses to ANY rule that matches the element - the same law
   that made the size chart black on black on 2026-08-19. These selectors are
   (0,2,0) so they win on specificity alone; no !important is needed and none
   is used, except where style.css itself carries one.

   BLOOD ON THE TOTAL IS NOT A DESIGN CHOICE, it is the Redux accent dump
   again: style.css paints .wc-block-components-totals-footer-item-tax-value
   #A3121F !important. tokens.css states the rule this breaks - "blood on ink
   2.51 FAILS EVEN 3:1 -> never a text colour" - and the loop price was taken
   off blood for exactly this reason. The order total is the one number a
   buyer checks before paying, so it goes bone. That rule DOES need
   !important, because the one it beats has one.

   Mobile renders the summary TWICE (collapsed panel at the top, expanded at
   the bottom) and both copies live inside .wp-block-woocommerce-checkout, so
   one scope covers both. The cart scope is repeated on the total because the
   2026-08-17 rules paint the __value wrapper, not the money span inside it,
   which carries its own blood rule and beat inheritance there too.
   ========================================================================= */
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__description,
.wp-block-woocommerce-checkout .wc-block-components-shipping-placeholder__value,
.wp-block-woocommerce-checkout .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-details__name,
.wp-block-woocommerce-checkout .wc-block-components-product-details__value,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price{
  color: var(--mt-bone);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__label{
  font-weight: 700;
  letter-spacing: .04em;
}

/* Secondary type stays steel-text (5.73:1), not bone - the variation line is
   support for the product name, not a peer of it. */
.wp-block-woocommerce-checkout .wc-block-components-product-details__name,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__description{
  color: var(--mt-steel-text);
}

/* The order total. See the blood note above. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item-tax-value,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item-tax-value{
  color: var(--mt-bone) !important;
}

/* Quantity chip on the summary thumbnail. checkout.css fills it with
   `background: currentcolor`, which on this store resolves to BONE, and then
   prints the number in var(--wp--preset--color--base,#fff) - white on bone,
   1.22:1. The chip Pavel can see in the corner of the mockup has always been
   empty. Keep the bone chip, put INK in it: 16.22:1. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity,
.wp-block-woocommerce-cart .wc-block-components-order-summary-item__quantity{
  background: var(--mt-bone) !important;
  border-color: var(--mt-ink) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity span,
.wp-block-woocommerce-cart .wc-block-components-order-summary-item__quantity span{
  color: var(--mt-ink) !important;
}