/*
Theme Name: Hello Elementor Child
Description: CyberServices child theme for Hello Elementor
Template: hello-elementor
Version: 1.0
*/


/* =========================================================
   GLOBAL SINGLE POST VARIABLES
   ========================================================= */

.cs-single {
	--cs-text: #15171c;
	--cs-text-secondary: #3f4652;
	--cs-muted: #667085;
	--cs-light-muted: #98a2b3;

	--cs-border: #e4e7ec;
	--cs-border-dark: #d0d5dd;

	--cs-bg: #ffffff;
	--cs-bg-soft: #f7f9fc;
	--cs-bg-subtle: #f2f5fa;

	--cs-accent: #1769ff;
	--cs-accent-hover: #0d56d9;

	--cs-code-bg: #0d1117;
	--cs-code-border: #262d38;
	--cs-code-text: #e6edf3;

	width: 100%;

	background: var(--cs-bg);
	color: var(--cs-text);
}


.cs-single *,
.cs-single *::before,
.cs-single *::after {
	box-sizing: border-box;
}


.cs-wide {
	width: min(1120px, calc(100% - 40px));

	margin-right: auto;
	margin-left: auto;
}



/* =========================================================
   HERO
   ========================================================= */

.cs-post-hero {
	padding: 44px 0 46px;

	background:
		radial-gradient(
			circle at 92% 0%,
			rgba(23, 105, 255, 0.08),
			transparent 34%
		),
		linear-gradient(
			180deg,
			#f8faff 0%,
			#f4f7fc 100%
		);

	border-bottom: 1px solid var(--cs-border);
}


.cs-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 8px;

	max-width: 920px;

	margin: 0 0 23px;

	color: var(--cs-muted);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}


.cs-breadcrumbs a {
	color: var(--cs-muted);

	text-decoration: none;

	transition: color 0.15s ease;
}


.cs-breadcrumbs a:hover {
	color: var(--cs-text);
}


.cs-breadcrumb-separator {
	color: #a6aebb;

	font-size: 17px;
	line-height: 1;
}


.cs-post-title {
	max-width: 1000px;

	margin: 0 0 20px;

	color: var(--cs-text);

	font-size: clamp(42px, 5vw, 68px);
	font-weight: 800;
	line-height: 1.04;

	letter-spacing: -0.045em;

	text-wrap: balance;
}


.cs-post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 9px;

	max-width: 900px;

	color: var(--cs-muted);

	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}


.cs-meta-dot {
	color: var(--cs-light-muted);
}


.cs-updated-date {
	color: var(--cs-muted);
}



/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.cs-featured-wrap {
	width: min(1120px, calc(100% - 40px));

	margin: 42px auto 0;
}


.cs-featured-image {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;

	border: 1px solid var(--cs-border);
	border-radius: 16px;

	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.03),
		0 12px 32px rgba(16, 24, 40, 0.07);
}


.cs-featured-caption {
	max-width: 820px;

	margin: 11px auto 0;

	color: var(--cs-muted);

	font-size: 13px;
	line-height: 1.5;

	text-align: center;
}



/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.cs-content {
	width: min(820px, calc(100% - 40px));

	margin: 60px auto 72px;

	color: #25282e;

	font-size: 18px;
	font-weight: 400;
	line-height: 1.78;

	overflow-wrap: anywhere;
}


.cs-content > *:first-child {
	margin-top: 0;
}


.cs-content > *:last-child {
	margin-bottom: 0;
}


.cs-content p {
	margin: 0 0 25px;
}



/* =========================================================
   ARTICLE HEADINGS
   ========================================================= */

.cs-content h2,
.cs-content h3,
.cs-content h4,
.cs-content h5,
.cs-content h6 {
	color: var(--cs-text);

	font-weight: 750;

	letter-spacing: -0.025em;

	scroll-margin-top: 100px;
}


.cs-content h2 {
	margin: 60px 0 20px;

	font-size: clamp(29px, 3.5vw, 38px);
	line-height: 1.2;
}


