/* ==========================================================================
   Product Hunters Child: Main Stylesheet
   Variables are defined in /style.css (as :root CSS custom properties)
   ========================================================================== */

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

.bph-container {
  max-width: var(--bph-container-max);
  margin: 0 auto;
  padding: 0 var(--bph-space-md);
}
.bph-section { padding: var(--bph-space-xl) 0; }
.bph-section--alt { background: var(--bph-bg-soft); }
.bph-section__title {
  text-align: center;
  margin-bottom: var(--bph-space-lg);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

/* --- Base typography ---------------------------------------------------- */
body {
  font-family: var(--bph-font-body);
  color: var(--bph-text);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background: var(--bph-white);
}
h1, h2, h3, h4 {
  font-family: var(--bph-font-heading);
  color: var(--bph-charcoal);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 0;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

a { color: var(--bph-accent-link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--bph-accent-link-dark); text-decoration: underline; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

/* --- Buttons ------------------------------------------------------------ */
.bph-btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: var(--bph-radius);
  font-weight: 600;
  text-align: center;
  transition: all .2s ease;
  border: none;
  cursor: pointer;
  font-family: var(--bph-font-body);
  font-size: 0.95rem;
}
.bph-btn--primary { background: var(--bph-primary); color: var(--bph-white); }
.bph-btn--primary:hover {
  background: var(--bph-primary-dark);
  color: var(--bph-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--bph-shadow-md);
}

/* --- Badges ------------------------------------------------------------- */
.bph-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--bph-primary-light);
  color: var(--bph-primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0.35rem var(--bph-space-sm) 0;
}
.bph-badge--primary { background: var(--bph-primary); color: var(--bph-white); }

/* --- Site header -------------------------------------------------------- */
.bph-site-header {
  background: var(--bph-cream);
  border-bottom: 1px solid var(--bph-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.bph-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bph-space-md);
  padding-top: var(--bph-space-sm);
  padding-bottom: var(--bph-space-sm);
}
.bph-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex: 0 0 auto;
}
.bph-logo:hover { text-decoration: none; }

/* Header logo: parent-scoped so we always beat the global `img { height:auto }`.
   Works for any aspect ratio: width is auto, height is fixed at 28px desktop
   / 22px mobile. Drop a logo at /assets/img/logo.png to override the wordmark. */
.bph-site-header .bph-logo__img {
  display: block !important;
  height: 28px !important;
  width: auto !important;
  max-height: 28px !important;
}
@media (max-width: 600px) {
  .bph-site-header .bph-logo__img {
    height: 18px !important;
    max-height: 18px !important;
  }
}

/* Backward-compat — only used if the text logo gets re-enabled */
.bph-logo__text {
  font-family: var(--bph-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bph-charcoal);
  letter-spacing: -0.5px;
}

/* Footer brand — smaller still since the footer is supplementary */
.bph-footer-brand__logo {
  display: inline-block;
  margin-bottom: var(--bph-space-xs);
}
.bph-site-footer .bph-footer-brand__img {
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-height: 26px !important;
}
.bph-primary-nav { flex: 1; }
.bph-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--bph-space-md);
  justify-content: center;
}
.bph-menu a {
  color: var(--bph-text);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
.bph-menu a:hover { color: var(--bph-primary); text-decoration: none; }
.bph-header-search {
  display: flex;
  align-items: center;
  background: var(--bph-bg-soft);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  gap: 0.5rem;
}
.bph-header-search input {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  outline: none;
  width: 180px;
  color: var(--bph-text);
}
.bph-header-search button {
  background: var(--bph-primary);
  color: var(--bph-white);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bph-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--bph-charcoal);
  cursor: pointer;
  padding: 0.5rem;
}

/* --- Categories dropdown ----------------------------------------------- */
.bph-primary-nav { flex: 1; display: flex; justify-content: flex-end; }
.bph-menu {
  align-items: center;
  gap: var(--bph-space-lg);
  justify-content: flex-end;
}
.bph-menu li { display: flex; align-items: center; }
.bph-menu a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.bph-menu__has-dropdown { position: relative; }
.bph-menu__has-dropdown > a {
  gap: 0.3rem;
}
.bph-menu__has-dropdown > a svg { transition: transform .2s ease; }
.bph-menu__has-dropdown:hover > a svg,
.bph-menu__has-dropdown:focus-within > a svg { transform: rotate(180deg); }

.bph-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  box-shadow: var(--bph-shadow-lg);
  padding: var(--bph-space-xs);
  min-width: 260px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 200;
}
.bph-menu__has-dropdown:hover > .bph-dropdown,
.bph-menu__has-dropdown:focus-within > .bph-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.bph-dropdown li { border: none; }
.bph-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  color: var(--bph-text);
  font-size: 0.95rem;
  border-radius: var(--bph-radius);
  font-weight: 500;
}
.bph-dropdown a:hover {
  background: var(--bph-primary-light);
  color: var(--bph-primary-dark);
  text-decoration: none;
}
.bph-dropdown .bph-category-icon {
  color: var(--bph-primary);
  display: flex;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .bph-primary-nav { display: none; }
  .bph-mobile-toggle { display: flex; margin-left: auto; }
  body.bph-menu-open .bph-primary-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bph-white);
    border-top: 1px solid var(--bph-border);
    padding: var(--bph-space-sm);
  }
  body.bph-menu-open .bph-menu { flex-direction: column; gap: 0; align-items: stretch; }
  body.bph-menu-open .bph-menu a { padding: 0.75rem 0; border-bottom: 1px solid var(--bph-border); }
  body.bph-menu-open .bph-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding-left: var(--bph-space-md);
  }
}

/* --- Pages (About, Contact) ------------------------------------------- */
.bph-page__header {
  padding: var(--bph-space-xl) 0 var(--bph-space-md);
  text-align: center;
  background: var(--bph-bg-soft);
  border-bottom: 1px solid var(--bph-border);
}
.bph-page__title { margin: 0; }
.bph-page__layout {
  padding: var(--bph-space-xl) 0;
  display: flex;
  justify-content: center;
}
.bph-page .entry-content {
  max-width: var(--bph-content-max);
  width: 100%;
}
.entry-content .lead {
  font-size: 1.2rem;
  color: var(--bph-text-muted);
  line-height: 1.7;
  margin-bottom: var(--bph-space-md);
}

/* --- Hero --------------------------------------------------------------- */
.bph-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--bph-white);
}
.bph-hero__image { position: absolute; inset: 0; z-index: 0; }
.bph-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.bph-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.75) 100%);
}
.bph-hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: var(--bph-space-xl);
  width: 100%;
}
.bph-hero__title {
  color: var(--bph-white);
  font-size: clamp(2rem, 5vw, 3.25rem);
  max-width: 800px;
  margin: 0 0 var(--bph-space-sm);
}
.bph-hero__title a { color: var(--bph-white); }
.bph-hero__title a:hover { text-decoration: none; color: var(--bph-primary-light); }
.bph-hero__excerpt {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 0 var(--bph-space-md);
  color: rgba(255,255,255,0.92);
}

/* --- Category grid (magazine-card pattern: image on top, flat label below) */
.bph-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bph-space-lg) var(--bph-space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.bph-category-grid__item a {
  display: flex;
  flex-direction: column;
  gap: var(--bph-space-sm);
  color: var(--bph-charcoal);
  transition: transform .3s ease;
}
.bph-category-grid__item a:hover {
  transform: translateY(-4px);
  text-decoration: none;
  color: var(--bph-charcoal);
}
.bph-category-grid__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  background: var(--bph-mint-soft);
  box-shadow: var(--bph-shadow-sm);
  transition: box-shadow .3s ease;
}
.bph-category-grid__item a:hover .bph-category-grid__media {
  box-shadow: var(--bph-shadow-lg);
}
.bph-category-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.bph-category-grid__item a:hover .bph-category-grid__media img {
  transform: scale(1.04);
}
.bph-category-grid__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bph-cream) 0%, var(--bph-mint) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bph-primary-dark);
  font-size: 0.8rem;
  font-weight: 500;
  padding: var(--bph-space-sm);
  line-height: 1.4;
}
.bph-category-grid__name {
  font-family: var(--bph-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bph-charcoal);
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding: 0 0.15rem;
}
.bph-category-grid__item a:hover .bph-category-grid__name {
  color: var(--bph-accent-dark);
}
@media (max-width: 900px) { .bph-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .bph-category-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Post grid + cards -------------------------------------------------- */
.bph-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bph-space-lg);
}
@media (max-width: 900px) { .bph-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bph-post-grid { grid-template-columns: 1fr; } }

