/* ============================================================================
BGW SHARED PRINT SYSTEM
----------------------------------------------------------------------------
One implementation for every tool, so the brand, masthead and footer are
identical everywhere and a new tool inherits print for free.
The logo: every current asset is LIGHT (lum 207-253) because the brand is
built for the dark nav. On white paper that prints blank. bgw-print-logo.png
is a dark build of the same mark (white background knocked out via
alpha = 255 - luminance).
Markup is injected by bgw-print.js:
.bgw-printonly-hd masthead — logo + tool title + page url
.bgw-printonly-foot footer — logo + copyright
Both are display:none on screen.
========================================================================= */
.bgw-printonly-hd,
.bgw-printonly-foot { display: none; }
@media print {
@page { margin: 14mm 12mm 16mm; }
/* ---------- chrome off ---------- */
header, nav, footer, .contentinfo, .site-header, .site-footer,
.bgw-pseo .toc, .bgw-pseo .breadcrumb, .bgw-pseo .hero,
.bgw-noprint, .bgw-printonly-hd ~ .bgw-noprint,
.bgw-pseo .next-grid, .bgw-pseo .faq-list, .bgw-pseo .section-head .lede,
/* EVERY page section, not a hardcoded list of ids — the size chart's were
#label/#sizeup and the hospital bag's #when, so a fixed list kept missing
them and the prose printed before the tool. */
main section.section, #when, #faq, #next, #faqwrap, #about, #ask,
#label, #sizeup, #how, #rules, #where, #skip, #eitherway, #pack,
.bgw-footer, .bgw-toolbar, .sc-hint, .sc-units { display: none !important; }
html, body {
background: #fff !important;
color: #14201a !important;
font-size: 10pt !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* dark cards become white, ink becomes dark — everywhere */
.bgwh, .bgwh *, .bgw-pseo .table-card, .bgw-pseo .table-card * {
background: #fff !important;
color: #14201a !important;
box-shadow: none !important;
}
.bgwh { padding: 0 !important; margin: 0 !important; display: block !important; }
/* sections that are part of the tool itself must still print */
.bgwh section, .bgwh .section { display: block !important; }
.bgwh > * { display: revert !important; }
/* ---------- masthead ---------- */
.bgw-printonly-hd {
display: block !important;
padding: 0 0 9pt !important;
margin: 0 0 14pt !important;
border-bottom: 2.4pt solid rgb(86,122,102) !important;
}
.bgw-printonly-hd::before {
content: "" !important;
display: block !important;
width: 150pt !important;
height: 40pt !important;
margin: 0 0 8pt !important;
background-image: url("../../uploads/2026/02/babygearwise-logo-print.png") !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: contain !important;
background-color: #fff !important;
}
.bgw-printonly-hd .t {
display: block !important;
font-size: 16pt !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #14201a !important;
}
.bgw-printonly-hd .u {
display: block !important;
font-size: 8.5pt !important;
color: #4a5a52 !important;
margin-top: 2pt !important;
}
/* ---------- footer ---------- */
.bgw-printonly-foot {
display: block !important;
margin-top: 20pt !important;
padding-top: 11pt !important;
border-top: 2.4pt solid rgb(86,122,102) !important;
}
.bgw-printonly-foot::after {
content: "" !important;
display: block !important;
width: 132pt !important;
height: 34pt !important;
background-image: url("../../uploads/2026/02/babygearwise-logo-print.png") !important;
background-repeat: no-repeat !important;
background-position: left top !important;
background-size: contain !important;
background-color: #fff !important;
}
.bgw-printonly-foot .c {
display: block !important;
font-size: 8pt !important;
color: #6b7a72 !important;
margin: 0 0 6pt !important;
}
/* ---------- shared typography ---------- */
.bgwh h2, .bgwh h3 {
break-after: avoid;
color: #14201a !important;
border-color: rgb(86,122,102) !important;
}
.bgwh p, .bgwh li, .bgwh td, .bgwh th, .bgwh span, .bgwh strong { color: #14201a !important; }
.bgwh a { color: #14201a !important; text-decoration: none !important; }
/* generic surfaces */
.bgwh .table-card,
.bgwh .sc-card, .bgwh .dd-card, .bgwh .dd-panel,
.bgwh .reg-card, .bgwh .tool-card {
border: 0.6pt solid #c9d2cc !important;
border-radius: 4pt !important;
padding: 0 !important;
}
.bgwh .table-card th, .bgwh th {
border-bottom: 1pt solid #14201a !important;
text-transform: uppercase !important;
letter-spacing: .10em !important;
font-size: 7.5pt !important;
padding: 5pt 7pt !important;
}
.bgwh .table-card td, .bgwh td {
border-bottom: 0.4pt solid #d8ded9 !important;
padding: 5pt 7pt !important;
font-size: 9.5pt !important;
}
/* the buy buttons disappear — a printed sheet cannot be clicked */
.bgwh .fit-buy, .bgwh .buy, .bgwh .hbc-buy, .bgwh .gq-cta,
.bgwh .buying-note a { display: none !important; }
/* accent fills keep their colour but lose the white text */
.bgwh [class*="badge"], .bgwh .hbc-qty, .bgwh .dd-chip {
border: 0.5pt solid #9aa8a0 !important;
background: #fff !important;
color: #14201a !important;
padding: 0 3pt !important;
border-radius: 2pt !important;
}
/* break control */
.bgwh .hbc-row, .bgwh .reg-item, .bgwh .sc-row, .bgwh tr {
break-inside: avoid;
}
}
/* ══ tool toolbar — the payoff buttons ══════════════════════════════════════ */
.bgw-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 20px; padding: 14px 16px;
background: rgb(43,42,40); border: 1px solid rgba(255,255,255,.10);
border-radius: 10px;
}
.bgw-tbtn {
appearance: none; font: inherit; font-size: .875rem; font-weight: 700;
padding: 10px 17px; border-radius: 6px; cursor: pointer;
background: rgb(86,122,102); color: #fff; border: 1px solid rgb(86,122,102);
transition: background .15s ease, border-color .15s ease;
}
.bgw-tbtn:hover { background: rgb(74,106,89); border-color: rgb(74,106,89); }
.bgw-tbtn:focus-visible { outline: 2px solid rgb(143,179,159); outline-offset: 2px; }
.bgw-tnote {
font-size: .82rem; line-height: 1.45; color: rgba(247,242,234,.70);
flex: 1 1 240px;
}
@media (max-width: 560px) { .bgw-tnote { flex-basis: 100%; } }
/* ══ print: only what the visitor kept ══════════════════════════════════════ */
@media print {
.bgw-toolbar { display: none !important; }
.bgw-print-kept .reg-item.is-skip,
.bgw-print-kept .reg-item.skipped,
.bgw-print-kept .reg-item[data-state="skip"],
.bgw-print-kept .reg-item[aria-pressed="true"] { display: none !important; }
/* the finder form and controls have no value on paper */
.bgw-sc-ready .sc-finder { display: none !important; }
.bgw-sc-ready .sc-units,
.bgw-sc-ready .sc-inputs,
.bgw-sc-ready .sc-hint,
.bgw-sc-ready .sc-verdict { display: none !important; }
/* due-date inputs are pointless on paper; the answer is not */
.bgw-duedate .dd-methods,
.bgw-duedate .dd-fields,
.bgw-duedate .dd-radios { display: none !important; }
.bgw-duedate .dd-answer { border: 0.6pt solid #c9d2cc !important; }
}
/* ══ the masthead/footer logo ═══════════════════════════════════════════════
Declared here with a concrete path as well as via the runtime inline rule,
because content_url() output depends on the site URL and the pseudo-element
silently renders as empty space when it fails. */
@media print {
.bgw-printonly-hd::before,
.bgw-printonly-foot::after {
background-image: url("../../uploads/2026/02/babygearwise-logo-print.png") !important;
background-color: #fff !important;
background-repeat: no-repeat !important;
}
}
/* ══ the print logo is an ![]()
, not a background ═══════════════════════════
A CSS background on a ::before did not paint in print output even though the
file resolves 200. An ![]()
always renders. */
@media print {
.bgw-printonly-hd::before,
.bgw-printonly-foot::after { content: none !important; }
.bgw-printlogo {
display: block !important;
width: 150pt !important;
max-width: 150pt !important;
height: auto !important;
margin: 0 0 8pt !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.bgw-printonly-foot .bgw-printlogo {
width: 132pt !important;
max-width: 132pt !important;
margin: 6pt 0 0 !important;
}
}