.cs-content h3 {
	margin: 42px 0 17px;

	font-size: clamp(23px, 2.8vw, 28px);
	line-height: 1.28;
}


.cs-content h4 {
	margin: 34px 0 14px;

	font-size: 21px;
	line-height: 1.35;
}


.cs-content h5 {
	margin: 30px 0 12px;

	font-size: 18px;
	line-height: 1.4;
}



/* =========================================================
   ARTICLE LINKS
   ========================================================= */

.cs-content a {
	color: var(--cs-accent);

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;

	transition: color 0.15s ease;
}


.cs-content a:hover {
	color: var(--cs-accent-hover);

	text-decoration-thickness: 2px;
}



/* =========================================================
   LISTS
   ========================================================= */

.cs-content ul,
.cs-content ol {
	margin: 0 0 27px;

	padding-left: 27px;
}


.cs-content li {
	margin-bottom: 9px;

	padding-left: 3px;
}


.cs-content li:last-child {
	margin-bottom: 0;
}


.cs-content li::marker {
	color: #7d8591;

	font-weight: 600;
}


.cs-content ul ul,
.cs-content ol ol,
.cs-content ul ol,
.cs-content ol ul {
	margin-top: 8px;
	margin-bottom: 8px;
}



/* =========================================================
   BOLD TEXT
   ========================================================= */

.cs-content strong,
.cs-content b {
	color: #1a1d22;

	font-weight: 700;
}



/* =========================================================
   CONTENT IMAGES
   ========================================================= */

.cs-content img {
	max-width: 100%;
	height: auto;

	border-radius: 10px;
}


.cs-content > img {
	display: block;

	margin: 35px auto;
}


.cs-content figure {
	margin: 36px 0;
}


.cs-content figure img {
	display: block;

	max-width: 100%;
	height: auto;

	margin: 0 auto;
}


.cs-content figcaption {
	margin-top: 9px;

	color: var(--cs-muted);

	font-size: 13px;
	line-height: 1.55;

	text-align: center;
}


.cs-content .aligncenter {
	display: block;

	margin-right: auto;
	margin-left: auto;
}


.cs-content .alignwide {
	width: min(980px, calc(100vw - 40px));
	max-width: none;

	margin-right: 50%;
	margin-left: 50%;

	transform: translateX(-50%);
}


.cs-content .alignfull {
	width: 100vw;
	max-width: none;

	margin-right: 50%;
	margin-left: 50%;

	transform: translateX(-50%);
}



/* =========================================================
   INLINE CODE
   ========================================================= */

.cs-content code:not(pre code) {
	padding: 2px 6px;

	background: #eff2f6;
	color: #b42354;

	border: 1px solid #e3e7ed;
	border-radius: 5px;

	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		monospace;

	font-size: 0.88em;
}



/* =========================================================
   CODE BLOCKS
   ========================================================= */

.cs-content pre {
	max-width: 100%;

	margin: 30px 0;

	padding: 20px 22px;

	overflow-x: auto;

	background: var(--cs-code-bg);
	color: var(--cs-code-text);

	border: 1px solid var(--cs-code-border);
	border-radius: 11px;

	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		monospace;

	font-size: 14px;
	line-height: 1.65;

	white-space: pre;

	-webkit-overflow-scrolling: touch;
}


.cs-content pre code {
	padding: 0;

	background: transparent;
	color: inherit;

	border: 0;
	border-radius: 0;

	font-size: inherit;

	white-space: inherit;
}



/* =========================================================
   BLOCKQUOTES
   ========================================================= */

.cs-content blockquote {
	margin: 36px 0;

	padding: 20px 24px;

	background: var(--cs-bg-soft);

	border: 1px solid var(--cs-border);
	border-left: 4px solid var(--cs-accent);
	border-radius: 0 9px 9px 0;

	color: #3d434d;

	font-size: 18px;
	line-height: 1.7;
}


.cs-content blockquote p:last-child {
	margin-bottom: 0;
}



