/* =========================================================
   CATEGORY PAGE — CONSOLIDATED STYLES (page-scoped)
   Depends on global tokens defined elsewhere:
   --surface, --surface-light, --text, --text-dark, --text-light,
   --text-subtle, --border, --border-radius,
   --card-shadow, --hover-shadow, --global-transition
   ========================================================= */

/* ---------- Base page scope (use body id to avoid collisions) ---------- */
body#programs-page {
  --pg-surface: var(--surface, #ffffff);
  --pg-fg: var(--text, #222);
  --pg-muted: var(--text-subtle, #555);
  --pg-border: var(--border, #e0e0e0);
  --pg-chip-bg: color-mix(in srgb, var(--pg-fg) 7%, transparent);
  --pg-chip-border: color-mix(in srgb, var(--pg-fg) 18%, transparent);

  /* Glass tokens used for image overlays */
  --pg-glass-bg: rgba(255,255,255,.72);
  --pg-glass-border: rgba(255,255,255,.28);
  --pg-glass-shadow: 0 10px 22px rgba(0,0,0,.14);

  /* CTA-matched glass layers (used by chips + overlays) */
  --pg-glass-fill-1: rgba(255,255,255,.86);
  --pg-glass-fill-2: rgba(255,255,255,.64);
  --pg-glass-stroke-1: rgba(255,255,255,.42);
  --pg-glass-stroke-2: rgba(255,255,255,.18);
  --pg-glass-sheen: rgba(255,255,255,.55);

  /* Premium filter chrome */
  --pg-accent: var(--landing-brand-border);
  --pg-accent-2: color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%);

  /* Header/nav-sheet-aligned accents for meta chips (Primary / Secondary / Level) */
  --pg-chip-accent-primary: color-mix(in srgb, var(--header-grad-mid2, var(--landing-brand-border)) 72%, var(--header-grad-mid3, #ffe35a) 28%);
  --pg-chip-accent-secondary: color-mix(in srgb, var(--header-grad-mid1, color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%)) 74%, color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%) 26%);
  --pg-chip-accent-level: color-mix(in srgb, var(--header-grad-mid2, var(--landing-brand-border)) 60%, var(--header-grad-mid1, color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%)) 40%);
  --pg-dot-off: color-mix(in srgb, var(--pg-fg) 22%, transparent);
  --pg-dot-on: color-mix(in srgb, var(--pg-chip-accent-level) 90%, transparent);

  --pg-filter-shadow: 0 10px 28px rgba(0,0,0,.10);

  --pg-control-bg: color-mix(in srgb, var(--pg-fg) 3%, var(--pg-surface));
  --pg-control-border: color-mix(in srgb, var(--pg-fg) 18%, transparent);
  --pg-control-border-hover: color-mix(in srgb, var(--pg-fg) 28%, transparent);

  --pg-focus-ring: color-mix(in srgb, var(--pg-accent) 45%, transparent);

  /* MicroFX defaults (mapped to global tokens) */
  --pro-card-bg: #0e0e10;
  --pro-card-fg: var(--text-light);
  --pro-card-radius: 14px;
  --pro-border: 1px solid rgba(255,255,255,.06);
  --pro-accent: rgba(255,255,255,.18);
  --pro-shadow-rest: var(--card-shadow);
  --pro-shadow-lift: var(--hover-shadow);
  --pg-card-focus-ring: rgba(255,255,255,.28);
}

/* Light/Dark adjustments for page-scoped tokens */
@media (prefers-color-scheme: dark) {
  body#programs-page {
    --pg-surface: color-mix(in srgb, var(--text-light, #fff) 8%, transparent);
    --pg-fg: var(--text-light, #fff);
    --pg-muted: #b3b8bd;
    --pg-border: rgba(232,234,237,.18);
    --pg-chip-bg: color-mix(in srgb, var(--pg-fg) 10%, transparent);
    --pg-chip-border: color-mix(in srgb, var(--pg-fg) 24%, transparent);

    --pg-glass-bg: rgba(0,0,0,.42);
    --pg-glass-border: rgba(255,255,255,.18);
    --pg-glass-shadow: 0 12px 26px rgba(0,0,0,.38);

    /* CTA-matched glass layers (used by chips + overlays) */
    --pg-glass-fill-1: rgba(0,0,0,.56);
    --pg-glass-fill-2: rgba(0,0,0,.34);
    --pg-glass-stroke-1: rgba(255,255,255,.22);
    --pg-glass-stroke-2: rgba(255,255,255,.10);
    --pg-glass-sheen: rgba(255,255,255,.22);

    --pg-filter-shadow: 0 14px 34px rgba(0,0,0,.55);

    --pg-chip-accent-primary: color-mix(in srgb, var(--header-grad-mid2, var(--landing-brand-border)) 78%, var(--header-grad-mid3, #ffe35a) 22%);
    --pg-chip-accent-secondary: color-mix(in srgb, var(--header-grad-mid1, color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%)) 82%, color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%) 18%);
    --pg-chip-accent-level: color-mix(in srgb, var(--header-grad-mid2, var(--landing-brand-border)) 56%, var(--header-grad-mid1, color-mix(in srgb, var(--header-grad-mid3) 68%, var(--header-grad-to) 32%)) 44%);
    --pg-dot-off: rgba(255,255,255,.18);
    --pg-dot-on: color-mix(in srgb, var(--pg-chip-accent-level) 94%, transparent);

    --pg-control-bg: color-mix(in srgb, var(--pg-fg) 6%, transparent);
    --pg-control-border: rgba(232,234,237,.16);
    --pg-control-border-hover: rgba(232,234,237,.26);
  }
}
@media (prefers-color-scheme: light) {
  body#programs-page {
    --pro-card-bg: var(--surface);
    --pro-card-fg: var(--text);
    --pro-border: 1px solid var(--border);
    --pg-card-focus-ring: var(--card-focus-ring, rgba(0,0,0,.52));
  }
}



/* =========================================================
   CUSTOM PLAN CTA BAND (Personalize banner)
   Premium + analytic module styling
   ========================================================= */

body#programs-page .custom-plan-cta-band {
  padding: 0 5%;
  margin: .75rem 0 1.25rem;
}

body#programs-page .custom-plan-cta-band [data-custom-plan-cta] {
  width: min(100%, 1120px);
  margin: 0 auto;
}

