/* ============================================================================
   Product Recall Check — /tools/baby-product-recalls/
   ----------------------------------------------------------------------------
   Design intent: this is a safety page. It should read as calm, official and
   scannable — not playful. The product photo is the fastest way for a parent to
   recognise an item they own, so it leads each card.

   Colour discipline (the recurring trap on this site):
     mint rgb(143,179,159) is a LIGHT fill -> it always takes DARK text
     the dark panel rgb(43,42,40) takes cream text
     cards are WHITE so product photos sit on a neutral field
   One rule per background context. No blanket ".section *" colour rules.
   ========================================================================= */

/* ── the search panel: DARK ───────────────────────────────────────────────── */
.bgw-pseo .rec-panel {
	background: rgb(43, 42, 40);
	border-radius: 16px;
	padding: 1.6rem 1.5rem 1.3rem;
	color: rgb(247, 242, 234);
	box-shadow: 0 1px 2px rgba(43, 42, 40, .18), 0 8px 28px rgba(43, 42, 40, .12);
}
.bgw-pseo .rec-panel * { color: rgb(247, 242, 234); }

.bgw-pseo .rec-label {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(247, 242, 234, .74) !important;
	margin-bottom: .55rem;
	display: block;
}

.bgw-pseo .rec-input-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.bgw-pseo .rec-input {
	flex: 1 1 280px;
	min-width: 0;
	background: rgb(58, 56, 53);
	border: 1px solid rgba(247, 242, 234, .20);
	border-radius: 10px;
	padding: .78rem 1rem;
	font-size: 1rem;
	color: rgb(247, 242, 234) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bgw-pseo .rec-input::placeholder { color: rgba(247, 242, 234, .44) !important; }
.bgw-pseo .rec-input:focus {
	outline: none;
	border-color: rgb(143, 179, 159);
	box-shadow: 0 0 0 3px rgba(143, 179, 159, .28);
}

.bgw-pseo .rec-btn {
	background: rgb(86, 122, 102);
	color: #fff !important;
	border: 0;
	border-radius: 10px;
	padding: .78rem 1.35rem;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.bgw-pseo .rec-btn:hover { background: rgb(74, 106, 89); }
.bgw-pseo .rec-btn.ghost {
	background: transparent;
	border: 1px solid rgba(247, 242, 234, .28);
	color: rgba(247, 242, 234, .94) !important;
	font-weight: 500;
}
.bgw-pseo .rec-btn.ghost:hover {
	border-color: rgb(143, 179, 159);
	background: rgba(143, 179, 159, .10);
}

/* ── category chips: on the DARK panel ──────────────────────────────────────
   The theme paints buttons with the mint fill, so an unselected chip came out
   mint too: every chip looked selected, and the light count text inside sat on
   mint at 2.07:1. Backgrounds are therefore stated explicitly.
   unselected = dark tint + light text   |   selected = mint fill + DARK text
   ------------------------------------------------------------------------- */
.bgw-pseo .rec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-top: 1.1rem;
}
.bgw-pseo .rec-panel .rec-chip {
	background: rgba(247, 242, 234, .12) !important;
	border: 1px solid rgba(247, 242, 234, .20) !important;
	border-radius: 999px;
	padding: .38rem .85rem;
	font-size: .82rem;
	line-height: 1.5;
	color: rgba(247, 242, 234, .94) !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.bgw-pseo .rec-panel .rec-chip span,
.bgw-pseo .rec-panel .rec-chip strong { color: inherit !important; }

.bgw-pseo .rec-panel .rec-chip:hover {
	border-color: rgb(143, 179, 159) !important;
	background: rgba(143, 179, 159, .16) !important;
}
.bgw-pseo .rec-panel .rec-chip.on {
	background: rgb(143, 179, 159) !important;
	border-color: rgb(143, 179, 159) !important;
	color: rgb(43, 42, 40) !important;
	font-weight: 600;
}
.bgw-pseo .rec-panel .rec-chip.on span,
.bgw-pseo .rec-panel .rec-chip.on strong { color: rgb(43, 42, 40) !important; }

.bgw-pseo .rec-count {
	margin: .95rem 0 0;
	font-size: .9rem;
	color: rgba(247, 242, 234, .80) !important;
}
.bgw-pseo .rec-count strong { color: rgb(247, 242, 234) !important; font-weight: 700; }
.bgw-pseo .rec-live-status {
	margin: .4rem 0 0;
	font-size: .86rem;
	line-height: 1.55;
	color: rgba(247, 242, 234, .80) !important;
}
.bgw-pseo .rec-live-status a { color: rgb(143, 179, 159) !important; text-decoration: underline; }

/* ── results ────────────────────────────────────────────────────────────────
   Each notice is a WHITE card so the product photo reads cleanly. Layout is
   photo | content, collapsing to stacked on narrow screens.
   ------------------------------------------------------------------------- */
.bgw-pseo .rec-list {
	display: grid;
	gap: .9rem;
	margin-top: 1.5rem;
}

.bgw-pseo .rec-card {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 1.1rem;
	align-items: start;
	background: #fff;
	border: 1px solid rgba(43, 42, 40, .10);
	border-radius: 14px;
	padding: 1.1rem 1.2rem;
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.bgw-pseo .rec-card:hover {
	border-color: rgba(43, 42, 40, .22);
	box-shadow: 0 2px 4px rgba(43, 42, 40, .06), 0 10px 26px rgba(43, 42, 40, .10);
	transform: translateY(-1px);
}
.bgw-pseo .rec-card * { color: rgb(43, 42, 40); }

/* the product photo — the point of the card */
.bgw-pseo .rec-thumb {
	width: 116px;
	height: 116px;
	border-radius: 10px;
	background: rgb(247, 245, 242);
	border: 1px solid rgba(43, 42, 40, .08);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bgw-pseo .rec-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;   /* show the whole product, never crop it */
	display: block;
}
/* if CPSC has no image, or it fails, the card must not look broken */
.bgw-pseo .rec-thumb.is-empty::after {
	content: "";
	width: 34px; height: 34px;
	border-radius: 6px;
	border: 2px dashed rgba(43, 42, 40, .22);
}

.bgw-pseo .rec-body { min-width: 0; }

.bgw-pseo .rec-top {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: .45rem;
}
.bgw-pseo .rec-cat {
	font-size: .68rem;
	letter-spacing: .10em;
	text-transform: uppercase;
	font-weight: 700;
	background: rgb(43, 42, 40);
	color: rgb(247, 242, 234) !important;
	border-radius: 5px;
	padding: .2rem .55rem;
}
.bgw-pseo .rec-date {
	font-size: .82rem;
	color: rgb(90, 86, 82) !important;
	font-variant-numeric: tabular-nums;
}

.bgw-pseo .rec-name {
	font-size: 1.13rem;
	font-weight: 700;
	line-height: 1.38;
	margin: 0 0 .4rem;
	letter-spacing: -.005em;
}
/* the product line under the headline: quieter than the title */
.bgw-pseo .rec-prod {
	margin: 0 0 .5rem;
	font-size: .92rem;
	font-weight: 600;
	color: rgb(74, 68, 62) !important;
}
.bgw-pseo .rec-haz {
	margin: 0 0 .7rem;
	font-size: .93rem;
	line-height: 1.6;
	color: rgb(58, 54, 50) !important;
}

.bgw-pseo .rec-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .3rem .85rem;
	font-size: .86rem;
	line-height: 1.55;
	margin: 0 0 .8rem;
	padding-top: .7rem;
	border-top: 1px solid rgba(43, 42, 40, .08);
}
.bgw-pseo .rec-meta dt {
	font-weight: 600;
	color: rgb(74, 68, 62) !important;
	white-space: nowrap;
}
.bgw-pseo .rec-meta dd { margin: 0; color: rgb(58, 54, 50) !important; }

.bgw-pseo .rec-actions {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
	align-items: center;
}
.bgw-pseo .rec-official {
	display: inline-block;
	background: rgb(43, 42, 40);
	color: rgb(247, 242, 234) !important;
	border-radius: 8px;
	padding: .5rem 1rem;
	font-size: .87rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
}
.bgw-pseo .rec-official:hover { background: rgb(74, 106, 89); }
.bgw-pseo .rec-num {
	font-size: .81rem;
	color: rgb(90, 86, 82) !important;
	font-variant-numeric: tabular-nums;
}

/* a notice mentioning death or serious injury gets a quiet rose edge — a
   reading aid, not a verdict */
.bgw-pseo .rec-card.urgent { border-left: 3px solid rgb(217, 143, 154); }

.bgw-pseo .rec-none {
	background: #fff;
	border: 1px dashed rgba(43, 42, 40, .26);
	border-radius: 14px;
	padding: 1.8rem 1.5rem;
	text-align: center;
}
.bgw-pseo .rec-none p { margin: 0 0 .6rem; font-size: .94rem; line-height: 1.6; }
.bgw-pseo .rec-none p:last-child { margin-bottom: 0; }
.bgw-pseo .rec-none a { color: rgb(74, 106, 89); text-decoration: underline; }

/* ── the "still check CPSC" note — light callout on the cream page ───────── */
.bgw-pseo .rec-verify {
	background: rgba(143, 179, 159, .14);
	border: 1px solid rgba(143, 179, 159, .50);
	border-radius: 12px;
	padding: 1.05rem 1.15rem;
	margin-top: 1.3rem;
}
.bgw-pseo .rec-verify * { color: rgb(43, 42, 40); }
.bgw-pseo .rec-verify p { margin: 0 0 .55rem; font-size: .94rem; line-height: 1.65; }
.bgw-pseo .rec-verify p:last-child { margin-bottom: 0; }
.bgw-pseo .rec-verify a { color: rgb(74, 106, 89); font-weight: 600; }

/* ── YMYL scope note: DARK, and must stay readable ───────────────────────── */
.bgw-pseo .rec-ymyl {
	background: rgb(43, 42, 40);
	border-radius: 12px;
	padding: 1.15rem 1.25rem;
	margin: 1.5rem 0;
}
.bgw-pseo .rec-ymyl,
.bgw-pseo .rec-ymyl * { color: rgb(247, 242, 234); }
.bgw-pseo .rec-ymyl p { margin: 0; font-size: .93rem; line-height: 1.7; }
.bgw-pseo .rec-ymyl strong { font-weight: 700; }

/* ── hover override for the prose tables ───────────────────────────────────
   The shared sheet paints "tbody tr:hover" cream at default specificity, and
   these tables sit inside .table-card, which is dark. `!important` is required
   because the shared rule is what it is.
   ------------------------------------------------------------------------- */
.bgw-pseo .table-card tbody tr:hover { background: transparent !important; }
.bgw-pseo .table-card tbody tr:hover td { background: rgb(56, 54, 51) !important; }
.bgw-pseo .table-card tbody tr:hover th { background: transparent !important; }

/* ── the static list (no-JS / crawler view) ──────────────────────────────── */
.bgw-pseo .rec-static { margin-top: 1.5rem; }
.bgw-pseo .rec-static h3 { font-size: 1rem; margin: 0 0 .8rem; }
.bgw-pseo .rec-nowjs { display: none; }
.bgw-pseo.no-js .rec-nowjs { display: block; }
.bgw-pseo.no-js .rec-live { display: none; }

/* ── narrow screens: stack the photo above the text ──────────────────────── */
@media (max-width: 640px) {
	.bgw-pseo .rec-card {
		grid-template-columns: 1fr;
		gap: .8rem;
	}
	.bgw-pseo .rec-thumb { width: 96px; height: 96px; }
	.bgw-pseo .rec-meta { grid-template-columns: 1fr; gap: .1rem 0; }
	.bgw-pseo .rec-meta dt { margin-top: .35rem; }
}

/* ── print: keep the photos, drop the chrome ─────────────────────────────── */
@media print {
	.bgw-pseo .rec-panel { background: #fff !important; box-shadow: none; border: 1px solid #999; }
	.bgw-pseo .rec-panel * { color: #000 !important; }
	.bgw-pseo .rec-chips,
	.bgw-pseo .rec-btn { display: none !important; }
	.bgw-pseo .rec-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #999; }
	.bgw-pseo .rec-thumb { border: 1px solid #ccc; }
}

/* the tail panel when a result set is longer than one page */
.bgw-pseo .rec-more {
	border-style: solid;
	border-color: rgba(43, 42, 40, .14);
	background: rgba(143, 179, 159, .10);
}
.bgw-pseo .rec-more strong { font-weight: 700; }

/* ── the date-window control ────────────────────────────────────────────────
   Sits above the category chips on the dark panel. Interacts with the filters,
   so it must commit to a single set of colours rather than inherit the theme's
   button fill (which is mint, and made unselected chips look selected).

   Selection is CREAM here, not mint, so the date range is visually distinct from
   the mint category chips below it. Cream rgb(247,242,234) with dark text is
   about 12:1.
   ------------------------------------------------------------------------- */
.bgw-pseo .rec-range {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin-top: 1.15rem;
	padding-top: 1.05rem;
	border-top: 1px solid rgba(247, 242, 234, .14);
}
.bgw-pseo .rec-range-label {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(247, 242, 234, .74) !important;
	margin-right: .25rem;
}
.bgw-pseo .rec-panel .rec-range-chip { font-weight: 600; }
.bgw-pseo .rec-panel .rec-range-chip.on {
	background: rgb(247, 242, 234) !important;
	border-color: rgb(247, 242, 234) !important;
	color: rgb(43, 42, 40) !important;
}
/* the chips row follows the rule above it, so it needs no top margin of its own */
.bgw-pseo .rec-range + .rec-chips { margin-top: .9rem; }