/* =========================================================
   TABLES
   ========================================================= */

.cs-content .wp-block-table {
	margin: 36px 0;

	overflow-x: auto;

	-webkit-overflow-scrolling: touch;
}


.cs-content table {
	width: 100%;

	margin: 36px 0;

	border-collapse: collapse;

	color: #31353c;

	font-size: 15px;
	line-height: 1.55;
}


.cs-content .wp-block-table table {
	margin: 0;
}


.cs-content th,
.cs-content td {
	padding: 12px 14px;

	border: 1px solid var(--cs-border);

	text-align: left;
	vertical-align: top;
}


.cs-content th {
	background: var(--cs-bg-soft);
	color: var(--cs-text);

	font-weight: 700;
}


.cs-content tbody tr:nth-child(even) {
	background: #fbfcfd;
}



/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

.cs-content hr {
	margin: 50px 0;

	border: 0;
	border-top: 1px solid var(--cs-border);
}



/* =========================================================
   WORDPRESS BUTTONS
   ========================================================= */

.cs-content .wp-block-button {
	margin: 28px 0;
}


.cs-content .wp-block-button__link {
	padding: 12px 19px;

	background: var(--cs-accent);
	color: #ffffff;

	border-radius: 8px;

	font-weight: 650;

	text-decoration: none;
}


.cs-content .wp-block-button__link:hover {
	background: var(--cs-accent-hover);
	color: #ffffff;
}



/* =========================================================
   TAGS
   ========================================================= */

.cs-tags {
	display: flex;
	align-items: flex-start;

	gap: 14px;

	width: min(820px, calc(100% - 40px));

	margin: -30px auto 65px;
}


.cs-tags-label {
	padding-top: 7px;

	color: var(--cs-text);

	font-size: 12px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: 0.06em;
}


.cs-tag-list {
	display: flex;
	flex-wrap: wrap;

	gap: 7px;
}


.cs-tag-list a {
	display: inline-flex;
	align-items: center;

	padding: 6px 11px;

	background: #ffffff;
	color: var(--cs-muted);

	border: 1px solid var(--cs-border);
	border-radius: 999px;

	font-size: 13px;
	font-weight: 500;

	text-decoration: none;

	transition:
		border-color 0.15s ease,
		color 0.15s ease,
		background 0.15s ease;
}


.cs-tag-list a:hover {
	background: var(--cs-bg-soft);

	border-color: var(--cs-border-dark);

	color: var(--cs-text);
}



/* =========================================================
   SHARED SECTION EYEBROW
   ========================================================= */

.cs-section-eyebrow {
	display: block;

	margin-bottom: 7px;

	color: var(--cs-accent);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;

	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* =========================================================
   RECOMMENDED PRODUCTS
   ========================================================= */

.cs-products {
	padding: 64px 0 70px;

	background: #ffffff;

	border-top: 1px solid var(--cs-border);
	border-bottom: 1px solid var(--cs-border);
}


.cs-products-heading {
	margin-bottom: 30px;
}


.cs-products-heading h2 {
	margin: 0 0 9px;

	color: var(--cs-text);

	font-size: 31px;
	font-weight: 750;
	line-height: 1.2;

	letter-spacing: -0.03em;
}


.cs-products-heading p {
	max-width: 620px;

	margin: 0;

	color: var(--cs-muted);

	font-size: 15px;
	line-height: 1.65;
}


.cs-products-grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 22px;
}


/* CARD */

.cs-product-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid var(--cs-border);
	border-radius: 14px;

	box-shadow:
		0 2px 4px rgba(16, 24, 40, 0.03),
		0 8px 20px rgba(16, 24, 40, 0.04);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}


.cs-product-card:hover {
	transform: translateY(-3px);

	border-color: #cfd5df;

	box-shadow:
		0 4px 8px rgba(16, 24, 40, 0.05),
		0 16px 30px rgba(16, 24, 40, 0.07);
}


/* IMAGE */