.bph-card {
  background: var(--bph-white);
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  box-shadow: var(--bph-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
  border: 1px solid var(--bph-border);
}
.bph-card:hover { box-shadow: var(--bph-shadow-lg); transform: translateY(-2px); }
.bph-card__link { display: block; color: inherit; }
.bph-card__link:hover { text-decoration: none; color: inherit; }
.bph-card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.bph-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.bph-card:hover .bph-card__media img { transform: scale(1.05); }
.bph-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--bph-primary);
  color: var(--bph-white);
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--bph-radius);
}
.bph-card__body { padding: var(--bph-space-md); }
.bph-card__cat {
  display: inline-block;
  color: var(--bph-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.bph-card__title {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  line-height: 1.35;
  color: var(--bph-charcoal);
}
.bph-card__excerpt {
  font-size: 0.9rem;
  color: var(--bph-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* --- Article (single post + comparison) --------------------------------- */
.bph-article__header {
  padding: var(--bph-space-xl) 0 var(--bph-space-md);
  text-align: center;
}
.bph-article__header-inner { max-width: 800px; margin: 0 auto; }
.bph-article__title { margin: 0 0 var(--bph-space-sm); }
.bph-article__meta { color: var(--bph-text-muted); font-size: 0.9rem; }
.bph-article__featured {
  margin: 0 auto var(--bph-space-lg);
  max-width: 1200px;
}
.bph-article__featured img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--bph-radius-lg);
}
.bph-article__layout {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 320px;
  gap: var(--bph-space-lg);
  align-items: start;
  padding-bottom: var(--bph-space-xl);
}
@media (max-width: 1080px) {
  .bph-article__layout { grid-template-columns: 56px minmax(0, 1fr); }
  .bph-article__layout .bph-sidebar { display: none; }
}
@media (max-width: 720px) {
  .bph-article__layout { grid-template-columns: 1fr; gap: var(--bph-space-md); }
  .bph-article__layout .bph-share { order: 2; }
}

.entry-content {
  max-width: var(--bph-content-max);
  font-size: 1.05rem;
  line-height: 1.8;
}
.entry-content p { margin: 0 0 var(--bph-space-sm); }
.entry-content h2 { margin-top: var(--bph-space-lg); margin-bottom: var(--bph-space-sm); }
.entry-content h3 { margin-top: var(--bph-space-md); margin-bottom: var(--bph-space-xs); }
.entry-content img { border-radius: var(--bph-radius); margin: var(--bph-space-md) 0; }
.entry-content blockquote {
  border-left: 4px solid var(--bph-primary);
  padding: var(--bph-space-sm) var(--bph-space-md);
  background: var(--bph-bg-soft);
  margin: var(--bph-space-md) 0;
  font-style: italic;
}

/* --- Sidebar ------------------------------------------------------------ */
.bph-sidebar { position: sticky; top: 90px; }
.bph-sidebar__block {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-md);
}
.bph-sidebar__title {
  font-size: 1.1rem;
  margin: 0 0 var(--bph-space-sm);
}
.bph-category-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--bph-border);
}
.bph-category-nav li { border-bottom: 1px solid var(--bph-border); }
.bph-category-nav a {
  display: flex;
  align-items: center;
  gap: var(--bph-space-sm);
  padding: 0.75rem 0;
  color: var(--bph-text);
  font-weight: 500;
  font-size: 0.95rem;
}
.bph-category-nav a:hover { color: var(--bph-primary-dark); text-decoration: none; }
.bph-category-nav .bph-category-icon {
  color: var(--bph-primary);
  flex-shrink: 0;
  display: flex;
}

/* --- Archive — Spruce-style landing ------------------------------------ */
.bph-archive-cover {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--bph-white);
  margin-bottom: 0;
}
.bph-archive-cover__bg { position: absolute; inset: 0; z-index: 0; }
.bph-archive-cover__bg img { width: 100%; height: 100%; object-fit: cover; }
.bph-archive-cover__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
}
.bph-archive-cover__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--bph-space-xl);
  padding-bottom: var(--bph-space-xl);
  width: 100%;
}
.bph-breadcrumbs {
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.bph-breadcrumbs a { color: rgba(255,255,255,0.85); }
.bph-breadcrumbs a:hover { color: var(--bph-white); }
.bph-archive-cover__title {
  color: var(--bph-white);
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 var(--bph-space-xs);
  max-width: 900px;
}
.bph-archive-cover__desc {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
}

/* Tight section variant (less vertical padding) */
.bph-section--tight { padding: var(--bph-space-lg) 0; }

/* 4-up post grid */
.bph-post-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .bph-post-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .bph-post-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .bph-post-grid--4 { grid-template-columns: 1fr; } }

/* Big featured article card (full-width, image left) */
.bph-feature {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  box-shadow: var(--bph-shadow-sm);
  transition: box-shadow .2s ease;
}
.bph-feature:hover { box-shadow: var(--bph-shadow-lg); }
.bph-feature__link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  color: inherit;
}
.bph-feature__link:hover { text-decoration: none; color: inherit; }
.bph-feature__media {
  overflow: hidden;
  aspect-ratio: 4/3;
}
.bph-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bph-feature:hover .bph-feature__media img { transform: scale(1.04); }
.bph-feature__body {
  padding: var(--bph-space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bph-feature__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0 0 var(--bph-space-sm);
  line-height: 1.25;
  color: var(--bph-charcoal);
}
.bph-feature__excerpt {
  margin: 0 0 var(--bph-space-md);
  color: var(--bph-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.bph-feature__cta {
  color: var(--bph-primary);
  font-weight: 600;
}
@media (max-width: 820px) { .bph-feature__link { grid-template-columns: 1fr; } }

/* --- Legacy archive vars (keep for single-post sidebar etc.) ---------- */
.bph-archive-hero {
  padding: var(--bph-space-xl) 0 var(--bph-space-md);
  text-align: center;
  border-bottom: 1px solid var(--bph-border);
  background: var(--bph-bg-soft);
}
.bph-archive-title { margin-bottom: var(--bph-space-xs); }
.bph-archive-desc {
  max-width: 700px;
  margin: 0 auto;
  color: var(--bph-text-muted);
}

/* --- "How We Test Products" Process Section (homepage) ----------------- */
.bph-process {
  background: var(--bph-cream);
  position: relative;
  padding: var(--bph-space-xl) 0;
  overflow: hidden;
}
/* Decorative pseudos removed: cleaner editorial-authority look. */
.bph-process::before,
.bph-process::after { display: none; }
.bph-process__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--bph-space-xl);
  align-items: center;
}
.bph-process__copy {
  max-width: 500px;
}
.bph-process__heading {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 var(--bph-space-sm);
  color: var(--bph-charcoal);
}
.bph-process__rule {
  width: 64px;
  height: 4px;
  background: var(--bph-accent);
  border-radius: 2px;
  margin-bottom: var(--bph-space-md);
}
.bph-process__text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-md);
}
.bph-process__link {
  color: var(--bph-accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bph-process__link:hover { color: var(--bph-primary-dark); }
.bph-process__media {
  position: relative;
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  box-shadow: var(--bph-shadow-lg);
  aspect-ratio: 4/3;
  background: var(--bph-bg-soft);
}
.bph-process__media video,
.bph-process__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bph-process__watermark {
  position: absolute;
  top: var(--bph-space-sm);
  right: var(--bph-space-md);
  color: var(--bph-white);
  font-family: var(--bph-font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 0.95;
}
.bph-process__watermark em {
  font-style: italic;
  font-weight: 400;
  margin-left: 0.25rem;
}
@media (max-width: 820px) {
  .bph-process__inner { grid-template-columns: 1fr; }
  .bph-process::after { display: none; }
}

/* --- Pagination --------------------------------------------------------- */
.bph-pagination {
  text-align: center;
  margin-top: var(--bph-space-lg);
}
.bph-pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  margin: 0 0.2rem;
  border-radius: var(--bph-radius);
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  color: var(--bph-text);
  font-weight: 500;
}
.bph-pagination .page-numbers.current,
.bph-pagination .page-numbers:hover {
  background: var(--bph-primary);
  color: var(--bph-white);
  border-color: var(--bph-primary);
  text-decoration: none;
}

/* --- Site footer (deep navy near-black; complements brass accent) ------ */
.bph-site-footer {
  background: var(--bph-footer-bg);
  color: rgba(255,255,255,0.88);
  padding: var(--bph-space-xl) 0 var(--bph-space-md);
  margin-top: 0;
  position: relative;
}
.bph-site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bph-primary);
}
.bph-site-footer h3, .bph-site-footer h4 {
  color: var(--bph-white);
  margin-top: 0;
}
.bph-site-footer a { color: rgba(255,255,255,0.75); }
.bph-site-footer a:hover { color: var(--bph-white); text-decoration: none; }
.bph-site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--bph-space-lg);
  margin-bottom: var(--bph-space-lg);
}
.bph-footer-col ul { list-style: none; padding: 0; margin: 0; }
.bph-footer-col li { margin-bottom: 0.5rem; }
/* Footer disclosure: Product Hunters "colophon" treatment.
   Left-aligned, set between two full-width hairlines like the credits
   line of a printed field guide: flat terracotta eyebrow, plain body.
   No pseudo-elements (R3). Distinct from the in-article field-note card. */
