/* cart.css: the add-to-cart states and the confirmation region of assets/js/cart.js.
   Loaded with cart.js where products can be bought. The button look itself belongs to the shop and book designs. */
[data-add-to-cart].is-loading { cursor: progress; opacity: .8; }
[data-add-to-cart].is-added { background-color: var(--focus); border-color: var(--focus); color: #fff; }

.cart-status {
  position: fixed; inset-block-end: 16px; inset-inline-start: 16px; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  max-width: min(420px, 100vw - 32px); padding: 14px 18px;
  background: var(--paper-light); color: var(--text);
  border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--shadow-raise);
  font-size: var(--t-body); line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard), visibility 0s linear var(--dur-state);
}
.cart-status.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 599px) {
  .js .cart-status { inset-block-end: calc(var(--bar-h) + 12px); }   /* above the phone's menu bar (base.css) */
  @supports selector(:has(a)) {
    .js body:has(.pp-bar.is-on) .cart-status { inset-block-end: calc(var(--bar-h) + 61px + 12px); }   /* and above the book page's buy bar while that one is up */
  }
}
/* the type of the message lives in the icon and the label colour, not in a stripe on the card */
.cart-status-thumb { flex: none; display: block; width: 32px; height: auto; outline: 1px solid var(--rule); outline-offset: -1px; }
.cart-status-text { margin: 0; font-weight: 600; color: var(--ok); }
.cart-status.is-error .cart-status-text { color: var(--red); }
.cart-status-text::before {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-inline-end: 8px; vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--cart-icon) center / contain no-repeat; mask: var(--cart-icon) center / contain no-repeat;
  --cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cart-status.is-error .cart-status-text::before {
  --cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.5v8M10 15.8v.4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cart-status-link {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
  color: var(--link); font-weight: 700;
}