.cs-product-image {
	display: block;

	width: 100%;
	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #121923;
}


.cs-product-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.25s ease;
}


.cs-product-card:hover .cs-product-image img {
	transform: scale(1.025);
}


.cs-product-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background:
		radial-gradient(
			circle at 85% 15%,
			rgba(33, 103, 221, 0.35),
			transparent 45%
		),
		linear-gradient(
			135deg,
			#101720,
			#1a2534
		);

	color: #ffffff;

	font-size: 17px;
	font-weight: 700;
}


/* BODY */

.cs-product-body {
	display: flex;
	flex-direction: column;
	flex: 1;

	padding: 22px;
}


.cs-product-body h3 {
	margin: 0 0 10px;

	color: var(--cs-text);

	font-size: 20px;
	font-weight: 750;
	line-height: 1.3;

	letter-spacing: -0.02em;
}


.cs-product-body h3 a {
	color: inherit;

	text-decoration: none;
}


.cs-product-body h3 a:hover {
	color: var(--cs-accent);
}


.cs-product-description {
	margin: 0 0 22px;

	color: var(--cs-muted);

	font-size: 14px;
	line-height: 1.55;
}


/* FOOTER */

.cs-product-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 16px;

	margin-top: auto;
	padding-top: 18px;

	border-top: 1px solid var(--cs-border);
}


.cs-product-price {
	flex-shrink: 0;

	color: var(--cs-text);

	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
}


.cs-product-price .edd_price {
	color: inherit;
}


/* BUTTON */

.cs-product-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	min-height: 40px;

	padding: 10px 15px;

	background: var(--cs-accent);
	color: #ffffff !important;

	border-radius: 8px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none !important;

	white-space: nowrap;

	transition:
		background 0.15s ease,
		transform 0.15s ease;
}


.cs-product-button:hover {
	background: var(--cs-accent-hover);

	color: #ffffff !important;

	transform: translateY(-1px);
}


/* MOBILE */

@media (max-width: 768px) {

	.cs-products {
		padding: 48px 0 55px;
	}

	.cs-products-heading h2 {
		font-size: 28px;
	}

	.cs-products-grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}

	.cs-product-body {
		padding: 20px;
	}

}


@media (max-width: 420px) {

	.cs-product-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.cs-product-price {
		font-size: 20px;
	}

	.cs-product-button {
		width: 100%;
	}

}

/* =========================================================
   ARTICLE CTA
   ========================================================= */

.cs-article-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 32px;

	width: min(820px, calc(100% - 40px));

	margin: 65px auto;

	padding: 28px 30px;

	background:
		radial-gradient(
			circle at 100% 0,
			rgba(57, 124, 255, 0.22),
			transparent 42%
		),
		#11151c;

	border: 1px solid #242b36;
	border-radius: 15px;

	color: #ffffff;
}


.cs-article-cta-text {
	max-width: 540px;
}


.cs-cta-eyebrow {
	display: block;

	margin-bottom: 8px;

	color: #80aaff;

	font-size: 11px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: 0.08em;
}


.cs-article-cta h2 {
	margin: 0 0 7px;

	color: #ffffff;

	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: -0.02em;
}


.cs-article-cta p {
	margin: 0;

	color: #b9c0cc;

	font-size: 14px;
	line-height: 1.6;
}


.cs-article-cta-button {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	flex-shrink: 0;

	padding: 11px 15px;

	background: #ffffff;
	color: #15171c;

	border-radius: 8px;

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	transition:
		transform 0.15s ease,
		background 0.15s ease;
}


.cs-article-cta-button:hover {
	background: #f1f4f8;
	color: #15171c;

	transform: translateY(-1px);
}



/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.cs-post-navigation {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1fr);

	gap: 50px;

	width: min(820px, calc(100% - 40px));

	margin: 0 auto 80px;

	padding-top: 29px;

	border-top: 1px solid var(--cs-border);
}


.cs-post-nav-item {
	min-width: 0;
}


