/**
 * Lay-outverschillen van de homepage-kaartjes t.o.v. shared.css: eigen
 * kaartcontainer, badge, afbeelding/kenmerken, en de gecentreerde variant
 * van de gedeelde stepper/pillen (shared.css zelf centreert niet, dat is
 * specifiek voor deze kaartjeslay-out). Laadt na shared.css.
 */
.eset-ph-cards { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.eset-ph-card {
	flex: 1 1 260px; max-width: 340px; position: relative;
	border: 1px solid #e2e2e2; border-radius: 10px; padding: 28px 20px 20px; text-align: center;
	background: #fff; box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 );
}
.eset-ph-card-highlight { border: 2px solid var( --eset-accent ); box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 ); }
.eset-ph-badge {
	position: absolute; top: -14px; left: 50%; transform: translateX( -50% );
	background: var( --eset-accent ); color: #fff; font-size: 12px; font-weight: 700;
	letter-spacing: 0.03em; padding: 6px 16px; border-radius: 20px; white-space: nowrap;
}
.eset-ph-card-image img { max-width: 170px; width: 100%; height: auto; margin: 6px auto 16px; }
.eset-ph-card-title a { text-decoration: none; color: inherit; font-size: 19px; font-weight: 700; }
.eset-ph-card-desc { font-size: 13px; color: #666; margin: 6px 0 16px; line-height: 1.4; }

.eset-ph-card .eset-ph-field-label { margin-bottom: 6px; }
.eset-ph-card .eset-ph-stepper { justify-content: center !important; margin-bottom: 16px; }
.eset-ph-card .eset-ph-pill-group { justify-content: center !important; margin-bottom: 16px; }
.eset-ph-card .eset-ph-price-row { margin: 10px 0 16px; font-size: 24px; font-weight: 800; }

.eset-ph-card .eset-ph-buy-btn {
	display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
	background: var( --eset-accent ) !important; color: #fff !important; border: none !important;
	padding: 12px 24px !important; border-radius: 6px !important; font-weight: 700 !important; cursor: pointer !important;
	width: 100% !important; text-transform: none !important; box-shadow: none !important; margin: 0 !important; line-height: normal !important;
}

.eset-ph-cart-icon { flex-shrink: 0; }
.eset-ph-more-info { display: block; margin-top: 10px; font-size: 13px; color: var( --eset-accent ); }
.eset-ph-features { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #eee; text-align: left; }
.eset-ph-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #444; margin-bottom: 10px; }
.eset-ph-features li svg { flex-shrink: 0; margin-top: 2px; color: var( --eset-accent ); }