/* Cart reward ladder mount hooks.

   misfit/css/offers.css already carries the whole ladder and the gift rows
   exactly as the approved design draws them. Two of the design's rules live in
   page-scoped files (product-ui.css, landing.css) that the SHOPLINE cart drawer
   and cart page must not load, because those files also restyle the nav and the
   product templates. The declarations below are those same design values,
   scoped so they can only reach this mount. Nothing here is new design. */

/* The earned free-gift rows below are DISPLAY ONLY. They are a statement of
   what the SHOPLINE promotion will add to the order. They are never added to
   the cart, they carry no quantity or remove control, and they sit outside the
   cart's own line items so they cannot touch the subtotal. Every possible row
   is rendered with the `hidden` class and misfit/js/offers.js reveals the ones
   the subtotal has earned, because money cannot be compared reliably in the
   template. */

/* .cart-line, from the design's own cart, scoped to the earned-gift rows. */
.gift-stack .cart-line {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 13px;
  padding: 14px 0;
  align-items: center;
}
.gift-stack .cart-line h3 {
  margin: 0;
  font-size: calc(0.9rem * var(--mm-fs-head, 1));
}
.gift-stack .cart-line p {
  margin: 3px 0;
  font-size: calc(0.78rem * var(--mm-fs-body, 1));
  color: #c5bbc2;
}
.gift-stack .gift-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The gift stack renders in the same element as the ladder rather than inside
   the platform's line list, so it carries the design's cart padding itself. */
.misfit-cart-ladder .gift-stack {
  margin-top: 0;
  padding: 14px 22px 18px;
  border-bottom: 1px solid #ffffff22;
  background: var(--mm-surface-cart-ladder, #1d1936);
  /* Same text colour as the drawer body (.misfit-drawer), so the row heading
     stays readable on the cart page, where the inherited colour is the page's
     dark ink. */
  color: var(--mm-cream, #f3ead5);
}

/* .shipping-note, from the design's cart foot. It sits under the track here, so
   it clears the absolutely positioned node captions. */
.cart-ladder .shipping-note {
  margin: 40px 0 0;
  font-size: calc(0.76rem * var(--mm-fs-body, 1));
  color: #bfb6bd;
  text-align: center;
}
.cart-ladder .shipping-note:empty {
  display: none;
}

/* Thresholds are plain numbers in Theme settings and are formatted for the
   store's currency on load, so reserve the line to stop a reflow. */
.ladder-node [data-offer-amount]:empty::before {
  content: "\2007\2007";
}