.cs-post-nav-label {
	display: block;

	margin-bottom: 7px;

	color: var(--cs-muted);

	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;

	text-transform: uppercase;
	letter-spacing: 0.07em;
}


.cs-post-navigation a {
	display: inline-block;

	color: var(--cs-text);

	font-size: 15px;
	font-weight: 650;
	line-height: 1.45;

	text-decoration: none;

	transition: color 0.15s ease;
}


.cs-post-navigation a:hover {
	color: var(--cs-accent);
}


.cs-post-nav-next {
	text-align: right;
}



/* =========================================================
   RELATED ARTICLES
   ========================================================= */

.cs-related {
	padding: 64px 0 80px;

	background: var(--cs-bg-soft);

	border-top: 1px solid var(--cs-border);
}


.cs-related-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 30px;

	margin-bottom: 28px;
}


.cs-related-heading h2 {
	margin: 0;

	color: var(--cs-text);

	font-size: 30px;
	font-weight: 750;
	line-height: 1.2;

	letter-spacing: -0.025em;
}


.cs-related-all {
	display: inline-flex;
	align-items: center;

	gap: 7px;

	color: var(--cs-muted);

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;
}


.cs-related-all:hover {
	color: var(--cs-accent);
}


.cs-related-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 22px;
}


.cs-related-card {
	min-width: 0;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid var(--cs-border);
	border-radius: 13px;

	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.02);

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}


.cs-related-card:hover {
	transform: translateY(-2px);

	border-color: var(--cs-border-dark);

	box-shadow:
		0 3px 7px rgba(16, 24, 40, 0.04),
		0 10px 24px rgba(16, 24, 40, 0.05);
}


.cs-related-image {
	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #e9edf3;
}


.cs-related-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.25s ease;
}


.cs-related-card:hover .cs-related-image img {
	transform: scale(1.025);
}


.cs-related-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			135deg,
			#10151d 0%,
			#1d2939 100%
		);

	color: #ffffff;

	font-size: 16px;
	font-weight: 700;
}


.cs-related-body {
	padding: 20px;
}


.cs-related-date {
	display: block;

	margin-bottom: 8px;

	color: var(--cs-muted);

	font-size: 12px;
	line-height: 1.5;
}


.cs-related-body h3 {
	margin: 0 0 16px;

	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;

	letter-spacing: -0.015em;
}


.cs-related-body h3 a {
	color: var(--cs-text);

	text-decoration: none;
}


.cs-related-body h3 a:hover {
	color: var(--cs-accent);
}


.cs-read-more {
	display: inline-flex;
	align-items: center;

	gap: 6px;

	color: var(--cs-accent);

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;
}


.cs-read-more:hover {
	color: var(--cs-accent-hover);
}



/* =========================================================
   PAGINATED POSTS
   ========================================================= */

.cs-page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 7px;

	margin-top: 40px;
}


.cs-page-links a,
.cs-page-links > span:not(:first-child) {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 34px;
	height: 34px;

	padding: 0 10px;

	border: 1px solid var(--cs-border);
	border-radius: 6px;

	text-decoration: none;
}



