@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Inter:wght@400;500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: #F0F2F4;
  color: #1A1A1A;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* NAV */
.nav {
  padding: 16px 0;
  background: #F0F2F4;
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav-logo span { color: #2D6A4F; }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-link { font-size: 13px; color: #666; text-decoration: none; font-weight: 500; }
.nav-link:hover { color: #1A1A1A; }
.nav-cta {
  background: #1C3829;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
}
.nav-cta:hover { background: #2D6A4F; }

/* HERO */
.hero { padding: 56px 0 48px; background: #F0F2F4; }
.hero .container { text-align: center; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E8F5EE;
  color: #2D6A4F;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.hero-tag-dot { width: 6px; height: 6px; background: #2D6A4F; border-radius: 50%; }
.hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0F1F18;
  margin-bottom: 16px;
}
.hero h1 em { font-style: normal; color: #2D6A4F; }
.hero-sub {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0 auto 36px;
  max-width: 480px;
}

/* SEARCH BAR */
.search-wrap {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E0DDD6;
  display: flex;
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  max-width: 700px;
  margin: 0 auto;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.search-wrap:hover {
  box-shadow: 0 8px 40px rgba(45,106,79,0.12);
  border-color: #C8DDD3;
}
.search-field {
  flex: 1;
  border-right: 1px solid #E0DDD6;
  position: relative;
  transition: background 0.15s;
}
.search-field:last-of-type { border-right: none; }
.search-field:hover { background: #FAFAF8; }
.search-field:first-child:hover { border-radius: 16px 0 0 16px; }
.search-field-inner { padding: 16px 20px; cursor: pointer; }
.search-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: 4px;
}
.search-value { font-size: 14px; color: #1A1A1A; font-weight: 500; }
.search-value.placeholder { color: #BBB; }
.search-btn {
  background: #1C3829;
  color: #fff;
  border: none;
  padding: 12px 28px;
  margin: 8px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.search-btn:hover { background: #2D6A4F; transform: scale(1.02); }
.search-btn:active { transform: scale(0.99); }

/* DROPDOWN */
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -1px;
  background: #fff;
  border: 1px solid #E8E4DC;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  z-index: 200;
  min-width: 300px;
  display: none;
  overflow: hidden;
}
.dropdown.open {
  display: block;
  animation: dropIn 0.14s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 6px 0;
}
.dropdown-item {
  padding: 12px 20px;
  font-size: 16px;
  color: #1A1A1A;
  cursor: pointer;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.1s;
}
.dropdown-item:hover { background: #F5F2EC; }
.dropdown-item.selected { font-weight: 600; color: #1C3829; }
.dropdown-item.selected::after { content: '✓'; font-size: 12px; color: #2D6A4F; }
.dropdown-item.hidden { display: none; }

/* STATS */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px auto 0;
  max-width: 700px;
}
.stat-box {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E8E4DC;
  padding: 12px 16px;
}
.stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1C3829;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label { font-size: 11px; color: #888; margin-top: 3px; font-weight: 500; }

/* SECTION */
.section { padding: 40px 0; }
.section-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-title {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F1F18;
}
.section-sub { font-size: 13px; color: #2D6A4F; font-weight: 500; text-decoration: none; }
.section-sub:hover { text-decoration: underline; }

/* BREED GRID */
.breed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.breed-grid--lg {
  grid-template-columns: repeat(5, 1fr);
}
.breed-grid--sq {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.breed-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E4DC;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
  display: block;
}
.breed-card:hover { border-color: #2D6A4F; transform: translateY(-2px); }

/* square card variant */
.breed-card--sq {
  border: none;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background: #E0DBD2;
  padding-top: 100%;
}
.breed-card--sq:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.13); }
.breed-img--sq {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breed-img--sq img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.breed-img-placeholder {
  font-size: 40px;
}
.breed-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 12px 10px;
  background: linear-gradient(to top, rgba(10,25,18,0.75) 0%, transparent 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* standard card parts (breeds page) */
.breed-img {
  height: 110px;
  background: #E8E4DC;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.breed-img img { width: 100%; height: 100%; object-fit: cover; }
.breed-info { padding: 10px 12px; }
.breed-name { font-size: 12px; font-weight: 600; color: #1A1A1A; line-height: 1.3; }
.breed-count { font-size: 10px; color: #999; margin-top: 2px; }

/* FEATURED BREEDERS - horizontal */
.listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.listing-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E4DC;
  overflow: hidden;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: row;
}
.listing-card:hover { border-color: #2D6A4F; }
.listing-img-wrap {
  width: 180px;
  flex-shrink: 0;
  background: #C8DDD3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.listing-body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.listing-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.listing-name { font-size: 14px; font-weight: 600; color: #1A1A1A; margin-bottom: 3px; }
.listing-meta { font-size: 11px; color: #888; }
.listing-verified {
  background: #1C3829;
  color: #7EC8A0;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.listing-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 14px;
}
.listing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #F0EDE8;
}
.listing-price { font-size: 12px; font-weight: 600; color: #1C3829; }
.tag-row { display: flex; gap: 4px; }
.tag {
  font-size: 9px;
  background: #F0F7F3;
  color: #2D6A4F;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}

/* ARTICLES */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.article-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E4DC;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
  text-decoration: none;
}
.article-card:hover { border-color: #2D6A4F; }
.article-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2D6A4F;
}
.article-title {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0F1F18;
  line-height: 1.4;
}
.article-excerpt {
  font-size: 12px;
  color: #888;
  line-height: 1.65;
  flex: 1;
}
.article-link {
  font-size: 12px;
  color: #2D6A4F;
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
}
.article-link:hover { text-decoration: underline; }

/* DIVIDER */
.divider { height: 1px; background: #E8E4DC; margin: 0 24px; }

/* PILLS */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.pill:hover { border-color: #2D6A4F; color: #2D6A4F; background: #F0F7F3; }

/* PAGE HERO (breeds index, etc.) */
.page-hero {
  padding: 40px 0 32px;
  background: #F5F2EC;
  border-bottom: 1px solid #E8E4DC;
}
.page-hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F1F18;
  margin-bottom: 8px;
}
.page-hero p { font-size: 14px; color: #666; line-height: 1.6; }

/* FOOTER */
.footer { background: #0F1F18; padding: 40px 0; margin-top: 8px; }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.footer-logo span { color: #7EC8A0; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.footer-col-title {
  font-size: 10px;
  font-weight: 700;
  color: #7EC8A0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.footer-link {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 7px;
  text-decoration: none;
}
.footer-link:hover { color: #7EC8A0; }
.footer-bottom {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   STATE BREEDER PAGE  (sp- prefix)
   ============================================================ */

/* HERO */
.sp-hero {
  background: #F5F2EC;
  border-bottom: 1px solid #E8E4DC;
  overflow: hidden;
}
.sp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: center;
  gap: 0;
  min-height: 360px;
}
.sp-hero-text {
  padding: 32px 0 36px;
}
.sp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #AAA;
  margin-bottom: 14px;
}
.sp-breadcrumb a { color: #2D6A4F; text-decoration: none; }
.sp-breadcrumb a:hover { text-decoration: underline; }
.sp-breadcrumb span:last-child { color: #888; }
.sp-hero-text h1 {
  font-family: 'Sora', sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0F1F18;
  line-height: 1.1;
  margin-bottom: 12px;
}
.sp-hero-sub {
  font-size: 14px;
  color: #777;
  margin-bottom: 28px;
  line-height: 1.6;
}
.sp-stat-row {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E0DDD6;
  border-radius: 14px;
  padding: 14px 22px;
  width: fit-content;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.sp-stat { text-align: center; padding: 0 20px; }
.sp-stat:first-child { padding-left: 0; }
.sp-stat:last-child { padding-right: 0; }
.sp-stat-div { width: 1px; height: 30px; background: #E8E4DC; flex-shrink: 0; }
.sp-stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1C3829;
  letter-spacing: -0.03em;
  line-height: 1;
}
.sp-stat-label {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
  font-weight: 500;
}
.sp-hero-dog {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 360px;
}
.sp-hero-dog img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(-4px 0px 16px rgba(0,0,0,0.12));
}

/* BODY LAYOUT */
.sp-body { padding: 48px 0 64px; background: #F0F2F4; }
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

/* SECTION HEADERS */
.sp-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sp-section-hdr--mt { margin-top: 52px; }
.sp-section-hdr h2 {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F1F18;
}
.sp-count-pill {
  font-size: 12px;
  font-weight: 600;
  color: #2D6A4F;
  background: #E8F5EE;
  padding: 4px 12px;
  border-radius: 20px;
}

/* BREEDER CARDS */
.sp-breeder-list { display: flex; flex-direction: column; gap: 12px; }
.sp-breeder-card {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-breeder-card:hover {
  border-color: #2D6A4F;
  box-shadow: 0 4px 20px rgba(45,106,79,0.08);
}
.sp-breeder-card--apex {
  border-color: #F0D98A;
  background: linear-gradient(135deg, #FFFDF5 0%, #FFFFFF 60%);
}
.sp-breeder-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1C3829 0%, #2D6A4F 100%);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.sp-breeder-card--apex .sp-breeder-avatar {
  background: linear-gradient(135deg, #92680A 0%, #C49A2A 100%);
}
.sp-breeder-body { flex: 1; min-width: 0; }
.sp-breeder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.sp-breeder-name {
  font-size: 16px;
  font-weight: 600;
  color: #0F1F18;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sp-breeder-loc {
  font-size: 13px;
  color: #888;
}
.sp-breeder-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.sp-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.sp-badge--apex { background: #FFF8E7; color: #92680A; border: 1px solid #F0D98A; }
.sp-badge--dpca { background: #E8F5EE; color: #1C6040; border: 1px solid #B8DFC8; }
.sp-breeder-contacts { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-contact-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #E0DDD6;
  color: #444;
  background: #FAFAF8;
  transition: all 0.15s;
  white-space: nowrap;
}
.sp-contact-btn:hover { border-color: #2D6A4F; color: #2D6A4F; background: #F0F7F3; }
.sp-contact-btn--primary {
  background: #1C3829;
  color: #fff;
  border-color: #1C3829;
}
.sp-contact-btn--primary:hover { background: #2D6A4F; border-color: #2D6A4F; color: #fff; }

/* EMPTY STATE */
.sp-empty {
  text-align: center;
  padding: 48px 24px;
  background: #FAFAF8;
  border-radius: 14px;
  border: 1px dashed #D8D4CC;
}
.sp-empty-icon { font-size: 36px; margin-bottom: 12px; }
.sp-empty p { font-size: 14px; color: #888; line-height: 1.6; }
.sp-empty a { color: #2D6A4F; }

/* BSL */
.sp-bsl {
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid;
  margin-bottom: 8px;
}
.sp-bsl--green  { background: #F0FBF5; border-color: #B8DFC8; }
.sp-bsl--yellow { background: #FFFBF0; border-color: #F0D98A; }
.sp-bsl--orange { background: #FFF5F0; border-color: #F0B8A0; }
.sp-bsl-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #333;
  margin-bottom: 10px;
}
.sp-bsl-text { font-size: 14px; color: #444; line-height: 1.7; }
.sp-bsl-examples { margin-top: 14px; }
.sp-bsl-examples-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 8px;
}
.sp-bsl-example {
  font-size: 13px;
  color: #555;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.55;
}
.sp-bsl-example strong { color: #333; }
.sp-bsl-disclaimer { font-size: 11px; color: #BBB; font-style: italic; }

/* FAQ */
.sp-faq { display: flex; flex-direction: column; gap: 8px; }
.sp-faq-item {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 12px;
  overflow: hidden;
}
.sp-faq-item summary {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #0F1F18;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: #2D6A4F;
  flex-shrink: 0;
  line-height: 1;
}
.sp-faq-item[open] summary::after { content: '−'; }
.sp-faq-body {
  padding: 0 22px 18px;
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}
.sp-faq-body p { margin-bottom: 10px; }
.sp-faq-body ul { margin: 6px 0 10px 20px; }
.sp-faq-body li { margin-bottom: 6px; }
.sp-faq-body a { color: #2D6A4F; }

/* SIDEBAR */
.sp-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.sp-sidebar-card {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 14px;
  padding: 20px;
}
.sp-sidebar-card--rescue {
  background: #F0FBF5;
  border-color: #B8DFC8;
}
.sp-sidebar-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #1C3829;
  margin-bottom: 16px;
}

/* Rescue in sidebar */
.sp-rescue-item {
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.sp-rescue-item:first-of-type { border-top: none; padding-top: 0; }
.sp-rescue-name { font-size: 13px; font-weight: 600; color: #0F1F18; margin-bottom: 2px; }
.sp-rescue-area { font-size: 12px; color: #888; margin-bottom: 6px; }
.sp-rescue-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sp-rescue-links a { font-size: 12px; color: #2D6A4F; text-decoration: none; font-weight: 500; }
.sp-rescue-links a:hover { text-decoration: underline; }
.sp-rescue-links span { font-size: 12px; color: #666; }

/* Clubs in sidebar */
.sp-club-item { padding: 12px 0; border-top: 1px solid #F0EDE8; }
.sp-club-item:first-of-type { border-top: none; padding-top: 0; }
.sp-club-name { font-size: 13px; font-weight: 600; color: #0F1F18; margin-bottom: 5px; }
.sp-club-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.sp-club-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #F0F7F3;
  color: #2D6A4F;
  padding: 2px 7px;
  border-radius: 20px;
}
.sp-club-tag--national { background: #E8F5EE; color: #1C6040; }
.sp-club-city { font-size: 11px; color: #AAA; }
.sp-club-links { display: flex; gap: 10px; }
.sp-club-links a { font-size: 12px; color: #2D6A4F; text-decoration: none; font-weight: 500; }
.sp-club-links a:hover { text-decoration: underline; }
.sp-club-divider { height: 1px; background: #E8E4DC; margin: 12px 0; }
.sp-club-none { font-size: 13px; color: #AAA; font-style: italic; }

/* Nearby in sidebar */
.sp-nearby-list { display: flex; flex-direction: column; gap: 4px; }
.sp-nearby-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s;
  gap: 8px;
}
.sp-nearby-item:hover { background: #F5F2EC; }
.sp-nearby-name { font-size: 13px; font-weight: 500; color: #1A1A1A; }
.sp-nearby-count { font-size: 12px; color: #2D6A4F; font-weight: 500; white-space: nowrap; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-sidebar { position: static; }
  .sp-hero-inner { grid-template-columns: 1fr; }
  .sp-hero-dog { display: none; }
  .sp-hero-inner { min-height: auto; }
  .sp-hero-text h1 { font-size: 30px; }
  .sp-stat-row { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .sp-stat-div { display: none; }
  .sp-stat { padding: 0 12px; }
}

/* LEGACY (breadcrumb on old pages) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
}
.breadcrumb a { color: #2D6A4F; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #CCC; }

/* STATE HERO */
.state-hero {
  padding: 40px 0 32px;
  background: #F5F2EC;
  border-bottom: 1px solid #E8E4DC;
}
.state-hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F1F18;
  margin-bottom: 8px;
  line-height: 1.15;
}
.state-hero-sub {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

/* STAT BAR */
.stat-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.stat-badge {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 10px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  min-width: 90px;
}
.stat-badge-num {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1C3829;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-badge-label {
  font-size: 10px;
  color: #888;
  margin-top: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* SECTION ALT */
.section-alt { background: #F5F2EC; }
.section-intro { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.6; }

/* BREEDER CARDS (state page) */
.breeder-list { display: flex; flex-direction: column; gap: 10px; }
.breeder-card-state {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 12px;
  padding: 18px 20px;
  transition: border-color 0.15s;
}
.breeder-card-state:hover { border-color: #2D6A4F; }
.breeder-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}
.breeder-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #0F1F18;
  margin-bottom: 3px;
}
.breeder-card-location {
  font-size: 12px;
  color: #888;
}
.breeder-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-apex {
  background: #FFF8E7;
  color: #92680A;
  border: 1px solid #F0D98A;
}
.badge-dpca {
  background: #E8F5EE;
  color: #1C6040;
  border: 1px solid #B8DFC8;
}
.breeder-card-contacts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.breeder-contact-link {
  font-size: 12px;
  color: #2D6A4F;
  text-decoration: none;
  font-weight: 500;
  padding: 4px 10px;
  background: #F0F7F3;
  border-radius: 6px;
  transition: background 0.15s;
}
.breeder-contact-link:hover { background: #D8EFE5; }

/* EMPTY STATE */
.empty-state {
  font-size: 14px;
  color: #888;
  padding: 32px;
  text-align: center;
  background: #FAFAF8;
  border-radius: 12px;
  border: 1px dashed #E0DDD6;
}

/* CLUB LIST */
.club-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .club-list { grid-template-columns: 1fr; } }
.club-card {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 12px;
  padding: 16px 18px;
}
.club-card-national { border-color: #B8DFC8; background: #F4FBF7; }
.club-card-name { font-size: 13px; font-weight: 600; color: #0F1F18; margin-bottom: 6px; }
.club-card-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.club-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #F0F7F3;
  color: #2D6A4F;
  padding: 2px 8px;
  border-radius: 20px;
}
.club-tag-national { background: #E8F5EE; color: #1C6040; }
.club-city { font-size: 11px; color: #888; }
.club-card-links { display: flex; gap: 12px; }
.club-card-links a {
  font-size: 12px;
  color: #2D6A4F;
  text-decoration: none;
  font-weight: 500;
}
.club-card-links a:hover { text-decoration: underline; }
.club-none { font-size: 13px; color: #888; font-style: italic; }

/* BSL BANNER */
.bsl-banner {
  display: flex;
  gap: 16px;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 12px;
  border: 1px solid;
}
.bsl-green  { background: #F0FBF5; border-color: #B8DFC8; }
.bsl-yellow { background: #FFFBF0; border-color: #F0D98A; }
.bsl-orange { background: #FFF5F0; border-color: #F0B8A0; }
.bsl-banner-icon { font-size: 22px; flex-shrink: 0; line-height: 1.4; }
.bsl-banner-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: #333;
}
.bsl-banner-text { font-size: 13px; color: #444; line-height: 1.65; margin-bottom: 0; }
.bsl-examples { margin-top: 12px; }
.bsl-examples strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
.bsl-examples ul { margin: 6px 0 0 16px; }
.bsl-examples li { font-size: 12px; color: #555; line-height: 1.6; margin-bottom: 4px; }
.bsl-disclaimer { font-size: 11px; color: #AAA; margin-top: 10px; font-style: italic; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 10px;
  overflow: hidden;
}
.faq-question {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #0F1F18;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '+'; font-size: 18px; color: #2D6A4F; font-weight: 300; flex-shrink: 0; }
details[open] .faq-question::after { content: '−'; }
.faq-answer {
  padding: 0 20px 16px;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
.faq-answer p { margin-bottom: 8px; }
.faq-answer ul { margin: 6px 0 8px 18px; }
.faq-answer li { margin-bottom: 4px; }
.faq-answer a { color: #2D6A4F; }

/* RESCUE CALLOUT */
.rescue-callout {
  background: #F0FBF5;
  border: 1px solid #B8DFC8;
  border-radius: 14px;
  padding: 24px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rescue-callout-icon { font-size: 28px; flex-shrink: 0; }
.rescue-callout h3 {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0F1F18;
  margin-bottom: 6px;
}
.rescue-callout > .rescue-callout-body > p {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
}
.rescue-list { display: flex; flex-direction: column; gap: 10px; }
.rescue-item {
  background: #FFFFFF;
  border: 1px solid #D0E8D8;
  border-radius: 8px;
  padding: 12px 14px;
}
.rescue-item strong { font-size: 13px; color: #0F1F18; display: block; margin-bottom: 3px; }
.rescue-area { font-size: 11px; color: #888; display: block; margin-bottom: 6px; }
.rescue-contacts { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.rescue-contacts a { color: #2D6A4F; text-decoration: none; }
.rescue-contacts a:hover { text-decoration: underline; }
.rescue-contacts span { color: #555; }

/* NEARBY STATES */
.nearby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .nearby-grid { grid-template-columns: repeat(2, 1fr); } }
.nearby-card {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, transform 0.15s;
}
.nearby-card:hover { border-color: #2D6A4F; transform: translateY(-2px); }
.nearby-state { font-size: 13px; font-weight: 600; color: #0F1F18; }
.nearby-count { font-size: 11px; color: #888; }

/* TRUST BAR */
.sp-trust-bar {
  background: #1C3829;
  padding: 9px 0;
}
.sp-trust-bar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.sp-trust-bar span {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* INTELLIGENCE PANEL */
.sp-intel-panel {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
}
.sp-intel-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #F0EDE8;
}
.sp-intel-header h2 {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0F1F18;
  letter-spacing: -0.01em;
}
.sp-intel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #F0EDE8;
}
.sp-intel-card {
  padding: 18px 20px;
  border-right: 1px solid #F0EDE8;
}
.sp-intel-card:last-child { border-right: none; }
.sp-intel-icon { font-size: 18px; margin-bottom: 8px; }
.sp-intel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  margin-bottom: 4px;
}
.sp-intel-value {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0F1F18;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.sp-intel-demand--high   { color: #C84B00; }
.sp-intel-demand--moderate { color: #92680A; }
.sp-intel-demand--limited  { color: #666; }
.sp-intel-note { font-size: 11px; color: #AAA; line-height: 1.4; }
.sp-intel-climate {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
}
.sp-intel-climate-icon { font-size: 22px; flex-shrink: 0; }
.sp-intel-climate-title {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.sp-intel-climate p {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* COUNT PILL VARIANTS */
.sp-count-pill--gold {
  background: #FFF8E7;
  color: #92680A;
  border: 1px solid #F0D98A;
}

/* CITY PILLS */
.sp-city-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-city-pill {
  background: #FFFFFF;
  border: 1px solid #E0DDD6;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #1C3829;
  white-space: nowrap;
}
a.sp-city-pill {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
a.sp-city-pill:hover {
  border-color: #2D6A4F;
  background: #F0F7F3;
  color: #2D6A4F;
}

/* BSL CHEATSHEET */
.sp-cheatsheet {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
  border-radius: 16px;
  overflow: hidden;
}
.sp-cheat-qa {
  padding: 22px 24px;
  border-bottom: 1px solid #F0EDE8;
  background: #FAFAF8;
}
.sp-cheat-q {
  font-size: 16px;
  font-weight: 700;
  color: #0F1F18;
  margin-bottom: 10px;
  font-family: 'Sora', sans-serif;
  letter-spacing: -0.01em;
}
.sp-cheat-a {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  line-height: 1.5;
}
.sp-cheat-a--green  { background: #E8F5EE; color: #1C6040; }
.sp-cheat-a--yellow { background: #FFFBF0; color: #92680A; }
.sp-cheat-a--orange { background: #FFF5F0; color: #C84B00; }
.sp-cheat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sp-cheat-block {
  padding: 20px 24px;
  border-right: 1px solid #F0EDE8;
  border-bottom: 1px solid #F0EDE8;
}
.sp-cheat-block:nth-child(2) { border-right: none; }
.sp-cheat-block--full {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
}
.sp-cheat-block-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  margin-bottom: 12px;
}
.sp-cheat-block p {
  font-size: 13px;
  color: #444;
  line-height: 1.7;
  margin: 0;
}
.sp-cheat-list {
  margin: 0 0 0 16px;
  padding: 0;
}
.sp-cheat-list li {
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 6px;
}
.sp-cheat-list--checks { list-style: none; margin-left: 0; }
.sp-cheat-list--checks li::before { content: '✅ '; }
.sp-cheat-always {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-cheat-rule {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #F5F2EC;
  border-radius: 8px;
  padding: 10px 14px;
}
.sp-cheat-rule-name {
  font-size: 12px;
  font-weight: 700;
  color: #1A1A1A;
}
.sp-cheat-rule span:last-child {
  font-size: 12px;
  color: #777;
}

/* BSL REDESIGN (legacy selectors kept for reference) */
.sp-bsl {
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid;
  margin-bottom: 8px;
}
.sp-bsl--green  { background: #F0FBF5; border-color: #B8DFC8; }
.sp-bsl--yellow { background: #FFFBF0; border-color: #F0D98A; }
.sp-bsl--orange { background: #FFF5F0; border-color: #F0B8A0; }
.sp-bsl-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sp-bsl-risk-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.sp-bsl-risk-pill--green  { background: #1C6040; color: #FFFFFF; }
.sp-bsl-risk-pill--yellow { background: #92680A; color: #FFFFFF; }
.sp-bsl-risk-pill--orange { background: #C84B00; color: #FFFFFF; }
.sp-bsl-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.sp-bsl-text { font-size: 14px; color: #444; line-height: 1.7; }
.sp-bsl-examples { margin-top: 14px; }
.sp-bsl-examples-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  margin-bottom: 8px;
}
.sp-bsl-example {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
  color: #555;
  line-height: 1.55;
}
.sp-bsl-city { font-weight: 600; color: #333; font-size: 12px; }
.sp-bsl-disclaimer { font-size: 11px; color: #BBB; font-style: italic; margin-top: 8px; }

/* HOW TO CHOOSE + RED FLAGS */
.sp-guidance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-guidance-card {
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid;
}
.sp-guidance-card--green { background: #F0FBF5; border-color: #B8DFC8; }
.sp-guidance-card--red   { background: #FFF5F5; border-color: #F0C0C0; }
.sp-guidance-title {
  font-size: 13px;
  font-weight: 700;
  color: #0F1F18;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.sp-guidance-card ul { margin: 0 0 0 16px; padding: 0; }
.sp-guidance-card li {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 8px;
}
.sp-guidance-card a { color: #2D6A4F; text-decoration: none; }
.sp-guidance-card a:hover { text-decoration: underline; }

/* CLUB DIVIDER WITH LABEL */
.sp-club-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
}
.sp-club-divider::before,
.sp-club-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E8E4DC;
}
.sp-club-divider span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #BBB;
  white-space: nowrap;
}

/* RESPONSIVE ADDITIONS */
@media (max-width: 760px) {
  .sp-intel-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-guidance-grid { grid-template-columns: 1fr; }
  .sp-city-card { grid-template-columns: 1fr 80px; }
  .sp-city-bar-wrap { display: none; }
  .sp-trust-bar-inner { gap: 12px; }
}

/* ============================================================
   BREED PROFILE PAGE  (bp- prefix)
   ============================================================ */

/* STATE MAP SECTION */
.bp-map-section {
  background: #fff;
  border-top: 1px solid #E8E4DC;
  border-bottom: 1px solid #E8E4DC;
  padding: 52px 0 48px;
}
.bp-map-hdr {
  text-align: center;
  margin-bottom: 36px;
}
.bp-map-hdr h2 {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F1F18;
  margin-bottom: 8px;
}
.bp-map-hdr p {
  font-size: 14px;
  color: #888;
}

/* REAL GEOGRAPHIC MAP CANVAS */
.bp-map-canvas {
  max-width: 820px;
  margin: 0 auto 40px;
  border-radius: 16px;
  overflow: hidden;
  background: #F5F2EC;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* STATE PILLS (SEO + no-JS fallback) */
.bp-state-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}
.bp-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F5F2EC;
  border: 1px solid #E0DDD6;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.bp-state-pill:hover {
  background: #E8F5EE;
  border-color: #B8DFC8;
  color: #1C3829;
}
.bp-state-pill-count {
  background: #1C3829;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 7px;
}

/* ARTICLE */
.bp-article h2 {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F1F18;
  margin-bottom: 14px;
}
.bp-article h3 {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1C3829;
  margin-bottom: 10px;
}
.bp-article p {
  font-size: 14px;
  color: #444;
  line-height: 1.75;
  margin-bottom: 14px;
}

.bp-section {
  margin-bottom: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid #E8E4DC;
}
.bp-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.bp-callout {
  background: #F0FBF5;
  border-left: 3px solid #2D6A4F;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1C3829;
  margin-bottom: 16px !important;
}

/* QUICK FACTS TABLE */
.bp-facts-table {
  background: #fff;
  border: 1px solid #E8E4DC;
  border-radius: 14px;
  overflow: hidden;
}
.bp-fact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  border-bottom: 1px solid #F0EDE8;
  font-size: 13px;
}
.bp-fact-row:last-child { border-bottom: none; }
.bp-fact-label {
  color: #888;
  font-weight: 500;
}
.bp-fact-value {
  color: #0F1F18;
  font-weight: 600;
  text-align: right;
}

/* TWO-COL ENVIRONMENT CARDS */
.bp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.bp-env-card {
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid;
}
.bp-env-card--good {
  background: #F0FBF5;
  border-color: #B8DFC8;
}
.bp-env-card--hard {
  background: #FFF5F5;
  border-color: #F0C0C0;
}
.bp-env-card--neutral {
  background: #F5F2EC;
  border-color: #E0DDD6;
}
.bp-env-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #333;
  margin-bottom: 12px;
}
.bp-env-card ul {
  margin: 0 0 0 16px;
  padding: 0;
}
.bp-env-card li {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* DCM FEATURE CARD */
.bp-health-feature {
  background: #FFF8F0;
  border: 1px solid #F0CCA0;
  border-radius: 14px;
  padding: 22px;
  margin: 20px 0 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.bp-health-feature-badge {
  background: #C84B00;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.bp-health-feature-body h3 {
  margin-top: 2px;
  margin-bottom: 10px;
  color: #7A2F00;
}
.bp-health-feature-body p {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 10px;
}
.bp-health-feature-body p:last-child { margin-bottom: 0; }

/* HEALTH CARDS GRID */
.bp-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.bp-health-card {
  background: #fff;
  border: 1px solid #E8E4DC;
  border-radius: 10px;
  padding: 14px 16px;
}
.bp-health-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #0F1F18;
  margin-bottom: 6px;
}
.bp-health-card-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.55;
}

/* HEALTH TESTING CHECKLIST */
.bp-checklist-box {
  background: #F0FBF5;
  border: 1px solid #B8DFC8;
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 24px;
}
.bp-checklist-title {
  font-size: 13px;
  font-weight: 700;
  color: #1C3829;
  margin-bottom: 12px;
}
.bp-checklist {
  margin: 0 0 14px 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.bp-checklist li {
  font-size: 13px;
  color: #2D6A4F;
  font-weight: 500;
  padding-left: 18px;
  position: relative;
  line-height: 1.6;
}
.bp-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #2D6A4F;
  font-weight: 700;
}
.bp-checklist-note {
  font-size: 12px;
  color: #888;
  margin: 0;
}
.bp-checklist-note a {
  color: #2D6A4F;
  font-weight: 500;
}

/* COST SECTION */
.bp-cost-row {
  margin-bottom: 16px;
}
.bp-cost-card {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E8E4DC;
  border-radius: 12px;
  padding: 16px 24px;
}
.bp-cost-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #AAA;
  margin-bottom: 4px;
}
.bp-cost-value {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1C3829;
  letter-spacing: -0.02em;
}
.bp-cost-note {
  font-size: 11px;
  color: #AAA;
  margin-top: 3px;
}

/* GENERAL LIST */
.bp-list {
  margin: 12px 0 16px 18px;
  padding: 0;
}
.bp-list li {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* VERDICT BOX */
.bp-verdict {
  background: #1C3829;
  border-radius: 16px;
  padding: 32px 36px;
  margin-top: 8px;
}
.bp-verdict h2 {
  color: #7EC8A0;
  margin-bottom: 16px;
}
.bp-verdict p {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.75;
}

/* SIDEBAR: BREED GLANCE */
.bp-glance-list {
  display: flex;
  flex-direction: column;
}
.bp-glance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F0EDE8;
  font-size: 12px;
}
.bp-glance-row:last-child { border-bottom: none; }
.bp-glance-row span:first-child { color: #999; font-weight: 500; }
.bp-glance-row span:last-child { color: #0F1F18; font-weight: 600; }

/* SIDEBAR: CLUB LINKS */
.sp-club-list { display: flex; flex-direction: column; gap: 0; }
.sp-club {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #F0EDE8;
  text-decoration: none;
}
.sp-club:last-child { border-bottom: none; }
.sp-club .sp-club-name { font-size: 13px; font-weight: 700; color: #1C3829; margin-bottom: 2px; }
.sp-club-desc { font-size: 12px; color: #888; line-height: 1.4; }
.sp-club:hover .sp-club-name { color: #2D6A4F; }

/* SIDEBAR: OFA BUTTON */
.bp-ofa-btn {
  display: block;
  background: #1C3829;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.bp-ofa-btn:hover { background: #2D6A4F; }

/* SIDEBAR: STATE LIST */
.bp-sidebar-states {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bp-sidebar-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F5F2EC;
  border: 1px solid #E0DDD6;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  transition: background 0.12s;
}
.bp-sidebar-state:hover {
  background: #E8F5EE;
  border-color: #B8DFC8;
  color: #1C3829;
}
.bp-sidebar-state span {
  font-size: 10px;
  color: #AAA;
  font-weight: 400;
}

/* BP RESPONSIVE */
@media (max-width: 760px) {
  .bp-two-col { grid-template-columns: 1fr; }
  .bp-health-grid { grid-template-columns: 1fr; }
  .bp-checklist { grid-template-columns: 1fr; }
  .bp-health-feature { flex-direction: column; gap: 12px; }
  .bp-verdict { padding: 24px 20px; }
}


/* ============================================================
   BREED PROFILE PAGE — POLISHED OVERRIDES
   Paste AFTER existing bp- CSS
   ============================================================ */

   .bp-article {
    max-width: 760px;
  }
  
  .bp-section {
    margin-bottom: 72px;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .bp-section + .bp-section {
    padding-top: 8px;
  }
  
  .bp-article h2 {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 18px;
  }
  
  .bp-article h3 {
    font-size: 18px;
    margin-top: 28px;
    margin-bottom: 12px;
  }
  
  .bp-article p {
    font-size: 15px;
    line-height: 1.85;
    color: #3F433F;
  }
  
  /* Soft section card */
  .bp-section--card {
    background: #FAF8F3;
    border: 1px solid #E8E4DC;
    border-radius: 22px;
    padding: 36px;
  }
  
  /* Strong intro/data bar */
  .bp-data-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 28px 0 48px;
  }
  
  .bp-data-item {
    background: #fff;
    border: 1px solid #E8E4DC;
    border-radius: 16px;
    padding: 18px 20px;
  }
  
  .bp-data-value {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #1C3829;
    letter-spacing: -0.04em;
  }
  
  .bp-data-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
  }
  
  /* Quick facts — more premium */
  .bp-facts-table {
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15,31,24,0.05);
  }
  
  .bp-fact-row {
    padding: 15px 22px;
    font-size: 14px;
  }
  
  .bp-fact-label {
    color: #777;
  }
  
  .bp-fact-value {
    font-weight: 700;
  }
  
  /* Callouts */
  .bp-callout {
    border-left-width: 4px;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.6;
  }
  
  /* Environment cards */
  .bp-two-col {
    gap: 20px;
    margin: 26px 0;
  }
  
  .bp-env-card {
    padding: 24px 26px;
    border-radius: 18px;
  }
  
  .bp-env-card-title {
    font-size: 12px;
    margin-bottom: 14px;
  }
  
  .bp-env-card li {
    font-size: 14px;
    line-height: 1.65;
  }
  
  /* Health feature — make it the hero insight */
  .bp-health-feature {
    padding: 30px;
    border-radius: 22px;
    gap: 22px;
    box-shadow: 0 12px 34px rgba(122,47,0,0.06);
  }
  
  .bp-health-feature-badge {
    border-radius: 999px;
    padding: 8px 14px;
  }
  
  .bp-health-feature-body h3 {
    font-size: 20px;
  }
  
  .bp-health-feature-body p {
    font-size: 14px;
    line-height: 1.75;
  }
  
  /* Health grid */
  .bp-health-grid {
    gap: 16px;
  }
  
  .bp-health-card {
    padding: 18px 20px;
    border-radius: 16px;
  }
  
  .bp-health-card-name {
    font-size: 13px;
  }
  
  .bp-health-card-desc {
    font-size: 13px;
  }
  
  /* Checklist */
  .bp-checklist-box {
    padding: 26px 28px;
    border-radius: 20px;
  }
  
  .bp-checklist-title {
    font-size: 15px;
  }
  
  .bp-checklist li {
    font-size: 14px;
  }
  
  /* Cost card */
  .bp-cost-card {
    border-radius: 18px;
    padding: 22px 30px;
    box-shadow: 0 10px 28px rgba(15,31,24,0.05);
  }
  
  .bp-cost-value {
    font-size: 34px;
  }
  
  /* Verdict */
  .bp-verdict {
    padding: 42px 44px;
    border-radius: 24px;
  }
  
  .bp-verdict h2 {
    font-size: 28px;
  }
  
  .bp-verdict p {
    font-size: 15px;
  }
  
  /* Map */
  .bp-map-section {
    padding: 72px 0 64px;
  }
  
  .bp-map-grid {
    max-width: 700px;
    gap: 7px;
  }
  
  .bp-map-tile {
    border-radius: 9px;
  }
  
  .bp-map-tile-abbr {
    font-size: 11px;
  }
  
  .bp-map-tile-count {
    font-size: 9px;
  }
  
  /* Sidebar polish */
  .bp-glance-row {
    padding: 10px 0;
    font-size: 13px;
  }
  
  .sp-club {
    padding: 12px 0;
  }
  
  .bp-ofa-btn {
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 13px;
  }
  
  /* Mobile */
  @media (max-width: 800px) {
    .bp-data-bar {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .bp-two-col,
    .bp-health-grid,
    .bp-checklist {
      grid-template-columns: 1fr;
    }
  
    .bp-section--card {
      padding: 26px 22px;
    }
  
    .bp-health-feature {
      flex-direction: column;
    }
  }
  
  @media (max-width: 520px) {
    .bp-data-bar {
      grid-template-columns: 1fr;
    }
  
    .bp-article h2 {
      font-size: 24px;
    }
  
    .bp-verdict {
      padding: 30px 24px;
    }
  }
/* ============================================================
   QUICK FACTS 3-COL VISUAL CARD
   ============================================================ */

.bp-qf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid #E8E4DC;
  border-radius: 16px;
  overflow: hidden;
}
.bp-qf-col {
  padding: 20px 18px;
  border-right: 1px solid #E8E4DC;
  background: #fff;
}
.bp-qf-col:last-child { border-right: none; }
.bp-qf-col-hdr {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #2D6A4F;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F0EDE8;
}
.bp-qf-item {
  margin-bottom: 14px;
}
.bp-qf-item:last-child { margin-bottom: 0; }
.bp-qf-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #AAA;
  margin-bottom: 4px;
}
.bp-qf-value {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
}
.bp-qf-metric {
  font-size: 11px;
  color: #AAA;
  font-weight: 400;
}
.bp-qf-badge {
  display: inline-block;
  background: #E8F5EE;
  color: #1C3829;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

/* Lifespan bar */
.bp-qf-lifespan { }
.bp-qf-lifespan-track {
  height: 5px;
  background: #EEE;
  border-radius: 3px;
  margin-bottom: 5px;
  overflow: hidden;
}
.bp-qf-lifespan-fill {
  height: 100%;
  width: 55%;
  background: linear-gradient(90deg, #2D6A4F, #7EC8A0);
  border-radius: 3px;
}

/* Energy bar */
.bp-energy-bar {
  position: relative;
  height: 22px;
  background: #F0EDE8;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.bp-energy-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #F59E0B, #EF4444);
  border-radius: 6px;
}
.bp-energy-label {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding-left: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  z-index: 1;
}

/* Star rating */
.bp-qf-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.bp-star {
  color: #F59E0B;
  font-size: 14px;
  line-height: 1;
}
.bp-qf-stars-label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-left: 6px;
}

/* Trait row */
.bp-qf-trait {
  font-size: 12px;
  color: #444;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}
.bp-qf-icon { flex-shrink: 0; }

/* Pills */
.bp-qf-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.bp-qf-pill--good { background: #E8F5EE; color: #1C6040; }
.bp-qf-pill--warn { background: #FFF8E8; color: #92680A; }
.bp-qf-pill--bad  { background: #FFF0F0; color: #B91C1C; }

/* Accepted color chips */
.bp-qf-colors {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}
.bp-color-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #555;
  font-weight: 500;
}
.bp-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* Health list */
.bp-qf-health-list {
  margin: 4px 0 0 14px;
  padding: 0;
}
.bp-qf-health-list li {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 2px;
}

/* Quick facts responsive */
@media (max-width: 760px) {
  .bp-qf-grid { grid-template-columns: 1fr; }
  .bp-qf-col { border-right: none; border-bottom: 1px solid #E8E4DC; }
  .bp-qf-col:last-child { border-bottom: none; }
}

/* ============================================================
   FINAL VERDICT — REDESIGN
   ============================================================ */

.bp-verdict {
  background: #1C3829;
  border-radius: 16px;
  padding: 28px 32px;
}
.bp-verdict-hdr {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7EC8A0;
  margin-bottom: 6px;
}
.bp-verdict-lead {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.bp-verdict-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bp-verdict-points li {
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.bp-verdict-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #7EC8A0;
  font-weight: 700;
}

/* ============================================================
   MAP GLOW DOT ANIMATION
   ============================================================ */

.bp-dot-ring {
  animation: bp-dot-pulse 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes bp-dot-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.5); }
}

/* ============================================================
   QUICK FACTS — 2-COL LAYOUT (facts + outline image)
   ============================================================ */

.bp-qf-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  border: 1px solid #E8E4DC;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* FACTS COLUMN */
.bp-qf-facts {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
}

/* 2×2 vital stat cards */
.bp-qf-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.bp-qf-stat {
  background: #F7F4ED;
  border: 1px solid #EBE4D9;
  border-radius: 14px;
  padding: 12px 14px;
}
.bp-qf-stat > span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #8C8A84;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bp-qf-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
  color: #17231C;
  line-height: 1;
}
.bp-qf-stat strong small {
  font-size: 11px;
  font-weight: 400;
  color: #9B9993;
  margin-left: 2px;
}
.bp-qf-stat--word { font-size: 15px !important; }
.bp-qf-stat--sub {
  display: block;
  font-size: 10px;
  color: #AAA;
  margin-top: 3px;
}

/* Section sub-labels */
.bp-qf-section-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2D6A4F;
  margin-bottom: 6px;
}

/* Temperament meter rows */
.bp-qf-features {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.bp-qf-feat-row {
  display: grid;
  grid-template-columns: 82px 1fr 76px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #EEE7DC;
}
.bp-qf-feat-row:last-child { border-bottom: none; }
.bp-qf-feat-row > span {
  font-size: 11px;
  font-weight: 600;
  color: #8C8A84;
  white-space: nowrap;
}
.bp-qf-feat-row > b {
  font-size: 11px;
  font-weight: 700;
  color: #17231C;
  text-align: right;
  white-space: nowrap;
}
.bp-qf-meter {
  height: 8px;
  background: #EEE7DC;
  border-radius: 999px;
  overflow: hidden;
}
.bp-qf-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2D6A4F, #7EC8A0);
}

/* Ownership pill grid */
.bp-qf-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bp-qf-pill {
  border-radius: 12px;
  padding: 10px 12px;
}
.bp-qf-pill > span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C8A84;
}
.bp-qf-pill > b {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}
.bp-qf-pill--good { background: #EDF8F1; border: 1px solid #D8ECDF; }
.bp-qf-pill--good b { color: #256544; }
.bp-qf-pill--bad { background: #FFF0F0; border: 1px solid #FFD6D6; }
.bp-qf-pill--bad b { color: #D43D3D; }
.bp-qf-pill--warn { background: #FFF8DF; border: 1px solid #F4E4A8; }
.bp-qf-pill--warn b { color: #A36B00; }

/* IMAGE COLUMN */
.bp-qf-img-col {
  background: #F5F2EC;
  border-left: 1px solid #E8E4DC;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
.bp-qf-img-col img {
  width: 100%;
  object-fit: contain;
  object-position: center top;
  padding: 20px 16px 12px;
  display: block;
}
.bp-qf-color-overlay {
  padding: 12px 14px;
  background: rgba(245,242,236,0.97);
  border-top: 1px solid #E8E4DC;
  text-align: center;
}
.bp-qf-color-overlay-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #616161;
  margin-bottom: 7px;
  text-align: center;
}
.coat-list { display: grid; gap: 8px; }
.coat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffdf8;
  border: 1px solid #e8e1d6;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #30342f;
}
.coat-swatch {
  width: 46px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.28), inset 0 -8px 14px rgba(0,0,0,.16);
}
.black-rust { background: linear-gradient(135deg, #111 0 62%, #9a4a1f 63% 100%); }
.red-rust   { background: linear-gradient(135deg, #7a2f12 0 62%, #b45b25 63% 100%); }
.blue-rust  { background: linear-gradient(135deg, #4d5963 0 62%, #9b6a3a 63% 100%); }
.fawn-rust  { background: linear-gradient(135deg, #b99a73 0 62%, #8f5a2f 63% 100%); }

/* Responsive */
@media (max-width: 640px) {
  .bp-qf-layout { grid-template-columns: 1fr; }
  .bp-qf-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-qf-pill-grid { grid-template-columns: 1fr 1fr; }
  .bp-qf-feat-row { grid-template-columns: 70px 1fr 64px; }
  .bp-qf-img-col {
    border-left: none;
    border-top: 1px solid #E8E4DC;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 16px;
  }
  .bp-qf-img-col img { flex: 0 0 100px; padding: 0; }
  .bp-qf-color-overlay { border-top: none; padding: 0; background: none; flex: 1; }
}