.rp-pack-upsell {
	--rp-pack-accent: #334155;
	--rp-pack-hover: #1e293b;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem 1rem;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1rem 0 1.5rem;
	padding: 1.125rem;
	border: 1px solid var(--border-soft, #e2e8f0);
	border-left: 4px solid var(--rp-pack-accent);
	border-radius: var(--radius-md, 8px);
	background: var(--bg-light, #f8fafc);
	color: var(--text-main, #1e293b);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
	overflow-wrap: anywhere;
}

.rp-pack-upsell--auto {
	--rp-pack-accent: #2563eb;
	--rp-pack-hover: #1d4ed8;
}

.rp-pack-upsell--solar {
	--rp-pack-accent: #0f766e;
	--rp-pack-hover: #115e59;
}

.rp-pack-upsell .rp-pack-upsell__badge {
	grid-column: 1 / -1;
	justify-self: start;
	max-width: 100%;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-sm, 4px);
	background: var(--rp-pack-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.rp-pack-upsell--verified .rp-pack-upsell__badge {
	background: #dc2626;
}

.rp-pack-upsell .rp-pack-upsell__content {
	min-width: 0;
}

.rp-pack-upsell .rp-pack-upsell__content h3 {
	margin: 0 0 0.5rem;
	padding: 0;
	border: 0;
	color: var(--brand-primary, #0f172a);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.rp-pack-upsell .rp-pack-upsell__content p {
	margin: 0.25rem 0 0;
	line-height: 1.5;
}

.rp-pack-upsell .rp-pack-upsell__price {
	font-size: 1.0625rem;
}

.rp-pack-upsell .rp-pack-upsell__unit-price,
.rp-pack-upsell .rp-pack-upsell__savings {
	font-size: 0.9375rem;
	color: #475569;
}

.rp-pack-upsell a.rp-pack-upsell__cta {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--rp-pack-accent);
	border-radius: var(--radius-sm, 4px);
	background: var(--rp-pack-accent);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.rp-pack-upsell a.rp-pack-upsell__cta:hover {
	border-color: var(--rp-pack-hover);
	background: var(--rp-pack-hover);
	color: #fff;
}

.rp-pack-upsell a.rp-pack-upsell__cta:focus-visible,
.rp-pack-upsell-reverse a.rp-pack-upsell__cta:focus-visible {
	outline: 3px solid #0f172a;
	outline-offset: 3px;
}

.rp-pack-upsell-reverse {
	margin: 0.75rem 0 1rem;
	color: #475569;
	font-size: 0.9375rem;
}

.rp-pack-upsell-reverse a.rp-pack-upsell__cta {
	display: inline-block;
	padding: 0.5rem 0;
	color: #334155;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 1100px) {
	.rp-pack-upsell {
		grid-template-columns: minmax(0, 1fr);
	}

	.rp-pack-upsell a.rp-pack-upsell__cta {
		width: 100%;
	}
}