/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

	.cs-wide,
	.cs-featured-wrap,
	.cs-content,
	.cs-tags,
	.cs-article-cta,
	.cs-post-navigation {
		width: min(100% - 30px, 820px);
	}


	/* Hero */

	.cs-post-hero {
		padding: 28px 0 31px;
	}


	.cs-breadcrumbs {
		margin-bottom: 17px;

		font-size: 13px;
	}


	.cs-post-title {
		margin-bottom: 15px;

		font-size: clamp(
			35px,
			10.2vw,
			48px
		);

		line-height: 1.04;

		letter-spacing: -0.04em;
	}


	.cs-post-meta {
		gap: 7px;

		font-size: 13px;
	}


	/* Featured image */

	.cs-featured-wrap {
		margin-top: 28px;
	}


	.cs-featured-image {
		border-radius: 11px;
	}


	/* Article */

	.cs-content {
		margin-top: 42px;
		margin-bottom: 60px;

		font-size: 17px;
		line-height: 1.75;
	}


	.cs-content p {
		margin-bottom: 22px;
	}


	.cs-content h2 {
		margin-top: 48px;

		font-size: 29px;
	}


	.cs-content h3 {
		margin-top: 36px;

		font-size: 23px;
	}


	.cs-content pre {
		margin-right: -5px;
		margin-left: -5px;

		padding: 18px;

		border-radius: 8px;

		font-size: 13px;
	}


	.cs-content table {
		font-size: 14px;
	}


	.cs-content th,
	.cs-content td {
		padding: 10px 11px;
	}


	/* Tags */

	.cs-tags {
		flex-direction: column;

		gap: 9px;

		margin-top: -25px;
	}


	.cs-tags-label {
		padding-top: 0;
	}


	/* Products */

	.cs-products {
		padding: 48px 0 52px;
	}


	.cs-products-heading {
		margin-bottom: 23px;
	}


	.cs-products-heading h2 {
		font-size: 28px;
	}


	.cs-products-grid {
		grid-template-columns: 1fr;

		gap: 17px;
	}


	.cs-product-image {
		aspect-ratio: 16 / 9;
	}


	.cs-product-footer {
		align-items: center;
	}


	/* CTA */

	.cs-article-cta {
		flex-direction: column;
		align-items: flex-start;

		gap: 20px;

		margin-top: 48px;
		margin-bottom: 48px;

		padding: 24px;
	}


	.cs-article-cta-button {
		width: 100%;

		justify-content: center;
	}


	/* Previous / Next */

	.cs-post-navigation {
		grid-template-columns: 1fr;

		gap: 25px;
	}


	.cs-post-nav-next {
		text-align: left;
	}


	/* Related */

	.cs-related {
		padding: 50px 0 60px;
	}


	.cs-related-heading {
		align-items: flex-start;

		margin-bottom: 23px;
	}


	.cs-related-heading h2 {
		font-size: 27px;
	}


	.cs-related-all {
		display: none;
	}


	.cs-related-grid {
		grid-template-columns: 1fr;

		gap: 17px;
	}


	.cs-related-body {
		padding: 18px;
	}

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

	.cs-post-title {
		font-size: 34px;
	}


	.cs-content {
		font-size: 16.5px;
	}


	.cs-content h2 {
		font-size: 27px;
	}


	.cs-content h3 {
		font-size: 22px;
	}


	.cs-product-body {
		padding: 18px;
	}


	.cs-product-body h3 {
		font-size: 19px;
	}


	.cs-product-footer {
		gap: 10px;
	}


	.cs-product-price {
		font-size: 18px;
	}


	.cs-product-button,
	.cs-product-action .edd-submit,
	.cs-product-action .edd-submit.button {
		padding: 10px 12px !important;

		font-size: 12px !important;
	}

}

/* =========================================================
   BLOG CATEGORY ARCHIVE
   ========================================================= */

.cs-blog-archive {
	--cs-text: #15171c;
	--cs-text-secondary: #3f4652;
	--cs-muted: #667085;
	--cs-light-muted: #98a2b3;

	--cs-border: #e4e7ec;
	--cs-border-dark: #d0d5dd;

	--cs-bg: #ffffff;
	--cs-bg-soft: #f7f9fc;

	--cs-accent: #1769ff;
	--cs-accent-hover: #0d56d9;

	width: 100%;

	background: #ffffff;
	color: var(--cs-text);
}


.cs-blog-archive *,
.cs-blog-archive *::before,
.cs-blog-archive *::after {
	box-sizing: border-box;
}



/* =========================================================
   BLOG HERO
   ========================================================= */

.cs-blog-hero {
	padding: 55px 0 62px;

	background:
		radial-gradient(
			circle at 90% 0%,
			rgba(23, 105, 255, 0.08),
			transparent 34%
		),
		linear-gradient(
			180deg,
			#f8faff 0%,
			#f4f7fc 100%
		);

	border-bottom: 1px solid var(--cs-border);
}


