/**
 * Shared product-template layout based on Cloud Server 2026.
 * Page-specific styles keep control of hero imagery, spacing, colours and product data.
 */

body main[class$="-page"] {
	--cloud-layout-navy: #071832;
	--cloud-layout-text: #22304a;
	--cloud-layout-muted: #667895;
	--cloud-layout-border: #d9e7f5;
	--cloud-layout-surface: #f5f9ff;
	--cloud-layout-primary: #0b398c;
	--cloud-layout-accent: #1791c8;
	color: var(--cloud-layout-text);
}

body main[class$="-page"] > section[class*="-overview"] {
	padding: 80px 0 !important;
	background: var(--cloud-layout-surface) !important;
}

body main[class$="-page"] > section[class*="-overview"] > .site-container[class*="overview"] {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	align-items: center !important;
	gap: 48px !important;
}

body main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] {
	padding: 36px !important;
	border: 1px solid var(--cloud-layout-border) !important;
	border-radius: 30px !important;
	background: #fff !important;
	box-shadow: 0 24px 70px rgba(8, 47, 134, 0.12) !important;
}

body main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] p {
	margin: 0 !important;
	color: var(--cloud-layout-muted) !important;
	font-size: 16px !important;
	line-height: 1.75 !important;
}

body main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] p + p {
	margin-top: 18px !important;
}

body main[class$="-page"] > section[class*="-pricing"] {
	padding: 80px 0 !important;
	background: var(--cloud-layout-surface) !important;
}

body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-shell"] {
	position: relative !important;
	padding: 0 64px !important;
	margin-bottom: 40px !important;
}

body main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"] {
	display: grid !important;
	grid-auto-flow: column !important;
	grid-auto-columns: calc((100% - 72px) / 4) !important;
	gap: 24px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	padding: 8px 4px 30px !important;
	scrollbar-width: none;
}

body main[class$="-page"] > section[class*="-pricing"] [class$="plan-card"],
body main[class$="-page"] > section[class*="-pricing"] [class*="plan-card "],
body main[class$="-page"] > section[class*="-pricing"] [class$="pricing-card"],
body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card "] {
	position: relative !important;
	display: flex !important;
	min-height: 610px !important;
	border: 1px solid var(--cloud-layout-border) !important;
	border-radius: 20px !important;
	background: #fff !important;
	box-shadow: 0 16px 42px rgba(7, 22, 47, 0.08) !important;
	flex-direction: column !important;
	overflow: hidden !important;
	scroll-snap-align: start !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

body main[class$="-page"] > section[class*="-pricing"] [class$="plan-card"]:hover,
body main[class$="-page"] > section[class*="-pricing"] [class*="plan-card "]:hover,
body main[class$="-page"] > section[class*="-pricing"] [class$="pricing-card"]:hover,
body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card "]:hover {
	transform: translateY(-6px) !important;
	border-color: rgba(11, 57, 140, 0.28) !important;
	box-shadow: 0 26px 62px rgba(11, 57, 140, 0.1) !important;
}

body main[class$="-page"] > section[class*="-pricing"] [class*="plan-head"],
body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__head"] {
	padding: 24px 22px 18px !important;
	border-bottom: 1px solid var(--cloud-layout-border) !important;
	background: linear-gradient(135deg, rgba(11, 57, 140, 0.06), rgba(23, 145, 200, 0.06)) !important;
}

body main[class$="-page"] > section[class*="-pricing"] [class*="spec-list"],
body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__specs"] {
	background: #fbfdff !important;
}

body main[class$="-page"] > section[class*="-pricing"] [class*="plan-action"],
body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__btn"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	border-radius: 8px !important;
	background: linear-gradient(135deg, var(--cloud-layout-primary), var(--cloud-layout-accent)) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 950 !important;
	text-transform: uppercase !important;
	box-shadow: 0 12px 24px rgba(11, 57, 140, 0.16) !important;
}

@media (max-width: 1024px) {
	body main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
	body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"] {
		grid-auto-columns: calc((100% - 24px) / 2) !important;
	}
}

@media (max-width: 767px) {
	body main[class$="-page"] > section[class*="-overview"] > .site-container[class*="overview"] {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	body main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] {
		padding: 24px !important;
		border-radius: 20px !important;
	}

	body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-shell"] {
		padding: 0 !important;
	}

	body main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
	body main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"] {
		grid-auto-columns: minmax(280px, 88%) !important;
	}
}