/* Card shell */
body#programs-page .custom-plan-cta-band .custom-plan-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .9rem;

  padding: clamp(1rem, 1.6vw, 1.35rem);
  border-radius: 18px;

  color: var(--pg-fg);
  color-scheme: light dark;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pg-fg) 6%, transparent),
      transparent 55%
    ) padding-box,
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--pg-accent) 65%, transparent),
      transparent 34%,
      color-mix(in srgb, var(--pg-accent-2) 60%, transparent)
    ) border-box;

  border: 1px solid transparent;
  box-shadow: var(--pg-filter-shadow);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow: hidden;
}

/* Soft glow accent */
body#programs-page .custom-plan-cta-band .custom-plan-cta::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in srgb, var(--pg-accent) 40%, transparent),
    transparent 65%
  );
  filter: blur(2px);
  opacity: .9;
  pointer-events: none;
}

/* Analytic grid overlay */
body#programs-page .custom-plan-cta-band .custom-plan-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  opacity: .20;
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--pg-fg) 16%, transparent) 0 1px,
      transparent 1px 30px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--pg-fg) 16%, transparent) 0 1px,
      transparent 1px 30px
    );

  -webkit-mask: radial-gradient(120% 90% at 0% 0%, rgba(0,0,0,.9), rgba(0,0,0,0));
          mask: radial-gradient(120% 90% at 0% 0%, rgba(0,0,0,.9), rgba(0,0,0,0));
}

/* Layout + content */
body#programs-page .custom-plan-cta-band .custom-plan-cta__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .9rem;
  align-items: center;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__content {
  display: grid;
  gap: .45rem;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__eyebrow {
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--pg-fg) 72%, transparent);
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__title {
  margin: 0;
  font-size: clamp(1.15rem, 1.2vw + 1rem, 1.65rem);
  line-height: 1.15;
  letter-spacing: .2px;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__copy {
  margin: 0;
  max-width: 70ch;
  color: var(--pg-muted);
  line-height: 1.45;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__copy strong {
  color: var(--pg-fg);
  font-weight: 800;
}

/* Metric chips (analytic feel) */
body#programs-page .custom-plan-cta-band .custom-plan-cta__chips {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__chip {
  font-size: .78rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--pg-chip-bg);
  border: 1px solid var(--pg-chip-border);
  color: color-mix(in srgb, var(--pg-fg) 86%, transparent);
  white-space: nowrap;
}

