/* macnopanic-core — affiliate & content components.
   Uses theme tokens when present (var(--mnp-*)) with calm-editorial fallbacks. */

:root {
	--mnp-ink: var(--wp--preset--color--contrast, #1a1a1a);
	--mnp-bg: var(--wp--preset--color--base, #ffffff);
	--mnp-soft: #f4f2ee;
	--mnp-line: #e3e0da;
	--mnp-accent: var(--wp--preset--color--accent, #2f6f7a);
	--mnp-radius: 12px;
}

/* Disclosure ------------------------------------------------------------- */
.mnp-disclosure {
	font-size: .82rem;
	line-height: 1.5;
	color: #5a564f;
	background: var(--mnp-soft);
	border: 1px solid var(--mnp-line);
	border-radius: 8px;
	padding: .55rem .8rem;
	margin: 0 0 1.4rem;
}
.mnp-disclosure span { color: var(--mnp-accent); margin-right: .25rem; }

/* Button ----------------------------------------------------------------- */
.mnp-btn {
	display: inline-block;
	background: var(--mnp-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	padding: .55rem 1rem;
	border-radius: 8px;
	white-space: nowrap;
	transition: filter .15s ease;
}
.mnp-btn:hover { filter: brightness(1.08); }

/* Product box ------------------------------------------------------------ */
.mnp-product {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	border: 1px solid var(--mnp-line);
	border-radius: var(--mnp-radius);
	padding: 1.1rem;
	margin: 1.6rem 0;
	background: var(--mnp-bg);
}
.mnp-product__media { flex: 0 0 130px; text-align: center; }
.mnp-product__media img { max-width: 130px; height: auto; }
.mnp-product__body { flex: 1 1 auto; }
.mnp-product__title { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.25; }
.mnp-product__pros { margin: 0 0 .7rem; padding-left: 1.1rem; font-size: .9rem; color: #444; }
.mnp-product__pros li { margin: .15rem 0; }
.mnp-product__foot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.mnp-product__price { font-size: 1.15rem; font-weight: 700; }
.mnp-product__asof { font-size: .72rem; color: #8a857c; }

@media (max-width: 540px) {
	.mnp-product { flex-direction: column; text-align: center; }
	.mnp-product__foot { justify-content: center; }
}

/* Comparison table ------------------------------------------------------- */
.mnp-table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.mnp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mnp-table th, .mnp-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--mnp-line); text-align: left; vertical-align: middle; }
.mnp-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #777; }
.mnp-table__prod { display: flex; align-items: center; gap: .6rem; }
.mnp-table__prod img { width: 48px; height: 48px; object-fit: contain; }
.mnp-table__name { font-weight: 600; }
.mnp-table__price { font-weight: 700; white-space: nowrap; }
.mnp-table__best { background: color-mix(in srgb, var(--mnp-accent) 8%, transparent); }
.mnp-table__badge {
	display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; color: #fff; background: var(--mnp-accent);
	padding: .1rem .4rem; border-radius: 4px; margin-right: .4rem;
}

/* Related posts ---------------------------------------------------------- */
.mnp-related { margin: 2.4rem 0 1rem; border-top: 1px solid var(--mnp-line); padding-top: 1.2rem; }
.mnp-related__title { font-size: 1.15rem; margin: 0 0 1rem; }
.mnp-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.mnp-related__card { text-decoration: none; color: inherit; display: block; }
.mnp-related__img { width: 100%; height: auto; border-radius: 8px; aspect-ratio: 16/10; object-fit: cover; }
.mnp-related__h { display: block; margin-top: .45rem; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.mnp-related__card:hover .mnp-related__h { color: var(--mnp-accent); }

/* Callout (scaffold from the build prompt) ------------------------------- */
.mnp-callout {
	border-left: 3px solid var(--mnp-accent);
	background: var(--mnp-soft);
	padding: .8rem 1rem;
	border-radius: 0 8px 8px 0;
	margin: 1.4rem 0;
	font-size: .95rem;
}