/* 004 — product blocks that work without a photo, and take one later.

   The spec strip does the job a product image usually does: it gives the
   block density and something to scan. When Amazon API images become
   available, an image block dropped inside the card floats into place at
   desktop width with no further styling. */

/* ---------- Best For summary ---------- */

.er-bestfor {
	margin: 2rem 0;
	border: 1px solid var(--er-line);
	border-left: 4px solid var(--er-accent);
	border-radius: var(--er-radius);
	background: #fff;
	box-shadow: var(--er-shadow);
	overflow-x: auto;
}

.er-bestfor table {
	width: 100%;
	border-collapse: collapse;
	font-size: .97rem;
	border: 0;
}

.er-bestfor td {
	border: 0;
	border-bottom: 1px solid var(--er-line);
	padding: .85rem 1.15rem;
	vertical-align: top;
	text-align: left;
}

.er-bestfor tr:last-child td {
	border-bottom: 0;
}

.er-bestfor td:first-child {
	width: 34%;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--er-accent-dark);
	white-space: nowrap;
	padding-top: 1.05rem;
}

.er-bestfor td:last-child {
	color: var(--er-ink);
	font-weight: 600;
}

.er-bestfor td:last-child a {
	color: var(--er-ink);
	text-decoration-color: var(--er-line);
	text-underline-offset: 3px;
}

.er-bestfor td:last-child a:hover {
	color: var(--er-accent-dark);
}

/* ---------- Product card ---------- */

.er-product {
	position: relative;
	border: 1px solid var(--er-line);
	border-radius: var(--er-radius);
	background: #fff;
	box-shadow: var(--er-shadow);
	padding: 1.6rem 1.75rem 1.75rem;
	margin: 2.5rem 0;
}

.er-product::after {
	content: "";
	display: block;
	clear: both;
}

.er-product__rank {
	font-family: inherit;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--er-line);
	font-variant-numeric: tabular-nums;
	margin: 0 0 .35rem;
}

.er-product .er-badge {
	margin-bottom: .7rem;
}

.er-product h3,
.er-product h2 {
	margin: 0 0 .45rem;
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--er-ink);
	letter-spacing: -.01em;
}

.er-product__summary {
	font-size: 1.02rem;
	color: var(--er-body);
	margin: 0 0 1.25rem;
}

/* Photo slot — empty today, works the moment an image is added. */
@media (min-width: 768px) {
	.er-product .wp-block-image {
		float: right;
		width: 34%;
		margin: .25rem 0 1.25rem 1.75rem;
	}

	.er-product .wp-block-image img {
		border-radius: 8px;
		display: block;
	}
}

/* ---------- Spec strip ---------- */

.er-specstrip {
	margin: 0 0 1.4rem;
	border-top: 1px solid var(--er-line);
	border-bottom: 1px solid var(--er-line);
	padding: .9rem 0;
	gap: 0;
}

.er-specstrip .wp-block-column {
	padding: .15rem 1rem;
	border-left: 1px solid var(--er-line);
}

.er-specstrip .wp-block-column:first-child {
	padding-left: 0;
	border-left: 0;
}

.er-specstrip p {
	margin: 0;
}

.er-specstrip p:first-child {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--er-muted);
	margin-bottom: .2rem;
}

.er-specstrip p:last-child {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--er-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

@media (max-width: 781px) {
	.er-specstrip {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .9rem 0;
	}

	.er-specstrip .wp-block-column {
		flex-basis: auto !important;
		padding-left: 1rem;
	}

	.er-specstrip .wp-block-column:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------- Features ---------- */

.er-features {
	margin: 0 0 1.4rem;
}

.er-features h4 {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--er-muted);
	margin: 0 0 .55rem;
}

.er-features ul {
	margin: 0;
	padding-left: 1.15rem;
}

.er-features li {
	margin-bottom: .4rem;
	line-height: 1.55;
}

.er-features li:last-child {
	margin-bottom: 0;
}

/* Pros/cons inside a card shouldn't repeat the card's own chrome. */
.er-product .er-proscons {
	margin: 0 0 1.4rem;
}

.er-product .er-pros,
.er-product .er-cons {
	box-shadow: none;
	background: var(--er-tint);
}

.er-product .er-cta {
	margin-top: .25rem;
}