/* Actions */
body#programs-page .custom-plan-cta-band .custom-plan-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Local-only CTA behavior: override global scale hover inside this banner */
body#programs-page .custom-plan-cta-band .custom-plan-cta__actions .cta-button {
  flex: 1 1 min(100%, clamp(10.5rem, 36vw, 13rem));
  width: min(100%, clamp(10.5rem, 36vw, 13rem));
  padding: .65rem .95rem;
  border-radius: 12px;
  text-decoration: none;
  transform: none;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__actions .cta-button:hover {
  transform: translateY(-1px);
}

body#programs-page .custom-plan-cta-band .custom-plan-cta__actions .cta-button:active {
  transform: translateY(0);
}

body#programs-page .custom-plan-cta-band .custom-plan-cta:focus-within {
  box-shadow: 0 0 0 3px var(--pg-focus-ring), var(--pg-filter-shadow);
}

/* Variant tuning */
body#programs-page .custom-plan-cta-band .custom-plan-cta.custom-plan-cta--primary {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pg-fg) 8%, transparent),
      transparent 55%
    ) padding-box,
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--pg-accent) 85%, transparent),
      transparent 34%,
      color-mix(in srgb, var(--pg-accent-2) 80%, transparent)
    ) border-box;
}

body#programs-page .custom-plan-cta-band .custom-plan-cta.custom-plan-cta--secondary {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pg-fg) 5%, transparent),
      transparent 60%
    ) padding-box,
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--pg-fg) 22%, transparent),
      transparent 36%,
      color-mix(in srgb, var(--pg-fg) 18%, transparent)
    ) border-box;
}

/* Breakpoints (ONLY overrides) */
@media (max-width: 768px) {
  body#programs-page .custom-plan-cta-band { margin: .6rem 0 1.1rem; }
}

@media (max-width: 600px) {
  body#programs-page .custom-plan-cta-band .custom-plan-cta__actions { gap: 8px; }
}

@media (max-width: 480px) {
  body#programs-page .custom-plan-cta-band { padding: 0 4%; }

  body#programs-page .custom-plan-cta-band .custom-plan-cta {
    padding: .95rem;
    border-radius: 16px;
  }

  body#programs-page .custom-plan-cta-band .custom-plan-cta__title { font-size: 1.12rem; }

  body#programs-page .custom-plan-cta-band .custom-plan-cta__actions .cta-button {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (min-width: 769px) {
  body#programs-page .custom-plan-cta-band .custom-plan-cta__layout {
    grid-template-columns: 1fr auto;
    gap: 1.1rem;
  }

  body#programs-page .custom-plan-cta-band .custom-plan-cta__actions {
    justify-content: flex-end;
    align-items: center;
  }

  body#programs-page .custom-plan-cta-band .custom-plan-cta__actions .cta-button {
    flex: 0 1 auto;
    width: min(100%, clamp(11.25rem, 14vw, 14rem));
  }
}


/* =========================================================
   A) EXISTING PROGRAMS INDEX (kept as-is)
   Section: #programs-index (within body#programs-page)
   ========================================================= */
body#programs-page .programs-section {
  padding: 2rem 5%;
}
body#programs-page .programs-section h2 {
  text-align: center;
  font-size: var(--h2-size, clamp(1.5rem, 1.6vw + 1rem, 2rem));
  margin-bottom: 2rem;
  color: var(--text-dark);
}

/* Grid for existing program cards */
body#programs-page .programs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(450px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
  align-items: start;
}
@media (max-width: 1024px) {
  body#programs-page .programs-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}
@media (max-width: 768px) {
  body#programs-page .programs-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
body#programs-page .product-card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--border-radius);
  padding: 0.05rem;
  
  position: relative;
  overflow: visible;
  transition: var(--global-transition);
  will-change: transform, box-shadow;
}
body#programs-page .product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
}
body#programs-page .product-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: calc(var(--border-radius) - 2px);
  margin-bottom: 1rem;
  transition: var(--global-transition);
  position: relative;
  z-index: 1;
}
body#programs-page .product-card:hover .product-image { filter: brightness(0.95); }
body#programs-page .product-card h3 {
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

