/* ============================================================
   ProCert Redesign v2 — Precise DOM targeting
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --pc-primary:     #0071ce;
  --pc-primary-dk:  #004f91;
  --pc-accent:      #3eb54b;
  --pc-navy:        #0d1f3c;
  --pc-navy-mid:    #1a3461;
  --pc-bg:          #f1f4f8;
  --pc-surface:     #ffffff;
  --pc-border:      #dde3ec;
  --pc-text:        #1e293b;
  --pc-muted:       #5e738a;
  --pc-radius:      10px;
  --pc-shadow:      0 2px 10px rgba(13,31,60,.07);
  --pc-shadow-lg:   0 6px 28px rgba(13,31,60,.13);
  --pc-trans:       .18s ease;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--pc-bg) !important;
  color: var(--pc-text) !important;
}

a { color: var(--pc-primary); transition: color var(--pc-trans); }
a:hover { color: var(--pc-primary-dk); text-decoration: none; }

/* ── Announcement bar (.header-top) ───────────────────────── */
.header-top {
  background: linear-gradient(90deg, var(--pc-navy) 0%, var(--pc-navy-mid) 100%) !important;
  border-bottom: none !important;
  padding: 8px 0 !important;
}

.header-top .header-font p,
.header-top .header-font a,
.header-top p,
.header-top a {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  color: rgba(255,255,255,.75) !important;
}

.header-top .header-font a:hover { color: #fff !important; }

.header-top #menu-top-navigation { margin: 0 !important; }
.header-top #menu-top-navigation li a {
  color: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 2px 14px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 20px !important;
  transition: all var(--pc-trans) !important;
}

.header-top #menu-top-navigation li a:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ── Navigation (header.banner.navbar-default) ─────────────── */
header.banner {
  background: var(--pc-surface) !important;
  border-bottom: 1px solid var(--pc-border) !important;
  box-shadow: 0 1px 10px rgba(13,31,60,.06) !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  margin-bottom: 0 !important;
  border-top: none !important;
  border-radius: 0 !important;
}

/* Navbar brand / logo */
header.banner .navbar-brand {
  padding: 14px 18px !important;
  height: auto !important;
}

header.banner .navbar-brand img {
  height: 36px !important;
  width: auto !important;
}

/* Nav links */
header.banner .navbar-nav > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--pc-navy) !important;
  text-transform: uppercase !important;
  padding: 24px 16px !important;
  position: relative !important;
  transition: color var(--pc-trans) !important;
  background: transparent !important;
}

header.banner .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 16px; right: 16px;
  height: 3px;
  background: var(--pc-primary);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform var(--pc-trans);
}

header.banner .navbar-nav > li > a:hover,
header.banner .navbar-nav > li.active > a {
  color: var(--pc-primary) !important;
  background: transparent !important;
}

header.banner .navbar-nav > li > a:hover::after,
header.banner .navbar-nav > li.active > a::after {
  transform: scaleX(1);
}

/* ── Hero banner (.hero-wrap.product-archive-hero) ─────────── */
.hero-wrap.product-archive-hero,
.hero-wrap {
  background: linear-gradient(135deg, var(--pc-navy) 0%, #1a4080 60%, #1a6faa 100%) !important;
  background-image: linear-gradient(135deg, var(--pc-navy) 0%, #1a4080 60%, #1a6faa 100%) !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
}

.hero-wrap .hero-inner {
  padding: 10px 0 !important;
  background: transparent !important;
  background-image: none !important;
}
.hero-wrap .page-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hero-wrap .page-header h1 {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.8rem !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
}
.hero-wrap .jumbotron { background: transparent !important; margin: 0 !important; }

.hero-wrap h1, .hero-wrap h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
}

.hero-wrap p {
  color: rgba(255,255,255,.8) !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}

/* ── Program-level filter bar (#pc-prog-filter) ────────────── */
/* opacity:0 is set in the inline <style> in index.html to hide the bar
   immediately (before this file even loads).  Once our JS marks it [data-ready]
   it fades in cleanly with no flash of Angular's stale structure. */
#pc-prog-filter {
  display: block !important;   /* overrides Angular's inline display:none on search pages */
  opacity: 0;                  /* hidden until JS marks [data-ready] */
  transition: opacity 0.14s ease;
  will-change: opacity;
  background: var(--pc-navy) !important;
  border-bottom: 3px solid rgba(255,255,255,.08) !important;
  padding: 0 !important;
}

