/* ============================================================================
   BabyGearWise — pSEO page design system
   ----------------------------------------------------------------------------
   Scoped under .bgw-pseo so it cannot collide with Kadence or plugin classes.
   Every pSEO page shares this ONE stylesheet: the look is structurally
   impossible to drift, because no page carries its own CSS.

   Palette (already in use site-wide):
     ink #2B2A28 · cream #F7F2EA · sand #EFE7E1 · sage rgb(143,179,159)
     rose #A04858 · hairline #E7E3DD
   ========================================================================= */

.bgw-pseo{
  --ink:#2B2A28; --ink-soft:#5A5751; --cream:#F7F2EA; --sand:#EFE7E1;
  --sage:rgb(143,179,159);       /* brand mint — 2.30:1 with white: DARK surfaces + backgrounds only */
  --sage-dark:rgb(143,179,159);  /* the readable green ON DARK (#next, .next-card, .band) */
  --sage-ink:rgb(74,106,89);     /* the readable green ON LIGHT: 6.01:1 on white, 5.6:1 on cream */
  --rose:#A04858; --hair:#E7E3DD;
  --page:#FBF8F4;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  padding-bottom:1px;   /* contain margins */
}
.bgw-pseo *{box-sizing:border-box}
.bgw-pseo img{max-width:100%;height:auto;display:block}
/* NOTE: :not(.next-card) is load-bearing. This rule is (0,1,1) and beats the
   tool cards' own .next-card{color:rgb(247,242,234)} at (0,1,0), so without the
   exclusion the card's cream text is never applied — the description spans
   inside it inherit this green instead and measure 2.39:1 on the dark ink card.
   It passed before only because the inherited value happened to be the light
   mint; the moment it became a real dark green the bug surfaced. */
.bgw-pseo a:not(.next-card){color:var(--sage-ink);text-decoration:none}
.bgw-pseo a:hover{text-decoration:underline}
.bgw-pseo .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.bgw-pseo h1,.bgw-pseo h2,.bgw-pseo h3,.bgw-pseo h4{
  font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--ink);margin:0}
.bgw-pseo h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.01em}
.bgw-pseo h2{font-size:clamp(1.55rem,2.6vw,2.1rem);margin-bottom:.6rem}
.bgw-pseo h3{font-size:1.3rem}
.bgw-pseo .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin:0 0 .7rem}
.bgw-pseo .lede{font-size:1.12rem;color:var(--ink-soft);max-width:62ch;margin:.9rem 0 0}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.bgw-pseo .crumbs{background:var(--cream);border-bottom:1px solid var(--hair);
  font-size:.84rem;color:var(--ink-soft);padding:11px 0}
.bgw-pseo .crumbs .wrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bgw-pseo .crumbs a{color:var(--ink-soft)}
.bgw-pseo .crumbs .sep{opacity:.45}

/* ── hero ───────────────────────────────────────────────────────────── */
.bgw-pseo .hero{padding:52px 0 34px;background:#fff;border-bottom:1px solid var(--hair)}
.bgw-pseo .hero .wrap{max-width:820px}
.bgw-pseo .meta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:.85rem;color:var(--ink-soft);margin-top:1.5rem}
.bgw-pseo .meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--hair)}
.bgw-pseo .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.7rem}
.bgw-pseo .btn{display:inline-block;padding:13px 26px;border-radius:2px;font-weight:600;
  font-size:.94rem;transition:.15s;border:0;cursor:pointer}