/* Hover buttons for existing cards */
body#programs-page .hover-buttons {
  position: absolute;
  top: 93%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: flex;
  gap: 0.8rem;
  z-index: 3;
  width: 98%;
  max-width: 98%;
  padding: 0 0.75rem;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  box-sizing: border-box;
  transition: var(--global-transition);
}
body#programs-page .product-card.is-active .hover-buttons,
body#programs-page .product-card:focus-within .hover-buttons {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  body#programs-page .product-card:hover .hover-buttons {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 768px) {
  body#programs-page .programs-section {
    padding: 2rem 1%;
  }

  body#programs-page .programs-grid,
  body#programs-page #pg-grid.product-grid {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body#programs-page .product-card,
  body#programs-page #pg-grid .product-card {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    margin-bottom: 2rem;
  }

  body#programs-page .product-image { height: 220px; }
}

/* ============================================
   CATEGORY PAGE — CTAs: always side-by-side
   (matches Program Finder / Flagship sizing)
   ============================================ */

/* Force row layout (cancel the mobile column stack) */
body#programs-page .product-card .hover-buttons {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: .5rem;
}

body#programs-page .product-card .hover-buttons .cta-button,
body#programs-page .product-card .hover-buttons .add-to-cart {
  flex: 1 1 0;
  width: 48%;
  max-width: 48%;
  min-width: 0;
  box-sizing: border-box;
  padding: .5rem .75rem;
  font-size: .9rem;
}

@media (max-width: 768px) {
  body#programs-page .hover-buttons {
    width: 98%;
    max-width: 98%;
    padding: 0 .5rem;
  }
}

@media (max-width: 600px) {
  body#programs-page .product-card .hover-buttons {
    gap: .4rem;
  }

  body#programs-page .product-card .hover-buttons .cta-button,
  body#programs-page .product-card .hover-buttons .add-to-cart {
    width: 49%;
    max-width: 49%;
    padding: .48rem .55rem;
    font-size: .86rem;
  }
}

@media (max-width: 480px) {
  body#programs-page .hover-buttons {
    padding: 0 .35rem;
  }

  body#programs-page .product-card .hover-buttons .cta-button,
  body#programs-page .product-card .hover-buttons .add-to-cart {
    width: 49%;
    max-width: 49%;
    padding: .45rem .5rem;
    font-size: .82rem;
  }
}


/* =========================================================
   B) MICROFX (scoped to Category page cards)
   ========================================================= */
body#programs-page .pro-card {
  position: relative;
  background: var(--pro-card-bg);
  color: var(--pro-card-fg);
  border-radius: var(--pro-card-radius);
  border: var(--pro-border);
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: var(--pro-shadow-rest);
  transition: var(--global-transition);
  will-change: transform, box-shadow, border-color, opacity;
}
body#programs-page .pro-card::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.06) 45%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.06) 55%,
    transparent 80%
  );
  transform: translateX(-60%) rotate(8deg);
  transition: 600ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
body#programs-page .pro-card {
  --pc-hue: 24;
  --pc-hue-2: 48;
  --pc-hue-3: 196;
  --pc-media-base: #0e0e10;
}
body#programs-page .pro-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pc-media-base);
}

/* Category-based hue tint (premium athletic overlay; image remains visible) */
body#programs-page .pro-media::before,
body#programs-page .pro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body#programs-page .pro-media::before {
  z-index: 1;
  opacity: .96;
  background:
    radial-gradient(140% 120% at 14% 12%, hsla(var(--pc-hue, 24), 92%, 58%, .26), transparent 58%),
    radial-gradient(124% 116% at 84% 80%, hsla(var(--pc-hue-2, 48), 90%, 60%, .16), transparent 64%),
    linear-gradient(135deg, hsla(var(--pc-hue-3, 196), 88%, 56%, .11), transparent 48%),
    linear-gradient(180deg, rgba(5,6,10,.06), rgba(5,6,10,.22));
  transition: opacity .25s ease, filter .25s ease;
}

body#programs-page .pro-media::after {
  z-index: 1;
  opacity: .18;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 10px);
  mix-blend-mode: overlay;
  transition: opacity .25s ease;
}