.bph-site-footer .bph-affiliate-disclosure {
  background: transparent;
  border-top: 1px solid rgba(245,240,230,0.18);
  border-bottom: 1px solid rgba(245,240,230,0.18);
  border-radius: 0;
  padding: var(--bph-space-md) 0;
  margin: var(--bph-space-lg) 0 0;
  max-width: 760px;
  text-align: left;
  color: rgba(250,246,238,0.72);
  font-family: var(--bph-font-body);
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.65;
}
.bph-site-footer .bph-affiliate-disclosure strong {
  display: block;
  font-family: var(--bph-font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent);
  margin-bottom: 0.6rem;
}
.bph-site-footer .bph-affiliate-disclosure a {
  color: var(--bph-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bph-site-footer .bph-affiliate-disclosure a:hover {
  color: var(--bph-cream);
}
.bph-site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--bph-space-md);
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 640px) { .bph-site-footer__grid { grid-template-columns: 1fr; } }

/* --- Product card (existing — used in posts) --------------------------- */
.bph-product-card {
  position: relative;
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  box-shadow: var(--bph-shadow-sm);
  margin: var(--bph-space-md) 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--bph-space-md);
  transition: box-shadow .2s ease, transform .2s ease;
}
.bph-product-card:hover {
  box-shadow: var(--bph-shadow-lg);
  transform: translateY(-2px);
}
.bph-product-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bph-primary);
  color: var(--bph-white);
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom-right-radius: var(--bph-radius);
}
.bph-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bph-bg-soft);
}
.bph-product-card__media img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  padding: var(--bph-space-sm);
}
.bph-product-card__body { padding: var(--bph-space-md); }
.bph-product-card__title { margin: 0 0 var(--bph-space-xs); font-size: 1.25rem; }
.bph-product-card__rating { color: var(--bph-rating-star); margin-bottom: var(--bph-space-xs); font-size: 1rem; }
.bph-product-card__rating .bph-rating-num { color: var(--bph-text-muted); margin-left: 0.5rem; font-size: 0.9rem; }
.bph-product-card__price { font-weight: 700; font-size: 1.1rem; color: var(--bph-charcoal); margin-bottom: var(--bph-space-sm); }
.bph-product-card__pros, .bph-product-card__cons {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bph-space-sm);
  font-size: 0.92rem;
}
.bph-product-card__pros li::before { content: "✓ "; color: var(--bph-success); font-weight: bold; }
.bph-product-card__cons li::before { content: "✗ "; color: #C0392B; font-weight: bold; }
@media (max-width: 640px) { .bph-product-card { grid-template-columns: 1fr; } }

/* --- Affiliate disclosure ---------------------------------------------- */
.bph-affiliate-disclosure {
  background: var(--bph-bg-soft);
  border-left: 3px solid var(--bph-primary);
  padding: var(--bph-space-sm);
  font-size: 0.88rem;
  color: var(--bph-text-muted);
  margin: var(--bph-space-md) 0;
  border-radius: 0 var(--bph-radius) var(--bph-radius) 0;
}

/* --- Comparison post components --------------------------------------- */

/* Comparison table at top */
.bph-cmp-table-wrap {
  margin: var(--bph-space-md) 0 var(--bph-space-lg);
  overflow-x: auto;
  border-radius: var(--bph-radius-lg);
  border: 1px solid var(--bph-border);
  background: var(--bph-white);
}
.bph-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.bph-cmp-table thead { background: var(--bph-primary); color: var(--bph-white); }
.bph-cmp-table th {
  padding: var(--bph-space-sm) var(--bph-space-md);
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bph-cmp-table td {
  padding: var(--bph-space-sm) var(--bph-space-md);
  border-top: 1px solid var(--bph-border);
}
.bph-cmp-table tbody tr:nth-child(even) td { background: var(--bph-bg-soft); }
.bph-cmp-table tbody tr:hover td { background: var(--bph-primary-light); }

/* 2x2 product preview grid */
.bph-cmp-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bph-space-md);
  margin: var(--bph-space-md) 0 var(--bph-space-xl);
}
.bph-cmp-preview__item {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bph-cmp-preview__item:hover {
  box-shadow: var(--bph-shadow-md);
  transform: translateY(-2px);
}
.bph-cmp-preview__media {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bph-bg-soft);
  border-radius: var(--bph-radius);
  margin-bottom: var(--bph-space-xs);
}
.bph-cmp-preview__media img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.bph-cmp-preview__name {
  font-family: var(--bph-font-heading);
  font-size: 1rem;
  margin: 0;
  line-height: 1.3;
  color: var(--bph-charcoal);
}
.bph-cmp-preview__price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bph-primary);
}
.bph-btn--block { display: block; width: 100%; }
.bph-btn--lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}
@media (max-width: 900px) { .bph-cmp-preview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bph-cmp-preview { grid-template-columns: 1fr; } }

