/**
 * PTW Bundle Pages — Stylesheet
 * Portal to Wellness — Protocol Stack Bundle Landing Pages
 * Matches the PTW brand system: deep navy / biotech blue / premium charcoal
 *
 * DO NOT move this token block back to :root.
 * The Customizer's Additional CSS is served as a file whose <link> is printed at
 * wp_head priority 100 - i.e. AFTER every enqueued stylesheet (see Code Snippet 268,
 * "PTW Performance - Customizer CSS as a cacheable file"). It declares its own
 * :root palette, including --ptw-text-primary: #2D3748. At equal specificity the
 * later :root wins, so declaring these on :root here loses every time: the panel
 * text rendered at 1.32-1.51:1 contrast (invisible) on all five kit pages until
 * 14 Sep 2026. Scoping to .ptw-bundle-page is the only way this plugin can own its
 * own palette on this site. Same fix, same reason, as PTW Stack Pairings v1.0.3.
 */

.ptw-bundle-page {
	--ptw-navy:          #0b1628;
	--ptw-navy-mid:      #122040;
	--ptw-navy-light:    #1a2d4d;
	--ptw-blue:          #1e6bff;
	--ptw-blue-light:    #3d84ff;
	--ptw-blue-glow:     rgba(30, 107, 255, 0.15);
	--ptw-charcoal:      #1c2433;
	--ptw-slate:         #2e3a4e;
	--ptw-border:        rgba(255, 255, 255, 0.09);
	--ptw-text-primary:  #f0f4ff;
	--ptw-text-secondary:#8fa5c4;
	--ptw-text-muted:    #5a6e87;
	--ptw-green:         #00d68f;
	--ptw-gold:          #f59e0b;
	--ptw-radius:        14px;
	--ptw-radius-sm:     7px;
	--ptw-transition:    220ms ease;
}

/* ── Wrapper ── */
.ptw-bundle-page {
	background: var(--ptw-navy);
	color: var(--ptw-text-primary);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
	line-height: 1.6;
}

/* ── Hero ── */
.ptw-bp-hero {
	padding: 72px 40px 60px;
	background: linear-gradient(160deg, #0d1f3c 0%, #0b1628 60%);
	border-bottom: 1px solid var(--ptw-border);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.ptw-bp-hero::before {
	content: '';
	position: absolute;
	top: -60px; left: 50%; transform: translateX(-50%);
	width: 700px; height: 300px;
	background: radial-gradient(ellipse, rgba(30, 107, 255, 0.12) 0%, transparent 70%);
	pointer-events: none;
}
.ptw-bp-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ptw-blue-light);
	background: var(--ptw-blue-glow);
	border: 1px solid rgba(30, 107, 255, 0.3);
	padding: 4px 14px;
	border-radius: 40px;
	margin-bottom: 20px;
}
.ptw-bp-hero-headline {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--ptw-text-primary);
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}
.ptw-bp-hero-subhead {
	font-size: 18px;
	color: var(--ptw-text-secondary);
	max-width: 620px;
	margin: 0 auto 36px;
	line-height: 1.7;
}
.ptw-bp-hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.ptw-bp-btn {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 14px 32px;
	border-radius: var(--ptw-radius-sm);
	text-decoration: none;
	transition: background var(--ptw-transition), box-shadow var(--ptw-transition), color var(--ptw-transition);
	cursor: pointer;
	border: none;
}
.ptw-bp-btn--primary {
	background: var(--ptw-blue);
	color: #fff;
}
.ptw-bp-btn--primary:hover {
	background: var(--ptw-blue-light);
	box-shadow: 0 6px 24px rgba(30, 107, 255, 0.45);
	color: #fff;
}
.ptw-bp-btn--ghost {
	background: transparent;
	color: var(--ptw-text-secondary);
	border: 1px solid rgba(255,255,255,0.2);
}
.ptw-bp-btn--ghost:hover {
	background: rgba(255,255,255,0.06);
	color: var(--ptw-text-primary);
	border-color: rgba(255,255,255,0.35);
}
.ptw-bp-hero-savings {
	margin-top: 18px;
	font-size: 13px;
	color: var(--ptw-green);
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* ── Trust bar ── */
.ptw-bp-trust {
	display: flex;
	justify-content: center;
	gap: 36px;
	flex-wrap: wrap;
	padding: 20px 40px;
	background: var(--ptw-navy-mid);
	border-bottom: 1px solid var(--ptw-border);
}
.ptw-bp-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ptw-text-secondary);
	letter-spacing: 0.02em;
}
.ptw-bp-trust-item span.icon {
	font-size: 16px;
}

