/*
 * Wholesale price display — the struck retail comparison and the tier / "Your
 * price" badge (spec §6.7).
 *
 * PORTED, NOT DESIGNED. Every rule in the first block below is copied verbatim
 * from `extensions/printbere-storefront/assets/printbere.css:510-544`, the
 * stylesheet the live theme block `customer-pricing.liquid` renders into. Class
 * names are copied with it — `.printbere-pricing__base`,
 * `.printbere-pricing__badge`, `.printbere-pricing__badge--custom` — so a
 * wholesale customer sees the same green-on-mint pill on both storefronts and
 * the §7A side-by-side pass has nothing to report. Inventing a new badge here
 * would have been a design change smuggled in under a pricing task.
 *
 * ── THE ONE DELIBERATE DEVIATION FROM LIVE ──────────────────────────────────
 * On Shopify the theme prints the BASE price into the page and the block then
 * appends a second row below it (`final · struck base · badge`), because a
 * Liquid theme cannot know the customer's price at render time — the block has
 * to fetch it. A server-rendered page does know, so the standalone site puts
 * the RESOLVED price in the primary price slot and the struck retail beside it.
 * There is no reason to first print a number the customer will not pay.
 * Recorded as a deviation in the T4 build note.
 *
 * ── WHY THERE IS NO `.printbere-pricing__final` RULE ────────────────────────
 * The resolved price renders in the page's OWN price element (`.pbpd-price` on
 * the PDP, `.pbc-card-price` on a card), which already carries that surface's
 * type scale. Re-styling it here would make a wholesale customer's price a
 * different size from a retail customer's, on the same page, for no reason.
 * The class is kept out rather than kept unused.
 *
 * Loaded by the PDP, collection, search and cart routes. A retail shopper's
 * markup contains none of these class names at all — `PriceBadge` renders
 * nothing at all for `source === "retail"` — so this sheet costs them one
 * cached request and zero pixels.
 */

/* ── verbatim from printbere.css:510-544 ─────────────────────────────────── */

.printbere-pricing__base {
  font-size: 14px;
  color: #6d7175;
  text-decoration: line-through;
}

.printbere-pricing__badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #eaf6ef;
  color: #0a6929;
  border: 1px solid #b8e0c6;
}

.printbere-pricing__badge--custom {
  background: #fdf3e7;
  color: #944706;
  border-color: #f5d4a8;
}

/* ── the wrapper the ported rules assume ─────────────────────────────────── */

/*
 * `.printbere-pricing__row` in the theme is an `inline-flex` with
 * `align-items: baseline` and a 10px gap. Reproduced here without the `__final`
 * child, since the price itself now lives outside this element (header).
 *
 * `flex-wrap` matters on the narrowest card: a two-line badge is ugly, a badge
 * that overflows the card is a layout bug.
 */
.printbere-pricing__row {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── card scale ──────────────────────────────────────────────────────────── */

/*
 * ⚠ EVERY card rule is scoped to `.pbc-card-price--wholesale`, and that
 *   modifier is emitted ONLY on a card that actually has a badge. A retail
 *   shopper's card markup and computed styles are therefore bit-for-bit what
 *   Phase 2 shipped — which is what §10 A.3 diffs. Restyling the bare
 *   `.pbc-card-price` would have moved every guest's price too: the base rule
 *   in `collection.css:200` is `white-space: nowrap` inside a
 *   `.pbc-card-foot` that is already `align-items: flex-start`, and turning it
 *   into a column would have re-laid-out the hub cards' `<span class="pbc-from">`
 *   onto its own line on every collection page on the site.
 *
 * The badge goes UNDER the price rather than beside it: a card foot is ~300px
 * at desktop and a long tier name ("Wholesale Tier 2 · 15% off") beside a price
 * squeezes one of the two to nothing.
 */
.pbc-card-price--wholesale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  /* The badge row wraps; the price itself still must not. */
  white-space: normal;
}

.pbc-card-price--wholesale .printbere-pricing__row {
  gap: 6px;
}

.pbc-card-price--wholesale .printbere-pricing__base {
  font-size: 12px;
}

.pbc-card-price--wholesale .printbere-pricing__badge {
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.03em;
}

/* ── PDP scale ───────────────────────────────────────────────────────────── */

/*
 * `.pbpd-price-row` is already a flex row (product.css); this is the group that
 * keeps the strike and the badge together immediately after the price, before
 * the `.pbpd-spacer` pushes the rating strip to the right.
 */
.pbpd-price-row .printbere-pricing__row {
  margin-left: 2px;
}