/**
 * Frontend styling for Simple Subscriptions plan pages.
 */

.ssubs-product-page {
	max-width: 1100px;
	margin: 0 auto;
}

.ssubs-product-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 32px;
	align-items: start;
}

.ssubs-product-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.ssubs-product-summary h2 {
	margin-top: 0;
}

.ssubs-product-description {
	font-size: 1.05rem;
	margin-bottom: 24px;
}

.ssubs-pricing-preview,
.ssubs-addons-preview,
.ssubs-product-faq {
	margin-top: 28px;
}

.ssubs-price-options,
.ssubs-addon-options {
	display: grid;
	gap: 12px;
}

.ssubs-price-option,
.ssubs-addon-option {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid currentColor;
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
}

.ssubs-price-main {
	display: block;
	font-weight: 700;
	font-size: 1.35rem;
}

.ssubs-price-interval,
.ssubs-price-note,
.ssubs-addon-price,
.ssubs-addon-description,
.ssubs-addon-note,
.ssubs-muted,
.ssubs-checkout-disabled {
	display: block;
	font-size: 0.95rem;
	opacity: 0.75;
}

.ssubs-signup-button {
	display: inline-block;
	margin-top: 24px;
	padding: 13px 22px;
	border-radius: 8px;
	border: 0;
	font-weight: 700;
	cursor: pointer;
}

.ssubs-signup-button:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.ssubs-product-faq details {
	border-top: 1px solid currentColor;
	padding: 14px 0;
}

.ssubs-product-faq summary {
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 800px) {
	.ssubs-product-hero {
		grid-template-columns: 1fr;
	}
}