/* Per-product detail section */
.bph-cmp-section {
  border-top: 1px solid var(--bph-border);
  padding: var(--bph-space-xl) 0;
  margin: 0;
  scroll-margin-top: 90px;
}
.bph-cmp-section:first-of-type { border-top: none; }
.bph-cmp-section__head {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--bph-space-md);
  align-items: center;
  margin-bottom: var(--bph-space-md);
}
.bph-cmp-section__thumb {
  width: 150px;
  height: 150px;
  border-radius: var(--bph-radius);
  overflow: hidden;
  background: var(--bph-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bph-border);
}
.bph-cmp-section__thumb img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.bph-cmp-section__num {
  display: inline-block;
  font-family: var(--bph-font-heading);
  color: var(--bph-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 0.5rem;
}
.bph-cmp-section__h {
  display: inline;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  margin: 0;
}
.bph-cmp-section__tagline {
  font-style: italic;
  color: var(--bph-text-muted);
  font-weight: 500;
  font-size: 0.9em;
}
.bph-cmp-section__price {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--bph-primary-light);
  color: var(--bph-primary-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
}
.bph-cmp-section__body p { margin-bottom: var(--bph-space-sm); }
.bph-cmp-section__proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bph-space-md);
  margin: var(--bph-space-md) 0;
}
.bph-cmp-pros, .bph-cmp-cons {
  background: var(--bph-bg-soft);
  border-radius: var(--bph-radius);
  padding: var(--bph-space-sm) var(--bph-space-md);
  border-left: 4px solid var(--bph-success);
}
.bph-cmp-cons { border-left-color: #C0392B; }
.bph-cmp-pros h4, .bph-cmp-cons h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bph-charcoal);
}
.bph-cmp-pros ul, .bph-cmp-cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
}
.bph-cmp-pros li::before { content: "✓ "; color: var(--bph-success); font-weight: bold; }
.bph-cmp-cons li::before { content: "✗ "; color: #C0392B; font-weight: bold; }
@media (max-width: 640px) {
  .bph-cmp-section__head { grid-template-columns: 1fr; }
  .bph-cmp-section__thumb { width: 100%; height: 200px; }
  .bph-cmp-section__proscons { grid-template-columns: 1fr; }
}

/* Winner spotlight */
.bph-winner {
  position: relative;
  background: linear-gradient(135deg, var(--bph-cream) 0%, #FFFFFF 100%);
  border: 2px solid var(--bph-primary);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-lg);
  margin: var(--bph-space-xl) 0;
  box-shadow: var(--bph-shadow-md);
}
.bph-winner__badge {
  position: absolute;
  top: -14px;
  left: var(--bph-space-md);
  background: var(--bph-primary);
  color: var(--bph-white);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.bph-winner__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--bph-space-lg);
  align-items: center;
}
.bph-winner__media {
  background: var(--bph-white);
  border-radius: var(--bph-radius);
  padding: var(--bph-space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}
.bph-winner__media img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
}
.bph-winner__name {
  margin: 0 0 var(--bph-space-sm);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.bph-winner__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: var(--bph-space-sm);
  flex-wrap: wrap;
}
.bph-winner__price {
  font-family: var(--bph-font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--bph-charcoal);
}
.bph-winner__strike {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: var(--bph-text-muted);
}
.bph-winner__deal {
  background: var(--bph-accent-dark);
  color: var(--bph-white);
  padding: 0.2rem 0.55rem;
  border-radius: var(--bph-radius);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bph-winner__copy { margin-bottom: var(--bph-space-sm); }
.bph-winner__copy p { margin: 0 0 0.75rem; }
@media (max-width: 700px) {
  .bph-winner__grid { grid-template-columns: 1fr; }
  .bph-winner__media { max-width: 280px; margin: 0 auto; }
}

/* FAQ accordion */
.bph-faq {
  margin: var(--bph-space-xl) 0;
}
.bph-faq__title {
  margin-bottom: var(--bph-space-md);
}
.bph-faq__item {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.bph-faq__item[open] {
  box-shadow: var(--bph-shadow-sm);
  border-color: var(--bph-primary);
}
.bph-faq__q {
  padding: var(--bph-space-sm) var(--bph-space-md);
  cursor: pointer;
  font-family: var(--bph-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bph-charcoal);
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.bph-faq__q::-webkit-details-marker { display: none; }
.bph-faq__q::after {
  content: "+";
  position: absolute;
  right: var(--bph-space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--bph-primary);
  transition: transform .2s ease;
}
.bph-faq__item[open] .bph-faq__q::after {
  content: "−";
}
.bph-faq__a {
  padding: 0 var(--bph-space-md) var(--bph-space-sm);
  color: var(--bph-text);
  line-height: 1.65;
}

/* --- Editor's Picks (mixed-size editorial layout) --------------------- */
.bph-picks {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--bph-space-lg);
  align-items: start;
}
.bph-picks__feature .bph-card { margin: 0; }
.bph-picks__feature .bph-card__media { aspect-ratio: 16/10; }
.bph-picks__feature .bph-card__title {
  font-size: 1.5rem;
  font-family: var(--bph-font-heading);
}
.bph-picks__feature .bph-card__excerpt { font-size: 1rem; }
.bph-picks__list {
  display: flex;
  flex-direction: column;
  gap: var(--bph-space-sm);
}
@media (max-width: 820px) {
  .bph-picks { grid-template-columns: 1fr; }
}

/* --- Mini card (sidebar of Editor's Picks) ---------------------------- */
.bph-card-mini {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.bph-card-mini:hover { box-shadow: var(--bph-shadow-md); }
.bph-card-mini__link {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--bph-space-sm);
  color: inherit;
  align-items: stretch;
}
.bph-card-mini__link:hover { text-decoration: none; color: inherit; }
.bph-card-mini__media {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.bph-card-mini__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bph-card-mini__body {
  padding: var(--bph-space-sm) var(--bph-space-sm) var(--bph-space-sm) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bph-card-mini__body .bph-card__cat {
  margin-bottom: 0.25rem;
}
.bph-card-mini__title {
  font-family: var(--bph-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bph-charcoal);
  margin: 0;
}

/* --- Newsletter removed site-wide ------------------------------------- */

/* --- Section title — left-align variant for editorial sections --------- */
.bph-section--alt .bph-section__title {
  text-align: left;
  position: relative;
  padding-bottom: var(--bph-space-sm);
}
.bph-section--alt .bph-section__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--bph-primary);
  margin-top: 0.5rem;
}

/* --- Section title sparkle accent (used everywhere) ------------------- */
.bph-section__title { position: relative; }

/* --- Process section: tweak so it pulls from new vars ----------------- */
.bph-process { background: var(--bph-cream); }
.bph-process__rule { background: var(--bph-primary); }
.bph-process__link { color: var(--bph-accent-link); }
.bph-process__link:hover { color: var(--bph-accent-link-dark); }
.bph-process::before,
.bph-process::after { content: none; display: none; }

/* --- Cards: switch category label color to teal (link style) --------- */
.bph-card__cat { color: var(--bph-accent-link); }

/* --- Buttons remain coral (via --bph-primary) ------------------------- */

/* --- Hero: keep dark gradient but tint accent badge with coral ------- */

/* --- Comparison post — coral accents instead of blue ------------------ */
.bph-cmp-table thead { background: var(--bph-primary); }
.bph-cmp-section__num { color: var(--bph-primary); }
.bph-cmp-section__price {
  background: var(--bph-cream);
  color: var(--bph-primary-dark);
}
.bph-winner { border-color: var(--bph-primary); }
.bph-winner__badge { background: var(--bph-primary); }
.bph-faq__item[open] { border-color: var(--bph-primary); }
.bph-faq__q::after { color: var(--bph-primary); }
.bph-cmp-table tbody tr:hover td { background: var(--bph-cream); }

/* --- Pagination + buttons hover state --------------------------------- */
.bph-pagination .page-numbers.current,
.bph-pagination .page-numbers:hover {
  background: var(--bph-primary);
  border-color: var(--bph-primary);
}

/* --- Header search button (if any future use) ------------------------- */
.bph-header-search button { background: var(--bph-primary); }

/* --- Categories dropdown hover --------------------------------------- */
.bph-dropdown a:hover {
  background: var(--bph-cream);
  color: var(--bph-primary-dark);
}

/* Sidebar category title: no sparkle glyph (R3). */
.bph-sidebar__title::before { content: none; display: none; }

/* Hero: no sparkle glyph (R3). */
.bph-hero { position: relative; }
.bph-hero::after { content: none; display: none; }

/* Archive cover: no sparkle glyphs (R3). */
.bph-archive-cover::after { content: none; display: none; }

/* ───────────────────────────────────────────────────────────────
   Inner-page hero (About, Affiliate Disclosure, Privacy, etc.)
   Deep navy block, ivory text, no decorative shapes. Background is
   distinct from the ivory site header so the two zones read as
   separate sections (no merged top-of-page block).
   ─────────────────────────────────────────────────────────────── */

.bph-about-hero {
  position: relative;
  padding: calc(var(--bph-space-xl) + 0.5rem) 0;
  background: var(--bph-footer-bg);
  color: var(--bph-cream);
  text-align: center;
  margin-top: 0;
}
.bph-about-hero::before,
.bph-about-hero::after { display: none; }
.bph-about-hero__eyebrow {
  display: inline-block;
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent);
  margin-bottom: var(--bph-space-sm);
}
.bph-about-hero__title {
  font-family: var(--bph-font-heading);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.15;
  color: var(--bph-cream);
  max-width: 780px;
  margin: 0 auto var(--bph-space-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bph-about-hero__title em {
  color: var(--bph-accent);
  font-style: italic;
  font-weight: 500;
}
.bph-about-hero__lede {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(250,246,238,0.88);
}

/* Inner-page body content (after the about-hero) needs vertical
   breathing room above and below so it does not crowd into the
   header above or the footer below. */
.bph-page-content {
  padding: var(--bph-space-xl) 0 calc(var(--bph-space-xl) + 1rem);
}
.bph-page-content > .bph-container {
  max-width: var(--bph-content-max);
}
.bph-page-content h2 {
  font-family: var(--bph-font-heading);
  font-size: 1.6rem;
  margin-top: var(--bph-space-lg);
}
.bph-page-content h2:first-child { margin-top: 0; }
.bph-page-content h3 {
  font-family: var(--bph-font-heading);
  font-size: 1.2rem;
  margin-top: var(--bph-space-md);
}
.bph-page-content p,
.bph-page-content ul,
.bph-page-content ol {
  font-size: 1rem;
  line-height: 1.75;
}

/* Pages WITHOUT a hero (Contact, Blog) need extra vertical breathing
   room above/below the page content so it does not crowd the chrome. */
.bph-page:not(.bph-page--has-hero) .bph-page__layout {
  padding: calc(var(--bph-space-xl) + 0.5rem) 0 calc(var(--bph-space-xl) + 1rem);
}

/* Two-column editorial block (Who We Are, reused elsewhere) */
.bph-split {
  padding: var(--bph-space-xl) 0;
}
.bph-split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bph-space-xl);
  align-items: center;
}
.bph-split--reverse .bph-split__inner {
  grid-template-columns: 1fr 1fr;
}
.bph-split--reverse .bph-split__media { order: 2; }
.bph-split__eyebrow {
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-primary-dark);
  margin: 0 0 var(--bph-space-sm);
}
.bph-split__title {
  font-family: var(--bph-font-heading);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-md);
}
.bph-split__body p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--bph-text);
  margin: 0 0 var(--bph-space-sm);
}
.bph-split__media {
  position: relative;
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  box-shadow: var(--bph-shadow-lg);
  aspect-ratio: 4 / 3;
}
.bph-split__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bph-split__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 80px; height: 80px;
  background: var(--bph-primary);
  border-radius: var(--bph-radius-lg) 0 var(--bph-radius-lg) 0;
  transform: translate(24px, 24px);
  opacity: 0.9;
  z-index: -1;
}
.bph-split__media-wrap { position: relative; }