body#programs-page .pro-media .product-image {
  position: relative;
  z-index: 0;
  width: 100%; display: block;
  background:
    linear-gradient(160deg, hsla(var(--pc-hue, 24), 74%, 48%, .18), transparent 56%),
    linear-gradient(340deg, hsla(var(--pc-hue-2, 48), 84%, 52%, .14), transparent 52%),
    linear-gradient(200deg, hsla(var(--pc-hue-3, 196), 82%, 56%, .10), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--pc-media-base) 92%, rgba(7,10,18,.08)), color-mix(in srgb, var(--pc-media-base) 82%, rgba(7,10,18,.20)));
  transform: translateZ(16px) scale(1.04);
  transition: var(--global-transition);
  will-change: transform;
}

/* Hover lift */
@media (hover:hover) and (pointer:fine) {
  body#programs-page .pro-card:hover,
  body#programs-page .pro-card:focus-within {
    transform: translateZ(0) scale(1.015);
    box-shadow: var(--pro-shadow-lift);
    border-color: var(--pro-accent);
  }
  body#programs-page .pro-card:hover::before,
  body#programs-page .pro-card:focus-within::before {
    transform: translateX(40%) rotate(8deg);
  }
  body#programs-page .pro-card:hover .pro-media::before,
  body#programs-page .pro-card:focus-within .pro-media::before {
    opacity: 1;
    filter: saturate(1.06);
  }
  body#programs-page .pro-card:hover .pro-media::after,
  body#programs-page .pro-card:focus-within .pro-media::after {
    opacity: .24;
  }
}

/* On-scroll reveal */
body#programs-page .pro-card { opacity: 0; transform: translateY(10px); }
body#programs-page .pro-card.is-in { opacity: 1; transform: translateY(0); transition: var(--global-transition); }

/* Keyboard focus */
body#programs-page .pro-card:focus-within {
  outline: 2px solid var(--pg-card-focus-ring);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body#programs-page .pro-card,
  body#programs-page .pro-card.is-in,
  body#programs-page .pro-media .product-image,
  body#programs-page .pro-media::before,
  body#programs-page .pro-media::after,
  body#programs-page .magnet {
    transition: none !important; transform: none !important;
  }
  body#programs-page .pro-card::before { display: none; }
}

/* Small screens: remove parallax scaling */
@media (max-width: 600px) {
  body#programs-page .pro-content { padding: 16px; }
  body#programs-page .pro-media .product-image { transform: none; }
}


/* Light-mode glare fix (ensure visible on light cards) */
@media (prefers-color-scheme: light) {
  body#programs-page .pro-card::before {
    background: linear-gradient(
      120deg,
      transparent 20%,
      rgba(0,0,0,.06) 45%,
      rgba(0,0,0,.12) 50%,
      rgba(0,0,0,.06) 55%,
      transparent 80%
    );
  }
}

/* Tweak description contrast inside MicroFX cards */
body#programs-page .pro-content p { color: var(--text-subtle); }



/* =========================================================
   C) HYBRID FILTERS + COMPARE (additive, page-scoped)
   Section wrapper (note: your HTML uses a nested section with class .programs-page)
   ========================================================= */
body#programs-page .programs-page {
  padding: 2rem 5%;
}
body#programs-page #pg-title {
  text-align: center;
  font-size: var(--h2-size, clamp(1.5rem, 1.6vw + 1rem, 2rem));
  margin-bottom: 1.25rem;
  color: var(--text-dark);
}

