/*
 * Grade A/B badge component. Colors are the locked Trust Navy tokens from the
 * Claude Design export (research/phone-business/brand/Design-Tokens.dc.html;
 * see 23-brand-guidelines.md §3). Both pass WCAG AA on white and light cards.
 */

.gup-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem; /* >=13px */
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  min-height: 26px;
}

/* Grade A: premium tier — navy badge, white text (11.7:1). */
.gup-grade--a {
  background: #123A5E;
  color: #FFFFFF;
}

/* Grade B: value tier (not "bad") — light badge, steel-blue text. */
.gup-grade--b {
  background: #E3ECF6;
  color: #234E73;
}

/* On product cards, pin the grade badge to the top-left corner of the image. */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product .gup-grade {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  box-shadow: 0 1px 5px rgba(11, 36, 57, 0.20);
}
.gup-error { color: #b32d2e; }