/* ============================================================
   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: 120px !important;
  margin-bottom: 0 !important;
}

.hero-wrap .hero-inner {
  padding: 32px 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) ────────────── */
#pc-prog-filter {
  background: var(--pc-navy) !important;
  border-bottom: 3px solid rgba(255,255,255,.08) !important;
  padding: 0 !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;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  flex-wrap: wrap !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 {
  height: 20px !important;
  width: auto !important;
  max-width: 60px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;  /* white-wash logos for dark bg */
  opacity: 0.7 !important;
}

#pc-prog-filter .pc-pf-item--active .pc-pf-logo {
  opacity: 1 !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; }
}

/* ── 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;
  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 {
  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: linear-gradient(135deg, var(--pc-navy) 0%, var(--pc-navy-mid) 100%) !important;
  padding: 40px 0 !important;
  text-align: left !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: #fff !important;
  letter-spacing: -.02em !important;
  margin-bottom: 8px !important;
}

.product-detail-wrap article header p.publisher-name {
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !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); }