/* Filters (Premium athletic) */
body#programs-page #pg-filters {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(12rem, 22vw, 16rem)), 1fr));
  gap: 14px;
  align-items: end;

  padding: clamp(.85rem, 1.2vw, 1.1rem);
  border-radius: 16px;
  margin: 0 0 1rem;
  color-scheme: light dark;

  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pg-fg) 6%, transparent), transparent) padding-box,
    linear-gradient(120deg,
      color-mix(in srgb, var(--pg-accent) 60%, transparent),
      transparent 32%,
      color-mix(in srgb, var(--pg-accent-2) 55%, transparent)
    ) border-box;

  border: 1px solid transparent;
  box-shadow: var(--pg-filter-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body#programs-page #pg-filters .pg-field label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 6px;
  color: var(--pg-fg);
}
body#programs-page #pg-filters .pg-control {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: var(--pg-control-bg);
  border: 1px solid var(--pg-control-border);
  transition: var(--global-transition);
  min-height: 2.75rem;
}
body#programs-page #pg-filters .pg-control::after {
  content: "";
  position: absolute;
  right: .85rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .65;
  pointer-events: none;
}
body#programs-page #pg-filters .pg-control:hover {
  border-color: var(--pg-control-border-hover);
}
body#programs-page #pg-filters .pg-control:focus-within {
  border-color: var(--pg-accent);
  box-shadow: 0 0 0 3px var(--pg-focus-ring);
}
body#programs-page #pg-filters .pg-field select {
  width: min(100%, 100%);
  padding: 0.65rem 2.2rem 0.65rem 0.85rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--pg-fg);
  font: inherit;
  appearance: none;
  outline: none;
  cursor: pointer;
}
body#programs-page #pg-filters .pg-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
}
body#programs-page #pg-filters .pg-actions .cta-button {
  width: min(100%, clamp(8.5rem, 20vw, 11rem));
}
body#programs-page #pg-summary {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .92rem;
  color: var(--pg-muted);
}

/* Hybrid results grid (separate from the original programs-grid) */
body#programs-page #pg-grid.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 1.25rem 0 2rem;
}

/* Reuse product-card look inside hybrid grid */
body#programs-page #pg-grid .product-card {
  background: var(--text-light);
  border-radius: 12px;
  padding: 0.05rem;
  
  position: relative;
  transition: var(--global-transition);
  overflow: visible;
}
body#programs-page #pg-grid .product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
}
body#programs-page #pg-grid .product-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: filter 0.3s ease;
}
body#programs-page #pg-grid .product-card:hover .product-image { filter: brightness(0.95); }

body#programs-page #pg-grid .pro-content { padding: 0 1rem 1rem; }
body#programs-page #pg-grid .pro-content h3 {
  margin: 0 0 .4rem;
  font-size: 1.1rem;
  color: var(--pg-fg);
}
body#programs-page #pg-grid .pro-content p {
  margin: 0 0 .6rem;
  color: var(--pg-muted);
  line-height: 1.4;
}

/* Meta chips (inline default) */
body#programs-page .pg-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  margin: .55rem 0 .75rem;
}

body#programs-page .pg-meta__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

body#programs-page .pg-meta__group--goals {
  max-width: min(100%, 22rem);
}

body#programs-page .pg-meta__group--difficulty {
  flex: 0 0 auto;
}

/* Overlay variant (placed inside .pro-media) */
body#programs-page .pg-meta--overlay {
  position: absolute;
  inset: 12px 12px auto 12px;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

/* Price overlay (placed inside .pro-media) */
body#programs-page .pg-price-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  pointer-events: none;

  /* Never overflow its container; keep it compact */
  max-width: min(100%, 10rem);
}


/* Reveal overlay meta/price only when card is activated (matches CTA click-to-reveal) */
body#programs-page .pro-card .pg-meta--overlay,
body#programs-page .pro-card .pg-price-overlay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  filter: blur(1px);
  transition: var(--global-transition);
}

body#programs-page .pro-card .pg-price-overlay {
  transform: translateY(6px);
}

body#programs-page .pro-card.is-active .pg-meta--overlay,
body#programs-page .pro-card.is-active .pg-price-overlay,
body#programs-page .pro-card:focus-within .pg-meta--overlay,
body#programs-page .pro-card:focus-within .pg-price-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: none;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  body#programs-page .pro-card:hover .pg-meta--overlay,
  body#programs-page .pro-card:hover .pg-price-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#programs-page .pro-card .pg-meta--overlay,
  body#programs-page .pro-card .pg-price-overlay {
    transform: none;
    filter: none;
  }
}



body#programs-page .pg-meta--overlay .pg-meta__group--goals {
  max-width: min(100%, 22rem);
}

