/**
 * CFE Design System — Tokens
 *
 * Source of truth: CFE-Design.md (Apr 24, 2026)
 * Reference page:  cfe-design-system.html (style guide / live demo)
 *
 * Phase 0 — Tokens only. No selectors that affect existing markup.
 * The site looks 100% identical when this file is enqueued.
 *
 * Naming: every token is prefixed --cfe-ds-* so it can coexist with
 * Isaac's --cfe-navy LearnDash polish tokens (separate namespace per
 * design doc's "marketing vs dashboard are two systems" framing).
 */

:root {
  /* ============================================
     COLORS — CORE NEUTRALS
     ============================================ */
  --cfe-ds-color-fog:      #F4F5F7;  /* Primary background */
  --cfe-ds-color-mist:     #E8EAED;  /* Alternate sections, dividers, card borders */
  --cfe-ds-color-ink:      #1B2A3B;  /* Primary text, buttons, navbar */
  --cfe-ds-color-ink-deep: #0F1923;  /* Hover-darken of Ink (for primary button hover etc.) */
  --cfe-ds-color-graphite: #5B6573;  /* Secondary text, meta, captions */

  /* ============================================
     COLORS — ACCENT TRIADS
     bg + border + text used as a set; do not mix across triads
     ============================================ */

  /* Mint — success, accredited, positive outcomes */
  --cfe-ds-color-mint-bg:     #ECFDF5;
  --cfe-ds-color-mint-border: #6EE7B7;
  --cfe-ds-color-mint-text:   #0F7A2A;

  /* Sky — informational, learning, links */
  --cfe-ds-color-sky-bg:         #EFF6FF;
  --cfe-ds-color-sky-border:     #93C5FD;
  --cfe-ds-color-sky-text:       #3E8AB8;  /* accessible inline links / badges */
  --cfe-ds-color-sky-decorative: #6BB0DB;  /* decorative underlines only — too low contrast for body text */

  /* Ember — salary outcomes, attention, popular/new badges */
  --cfe-ds-color-ember-bg:     #FEF3E7;
  --cfe-ds-color-ember-border: #F8871F;
  --cfe-ds-color-ember-text:   #F8871F;

  /* Rose — errors, incorrect answers, destructive */
  --cfe-ds-color-rose-bg:     #FEF2F2;
  --cfe-ds-color-rose-border: #F7B3B3;
  --cfe-ds-color-rose-text:   #B4231E;

  /* ============================================
     COLORS — CATEGORY TINTS (for course-category tiles)
     ============================================ */
  --cfe-ds-tint-mint:   #ECFDF5;  /* wellness, SEL, classroom climate */
  --cfe-ds-tint-sky:    #EFF6FF;  /* tech, classroom mgmt, digital literacy */
  --cfe-ds-tint-ember:  #FEF3E7;  /* creativity, arts integration, leadership */
  --cfe-ds-tint-slate:  #F1F3F7;  /* math, science, reading, academic subjects */
  --cfe-ds-tint-dust:   #F5F2EC;  /* assessment, pedagogy, professional practice */

  /* ============================================
     COLORS — PREMIUM (financial / Stripe-like accent)
     Documented exception to the design doc's "kill indigo" rule.
     Use sparingly: hero $-savings highlights, premium-tier markers,
     comparison-table crosshair hover, progress bars on premium pages.
     Don't use as a general accent — that's still Sky.
     ============================================ */
  --cfe-ds-color-premium-text:        #635BFF;  /* main indigo */
  --cfe-ds-color-premium-light:       #8F88FF;  /* lighter indigo for gradient ends */
  --cfe-ds-color-premium-bg:          #F1F0FF;  /* very light indigo background tint */
  --cfe-ds-color-premium-tint-soft:   rgba(99, 91, 255, 0.06);   /* table hover row */
  --cfe-ds-color-premium-tint-strong: rgba(99, 91, 255, 0.14);   /* table hover cell */

  /* ============================================
     COLORS — FUNCTIONAL (edge cases only)
     ============================================ */
  --cfe-ds-color-alert: #C4553D;  /* genuine errors / warnings — not for marketing */

  /* ============================================
     TYPOGRAPHY — FAMILIES
     Outfit + Plus Jakarta Sans are enqueued by class-cfe-design-system.php.
     ============================================ */
  --cfe-ds-font-headline: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cfe-ds-font-body:     'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ============================================
     TYPOGRAPHY — DESKTOP SCALE (>= 768px)
     Headlines: weight 500 (never 600+). Body: weight 400 (never 500).
     ============================================ */
  --cfe-ds-text-hero-size:         60px;
  --cfe-ds-text-hero-weight:       500;
  --cfe-ds-text-hero-lh:           1.05;

  --cfe-ds-text-section-size:      42px;
  --cfe-ds-text-section-weight:    500;
  --cfe-ds-text-section-lh:        1.1;

  --cfe-ds-text-subsection-size:   30px;
  --cfe-ds-text-subsection-weight: 500;
  --cfe-ds-text-subsection-lh:     1.2;

  --cfe-ds-text-card-size:         22px;
  --cfe-ds-text-card-weight:       500;
  --cfe-ds-text-card-lh:           1.3;

  --cfe-ds-text-lead-size:         18px;
  --cfe-ds-text-lead-weight:       400;
  --cfe-ds-text-lead-lh:           1.5;

  --cfe-ds-text-body-size:         16px;
  --cfe-ds-text-body-weight:       400;
  --cfe-ds-text-body-lh:           1.6;

  --cfe-ds-text-ui-size:           15px;
  --cfe-ds-text-ui-weight:         500;
  --cfe-ds-text-ui-lh:             1.4;

  --cfe-ds-text-meta-size:         13px;
  --cfe-ds-text-meta-weight:       400;
  --cfe-ds-text-meta-lh:           1.5;

  --cfe-ds-text-micro-size:        12px;
  --cfe-ds-text-micro-weight:      500;
  --cfe-ds-text-micro-lh:          1.4;
  --cfe-ds-text-micro-tracking:    0.08em;

  /* ============================================
     SPACING — 8-point grid with half-step additions
     The 80% rule: most spacing should come from --cfe-ds-space-4,
     --cfe-ds-space-6, and --cfe-ds-space-16.
     ============================================ */
  --cfe-ds-space-0:   0px;
  --cfe-ds-space-1:   4px;
  --cfe-ds-space-2:   8px;
  --cfe-ds-space-3:   12px;
  --cfe-ds-space-4:   16px;
  --cfe-ds-space-5:   20px;
  --cfe-ds-space-6:   24px;
  --cfe-ds-space-8:   32px;
  --cfe-ds-space-10:  40px;
  --cfe-ds-space-12:  48px;
  --cfe-ds-space-16:  64px;
  --cfe-ds-space-20:  80px;
  --cfe-ds-space-24:  96px;
  --cfe-ds-space-32:  128px;

  /* ============================================
     RADII — five tokens; do not use 0px (sharp corners fight playful-academic).
     md is the default workhorse for cards, callouts, modals.
     ============================================ */
  --cfe-ds-radius-none: 0px;
  --cfe-ds-radius-xs:   6px;
  --cfe-ds-radius-sm:   8px;
  --cfe-ds-radius-md:   12px;
  --cfe-ds-radius-lg:   20px;
  --cfe-ds-radius-xl:   32px;
  --cfe-ds-radius-full: 9999px;

  /* ============================================
     SHADOWS — minimal; depth from borders + bg, not shadow.
     ============================================ */
  --cfe-ds-shadow-subtle: 0 1px 2px rgba(27, 42, 59, 0.04);
  --cfe-ds-shadow-card-lift: 0 4px 16px rgba(15, 25, 35, 0.06);
  --cfe-ds-shadow-focus:  0 0 0 3px rgba(107, 176, 219, 0.3);

  /* ============================================
     MOTION — respectful, not cutesy
     ============================================ */
  --cfe-ds-duration-quick:  150ms;
  --cfe-ds-duration-smooth: 300ms;
  --cfe-ds-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     GRADIENTS — DATA VISUALIZATION ONLY
     Documented exception to the "no gradients" rule:
     progression-bar fills where the gradient *is* the metaphor.
     Do NOT use on UI surfaces (buttons, cards).
     ============================================ */
  --cfe-ds-gradient-bar-info:    linear-gradient(90deg, #6BB0DB, #93C5FD);  /* Sky — generic progress */
  --cfe-ds-gradient-bar-success: linear-gradient(90deg, #0F7A2A, #6EE7B7);  /* Mint — savings, completion */
  --cfe-ds-gradient-bar-premium: linear-gradient(90deg, #635BFF, #8F88FF);  /* Premium indigo — financial moments */

  /* ============================================
     RESPONSIVE BREAKPOINT
     ============================================ */
  --cfe-ds-breakpoint-md: 768px;
}

/* ============================================
   TYPOGRAPHY — MOBILE SCALE (< 768px)
   Token values shrink for headlines; body stays at 16px (non-negotiable —
   smaller auto-zooms on form focus).
   ============================================ */
@media (max-width: 767px) {
  :root {
    --cfe-ds-text-hero-size:       38px;
    --cfe-ds-text-hero-lh:         1.1;

    --cfe-ds-text-section-size:    30px;
    --cfe-ds-text-section-lh:      1.15;

    --cfe-ds-text-subsection-size: 24px;
    --cfe-ds-text-subsection-lh:   1.25;

    --cfe-ds-text-card-size:       19px;
    --cfe-ds-text-card-lh:         1.35;

    --cfe-ds-text-lead-size:       17px;
    --cfe-ds-text-lead-lh:         1.55;

    /* body stays at 16px on mobile — non-negotiable */

    --cfe-ds-text-meta-size:       12px;
    --cfe-ds-text-micro-size:      11px;
  }
}

/* ============================================================
   GLOBAL PAGE BACKGROUND

   Site-wide: every page uses the design-system "fog" surface color
   instead of the BuddyBoss theme default (#FAFBFD). This is the one
   intentional global selector outside the cfe-redesign scope — it
   only sets the page background, leaving BB chrome tokens
   (--bb-body-background-color, used by subnav/selected tabs) intact.
   `html body` (0,0,2) wins over the theme's `body` rule without
   !important. Pages already on .cfe-redesign resolve to the same fog.
   ============================================================ */
html body {
  background-color: var(--cfe-ds-color-fog);
}

/* ============================================================
   FOG CONSISTENCY — MARKETING PAGE HEROES

   shop-courses lets the fog body show through its transparent hero.
   These pages instead painted white / off-gray bands over the fog
   (state-requirements + transcripts: white wrapper + white hero;
   shop-credit-bundles: #EDEEF2 hero card). Pin their page wrappers
   and hero bands to the same fog surface so all four read consistently.
   `!important` is required: the credit-bundles + transcripts hero rules
   are emitted inline from the page (DB), which would otherwise win on
   source order. Inner cards/sections keep their own explicit colors.
   ============================================================ */
.cfe-sr,
.cfe-sr .hero,
#cfe-transcripts,
#cfe-transcripts .hero,
body.cfe-redesign .cfe-bundles-page .hero,
#all-courses,
.bb-footer.footer-bottom {
  background-color: var(--cfe-ds-color-fog) !important;
}

/* Footer copyright inherits the page body font, which is Plus Jakarta Sans
   on Elementor/design pages but the OS system stack on plain WP/Woo pages.
   Pin the footer to the design font so the copyright reads consistently. */
.bb-footer.footer-bottom {
  font-family: var(--cfe-ds-font-body);
}

/* ============================================================
   TYPE-SCALE NORMALIZATION — ELEMENTOR HEROES

   The shop-courses (page 10) and credit-bundles (3580) heroes hardcode
   off-scale px in their Elementor inline <style> (52/17/11/24 and a
   clamp() topping at 56). Editing Elementor JSON is risky, so pin the
   readable type roles to the design tokens here. The credit-bundles
   hero stays fluid but caps at the hero token. The bundles pricing-
   calculator numbers (.num, .card__size) are bespoke and left as-is.
   ============================================================ */
.cfe-sc-hero h1            { font-size: var(--cfe-ds-text-hero-size) !important; }   /* 52 → 60 */
.cfe-sc-hero .hero__lead   { font-size: var(--cfe-ds-text-lead-size) !important; }   /* 17 → 18 */
.cfe-sc-hero .eyebrow      { font-size: var(--cfe-ds-text-micro-size) !important; }  /* 11 → 12 */
.cfe-sc-hero .stats__n     { font-size: var(--cfe-ds-text-card-size) !important; }   /* 24 → 22 */

body.cfe-redesign .cfe-bundles-page .hero__display {
  font-size: clamp(38px, 4.5vw, var(--cfe-ds-text-hero-size)) !important;           /* 56 → 60 cap, stays fluid */
}
body.cfe-redesign .cfe-bundles-page h2 {
  font-size: var(--cfe-ds-text-section-size) !important;                             /* 44 → 42 */
}

/* ============================================================
   PHASE 1 — FONTS, BASE TYPOGRAPHY, COMPONENTS

   Everything below applies ONLY when <body class="cfe-redesign">
   (set per-page via post meta `_cfe_use_design_system`).
   Pages without that body class are unaffected.
   ============================================================ */

/* ============================================
   BASE TYPOGRAPHY (.cfe-redesign body)
   ============================================ */
body.cfe-redesign {
  background: var(--cfe-ds-color-fog);
  color: var(--cfe-ds-color-ink);
  font-family: var(--cfe-ds-font-body);
  font-size: var(--cfe-ds-text-body-size);
  font-weight: var(--cfe-ds-text-body-weight);
  line-height: var(--cfe-ds-text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.cfe-redesign h1,
body.cfe-redesign h2,
body.cfe-redesign h3,
body.cfe-redesign h4,
body.cfe-redesign .cfe-h1,
body.cfe-redesign .cfe-h2,
body.cfe-redesign .cfe-h3,
body.cfe-redesign .cfe-h4 {
  font-family: var(--cfe-ds-font-headline);
  font-weight: 500;
  color: var(--cfe-ds-color-ink);
  margin: 0;
}

body.cfe-redesign h1, body.cfe-redesign .cfe-h1 {
  font-size: var(--cfe-ds-text-hero-size);
  line-height: var(--cfe-ds-text-hero-lh);
  letter-spacing: 0;
}
body.cfe-redesign h2, body.cfe-redesign .cfe-h2 {
  font-size: var(--cfe-ds-text-section-size);
  line-height: var(--cfe-ds-text-section-lh);
}
body.cfe-redesign h3, body.cfe-redesign .cfe-h3 {
  font-size: var(--cfe-ds-text-subsection-size);
  line-height: var(--cfe-ds-text-subsection-lh);
}
body.cfe-redesign h4, body.cfe-redesign .cfe-h4 {
  font-size: var(--cfe-ds-text-card-size);
  line-height: var(--cfe-ds-text-card-lh);
}

body.cfe-redesign .cfe-lead {
  font-size: var(--cfe-ds-text-lead-size);
  line-height: var(--cfe-ds-text-lead-lh);
  color: var(--cfe-ds-color-graphite);
}
body.cfe-redesign .cfe-meta {
  font-size: var(--cfe-ds-text-meta-size);
  line-height: var(--cfe-ds-text-meta-lh);
  color: var(--cfe-ds-color-graphite);
}
body.cfe-redesign .cfe-micro {
  font-size: var(--cfe-ds-text-micro-size);
  font-weight: var(--cfe-ds-text-micro-weight);
  line-height: var(--cfe-ds-text-micro-lh);
  letter-spacing: var(--cfe-ds-text-micro-tracking);
  text-transform: uppercase;
  color: var(--cfe-ds-color-graphite);
}

/* Signature accent: italic word with wobbly Sky underline (SVG, not CSS border) */
body.cfe-redesign .cfe-accent {
  font-style: italic;
  font-family: var(--cfe-ds-font-headline);
  position: relative;
  white-space: nowrap;
}
body.cfe-redesign .cfe-accent::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.22em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2,7 C 30,2 60,11 90,5 C 120,1 150,10 198,4' stroke='%236BB0DB' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ============================================
   COMPONENTS — Buttons
   ============================================ */
body.cfe-redesign .cfe-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cfe-ds-space-2);
  font-family: var(--cfe-ds-font-body);
  font-size: var(--cfe-ds-text-ui-size);
  font-weight: var(--cfe-ds-text-ui-weight);
  line-height: var(--cfe-ds-text-ui-lh);
  padding: var(--cfe-ds-space-3) var(--cfe-ds-space-5);
  border-radius: var(--cfe-ds-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    border-color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign .cfe-btn--primary {
  background: var(--cfe-ds-color-ink);
  color: #fff;
}
body.cfe-redesign .cfe-btn--primary:hover { background: var(--cfe-ds-color-ink-deep); }

/* Surface-aware secondary: fog pages (body.cfe-redesign) get a Paper (white)
   fill + Mist border so the button doesn't disappear into the fog background.
   Paper surfaces (modals) keep Fog fill — see cfe-modal.css. (Design spec.) */
body.cfe-redesign .cfe-btn--secondary,
body.cfe-redesign .cfe-btn--outline {
  background: #fff;
  color: var(--cfe-ds-color-ink);
  border-color: var(--cfe-ds-color-mist);
}
body.cfe-redesign .cfe-btn--secondary:hover,
body.cfe-redesign .cfe-btn--outline:hover {
  background: var(--cfe-ds-color-mist);
  border-color: var(--cfe-ds-color-graphite);
  transform: translateY(-1px);
}

body.cfe-redesign .cfe-btn--tertiary {
  background: transparent;
  color: var(--cfe-ds-color-sky-text);
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
}
body.cfe-redesign .cfe-btn--tertiary:hover { text-decoration: underline; }

/* Inverse variants — for use inside dark/Ink-bg blocks (e.g. final CTA) */
body.cfe-redesign .cfe-btn--inverse-primary {
  background: #fff;
  color: var(--cfe-ds-color-ink);
  border-color: transparent;
}
body.cfe-redesign .cfe-btn--inverse-primary:hover { background: rgba(255,255,255,0.92); }

body.cfe-redesign .cfe-btn--inverse-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
body.cfe-redesign .cfe-btn--inverse-secondary:hover { background: rgba(255,255,255,0.08); }

/* ============================================
   COMPONENTS — Badges
   ============================================ */
body.cfe-redesign .cfe-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--cfe-ds-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--cfe-ds-space-1) var(--cfe-ds-space-3);
  border-radius: var(--cfe-ds-radius-full);
  border: 1px solid transparent;
}
body.cfe-redesign .cfe-badge--mint {
  background: var(--cfe-ds-color-mint-bg);
  border-color: var(--cfe-ds-color-mint-border);
  color: var(--cfe-ds-color-mint-text);
}
body.cfe-redesign .cfe-badge--sky {
  background: var(--cfe-ds-color-sky-bg);
  border-color: var(--cfe-ds-color-sky-border);
  color: var(--cfe-ds-color-sky-text);
}
body.cfe-redesign .cfe-badge--ember {
  background: var(--cfe-ds-color-ember-bg);
  border-color: var(--cfe-ds-color-ember-border);
  color: var(--cfe-ds-color-ember-text);
}
body.cfe-redesign .cfe-badge--neutral {
  background: var(--cfe-ds-tint-slate);
  color: var(--cfe-ds-color-graphite);
  border-color: transparent;
}

/* ============================================
   COMPONENTS — Card
   ============================================ */
body.cfe-redesign .cfe-card {
  background: #fff;
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: var(--cfe-ds-radius-md);
  padding: var(--cfe-ds-space-6);
  transition: border-color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign .cfe-card:hover { border-color: #CBD0D8; }
@media (max-width: 767px) {
  body.cfe-redesign .cfe-card { padding: var(--cfe-ds-space-5); }
}

/* ============================================
   COMPONENTS — Inputs
   ============================================ */
body.cfe-redesign .cfe-label {
  display: block;
  font-family: var(--cfe-ds-font-body);
  font-size: var(--cfe-ds-text-meta-size);
  font-weight: 500;
  color: var(--cfe-ds-color-ink);
  margin-bottom: 6px;
}
body.cfe-redesign .cfe-input {
  font-family: var(--cfe-ds-font-body);
  font-size: var(--cfe-ds-text-ui-size);
  font-weight: 400;
  color: var(--cfe-ds-color-ink);
  background: #fff;
  padding: var(--cfe-ds-space-3) 14px;
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: var(--cfe-ds-radius-sm);
  outline: none;
  width: 100%;
  max-width: 360px;
  transition:
    border-color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    box-shadow var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign .cfe-input::placeholder { color: var(--cfe-ds-color-graphite); }
body.cfe-redesign .cfe-input:hover { border-color: #CBD0D8; }
body.cfe-redesign .cfe-input:focus {
  border-color: var(--cfe-ds-color-sky-decorative);
  box-shadow: var(--cfe-ds-shadow-focus);
}

/* ============================================
   COMPONENTS — Nav links
   ============================================ */
body.cfe-redesign .cfe-nav-link {
  font-family: var(--cfe-ds-font-body);
  font-size: var(--cfe-ds-text-ui-size);
  font-weight: var(--cfe-ds-text-ui-weight);
  color: var(--cfe-ds-color-ink);
  text-decoration: none;
  padding: 4px 0;
  margin-right: var(--cfe-ds-space-4);
  border-bottom: 2px solid transparent;
  transition:
    border-color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign .cfe-nav-link:hover { color: var(--cfe-ds-color-sky-text); }
body.cfe-redesign .cfe-nav-link.is-active {
  border-color: var(--cfe-ds-color-sky-decorative);
}

/* ============================================
   LAYOUT UTILITIES — Phase 2
   Promoted from homepage's local CSS so every page can reuse.
   ============================================ */

/* Container — max-width centered wrapper with gutter */
body.cfe-redesign .cfe-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--cfe-ds-space-8);  /* 32px desktop */
  position: relative;
}
@media (max-width: 1023px) {
  body.cfe-redesign .cfe-container { padding: 0 var(--cfe-ds-space-6); }  /* 24px tablet */
}
@media (max-width: 767px) {
  body.cfe-redesign .cfe-container { padding: 0 var(--cfe-ds-space-4); }  /* 16px mobile */
}

/* Section — vertical rhythm block */
body.cfe-redesign .cfe-section {
  padding: var(--cfe-ds-space-20) 0;  /* 80px desktop */
}
@media (max-width: 767px) {
  body.cfe-redesign .cfe-section {
    padding: var(--cfe-ds-space-12) 0;  /* 48px mobile */
  }
}

/* Section header — eyebrow + h2 + lead paragraph layout */
body.cfe-redesign .cfe-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--cfe-ds-space-6);
  margin-bottom: var(--cfe-ds-space-8);
}
body.cfe-redesign .cfe-section-head .cfe-section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cfe-ds-space-2);
  font-size: var(--cfe-ds-text-micro-size);
  font-weight: var(--cfe-ds-text-micro-weight);
  letter-spacing: var(--cfe-ds-text-micro-tracking);
  text-transform: uppercase;
  color: var(--cfe-ds-color-graphite);
}
body.cfe-redesign .cfe-section-head h2 {
  margin-top: var(--cfe-ds-space-3);
  max-width: 720px;
}
body.cfe-redesign .cfe-section-head p {
  color: var(--cfe-ds-color-graphite);
  max-width: 420px;
  font-size: var(--cfe-ds-text-body-size);
  line-height: var(--cfe-ds-text-body-lh);
}
@media (max-width: 960px) {
  body.cfe-redesign .cfe-section-head {
    flex-direction: column;
    align-items: start;
  }
}

/* ============================================
   BUDDYBOSS THEME BREAKOUTS — Phase 2

   BuddyBoss theme clamps every page's content area to max-width: 800px
   via .site-content-grid. That's a sensible default for blog/community
   posts but kills any wide marketing layout.

   Every page that opts into the design system (.cfe-redesign body class)
   is by definition a marketing page that wants full-width — so we
   release those constraints automatically.

   Also hides the auto-injected entry-header H1 (page title) since
   marketing pages provide their own hero headline.
   ============================================ */

body.cfe-redesign .site-content-grid {
  max-width: none;
}
body.cfe-redesign #content > .container {
  max-width: none;
  padding: 0;
}
body.cfe-redesign .entry-header {
  display: none;
}
body.cfe-redesign .entry-content {
  background: var(--cfe-ds-color-fog);
}

/* ============================================
   EYEBROW — small uppercase label.
   Add .cfe-eyebrow--bullet for a leading dot.
   Add .cfe-eyebrow--group for sub-section labels with leading bar.
   ============================================ */
body.cfe-redesign .cfe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cfe-ds-space-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cfe-ds-color-sky-text);
}
body.cfe-redesign .cfe-eyebrow--bullet::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
body.cfe-redesign .cfe-eyebrow--group {
  font-weight: 500;
  letter-spacing: 0.16em;
  gap: var(--cfe-ds-space-3);
}
body.cfe-redesign .cfe-eyebrow--group::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--cfe-ds-color-sky-decorative);
  border-radius: 0;
}