/* Fade in once JS has built the correct bar content */
#pc-prog-filter[data-ready] {
  opacity: 1 !important;
}

/* ── Suppress Angular's background images that would flash ──── */
/* Hero image on product-archive pages */
.product-archive-hero #heroItem,
.hero-wrap .hero-item-inner,
.hero-wrap #heroItem {
  background-image: none !important;
  background: transparent !important;
}

/* Footer background PNG overlay */
.footer-inner::after {
  display: none !important;
}

#pc-prog-filter .pc-pf-inner {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 8px !important;
  min-height: 52px !important;
}

#pc-prog-filter .pc-pf-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.4) !important;
  padding: 0 16px 0 8px !important;
  white-space: nowrap !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  margin-right: 8px !important;
  line-height: 52px !important;
}

#pc-prog-filter .pc-pf-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

#pc-prog-filter .pc-pf-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.65) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  transition: background var(--pc-trans), color var(--pc-trans) !important;
  border: 1px solid transparent !important;
}

#pc-prog-filter .pc-pf-link:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.15) !important;
}

#pc-prog-filter .pc-pf-item--active .pc-pf-link {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
}

#pc-prog-filter .pc-pf-logo {
  display: block !important;
  height: 18px !important;
  width: auto !important;
  max-width: 56px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.65 !important;
  flex-shrink: 0 !important;
}

#pc-prog-filter .pc-pf-item--active .pc-pf-logo {
  opacity: 1 !important;
}

/* Logo row height/alignment (replaces old .pc-pf-inner) */
#pc-prog-filter .pc-pf-logos .container {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Sub-program row */
#pc-prog-filter .pc-pf-programs {
  background: rgba(0,0,0,.18) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

#pc-prog-filter .pc-pf-programs .container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#pc-prog-filter .pc-pf-prog-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

#pc-prog-filter .pc-pf-prog-link {
  display: inline-block !important;
  padding: 5px 14px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.6) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  transition: background var(--pc-trans), color var(--pc-trans) !important;
}

#pc-prog-filter .pc-pf-prog-link:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.15) !important;
}

#pc-prog-filter .pc-pf-prog-item--active .pc-pf-prog-link {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* ── Cert chips row (row 3 — within a specific program) ────── */
#pc-prog-filter .pc-pf-certs {
  background: rgba(0,0,0,.12) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

#pc-prog-filter .pc-pf-cert-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  gap: 2px !important;
  width: 100% !important;
}

#pc-prog-filter .pc-pf-cert-link {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.55) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  transition: background var(--pc-trans), color var(--pc-trans) !important;
}

#pc-prog-filter .pc-pf-cert-link:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.15) !important;
}

#pc-prog-filter .pc-pf-cert-item--active .pc-pf-cert-link {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}

@media (max-width: 767px) {
  #pc-prog-filter .pc-pf-label { display: none !important; }
  #pc-prog-filter .pc-pf-link  { padding: 7px 12px !important; font-size: 11px !important; }
  #pc-prog-filter .pc-pf-logo  { height: 16px !important; }
  #pc-prog-filter .pc-pf-prog-link { padding: 4px 10px !important; font-size: 10px !important; }
  #pc-prog-filter .pc-pf-cert-link { padding: 4px 8px !important; font-size: 10px !important; }
}

