/* ============================================================
   Cyclone Industries — Product Page Component Library
   ------------------------------------------------------------
   This file replaces the near-identical inline <style> blocks
   that were previously copy-pasted into every product page
   (product-aodd-pumps.html, product-gear-pumps.html,
   product-progressive-cavity-pumps.html, product-rotary-lobe-pumps.html,
   product-rotary-screw-pumps.html).

   Load this ONE file on every product template instead of
   repeating the block per page. Page-specific extras (materials
   grid, certification badges, etc.) live in their own small
   partials — see /css/pages/.
   ============================================================ */

/* Feature cards (2-col grid of icon + heading + copy) */
.cy-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 28px 0 36px;
}
@media (max-width: 680px) {
	.cy-features { grid-template-columns: 1fr; }
}
.cy-feat {
	background: #f7f9fc;
	border: 1px solid #e8edf3;
	border-radius: 10px;
	padding: 24px 22px;
}
.cy-feat__icon {
	width: 42px;
	height: 42px;
	background: var(--cy-accent, #cc1b1b);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.cy-feat__icon i { color: #fff; font-size: 18px; }
.cy-feat h4 { font-size: .95rem; font-weight: 700; color: #0d1b2e; margin: 0 0 8px; }
.cy-feat p { font-size: .875rem; color: #5a6a7e; margin: 0; line-height: 1.6; }

/* Spec cards (2 or 3-col highlight grid) */
.cy-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 28px 0 36px;
}
.cy-specs--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 680px) {
	.cy-specs { grid-template-columns: 1fr; }
	.cy-specs--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.cy-specs { grid-template-columns: 1fr; }
}
.cy-spec-card {
	border-radius: 10px;
	padding: 28px 24px;
	text-align: center;
}
.cy-spec-card--blue { background: #0d1b2e; color: #fff; }
.cy-spec-card--red { background: var(--cy-accent, #cc1b1b); color: #fff; }
.cy-spec-card--teal { background: #1a5276; color: #fff; }
.cy-spec-card__value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.cy-spec-card__label {
	font-size: .82rem;
	opacity: .85;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Partner / distributor badge strip */
.cy-partner-badge {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #f0f4f8;
	border-left: 4px solid var(--cy-accent, #cc1b1b);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin-bottom: 28px;
}
.cy-partner-badge i { font-size: 1.5rem; color: var(--cy-accent, #cc1b1b); flex-shrink: 0; }
.cy-partner-badge p { margin: 0; font-size: .88rem; color: #3a4a5c; line-height: 1.5; }
.cy-partner-badge strong { color: #0d1b2e; }

/* "How it works" numbered steps (used on AODD page, reusable anywhere) */
.cy-steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	margin: 28px 0 36px;
}
@media (max-width: 760px) {
	.cy-steps { grid-template-columns: 1fr; }
}
.cy-step {
	background: #f7f9fc;
	border: 1px solid #e8edf3;
	border-radius: 10px;
	padding: 22px;
}
.cy-step__num {
	width: 36px;
	height: 36px;
	background: var(--cy-accent, #cc1b1b);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: .9rem;
	margin-bottom: 14px;
}
.cy-step h4 { font-size: .92rem; font-weight: 700; color: #0d1b2e; margin: 0 0 8px; }
.cy-step p { font-size: .85rem; color: #5a6a7e; margin: 0; line-height: 1.6; }