/* ============================================
   PULSE — animated live-indicator dot.
   Use as <span class="cfe-pulse"></span>.
   ============================================ */
body.cfe-redesign .cfe-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cfe-ds-color-mint-text);
  box-shadow: 0 0 0 0 rgba(15, 122, 42, 0.5);
  animation: cfe-pulse 2s infinite;
}
@keyframes cfe-pulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 122, 42, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(15, 122, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 122, 42, 0); }
}

/* ============================================
   STRIKE — diagonal-line strike-through (for "was/now" pricing).
   ============================================ */
body.cfe-redesign .cfe-strike {
  position: relative;
  display: inline-block;
  color: var(--cfe-ds-color-graphite);
}
body.cfe-redesign .cfe-strike::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  top: 53%;
  height: 4px;
  background: var(--cfe-ds-color-ember-text);
  transform: rotate(-6deg);
  border-radius: 2px;
  pointer-events: none;
}

/* ============================================
   CARD MODIFIERS — extend .cfe-card

   --lifted: multi-layer shadow + hover lift. Use on "playful"
     pages (homepage, bundles) where cards should feel tactile.

   --featured: adds a "MOST POPULAR" ribbon at the top-left.
     Override the ribbon text via [data-ribbon="..."] attribute.
   ============================================ */
body.cfe-redesign .cfe-card--lifted {
  box-shadow: var(--cfe-ds-shadow-card-lift);
  transition:
    transform var(--cfe-ds-duration-smooth) var(--cfe-ds-ease-standard),
    box-shadow var(--cfe-ds-duration-smooth) var(--cfe-ds-ease-standard),
    border-color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign .cfe-card--lifted:hover {
  transform: translateY(-2px);
  box-shadow: var(--cfe-ds-shadow-card-lift);
}

body.cfe-redesign .cfe-card--featured {
  border-color: var(--cfe-ds-color-ink);
  position: relative;
}
body.cfe-redesign .cfe-card--featured::before {
  content: attr(data-ribbon, 'MOST POPULAR');
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: var(--cfe-ds-space-6);
  background: var(--cfe-ds-color-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  border-radius: var(--cfe-ds-radius-xs);
}
body.cfe-redesign .cfe-card--featured[data-ribbon]::before {
  content: attr(data-ribbon);
}

/* ============================================
   FAQ — accordion pattern using native <details>/<summary>
   Markup:
     <div class="cfe-faq">
       <details><summary>Question</summary>
         <div class="cfe-faq__body"><p>Answer</p></div>
       </details>
       ...
     </div>
   ============================================ */
body.cfe-redesign .cfe-faq {
  background: #fff;
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: var(--cfe-ds-radius-md);
  overflow: hidden;
}
body.cfe-redesign .cfe-faq details {
  border-bottom: 1px solid var(--cfe-ds-color-mist);
}
body.cfe-redesign .cfe-faq details:last-child { border-bottom: 0; }
body.cfe-redesign .cfe-faq summary {
  list-style: none;
  padding: var(--cfe-ds-space-5) var(--cfe-ds-space-6);
  cursor: pointer;
  font-family: var(--cfe-ds-font-headline);
  font-weight: 500;
  font-size: var(--cfe-ds-text-ui-size);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cfe-ds-space-4);
  color: var(--cfe-ds-color-ink);
  transition: background var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign .cfe-faq summary::-webkit-details-marker { display: none; }
body.cfe-redesign .cfe-faq summary:hover { background: var(--cfe-ds-color-fog); }
body.cfe-redesign .cfe-faq summary::after {
  content: '';
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    var(--cfe-ds-color-ink);
  width: 28px; height: 28px;
  border-radius: var(--cfe-ds-radius-sm);
  flex-shrink: 0;
}
body.cfe-redesign .cfe-faq details:not([open]) summary::after {
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    var(--cfe-ds-color-ink);
}
body.cfe-redesign .cfe-faq__body {
  padding: 4px var(--cfe-ds-space-6) var(--cfe-ds-space-5);
  color: var(--cfe-ds-color-graphite);
  font-size: 14.5px;
  line-height: 1.7;
}
body.cfe-redesign .cfe-faq__body p { margin-bottom: var(--cfe-ds-space-2); }
body.cfe-redesign .cfe-faq__body p:last-child { margin-bottom: 0; }
body.cfe-redesign .cfe-faq__body ul { margin: var(--cfe-ds-space-2) 0 var(--cfe-ds-space-3); padding-left: 20px; }
body.cfe-redesign .cfe-faq__body strong { color: var(--cfe-ds-color-ink); font-weight: 500; }

/* ============================================
   TABLE — base comparison table.
   Wrap in .cfe-table-wrap for rounded card around it.
   ============================================ */
body.cfe-redesign .cfe-table-wrap {
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: var(--cfe-ds-radius-md);
  overflow: hidden;
  background: #fff;
}
body.cfe-redesign .cfe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
body.cfe-redesign .cfe-table th,
body.cfe-redesign .cfe-table td {
  padding: var(--cfe-ds-space-4) var(--cfe-ds-space-3);
  text-align: center;
  border-bottom: 1px solid var(--cfe-ds-color-mist);
}
body.cfe-redesign .cfe-table thead th {
  background: var(--cfe-ds-color-mist);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cfe-ds-color-ink);
}
body.cfe-redesign .cfe-table td:first-child,
body.cfe-redesign .cfe-table th:first-child {
  text-align: left;
  padding-left: var(--cfe-ds-space-6);
  font-weight: 500;
  color: var(--cfe-ds-color-ink);
}
body.cfe-redesign .cfe-table tr:last-child td { border-bottom: 0; }
body.cfe-redesign .cfe-table tbody tr:hover td {
  background: var(--cfe-ds-color-fog);
}

/* =========================================================
   PHASE 1 TYPOGRAPHY LIFT — legacy course pages
   ---------------------------------------------------------
   The shop-courses listing (page id 10) and single course
   landing pages were built before the .cfe-scoped design
   system. Bring just the typeface forward as a low-risk
   first step toward a full re-skin.

   No !important so FontAwesome (.fa rules with !important)
   still wins on icon elements.
   ========================================================= */
body.page-id-10,
body.single-sfwd-courses,
body.single-sfwd-lessons,
body.single-sfwd-topic,
body.single-sfwd-quiz,
body.single-sfwd-assignment,
body.bp-user {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
body.page-id-10 :is(h1, h2, h3, h4, h5, h6),
body.single-sfwd-courses :is(h1, h2, h3, h4, h5, h6),
body.single-sfwd-lessons :is(h1, h2, h3, h4, h5, h6),
body.single-sfwd-topic :is(h1, h2, h3, h4, h5, h6),
body.single-sfwd-quiz :is(h1, h2, h3, h4, h5, h6),
body.single-sfwd-assignment :is(h1, h2, h3, h4, h5, h6),
body.bp-user :is(h1, h2, h3, h4, h5, h6) {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================================================
   PHASE 1B — LearnDash color + font token remap
   ---------------------------------------------------------
   LD30 theme exposes its color primitives + typography as
   CSS variables. Override them at body scope so every LD
   element that references --ld-color-primitives-* picks up
   CFE sky / mint / alert / ember. Anywhere LD uses a raw
   hex instead of the variable will fall through; address
   those with targeted overrides if/when they're visible.
   ========================================================= */
body.single-sfwd-courses,
body.single-sfwd-lessons,
body.single-sfwd-topic,
body.single-sfwd-quiz,
body.single-sfwd-assignment {
  /* Typography — make LD's font ramp resolve to Jakarta */
  --ld-typography-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Blue → CFE sky */
  --ld-color-primitives-blue-100: #EFF6FF;
  --ld-color-primitives-blue-150: #DBEAFE;
  --ld-color-primitives-blue-175: #BFDBFE;
  --ld-color-primitives-blue-200: #93C5FD;
  --ld-color-primitives-blue-500: #3E8AB8;
  --ld-color-primitives-blue-800: #1B2A3B;

  /* Green → CFE mint */
  --ld-color-primitives-green-100: #ECFDF5;
  --ld-color-primitives-green-250: #6EE7B7;
  --ld-color-primitives-green-300: #34D399;
  --ld-color-primitives-green-500: #0F7A2A;
  --ld-color-primitives-green-800: #064E1F;
  --ld-color-semantic-success:    #0F7A2A;

  /* Red → CFE alert */
  --ld-color-primitives-red-100: #FBEAE6;
  --ld-color-primitives-red-500: #C4553D;
  --ld-color-primitives-red-800: #7E2C1E;
}


/* =========================================================
   PHASE 1C — BuddyBoss user profile baseline color pass
   ---------------------------------------------------------
   BB Platform / theme use scattered raw hex codes (no CSS
   variable layer to remap). Start with the most visible
   accent surfaces: links, primary buttons, focus rings,
   page-title/section accents. Iterate as specific elements
   show through.
   ========================================================= */

/* Links inside the profile body — drop saturated cobalt to muted CFE sky */
body.bp-user a,
body.bp-user .bb-link,
body.bp-user .bb-cover-list-item a {
  color: var(--cfe-ds-color-sky-text, #3E8AB8);
}

/* Primary CTA buttons (BB nouveau pattern: .button, .submit, .bp-action-button.primary) */
body.bp-user .bp-action-button.primary,
body.bp-user button.bb-button-primary,
body.bp-user .button-primary,
body.bp-user input[type="submit"] {
  background-color: var(--cfe-ds-color-ember-border, #F8871F);
  border-color: var(--cfe-ds-color-ember-border, #F8871F);
  color: #fff;
}
body.bp-user .bp-action-button.primary:hover,
body.bp-user button.bb-button-primary:hover,
body.bp-user .button-primary:hover,
body.bp-user input[type="submit"]:hover {
  background-color: var(--cfe-ds-color-ember-text, #F8871F);
  filter: brightness(0.95);
}

/* Section / page title accents — keep ink text but neutralize blue stripes */
body.bp-user .bp-nouveau .bb_tab.action--active,
body.bp-user .bb-tab--active,
body.bp-user .bp-tabs .selected {
  border-color: var(--cfe-ds-color-ember-border, #F8871F) !important;
  color: var(--cfe-ds-color-ink, #1B2A3B) !important;
}

/* Focus ring */
body.bp-user a:focus-visible,
body.bp-user button:focus-visible,
body.bp-user input:focus-visible {
  outline: 2px solid var(--cfe-ds-color-sky-border, #93C5FD);
  outline-offset: 2px;
}
/* =========================================================
   PHASE 1D — WooCommerce form skin inside BB profile
   ---------------------------------------------------------
   Covers WC My Account forms embedded under /profile/*:
   edit-account, addresses, payment-methods. Applies CFE
   input + label + button patterns without touching WC core.
   ========================================================= */

/* Text inputs / textareas / selects */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="text"],
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="email"],
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="tel"],
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="password"],
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="number"],
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content textarea,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  color: var(--cfe-ds-color-ink, #1B2A3B);
  font-weight: 400;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: none;
}
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="text"]:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="email"]:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="tel"]:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="password"]:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input[type="number"]:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content textarea:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content select:hover {
  border-color: var(--cfe-ds-color-sky-decorative, #6BB0DB);
}
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content input:focus,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content textarea:focus,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content select:focus {
  outline: 0;
  border-color: var(--cfe-ds-color-sky-decorative, #6BB0DB);
  box-shadow: 0 0 0 3px rgba(107, 176, 219, 0.25);
}

/* Labels */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content label {
  display: block;
  font-weight: 500;
  color: var(--cfe-ds-color-ink, #1B2A3B);
  margin-bottom: 6px;
  font-size: 14px;
}

/* Required asterisk */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .required {
  color: var(--cfe-ds-color-alert, #C4553D);
  font-weight: 500;
}

/* Description below an input (e.g. "This will be how your name will be displayed") */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content em,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content small.description {
  display: block;
  margin-top: 6px;
  color: var(--cfe-ds-color-graphite, #5B6573);
  font-size: 13px;
  font-style: normal;
}

/* Fieldset + legend (e.g. Password change group) */
/* Wrap the whole field group in a card so loose fields (First name, Last name,
   Email, etc.) share the same panel treatment as the Password change fieldset. */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .woocommerce-account-fields,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .woocommerce-address-fields {
  /* border: 1px solid var(--cfe-ds-color-mist, #E8EAED); */
  /* border-radius: 10px; */
  /* padding: 20px; */
}

/* The inner fieldset becomes a flat section inside the card — the legend
   acts as the divider. Still skin generic fieldsets elsewhere. */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .woocommerce-account-fields fieldset,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .woocommerce-address-fields fieldset {
  border: 0;
  border-top: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  border-radius: 0;
  background: transparent;
  padding: 18px 0 0;
  margin: 18px 0 0;
}
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  border-radius: 10px;
  padding: 20px;
  margin: 18px 0;
  background: var(--cfe-ds-color-fog, #F4F5F7);
}
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content fieldset legend {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cfe-ds-color-ink, #1B2A3B);
  padding: 0 8px;
  font-size: 16px;
}

/* Primary submit button — "Save changes" / "Save address" / etc. */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content button[type="submit"],
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .woocommerce-Button,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .button {
  background: var(--cfe-ds-color-ember-border, #F8871F);
  border: 1px solid var(--cfe-ds-color-ember-border, #F8871F);
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  text-decoration: none;
}
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content button[type="submit"]:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .woocommerce-Button:hover,
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .button:hover {
  filter: brightness(0.95);
}

/* Section heading (Account details, Addresses, etc.) */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .wc-MyAccount-sub-heading h2 {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cfe-ds-color-ink, #1B2A3B);
  font-size: 22px;
  margin: 0 0 6px;
}

/* Sub-heading description (The following addresses will be used... etc.) */
body:is(.bp-user, .woocommerce-account) .woocommerce-MyAccount-content .wc-MyAccount-sub-heading p {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--cfe-ds-color-graphite, #5B6573);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* =========================================================
   PHASE 1E — /profile/addresses/ index (WC Addresses cards)
   ========================================================= */

/* WC adds a clearfix on .woocommerce-account .woocommerce::before/::after
   (display:table). When the inner .woocommerce-Addresses goes display:grid the
   pseudo-element becomes a grid item and pushes the cards apart. Kill it. */
.woocommerce-account .MyAccount-content--address .woocommerce::before,
.woocommerce-account .MyAccount-content--address .woocommerce::after,
.MyAccount-content--address .woocommerce::before,
.MyAccount-content--address .woocommerce::after {
  content: none !important;
  display: none !important;
}

/* Side-by-side via flex (drops grid). !important + selector beat WC u-columns
   float rules. Wraps to a single column on narrow viewports. */
.MyAccount-content--address .u-columns.woocommerce-Addresses {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}
.MyAccount-content--address .u-columns .u-column1,
.MyAccount-content--address .u-columns .u-column2,
.MyAccount-content--address .u-columns .col-1,
.MyAccount-content--address .u-columns .col-2 {
  float: none !important;
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
}

/* Each address card — fog panel matching the edit-account form card */
.MyAccount-content--address .woocommerce-Address {
  border: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  border-radius: 10px;
  padding: 20px;
  background: var(--cfe-ds-color-fog, #F4F5F7);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* "Billing address" / "Shipping address" heading inside the card */
.MyAccount-content--address .woocommerce-Address-title h3 {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 18px;
  color: var(--cfe-ds-color-ink, #1B2A3B);
  margin: 0;
}

/* The address block itself */
.MyAccount-content--address .woocommerce-Address address {
  font-style: normal;
  color: var(--cfe-ds-color-graphite, #5B6573);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Edit link styled as a small ember CTA, self-aligned to card bottom-right */
.MyAccount-content--address .woocommerce-Address a.edit {
  align-self: flex-start;
  background: var(--cfe-ds-color-ember-border, #F8871F);
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter .15s ease;
}
.MyAccount-content--address .woocommerce-Address a.edit:hover {
  filter: brightness(0.95);
}

/* =========================================================
   PHASE 1F — /profile/payment-methods/ (saved cards table)
   ---------------------------------------------------------
   WC renders a shop_table_responsive table of saved cards.
   Skin the table itself; override the in-row Delete/Default
   action buttons (PHASE 1D already paints all .button ember,
   which is wrong for destructive + secondary row actions).
   ========================================================= */

/* Table wrapper — fog panel matching settings + addresses cards */
.woocommerce-account .woocommerce-MyAccount-paymentMethods {
  border: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  border-radius: 10px;
  background: var(--cfe-ds-color-fog, #F4F5F7);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  overflow: hidden;
}

/* Header row */
.woocommerce-account .woocommerce-MyAccount-paymentMethods thead th {
  background: transparent;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cfe-ds-color-graphite, #5B6573);
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  text-align: left;
}

/* Body cells */
.woocommerce-account .woocommerce-MyAccount-paymentMethods tbody td {
  background: #fff;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: var(--cfe-ds-color-ink, #1B2A3B);
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods tbody tr:last-child td {
  border-bottom: 0;
}

/* Default-card row — soft ember tint + "Default" label via the method cell */
.woocommerce-account .woocommerce-MyAccount-paymentMethods tr.default-payment-method td {
  background: #FFF7EE;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods tr.default-payment-method td.woocommerce-PaymentMethod--method::after {
  content: 'Default';
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cfe-ds-color-ember-border, #F8871F);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Actions cell — right-align + compact gap between pills */
.woocommerce-account .woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--actions {
  text-align: right;
  white-space: nowrap;
}

/* Override PHASE 1D's blanket .button ember inside the table.
   Both actions become compact text-style links; Delete = alert,
   Make default = sky (neutral secondary). */
.woocommerce-account .woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--actions .button {
  background: transparent !important;
  border: 1px solid var(--cfe-ds-color-mist, #E8EAED) !important;
  color: var(--cfe-ds-color-ink, #1B2A3B) !important;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  margin-left: 6px;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--actions .button:hover {
  filter: none;
  border-color: var(--cfe-ds-color-sky-decorative, #6BB0DB) !important;
  color: var(--cfe-ds-color-sky-decorative, #6BB0DB) !important;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--actions .button.delete {
  color: var(--cfe-ds-color-alert, #C4553D) !important;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--actions .button.delete:hover {
  border-color: var(--cfe-ds-color-alert, #C4553D) !important;
  color: var(--cfe-ds-color-alert, #C4553D) !important;
  background: rgba(196, 85, 61, 0.06) !important;
}

/* Empty-state notice ("No saved methods found.") */
.woocommerce-account .MyAccount-content--payment-methods .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info {
  background: var(--cfe-ds-color-fog, #F4F5F7);
  border: 1px solid var(--cfe-ds-color-mist, #E8EAED);
  border-left: 3px solid var(--cfe-ds-color-sky-decorative, #6BB0DB);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--cfe-ds-color-graphite, #5B6573);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

/* Bottom "Add payment method" CTA — give it breathing room below
   the table; PHASE 1D already paints it ember. */
.woocommerce-account .MyAccount-content--payment-methods > a.button[href*="add-payment-method"],
.woocommerce-account .woocommerce-MyAccount-content > a.button[href*="add-payment-method"] {
  display: inline-block;
  margin-top: 18px;
}

/* =========================================================
   PHASE 1G — /profile/notifications/ (heading weight)
   ---------------------------------------------------------
   BB renders the page heading as bold; drop to normal to
   match the design lift's lighter heading treatment.
   ========================================================= */
#buddypress .notifications-header .entry-title {
  font-weight: 400;
}

/* =========================================================
   Layout bleed fix — full-width Elementor pages.
   BB's gutter pattern (-10px side margins on .site-content-grid,
   offset by 10px side padding on the Elementor wrapper) bleeds
   10px past the viewport at EVERY width on these pages, giving
   a horizontal scrollbar. Zero both: the content edge stays
   pixel-identical. Supersedes the mobile-only rule that briefly
   lived in learndash-course-list-updates.css (PR #92).
   ========================================================= */
body.page-id-10 .bb-grid.site-content-grid,
body.page-id-3462 .bb-grid.site-content-grid {
  margin-left: 0;
  margin-right: 0;
}
body.page-id-10 .site-content-grid > .elementor,
body.page-id-3462 .site-content-grid > .elementor {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   Account dashboard panel radius (Tuan 2026-07-14)
   BuddyBoss ReadyLaunch ships .bsMyAccount--dashboard-inner
   at a near-square 4px. Round it to the CFE outer-container
   radius so the panel matches the card system inside it.
   Scope = the /profile/* WC account tabs that use this panel
   (Credit Bundles, Payment Methods, Addresses, Settings).
   ========================================================= */
body:is(.bp-user, .woocommerce-account) .bsMyAccount--dashboard-inner {
  border-radius: var(--cfe-ds-radius-lg, 20px);
}

/* ...and drop the inner MyAccount-content stray 1px border-left (a vestigial
   nav divider at radius 0) inside that rounded panel — with the panel corner
   now curved, the straight border poked past the arc. Panel border is the
   sole frame; this only affects tabs that have the .bsMyAccount panel. */
body:is(.bp-user, .woocommerce-account) .bsMyAccount--dashboard-inner .woocommerce-MyAccount-content {
  border-left: 0;
}


/* ==========================================================================
   PHASE 1H — /profile/payment-methods/ tab bar (.cfe-pm-tabs)
   Segmented control linking the saved-cards list and the add-card form
   (Design redesign 2026-07-14, CU 86baxydut). Tabs are plain links —
   Option A, no JS; the active tab is the current URL, marked with
   aria-current="page". Markup comes from woocommerce-custom
   WC_CF_Payment_Methods_Redesign::render_tabs(); the feature is gated
   behind the woocommerce_payment_methods_redesign toggle, so these rules
   are inert while it is off. Scoped under .woocommerce-MyAccount-content
   so BB theme link rules can't out-rank the label color. */

.woocommerce-MyAccount-content .cfe-pm-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 0 0 24px;
  background: var(--cfe-ds-color-fog);
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: 12px;
  padding: 4px;
}

.woocommerce-MyAccount-content .cfe-pm-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--cfe-ds-color-graphite);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 18px;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.woocommerce-MyAccount-content .cfe-pm-tabs a:hover {
  color: var(--cfe-ds-color-ink);
  text-decoration: none;
}

.woocommerce-MyAccount-content .cfe-pm-tabs a[aria-current="page"] {
  background: var(--cfe-ds-color-sky-bg, #EFF6FF);
  border-color: var(--cfe-ds-color-sky-border, #93C5FD);
  color: var(--cfe-ds-color-sky-text, #3E8AB8);
  box-shadow: none;
}

.woocommerce-MyAccount-content .cfe-pm-tabs svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}


/* ==========================================================================
   PHASE 1I — /profile/payment-methods/add-payment-method/ polish
   (Design redesign 2026-07-14 §3, CU 86baxydut; feature-gated behind
   woocommerce_payment_methods_redesign like PHASE 1H.)
   Two overrides only — the Stripe iframe internals are untouched:
   1) Payment box: BB theme's lavender rgba(129,110,153,.14) → fog, arrow
      notch (::before) retinted to match.
   2) Submit (#place_order): PHASE 1D paints every .button ember; the
      add-card submit goes ink instead, hover ink-deep. Double-ID selector
      out-ranks the 1D blanket without !important. */

.woocommerce-MyAccount-content #add_payment_method #payment {
  background: var(--cfe-ds-color-fog);
}

.woocommerce-MyAccount-content #add_payment_method #payment div.payment_box {
  background: var(--cfe-ds-color-fog);
  color: var(--cfe-ds-color-ink);
}

.woocommerce-MyAccount-content #add_payment_method #payment div.payment_box::before {
  border-bottom-color: var(--cfe-ds-color-fog);
  border-color: transparent transparent var(--cfe-ds-color-fog);
}

.woocommerce-MyAccount-content #add_payment_method #place_order,
.woocommerce-MyAccount-content #add_payment_method #place_order.button.alt {
  background: var(--cfe-ds-color-ink);
  border-color: var(--cfe-ds-color-ink);
  color: #fff;
}

.woocommerce-MyAccount-content #add_payment_method #place_order:hover,
.woocommerce-MyAccount-content #add_payment_method #place_order:focus {
  background: var(--cfe-ds-color-ink-deep);
  border-color: var(--cfe-ds-color-ink-deep);
  color: #fff;
}


/* ==========================================================================
   PHASE 2 — /profile/payment-methods/ card-list reskin (.cfe-pm-cards)
   (Design redesign 2026-07-14 §2 + §4 mobile, CU 86baxydut.) Markup comes
   from the woocommerce-custom template override myaccount/payment-methods.php,
   feature-gated behind woocommerce_payment_methods_redesign like 1H/1I —
   these rules are inert while the toggle is off. Scoped under
   .woocommerce-MyAccount-content so BB theme link rules can't out-rank the
   action labels. APPEND-ONLY block. */

.woocommerce-MyAccount-content .cfe-pm-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
}

.woocommerce-MyAccount-content .cfe-pm-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-MyAccount-content .cfe-pm-card:hover {
  border-color: #CBD0D8; /* guide §2 hover border */
  box-shadow: 0 4px 14px -8px rgba(20, 30, 45, .25);
}

/* Comp: the default card is sky-outlined, not mist. */
.woocommerce-MyAccount-content .cfe-pm-card.is-default,
.woocommerce-MyAccount-content .cfe-pm-card.is-default:hover {
  border-color: var(--cfe-ds-color-sky-border);
}

.woocommerce-MyAccount-content .cfe-pm-card__chip {
  flex: 0 0 58px;
  width: 58px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: 8px;
  overflow: hidden;
}

.woocommerce-MyAccount-content .cfe-pm-card__chip img {
  width: 46px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.woocommerce-MyAccount-content .cfe-pm-card__chip--text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cfe-ds-color-graphite);
}

.woocommerce-MyAccount-content .cfe-pm-card__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.woocommerce-MyAccount-content .cfe-pm-card__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--cfe-ds-color-ink);
}

.woocommerce-MyAccount-content .cfe-pm-card__meta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  color: var(--cfe-ds-color-graphite);
}

.woocommerce-MyAccount-content .cfe-pm-card__meta.is-expiring {
  color: var(--cfe-ds-color-ember-text);
}

.woocommerce-MyAccount-content .cfe-pm-card__default {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--cfe-ds-color-sky-text);
  background: var(--cfe-ds-color-sky-bg);
  border: 1px solid var(--cfe-ds-color-sky-border);
  border-radius: var(--cfe-ds-radius-full, 999px);
  padding: 4px 9px;
}

.woocommerce-MyAccount-content .cfe-pm-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.woocommerce-MyAccount-content a.cfe-pm-card__action {
  display: inline-flex;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border-radius: 8px;
  padding: 9px 14px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.woocommerce-MyAccount-content a.cfe-pm-card__action--default {
  color: var(--cfe-ds-color-ink);
  background: #fff;
  border: 1px solid var(--cfe-ds-color-mist);
  order: -1; /* comp order: Set as default before Delete; markup keeps WC's action order */
}

.woocommerce-MyAccount-content a.cfe-pm-card__action--default:hover {
  border-color: #CBD0D8;
  color: var(--cfe-ds-color-ink);
  text-decoration: none;
}

.woocommerce-MyAccount-content a.cfe-pm-card__action--delete {
  color: var(--cfe-ds-color-graphite);
  border: 1px solid transparent;
}

.woocommerce-MyAccount-content a.cfe-pm-card__action--delete:hover {
  color: var(--cfe-ds-color-alert);
  background: color-mix(in srgb, var(--cfe-ds-color-alert) 8%, transparent);
  text-decoration: none;
}

/* Mobile (§4): the flex row wraps actions under the info block; keep them
   right-aligned. No data-title stacking anymore — the markup has none. */
@media (max-width: 600px) {
  .woocommerce-MyAccount-content .cfe-pm-card {
    flex-wrap: wrap;
    gap: 12px 14px;
  }

  .woocommerce-MyAccount-content .cfe-pm-card__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* =====================================================================
   PHASE 5 — add-payment-method set-default-on-add checkbox
   (Design redesign 2026-07-14 §3 optional, CU 86baxydut.) Markup renders
   via woocommerce_add_payment_method_form_bottom from
   WC_CF_Payment_Methods_Redesign::render_set_default_checkbox() — inert
   while woocommerce_payment_methods_redesign is off, and only shown when
   the user already has a saved card. APPEND-ONLY block. */

.woocommerce-MyAccount-content .cfe-pm-default-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 2px 0;
  font-size: 14px;
  color: var(--cfe-ds-color-graphite);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.woocommerce-MyAccount-content .cfe-pm-default-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--cfe-ds-color-ink);
  cursor: pointer;
}

/* =====================================================================
   PHASE 5B — add-payment-method comp parity (Design comp 2026-07-15,
   CU 86baxydut). Single-gateway page: strip the gateway chrome (radio,
   "Credit Card" label, FunnelKit description/test-mode boilerplate —
   replaced by .cfe-pm-secure-note from PHP), retire the PHASE 1I fog
   panel, and put the set-default checkbox + Save card on one divider-
   topped row. Equal-specificity overrides of PHASE 1I/5 — this block
   must stay AFTER them in the file. APPEND-ONLY block. */

.woocommerce-MyAccount-content #add_payment_method #payment {
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.woocommerce-MyAccount-content #add_payment_method ul.payment_methods {
  flex: 0 0 100%;
  margin: 0 0 18px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--cfe-ds-color-fog);
  list-style: none;
}

.woocommerce-MyAccount-content #add_payment_method li.woocommerce-PaymentMethod {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-content #add_payment_method li.woocommerce-PaymentMethod > input.input-radio,
.woocommerce-MyAccount-content #add_payment_method li.woocommerce-PaymentMethod > label,
.woocommerce-MyAccount-content #add_payment_method .fkwcs-test-description {
  display: none !important;
}

.woocommerce-MyAccount-content #add_payment_method #payment div.payment_box {
  background: transparent;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-content #add_payment_method #payment div.payment_box::before {
  display: none;
}

.woocommerce-MyAccount-content .cfe-pm-default-opt {
  margin: 0;
  flex: 1 1 auto;
}

.woocommerce-MyAccount-content #add_payment_method .form-row {
  margin: 0 0 0 auto;
  padding: 0;
}

.woocommerce-MyAccount-content .cfe-pm-secure-note {
  order: 10;
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cfe-ds-color-graphite);
}

.woocommerce-MyAccount-content .cfe-pm-secure-note svg {
  flex: 0 0 auto;
  margin-top: 3px;
}

@media (max-width: 600px) {
  .woocommerce-MyAccount-content .cfe-pm-default-opt {
    flex-basis: 100%;
    margin: 0 0 14px;
  }

  .woocommerce-MyAccount-content #add_payment_method .form-row {
    margin: 0;
    width: 100%;
  }

  .woocommerce-MyAccount-content #add_payment_method #place_order {
    width: 100%;
  }
}

/* Theme paints form labels display:block + margin-bottom at higher
   specificity — the ID hop wins it back for the checkbox row. */
.woocommerce-MyAccount-content #add_payment_method .cfe-pm-default-opt {
  display: flex;
  align-items: center;
  margin: 0;
  flex: 1 1 auto;
}


/* ==========================================================================
   PHASE 6 — payment-methods merged tab (Option B page merge,
   CU 86baxydut, toggle woocommerce_payment_methods_merged_tab).
   The add-card form now renders inside /profile/payment-methods/ as a
   second .cfe-pm-panel; all of its PHASE 1I/5B styling keys on
   #add_payment_method so it applies unchanged here. This block only owns
   panel visibility + spacing. APPEND-ONLY block. */

/* Belt-and-braces: BB/theme resets must never resurface a [hidden] panel
   (panel state is the whole feature). */
.woocommerce-MyAccount-content .cfe-pm-panel[hidden] {
  display: none !important;
}

/* The tab bar already carries the 20px gap below itself (PHASE 1H margin);
   keep panels flush so list and add tabs sit at identical vertical rhythm. */
.woocommerce-MyAccount-content .cfe-pm-panel {
  margin: 0;
}

/* Embedded add form: the standalone page relied on page padding for its
   left/right breathing room; inside the panel the form spans the content
   column already, so just mirror the list's bottom spacing. */
.woocommerce-MyAccount-content .cfe-pm-panel--add #add_payment_method {
  margin: 0 0 8px;
}

/* BB paints .button display:inline-block at higher precedence than the UA
   [hidden] rule — same belt-and-braces for the merged add button. */
.woocommerce-MyAccount-content .cfe-pm-add--merged[hidden] {
  display: none !important;
}


/* ==========================================================================
   PHASE 1K — /profile/addresses/ redesign (.cfe-addr-*)
   One-screen Billing/Shipping toggle + Profile-pattern section card with a
   read grid and full-reload inline edit (Design handoff 2026-07-15, CU
   86bay749w). Markup: woocommerce-custom templates/myaccount/my-address.php
   + form-edit-address.php via WC_CF_Addresses_Redesign.
   Scoped to .woocommerce-MyAccount-content (same choice as the PHASE 1H
   payment-methods tab bar — the profile-embedded WC screens don't reliably
   carry body.cfe-redesign). Tokens are :root-scoped, so var(--cfe-ds-*)
   resolves here. No orange anywhere; Save is the Ink-fill live canon.
   ========================================================================== */

/* --- Billing/Shipping segmented control (links, full reload) ---
   Same spec as the PHASE 1H payment-methods bar (.cfe-pm-tabs): fog rail,
   white active pill. No icons — labels only. */
.woocommerce-MyAccount-content .cfe-addr-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  background: var(--cfe-ds-color-fog);
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: 12px;
  padding: 4px;
  margin: 0 !important; /* BB theme's .buddypress-wrap.bp-dir-hori-nav nav rule (0,3,1)
    out-specs our (0,2,0) and forces margin-bottom:20px on any <nav>, inflating the
    card header and pushing this off-center against the pencil button. */
}
.woocommerce-MyAccount-content .cfe-addr-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cfe-ds-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--cfe-ds-color-graphite);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 9px 18px;
  border-radius: 9px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.woocommerce-MyAccount-content .cfe-addr-tabs a:hover {
  color: var(--cfe-ds-color-ink);
  text-decoration: none;
}
.woocommerce-MyAccount-content .cfe-addr-tabs a[aria-current="page"] {
  background: var(--cfe-ds-color-sky-bg, #EFF6FF);
  border-color: var(--cfe-ds-color-sky-border, #93C5FD);
  color: var(--cfe-ds-color-sky-text, #3E8AB8);
  box-shadow: none;
}
.woocommerce-MyAccount-content .cfe-addr-tabs svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* --- Section card (Profile pattern) ---
   Border/shadow dropped (2026-07-20): .woocommerce-MyAccount-content
   already renders the white bordered panel for this endpoint, and this
   rule was drawing a second nested border+shadow inside it. Padding zeroed
   (Tuan 2026-07-20): this template bypasses wc-MyAccount-inner-content
   (theme's own 20px-vertical/0-horizontal default), so card content now
   sits flush -- no other inset spacing source for this endpoint. */
.woocommerce-MyAccount-content .cfe-addr-card {
  padding: 0;
}
.woocommerce-MyAccount-content .cfe-addr-card__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.woocommerce-MyAccount-content .cfe-addr-divider {
  height: 1px;
  background: var(--cfe-ds-color-mist);
  margin: 20px 0 26px;
}

/* --- Pencil edit affordance (38px icon button, links to the edit URL) --- */
.woocommerce-MyAccount-content .cfe-addr-editbtn {
  flex: 0 0 auto;
  margin-left: auto; /* no h3 spacer left in the header now (removed per Tuan, redundant with the tabs above) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--cfe-ds-color-graphite);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce-MyAccount-content .cfe-addr-editbtn:hover {
  background: var(--cfe-ds-color-fog);
  border-color: #CBD0D8;
  color: var(--cfe-ds-color-ink);
}
.woocommerce-MyAccount-content .cfe-addr-editbtn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(27, 42, 59, .18);
}
.woocommerce-MyAccount-content .cfe-addr-editbtn svg {
  width: 17px;
  height: 17px;
}
/* "Edit" text label is mobile-only (matches /profile/'s labeled Edit button);
   desktop keeps the 38px icon square. */
.woocommerce-MyAccount-content .cfe-addr-editbtn__label {
  display: none;
}

/* --- Cancel / Save (header tools, edit state) --- */
.woocommerce-MyAccount-content .cfe-addr-card__tools {
  flex: 0 0 auto;
  margin-left: auto; /* editbtn's push-right doesn't apply while it's hidden mid-edit */
  display: flex;
  align-items: center;
  gap: 10px;
}
.woocommerce-MyAccount-content .cfe-addr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cfe-ds-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.woocommerce-MyAccount-content .cfe-addr-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(27, 42, 59, .18);
}
/* Save = live .cfe-btn--primary canon (Ink fill), matching Profile's Save.
   !important: the BB theme paints account submit buttons ember via its own
   button cascade — no orange here per the handoff. */
.woocommerce-MyAccount-content button.cfe-addr-btn--save {
  background: var(--cfe-ds-color-ink) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.woocommerce-MyAccount-content button.cfe-addr-btn--save:hover {
  background: var(--cfe-ds-color-ink-deep) !important;
  color: #FFFFFF !important;
}
/* Cancel = Profile's light Fog-fill control (.cfe-btn--ghost is undefined). */
.woocommerce-MyAccount-content a.cfe-addr-btn--cancel {
  background: var(--cfe-ds-color-fog) !important;
  border-color: transparent !important;
  color: var(--cfe-ds-color-ink) !important;
}
.woocommerce-MyAccount-content a.cfe-addr-btn--cancel:hover {
  background: var(--cfe-ds-color-mist) !important;
  color: var(--cfe-ds-color-ink) !important;
}

/* --- Read grid: 2-up label/value --- */
.woocommerce-MyAccount-content .cfe-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 168px;
  max-width: 980px;
}
.woocommerce-MyAccount-content .cfe-addr-field__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cfe-ds-color-graphite);
  margin: 0 0 6px;
}
.woocommerce-MyAccount-content .cfe-addr-field__req {
  color: var(--cfe-ds-color-rose-text, #B4231E);
  margin-left: 2px;
}
.woocommerce-MyAccount-content .cfe-addr-field__opt {
  font-weight: 400;
}
.woocommerce-MyAccount-content .cfe-addr-field__value {
  font-size: 16px;
  line-height: 1.5;
  color: var(--cfe-ds-color-ink);
  overflow-wrap: anywhere;
}
.woocommerce-MyAccount-content .cfe-addr-field__value--empty {
  color: #9AA3AE; /* designed "Not set" tone (lighter than graphite) */
}

/* --- Edit grid: Woo form-rows laid onto the same 2-up grid --- */
/* Delta #9: no gray inset panel — the form sits directly on the Paper card.
   The theme paints/sizes .woocommerce-address-fields on account pages. */
.woocommerce-MyAccount-content .cfe-addr .woocommerce-address-fields,
.woocommerce-MyAccount-content .cfe-addr .woocommerce-address-fields__field-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit {
  gap: 26px 168px;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit p.form-row {
  float: none !important;
  width: 100% !important; /* theme pins form-row-first/-last to 49% !important */
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cfe-ds-color-graphite);
  margin: 0 0 6px;
}
/* Red asterisk for required fields (STYLE-GUIDE "Field" spec) — WC's own
   stock <abbr class="required">*</abbr>. Was hidden under an earlier "no
   asterisks, (optional) marks the exceptions" convention; Tuan asked for it
   back 2026-07-21 alongside the Phase 3 save-feedback contract. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row .required {
  display: inline;
  color: var(--cfe-ds-color-rose-text, #B4231E);
  text-decoration: none;
  margin-left: 2px;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row .optional {
  font-weight: 400;
  color: var(--cfe-ds-color-graphite);
}
/* Theme narrows the name pair (form-row-first/-last) — every input fills
   its grid cell, like the comp. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .woocommerce-input-wrapper {
  display: block;
  width: 100% !important;
  max-width: none !important;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit p.form-row {
  max-width: none !important;
}
/* !important on the box model + fills: BB theme input rules on account pages
   otherwise win and leave the fields white/rounded differently. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .input-text,
.woocommerce-MyAccount-content .cfe-addr-grid--edit select {
  display: block;
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-family: var(--cfe-ds-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 15px !important;
  color: var(--cfe-ds-color-ink) !important;
  background-color: var(--cfe-ds-color-fog) !important;
  border: 1px solid var(--cfe-ds-color-mist) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  outline: 0;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6573' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .input-text:hover,
.woocommerce-MyAccount-content .cfe-addr-grid--edit select:hover {
  border-color: #CBD0D8 !important;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .input-text:focus,
.woocommerce-MyAccount-content .cfe-addr-grid--edit select:focus {
  border-color: var(--cfe-ds-color-sky-border, #93C5FD) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .28) !important;
}
/* selectWoo/select2-enhanced country & state fields get the same look. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .select2-container .select2-selection--single {
  height: 40px;
  background: var(--cfe-ds-color-fog);
  border: 1px solid var(--cfe-ds-color-mist);
  border-radius: 10px;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 14px;
  padding-right: 40px;
  font-size: 15px;
  color: var(--cfe-ds-color-ink);
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 8px;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .select2-container--focus .select2-selection--single,
.woocommerce-MyAccount-content .cfe-addr-grid--edit .select2-container--open .select2-selection--single {
  border-color: var(--cfe-ds-color-sky-border, #93C5FD);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .28);
}


/* --- Mobile (≤640px): 1-up grids, tabs share the row with the pencil --- */
@media (max-width: 640px) {
  /* Match /profile/'s mobile header (Tuan 07/22 "make them match",
     supersedes the earlier one-row tabs+pencil layout): the strip takes
     the full row and scrolls, icons back on, and the Edit control drops
     to its own full-width row below (rules further down). */
  .woocommerce-MyAccount-content .cfe-addr-tabs {
    flex: 1 1 100%;
    width: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .woocommerce-MyAccount-content .cfe-addr-tabs::-webkit-scrollbar {
    display: none;
  }
  /* Only two tabs here (Billing/Shipping) -- split the rail 50/50 and
     center the labels instead of left-stacking (Tuan 07/22 screenshot). */
  .woocommerce-MyAccount-content .cfe-addr-tabs a {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding: 9px 12px;
  }
  /* The BB theme pads the whole account content panel 30px; on mobile
     that doubles up with the card's own padding and squeezes the grid
     (Tuan 07/22). :has() scopes the removal to the addresses screen only
     -- other WC endpoints (orders, payment methods) keep theirs. Extra
     .woocommerce out-specs the theme's (0,2,0) rule. */
  .woocommerce .woocommerce-MyAccount-content:has(.cfe-addr-card) {
    padding: 0;
  }
  .woocommerce-MyAccount-content .cfe-addr-card {
    padding: 24px 20px;
  }
  .woocommerce-MyAccount-content .cfe-addr-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .woocommerce-MyAccount-content .cfe-addr-btn {
    min-height: 44px;
  }
  /* Full-row labeled Edit, /profile/'s mobile spec: mist fill, centered
     pencil+label, 44px, 6px below the strip (matches Save/Cancel's offset
     so the row doesn't shift when the controls toggle). */
  .woocommerce-MyAccount-content .cfe-addr-editbtn {
    flex: 0 0 100%;
    width: auto;
    height: auto;
    min-height: 44px;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--cfe-ds-color-mist, #E8EAED);
    border-color: var(--cfe-ds-color-mist, #E8EAED);
    color: var(--cfe-ds-color-ink, #1B2A3B);
    font-family: var(--cfe-ds-font-body, "Plus Jakarta Sans", sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
  }
  .woocommerce-MyAccount-content .cfe-addr-editbtn:hover {
    background: var(--cfe-ds-color-border-hover, #CBD0D8);
    border-color: var(--cfe-ds-color-border-hover, #CBD0D8);
  }
  .woocommerce-MyAccount-content .cfe-addr-editbtn__label {
    display: inline;
    line-height: 1;
  }
}


/* ==========================================================================
   PHASE 2 — /profile/addresses/ inline edit (.cfe-addr-card .is-editing)
   Phase 1K's card now renders BOTH states (read grid + edit form) and
   cfe-addresses-redesign.js flips .is-editing (pencil/Cancel/AJAX save).
   Read state is the default; these rules pick which half shows.
   ========================================================================== */
.woocommerce-MyAccount-content .cfe-addr-card .cfe-addr-card__tools,
.woocommerce-MyAccount-content .cfe-addr-card .woocommerce-address-fields {
  display: none;
}
.woocommerce-MyAccount-content .cfe-addr-card.is-editing .cfe-addr-card__tools {
  display: flex;
}
.woocommerce-MyAccount-content .cfe-addr-card.is-editing .woocommerce-address-fields {
  display: block;
}
.woocommerce-MyAccount-content .cfe-addr-card.is-editing .cfe-addr-grid--read,
.woocommerce-MyAccount-content .cfe-addr-card.is-editing .cfe-addr-editbtn {
  display: none;
}

/* Save while the fetch is in flight. */
.woocommerce-MyAccount-content button.cfe-addr-btn--save[disabled] {
  opacity: .6;
  cursor: default;
}

/* Inline validation errors (WC's notice list, scraped on AJAX save). */
.woocommerce-MyAccount-content .cfe-addr-errors {
  background: #FBF1EF;
  border: 1px solid var(--cfe-ds-color-alert);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.woocommerce-MyAccount-content .cfe-addr-errors[hidden] {
  display: none;
}
.woocommerce-MyAccount-content .cfe-addr-errors ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.woocommerce-MyAccount-content .cfe-addr-errors li {
  color: var(--cfe-ds-color-alert);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* =====================================================================
   PHASE 3 — /profile/addresses/ client-side tab toggle (CU 86bay749w)
   Both cards ship in the DOM; the inactive one carries [hidden]. The BB
   theme sets display on enough account containers that the UA default
   for [hidden] needs re-asserting.
   ===================================================================== */
.woocommerce-MyAccount-content .cfe-addr-card[hidden] {
  display: none !important;
}

/* ==========================================================================
   CU 86bb12f7c Phase 3 — save-feedback contract (cfe-unified-account-
   handoff-20260721 STYLE-GUIDE "Save-feedback contract") applied to the
   Addresses card, matching /profile/'s Phase 2 pattern (.uc-fpill,
   .cfe-field-alert, .bp-widget.saving, tr.flash) 1:1 in this card's own
   selectors. Values are canon --cfe-ds-* tokens, no new hex.
   ========================================================================== */

/* "Required" pill on a blank required field (Validate on Save, never on
   entry). form-row.woocommerce-invalid is WC's own stock class, added
   client-side by cfe-addresses-redesign.js mirroring checkout.js. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row {
  position: relative;
}
/* WC wraps every control in an inline <span class="woocommerce-input-wrapper">;
   block it so it spans the input and can anchor the pill. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row .woocommerce-input-wrapper {
  position: relative;
  display: block;
}
.woocommerce-MyAccount-content .cfe-addr-fpill {
  /* /profile geometry (.uc-fpill): inset inside the control's right edge,
     vertically centered — not top-of-row (Tuan 7/21). */
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  color: var(--cfe-ds-color-rose-text, #B4231E);
  background: var(--cfe-ds-color-rose-bg, #FEF2F2);
  border: 1px solid var(--cfe-ds-color-rose-border, #F7B3B3);
}

/* Header count — "N fields need attention" — sits inside the same flex
   group as Save/Cancel, pushing them right (mirrors Profile's
   .bbcf-bulk-actions .cfe-field-alert placement). */
.woocommerce-MyAccount-content .cfe-addr-card__tools .cfe-addr-alert {
  font-size: 12px;
  font-weight: 500;
  color: var(--cfe-ds-color-rose-text, #B4231E);
  margin-right: auto;
}

/* Saving — dim + inert the whole card (Guide step 3); Cancel is covered by
   the same pointer-events:none so it needs no separate disabled state. */
.woocommerce-MyAccount-content .cfe-addr-card.is-saving {
  opacity: .72;
  pointer-events: none;
}
.woocommerce-MyAccount-content .cfe-addr-sp {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  animation: cfe-addr-sp 1s linear infinite;
}
@keyframes cfe-addr-sp {
  to { transform: rotate(360deg); }
}

/* Changed-row mint flash on success — .flash is added to ONLY the
   .cfe-addr-field rows whose displayed value actually changed. */
.woocommerce-MyAccount-content .cfe-addr-field.flash {
  animation: cfe-addr-flashg 1.6s cubic-bezier(.4, 0, .2, 1);
  border-radius: 8px;
}
@keyframes cfe-addr-flashg {
  0%   { background: var(--cfe-ds-color-mint-bg, #ECFDF5); }
  65%  { background: var(--cfe-ds-color-mint-bg, #ECFDF5); }
  100% { background: transparent; }
}

/* Server error — card stays in edit with a rose left-accent, paired with
   the assertive CFE_SaveFeedback error toast (Guide step 6). */
.woocommerce-MyAccount-content .cfe-addr-card.cfe-addr-card--error {
  box-shadow: inset 3px 0 0 var(--cfe-ds-color-rose-border, #F7B3B3);
}

/* Invalid-field treatment — override WC's own stock .woocommerce-invalid
   (woocommerce.css: label{color:var(--wc-red)}, input{border-color:var(
   --wc-red)}), which read as "red label + thin border" and didn't match
   /profile's louder ring (Tuan 7/21: make Addresses match Profile). Profile
   never recolors the label — only .uc-fpill + a bold input ring — so mirror
   that 1:1, same literal red Profile's .err rule uses. */
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row.woocommerce-invalid label {
  color: inherit;
}
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row.woocommerce-invalid .input-text,
.woocommerce-MyAccount-content .cfe-addr-grid--edit .form-row.woocommerce-invalid select {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 inset !important;
}


/* --- Mobile Save/Cancel row on /profile/addresses/ — /profile/'s spec
   (Tuan 07/22 "make them match"). Lives AFTER the Phase 2 visibility rules
   on purpose: the .is-editing show rule sets display:flex at equal
   specificity, so this grid override must come later in the cascade.
   Scoped to .is-editing, so the read state's display:none still wins. --- */
@media (max-width: 640px) {
  .woocommerce-MyAccount-content .cfe-addr-card.is-editing .cfe-addr-card__tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1 1 100%;
    width: 100%;
    gap: 12px;
    margin-top: 6px;
    margin-left: 0;
  }
  .woocommerce-MyAccount-content .cfe-addr-btn {
    justify-content: center;
    width: 100%;
  }
}