/* ── Filter area (.cf-top-wrap) ────────────────────────────── */
.cf-top-wrap {
  background: var(--pc-surface) !important;
  border-bottom: 2px solid var(--pc-border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* "Course Filters:" label */
.cf-top-wrap h3.header-font {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--pc-muted) !important;
  padding: 16px 16px 4px !important;
  margin: 0 !important;
  border: none !important;
}

/* Filter tab list */
.cf-nav.top ul {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 8px !important;
  gap: 2px !important;
  border-bottom: none !important;
}

.cf-nav.top ul li {
  display: inline-flex !important;
  float: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  list-style: none !important;
}

.cf-nav.top ul li a {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--pc-muted) !important;
  padding: 12px 16px !important;
  border-bottom: 3px solid transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  transition: all var(--pc-trans) !important;
  text-decoration: none !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.cf-nav.top ul li a:hover {
  color: var(--pc-primary) !important;
  border-bottom-color: rgba(0,113,206,.35) !important;
  background: rgba(0,113,206,.04) !important;
}

.cf-nav.top ul li.active a,
.cf-nav.top ul li a.active {
  color: var(--pc-primary) !important;
  border-bottom-color: var(--pc-primary) !important;
  background: rgba(0,113,206,.06) !important;
}

/* ── Course list wrapper (.cf-product-wrap) ────────────────── */
.cf-product-wrap {
  max-width: 1200px !important;
  margin: 28px auto !important;
  padding: 0 24px !important;
  background: transparent !important;
}

/* ── Individual course card (.results-list-product) ─────────── */
.results-list-product {
  background: var(--pc-surface) !important;
  border: 1px solid var(--pc-border) !important;
  border-bottom: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  transition: box-shadow var(--pc-trans), transform var(--pc-trans) !important;
}

.results-list-product:hover {
  box-shadow: var(--pc-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

.results-list-product.last-item { border-bottom: 1px solid var(--pc-border) !important; }

/* ── Book cover image + rating column ─────────────────────── */
/* Make it a flex column so image and rating stack cleanly */
.results-list-product .product-image {
  flex: 0 0 175px !important;
  width: 175px !important;
  max-width: 175px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 20% bigger: contain so full cover shows, light bg for letterboxing */
.results-list-product .product-image img.product-data-image,
.results-list-product .product-image .img-fluid {
  width: 130px !important;
  height: 175px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #edf0f5 !important;
  border-radius: 6px !important;
  box-shadow: 3px 4px 14px rgba(0,0,0,.2) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Rating component: sit below image as a block */
.results-list-product .product-image review-score-small {
  display: block !important;
  width: 100% !important;
}

.results-list-product .product-image .text-center {
  width: 100% !important;
}

/* ── Rating layout: stars on top, score number below ───────── */
/* Specificity (0,3,0) = .product-image + double-class; beats Angular's (0,2,0) [_ngcontent] */
.product-image .review-score-small-wrapper.review-score-small-wrapper {
  display: inline-flex !important;
  flex-direction: column-reverse !important; /* [chart/stars] on top, [score] below */
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  max-height: none !important;   /* override Angular's max-height: 24px !important */
  min-height: 0 !important;      /* override Angular's min-height: 24px !important */
  margin-top: 6px !important;
  /* Styled box */
  padding: 6px 10px 7px !important;
  border: 2px solid #f28d2c !important;
  border-radius: 10px !important;
  background: rgba(242, 141, 44, 0.06) !important;
}

/* Icon chart — sized to match SVG_W × SVG_H in star-rating.js (5×24 + 4×4 = 136) */
.product-image .review-score-small-chart.review-score-small-chart {
  display: block !important;
  overflow: visible !important;
  line-height: 0 !important;
  height: 24px !important;
  width: 136px !important;
}

/* star-rating.js replaces chart innerHTML with clean SVG;
   Angular's overlay-wrapper and overlay-img are no longer rendered */

/* Score number: clean, readable, no float */
.product-image .review-score-small.review-score-small {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--pc-navy) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  display: block !important;
  float: none !important;        /* override Angular's float: left */
  position: static !important;  /* override Angular's position: relative */
  top: auto !important;          /* override Angular's top: -2px */
  padding: 0 !important;
}

/* ── Course detail column ──────────────────────────────────── */
.results-list-product .product-detail-wrap {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Course title */
.results-list-product .product-detail-title-wrap a,
.results-list-product .product-detail-title-wrap {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--pc-navy) !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 3px !important;
  transition: color var(--pc-trans) !important;
}

.results-list-product .product-detail-title-wrap a:hover { color: var(--pc-primary) !important; }

/* Publisher name (subtitle) */
.results-list-product .product-detail-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--pc-muted) !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* Price */
.results-list-product .product-detail-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--pc-primary) !important;
  letter-spacing: -.02em !important;
  margin-bottom: 6px !important;
}

/* Format type (Text-based, X Days) */
.results-list-product .product-data-type {
  font-size: 12.5px !important;
  color: var(--pc-muted) !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

/* Data labels (ISBN, EXAMS, DESCRIPTION) */
.results-list-product .product-data-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--pc-muted) !important;
  display: block !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
}