/* Our Value: 3 value blocks (Vision / Mission / Motto) */
.bph-values {
  padding: var(--bph-space-xl) 0;
  background: var(--bph-bg-soft);
}
.bph-values__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--bph-space-lg);
}
.bph-values__eyebrow {
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-primary-dark);
  margin: 0 0 var(--bph-space-sm);
}
.bph-values__title {
  font-family: var(--bph-font-heading);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-sm);
}
.bph-values__subtitle {
  font-size: 1.05rem;
  color: var(--bph-text-muted);
  line-height: 1.7;
  margin: 0;
}
.bph-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bph-space-md);
}
.bph-value-card {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-lg);
  text-align: center;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bph-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bph-shadow-lg);
}
.bph-value-card__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bph-primary-light);
  color: var(--bph-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--bph-space-sm);
  font-size: 1.5rem;
}
.bph-value-card__label {
  font-family: var(--bph-font-heading);
  font-size: 1.4rem;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-xs);
}
.bph-value-card__copy {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--bph-text-muted);
  margin: 0;
}

/* Message to readers — quote-style closer */
.bph-message {
  padding: var(--bph-space-xl) 0;
  text-align: center;
}
.bph-message__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--bph-space-lg) var(--bph-space-md);
}
.bph-message__eyebrow {
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-primary-dark);
  margin: 0 0 var(--bph-space-sm);
}
.bph-message__title {
  font-family: var(--bph-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-style: italic;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-md);
  position: relative;
}
.bph-message__title::before,
.bph-message__title::after {
  content: "";
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--bph-primary);
  vertical-align: middle;
  margin: 0 var(--bph-space-sm);
}
.bph-message__body p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--bph-text);
  margin: 0 0 var(--bph-space-sm);
}
.bph-message__sign {
  display: inline-block;
  margin-top: var(--bph-space-md);
  font-family: var(--bph-font-heading);
  font-size: 1.15rem;
  color: var(--bph-primary-dark);
}

/* Hide the default page header when a page uses its own hero */
.bph-page--has-hero .bph-page__header,
.bph-page--has-hero .bph-page__layout { display: none; }

/* Belt-and-suspenders: zero margin/padding above the hero so nothing
   creates a visible gap between the site header and the navy hero.
   .bph-main > .bph-page must touch the header edge cleanly, and any
   wpautop-wrapped paragraph that sneaks in before .bph-about-hero
   (e.g., from leading HTML comments in the page content) is hidden. */
.bph-main { margin: 0; padding: 0; }
.bph-page { margin: 0; }
.bph-page--has-hero { padding: 0; }
.bph-page--has-hero > p:first-child { display: none; }

/* Responsive */
@media (max-width: 860px) {
  .bph-split__inner { grid-template-columns: 1fr; gap: var(--bph-space-lg); }
  .bph-split--reverse .bph-split__media { order: 0; }
  .bph-values__grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   Brass accent: highlight color on titles, section heads,
   featured badges, eyebrows, and soft backgrounds.
   Kept in one block so it's easy to tune or back out.
   ─────────────────────────────────────────────────────────────── */

/* Section title underline — softer mint instead of coral */
.bph-section--alt .bph-section__title::after { background: var(--bph-mint); }

/* Give the centered section__title a subtle mint underline too */
.bph-section__title {
  position: relative;
  padding-bottom: 0.75rem;
}
.bph-section__title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--bph-mint);
  border-radius: 2px;
  transform: translateX(-50%);
}
/* Don't double-draw on left-aligned alt variant */
.bph-section--alt .bph-section__title::before { display: none; }

/* Section count badge removed */

/* Mint featured badge (used on non-comparison featured articles) */
.bph-badge--mint {
  background: var(--bph-mint);
  color: var(--bph-charcoal);
}

/* Alt section — tint the background to very soft mint so it has a
   distinct rhythm from cream-based sections, without fighting coral */
.bph-section--alt { background: var(--bph-mint-soft); }

/* Category grid name uses the base "plain text below image" style (4.17). */

/* Archive hero overlay — add mint tint at top for softness */
.bph-archive-cover__bg::after {
  background:
    linear-gradient(180deg, rgba(176,221,222,0.18) 0%, rgba(0,0,0,0) 35%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.75) 100%);
}

/* Archive breadcrumb — active crumb gets mint pill */
.bph-breadcrumbs > span:last-child {
  background: rgba(176,221,222,0.2);
  color: var(--bph-mint);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
}

/* About page — swap the teal decorative circle for mint */
.bph-about-hero::after { content: none; display: none; }

/* About eyebrows — flat terracotta (R4: no pill) */
.bph-split__eyebrow,
.bph-values__eyebrow,
.bph-message__eyebrow {
  display: inline-block;
  color: var(--bph-accent);
}

/* About value-card icons alternate coral/mint for rhythm */
.bph-values__grid .bph-value-card:nth-child(2) .bph-value-card__icon {
  background: var(--bph-mint-soft);
  color: var(--bph-mint-dark);
}

/* Message section hairlines — mint instead of coral */
.bph-message__title::before,
.bph-message__title::after { background: var(--bph-mint-dark); }

/* Feature CTA arrow emphasis on hover */
.bph-feature__cta { color: var(--bph-accent-link); font-weight: 600; }
.bph-feature__link:hover .bph-feature__cta { color: var(--bph-mint-dark); }

/* Home hero badge — mint pill when it falls back to generic featured */
.bph-hero .bph-badge { background: var(--bph-mint); color: var(--bph-charcoal); }

/* Empty-state (no posts in category) */
.bph-empty {
  text-align: center;
  color: var(--bph-text-muted);
  font-style: italic;
  padding: var(--bph-space-lg) 0;
}

/* ───────────────────────────────────────────────────────────────
   Brand hero (homepage) — editorial, product-agnostic
   Centered copy, cream→mint gradient, soft decorative shapes,
   proof stats below CTAs. Never pulls from WP_Query.
   ─────────────────────────────────────────────────────────────── */
.bph-brand-hero {
  position: relative;
  background: var(--bph-cream);
  border-bottom: 1px solid var(--bph-border);
  overflow: hidden;
}

/* Hero is constrained by .bph-container; the media column is a smaller
   rectangle with breathing room above/below + a small inset from the
   container's right edge so the image reads as a contained card, not
   a full-bleed banner. */
.bph-brand-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: calc(var(--bph-space-xl) + 1rem);
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

.bph-brand-hero__copy {
  padding: calc(var(--bph-space-xl) + 0.5rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  max-width: 100%;
}

.bph-brand-hero__eyebrow {
  display: inline-block;
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent-dark);
  margin-bottom: var(--bph-space-md);
}

.bph-brand-hero__title {
  font-family: var(--bph-font-heading);
  font-size: clamp(2rem, 4.8vw, 3.5rem);
  line-height: 1.08;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-md);
  letter-spacing: -0.015em;
  font-weight: 600;
}
.bph-brand-hero__title em {
  font-style: italic;
  color: var(--bph-accent-dark);
  font-weight: 500;
}

.bph-brand-hero__lede {
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--bph-text);
  margin: 0 0 var(--bph-space-lg);
}

.bph-brand-hero__ctas {
  display: flex;
  gap: var(--bph-space-sm);
  flex-wrap: wrap;
}

.bph-brand-hero__media {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 440px;
  overflow: hidden;
  border-radius: var(--bph-radius-lg);
  box-shadow: var(--bph-shadow-md);
  margin: var(--bph-space-lg) 0;
}
/* No gradient overlay: clean rectangle. */
.bph-brand-hero__media::after { display: none; }
.bph-brand-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bph-btn--ghost {
  background: transparent;
  color: var(--bph-charcoal);
  border: 1px solid var(--bph-charcoal);
}
.bph-btn--ghost:hover {
  background: var(--bph-charcoal);
  color: var(--bph-white);
}

