/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */
/* ─── Cart badge ──────────────────────────────────────────────────────────────
   Numeric indicator on the Cart nav link. Both stacks render the same pill:

     - WP side: server-rendered. WC()->cart->get_cart_contents_count() resolves
       at request time.
     - Next side: client-rendered. Reads the crucible_cart_count cookie set by
       the WP theme on woocommerce_set_cart_cookies. The cookie is scoped to
       `.crucible-3d.com` in prod (and shared on `localhost` in dev) so the
       marketing host can see updates from the shop host.

   The wrapper carries a [data-has-items] attribute; the indicator child stays
   hidden otherwise to avoid layout shift between empty and non-empty states. */

.cart-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cart-badge__indicator {
  display: none;
  pointer-events: none;
}

.cart-badge[data-has-items="true"] .cart-badge__indicator {
  display: inline-flex;
}

.cart-badge__count {
  margin-left: 0.375rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.375rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1;
}