/* Native Smoke Shop header only. Keep the existing accessible Cart label,
   destination and live [data-cart-count] node; change their presentation only.
   Unsupported mask implementations retain the original readable text label. */
:root[data-store="shop"] .nss-sticky-nav .cart-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  :root[data-store="shop"] .nss-sticky-nav .cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    gap: 0;
    font-size: 0;
    white-space: nowrap;
  }

  /* Empty generated content is decorative; screen readers retain Cart + count.
     A same-origin SVG mask inherits the button's white foreground colour. */
  :root[data-store="shop"] .nss-sticky-nav .cart-button::before {
    content: "";
    display: block;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    margin-inline-end: 6px;
    background-color: currentColor;
    -webkit-mask: url("/assets/nss-cart.svg") center / contain no-repeat;
    mask: url("/assets/nss-cart.svg") center / contain no-repeat;
    pointer-events: none;
  }

  :root[data-store="shop"] .nss-sticky-nav .cart-button [data-cart-count] {
    font-size: 14px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 620px) {
    :root[data-store="shop"] .nss-sticky-nav .cart-button [data-cart-count] {
      font-size: 12px;
    }
  }
}