@media (max-width: 900px) {
  .bph-brand-hero__inner { grid-template-columns: 1fr; }
  .bph-brand-hero__copy {
    padding: var(--bph-space-xl) 0 var(--bph-space-lg);
    max-width: 100%;
  }
  .bph-brand-hero__media {
    aspect-ratio: 4/3;
    max-height: 360px;
    margin: 0 0 var(--bph-space-lg);
  }
}
@media (max-width: 640px) {
  .bph-brand-hero__copy { padding-top: var(--bph-space-lg); }
  .bph-brand-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Anchor scroll offset so #categories / #latest don't hide under header */
#categories, #latest { scroll-margin-top: 80px; }

/* ───────────────────────────────────────────────────────────────
   Magazine card — used on category / archive index pages
   Rounded + shadowed, category meta row in coral, bold title,
   mint horizontal rule, long excerpt, explicit Read More link.
   ─────────────────────────────────────────────────────────────── */

.bph-card-mag {
  background: var(--bph-white);
  border-radius: var(--bph-radius-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid var(--bph-border);
}
.bph-card-mag:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
}

.bph-card-mag__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bph-bg-soft);
}
.bph-card-mag__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.bph-card-mag:hover .bph-card-mag__media img { transform: scale(1.04); }

/* "Best-Of Guide" ribbon on comparison cards */
.bph-card-mag__ribbon {
  position: absolute;
  top: var(--bph-space-sm);
  left: var(--bph-space-sm);
  background: var(--bph-primary);
  color: var(--bph-white);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.bph-card-mag__body {
  padding: var(--bph-space-md) var(--bph-space-md) var(--bph-space-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bph-card-mag__meta {
  font-size: 0.875rem;
  color: var(--bph-primary-dark);
  font-weight: 600;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.bph-card-mag__meta span {
  color: var(--bph-primary-dark);
  font-weight: 700;
}

.bph-card-mag__title {
  font-family: var(--bph-font-heading);
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-sm);
  letter-spacing: -0.005em;
}
.bph-card-mag__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--bph-mint), var(--bph-mint));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
.bph-card-mag__title a:hover {
  color: var(--bph-charcoal);
  background-size: 100% 2px;
  text-decoration: none;
}

/* Mint horizontal rule under title */
.bph-card-mag__rule {
  border: 0;
  height: 1px;
  background: var(--bph-mint);
  width: 100%;
  margin: 0 0 var(--bph-space-sm);
}

.bph-card-mag__excerpt {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--bph-text-muted);
  margin: 0 0 var(--bph-space-md);
  flex-grow: 1;
}

.bph-card-mag__more {
  align-self: flex-start;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bph-accent-link);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.bph-card-mag__more::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bph-accent-link);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.bph-card-mag__more:hover { color: var(--bph-accent-link-dark); }
.bph-card-mag__more:hover::after { transform: scaleX(1); }

/* Grid density — 3 columns on desktop for magazine cards (override --4) */
.bph-post-grid--mag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bph-space-lg);
}
@media (max-width: 960px) {
  .bph-post-grid--mag { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bph-post-grid--mag { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   Single-post share bar (left, sticky) + right sidebar widgets
   ─────────────────────────────────────────────────────────────── */

/* LEFT: vertical share bar — sticks in its column on long articles */
.bph-share { position: relative; }
.bph-share__inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.bph-share__label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bph-text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 0.75rem;
}
.bph-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  color: var(--bph-text);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  box-shadow: var(--bph-shadow-sm);
}
.bph-share__btn:hover { transform: translateY(-1px); text-decoration: none; color: var(--bph-white); }
.bph-share__btn--fb:hover  { background: #1877F2; border-color: #1877F2; }
.bph-share__btn--pin:hover { background: #E60023; border-color: #E60023; }
.bph-share__btn--tw:hover  { background: #000;    border-color: #000; }
.bph-share__btn--li:hover  { background: #0A66C2; border-color: #0A66C2; }

/* Responsive: on mobile, become horizontal row above content */
@media (max-width: 720px) {
  .bph-share__inner {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--bph-space-sm) 0;
    border-top: 1px solid var(--bph-border);
    border-bottom: 1px solid var(--bph-border);
  }
  .bph-share__label {
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0 0.75rem 0 0;
  }
}

/* RIGHT: sidebar column */
.bph-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--bph-space-md);
  position: sticky;
  top: 100px;
}

/* Generic widget shell */
.bph-widget {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-md);
  box-shadow: var(--bph-shadow-sm);
}
.bph-widget__title {
  font-family: var(--bph-font-heading);
  font-size: 1.5rem;
  color: var(--bph-charcoal);
  margin: 0 0 var(--bph-space-md);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--bph-mint);
}

/* Latest-articles list */
.bph-widget__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bph-space-md);
}
.bph-widget__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--bph-space-sm);
  align-items: start;
}
.bph-widget__thumb {
  display: block;
  width: 72px; height: 72px;
  border-radius: var(--bph-radius);
  overflow: hidden;
  background: var(--bph-bg-soft);
}
.bph-widget__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bph-widget__meta { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.bph-widget__link {
  font-family: var(--bph-font-heading);
  font-size: 0.98rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--bph-charcoal);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.bph-widget__link:hover { color: var(--bph-accent-link-dark); text-decoration: none; }
.bph-widget__date {
  font-size: 0.78rem;
  color: var(--bph-text-muted);
}

/* Accent header strip at top of sidebar (visible above widgets) */
.bph-sidebar::before {
  content: "";
  display: block;
  height: 6px;
  border-radius: var(--bph-radius);
  background: linear-gradient(90deg, var(--bph-mint), var(--bph-mint-dark));
}

/* Keep the entry-content max-width behavior — it was constrained before,
   but in the new 3-col grid the center column is already sized, so drop
   the artificial 720px cap on single posts */
.bph-article__layout .entry-content {
  max-width: none;
  width: 100%;
}

/* ───────────────────────────────────────────────────────────────
   Load-more button (archive pages)
   ─────────────────────────────────────────────────────────────── */
.bph-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--bph-space-lg);
}
.bph-load-more {
  min-width: 240px;
  padding: 0.85rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.bph-load-more:hover { transform: translateY(-1px); }
.bph-load-more.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────
   Contact form (contact page)
   ─────────────────────────────────────────────────────────────── */
.bph-contact-form-section {
  padding: var(--bph-space-xl) 0;
  background: var(--bph-mint-soft);
  border-top: 1px solid var(--bph-border);
}
.bph-contact-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-lg);
  box-shadow: var(--bph-shadow-md);
}
.bph-contact-form h2 {
  font-family: var(--bph-font-heading);
  font-size: 1.75rem;
  margin: 0 0 0.25rem;
  text-align: center;
}
.bph-contact-form__subtitle {
  text-align: center;
  color: var(--bph-text-muted);
  font-size: 0.98rem;
  margin: 0 0 var(--bph-space-lg);
}
.bph-contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bph-space-sm);
}
.bph-contact-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.bph-contact-form__field--full { grid-column: 1 / -1; }
.bph-contact-form__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bph-charcoal);
  letter-spacing: 0.01em;
}
.bph-contact-form__field input,
.bph-contact-form__field select,
.bph-contact-form__field textarea {
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius);
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: var(--bph-font-body);
  background: var(--bph-white);
  color: var(--bph-charcoal);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bph-contact-form__field input:focus,
.bph-contact-form__field select:focus,
.bph-contact-form__field textarea:focus {
  border-color: var(--bph-mint-dark);
  box-shadow: 0 0 0 3px rgba(176,221,222,0.25);
}
.bph-contact-form__field textarea {
  min-height: 140px;
  resize: vertical;
}
.bph-contact-form__submit {
  width: 100%;
  margin-top: var(--bph-space-md);
  padding: 0.95rem;
  font-size: 1rem;
  font-weight: 600;
}
.bph-contact-form__notice {
  margin: var(--bph-space-md) 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--bph-radius);
  font-size: 0.95rem;
  line-height: 1.5;
  display: none;
}
.bph-contact-form__notice--ok {
  background: rgba(176,221,222,0.3);
  border: 1px solid var(--bph-mint-dark);
  color: var(--bph-charcoal);
  display: block;
}
.bph-contact-form__notice--err {
  background: rgba(232,147,119,0.15);
  border: 1px solid var(--bph-primary);
  color: var(--bph-primary-dark);
  display: block;
}
@media (max-width: 560px) {
  .bph-contact-form__grid { grid-template-columns: 1fr; }
  .bph-contact-form { padding: var(--bph-space-md); }
}

/* ───────────────────────────────────────────────────────────────
   Homepage FAQ — <details> accordion, mint accents
   ─────────────────────────────────────────────────────────────── */
