/* ============================================================================
   LHR COURSE CART — header badge + drawer.
   Uses the palette tokens every LHR page declares, with hex fallbacks so the
   header badge still renders correctly on pages that do not.
   ============================================================================ */

/* ── header icon + badge ─────────────────────────────────────────────────── */
.lhrc-nav-btn { position: relative; display: inline-flex; align-items: center;
                justify-content: center; background: none; border: 0; cursor: pointer;
                padding: 6px 6px 6px 10px; color: #EFE7DA; line-height: 0;
                transition: opacity .2s ease; }
.lhrc-nav-btn:hover { opacity: .7; }
.lhrc-nav-btn svg { display: block; width: 19px; height: 19px; }
.lhrc-nav-count { position: absolute; top: 0; right: 0; min-width: 15px; height: 15px;
                  padding: 0 4px; border-radius: 999px;
                  background: var(--rg-dark, #885030); color: #fff;
                  font-family: var(--font-sans, sans-serif); font-size: 9px;
                  font-weight: 600; line-height: 15px; text-align: center; }
/* Light-hero pages carry body.nav-light; the icon has to flip with the links. */
body.nav-light .lhrc-nav-btn { color: var(--dark, #17121F); }

/* ── drawer ──────────────────────────────────────────────────────────────── */
body.lhrc-open { overflow: hidden; }
.lhrc-drawer { position: fixed; inset: 0; z-index: 9700; display: none; }
.lhrc-drawer.open { display: block; }
.lhrc-scrim { position: absolute; inset: 0; background: rgba(11, 11, 12, 0.55); }
.lhrc-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 100%;
              max-width: 420px; background: var(--white, #fff);
              display: flex; flex-direction: column; overflow-y: auto;
              box-shadow: -18px 0 44px rgba(11, 11, 12, 0.18); }

.lhrc-head { display: flex; align-items: center; justify-content: space-between;
             padding: 26px 26px 18px; border-bottom: 1px solid var(--border, #DDD6CF); }
.lhrc-title { font-family: var(--font-display, sans-serif); font-weight: 300;
              font-size: 26px; color: var(--dark, #17121F); }
.lhrc-close { background: none; border: 0; cursor: pointer; font-size: 26px;
              line-height: 1; color: var(--muted, #6B6478); padding: 0 4px; }
.lhrc-close:hover { color: var(--dark, #17121F); }

.lhrc-empty { padding: 40px 26px; font-size: 13px; color: var(--muted, #6B6478); }

.lhrc-list { list-style: none; margin: 0; padding: 0; }
.lhrc-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
             align-items: baseline; padding: 20px 26px;
             border-bottom: 1px solid var(--border, #DDD6CF); }
.lhrc-line-name { font-size: 14px; color: var(--dark, #17121F); }
.lhrc-line-meta { font-size: 11.5px; color: var(--muted, #6B6478); margin-top: 4px; }
.lhrc-line-price { font-family: var(--font-display, sans-serif); font-size: 18px;
                   color: var(--rg-dark, #885030); white-space: nowrap; }
.lhrc-remove { grid-column: 1 / -1; justify-self: start; margin-top: 8px;
               background: none; border: 0; padding: 0; cursor: pointer;
               font-family: var(--font-sans, sans-serif); font-size: 10px;
               font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
               color: var(--muted, #6B6478); border-bottom: 1px solid transparent; }
.lhrc-remove:hover { color: var(--rg-dark, #885030);
                     border-bottom-color: var(--rg-dark, #885030); }

.lhrc-foot { margin-top: auto; padding: 24px 26px 30px; }
.lhrc-total { display: flex; justify-content: space-between; align-items: baseline;
              gap: 16px; padding-bottom: 16px; }
.lhrc-total .k { font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
                 text-transform: uppercase; color: var(--dark, #17121F); }
.lhrc-total .v { font-family: var(--font-display, sans-serif); font-weight: 300;
                 font-size: 34px; line-height: 1; color: var(--rg-dark, #885030); }
.lhrc-finance:empty { display: none; }
.lhrc-finance { margin-bottom: 18px; }
.lhrc-finance .fin-line { font-size: 12px; line-height: 1.7; color: var(--mid, #52485E); }

.lhrc-checkout { display: block; width: 100%; cursor: pointer; border: 0;
                 padding: 16px 20px; font-family: var(--font-sans, sans-serif);
                 font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
                 text-transform: uppercase; color: #fff;
                 background: linear-gradient(135deg, var(--rg-mid, #8B6842), var(--rg-dark, #885030));
                 transition: opacity .3s ease; }
.lhrc-checkout:hover { opacity: .88; }
.lhrc-checkout:disabled { background: var(--border, #DDD6CF); color: var(--muted, #6B6478);
                          cursor: default; }

.lhrc-note { margin-top: 14px; font-size: 11.5px; line-height: 1.8;
             color: var(--muted, #6B6478); font-style: italic; }
.lhrc-reset { display: block; margin-top: 10px; background: none; border: 0; padding: 0;
               cursor: pointer; font-family: var(--font-sans, sans-serif); font-size: 10px;
               font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
               color: #8A2B2B; border-bottom: 1px solid #8A2B2B; }
.lhrc-err { margin-top: 14px; background: #FBEDED; border-left: 2px solid #8A2B2B;
            padding: 12px 14px; font-size: 12px; line-height: 1.8; color: #8A2B2B; }

/* ── the two buy actions, wherever they appear ───────────────────────────── */
.lhrc-actions { display: grid; gap: 8px; }
@media (min-width: 420px) { .lhrc-actions.is-inline { grid-template-columns: 1fr 1fr; } }
.lhrc-btn { display: block; width: 100%; text-align: center; cursor: pointer;
            font-family: var(--font-sans, sans-serif); font-size: 9px; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 12px;
            border: 1px solid transparent; text-decoration: none;
            transition: background .2s ease, opacity .3s ease, color .2s ease; }
.lhrc-btn-add { background: transparent; color: var(--rg-dark, #885030);
                border-color: var(--rg-mid, #8B6842); }
.lhrc-btn-add:hover { background: var(--cream, #F7F3EF); }
.lhrc-btn-add.is-added { background: var(--cream, #F7F3EF); }
.lhrc-btn-buy { color: #fff;
                background: linear-gradient(135deg, var(--rg-mid, #8B6842), var(--rg-dark, #885030)); }
.lhrc-btn-buy:hover { opacity: .88; }
.lhrc-btn:disabled { background: var(--border, #DDD6CF); color: var(--muted, #6B6478);
                     border-color: transparent; cursor: default; }
.lhrc-btn:focus-visible { outline: 2px solid var(--rg-dark, #885030); outline-offset: 2px; }