/* ============================================================================
   LHR COURSE PICKER — the 1/3/6/10 selector + price summary + buy button.

   Extracted from the bikini area page so the shop grid's "Buy course" modal and
   the area pages run ONE component. Class names are unchanged from the original
   inline block, so this file is a lift, not a rewrite.

   Depends on the palette tokens already declared by every LHR page
   (--white/--cream/--border/--dark/--mid/--muted/--rg-mid/--rg-dark) and on
   --font-display / --font-sans from colors_and_type.css.
   ============================================================================ */

.bk-field-label { font-size: 8px; font-weight: 500; letter-spacing: 0.28em;
                  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* Session selector. The discount sits INSIDE each box under the label rather
   than corner-pinned — a corner badge reads as bolted on. */
.bk-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
            margin-bottom: 30px; }
.bk-pill { display: flex; flex-direction: column; align-items: center; gap: 4px;
           padding: 13px 4px 11px; background: var(--white);
           border: 1px solid var(--border); cursor: pointer;
           font-family: var(--font-sans);
           transition: border-color .15s ease, background .15s ease; }
.bk-pill:hover { border-color: var(--rg-mid); }
.bk-pill[aria-pressed="true"] { border-color: var(--rg-mid); border-width: 2px;
                                background: #FCF9F6; padding: 12px 3px 10px; }
.bk-pill:focus-visible { outline: 2px solid var(--rg-dark); outline-offset: 2px; }
.bk-pill-count { font-family: var(--font-display); font-size: 22px; font-weight: 400;
                 color: var(--dark); line-height: 1; }
.bk-pill[aria-pressed="true"] .bk-pill-count { color: var(--rg-dark); }
.bk-pill-label { font-size: 7px; font-weight: 600; letter-spacing: 0.14em;
                 text-transform: uppercase; color: var(--muted); }
.bk-pill-save { font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em;
                color: var(--rg-dark); min-height: 12px; }

/* Summary — two lines. Session count is NOT repeated here; the selector
   directly above already states it. */
.bk-calc { border-top: 1px solid var(--border); padding-top: 20px; margin-bottom: 26px; }
.bk-calc-line { display: flex; justify-content: space-between; align-items: baseline;
                gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.bk-calc-line .v { color: var(--mid); }
.bk-calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bk-calc-total .k { font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
                    text-transform: uppercase; color: var(--dark); }
.bk-calc-total-value { font-family: var(--font-display); font-weight: 300;
                       font-size: clamp(32px, 3.5vw, 52px); line-height: 1;
                       color: var(--rg-dark); }
.bk-calc-save { font-size: 12px; line-height: 1.7; color: var(--rg-mid);
                margin-top: 10px; min-height: 20px; }

/* Instalment messaging host — sits between the total and the buy button.
   Collapses to nothing when Stripe returns no plan (below Klarna's limits, or
   before the publishable key is swapped in), so it never leaves a gap. */
.bk-finance:empty { display: none; }
.bk-finance { margin: 0 0 22px; }
.bk-finance .fin-line { font-size: 12px; line-height: 1.7; color: var(--mid); }

/* The buy actions now live in .lhrc-actions (static/lhr-cart.css): ADD TO CART
   outline + BUY NOW filled. The old single .bk-cta rule is gone with it. */

.bk-err { display: none; margin-top: 18px; background: var(--white);
          border-left: 2px solid #8A2B2B; padding: 14px 18px;
          font-size: 12px; line-height: 1.9; color: #8A2B2B; }

@media (max-width: 480px) {
  .bk-pills { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .bk-pill { padding: 11px 2px 9px; }
  .bk-pill[aria-pressed="true"] { padding: 10px 1px 8px; }
  .bk-pill-count { font-size: 19px; }
  .bk-pill-save  { font-size: 8px; }
}