.bph-faq-home__inner {
  max-width: 820px;
  margin: 0 auto;
}
.bph-faq-home__head {
  text-align: center;
  margin-bottom: var(--bph-space-lg);
}
.bph-faq-home__eyebrow {
  display: inline-block;
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent-dark);
  margin-bottom: var(--bph-space-sm);
}
.bph-faq-home .bph-section__title {
  text-align: center;
  margin-bottom: var(--bph-space-sm);
}
.bph-faq-home__lede {
  color: var(--bph-text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}
.bph-faq-home__lede a {
  color: var(--bph-accent-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bph-mint);
  text-underline-offset: 3px;
}

.bph-faq-home__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bph-faq-item {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  box-shadow: var(--bph-shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.bph-faq-item[open] {
  border-color: var(--bph-mint-dark);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.bph-faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bph-space-sm);
  padding: 1rem 1rem 1rem 1.25rem;
  font-family: var(--bph-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bph-charcoal);
  cursor: pointer;
  list-style: none;
  transition: background .15s ease, color .15s ease;
}
.bph-faq-item__q > span:first-child { flex: 1 1 auto; min-width: 0; }
.bph-faq-item__q::-webkit-details-marker { display: none; }
.bph-faq-item__q:hover { background: var(--bph-mint-soft); }
.bph-faq-item[open] .bph-faq-item__q { color: var(--bph-accent-link-dark); }

/* Plus  minus icon via CSS. margin-left: auto pins it to the right
   edge of the summary regardless of question length, and flex: none
   prevents shrinking. */
.bph-faq-item__icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--bph-mint-soft);
  border: 1px solid var(--bph-mint);
}
.bph-faq-item__icon::before,
.bph-faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--bph-mint-dark);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.bph-faq-item__icon::before { width: 10px; height: 2px; }
.bph-faq-item__icon::after  { width: 2px; height: 10px; }
.bph-faq-item[open] .bph-faq-item__icon {
  background: var(--bph-mint);
  border-color: var(--bph-mint-dark);
}
.bph-faq-item[open] .bph-faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.bph-faq-item__a {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--bph-mint);
  margin-top: -1px;
}
.bph-faq-item__a p {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--bph-text);
}

/* FAQ title underline centered (the .bph-section--alt ::after defaults
   to left-flow; explicitly center it when inside the FAQ head) */
.bph-faq-home .bph-section__title::after { margin: 0.5rem auto 0; }

/* ───────────────────────────────────────────────────────────────
   Top disclosure bar (above the site header)
   Charcoal background with cream text, mint "Learn more" link.
   Collapsed by default; click to reveal full disclosure.
   ─────────────────────────────────────────────────────────────── */
.bph-topbar {
  background: var(--bph-footer-bg);
  color: rgba(255,255,255,0.9);
  font-family: var(--bph-font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bph-topbar__inner {
  padding: 0.7rem var(--bph-space-md);
}
.bph-topbar__short {
  margin: 0;
  display: flex;
  gap: 0.5rem 0.9rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}
.bph-topbar__short > span {
  color: rgba(255,255,255,0.85);
}

/* The "Learn more" toggle reads as a text link but is a button */
.bph-topbar__toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--bph-mint);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: underline;
  text-decoration-color: rgba(176,221,222,0.5);
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.bph-topbar__toggle:hover,
.bph-topbar__toggle:focus-visible {
  color: var(--bph-white);
  text-decoration-color: var(--bph-white);
  outline: none;
}
.bph-topbar__toggle svg {
  transition: transform .2s ease;
}
.bph-topbar__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Expanded panel */
.bph-topbar__details {
  max-width: 820px;
  margin: 0.9rem auto 0;
  padding: var(--bph-space-sm) var(--bph-space-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bph-radius);
}
.bph-topbar__details p {
  margin: 0 0 0.6rem;
  color: rgba(255,255,255,0.78);
  font-size: 0.85rem;
  line-height: 1.65;
}
.bph-topbar__details p:last-child { margin-bottom: 0; }
.bph-topbar__details strong {
  color: var(--bph-mint);
  font-weight: 600;
}
.bph-topbar__details a {
  color: var(--bph-white);
  text-decoration: underline;
  text-decoration-color: var(--bph-mint);
}
.bph-topbar__details a:hover {
  color: var(--bph-mint);
}

@media (max-width: 640px) {
  .bph-topbar { font-size: 0.82rem; }
  .bph-topbar__short { justify-content: flex-start; text-align: left; }
}

/* ───────────────────────────────────────────────────────────────
   Related-articles carousel (single post bottom)
   Native scroll-snap + arrow buttons for desktop.
   ─────────────────────────────────────────────────────────────── */
.bph-related {
  padding: var(--bph-space-xl) 0;
  background: var(--bph-mint-soft);
  border-top: 1px solid var(--bph-border);
}
.bph-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bph-space-md);
  margin-bottom: var(--bph-space-lg);
  flex-wrap: wrap;
}
.bph-related__eyebrow {
  display: inline-block;
  font-family: var(--bph-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent);
  margin-bottom: 0.5rem;
}
.bph-related__title {
  font-family: var(--bph-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--bph-charcoal);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Arrow buttons */
.bph-related__nav {
  display: flex;
  gap: 0.5rem;
}
.bph-related__btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  color: var(--bph-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
  box-shadow: var(--bph-shadow-sm);
}
.bph-related__btn:hover:not(:disabled) {
  background: var(--bph-primary);
  border-color: var(--bph-primary);
  color: var(--bph-white);
  transform: translateY(-1px);
}
.bph-related__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Track — horizontal scroll-snap */
.bph-related__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--bph-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--bph-space-sm);
  -webkit-overflow-scrolling: touch;
}
/* Subtle scrollbar */
.bph-related__track::-webkit-scrollbar { height: 6px; }
.bph-related__track::-webkit-scrollbar-thumb { background: var(--bph-mint); border-radius: 3px; }
.bph-related__track::-webkit-scrollbar-track { background: transparent; }

/* Show ~4 cards at 1200px, ~3 at 900, ~2 at 600, ~1.2 on mobile */
@media (min-width: 900px)  { .bph-related__track { grid-auto-columns: calc((100% - (var(--bph-space-md) * 3)) / 4); } }
@media (max-width: 899px)  { .bph-related__track { grid-auto-columns: calc((100% - (var(--bph-space-md) * 2)) / 3); } }
@media (max-width: 720px)  { .bph-related__track { grid-auto-columns: calc((100% - var(--bph-space-md)) / 2); } }
@media (max-width: 520px)  { .bph-related__track { grid-auto-columns: 78%; } }

/* Card */
.bph-rel-card {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bph-rel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
.bph-rel-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--bph-bg-soft);
}
.bph-rel-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.bph-rel-card:hover .bph-rel-card__media img { transform: scale(1.04); }

.bph-rel-card__ribbon {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--bph-primary);
  color: var(--bph-white);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.bph-rel-card__body {
  padding: var(--bph-space-sm) var(--bph-space-md) var(--bph-space-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}
.bph-rel-card__cat {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bph-primary-dark);
  font-weight: 700;
}
.bph-rel-card__title {
  font-family: var(--bph-font-heading);
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0;
  font-weight: 600;
  color: var(--bph-charcoal);
  flex-grow: 1;
}
.bph-rel-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--bph-mint), var(--bph-mint));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.bph-rel-card__title a:hover { background-size: 100% 2px; text-decoration: none; }
.bph-rel-card__more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bph-accent-link);
  text-decoration: none;
  margin-top: 0.25rem;
}
.bph-rel-card__more:hover { color: var(--bph-accent-link-dark); text-decoration: none; }

@media (max-width: 560px) {
  .bph-related__head { flex-direction: column; align-items: stretch; gap: var(--bph-space-sm); }
  .bph-related__nav { display: none; }  /* rely on swipe on mobile */
}

/* Laurel branding removed — kept helper function in functions.php unused */

/* ───────────────────────────────────────────────────────────────
   Editor's Letter (homepage, just under the hero)
   Short signed editorial blurb on ivory ground.
   ─────────────────────────────────────────────────────────────── */
