/* ============================================================
   free-dash-badge.css — the gold "FREE Dashboard" pill shown
   directly under every blueprint title.

   Used by:
     • /blueprints catalog cards — emitted in js/products.js buildCard()
       under .product-name (short label "FREE Dashboard")
     • product pages — injected by js/pp-dash-badge.js under .pp-hero-h1
       with the .np-freedash--pp modifier (full label, one step larger)

   Compact, ONE-LINE, fit-content pill (not full width) so it never wraps
   in the 2-column card grid. Colours are the store's brand-token values:
     fill = Add-to-Cart gold #D9A93C, text = navy #0D1B2E
     (navy-on-gold contrast ≈ 8.0:1).
   ============================================================ */

.np-freedash {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;   /* fit-content inside the .product-body flex column (no stretch) */
  gap: 6px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 6px 0 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #D9A93C;   /* Add-to-Cart gold */
  color: #0D1B2E;        /* store navy */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.np-freedash-crest {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
}

.np-freedash-label { min-width: 0; }

/* On /blueprints cards the .product-body flex column already supplies a gap
   between rows, so the pill carries no extra margin — keeps the card-height
   delta ≤ 34px at 390 (2-col grid). */
.product-body .np-freedash { margin: 0; }

/* Product pages — one step up from the card pill. */
.np-freedash--pp {
  font-size: 14px;
  padding: 6px 12px;
}
.np-freedash--pp .np-freedash-crest {
  width: 16px;
  height: 16px;
}

/* "What you get" line under the product-page Buy Now (js/pp-dash-badge.js injectIncludes) and in the checkout
   order summary. Its own navy fill + cream text so contrast holds on any card (≈ 13:1). */
.np-includes {
  display: block;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: #0D1B2E;
  border: 1px solid rgba(217,169,60,0.45);
  color: #F5EFE3;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}