/* Exam name */
.results-list-product .product-detail-data,
.results-list-product .product-detail-data span {
  font-size: 13px !important;
  color: var(--pc-text) !important;
  font-weight: 500 !important;
}

/* Description */
.results-list-product .product-description-summary {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin-top: 8px !important;
}

.results-list-product .product-description-summary > span {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Buy button */
.results-list-product .product-data-buy a,
.results-list-product .product-data-buy-mobile a {
  display: inline-block !important;
  background: var(--pc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 7px 20px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  transition: background var(--pc-trans), box-shadow var(--pc-trans) !important;
  box-shadow: 0 2px 8px rgba(0,113,206,.28) !important;
  margin-top: 8px !important;
}

.results-list-product .product-data-buy a:hover,
.results-list-product .product-data-buy-mobile a:hover {
  background: var(--pc-primary-dk) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,113,206,.38) !important;
}

/* Rating row (below card) */
.results-list-product + div,
.rating-row {
  margin-bottom: 0 !important;
}

/* ── Find course search bar ─────────────────────────────────── */
.product-archive-hero .page-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.product-archive-hero .page-header h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.01em !important;
}

.product-archive-hero input[type="text"],
.product-archive-hero input.form-control,
.find-course-search input {
  border: 2px solid var(--pc-border) !important;
  border-radius: var(--pc-radius) !important;
  padding: 11px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: border-color var(--pc-trans), box-shadow var(--pc-trans) !important;
}

.product-archive-hero input[type="text"]:focus,
.product-archive-hero input.form-control:focus {
  border-color: var(--pc-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,113,206,.12) !important;
  outline: none !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary,
.btn-find-courses,
input[type="submit"].btn-primary {
  background: linear-gradient(135deg, var(--pc-primary) 0%, #0066bb 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .05em !important;
  padding: 11px 28px !important;
  text-transform: uppercase !important;
  transition: opacity var(--pc-trans), box-shadow var(--pc-trans) !important;
  box-shadow: 0 3px 10px rgba(0,113,206,.28) !important;
}

.btn-primary:hover,
.btn-find-courses:hover {
  color: #fff !important;
  opacity: .88 !important;
  box-shadow: 0 5px 18px rgba(0,113,206,.38) !important;
}

/* ── Footer (.content-info) ─────────────────────────────────── */
.content-info {
  background: var(--pc-navy) !important;
  color: rgba(255,255,255,.65) !important;
  margin-top: 48px !important;
  padding: 0 !important;
}

.content-info .footer-inner { padding: 40px 0 0 !important; }

.content-info a {
  color: rgba(255,255,255,.6) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--pc-trans) !important;
}

.content-info a:hover { color: #fff !important; }

.content-info .widget-title,
.content-info h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.38) !important;
  margin-bottom: 16px !important;
}

.content-info ul { list-style: none !important; padding: 0 !important; }
.content-info ul li { margin-bottom: 8px !important; }