.ssubs-alert { border:1px solid #dcdcde; border-radius:6px; padding:12px; margin:0 0 16px; background:#f6f7f7; }
.ssubs-alert-error { border-color:#d63638; background:#fcf0f1; }
.ssubs-alert-success { border-color:#00a32a; background:#edfaef; }
.ssubs-checkout-form { display:grid; gap:18px; }
.ssubs-customer-fields { border:1px solid #dcdcde; border-radius:8px; padding:16px; background:#fff; }
.ssubs-customer-fields label { display:block; margin:10px 0; }
.ssubs-consent { font-size: 0.95em; }
.ssubs-portal-card { border:1px solid #dcdcde; border-radius:8px; padding:16px; margin: 0 0 12px; background:#fff; }
.ssubs-block-price span { font-weight:700; margin-right:10px; }
.ssubs-theme-card-grid .ssubs-price-options, .ssubs-theme-card-grid .ssubs-addon-options { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.ssubs-muted { color:#646970; }

.ssubs-checkout-page {
	max-width: 760px;
	margin: 0 auto;
}

.ssubs-checkout-summary {
	border: 1px solid #dcdcde;
	border-radius: 10px;
	padding: 18px;
	margin: 0 0 22px;
	background: #fff;
}

.ssubs-checkout-summary h3 {
	margin-top: 0;
}

.ssubs-checkout-actions {
	margin-top: 18px;
}

/* Demo checkout / demo portal */
.ssubs-demo-hero,
.ssubs-demo-summary,
.ssubs-demo-options,
.ssubs-portal-card {
	border: 1px solid #dcdcde;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1rem;
	background: #fff;
}
.ssubs-badge {
	display: inline-block;
	padding: .25rem .55rem;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	background: #f6f7f7;
	margin: 0 0 .75rem;
}
.ssubs-demo-options label,
.ssubs-customer-fields label {
	display: block;
	margin-bottom: .75rem;
}
.ssubs-demo-options input[type="checkbox"],
.ssubs-consent input[type="checkbox"] {
	margin-right: .35rem;
}
.ssubs-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}
.ssubs-table th,
.ssubs-table td {
	border: 1px solid #dcdcde;
	padding: .65rem;
	text-align: left;
}
.ssubs-admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin: 1rem 0 1.5rem;
}
.ssubs-admin-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 1rem;
}


/* v0.2.8 frontend/customer portal polish */
.ssubs-page-shell,
.ssubs-checkout-page,
.ssubs-demo-portal,
.ssubs-product-page {
	max-width: 1120px;
	margin: 0 auto;
	padding: 18px;
}
.ssubs-page-hero,
.ssubs-demo-hero {
	background: linear-gradient(135deg, #111827, #1f2937);
	color: #fff;
	border-radius: 18px;
	padding: clamp(22px, 4vw, 42px);
	margin-bottom: 20px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
}
.ssubs-page-hero h2,
.ssubs-demo-hero h2 {
	color: inherit;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	margin: 6px 0 8px;
}
.ssubs-page-hero p,
.ssubs-demo-hero p {
	max-width: 720px;
	opacity: .86;
}
.ssubs-badge {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.24);
	color: inherit;
}
.ssubs-portal-subscriptions {
	display: grid;
	gap: 16px;
}
.ssubs-subscription-panel,
.ssubs-checkout-summary,
.ssubs-demo-summary,
.ssubs-demo-options,
.ssubs-customer-fields,
.ssubs-price-option,
.ssubs-addon-option {
	border-color: #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba(15,23,42,.07);
}
.ssubs-card-topline {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 14px;
}
.ssubs-card-topline h3 {
	margin: 2px 0 0;
	font-size: 24px;
}
.ssubs-kicker {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #64748b;
}
.ssubs-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 14px 0 18px;
}
.ssubs-detail-grid div {
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
}
.ssubs-detail-grid span {
	display: block;
	font-size: 12px;
	color: #64748b;
	font-weight: 700;
	margin-bottom: 4px;
}
.ssubs-detail-grid strong {
	display: block;
	font-size: 15px;
	color: #111827;
}
.ssubs-portal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}
.ssubs-inline-form {
	margin: 0;
}
.ssubs-inline-form .button,
.ssubs-secondary-action,
.ssubs-danger-action {
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 700;
	border: 1px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
}
.ssubs-danger-action {
	border-color: #fecaca;
	color: #991b1b;
	background: #fff1f2;
}
.ssubs-status-pill {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 800;
	background: #eef2ff;
	color: #3730a3;
}
.ssubs-status-active { background: #dcfce7; color: #166534; }
.ssubs-status-on-hold { background: #fef3c7; color: #92400e; }
.ssubs-status-pending-cancel { background: #ffedd5; color: #9a3412; }
.ssubs-status-cancelled,
.ssubs-status-expired { background: #fee2e2; color: #991b1b; }
.ssubs-impersonation-banner {
	border-color: #f59e0b;
	background: #fffbeb;
	color: #78350f;
}
.ssubs-alert,
.ssubs-alert-success,
.ssubs-alert-error {
	border-radius: 12px;
	padding: 14px 16px;
}
@media (max-width: 700px) {
	.ssubs-card-topline,
	.ssubs-portal-actions {
		display: block;
	}
	.ssubs-inline-form {
		margin-bottom: 10px;
	}
}

/* v0.3.12 demo confirmation page */
.ssubs-confirmation-page {
	max-width: 960px;
}
.ssubs-confirmation-hero {
	background: linear-gradient(135deg, #064e3b, #065f46);
	color: #ffffff;
	border-radius: 20px;
	padding: clamp(24px, 4vw, 44px);
	margin-bottom: 20px;
	box-shadow: 0 18px 50px rgba(6, 95, 70, .22);
}
.ssubs-confirmation-hero h2 {
	color: inherit;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.05;
	margin: 8px 0 10px;
}
.ssubs-confirmation-hero p {
	max-width: 760px;
	font-size: 1.05rem;
	opacity: .92;
}
.ssubs-confirmation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 20px 0;
}
.ssubs-confirmation-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}
.ssubs-confirmation-card h3 {
	margin-top: 0;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #64748b;
}
.ssubs-confirmation-card p {
	margin: 8px 0;
}
.ssubs-confirmation-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 18px;
}
.ssubs-secondary-link {
	display: inline-block;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	font-weight: 700;
	text-decoration: none;
}


/* v0.5.0 product page theme gallery styles */
.ssubs-product-page {
	--ssubs-theme-bg: #ffffff;
	--ssubs-theme-text: #0f172a;
	--ssubs-theme-muted: #64748b;
	--ssubs-theme-accent: #2563eb;
	--ssubs-theme-soft: #eff6ff;
	--ssubs-theme-card: #ffffff;
	color: var(--ssubs-theme-text);
	background: var(--ssubs-theme-bg);
	border-radius: 28px;
}
.ssubs-product-page .ssubs-product-hero {
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}
.ssubs-product-media {
	display: grid;
	gap: 14px;
}
.ssubs-product-image {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: var(--ssubs-theme-soft);
	box-shadow: 0 20px 50px rgba(15,23,42,.12);
}
.ssubs-product-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: inherit;
}
.ssubs-product-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	border: 1px dashed rgba(100,116,139,.55);
	border-radius: inherit;
	color: var(--ssubs-theme-muted);
	font-weight: 800;
}
.ssubs-product-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
	gap: 10px;
}
.ssubs-product-gallery span {
	display: block;
	aspect-ratio: 1;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ssubs-theme-soft);
	border: 1px solid rgba(148,163,184,.35);
}
.ssubs-product-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ssubs-product-description {
	font-size: clamp(1.05rem, 1.4vw, 1.22rem);
	line-height: 1.7;
	color: var(--ssubs-theme-muted);
}
.ssubs-product-description h1,
.ssubs-product-description h2,
.ssubs-product-summary h2 {
	color: var(--ssubs-theme-text);
	line-height: 1.05;
}
.ssubs-price-option,
.ssubs-addon-option {
	background: var(--ssubs-theme-card);
	border-color: rgba(148,163,184,.35);
	box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.ssubs-price-option:has(input:checked),
.ssubs-addon-option:has(input:checked) {
	border-color: var(--ssubs-theme-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ssubs-theme-accent) 18%, transparent), 0 14px 34px rgba(15,23,42,.08);
}
.ssubs-signup-button {
	background: var(--ssubs-theme-accent);
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 14px 30px color-mix(in srgb, var(--ssubs-theme-accent) 28%, transparent);
}
.ssubs-product-faq {
	background: var(--ssubs-theme-card);
	border: 1px solid rgba(148,163,184,.25);
	border-radius: 22px;
	padding: 20px 24px;
	box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.ssubs-theme-blank {
	--ssubs-theme-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	--ssubs-theme-text: #0f172a;
	--ssubs-theme-muted: #475569;
	--ssubs-theme-accent: #2563eb;
	--ssubs-theme-soft: #f1f5f9;
	--ssubs-theme-card: #ffffff;
	padding: clamp(18px, 4vw, 46px);
	border: 1px solid #e2e8f0;
	box-shadow: 0 20px 60px rgba(15,23,42,.06);
}
.ssubs-theme-blank .ssubs-product-hero {
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.ssubs-theme-blank .ssubs-product-image {
	box-shadow: none;
	border: 1px solid #e2e8f0;
}
.ssubs-theme-tech {
	--ssubs-theme-bg: radial-gradient(circle at 15% 0%, #0ea5e9 0, transparent 24rem), linear-gradient(135deg, #020617 0%, #0f172a 100%);
	--ssubs-theme-text: #e0f2fe;
	--ssubs-theme-muted: #bae6fd;
	--ssubs-theme-accent: #38bdf8;
	--ssubs-theme-soft: rgba(56,189,248,.12);
	--ssubs-theme-card: rgba(15,23,42,.78);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-tech .ssubs-price-option,
.ssubs-theme-tech .ssubs-addon-option,
.ssubs-theme-tech .ssubs-product-faq { color: #e0f2fe; backdrop-filter: blur(14px); }
.ssubs-theme-fashion {
	--ssubs-theme-bg: linear-gradient(135deg, #f8efe3 0%, #e5c7a7 100%);
	--ssubs-theme-text: #3b2f2f;
	--ssubs-theme-muted: #6b4f3f;
	--ssubs-theme-accent: #111827;
	--ssubs-theme-soft: #f4e7d3;
	--ssubs-theme-card: rgba(255,255,255,.78);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-fashion .ssubs-product-description h1,
.ssubs-theme-fashion .ssubs-product-description h2 { font-family: Georgia, 'Times New Roman', serif; }
.ssubs-theme-beauty {
	--ssubs-theme-bg: radial-gradient(circle at 90% 10%, #fff 0, transparent 18rem), linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
	--ssubs-theme-text: #7f1d1d;
	--ssubs-theme-muted: #9f4f5e;
	--ssubs-theme-accent: #d45b6a;
	--ssubs-theme-soft: #ffe4e6;
	--ssubs-theme-card: rgba(255,255,255,.84);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-calm {
	--ssubs-theme-bg: linear-gradient(135deg, #fbfff9 0%, #e8f3e3 100%);
	--ssubs-theme-text: #14532d;
	--ssubs-theme-muted: #4d6b4f;
	--ssubs-theme-accent: #527c45;
	--ssubs-theme-soft: #edf7e9;
	--ssubs-theme-card: rgba(255,255,255,.82);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-sea {
	--ssubs-theme-bg: linear-gradient(135deg, #ecfeff 0%, #a5f3fc 48%, #0e7490 100%);
	--ssubs-theme-text: #083344;
	--ssubs-theme-muted: #155e75;
	--ssubs-theme-accent: #0e7490;
	--ssubs-theme-soft: rgba(236,254,255,.7);
	--ssubs-theme-card: rgba(255,255,255,.82);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-elegant {
	--ssubs-theme-bg: linear-gradient(135deg, #fffaf2 0%, #ead7bd 100%);
	--ssubs-theme-text: #422006;
	--ssubs-theme-muted: #7c5a2b;
	--ssubs-theme-accent: #b7791f;
	--ssubs-theme-soft: #f8f1e7;
	--ssubs-theme-card: rgba(255,255,255,.78);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-elegant .ssubs-product-description h1,
.ssubs-theme-elegant .ssubs-product-description h2 { font-family: Georgia, 'Times New Roman', serif; }
.ssubs-theme-futuristic {
	--ssubs-theme-bg: radial-gradient(circle at 80% 20%, #7c3aed 0, transparent 20rem), linear-gradient(135deg, #09090b 0%, #2e1065 100%);
	--ssubs-theme-text: #faf5ff;
	--ssubs-theme-muted: #ddd6fe;
	--ssubs-theme-accent: #a855f7;
	--ssubs-theme-soft: rgba(168,85,247,.18);
	--ssubs-theme-card: rgba(24,24,27,.82);
	padding: clamp(20px, 4vw, 48px);
}
.ssubs-theme-futuristic .ssubs-price-option,
.ssubs-theme-futuristic .ssubs-addon-option,
.ssubs-theme-futuristic .ssubs-product-faq { color: #faf5ff; backdrop-filter: blur(14px); }
@media (max-width: 800px) {
	.ssubs-theme-blank .ssubs-product-hero {
		grid-template-columns: 1fr;
	}
	.ssubs-product-page {
		border-radius: 20px;
	}
}


/* v0.5.3 blank theme demo preview polish */
.ssubs-theme-blank {
	background:
		radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .08), transparent 24rem),
		linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.ssubs-theme-blank .ssubs-product-hero {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(22px, 4vw, 44px);
	background: rgba(255,255,255,.82);
	border: 1px solid #e2e8f0;
	border-radius: 30px;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .09);
}
.ssubs-theme-blank .ssubs-product-summary {
	padding: clamp(4px, 2vw, 18px);
}
.ssubs-theme-blank .ssubs-product-description {
	max-width: 560px;
	margin-bottom: 26px;
	color: #475569;
}
.ssubs-theme-blank .ssubs-product-image.is-placeholder {
	background: linear-gradient(135deg, #eef6ff 0%, #f8fafc 100%);
}
.ssubs-demo-product-visual {
	position: relative;
	min-height: 340px;
	background:
		radial-gradient(circle at 28% 26%, rgba(96, 165, 250, .22), transparent 16rem),
		linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
	border: 1px solid #dbeafe;
}
.ssubs-demo-product-card {
	position: relative;
	display: block;
	width: min(72%, 360px);
	aspect-ratio: 1.15;
	margin: 0 auto 12px;
}
.ssubs-demo-product-orb {
	position: absolute;
	inset: 8% 8% auto auto;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 28%, #ffffff, #bfdbfe 42%, #2563eb);
	box-shadow: 0 18px 46px rgba(37, 99, 235, .25);
}
.ssubs-demo-product-box {
	position: absolute;
	left: 5%;
	bottom: 18%;
	width: 46%;
	height: 38%;
	border-radius: 18px;
	background: linear-gradient(145deg, #ffffff, #dbeafe);
	box-shadow: 0 18px 38px rgba(15,23,42,.12);
	border: 1px solid rgba(148,163,184,.35);
}
.ssubs-demo-product-bottle {
	position: absolute;
	right: 18%;
	bottom: 16%;
	width: 24%;
	height: 58%;
	border-radius: 18px 18px 26px 26px;
	background: linear-gradient(145deg, #ffffff, #93c5fd);
	box-shadow: 0 20px 40px rgba(37,99,235,.18);
	border: 1px solid rgba(96,165,250,.45);
}
.ssubs-demo-product-bottle:before {
	content: "";
	position: absolute;
	left: 28%;
	right: 28%;
	top: -16%;
	height: 18%;
	border-radius: 8px 8px 0 0;
	background: #1d4ed8;
}
.ssubs-demo-product-shadow {
	position: absolute;
	left: 14%;
	right: 9%;
	bottom: 7%;
	height: 12%;
	border-radius: 999px;
	background: rgba(15,23,42,.10);
	filter: blur(6px);
}
.ssubs-demo-product-visual em {
	display: block;
	position: relative;
	z-index: 2;
	font-style: normal;
	font-weight: 800;
	color: #334155;
	text-align: center;
}
.ssubs-demo-gallery span {
	background:
		radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 28%),
		linear-gradient(135deg, #dbeafe, #f8fafc);
}
.ssubs-demo-gallery span:nth-child(2) {
	background: linear-gradient(135deg, #fef3c7, #dbeafe);
}
.ssubs-demo-gallery span:nth-child(3) {
	background: linear-gradient(135deg, #dcfce7, #f8fafc);
}
.ssubs-demo-gallery span:nth-child(4) {
	background: linear-gradient(135deg, #fae8ff, #dbeafe);
}
.ssubs-demo-price-option {
	pointer-events: none;
	position: relative;
	border-style: dashed;
}
.ssubs-demo-price-option:after {
	content: "Preview";
	position: absolute;
	right: 14px;
	top: 14px;
	padding: 5px 9px;
	border-radius: 999px;
	background: #eff6ff;
	color: #1d4ed8;
	font-size: .75rem;
	font-weight: 800;
}
.ssubs-using-demo-content .ssubs-signup-button:disabled {
	opacity: .82;
	background: #2563eb;
	color: #fff;
}


/* v0.5.4 tidy plan title placement */
body.single-ssubs_plan .entry-header,
body.single-ssubs_plan .wp-block-post-title,
body.single-ssubs_plan .entry-title,
body.single-ssubs_plan .post-title,
body.single-ssubs_plan .entry-meta,
body.single-ssubs_plan .posted-on,
body.single-ssubs_plan .byline,
body.single-ssubs_plan .wp-block-post-author-name,
body.single-ssubs_plan .wp-block-post-date,
body.single-ssubs_plan .wp-block-post-terms,
body.single-ssubs_plan .post-meta,
body.single-ssubs_plan .post-author,
body.single-ssubs_plan .author,
body.single-ssubs_plan .wp-block-template-part + main .wp-block-spacer:first-child {
	display: none !important;
}
body.single-ssubs_plan .wp-site-blocks,
body.single-ssubs_plan main,
body.single-ssubs_plan article,
body.single-ssubs_plan .entry-content,
body.single-ssubs_plan .wp-block-post-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.single-ssubs_plan .ssubs-product-page {
	margin-top: clamp(20px, 4vw, 44px);
}
.ssubs-product-title-block {
	margin: 0 0 18px;
}
.ssubs-product-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--ssubs-theme-soft);
	color: var(--ssubs-theme-muted);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ssubs-product-title {
	margin: 0;
	color: var(--ssubs-theme-text);
	font-size: clamp(2.2rem, 5vw, 4.6rem);
	line-height: .95;
	letter-spacing: -.05em;
}
.ssubs-theme-tech .ssubs-product-title,
.ssubs-theme-futuristic .ssubs-product-title {
	text-shadow: 0 0 28px color-mix(in srgb, var(--ssubs-theme-accent) 24%, transparent);
}
.ssubs-theme-elegant .ssubs-product-title,
.ssubs-theme-fashion .ssubs-product-title,
.ssubs-theme-beauty .ssubs-product-title {
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: -.045em;
}
.ssubs-theme-blank .ssubs-product-title {
	font-size: clamp(2.35rem, 4.8vw, 4.3rem);
}




/* v0.5.6 safe single-plan template */
.ssubs-single-plan-template {
	width: 100%;
	padding: clamp(18px, 4vw, 48px) 18px clamp(34px, 6vw, 76px);
	background: transparent;
}
.ssubs-single-plan-inner {
	width: min(1180px, 100%);
	margin: 0 auto;
}
.ssubs-single-plan-template .ssubs-product-page {
	margin-top: 0 !important;
}
body.single-ssubs_plan .ssubs-product-media:not(:has(.ssubs-product-gallery)) {
	gap: 0;
}
body.single-ssubs_plan .ssubs-product-media:not(:has(.ssubs-product-gallery)) .ssubs-product-image {
	margin-bottom: 0;
}
@media (max-width: 800px) {
	.ssubs-single-plan-template {
		padding-left: 12px;
		padding-right: 12px;
	}
}


/* =========================================================================
   v1.11.0 — Checkout (Stripe-inspired, calm and official)
   Colours come from the plan's palette (ssubs_product_page_style_vars), so a
   merchant's chosen background/accent carries through from product page to
   checkout. Defaults are a light grey page, white cards and a confident blue.
   ========================================================================= */
.ssubs-checkout-modern {
	--ssubs-co-line: color-mix(in srgb, var(--ssubs-theme-muted, #64748b) 22%, transparent);
	--ssubs-co-line-strong: color-mix(in srgb, var(--ssubs-theme-muted, #64748b) 38%, transparent);
	--ssubs-co-radius: 16px;
	--ssubs-co-field: 10px;

	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 24px);
	background: var(--ssubs-theme-bg, #f4f6fa);
	color: var(--ssubs-theme-muted, #475569);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.ssubs-checkout-modern *, .ssubs-checkout-modern *::before, .ssubs-checkout-modern *::after { box-sizing: border-box; }

/* ---- Alerts ---------------------------------------------------------- */
.ssubs-checkout-modern .ssubs-alert {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--ssubs-co-line);
	border-radius: 12px;
	background: var(--ssubs-theme-card, #fff);
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 14px;
}
.ssubs-checkout-modern .ssubs-alert-error { border-color: #fda29b; background: #fffbfa; color: #b42318; }

/* ---- Head ------------------------------------------------------------ */
.ssubs-checkout-modern .ssubs-checkout-head { max-width: 640px; margin: 0 0 clamp(22px, 3vw, 34px); }

.ssubs-checkout-modern .ssubs-checkout-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 10px;
	margin-bottom: 16px;
	border: 1px solid var(--ssubs-co-line);
	border-radius: 999px;
	background: var(--ssubs-theme-card, #fff);
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.ssubs-checkout-modern .ssubs-checkout-badge svg { width: 14px; height: 14px; flex: none; color: var(--ssubs-theme-accent, #2563eb); }

.ssubs-checkout-modern .ssubs-checkout-head h2 {
	margin: 0 0 10px;
	color: var(--ssubs-theme-text, #0f172a);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.15;
}
.ssubs-checkout-modern .ssubs-checkout-head p {
	margin: 0;
	color: var(--ssubs-theme-muted, #475569);
	font-size: 15.5px;
	max-width: 62ch;
}

/* ---- Layout: form left, summary right -------------------------------- */
.ssubs-checkout-modern .ssubs-checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(18px, 2.5vw, 30px);
	align-items: start;
}
/* Summary sits first in the DOM (so phones see the price before the form);
   on desktop it is placed into the right-hand column. */
.ssubs-checkout-modern .ssubs-checkout-form { grid-column: 1; grid-row: 1; display: block; margin: 0; }
.ssubs-checkout-modern .ssubs-checkout-summary { grid-column: 2; grid-row: 1; }

/* ---- Shared card ----------------------------------------------------- */
.ssubs-checkout-modern .ssubs-customer-fields,
.ssubs-checkout-modern .ssubs-checkout-summary {
	background: var(--ssubs-theme-card, #fff);
	border: 1px solid var(--ssubs-co-line);
	border-radius: var(--ssubs-co-radius);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.12);
}
.ssubs-checkout-modern .ssubs-card-title {
	margin: 0 0 20px;
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 1.02rem;
	font-weight: 600;
}

/* ---- Fields ---------------------------------------------------------- */
.ssubs-checkout-modern .ssubs-field { margin: 0 0 16px; }
.ssubs-checkout-modern .ssubs-field-last { margin-bottom: 0; }

.ssubs-checkout-modern .ssubs-field-label {
	display: block;
	margin: 0 0 6px;
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 13.5px;
	font-weight: 500;
}
.ssubs-checkout-modern .ssubs-req { color: #b42318; font-weight: 600; }
.ssubs-checkout-modern .ssubs-opt { color: var(--ssubs-theme-muted, #64748b); font-weight: 400; font-size: 12.5px; }

.ssubs-checkout-modern .ssubs-input {
	width: 100%;
	max-width: none;
	padding: 11px 13px;
	background: var(--ssubs-theme-card, #fff);
	border: 1px solid var(--ssubs-co-line-strong);
	border-radius: var(--ssubs-co-field);
	color: var(--ssubs-theme-text, #0f172a);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: none;
}
.ssubs-checkout-modern .ssubs-input::placeholder { color: color-mix(in srgb, var(--ssubs-theme-muted, #64748b) 70%, transparent); }
.ssubs-checkout-modern .ssubs-input:hover { border-color: color-mix(in srgb, var(--ssubs-theme-muted, #64748b) 52%, transparent); }
.ssubs-checkout-modern .ssubs-input:focus {
	outline: none;
	border-color: var(--ssubs-theme-accent, #2563eb);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssubs-theme-accent, #2563eb) 26%, transparent);
}

.ssubs-checkout-modern .ssubs-field-rule { height: 1px; margin: 22px 0; border: 0; background: var(--ssubs-co-line); }
.ssubs-checkout-modern .ssubs-field-note { margin: 12px 0 0; color: var(--ssubs-theme-muted, #64748b); font-size: 13px; }

/* ---- Consent checkbox (native input hidden, span is the visual) ------- */
.ssubs-checkout-modern .ssubs-consent {
	position: relative;
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 11px;
	align-items: start;
	margin: 4px 0 0;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ssubs-theme-muted, #475569);
}
.ssubs-checkout-modern .ssubs-consent input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}
.ssubs-checkout-modern .ssubs-check-box {
	position: relative;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1.5px solid var(--ssubs-co-line-strong);
	border-radius: 5px;
	background: var(--ssubs-theme-card, #fff);
	transition: background .15s ease, border-color .15s ease;
}
.ssubs-checkout-modern .ssubs-check-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 5px;
	height: 9px;
	border: solid var(--ssubs-theme-on-accent, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.6);
	opacity: 0;
	transition: transform .15s ease, opacity .15s ease;
}
.ssubs-checkout-modern .ssubs-consent input:checked ~ .ssubs-check-box {
	background: var(--ssubs-theme-accent, #2563eb);
	border-color: var(--ssubs-theme-accent, #2563eb);
}
.ssubs-checkout-modern .ssubs-consent input:checked ~ .ssubs-check-box::after { transform: rotate(45deg) scale(1); opacity: 1; }
.ssubs-checkout-modern .ssubs-consent input:focus-visible ~ .ssubs-check-box {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssubs-theme-accent, #2563eb) 26%, transparent);
}

/* ---- Summary --------------------------------------------------------- */
.ssubs-checkout-modern .ssubs-summary-plan {
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
}
.ssubs-checkout-modern .ssubs-summary-tier { margin-top: 3px; color: var(--ssubs-theme-muted, #64748b); font-size: 13.5px; }
.ssubs-checkout-modern .ssubs-summary-rule { height: 1px; margin: 18px 0; border: 0; background: var(--ssubs-co-line); }

.ssubs-checkout-modern .ssubs-summary-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.ssubs-checkout-modern .ssubs-summary-amount {
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
}
.ssubs-checkout-modern .ssubs-summary-period { color: var(--ssubs-theme-muted, #64748b); font-size: 14px; font-weight: 500; }
.ssubs-checkout-modern .ssubs-summary-renews { margin: 7px 0 0; color: var(--ssubs-theme-muted, #64748b); font-size: 13px; }

/* Setup fee / add-on rows: still clearly disclosed before payment. */
.ssubs-checkout-modern .ssubs-summary-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ssubs-co-line);
	font-size: 13.5px;
	color: var(--ssubs-theme-muted, #64748b);
}
.ssubs-checkout-modern .ssubs-summary-line strong { color: var(--ssubs-theme-text, #0f172a); font-weight: 600; text-align: right; white-space: nowrap; }
.ssubs-checkout-modern .ssubs-summary-addons { margin-top: 6px; }
.ssubs-checkout-modern .ssubs-summary-addons-title {
	display: block;
	margin-top: 16px;
	color: var(--ssubs-theme-text, #0f172a);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.ssubs-checkout-modern .ssubs-summary-change {
	display: inline-block;
	margin-top: 18px;
	color: var(--ssubs-theme-accent, #2563eb);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--ssubs-theme-accent, #2563eb) 32%, transparent);
	padding-bottom: 1px;
	transition: color .15s ease, border-color .15s ease;
}
.ssubs-checkout-modern .ssubs-summary-change:hover { border-bottom-color: var(--ssubs-theme-accent, #2563eb); }
.ssubs-checkout-modern .ssubs-summary-change:focus-visible {
	outline: none;
	border-radius: 3px;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssubs-theme-accent, #2563eb) 26%, transparent);
}

/* ---- Button + reassurance -------------------------------------------- */
.ssubs-checkout-modern .ssubs-checkout-actions { margin: 0; }
.ssubs-checkout-modern .ssubs-signup-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin: 20px 0 0;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--ssubs-co-field);
	background: var(--ssubs-theme-accent, #2563eb);
	color: var(--ssubs-theme-on-accent, #fff);
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 10px 20px -10px color-mix(in srgb, var(--ssubs-theme-accent, #2563eb) 55%, transparent);
	transition: filter .15s ease, transform .12s ease;
}
.ssubs-checkout-modern .ssubs-signup-button span { transition: transform .18s ease; }
.ssubs-checkout-modern .ssubs-signup-button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.ssubs-checkout-modern .ssubs-signup-button:hover:not(:disabled) span { transform: translateX(3px); }
.ssubs-checkout-modern .ssubs-signup-button:active:not(:disabled) { transform: translateY(0); }
.ssubs-checkout-modern .ssubs-signup-button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.ssubs-checkout-modern .ssubs-checkout-disabled { margin: 12px 0 0; color: var(--ssubs-theme-muted, #64748b); font-size: 13px; text-align: center; }

.ssubs-checkout-modern .ssubs-pay-reassure {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 16px 2px 0;
	padding: 0;
	list-style: none;
	font-size: 12.75px;
	color: var(--ssubs-theme-muted, #64748b);
}
.ssubs-checkout-modern .ssubs-pay-reassure li { display: inline-flex; align-items: center; gap: 7px; }
.ssubs-checkout-modern .ssubs-pay-reassure svg { width: 14px; height: 14px; flex: none; opacity: .85; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
	.ssubs-checkout-modern .ssubs-checkout-layout { grid-template-columns: 1fr; }
	/* Natural DOM order takes over: summary, then form. */
	.ssubs-checkout-modern .ssubs-checkout-summary { grid-column: 1; grid-row: 1; position: static; }
	.ssubs-checkout-modern .ssubs-checkout-form { grid-column: 1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.ssubs-checkout-modern * { transition: none !important; }
}


/* Confirmation page: honour the accent instead of fixed green */
.ssubs-checkout-modern .ssubs-confirmation-hero,
.ssubs-confirmation-page.ssubs-checkout-modern .ssubs-confirmation-hero {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--ssubs-theme-accent, #059669) 82%, #000 18%),
		var(--ssubs-theme-accent, #065f46));
}

/* =========================================================================
   v0.5.9.2 — Checkout page title removal + form polish + live confirmation
   ========================================================================= */
/* Hide the theme-rendered "Subscription Checkout" page title and its gap.
   Scoped to the checkout page via the ssubs-checkout-body body class. */
body.ssubs-checkout-body .entry-title,
body.ssubs-checkout-body .wp-block-post-title,
body.ssubs-checkout-body .page-title,
body.ssubs-checkout-body h1.entry-title,
body.ssubs-checkout-body .entry-header,
body.ssubs-checkout-body .page-header {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.ssubs-checkout-body .entry-content,
body.ssubs-checkout-body .wp-block-post-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Live confirmation reuses the confirmation shell. */
.ssubs-confirmation-page .ssubs-confirmation-actions { margin-top: 22px; text-align: center; }



/* =========================================================================
   v1.10.0 — One-theme product page (merchant colours, auto contrast)
   The single authoritative product-page design. Colours arrive as inline
   CSS custom properties on the page root and shell (derived per plan in
   ssubs_product_page_style_vars), so text stays readable on any background.
   ========================================================================= */

/* Visually hidden, still announced by screen readers. Used for the pricing
   fieldset's aria-describedby helper text. */
.ssubs-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- Standalone shell & header (structure preserved) ------------------ */
body.ssubs-product-standalone {
	margin: 0;
	background: #fbf8f2;
	color: #111827;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow-x: hidden;
}
body.ssubs-product-standalone.admin-bar {
	padding-top: 32px;
}
.ssubs-landing-shell {
	min-height: 100vh;
	background:
		radial-gradient(circle at 8% 10%, rgba(224, 211, 190, .46), transparent 24rem),
		radial-gradient(circle at 92% 12%, rgba(219, 234, 254, .55), transparent 28rem),
		linear-gradient(180deg, #fffdf9 0%, #fbf8f2 100%);
}
.ssubs-landing-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px clamp(22px, 5vw, 56px);
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(15, 23, 42, .08);
}
body.admin-bar .ssubs-landing-header {
	top: 32px;
}
.ssubs-landing-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #0f172a;
	text-decoration: none;
	font-size: 1.22rem;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ssubs-landing-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font-size: 15px;
}
.ssubs-landing-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 34px);
	font-size: .94rem;
	font-weight: 700;
}
.ssubs-landing-nav a {
	color: #111827;
	text-decoration: none;
}
.ssubs-landing-nav a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}
.ssubs-landing-secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #475569;
}
.ssubs-landing-secure:before {
	content: "🔒";
	font-size: .98rem;
}

/* ---- Shell & header follow the plan's colours ------------------------- */
.ssubs-landing-shell {
	background: var(--ssubs-shell, #eef1f5);
}
.ssubs-landing-header {
	background: var(--ssubs-hdr, rgba(255,255,255,.85));
	border-bottom-color: var(--ssubs-hdr-bd, rgba(15,23,42,.08));
}
.ssubs-landing-brand,
.ssubs-landing-nav a { color: var(--ssubs-hdr-ink, #0f172a); }
.ssubs-landing-secure { color: color-mix(in srgb, var(--ssubs-hdr-ink, #0f172a) 72%, transparent); }
.ssubs-landing-mark { background: var(--ssubs-btn, #2563eb); color: var(--ssubs-btn-ink, #fff); }

/* ---- Gallery thumbs base ---------------------------------------------- */
.ssubs-product-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 110px));
	gap: 12px;
}
.ssubs-product-gallery-thumb {
	display: block;
	padding: 0;
	background: var(--ssubs-theme-card, #fff);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.ssubs-product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Comfortable clearance under any site/admin header ---------------- */
body.single-ssubs_plan .ssubs-product-page { margin-top: clamp(16px, 3vw, 32px); }
body.ssubs-checkout-body .ssubs-checkout-page { padding-top: clamp(24px, 4vw, 48px); }

/* =====================================================================
 * ELEVATED BASE — product-page design (v3, "one card" direction)
 * Everything for the purchase lives in one tall panel: kicker pill, title,
 * description, price, selector, add-ons, button, trust. Sections below the
 * hero (What's included, FAQ) use large left-aligned headings and quiet
 * hairline structure. Token-driven so every theme inherits it.
 * ===================================================================== */

.ssubs-product-page {
	--ssubs-space-2xs: 6px;
	--ssubs-space-xs: 10px;
	--ssubs-space-sm: 16px;
	--ssubs-space-md: 24px;
	--ssubs-space-lg: 40px;
	--ssubs-space-xl: 64px;
	--ssubs-space-2xl: 88px;

	--ssubs-font-kicker: 0.72rem;
	--ssubs-font-body: clamp(1rem, 0.96rem + 0.3vw, 1.1rem);
	--ssubs-font-lead: clamp(1.02rem, 0.98rem + 0.3vw, 1.14rem);
	--ssubs-font-price: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
	--ssubs-font-title: clamp(1.6rem, 1.3rem + 1vw, 2rem);
	--ssubs-font-section: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem);

	--ssubs-radius-card: 16px;
	--ssubs-radius-lg: 24px;
	--ssubs-hairline: color-mix(in srgb, var(--ssubs-theme-muted) 20%, transparent);
	--ssubs-hairline-strong: color-mix(in srgb, var(--ssubs-theme-muted) 32%, transparent);
	--ssubs-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 56px);
	background: var(--ssubs-theme-bg, transparent);
	color: var(--ssubs-theme-text, inherit);
	border-radius: var(--ssubs-radius-lg);
	font-size: var(--ssubs-font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---- Hero: media + description left, panel right ------------------ */
.ssubs-product-page .ssubs-product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	margin-bottom: var(--ssubs-space-2xl);
}
.ssubs-product-media { grid-column: 1; grid-row: 1; }
.ssubs-product-hero > .ssubs-product-description {
	grid-column: 1; grid-row: 2;
	align-self: start;
	background: var(--ssubs-theme-card);
	border: 1px solid var(--ssubs-hairline);
	border-radius: var(--ssubs-radius-card);
	padding: clamp(20px, 2.5vw, 26px);
	margin: 0;
}
.ssubs-product-summary { grid-column: 2; grid-row: 1 / span 2; }

/* ---- Media ------------------------------------------------------- */
.ssubs-product-media { display: grid; gap: 14px; }
.ssubs-product-image {
	border-radius: var(--ssubs-radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 48px -30px rgba(15,23,42,.28);
}
.ssubs-product-image img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; display: block; }
.ssubs-product-image-placeholder { min-height: 340px; aspect-ratio: 1 / 1; }
.ssubs-product-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ssubs-product-gallery span,
.ssubs-product-gallery-thumb { border-radius: 14px; aspect-ratio: 1 / 1; }

/* ---- Purchase panel: the one tall card -------------------------- */
.ssubs-purchase-panel {
	background: var(--ssubs-theme-card);
	border: 1px solid var(--ssubs-hairline);
	border-radius: var(--ssubs-radius-lg);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 40px 80px -50px rgba(15,23,42,.30);
}

/* Kicker pill */
.ssubs-product-kicker {
	display: inline-block;
	font-size: var(--ssubs-font-kicker);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssubs-theme-accent);
	background: color-mix(in srgb, var(--ssubs-theme-accent) 12%, transparent);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: var(--ssubs-space-md);
}

/* Title + description inside the card */
.ssubs-product-title {
	font-size: var(--ssubs-font-title);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin: 0 0 var(--ssubs-space-sm);
	color: var(--ssubs-theme-text);
	text-wrap: balance;
}
.ssubs-product-description {
	font-size: var(--ssubs-font-lead);
	line-height: 1.6;
	color: var(--ssubs-theme-muted);
	margin: 0 0 var(--ssubs-space-md);
	max-width: none;
}
.ssubs-product-description > :first-child { margin-top: 0; }
.ssubs-product-description > :last-child { margin-bottom: 0; }

/* Themes commonly add a bottom margin to forms; reset inside the panel. */
.ssubs-product-choice-form { margin: 0; }

/* Price headline */
.ssubs-selection-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ssubs-space-2xs) 10px;
	margin-bottom: var(--ssubs-space-md);
}
.ssubs-selection-price {
	font-size: var(--ssubs-font-price);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--ssubs-theme-text);
}
.ssubs-selection-meta { color: var(--ssubs-theme-muted); font-weight: 500; font-size: 1.02rem; }
.ssubs-selection-fee,
.ssubs-selection-renewal { flex-basis: 100%; font-size: 0.9rem; color: var(--ssubs-theme-muted); }
.ssubs-selection-fee:empty,
.ssubs-selection-renewal:empty { display: none; }

/* ---- Pricing selector: radio-left, stacked price, badge right --- */
.ssubs-pricing-preview { margin: 0 0 var(--ssubs-space-sm); border: 0; padding: 0; }
.ssubs-pricing-preview legend {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ssubs-theme-text);
	margin-bottom: var(--ssubs-space-xs);
	padding: 0;
}
.ssubs-price-options { display: grid; gap: var(--ssubs-space-xs); }

.ssubs-price-option {
	position: relative;
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	column-gap: 14px;
	padding: 16px 18px;
	background: var(--ssubs-theme-card);
	border: 1.5px solid var(--ssubs-hairline);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ssubs-price-option:hover { border-color: var(--ssubs-hairline-strong); }
.ssubs-price-option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ssubs-price-option:focus-within { outline: 2px solid var(--ssubs-theme-accent); outline-offset: 2px; }

/* Visible radio dot */
.ssubs-price-radio {
	grid-column: 1;
	width: 20px; height: 20px;
	border-radius: 50%;
	border: 2px solid var(--ssubs-hairline-strong);
	position: relative;
	transition: border-color .16s ease;
}
.ssubs-price-radio::after {
	content: "";
	position: absolute; inset: 3px;
	border-radius: 50%;
	background: var(--ssubs-theme-accent);
	transform: scale(0);
	transition: transform .16s ease;
}
.ssubs-price-option:has(input:checked) .ssubs-price-radio { border-color: var(--ssubs-theme-accent); }
.ssubs-price-option:has(input:checked) .ssubs-price-radio::after { transform: scale(1); }

.ssubs-price-body { grid-column: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ssubs-price-title { font-weight: 700; font-size: 1.02rem; color: var(--ssubs-theme-text); }
.ssubs-price-sub { font-size: 0.92rem; color: var(--ssubs-theme-muted); display: inline; }
.ssubs-price-sub .ssubs-price-main {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ssubs-theme-text);
	display: inline;
	position: static;
	text-align: left;
	letter-spacing: normal;
}
.ssubs-price-sub .ssubs-price-interval {
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ssubs-theme-muted);
	display: inline;
	position: static;
	transform: none;
	margin: 0;
	text-align: left;
}
.ssubs-price-note { display: block; font-size: 0.84rem; color: var(--ssubs-theme-muted); margin-top: 2px; }

/* When a tier has no name, promote the price line */
.ssubs-price-option:not(:has(.ssubs-price-title)) .ssubs-price-sub { font-size: 1.02rem; }
.ssubs-price-option:not(:has(.ssubs-price-title)) .ssubs-price-sub .ssubs-price-main { font-weight: 700; }

/* Selected state */
.ssubs-price-option:has(input:checked) {
	border-color: var(--ssubs-theme-accent);
	background: color-mix(in srgb, var(--ssubs-theme-accent) 7%, var(--ssubs-theme-card));
	box-shadow: 0 0 0 1px var(--ssubs-theme-accent);
}

/* Best-value badge */
.ssubs-price-badge {
	grid-column: 3;
	justify-self: end;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ssubs-theme-accent);
	background: color-mix(in srgb, var(--ssubs-theme-accent) 14%, transparent);
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Demo (no pricing yet) fallback */
.ssubs-demo-price-option { grid-template-columns: 1fr; }
.ssubs-demo-price-option .ssubs-price-main { font-weight: 700; color: var(--ssubs-theme-text); }

/* ---- Add-ons ----------------------------------------------------- */
.ssubs-addons-preview { margin: var(--ssubs-space-sm) 0 0; }
.ssubs-addon-options { display: grid; gap: var(--ssubs-space-xs); }
.ssubs-addon-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: color-mix(in srgb, var(--ssubs-theme-muted) 4%, var(--ssubs-theme-card));
	border: 1px solid var(--ssubs-hairline);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}
.ssubs-addon-option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
}
.ssubs-addon-check {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	border-radius: 6px;
	border: 2px solid var(--ssubs-hairline-strong);
	position: relative;
	transition: border-color .16s ease, background .16s ease;
}
.ssubs-addon-check::after {
	content: "";
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 10px;
	border: solid var(--ssubs-theme-on-accent, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .14s ease;
}
.ssubs-addon-option:has(input:checked) .ssubs-addon-check {
	background: var(--ssubs-theme-accent);
	border-color: var(--ssubs-theme-accent);
}
.ssubs-addon-option:has(input:checked) .ssubs-addon-check::after { transform: rotate(45deg) scale(1); }
.ssubs-addon-option:focus-within { outline: 2px solid var(--ssubs-theme-accent); outline-offset: 2px; }
.ssubs-addon-option:has(input:checked) {
	border-color: var(--ssubs-theme-accent);
	background: color-mix(in srgb, var(--ssubs-theme-accent) 6%, var(--ssubs-theme-card));
}
.ssubs-addon-option > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ssubs-addon-option strong { font-weight: 700; font-size: 1rem; color: var(--ssubs-theme-text); }
.ssubs-addon-option .ssubs-addon-price { font-size: 0.9rem; color: var(--ssubs-theme-muted); }
.ssubs-addon-option .ssubs-addon-description,
.ssubs-addon-option .ssubs-addon-note { font-size: 0.84rem; color: var(--ssubs-theme-muted); }

/* ---- Signup button ---------------------------------------------- */
.ssubs-checkout-preview { margin-top: var(--ssubs-space-md); }
.ssubs-signup-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 17px 24px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ssubs-theme-on-accent, #fff);
	background: var(--ssubs-theme-accent);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 16px 30px -18px color-mix(in srgb, var(--ssubs-theme-accent) 60%, transparent);
	cursor: pointer;
	transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.ssubs-signup-button span { transition: transform .16s ease; }
.ssubs-signup-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ssubs-signup-button:hover span { transform: translateX(3px); }
.ssubs-signup-button:active { transform: translateY(0); }
.ssubs-signup-button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; filter: none; }
.ssubs-checkout-disabled { margin: var(--ssubs-space-sm) 0 0; font-size: 0.86rem; color: var(--ssubs-theme-muted); text-align: center; }

/* ---- Trust row (inside panel) ----------------------------------- */
.ssubs-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ssubs-space-sm) var(--ssubs-space-md);
	margin-top: var(--ssubs-space-md);
	font-size: 0.84rem;
	color: var(--ssubs-theme-muted);
}
.ssubs-trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.ssubs-trust-row span::before {
	content: "";
	width: 15px; height: 15px;
	background: currentColor;
	-webkit-mask: var(--ssubs-check-mask) center / contain no-repeat;
	mask: var(--ssubs-check-mask) center / contain no-repeat;
	opacity: .65;
}

/* ---- Section headings (What's included, FAQ) -------------------- */
.ssubs-section-eyebrow { display: none; }
.ssubs-section-title,
.ssubs-product-faq h2 {
	text-align: left;
	font-size: var(--ssubs-font-section);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ssubs-theme-text);
	margin: 0 0 var(--ssubs-space-lg);
}

/* ---- What's included -------------------------------------------- */
.ssubs-included-section { margin: 0 0 var(--ssubs-space-2xl); }
.ssubs-benefit-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ssubs-benefit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ssubs-space-md);
	text-align: left;
}
.ssubs-benefit-card {
	padding: var(--ssubs-space-md);
	background: var(--ssubs-theme-card);
	border: 1px solid var(--ssubs-hairline);
	border-radius: var(--ssubs-radius-card);
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ssubs-benefit-card:hover {
	border-color: var(--ssubs-hairline-strong);
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -30px rgba(15,23,42,.25);
}
.ssubs-benefit-card > span:first-child,
.ssubs-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ssubs-theme-accent);
	margin-bottom: var(--ssubs-space-sm);
}
.ssubs-benefit-icon svg { width: 26px; height: 26px; }
.ssubs-benefit-card h3 { margin: 0 0 var(--ssubs-space-2xs); font-size: 1.1rem; font-weight: 700; color: var(--ssubs-theme-text); }
.ssubs-benefit-card p { margin: 0; font-size: 0.95rem; color: var(--ssubs-theme-muted); line-height: 1.6; }

/* ---- FAQ: hairline rows, no box --------------------------------- */
.ssubs-product-faq {
	margin: 0 0 var(--ssubs-space-2xl);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
}
.ssubs-product-faq details {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ssubs-hairline);
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.ssubs-product-faq details:last-child { border-bottom: 1px solid var(--ssubs-hairline); }
.ssubs-product-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ssubs-space-md);
	padding: var(--ssubs-space-md) 0;
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--ssubs-theme-text);
	list-style: none;
	cursor: pointer;
	overflow-wrap: anywhere;
}
.ssubs-product-faq summary::-webkit-details-marker { display: none; }
.ssubs-product-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px; height: 10px;
	border-right: 2px solid var(--ssubs-theme-muted);
	border-bottom: 2px solid var(--ssubs-theme-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.ssubs-product-faq details[open] summary::after { transform: rotate(-135deg); }
.ssubs-product-faq details > div {
	padding: 0 0 var(--ssubs-space-lg);
	color: var(--ssubs-theme-muted);
	line-height: 1.7;
	font-size: 0.98rem;
	overflow-wrap: anywhere;
}

/* Gallery thumbs behave like controls */
.ssubs-product-gallery-thumb {
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color .16s ease, opacity .16s ease, transform .16s ease;
}
.ssubs-product-gallery-thumb:hover { opacity: .85; transform: translateY(-1px); }
.ssubs-product-gallery-thumb[aria-current="true"] { border-color: var(--ssubs-theme-accent); }

/* ---- Bottom trust bar ------------------------------------------- */
.ssubs-bottom-trust {
	margin-top: var(--ssubs-space-xl);
	padding-top: var(--ssubs-space-lg);
	border-top: 1px solid var(--ssubs-hairline);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ssubs-space-md);
}
.ssubs-bottom-trust p { margin: 0; }
.ssubs-bottom-trust div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ssubs-space-md);
	font-size: 0.84rem;
	color: var(--ssubs-theme-muted);
}
.ssubs-bottom-trust div span { display: inline-flex; align-items: center; gap: 7px; }
.ssubs-bottom-trust div span::before {
	content: "";
	width: 15px; height: 15px;
	background: currentColor;
	-webkit-mask: var(--ssubs-check-mask) center / contain no-repeat;
	mask: var(--ssubs-check-mask) center / contain no-repeat;
	opacity: .6;
}

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 860px) {
	.ssubs-product-page { padding: 20px; }
	.ssubs-product-page .ssubs-product-hero {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	/* Panel first so the shopper sees the name and price immediately,
	   then image, description, and benefits. */
	.ssubs-product-summary { grid-column: 1; grid-row: auto; order: 1; }
	.ssubs-product-media   { grid-column: 1; grid-row: auto; order: 2; }
	.ssubs-product-hero > .ssubs-product-description { grid-column: 1; grid-row: auto; order: 3; }
	.ssubs-product-image img,
	.ssubs-product-image-placeholder { aspect-ratio: 4 / 3; min-height: 0; max-height: 50vh; }
	.ssubs-purchase-panel { padding: 22px; }
	/* Narrow screens: let the badge drop under the option body instead of
	   squeezing the price line. */
	.ssubs-price-option { grid-template-columns: 22px 1fr; }
	.ssubs-price-badge { grid-column: 2; justify-self: start; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.ssubs-product-page * { transition: none !important; }
}


/* Portal sign-in (v1.17.0): customers have no password, so the way in is a link. */
.ssubs-portal-login-form { max-width: 380px; margin: 18px 0; }
.ssubs-portal-login-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.ssubs-portal-login-form input[type="email"] {
	width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1;
	border-radius: 8px; font-size: 16px; margin-bottom: 10px;
}
.ssubs-portal-login-form .ssubs-signup-button { display: inline-block; border: 0; cursor: pointer; }
.ssubs-portal-hint { font-size: 13px; opacity: .75; margin-top: 8px; }
.ssubs-portal-error {
	background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
	padding: 10px 12px; border-radius: 8px;
}
.ssubs-portal-sent {
	background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
	padding: 22px 20px; border-radius: 12px; text-align: center;
}
.ssubs-portal-sent-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: #dcfce7; color: #166534; font-size: 21px; margin-bottom: 11px;
}
.ssubs-portal-sent h3 { margin: 0 0 7px; font-size: 19px; color: #14532d; }
.ssubs-portal-sent p { margin: 0 0 7px; font-size: 14px; line-height: 1.55; }
.ssubs-portal-sent-meta { font-size: 12.5px; opacity: .8; margin: 0; }
.ssubs-portal-sent-again { text-align: center; font-size: 13px; margin-top: 13px; }
.ssubs-portal-sent-again a { text-decoration: underline; }
.ssubs-portal-sent-again span { opacity: .4; margin: 0 7px; }

/* The merchant's own theme menu, sitting in the product page nav. Styled to
   match the section links rather than the theme, because this page is a
   standalone shell and inherits none of the theme's own nav CSS. */
.ssubs-landing-nav .ssubs-site-menu {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ssubs-landing-nav .ssubs-site-menu li { margin: 0; padding: 0; }
.ssubs-landing-nav .ssubs-site-menu a {
	font-size: 14px;
	text-decoration: none;
	color: inherit;
	opacity: .8;
}
.ssubs-landing-nav .ssubs-site-menu a:hover,
.ssubs-landing-nav .ssubs-site-menu .current-menu-item > a { opacity: 1; }
@media ( max-width: 782px ) {
	.ssubs-landing-nav .ssubs-site-menu { display: none; }
}


/* ===== v1.37.0 — Customer portal redesign (pv2) ===== */
.ssubs-portal-shell-v2 { max-width: 680px; margin: 0 auto; font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; color: #152228; }
.ssubs-portal-shell-v2 h3, .ssubs-portal-shell-v2 h4, .ssubs-pv2-biz { font-family: Sora, Inter, sans-serif; }

.ssubs-pv2-impersonate { background: #FEF4E6; border: 1px solid #F8CE8C; color: #8A4B08; border-radius: 12px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.ssubs-pv2-impersonate-dot { width: 8px; height: 8px; border-radius: 99px; background: #F79009; flex: none; }

.ssubs-pv2-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ssubs-pv2-biz { font-weight: 700; font-size: 17px; color: #123A44; letter-spacing: -.01em; }
.ssubs-pv2-brand a { font-size: 13.5px; color: #5B6B72; text-decoration: none; }

.ssubs-portal-card.ssubs-portal-v2 { background: transparent; border: 0; padding: 0; margin: 0 0 8px; }
.ssubs-pv2-planhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ssubs-pv2-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5B6B72; font-weight: 600; }
.ssubs-pv2-planhead h3 { font-size: 28px; letter-spacing: -.02em; margin: 4px 0 0; line-height: 1.2; }

.ssubs-pv2-hero { background: #fff; border: 1px solid #E7E5DE; border-radius: 20px; padding: 26px; display: flex; gap: 26px; align-items: center; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(21,34,40,.04); }
.ssubs-pv2-ring { position: relative; width: 130px; height: 130px; flex: none; }
.ssubs-pv2-ring svg { transform: rotate(-90deg); display: block; }
.ssubs-pv2-ring-base { stroke: #EDECE6; stroke-width: 9; fill: none; }
.ssubs-pv2-ring-prog { stroke: #123A44; stroke-width: 9; fill: none; stroke-linecap: round; stroke-dasharray: 339; }
.ssubs-pv2-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ssubs-pv2-ring-mid b { font-family: Sora, Inter, sans-serif; font-size: 32px; line-height: 1; letter-spacing: -.02em; }
.ssubs-pv2-ring-mid span { font-size: 11.5px; color: #5B6B72; margin-top: 3px; text-align: center; padding: 0 8px; }
.ssubs-pv2-facts { flex: 1; min-width: 0; }
.ssubs-pv2-amount { font-family: Sora, Inter, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin-bottom: 4px; }
.ssubs-pv2-amount small { font-size: 14px; color: #5B6B72; font-weight: 500; font-family: Inter, sans-serif; }
.ssubs-pv2-factrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #E7E5DE; font-size: 14px; }
.ssubs-pv2-factrow:last-child { border-bottom: 0; padding-bottom: 0; }
.ssubs-pv2-factrow span { color: #5B6B72; }
.ssubs-pv2-factrow b { font-weight: 600; text-align: right; }

.ssubs-pv2-panel { background: #fff; border: 1px solid #E7E5DE; border-radius: 20px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(21,34,40,.04); }
.ssubs-pv2-panel h4 { font-size: 15px; margin: 0 0 14px; }
.ssubs-pv2-actions { display: flex; flex-direction: column; gap: 4px; }
.ssubs-pv2-actions .ssubs-inline-form { padding: 12px 0; border-bottom: 1px solid #F1EFE9; margin: 0; }
.ssubs-pv2-actions .ssubs-inline-form:last-child { border-bottom: 0; }
.ssubs-pv2-actions .button { border-radius: 12px !important; font-weight: 600; padding: 9px 18px; height: auto; }
.ssubs-pv2-actions .ssubs-primary-action, .ssubs-portal-shell-v2 .ssubs-primary-action { background: #123A44 !important; border-color: #123A44 !important; color: #fff !important; }
.ssubs-pv2-actions .ssubs-danger-action { background: #fff !important; border: 1px solid #E7E5DE !important; color: #D92D20 !important; }
.ssubs-pv2-actions .ssubs-muted { font-size: 13px; color: #5B6B72; margin: 6px 0; }

.ssubs-pv2-hist { width: 100%; border-collapse: collapse; font-size: 14px; }
.ssubs-pv2-hist td { padding: 10px 4px; border-bottom: 1px solid #F1EFE9; }
.ssubs-pv2-hist tr:last-child td { border-bottom: 0; }
.ssubs-pv2-paid { color: #0B7A46; font-weight: 600; font-size: 12.5px; background: #E8F8F0; padding: 3px 10px; border-radius: 99px; }
.ssubs-pv2-amt { text-align: right; font-weight: 600; }

.ssubs-pv2-help { background: #123A44; color: #fff; border-radius: 20px; padding: 24px; display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.ssubs-pv2-help b { font-family: Sora, Inter, sans-serif; font-size: 16px; display: block; margin-bottom: 3px; }
.ssubs-pv2-help p { font-size: 13.5px; opacity: .85; margin: 0; }
.ssubs-pv2-help a { margin-left: auto; background: #fff; color: #123A44; border-radius: 12px; padding: 11px 18px; font-weight: 600; font-size: 14px; text-decoration: none; flex: none; }

@media (max-width: 560px) {
	.ssubs-pv2-hero { flex-direction: column; text-align: center; }
	.ssubs-pv2-facts { width: 100%; }
	.ssubs-pv2-help { flex-direction: column; text-align: center; }
	.ssubs-pv2-help a { margin: 6px 0 0; }
}