.bgw-pseo .btn-primary{background:var(--sage);color:var(--ink) !important}
.bgw-pseo .btn-primary:hover{background:var(--sage-ink);text-decoration:none}
.bgw-pseo .btn-ghost{border:1px solid var(--hair);color:var(--ink);background:#fff}
.bgw-pseo .btn-ghost:hover{border-color:var(--ink);text-decoration:none}

/* ── short-answer box ───────────────────────────────────────────────── */
.bgw-pseo .answer{background:var(--cream);border-left:4px solid var(--sage);
  padding:26px 30px;margin:38px 0;border-radius:0 3px 3px 0}
.bgw-pseo .answer .eyebrow{color:var(--sage-ink);margin-bottom:.5rem}
.bgw-pseo .answer p{margin:0;font-size:1.06rem;color:var(--ink)}
.bgw-pseo .answer p + p{margin-top:.7rem}

/* ── table of contents ──────────────────────────────────────────────── */
.bgw-pseo .toc{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:22px 26px;margin:34px 0 0}
.bgw-pseo .toc .eyebrow{margin-bottom:.6rem}
.bgw-pseo .toc ol{margin:0;padding-left:1.15rem;columns:2;column-gap:36px;font-size:.94rem}
.bgw-pseo .toc li{margin-bottom:7px;break-inside:avoid}
.bgw-pseo .toc a{color:var(--ink-soft)}
.bgw-pseo .toc a:hover{color:var(--sage-ink)}

/* ── sections ───────────────────────────────────────────────────────── */
.bgw-pseo .section{padding:44px 0}
.bgw-pseo .section-head{margin-bottom:22px}

/* ── comparison table ───────────────────────────────────────────────── */
.bgw-pseo .table-card{background:#fff;border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.bgw-pseo table{width:100%;border-collapse:collapse;font-size:.94rem}
.bgw-pseo thead th{background:var(--sand);text-align:left;padding:14px 18px;
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft)}
.bgw-pseo tbody td{padding:15px 18px;border-top:1px solid var(--hair);vertical-align:top}
.bgw-pseo tbody tr:hover{background:var(--cream)}
/* Cream is opaque here — but a translucent tint from an outer card can still let
   a DARK row bleed through a dark table. Pin an opaque fill on the cells so the
   row fill is never the thing carrying the colour. (audit check: CREAM HOVER)
   .fd-wrap / tool sheets override this with higher specificity on dark cards. */
.bgw-pseo .table-card tbody tr:hover{background:transparent !important}
.bgw-pseo .table-card tbody tr:hover td{background:rgb(249,246,241) !important}
.bgw-pseo td .pick{font-weight:700}
.bgw-pseo td .sub{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:2px}
.bgw-pseo .price-band{font-weight:700;letter-spacing:.06em;color:var(--sage-ink);white-space:nowrap}
.bgw-pseo .price-band span{color:#6E6A63}   /* the unfilled part of the band: 5.21:1 on white. #8C8781 measured 3.56:1 and failed when the span held 2 chars ("$$") */
.bgw-pseo .price-tier-line{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.bgw-pseo .price-tier-line b{color:var(--sage-ink);font-weight:700;letter-spacing:.05em}
.bgw-pseo .price-tier-line b span{color:#6E6A63}

/* ── product cards ──────────────────────────────────────────────────── */
.bgw-pseo .card{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:26px;margin-bottom:22px;display:grid;grid-template-columns:240px 1fr;
  gap:28px;align-items:start}
.bgw-pseo .card-img{background:var(--cream);border-radius:3px;padding:14px;
  display:flex;align-items:center;justify-content:center;min-height:200px}
.bgw-pseo .card-img img{mix-blend-mode:multiply}
.bgw-pseo .badge{display:inline-block;background:var(--sand);color:var(--ink);
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;margin-bottom:10px}
.bgw-pseo .badge.top{background:var(--sage);color:var(--ink)}
.bgw-pseo .card h3{margin:0 0 6px;font-size:1.55rem}
.bgw-pseo .card .for{font-size:.92rem;color:var(--ink-soft);margin:0 0 14px}
.bgw-pseo .buy-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:14px 0}
.bgw-pseo .live-price{font-size:.85rem;color:var(--ink-soft);display:inline-block;min-height:1.5em}
.bgw-pseo .live-price b{color:var(--ink);font-size:1.02rem}
.bgw-pseo .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:16px 0 0}
.bgw-pseo .pros-cons h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.bgw-pseo .pros-cons ul{margin:0;padding-left:0;list-style:none;font-size:.92rem}
.bgw-pseo .pros-cons li{padding-left:20px;position:relative;margin-bottom:6px;color:var(--ink-soft)}
.bgw-pseo .pros-cons .yes li::before{content:"+";position:absolute;left:2px;color:var(--sage);font-weight:700}
.bgw-pseo .pros-cons .no li::before{content:"\2013";position:absolute;left:3px;color:var(--rose);font-weight:700}
.bgw-pseo .why{margin:16px 0 0;font-size:.96rem;color:var(--ink-soft)}
.bgw-pseo .why strong{color:var(--ink)}
.bgw-pseo .more{font-weight:600;font-size:.9rem}

/* ── method band ────────────────────────────────────────────────────── */
.bgw-pseo .band{background:var(--ink);color:#E8E3DA;padding:56px 0;margin:44px 0}
.bgw-pseo .band h2{color:#fff}
.bgw-pseo .band .lede{color:#B8B2A8}
/* Dark bands: the light mint is the readable one there. Never let a link or an
   eyebrow inside .band inherit the light-surface green. (audit: INVISIBLE TEXT) */
.bgw-pseo .band a,.bgw-pseo .band .eyebrow{color:var(--sage-dark)}

/* Same specificity trap as .next-card above: the global link rule is (0,1,1) and
   beats a dark row's own inherited colour, so a link inside a registry row
   ("Compare double electric pumps") rendered dark green on the dark ink row —
   measured 2.39:1. Defined after the global rule so the tie resolves here.
   (audit: INVISIBLE TEXT) */
.bgw-pseo .reg-item a,
.bgw-pseo .reg-body a,
.bgw-pseo .hbc-row a{color:var(--sage-dark)}
.bgw-pseo .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:26px;margin-top:30px}
.bgw-pseo .step .num{font-family:var(--serif);font-size:1.8rem;color:var(--sage);line-height:1}
.bgw-pseo .step h4{font-family:var(--sans);color:#fff;font-size:.98rem;margin:10px 0 6px}
.bgw-pseo .step p{margin:0;font-size:.9rem;color:#A8A29A;line-height:1.6}

/* ── FAQ accordion (native <details>, no JS) ────────────────────────── */
.bgw-pseo .faq{border-top:1px solid var(--hair)}
.bgw-pseo .faq details{border-bottom:1px solid var(--hair);background:#fff}
.bgw-pseo .faq details[open]{background:var(--cream)}
.bgw-pseo .faq summary{cursor:pointer;padding:20px 56px 20px 0;position:relative;
  font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink);
  list-style:none;transition:.15s}
.bgw-pseo .faq summary::-webkit-details-marker{display:none}
.bgw-pseo .faq summary:hover{color:var(--sage-ink)}
.bgw-pseo .faq summary::after{content:"";position:absolute;right:22px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);
  transform:rotate(45deg);transition:transform .22s}
.bgw-pseo .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.bgw-pseo .faq .a{padding:0 60px 24px 0;color:var(--ink-soft);font-size:.98rem}
.bgw-pseo .faq .a p{margin:0 0 .8rem}
.bgw-pseo .faq .a p:last-child{margin-bottom:0}

/* ── related ────────────────────────────────────────────────────────── */
.bgw-pseo .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.bgw-pseo .rel-card{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:22px;display:flex;flex-direction:column}
.bgw-pseo .rel-card .eyebrow{margin-bottom:.5rem}
.bgw-pseo .rel-card h4{font-size:1.12rem;margin:0 0 8px}
.bgw-pseo .rel-card p{margin:0 0 14px;font-size:.9rem;color:var(--ink-soft);flex:1}

/* ── the current WP editor content inside a pSEO page ───────────────── */
.bgw-pseo .pseo-body{background:#fff}
.bgw-pseo .pseo-body > *{max-width:1120px;margin-left:auto;margin-right:auto}

@media(max-width:760px){
  .bgw-pseo .card{grid-template-columns:1fr;padding:20px}
  .bgw-pseo .card-img{min-height:170px}
  .bgw-pseo .pros-cons{grid-template-columns:1fr}
  .bgw-pseo .toc ol{columns:1}
}

/* Hero featured image — the template dropped it, so converted pages lost the
   editorial hero shot the old design had. */
.bgw-pseo .hero-img{margin:28px 0 0;border-radius:4px;overflow:hidden;border:1px solid var(--hair);background:var(--cream)}
.bgw-pseo .hero-img img{width:100%;height:auto;display:block}

/* ============================================================================
   FIT CALCULATOR
   Used only by /car-seat-fit-calculator/. Same tokens as everything above —
   no new colours, no new fonts, no new radii. If a value is needed here that
   isn't already in this file, that is a signal the design system is wrong,
   not that this section needs its own palette.
   ========================================================================= */

.bgw-pseo .fit-panel{background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:30px 32px;margin-bottom:26px}
.bgw-pseo .fit-field{margin-bottom:22px}
.bgw-pseo .fit-field:last-child{margin-bottom:0}
.bgw-pseo .fit-field label{display:block;font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.bgw-pseo .fit-input-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bgw-pseo .fit-input{width:132px;padding:12px 14px;font-family:var(--sans);
  font-size:1.35rem;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid #D8D3CA;border-radius:3px;font-variant-numeric:tabular-nums}
.bgw-pseo .fit-input:focus{outline:0;border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(143,179,159,.28)}
.bgw-pseo .fit-unit{font-size:.9rem;color:var(--ink-soft)}
.bgw-pseo .fit-presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.bgw-pseo .fit-presets button{font-family:var(--sans);font-size:.82rem;font-weight:600;
  padding:7px 14px;border:1px solid var(--hair);background:var(--sand);
  border-radius:999px;cursor:pointer;color:var(--ink-soft);transition:.13s}
.bgw-pseo .fit-presets button:hover{background:var(--sage);color:var(--ink);border-color:var(--sage)}
.bgw-pseo .fit-presets button.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.bgw-pseo .fit-hint{font-size:.84rem;color:#8A8580;margin:10px 0 0;max-width:60ch}

.bgw-pseo .fit-scale{margin:26px 0 8px}
.bgw-pseo .fit-scale-label{display:flex;justify-content:space-between;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.bgw-pseo .fit-track{position:relative;height:52px;background:var(--cream);
  border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.bgw-pseo .fit-fill-zone{position:absolute;inset:0;display:flex}
.bgw-pseo .fit-seat{height:100%;border-right:2px solid #fff;position:relative;
  display:flex;align-items:center;justify-content:center;transition:.28s}
.bgw-pseo .fit-seat:last-child{border-right:0}
.bgw-pseo .fit-seat span{font-size:.66rem;font-weight:700;letter-spacing:.05em;
  color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  padding:0 6px;opacity:.9}
.bgw-pseo .fit-seat.ok{background:var(--sage)}
.bgw-pseo .fit-seat.over{background:var(--rose)}
.bgw-pseo .fit-overflow{position:absolute;top:0;bottom:0;right:0;width:0;
  background:repeating-linear-gradient(45deg,rgba(160,72,88,.34),rgba(160,72,88,.34) 6px,
  rgba(160,72,88,.16) 6px,rgba(160,72,88,.16) 12px);
  border-left:2px dashed var(--rose);transition:.28s}
.bgw-pseo .fit-benchline{position:absolute;top:-1px;bottom:-1px;width:2px;
  background:var(--ink);left:100%;transition:.28s}

.bgw-pseo .fit-verdict{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.6rem);
  font-weight:600;line-height:1.3;margin:22px 0 4px}
.bgw-pseo .fit-verdict.good{color:var(--sage-ink)}
.bgw-pseo .fit-verdict.bad{color:var(--rose)}
.bgw-pseo .fit-sub{font-size:.92rem;color:var(--ink-soft);margin:0 0 4px}

.bgw-pseo .chip{display:inline-block;font-family:var(--sans);font-size:.68rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;
  border-radius:2px;background:var(--sand);color:var(--ink);white-space:nowrap}
.bgw-pseo .chip.ok{background:var(--sage);color:var(--ink)}
.bgw-pseo .chip.warn{background:#E3D3A2;color:#5D4E1F}
.bgw-pseo .chip.bad{background:var(--rose);color:#fff}
.bgw-pseo .chip.grey{background:#EDE9E3;color:#9A948C}
.bgw-pseo tbody tr.is-out td{color:#9A948C}
.bgw-pseo td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bgw-pseo .fit-note{font-size:.86rem;color:#8A8580;margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--hair);max-width:78ch}
.bgw-pseo .fit-note ul{margin:10px 0 0;padding-left:20px}
.bgw-pseo .fit-note li{margin-bottom:5px}
.bgw-pseo .fit-refuse{background:var(--cream);border:1px solid var(--hair);
  border-left:4px solid var(--sand);border-radius:0 3px 3px 0;
  padding:16px 20px;margin-top:20px;font-size:.92rem;color:var(--ink-soft)}
.bgw-pseo .fit-refuse strong{color:var(--ink)}

@media(max-width:760px){
  .bgw-pseo .fit-panel{padding:22px 20px}
  .bgw-pseo .fit-track{height:42px}
  .bgw-pseo .fit-seat span{display:none}
}

/* ---- optional prose section (build.py render_notes) -------------------------
   Escape hatch for content the fixed template has no slot for. Uses the same
   --ink-soft already proven readable elsewhere on these pages. */
.bgw-pseo .notes-body{max-width:72ch}
.bgw-pseo .notes-body p{margin:0 0 1rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.72}
.bgw-pseo .notes-body p:last-child{margin-bottom:0}
.bgw-pseo .notes-body strong{color:var(--ink)}
.bgw-pseo .notes-body ul{margin:0 0 1rem;padding-left:1.2rem;color:var(--ink-soft);line-height:1.7}
.bgw-pseo .notes-body li{margin-bottom:.45rem}
.bgw-pseo .notes-body a{color:var(--sage-ink)}

/* ── comparison tables on small screens ─────────────────────────────────────
   A 3-5 column comparison table cannot fit a phone, and horizontal scrolling
   reads as "broken" — a column is simply cut off with no sign it moves.

   So under 860px each ROW becomes a card and each cell prints its column
   heading. The heading text comes from data-label, added at render time by
   mu-plugins/bgw-responsive-tables.php (and by label-exported-tables.py for the
   static export) — CSS cannot read the <thead>.

   The site wraps comparison tables in FOUR different containers, so every rule
   below lists all four descendants explicitly:

       .table-card                  45 tables   pSEO pages
       .comparison-table-wrapper     4 tables   review pages
       .tool-card                    2 tables   tool pages
       .sc-card                      1 table    size chart

   DO NOT collapse these into a shared prefix: selector lists are OR'd, so
   ".wrapperA, .wrapperB thead { }" applies the declaration to the BARE
   .wrapperA. That mistake hid every table on mobile on 2026-10-05.

   !important on overflow is required: the tool pages carry
   `#skip .table-card { overflow: hidden }`, an ID selector (1,1,0) which beats
   any class chain (0,2,0) whatever the file order. Verified 2026-10-05.

   BREAKPOINT IS 1024px, NOT 860px. It was 860 and the user still saw a cut-off
   5-column table on his phone: his hamburger worked (so viewport <= 1024) while
   the table thead was still visible (so viewport > 860) — his phone's layout
   viewport sits in the 861-1024 band. Matching Kadence's own mobile breakpoint
   means the tables switch whenever the mobile header does. */
.bgw-pseo .table-card,
.bgw-pseo .comparison-table-wrapper,
.bgw-pseo .tool-card,
.bgw-pseo .sc-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

@media (max-width: 1024px) {
  .bgw-pseo .table-card,
  .bgw-pseo .comparison-table-wrapper,
  .bgw-pseo .tool-card,
  .bgw-pseo .sc-card { overflow-x: visible !important; max-width: 100%; }

  /* the table and its rows become block boxes */
  .bgw-pseo .table-card table,
  .bgw-pseo .comparison-table-wrapper table,
  .bgw-pseo .tool-card table,
  .bgw-pseo .sc-card table,
  .bgw-pseo .table-card tbody,
  .bgw-pseo .comparison-table-wrapper tbody,
  .bgw-pseo .tool-card tbody,
  .bgw-pseo .sc-card tbody,
  .bgw-pseo .table-card tr,
  .bgw-pseo .comparison-table-wrapper tr,
  .bgw-pseo .tool-card tr,
  .bgw-pseo .sc-card tr,
  .bgw-pseo .table-card th,
  .bgw-pseo .comparison-table-wrapper th,
  .bgw-pseo .tool-card th,
  .bgw-pseo .sc-card th,
  .bgw-pseo .table-card td,
  .bgw-pseo .comparison-table-wrapper td,
  .bgw-pseo .tool-card td,
  .bgw-pseo .sc-card td { display: block; width: 100%; }

  /* column headings move into the cells, so hide the header row */
  .bgw-pseo .table-card thead,
  .bgw-pseo .comparison-table-wrapper thead,
  .bgw-pseo .tool-card thead,
  .bgw-pseo .sc-card thead { display: none; }

  /* each row is a card */
  .bgw-pseo .table-card tbody tr,
  .bgw-pseo .comparison-table-wrapper tbody tr,
  .bgw-pseo .tool-card tbody tr,
  .bgw-pseo .sc-card tbody tr {
    background: #fff;
    border: 1px solid var(--hair, #e6e0d6);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px 0;
  }

  .bgw-pseo .table-card tbody td,
  .bgw-pseo .comparison-table-wrapper tbody td,
  .bgw-pseo .tool-card tbody td,
  .bgw-pseo .sc-card tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  .bgw-pseo .table-card tbody td::before,
  .bgw-pseo .comparison-table-wrapper tbody td::before,
  .bgw-pseo .tool-card tbody td::before,
  .bgw-pseo .sc-card tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    flex: 0 0 46%;
    opacity: .88;
  }
  /* cells that carry no label get no pseudo-element */
  .bgw-pseo .table-card tbody td:not([data-label])::before,
  .bgw-pseo .comparison-table-wrapper tbody td:not([data-label])::before,
  .bgw-pseo .tool-card tbody td:not([data-label])::before,
  .bgw-pseo .sc-card tbody td:not([data-label])::before { content: none; }

  /* the first cell is the row's own name — make it the card heading */
  .bgw-pseo .table-card tbody td:first-child,
  .bgw-pseo .comparison-table-wrapper tbody td:first-child,
  .bgw-pseo .tool-card tbody td:first-child,
  .bgw-pseo .sc-card tbody td:first-child {
    display: block;
    text-align: left;
    font-weight: 700;
    font-size: 1.04em;
    border-bottom: 1px solid var(--hair, #e6e0d6);
    padding: 0 0 10px 0;
    margin: 0 0 4px 0;
  }
  .bgw-pseo .table-card tbody td:first-child::before,
  .bgw-pseo .comparison-table-wrapper tbody td:first-child::before,
  .bgw-pseo .tool-card tbody td:first-child::before,
  .bgw-pseo .sc-card tbody td:first-child::before { content: none; }
}

/* BGW-MOBILE-FIXES v1 */
/* =============================================================================
   BGW MOBILE FIXES  (appended to bgw-pseo.css)
   -----------------------------------------------------------------------------
   Every value comes from a measurement at a real phone viewport, not a guess.
   `python3 pseo/mobile-audit.py` reproduces it: each page loads in a 390px
   iframe in headless Chromium. (A 390px *window* is impossible — Chromium on
   Linux clamps to 500px — hence the iframe.)

   Measured before these fixes, across 51 pages:
     #mobile-toggle            37x31 px on ALL 51 pages
     a.fit-buy                 19-26 px tall   affiliate CTA
     a.buy-now-btn             29 px tall      Amazon CTA on review pages
     a.fd-buy                  38 px tall      CTA in the car-seat finder
     a.fd-more                 22 px tall
     #bgwc-name / #bgwc-email  38 px tall      contact form fields
     tool chip buttons         32-38 px tall
     p.eyebrow                 11.52 px  (.72rem against a 16px root)
     .bgwh-eyebrow / .bgwh-pill-sage / .category-link   10.5-11 px
     .sc-brow .nm              "Cat & Jack (Target)" cut at 112px of 133px
     a broken <img width=1500> pushed the document to 1559px wide

   WHY !important ON EVERYTHING
   This is bgw-pseo.css, enqueued BEFORE bgw-brand.css and the ten per-tool
   stylesheets. Equal specificity means the later file wins, so a plain rule
   here silently loses — which is exactly what happened on the first attempt:
   .bgwh-eyebrow stayed at 11px and .sc-brow .nm stayed truncated.
   !important makes the block load-order-proof. Verified with pseo/cascade-test.html.

   Scoped to (max-width: 1024px), Kadence's mobile breakpoint: the desktop layout
   is unchanged.
   ========================================================================== */

@media (max-width: 1024px) {

  /* 1. The hamburger: measured 37x31 on all 51 pages. The most-tapped control
        on a phone. */
  #mobile-toggle,
  .mobile-toggle-open-container .menu-toggle-open {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
  }

  /* 2. Affiliate CTAs — the buttons that earn money, and the hardest things on
        the page to hit. Four different class names are in use. */
  a.fit-buy, .fit-buy,
  a.fd-buy, .fd-buy,
  a.buy-now-btn, .buy-now-btn,
  a.fd-more, .fd-more,
  a.bgwh-link,
  a.rec-official,
  a.more {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 3. Contact form fields: measured 38px tall, and a text input under 44px is
        awkward to tap and triggers zoom-on-focus on iOS. */
  #bgwc-name,
  #bgwc-email,
  #bgwc-message,
  .bgwc-field input,
  .bgwc-field textarea {
    min-height: 44px !important;
  }

  /* 4. Every control inside a tool: filter chips, unit toggles, reset buttons.
        A blanket minimum beats naming each class across ten stylesheets, and it
        can only make a control easier to hit. */
  .bgw-pseo button,
  .bgw-sizechart button,
  .bgw-registry button,
  .bgw-gender button,
  .bgw-hospital button,
  .bgw-fit button,
  .bgw-carryon button,
  .bgw-bassinet button,
  .bgw-recalls button,
  .bgw-duedate button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* 5. Eyebrow labels: .72rem against a 16px root = 11.52px. Raised to 12.8px,
        still clearly secondary to the 17px body copy. */
  .bgw-pseo .eyebrow {
    font-size: .8rem !important;
  }

  /* 6. The remaining sub-12px text. max() keeps any larger existing size.
        Covers the eyebrow labels, the ranking badges (span.badge.top at 11.2px),
        the "Pros"/"Cons" headings (h4 at 11.84px) and the category link pills
        (10.5px). */
  .bgwh-eyebrow,
  .bgwh-pill-sage,
  .bgwh-side-title,
  .category-link,
  .badge,
  .badge.top,
  .bgw-pseo h4,
  [class^="category-link-"],
  [class*=" category-link-"] {
    font-size: max(12px, .75rem) !important;
  }

  /* 7. Size chart: .sc-brow is `grid-template-columns: 148px 1fr 104px`, leaving
        the name column about 112px at 390px, so "Cat & Jack (Target)" (133px) was
        cut to "Cat & Jack (T...". Wrap instead of losing the brand. */
  .bgw-sizechart .sc-brow .nm {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }
}

/* 8. Broken-image blowout.
      An <img> that fails to load still occupies its width/height ATTRIBUTES.
      The Extend2Fit image (width="1500") sat in a grid child with no min-width:0,
      widening the track and pushing the document to 1559px on a 390px screen.
      global.min.css sets img{max-width:100%} but that cannot help when the thing
      being stretched is the CONTAINER. */
.card-img {
  min-width: 0 !important;
}
.card-img img {
  max-width: 100% !important;
  height: auto !important;
}