.cs-blog-hero .cs-breadcrumbs {
	margin-bottom: 28px;
}


.cs-blog-hero h1 {
	max-width: 850px;

	margin: 0 0 18px;

	color: var(--cs-text);

	font-size: clamp(
		42px,
		5.5vw,
		68px
	);

	font-weight: 800;
	line-height: 1.04;

	letter-spacing: -0.045em;

	text-wrap: balance;
}


.cs-blog-hero > .cs-wide > p {
	max-width: 690px;

	margin: 0;

	color: var(--cs-muted);

	font-size: 18px;
	line-height: 1.65;
}



/* =========================================================
   FEATURED ARTICLE
   ========================================================= */

.cs-blog-featured {
	padding: 60px 0 30px;

	background: #ffffff;
}


.cs-blog-featured-card {
	display: grid;

	grid-template-columns:
		minmax(0, 1.15fr)
		minmax(0, 0.85fr);

	min-height: 430px;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid var(--cs-border);
	border-radius: 18px;

	box-shadow:
		0 2px 5px rgba(16, 24, 40, 0.03),
		0 16px 40px rgba(16, 24, 40, 0.06);
}


.cs-blog-featured-image {
	display: block;

	min-height: 430px;

	overflow: hidden;

	background: #111821;
}


.cs-blog-featured-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.3s ease;
}


.cs-blog-featured-card:hover
.cs-blog-featured-image img {
	transform: scale(1.02);
}


.cs-blog-featured-content {
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 45px;
}


.cs-blog-featured-content h2 {
	margin: 17px 0 16px;

	font-size: clamp(
		30px,
		3.2vw,
		42px
	);

	font-weight: 780;
	line-height: 1.12;

	letter-spacing: -0.035em;
}


.cs-blog-featured-content h2 a {
	color: var(--cs-text);

	text-decoration: none;
}


.cs-blog-featured-content h2 a:hover {
	color: var(--cs-accent);
}


.cs-blog-featured-content > p {
	margin: 0 0 26px;

	color: var(--cs-muted);

	font-size: 16px;
	line-height: 1.7;
}


.cs-blog-read-featured {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	align-self: flex-start;

	color: var(--cs-accent);

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;
}


.cs-blog-read-featured:hover {
	color: var(--cs-accent-hover);
}



/* =========================================================
   CARD META
   ========================================================= */

.cs-blog-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 7px;

	color: var(--cs-muted);

	font-size: 12px;
	line-height: 1.5;
}


.cs-blog-category {
	display: inline-flex;
	align-items: center;

	padding: 5px 9px;

	background: #edf4ff;
	color: var(--cs-accent);

	border-radius: 999px;

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;

	text-transform: uppercase;
	letter-spacing: 0.04em;
}


.cs-blog-category:hover {
	background: #e1ecff;
	color: var(--cs-accent-hover);
}



/* =========================================================
   BLOG LIST
   ========================================================= */

.cs-blog-list {
	padding: 55px 0 85px;

	background: #ffffff;
}


.cs-blog-list-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	margin-bottom: 28px;
}


.cs-blog-list-heading h2 {
	margin: 0;

	color: var(--cs-text);

	font-size: 31px;
	font-weight: 750;
	line-height: 1.2;

	letter-spacing: -0.03em;
}



/* =========================================================
   BLOG GRID
   ========================================================= */

.cs-blog-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 24px;
}


.cs-blog-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid var(--cs-border);
	border-radius: 14px;

	box-shadow:
		0 1px 3px rgba(16, 24, 40, 0.03);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}


.cs-blog-card:hover {
	transform: translateY(-3px);

	border-color: var(--cs-border-dark);

	box-shadow:
		0 5px 12px rgba(16, 24, 40, 0.05),
		0 16px 30px rgba(16, 24, 40, 0.06);
}