/* Premium + athletic chip shell (subtle radius vs full pill) */
body#programs-page .pg-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(100%, 16rem);

  font-size: .72rem;
  line-height: 1.2;

  padding: .34rem .56rem;
  border-radius: 12px;

  /* CTA-like glass: layered fill + subtle gradient stroke */
  background:
    linear-gradient(180deg, var(--pg-glass-fill-1), var(--pg-glass-fill-2)) padding-box,
    linear-gradient(120deg, var(--pg-glass-stroke-1), transparent 42%, var(--pg-glass-stroke-2)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--pg-glass-shadow);

  color: color-mix(in srgb, var(--pg-fg) 92%, transparent);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Sheen highlight (keeps the "glassy" premium look without overpowering text) */
body#programs-page .pg-chip::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(
    120% 90% at 18% 12%,
    var(--pg-glass-sheen),
    transparent 55%
  );
  opacity: .55;
}

/* Keep content above the sheen */
body#programs-page .pg-chip > :not(.pg-sr) {
  position: relative;
  z-index: 1;
}

/* Keep the Level badge above the sheen */
body#programs-page .pg-chip--difficulty .pg-chip__k {
  position: relative;
  z-index: 1;
  color: var(--pg-fg);
  background: color-mix(in srgb, var(--pg-chip-accent-level) 16%, transparent);
  border-color: color-mix(in srgb, var(--pg-chip-accent-level) 24%, transparent);
}

/* Price chip tuning (kept minimal; inherits the glass shell) */
body#programs-page .pg-chip.pg-chip--price {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .2px;
  padding: .38rem .64rem;

  /* Stronger edge for legibility over busy images */
  border-left: 3px solid color-mix(in srgb, var(--pg-fg) 52%, transparent);
}

/* Key/Value chip internals (Primary/Secondary tags) */
body#programs-page .pg-chip__k {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  padding: .14rem .38rem;
  border-radius: 999px;

  background: color-mix(in srgb, var(--pg-fg) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pg-fg) 18%, transparent);

  opacity: .95;
}

body#programs-page .pg-chip__v {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure price value stays bold even though .pg-chip__v has a default weight */
body#programs-page .pg-chip.pg-chip--price .pg-chip__v {
  font-weight: 900;
}


/* Subtle variants (premium but restrained) */
body#programs-page .pg-chip--primary {
  border-left: 3px solid color-mix(in srgb, var(--pg-chip-accent-primary) 88%, transparent);
}

body#programs-page .pg-chip--secondary {
  border-left: 3px solid color-mix(in srgb, var(--pg-chip-accent-secondary) 88%, transparent);
}

/* Header/nav-sheet color carry-over for the key pills (subtle, premium) */
body#programs-page .pg-chip--primary .pg-chip__k {
  background: color-mix(in srgb, var(--pg-chip-accent-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--pg-chip-accent-primary) 24%, transparent);
}

body#programs-page .pg-chip--secondary .pg-chip__k {
  background: color-mix(in srgb, var(--pg-chip-accent-secondary) 16%, transparent);
  border-color: color-mix(in srgb, var(--pg-chip-accent-secondary) 24%, transparent);
}

/* Difficulty: dot strip (1–3) */
body#programs-page .pg-chip--difficulty {
  padding: .34rem .56rem;
  border-left: 3px solid color-mix(in srgb, var(--pg-chip-accent-level) 88%, transparent);
  flex-direction: row;
  align-items: center;
  gap: 8px;
}


body#programs-page .pg-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body#programs-page .pg-dots--range {
  gap: 6px;
}

body#programs-page .pg-dots__track {
  position: relative;
  display: inline-block;
  width: clamp(14px, 2.4vw, 18px);
  height: 10px;
  opacity: .9;
}

body#programs-page .pg-dots__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 6px; /* leave room for the head */
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

body#programs-page .pg-dots__track::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 16%, transparent));
}


body#programs-page .pg-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pg-fg) 14%, transparent);
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.45), transparent 56%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pg-dot-off) 72%, rgba(255,255,255,.10)),
      color-mix(in srgb, var(--pg-dot-off) 96%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 2px rgba(0,0,0,.12);
}

body#programs-page .pg-dot.is-on {
  border-color: color-mix(in srgb, var(--pg-chip-accent-level) 34%, transparent);
  background:
    radial-gradient(circle at 26% 22%, rgba(255,255,255,.88), rgba(255,255,255,.24) 42%, transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pg-dot-on) 96%, rgba(255,255,255,.06)),
      color-mix(in srgb, var(--pg-dot-on) 78%, rgba(0,0,0,.10)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 0 2px color-mix(in srgb, var(--pg-chip-accent-level) 14%, transparent),
    0 2px 6px color-mix(in srgb, var(--pg-chip-accent-level) 18%, transparent);
}