/* ── Section layout ── */
.ptw-bp-section {
	max-width: 1040px;
	margin: 0 auto;
	padding: 60px 40px;
}
.ptw-bp-section + .ptw-bp-section {
	padding-top: 0;
}
.ptw-bp-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ptw-blue-light);
	margin-bottom: 10px;
}
.ptw-bp-section-title {
	font-size: 28px;
	font-weight: 800;
	color: var(--ptw-text-primary);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.ptw-bp-section-body {
	font-size: 16px;
	color: var(--ptw-text-secondary);
	max-width: 720px;
	line-height: 1.75;
}

/* ── Compound cards ── */
.ptw-bp-compounds {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
	margin-top: 32px;
}
.ptw-bp-compound-card {
	background: var(--ptw-navy-mid);
	border: 1px solid var(--ptw-border);
	border-radius: var(--ptw-radius);
	padding: 28px 24px 24px;
	position: relative;
	overflow: hidden;
	transition: transform var(--ptw-transition), box-shadow var(--ptw-transition);
}
.ptw-bp-compound-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(30,107,255,0.2);
}
.ptw-bp-compound-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ptw-blue), transparent);
}
.ptw-bp-compound-num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ptw-blue-light);
	margin-bottom: 8px;
}
.ptw-bp-compound-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--ptw-text-primary);
	margin: 0 0 10px;
	line-height: 1.3;
}
.ptw-bp-compound-role {
	font-size: 14px;
	color: var(--ptw-text-secondary);
	line-height: 1.65;
	margin: 0 0 20px;
}
.ptw-bp-compound-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid var(--ptw-border);
}
.ptw-bp-price-retail {
	font-size: 13px;
	color: var(--ptw-text-muted);
	text-decoration: line-through;
}
.ptw-bp-price-bundle {
	font-size: 18px;
	font-weight: 800;
	color: var(--ptw-green);
}

/* ── Mechanism section ── */
.ptw-bp-mechanism {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ptw-bp-mech-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.ptw-bp-mech-num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--ptw-blue-glow);
	border: 1px solid rgba(30,107,255,0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--ptw-blue-light);
	margin-top: 2px;
}
.ptw-bp-mech-body h4 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ptw-text-primary);
	margin: 0 0 6px;
}
.ptw-bp-mech-body p {
	font-size: 15px;
	color: var(--ptw-text-secondary);
	margin: 0;
	line-height: 1.7;
}

/* ── Divider ── */
.ptw-bp-divider {
	height: 1px;
	background: var(--ptw-border);
	margin: 0 40px;
}

/* ── Pricing summary ── */
.ptw-bp-pricing {
	background: var(--ptw-navy-mid);
	border: 1px solid var(--ptw-border);
	border-radius: var(--ptw-radius);
	padding: 36px 36px 28px;
	max-width: 680px;
	margin: 32px auto 0;
}
.ptw-bp-pricing-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--ptw-text-primary);
	margin-bottom: 24px;
	text-align: center;
}
.ptw-bp-pricing-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--ptw-border);
	font-size: 15px;
}
.ptw-bp-pricing-row:last-of-type {
	border-bottom: none;
}
.ptw-bp-pricing-label {
	color: var(--ptw-text-secondary);
}
.ptw-bp-pricing-value {
	font-weight: 600;
	color: var(--ptw-text-primary);
}
.ptw-bp-pricing-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 2px solid var(--ptw-blue);
}
.ptw-bp-pricing-total .label {
	font-size: 17px;
	font-weight: 700;
	color: var(--ptw-text-primary);
}
.ptw-bp-pricing-total .value {
	font-size: 26px;
	font-weight: 800;
	color: var(--ptw-green);
}
.ptw-bp-pricing-savings {
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	color: var(--ptw-green);
	font-weight: 600;
}
.ptw-bp-pricing-cta {
	margin-top: 24px;
	text-align: center;
}

/* ── Research note ── */
.ptw-bp-research-note {
	background: rgba(30, 107, 255, 0.06);
	border: 1px solid rgba(30, 107, 255, 0.2);
	border-left: 3px solid var(--ptw-blue);
	border-radius: 0 var(--ptw-radius-sm) var(--ptw-radius-sm) 0;
	padding: 18px 20px;
	font-size: 13px;
	color: var(--ptw-text-secondary);
	line-height: 1.7;
	margin-top: 32px;
}
.ptw-bp-research-note strong {
	color: var(--ptw-text-primary);
}

/* ── Disclaimer ── */
.ptw-bp-disclaimer {
	text-align: center;
	font-size: 12px;
	color: var(--ptw-text-muted);
	padding: 24px 40px;
	border-top: 1px solid var(--ptw-border);
	line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 680px) {
	.ptw-bp-hero { padding: 48px 20px 40px; }
	.ptw-bp-section { padding: 40px 20px; }
	.ptw-bp-compounds { grid-template-columns: 1fr; }
	.ptw-bp-pricing { padding: 24px 20px 20px; }
	.ptw-bp-trust { gap: 18px; padding: 16px 20px; }
}