.bph-editors-letter {
  background: var(--bph-white);
  border-bottom: 1px solid var(--bph-border);
  padding: var(--bph-space-xl) 0;
}
.bph-editors-letter__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--bph-space-md);
  position: relative;
}
.bph-editors-letter__inner::before,
.bph-editors-letter__inner::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--bph-accent);
  margin: 0 auto var(--bph-space-md);
}
.bph-editors-letter__inner::after {
  margin: var(--bph-space-md) auto 0;
}
.bph-editors-letter__eyebrow {
  display: block;
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent-dark);
  margin-bottom: var(--bph-space-md);
}
.bph-editors-letter__body {
  font-family: var(--bph-font-heading);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  color: var(--bph-charcoal);
  font-weight: 400;
  font-style: italic;
  margin: 0 0 var(--bph-space-md);
}
.bph-editors-letter__sign {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.bph-editors-letter__signature {
  font-family: var(--bph-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bph-primary);
  font-style: italic;
}
.bph-editors-letter__role {
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bph-text-muted);
}

/* ───────────────────────────────────────────────────────────────
   How We Score (homepage, after Process section)
   Four-criterion rubric: brass numerals, navy headings.
   ─────────────────────────────────────────────────────────────── */
.bph-score {
  background: var(--bph-mint-soft);
  padding: var(--bph-space-xl) 0;
}
.bph-score__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--bph-space-lg);
  padding: 0 var(--bph-space-md);
}
.bph-score__eyebrow {
  display: inline-block;
  font-family: var(--bph-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bph-accent-dark);
  margin-bottom: var(--bph-space-sm);
}
.bph-score .bph-section__title {
  margin: 0 0 var(--bph-space-sm);
}
.bph-score__lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bph-text);
  margin: 0;
}
.bph-score__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--bph-container-max);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bph-space-md);
  padding: 0 var(--bph-space-md);
}
.bph-score__item {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-md);
  position: relative;
  display: flex;
  flex-direction: column;
}
.bph-score__num {
  font-family: var(--bph-font-heading);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--bph-accent);
  line-height: 1;
  margin-bottom: var(--bph-space-sm);
  font-feature-settings: "lnum";
}
.bph-score__name {
  font-family: var(--bph-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bph-charcoal);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.bph-score__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bph-text);
  margin: 0;
}
@media (max-width: 900px) {
  .bph-score__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .bph-score__list { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   Wordmark fallback (when assets/img/logo.png is missing)
   PHP renders a `.bph-logo--wordmark` modifier on the <a>; the
   inner <span class="bph-logo__text"> is styled here.
   ─────────────────────────────────────────────────────────────── */
.bph-logo--wordmark {
  text-decoration: none;
}
.bph-logo--wordmark .bph-logo__text {
  font-family: var(--bph-font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--bph-charcoal);
  letter-spacing: -0.01em;
  font-style: italic;
  line-height: 1;
}
.bph-footer-brand__logo--wordmark {
  display: inline-block;
  text-decoration: none;
}
.bph-footer-brand__text {
  font-family: var(--bph-font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--bph-white);
  letter-spacing: -0.01em;
  font-style: italic;
}
@media (max-width: 600px) {
  .bph-logo--wordmark .bph-logo__text { font-size: 1.35rem; }
}

/* ───────────────────────────────────────────────────────────────
   Categories Index page (page-categories.php)
   ─────────────────────────────────────────────────────────────── */
.bph-cat-index__intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--bph-space-lg);
  padding: 0 var(--bph-space-md);
}
.bph-cat-index__lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bph-text);
  margin: 0;
}

/* Generic horizontal scroll strip (used by Categories Index carousels).
   Each direct child is a card; native scroll-snap, no JS required. */
.bph-strip-wrap {
  position: relative;
}
.bph-strip {
  display: flex;
  gap: var(--bph-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem var(--bph-space-md) var(--bph-space-md);
  margin: 0 calc(-1 * var(--bph-space-md));
  scrollbar-width: thin;
  scrollbar-color: var(--bph-accent) transparent;
}
.bph-strip::-webkit-scrollbar { height: 6px; }
.bph-strip::-webkit-scrollbar-track { background: transparent; }
.bph-strip::-webkit-scrollbar-thumb {
  background: var(--bph-accent);
  border-radius: 3px;
}
.bph-strip > * {
  flex: 0 0 calc((100% - var(--bph-space-md) * 2) / 3);
  scroll-snap-align: start;
  margin: 0;
}
@media (max-width: 900px) {
  .bph-strip > * { flex-basis: calc((100% - var(--bph-space-md)) / 2); }
}
@media (max-width: 600px) {
  .bph-strip > * { flex-basis: 80%; }
}
.bph-strip__empty {
  padding: var(--bph-space-lg) var(--bph-space-md);
  text-align: center;
  color: var(--bph-text-muted);
  font-style: italic;
  background: var(--bph-mint-soft);
  border-radius: var(--bph-radius-lg);
}

/* Section heading row (carousel header) with subtle "View all" link */
.bph-section__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bph-space-md);
  margin-bottom: var(--bph-space-md);
  flex-wrap: wrap;
}
.bph-section__head-row .bph-section__title {
  margin: 0;
  text-align: left;
}
.bph-section__head-link {
  font-family: var(--bph-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bph-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bph-section__head-link:hover { color: var(--bph-primary); }

/* ───────────────────────────────────────────────────────────────
   Article-top disclaimer (single.php + single-comparison.php)
   Subtle full-width band: brass uppercase eyebrow + muted body,
   container-max width, no heavy borders/boxes. Distinct from the
   footer disclosure (centered editorial card with dual brass rules).
   ─────────────────────────────────────────────────────────────── */
.bph-article-disclaimer {
  max-width: 820px;
  margin: var(--bph-space-md) auto var(--bph-space-lg);
  padding: 0 var(--bph-space-md);
}
.bph-article-disclaimer__eyebrow {
  display: block;
  font-family: var(--bph-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bph-accent-dark);
  margin-bottom: 0.4rem;
}
.bph-article-disclaimer p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--bph-text-muted);
  margin: 0;
}
.bph-article-disclaimer p strong {
  color: var(--bph-charcoal);
  font-weight: 600;
}

/* In-post FAQ accordion (when authored as <details class="bph-faq-item">
   inside a post body). Adds vertical rhythm + a wrapping list look so it
   stands apart from preceding paragraphs. */
.entry-content > .bph-faq-list {
  margin: var(--bph-space-lg) 0;
}
.entry-content .bph-faq-item + .bph-faq-item {
  margin-top: var(--bph-space-sm);
}

/* === In-article disclaimer (R6): Field Guide "field-note card" ===========
   Tinted paper panel, warm hairline border + solid terracotta left edge,
   flat uppercase terracotta eyebrow. Distinct from the footer colophon. */
.bph-disclaimer {
  background: var(--bph-mint-soft);
  border: 1px solid var(--bph-border);
  border-left: 4px solid var(--bph-accent);
  border-radius: 0 var(--bph-radius) var(--bph-radius) 0;
  padding: var(--bph-space-md);
  margin: var(--bph-space-lg) 0;
}
.bph-disclaimer__eyebrow {
  display: block;
  font-family: var(--bph-font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bph-accent-dark);
  margin-bottom: 0.5rem;
}
.bph-disclaimer__body {
  margin: 0;
  color: var(--bph-text);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* === Post-level FAQ (R7): accordion mirroring the homepage FAQ =========== */
.bph-post-faq { margin: var(--bph-space-xl) 0; }
.bph-post-faq__title { margin-bottom: var(--bph-space-md); font-family: var(--bph-font-heading); }
.bph-post-faq__item {
  background: var(--bph-white);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.bph-post-faq__item[open] { box-shadow: var(--bph-shadow-sm); border-color: var(--bph-primary); }
.bph-post-faq__item summary {
  padding: var(--bph-space-sm) var(--bph-space-md);
  cursor: pointer;
  font-family: var(--bph-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bph-charcoal);
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.bph-post-faq__item summary::-webkit-details-marker { display: none; }
.bph-post-faq__item summary::after {
  content: "+";
  position: absolute;
  right: var(--bph-space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--bph-primary);
  transition: transform .2s ease;
}
.bph-post-faq__item[open] summary::after { content: "\2212"; }
.bph-post-faq__answer { padding: 0 var(--bph-space-md) var(--bph-space-sm); color: var(--bph-text); line-height: 1.65; }
.bph-post-faq__answer p { margin: 0 0 0.75rem; }
.bph-post-faq__answer p:last-child { margin-bottom: 0; }

/* === TLDR card (Affiliate Disclosure "4 things to know") =============== */
.bph-tldr-card {
  background: var(--bph-primary-light);
  border: 1px solid var(--bph-border);
  border-radius: var(--bph-radius-lg);
  padding: var(--bph-space-md) var(--bph-space-lg);
  margin: var(--bph-space-lg) 0;
}
.bph-tldr-card h2 { margin-top: 0; }
.bph-tldr-card ul { margin-bottom: 0; }