/* ==========================================================================
   Wave 2 (owner's OK, 19 Oct 2026; exports/mockups/wave2/WAVE2-BOARD.png)
   B1  cards: "$28.00 /kg", then "≈ $33.60 · ~1.2 kg" (inc/price-promise.php)
   B2  product page: the delivery promise under Add to basket
   B3  basket: "Estimated total ≈" and its note
   Loaded after the design system, phone, pantry, sold-out and house-rules
   layers. Cards without a per-kg rate keep their own markup and styles.
   ========================================================================== */

/* -------------------------------------------------------------------------
   B1 · the price block
   ------------------------------------------------------------------------- */
.gs-card__amt { direction: ltr; unicode-bidi: isolate; }
/* "/kg" in the price's own colour, small and light (the board's " /kg"). */
.gs-card__unit {
  margin-inline-start: 6px; font-family: var(--font-mono); font-size: .7em; font-weight: 400;
  letter-spacing: 0; color: inherit; white-space: nowrap;
}
.gs-rtl .gs-card__unit { font-family: var(--font-body); font-size: .8em; }
.gs-card__est {
  display: block; min-width: 0; font-family: var(--font-body); font-size: 12px; font-weight: 400;
  line-height: 1.4; letter-spacing: 0; color: var(--text-dim);
}
.gs-card__est bdi { direction: ltr; unicode-bidi: isolate; }

/* Desktop (1200 and up): the foot's price, the estimate under it, VIEW beside. */
.gs-card__pp { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gs-card__pp .gs-card__price { white-space: nowrap; }
.gs-card__pp .gs-card__est { font-size: 12.5px; }
.gs-card__foot:has(.gs-card__pp) { align-items: flex-end; gap: 10px; }

/* Phones and tablets: the R057 card's price line, a step larger (the board:
   16 px on a phone), then the estimate on a line of its own. */
@media (max-width: 1199px) {
  body .gs-card .gs-card__tag--pp { flex-wrap: wrap; row-gap: 4px; column-gap: 0; padding-top: 6px; }
  body .gs-card .gs-card__tag--pp .gs-card__tag-price { font-size: 16px; line-height: 1.25; white-space: nowrap; }
  body .gs-card .gs-card__tag--pp .gs-card__unit { font-size: 11px; }
  body.gs-rtl .gs-card .gs-card__tag--pp .gs-card__unit { font-size: 12.5px; }
  body .gs-card .gs-card__tag--pp .gs-card__est { order: 2; flex: 1 1 100%; }
  body .gs-card.gs-card--soldout .gs-card__est { color: #8C8273; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  body .gs-card .gs-card__tag--pp .gs-card__tag-price { font-size: 17px; }
  body .gs-card .gs-card__tag--pp .gs-card__est { font-size: 12.5px; }
}
.gs-card--soldout .gs-card__pp .gs-card__price,
.gs-card--soldout .gs-card__pp .gs-card__est { color: var(--text-dim); }

/* The compact "Pairs with" cards. */
.gs-mini__size .gs-card__est { display: inline; font-size: inherit; color: inherit; }
.gs-mini__price .gs-card__unit { font-size: .8em; }

/* -------------------------------------------------------------------------
   B2 · the delivery promise
   ------------------------------------------------------------------------- */
.gs-dpromise {
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid rgba(212, 162, 78, .45); border-radius: 12px; background: rgba(212, 162, 78, .08);
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.gs-dpromise[hidden] { display: none; }
/* Before the answer: the same box, quieter, its sizing text invisible. */
.gs-dpromise.is-pending { border-color: rgba(212, 162, 78, .16); background: rgba(212, 162, 78, .03); }
.gs-dpromise.is-pending > * { visibility: hidden; }
.gs-dpromise p { margin: 0; }
.gs-dpromise__when { display: flex; align-items: baseline; gap: 8px; }
.gs-dpromise__when b { font-weight: 700; color: var(--text-bright); }
.gs-dpromise__when bdi { unicode-bidi: isolate; }
.gs-dpromise__ico { flex: none; font-size: 15px; line-height: 1; }
.gs-dpromise__rules { margin-top: 4px !important; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.gs-dpromise__sep { opacity: .7; }
.gs-dpromise .gs-areafee bdi,
.gs-dpromise .gs-areafee .woocommerce-Price-amount { font-family: inherit; color: inherit; }

/* -------------------------------------------------------------------------
   B3 · the basket's estimated total
   ------------------------------------------------------------------------- */
.gs-summary__estk { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-summary__estnote {
  display: block; max-width: 22em; font-family: var(--font-body); font-size: 12.5px; font-weight: 400;
  line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--text-dim);
}
.gs-summary__row--est { align-items: flex-start; }
.gs-summary__row--est .gs-summary__grand { line-height: 1.1; }
@media (max-width: 860px) {
  /* On the cream docket: the label's ink, the note in the label's grey. */
  .gs-summary .gs-summary__estnote { color: #6E6557; }
}