/* ============================================================
   HodlerSupply — Product page buy box, Option B2 (FINAL)
   Drop-in override stylesheet. Load AFTER all existing theme CSS
   (last <link> in <head>, or Appearance → Customize → Additional CSS).
   Targets existing classes in woocommerce/content-single-product.php.
   ============================================================ */

/* 1) Price box — WHITE card, guarantee lives INSIDE it */
.pd-price {
  background: #fff;
  border: 1px solid var(--border, #E8EAEE);
}
/* keep the theme's existing .pd-price__row / __compare / __save styles;
   the guarantee row stays inside the box, under the dashed divider */
.pd-guarantee {
  display: flex;              /* re-enable if previously hidden */
  align-items: center;
  gap: 8px;
  margin-top: var(--s4, .75rem);
  padding-top: var(--s4, .75rem);
  border-top: 1px dashed var(--border-2, #DDE1E6);
  font-size: var(--text-sm, .9rem);
  font-weight: 600;
  color: var(--ink-2, #3F4A54);
}
.pd-guarantee svg { width: 20px; height: 20px; color: var(--emerald, #10B981); flex-shrink: 0; }

/* 2) Urgency — plain coral TEXT, no pill/border */
.pd-urgency .badge--low {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-sm, .9rem);
  font-weight: 700;
  color: var(--coral, #FF5A36);
}
/* NOTE: the on-photo "Only N left" flag (.pd-main__flag) keeps its outline
   pill style — this override is scoped to the buy column only. */

/* 3) Condition label — plain colored TEXT with icon, no chip background.
      Only ONE label renders here: the product's condition.
      (US-Market Authorized is REMOVED from the buy column — it remains
      lower on the page as the "Authorized sourcing" perk.) */
.pd-assure { display: flex; flex-wrap: wrap; gap: var(--s4, .75rem); margin-bottom: var(--s6, 1.25rem); }
.assure-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs, .8rem); font-weight: 600; line-height: 1.2;
  color: var(--emerald-dark, #047857);      /* default = NEW (green) */
  background: transparent; border: none; padding: 0; border-radius: 0;
}
.assure-chip svg { width: 13px; height: 13px; color: var(--emerald, #10B981); flex-shrink: 0; }

/* Condition variants */
.assure-chip--amber  { color: #B45309; }   /* OPEN BOX */
.assure-chip--amber svg { color: #D97706; }
.assure-chip--indigo { color: var(--brand, #3A4FD0); }   /* REFURBISHED */
.assure-chip--indigo svg { color: var(--brand, #3A4FD0); }

/* 4) Quiet payment line (replaces the payment chip row) */
.pd-pay {
  display: flex; align-items: flex-start; gap: 7px;
  color: var(--ink-3, #6B7683);
  font-size: var(--text-xs, .8rem);
  margin-bottom: var(--s5, 1rem);
}
.pd-pay svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.pd-pay .pay-chip, .pd-pay__label { display: none; }  /* safety: hide old chips if markup not yet replaced */

/* 5) Buy row — pill corners, no shadows */
.pd-buy .btn--cta { border-radius: 999px; box-shadow: none; }
.pd-buy .btn--cta:hover { box-shadow: none; }
.qty { border-radius: 999px; }

/* 6) Gallery — no frames, square corners */
.pd-main { background: transparent; border: none; border-radius: 0; }
.pd-main img { border-radius: 0; }
.pd-thumb { border-radius: 0; }   /* keep 1px hairline + brand active border as selection indicator */
.pd-thumb img { border-radius: 0; }