/* Visually hidden (accessibility) */
body#programs-page .pg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Breakpoints (ONLY overrides) */
@media (max-width: 768px) {
  body#programs-page .pg-meta--overlay {
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  body#programs-page .pg-meta__group--stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 6px;
    row-gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: start;
  }

  body#programs-page .pg-meta__group--stack > .pg-chip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body#programs-page .pg-meta__group--stack > .pg-chip--difficulty {
    order: -1;
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
  }

  body#programs-page .pg-price-overlay {
    top: auto;
    right: auto;
    left: 12px;
    bottom: 12px;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  body#programs-page .pg-meta--overlay { inset: 10px 10px auto 10px; }
  body#programs-page .pg-price-overlay { left: 10px; bottom: 10px; }
  body#programs-page .pg-meta--overlay { width: auto; max-width: none; box-sizing: border-box; }
  body#programs-page .pg-chip { font-size: .70rem; padding: .32rem .52rem; border-radius: 11px; }
  body#programs-page .pg-dot { width: 6px; height: 6px; }
}

@media (max-width: 480px) {
  body#programs-page .pg-meta--overlay { inset: 8px 8px auto 8px; }
  body#programs-page .pg-price-overlay { left: 8px; bottom: 8px; }
  body#programs-page .pg-meta--overlay { width: auto; max-width: none; box-sizing: border-box; }
}


/* Footer actions + Compare toggle */
body#programs-page .pg-card-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
body#programs-page .pg-price { font-weight: 700; color: var(--pg-fg); }
body#programs-page .pg-compare {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; color: var(--pg-fg);
}
body#programs-page .pg-compare input[type="checkbox"] { transform: translateY(1px); }

/* Compare bar (fixed) */
body#programs-page .pg-compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: .75rem 1rem;
  backdrop-filter: blur(20px);
  color: var(--text-light, #fff);
  
  z-index: 3000;
}
body#programs-page .pg-compare-info { font-weight: 700; }
body#programs-page .pg-compare-actions { display: flex; gap: 8px; }

/* Compare modal */
body#programs-page .pg-compare-modal[aria-hidden="true"] { display: none; }
body#programs-page .pg-compare-modal[aria-hidden="false"] { display: block; }

body#programs-page .pg-compare-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
body#programs-page .pg-compare-dialog {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 94vw);
  max-height: 84vh; overflow: hidden;
  background: var(--pg-surface);
  color: var(--pg-fg);
  border-radius: 12px;
  box-shadow: var(--hover-shadow);
  display: grid; grid-template-rows: auto 1fr auto;
}
body#programs-page .pg-compare-header,
body#programs-page .pg-compare-footer {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--pg-border);
}
body#programs-page .pg-compare-footer {
  border-top: 1px solid var(--pg-border);
  border-bottom: none;
}
body#programs-page .pg-compare-close {
  margin-left: auto; font-size: 1.4rem; line-height: 1;
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
body#programs-page .pg-compare-body { overflow: auto; padding: .5rem 1rem 1rem; }

/* Compare table */
body#programs-page .pg-compare-table-wrap { overflow: auto; }
body#programs-page .pg-compare-table {
  border-collapse: collapse; width: 100%;
  min-width: 700px;
}
body#programs-page .pg-compare-table th,
body#programs-page .pg-compare-table td {
  border: 1px solid var(--pg-border);
  padding: .65rem .7rem; text-align: left; vertical-align: top;
}
body#programs-page .pg-compare-table thead th {
  position: sticky; top: 0; background: var(--pg-surface);
  z-index: 1;
}
body#programs-page .pg-compare-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--pg-fg) 4%, transparent);
}
body#programs-page .pg-compare-title {
  display: flex; align-items: center; gap: 8px;
}
body#programs-page .pg-compare-title img {
  width: 58px; height: 36px; object-fit: cover; border-radius: 6px;
  
}

/* Mobile tweaks */
@media (max-width: 600px) {
  body#programs-page .pg-card-footer { grid-template-columns: 1fr 1fr; }
  body#programs-page .pg-compare-table { min-width: 560px; }
}