/* ============================================================================ 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} /* THE TOOL CARDS ON PHONES ARE DARK (--tool-surface #2b2a28). A sage-ink link (#4A6A59) on that measures 2.39:1 — the links were unreadable. Overriding this from the Customizer did not take, because the rules that set it live here. So it is fixed here, in the phone media query only, so desktop and every light page keep the sage link colour unchanged. */ @media (max-width:760px){ .bgw-pseo tbody td a, .bgw-pseo tbody td a:visited, .pseo-body tbody td a { color:#f7f2ea; text-decoration:underline; text-underline-offset:2px; } .bgw-pseo tbody tr:hover td a, .bgw-pseo tbody tr:hover td a:visited { color:#ffffff; } } .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:transparent} /* 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; } .bgw-pseo .table-card tbody tr:hover td{ background: transparent; } .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
, 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:#6E6A64;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:#6E6A64;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 . 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 .fit-panel, .bgw-pseo .comparison-table-wrapper, .bgw-pseo .tool-card, .bgw-pseo .sc-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1024px) { .bgw-pseo .table-card, .bgw-pseo .fit-panel, .bgw-pseo .comparison-table-wrapper, .bgw-pseo .tool-card, .bgw-pseo .sc-card { max-width: 100%; } /* the table and its rows become block boxes */ .bgw-pseo .table-card table, .bgw-pseo .fit-panel table, .bgw-pseo .comparison-table-wrapper table, .bgw-pseo .tool-card table, .bgw-pseo .sc-card table, .bgw-pseo .table-card tbody, .bgw-pseo .fit-panel tbody, .bgw-pseo .comparison-table-wrapper tbody, .bgw-pseo .tool-card tbody, .bgw-pseo .sc-card tbody, .bgw-pseo .table-card tr, .bgw-pseo .fit-panel tr, .bgw-pseo .comparison-table-wrapper tr, .bgw-pseo .tool-card tr, .bgw-pseo .sc-card tr, .bgw-pseo .table-card th, .bgw-pseo .fit-panel th, .bgw-pseo .comparison-table-wrapper th, .bgw-pseo .tool-card th, .bgw-pseo .sc-card th, .bgw-pseo .table-card td, .bgw-pseo .fit-panel td, .bgw-pseo .comparison-table-wrapper td, .bgw-pseo .tool-card td, .bgw-pseo .sc-card td { display: revert; } /* column headings move into the cells, so hide the header row */ .bgw-pseo .table-card thead, .bgw-pseo .fit-panel thead, .bgw-pseo .comparison-table-wrapper thead, .bgw-pseo .tool-card thead, .bgw-pseo .sc-card thead { display: revert; } /* each row is a card */ .bgw-pseo .table-card tbody tr, .bgw-pseo .fit-panel tbody tr, .bgw-pseo .comparison-table-wrapper tbody tr, .bgw-pseo .tool-card tbody tr, .bgw-pseo .sc-card tbody tr { background: transparent; } .bgw-pseo .table-card tbody td, .bgw-pseo .fit-panel tbody td, .bgw-pseo .comparison-table-wrapper tbody td, .bgw-pseo .tool-card tbody td, .bgw-pseo .sc-card tbody td { display: revert; 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 .fit-panel 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: revert; 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 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 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; } /* ── horizontal breathing room for section content ──────────────────────── .wrap carries padding:0 24px, but the content sections (.section/.section-head) do not use .wrap, so every level from .section-head up to main had padding-left:0. Above ~1168px that is masked by .section's max-width:1120px + margin:auto, which leaves a ~73px gutter. Below it the margin collapses and the text runs flush to the screen edge — visible in the phone screenshot the client sent on 2026-10-11. Scoped below 1160px on purpose: desktop is already correct and must not shift. 24px matches .wrap exactly, so sections line up with the hero and breadcrumb instead of introducing a second rhythm. */ /* Pad the SECTION at every width, not just mobile. Without it the section text sits at 73-1193 (1120 wide) while .wrap — the hero, breadcrumb and every non-tool page — sits at 97-1169 (1072 wide). Both are centred, but at two different widths, so the left edge jumps 24px between a tool page's heading and the section under it, and between tool pages and every other page on the site. This aligns the whole site to one 1072px column. Padding the section (not its children) means headings, ledes, prose,
and fit-notes all inherit the gutter with no per-element rules. */ .bgw-pseo .section{padding-left:24px;padding-right:24px} /* ── THE TOOL TEMPLATE, completed ──────────────────────────────────────────── Every tool page must present one 1072px column: text at 97-1169 on a 1280 viewport, 24px of gutter at 390. Three rules get all eleven there. 1. .section pads itself (above) — the standard tool pages. 2. A .section nested inside a .section must NOT pad again. The hospital-bag page nests them, which pushed its content to 121-1145 while every other page sat at 97-1169. 3. The finder quiz and the /tools/ hub are not built on .section at all — their content is a direct child of .pseo-body (not of main, as I first assumed) with padding:0, so it sat at 73. Giving those direct children the same gutter brings them onto the column. Safe because a block inside a .section is not a direct child, so nothing can be padded twice. Scoped to .bgw-pseo throughout: the homepage has no .bgw-pseo element, so it cannot be reached by any of this. */ .bgw-pseo .section .section{padding-left:0;padding-right:0} .bgw-pseo .pseo-body > p, .bgw-pseo .pseo-body > h2, .bgw-pseo .pseo-body > h3, .bgw-pseo .pseo-body > .fd, .bgw-pseo .pseo-body > .faq, .bgw-pseo .pseo-body > .fd-lede{padding-left:24px;padding-right:24px} /* ── no cell may refuse to wrap at mobile ─────────────────────────────────── Any `white-space: nowrap` inside a table makes that table's minimum width the sum of its unbreakable cells — the fit page's buy cell pinned it to 641px in a 390 viewport, and the per-container overrides above missed it because the table is not inside .table-card / .tool-card / .sc-card. This targets the tables themselves, so it cannot miss one, and it is scoped to .bgw-pseo plus the same 1024px breakpoint everything else uses. Desktop is untouched. */ @media (max-width:1024px){ .bgw-pseo table th, .bgw-pseo table td{white-space:normal} .bgw-pseo table{max-width:100%} } /* ── .fit-panel needs the same scroll escape as the other card containers ──── The fit page's tables are BUILT BY JAVASCRIPT (its HTML contains 15 inline