/* =========================================================
   CARD IMAGE
   ========================================================= */

.cs-blog-card-image {
	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #111821;
}


.cs-blog-card-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.25s ease;
}


.cs-blog-card:hover
.cs-blog-card-image img {
	transform: scale(1.025);
}



/* =========================================================
   EMPTY IMAGE PLACEHOLDER
   ========================================================= */

.cs-blog-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background:
		radial-gradient(
			circle at 80% 20%,
			rgba(23, 105, 255, 0.33),
			transparent 40%
		),
		linear-gradient(
			135deg,
			#101720 0%,
			#1c2939 100%
		);

	color: #ffffff;

	font-size: 18px;
	font-weight: 700;
}



/* =========================================================
   CARD BODY
   ========================================================= */

.cs-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;

	padding: 21px;
}


.cs-blog-card-body h3 {
	margin: 14px 0 10px;

	font-size: 20px;
	font-weight: 730;
	line-height: 1.32;

	letter-spacing: -0.02em;
}


.cs-blog-card-body h3 a {
	color: var(--cs-text);

	text-decoration: none;
}


.cs-blog-card-body h3 a:hover {
	color: var(--cs-accent);
}


.cs-blog-card-body > p {
	margin: 0 0 20px;

	color: var(--cs-muted);

	font-size: 14px;
	line-height: 1.6;
}


.cs-blog-card-read {
	display: inline-flex;
	align-items: center;

	gap: 6px;

	align-self: flex-start;

	margin-top: auto;

	color: var(--cs-accent);

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;
}


.cs-blog-card-read:hover {
	color: var(--cs-accent-hover);
}



/* =========================================================
   PAGINATION
   ========================================================= */

.cs-blog-pagination {
	margin-top: 50px;

	padding-top: 28px;

	border-top: 1px solid var(--cs-border);
}


.cs-blog-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 7px;
}


.cs-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 40px;
	height: 40px;

	padding: 0 12px;

	background: #ffffff;
	color: var(--cs-muted);

	border: 1px solid var(--cs-border);
	border-radius: 8px;

	font-size: 13px;
	font-weight: 600;

	text-decoration: none;
}


.cs-blog-pagination
.page-numbers:hover {
	background: var(--cs-bg-soft);

	color: var(--cs-text);

	border-color: var(--cs-border-dark);
}


.cs-blog-pagination
.page-numbers.current {
	background: var(--cs-accent);
	color: #ffffff;

	border-color: var(--cs-accent);
}



/* =========================================================
   EMPTY BLOG
   ========================================================= */

.cs-blog-empty {
	padding: 100px 0;

	text-align: center;
}


.cs-blog-empty h2 {
	margin: 0 0 10px;

	font-size: 32px;
}


.cs-blog-empty p {
	margin: 0;

	color: var(--cs-muted);
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.cs-blog-featured-card {
		grid-template-columns: 1fr;

		min-height: auto;
	}


	.cs-blog-featured-image {
		min-height: 0;

		aspect-ratio: 16 / 9;
	}


	.cs-blog-featured-content {
		padding: 32px;
	}


	.cs-blog-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

	.cs-blog-hero {
		padding: 32px 0 38px;
	}


	.cs-blog-hero h1 {
		font-size: 38px;

		line-height: 1.04;
	}


	.cs-blog-hero > .cs-wide > p {
		font-size: 16px;
	}


	.cs-blog-featured {
		padding-top: 35px;
	}


	.cs-blog-featured-card {
		border-radius: 13px;
	}


	.cs-blog-featured-content {
		padding: 23px;
	}


	.cs-blog-featured-content h2 {
		font-size: 29px;
	}


	.cs-blog-list {
		padding-top: 42px;
		padding-bottom: 60px;
	}


	.cs-blog-list-heading h2 {
		font-size: 28px;
	}


	.cs-blog-grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}


	.cs-blog-card-body {
		padding: 19px;
	}


	.cs-blog-pagination {
		margin-top: 38px;
	}

}