/* Footer bottom bar */
.content-info .site-info,
.content-info .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  padding: 16px 0 !important;
  margin-top: 28px !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,.35) !important;
}

.content-info .site-info a { font-size: 11.5px !important; color: rgba(255,255,255,.4) !important; }
.content-info .site-info a:hover { color: rgba(255,255,255,.75) !important; }

/* Footer FIND COURSE button */
.content-info .btn,
.content-info a.btn {
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent)) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  padding: 12px 28px !important;
  text-transform: uppercase !important;
  transition: opacity var(--pc-trans) !important;
  box-shadow: 0 3px 12px rgba(0,113,206,.3) !important;
}

.content-info .btn:hover,
.content-info a.btn:hover {
  opacity: .88 !important;
  color: #fff !important;
}

/* ── Product detail page ─────────────────────────────────────── */
.product-detail-wrap article header {
  background: #fff !important;
  padding: 40px 0 !important;
  text-align: left !important;
  color: var(--pc-text) !important;
}

/* All text nodes inherit dark colour from the white header */
.product-detail-wrap article header .row,
.product-detail-wrap article header [class*="col-"],
.product-detail-wrap article header .product-top,
.product-detail-wrap article header .product-detail-section,
.product-detail-wrap article header .product-rating-section,
.product-detail-wrap article header .product-description-sect,
.product-detail-wrap article header p,
.product-detail-wrap article header span,
.product-detail-wrap article header label,
.product-detail-wrap article header small {
  color: inherit !important;
}

.product-detail-wrap article header .product-top h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.9rem !important;
  color: var(--pc-navy) !important;
  letter-spacing: -.02em !important;
  margin-bottom: 8px !important;
}

/* Angular (_ngcontent-c3) scopes h2.entry-author with color:black */
.product-detail-wrap article header h2,
.product-detail-wrap article header h2.entry-author {
  color: var(--pc-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.product-detail-wrap article header p.publisher-name {
  color: var(--pc-muted) !important;
  font-size: 14px !important;
}

/* Links inside the header */
.product-detail-wrap article header a {
  color: var(--pc-primary) !important;
}
.product-detail-wrap article header a:hover {
  color: var(--pc-navy) !important;
}

/* ── Product detail – right-side info (no card) ──────────────── */

/* No card — transparent, just padding on the left */
.product-detail-wrap article header .product-details-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 0 32px !important;
  box-shadow: none !important;
  align-self: flex-start !important;
}

/* All text in the right column stays dark */
.product-detail-wrap article header .product-details-section,
.product-detail-wrap article header .product-details-section span,
.product-detail-wrap article header .product-details-section p,
.product-detail-wrap article header .product-details-section td,
.product-detail-wrap article header .product-details-section th,
.product-detail-wrap article header .product-details-section strong,
.product-detail-wrap article header .product-details-section label,
.product-detail-wrap article header .product-details-section small {
  color: var(--pc-text) !important;
}

/* Course title (h1) — biggest, shown first */
.product-detail-wrap article header .product-details-section h1,
.product-detail-wrap article header .product-details-section h1.entry-title {
  color: var(--pc-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
}

/* Publisher name (h2) — smaller, below title */
.product-detail-wrap article header .product-details-section h2,
.product-detail-wrap article header .product-details-section h2.entry-author {
  color: var(--pc-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 20px !important;
}

/* Price */
.product-detail-wrap article header .product-details-section .price-container {
  color: var(--pc-navy) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  margin-bottom: 12px !important;
}

/* Details table */
.product-detail-wrap article header .product-details-section .table td {
  border-color: var(--pc-border) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
}

/* Buy button — white text so it's readable on the green background */
.product-detail-wrap article header .btn-procert-buy {
  color: #fff !important;
  font-weight: 700 !important;
}

/* The old centred title block — hidden by JS (pc-title-moved class) */
.product-detail-wrap article header .pc-title-moved {
  display: none !important;
}

/* Align the two columns (image left, card right) to the top */
.product-detail-wrap article header .product-detail-section {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
}

.product-detail-wrap article section.entry-content {
  background: var(--pc-surface) !important;
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow) !important;
  margin: 24px auto !important;
  padding: 32px !important;
}

.product-detail-wrap .nav-tabs { border-bottom: 3px solid var(--pc-border) !important; }

.product-detail-wrap .nav-tabs .nav-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pc-muted) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -3px !important;
  padding: 11px 18px !important;
  transition: all var(--pc-trans) !important;
}

