/* Public presentation for a connected leaf Buyer Guide only. */
body.ypcm-buyer-guide #primary .site-main > article {
	box-sizing: border-box;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

body.ypcm-buyer-guide #primary .site-main > article .post-thumb,
body.ypcm-buyer-guide #primary .site-main > article .post-thumb-img-content {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

body.ypcm-buyer-guide #primary .site-main > article .post-thumb img,
body.ypcm-buyer-guide #primary .site-main > article .post-thumb-img-content img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	margin-inline: auto;
}

body.ypcm-buyer-guide #primary .site-main > article .entry-header,
body.ypcm-buyer-guide #primary .site-main > article .entry-content {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
	overflow-wrap: anywhere;
}

body.ypcm-buyer-guide #primary .site-main > article figure.ypcm-guide-image {
	width: 100%;
	max-width: 760px;
	margin: 1.75em auto;
}

body.ypcm-buyer-guide #primary .site-main > article figure.ypcm-guide-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

body.ypcm-buyer-guide #primary .site-main > article .entry-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Keep comparison-table labels readable inside the deliberately narrower guide
 * column. The article-level overflow-wrap:anywhere rule is useful for long URLs
 * and prose, but must not force ordinary table words such as “Feature”,
 * “Dexterity” or “Coverage” to split mid-word. The first column also receives a
 * practical minimum width; the existing table overflow remains the mobile
 * fallback instead of crushing labels into two or three letters per line.
 */
body.ypcm-buyer-guide #primary .site-main > article .entry-content table th,
body.ypcm-buyer-guide #primary .site-main > article .entry-content table td {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	vertical-align: top;
}

body.ypcm-buyer-guide #primary .site-main > article .entry-content table th:first-child,
body.ypcm-buyer-guide #primary .site-main > article .entry-content table td:first-child {
	width: 16%;
	min-width: 120px;
}

@media (max-width: 600px) {
	body.ypcm-buyer-guide #primary .site-main > article .post-thumb,
	body.ypcm-buyer-guide #primary .site-main > article .post-thumb-img-content,
	body.ypcm-buyer-guide #primary .site-main > article .post-thumb img,
	body.ypcm-buyer-guide #primary .site-main > article .post-thumb-img-content img {
		max-width: 100%;
	}
}