.product-detail-wrap .nav-tabs .nav-link:hover {
  color: var(--pc-primary) !important;
  border-bottom-color: rgba(0,113,206,.3) !important;
  background: transparent !important;
}

.product-detail-wrap .nav-tabs .nav-link.active,
.product-detail-wrap .nav-tabs a.active {
  color: var(--pc-primary) !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
  border-bottom: 3px solid var(--pc-primary) !important;
  background: transparent !important;
}

.product-detail-wrap .tab-content .tab-pane {
  border: 1px solid var(--pc-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--pc-radius) var(--pc-radius) !important;
  padding: 24px !important;
}

.product-detail-wrap .kf-wrap .panel-heading {
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent)) !important;
  border-radius: var(--pc-radius) var(--pc-radius) 0 0 !important;
}

/* ── Forms / Search ──────────────────────────────────────────── */
.form-control {
  border: 2px solid var(--pc-border) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: border-color var(--pc-trans), box-shadow var(--pc-trans) !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--pc-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,113,206,.12) !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .results-list-product {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .results-list-product .product-image {
    flex: 0 0 110px !important;
    width: 110px !important;
  }

  .results-list-product .product-image img {
    width: 106px !important;
    height: 144px !important;
  }

  .product-image .review-score-small-wrapper.review-score-small-wrapper {
    width: 144px !important;
  }

  .cf-product-wrap { padding: 0 12px !important; }
  .cf-nav.top ul { overflow-x: auto; flex-wrap: nowrap !important; }
  header.banner { position: relative !important; }
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #edf0f5; }
::-webkit-scrollbar-thumb { background: #b0bdd0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8898aa; }

::selection { background: rgba(0,113,206,.15); color: var(--pc-navy); }


/* ── Swipeable program bar (auto-margins re-center when not overflowing;
     plain flex-start when overflowing so the left edge stays reachable) ── */
#pc-prog-filter .pc-pf-list {
  justify-content: flex-start !important;
  scrollbar-width: none !important;
}
#pc-prog-filter .pc-pf-list::-webkit-scrollbar { display: none !important; }
#pc-prog-filter .pc-pf-item { flex-shrink: 0 !important; }
#pc-prog-filter .pc-pf-item:first-child { margin-left: auto !important; }
#pc-prog-filter .pc-pf-item:last-child  { margin-right: auto !important; }

/* Edge fades — toggled by JS (pc-fade-l / pc-fade-r) when scrollable */
#pc-prog-filter .pc-pf-logos { position: relative !important; }
#pc-prog-filter .pc-pf-logos::before,
#pc-prog-filter .pc-pf-logos::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 42px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
  z-index: 3 !important;
}
#pc-prog-filter .pc-pf-logos::before {
  left: 0 !important;
  background: linear-gradient(90deg, var(--pc-navy, #1a3a6b) 20%, rgba(26,58,107,0)) !important;
}
#pc-prog-filter .pc-pf-logos::after {
  right: 0 !important;
  background: linear-gradient(270deg, var(--pc-navy, #1a3a6b) 20%, rgba(26,58,107,0)) !important;
}
#pc-prog-filter .pc-pf-logos.pc-fade-l::before { opacity: 1 !important; }
#pc-prog-filter .pc-pf-logos.pc-fade-r::after  { opacity: 1 !important; }


/* ── Floating program-name tooltip for the logo bar ── */
.pc-pf-tip {
  position: fixed;
  transform: translateX(-50%) translateY(-3px);
  background: #0f2547;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.pc-pf-tip--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}