/* General styles */
.blog {
	margin-bottom: 40px;
}

.blog .owl-carousel {
	box-shadow: none;
}

.blog img,
.blog-module img {
	max-width: 100%;
	height: auto;
}

.blog .main_description {
	margin-bottom: 20px;
}

/* Blog listings */
.blog_grid_holder {
	margin-left: -15px;
	margin-right: -15px;
	padding-top: 13px;
	font-size: 0;
}

.blog_grid_holder.carousel-1 {
	margin-left: -17px;
	margin-right: -17px;
	padding-top: 10px;
	width: inherit;
}

#column-left .blog_grid_holder,
#column-right .blog_grid_holder {
	padding-top: 5px;
}

.blog_grid_holder.related {
	padding-top: 0px;
}

.blog_item {
	font-size: 12px;
	padding: 0px 15px;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
	width: 100%;
	/* 1 column grid is default */
}

.column-2 .blog_item {
	width: 50%;
	/* 2 columns */
}

.column-3 .blog_item {
	width: 33.33%;
	/* 3 columns */
}

.column-4 .blog_item {
	width: 25%;
	/* 3 columns */
}

.carousel-1 .blog_item {
	width: 100% !important;
	/* carousel */
	margin-bottom: 0px;
}

#column-left .blog_item,
#column-right .blog_item {
	width: 100%;
	/* carousel */
	margin-bottom: 17px;
}

.blog_item .image {
	margin-bottom: 23px;
	margin-top: 5px;
}

.column-2 .blog_item .image,
.column-3 .blog_item .image,
.column-4 .blog_item .image,
#column-left .blog_item .image,
#column-right .blog_item .image {
	margin-bottom: 17px;
}

.blog_item .image img {
	transition: all 400ms;
}

.blog_item .image img:hover {
	opacity: 0.8;
	transition: all 400ms;
}

.blog_item .summary .blog_title {
	margin: 0 0 10px;
	font-size: 26px;
}

#column-left .blog_item .summary .blog_title,
#column-right .blog_item .summary .blog_title {
	font-size: 16px;
	margin: 0 0 7px;
}

.column-2 .summary .blog_title,
.column-3 .summary .blog_title {
	font-size: 24px;
	margin: 0 0 7px;
}

.column-4 .summary .blog_title {
	font-size: 20px;
}

.blog_item .summary p {
	font-size: 14px;
	line-height: 21px;
}

#column-left .blog_item .summary p,
#column-right .blog_item .summary p {
	font-size: 13px;
	line-height: 20px;
}

.blog_item .summary p .fa {
	color: #cccccc;
}

/* ============================================================
   BLOG LISTING — Figma 1240:26894 (hero card) / 1240:27081 (grid card)
   Cards share 1px #E3E3E3 dividers (no gap between cards). 40px inner
   padding. Hero is 2-col × 2-row span; sidebar holds two stacked small
   cards. Standard grid is 3 cols.
   ============================================================ */

/* Drop the Bootstrap col/row padding/negative-margin pair on the blog
   page — `.container` already provides the 15px side padding, the col
   layer just duplicates the visual offset. Without this the grid edges
   sit 30px inside the container instead of flush. */
#blog-home>.row {
	margin-left: 0;
	margin-right: 0;
}

#blog-home>.row>#content {
	padding-left: 0;
	padding-right: 0;
}

/* Breadcrumb on blog page — match the rest of the site (Fixel Display
   12 reg, left-aligned, "/" separator). Targets both `.breadcrumb` and
   `.breadcrumb-blog` so it survives template swaps. */
#blog-home > .breadcrumb,
#blog-home > .breadcrumb-blog {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 16px 0 24px;
	padding: 0;
	background: transparent;
	border: 0;
	list-style: none;
	font-family: 'Fixel Display', sans-serif;
	font-size: 12px;
	line-height: 1.2;
	color: #B7B7B7;
	text-align: left;
	text-transform: none;
}

#blog-home > .breadcrumb > li,
#blog-home > .breadcrumb-blog > li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: inherit;
	line-height: inherit;
}

#blog-home > .breadcrumb > li + li::before,
#blog-home > .breadcrumb-blog > li + li::before {
	content: '/';
	color: inherit;
	padding: 0;
	font-family: inherit;
	line-height: inherit;
}

#blog-home > .breadcrumb a,
#blog-home > .breadcrumb-blog a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
	line-height: inherit;
}

#blog-home > .breadcrumb a:hover,
#blog-home > .breadcrumb-blog a:hover {
	color: #141414;
}

#blog-home > .breadcrumb > li:last-child span,
#blog-home > .breadcrumb-blog > li:last-child span {
	color: #141414;
	line-height: inherit;
}

.blog-redesign {
	margin-bottom: 40px;
}

.blog.blog-redesign h1,
.blog-redesign h1 {
	margin: 0 0 24px;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #141414;
}

.blog-redesign__blocks {
	display: flex;
	flex-direction: column;
}

.blog-redesign__featured,
.blog-redesign__grid {
	display: grid;
	gap: 0;
	border-top: 1px solid #E3E3E3;
	border-left: 1px solid #E3E3E3;
}

.blog-redesign__featured {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.blog-redesign__grid {
	grid-template-columns: repeat(3, 1fr);
}

.blog-redesign__item {
	display: flex;
	flex-direction: column;
  gap: 12px;
	padding: 40px;
	background: #FFFFFF;
	border-right: 1px solid #E3E3E3;
	border-bottom: 1px solid #E3E3E3;
	box-sizing: border-box;
	min-width: 0;
}

.blog-redesign__item--hero {
	grid-row: span 2;
}

.blog-redesign__image-link {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	aspect-ratio: 400 / 324;
	overflow: hidden;
	background: #F4F4F4;
	margin: 0 !important;
}

.blog-redesign__item--hero .blog-redesign__image-link {
	aspect-ratio: 880 / 742;
}

.blog-redesign__image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	transition: transform 0.4s ease;
	max-width: none !important;
}

.blog-redesign__image-link:hover .blog-redesign__image {
	transform: scale(1.03);
	opacity: 1;
}

.blog-redesign__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	flex: 1;
}

.blog-redesign__date {
	font-family: 'Fixel Display', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.2;
	color: #A1A1A1;
}

.blog-redesign__title {
	margin: 0;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #141414;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-redesign__item--hero .blog-redesign__title {
	font-size: 22px;
}

.blog-redesign__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.blog-redesign__title a:hover {
	color: #5E5E5E;
}

.blog-redesign__description {
	margin: 0;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: #757575;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-redesign__description p {
	margin: 0;
	font: inherit;
	line-height: inherit;
}

/* "ДЕТАЛЬНІШЕ" — Figma: 12px Fixel Text Regular UPPER, border-bottom 1px
   #141414, padding 3px 0 (replaces the inline text-decoration underline). */
.blog-redesign__more {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000000;
	text-decoration: none;
	border-bottom: 1px solid #141414;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-redesign__more:hover,
.blog-redesign__more:focus {
	color: #5E5E5E;
	border-bottom-color: #5E5E5E;
	text-decoration: none;
}

.blog-redesign__subscribe.footer__subscribe {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 40px 0;
	border: none;
	text-align: center;
}

.blog-redesign__subscribe .footer__title--mail {
	margin: 0 0 8px;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #141414;
	text-align: center;
}

.blog-redesign__subscribe .footer__description {
	margin: 0 0 16px;
	font-family: 'Fixel Display', sans-serif;
	font-size: 12px;
	line-height: 1.2;
	color: #141414;
	text-align: center;
}

.blog-redesign .pro_pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 0;
}

.blog-redesign .pro_pagination__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.blog-redesign .pro_pagination__load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #141414;
	border-radius: 0;
	color: #000000;
	font-family: 'Fixel Text', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.blog-redesign .pro_pagination__load-more:hover,
.blog-redesign .pro_pagination__load-more:focus {
	color: #5E5E5E;
	border-bottom-color: #5E5E5E;
	outline: none;
}

.blog-redesign .pro_pagination__load-more:disabled,
.blog-redesign .pro_pagination__load-more.is-loading {
	color: #A1A1A1;
	border-bottom-color: #A1A1A1;
	cursor: wait;
}

.blog-redesign .pro_pagination__status {
	margin: 0;
	padding: 0;
	font-family: 'Fixel Display', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 120%;
	color: #A1A1A1;
	text-align: center;
	text-transform: none;
}

.blog-redesign .pro_pagination__pages {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.blog-redesign .pro_pagination .pagination {
	display: flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-redesign .pro_pagination .pagination>li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-redesign .pro_pagination .pagination>li>a,
.blog-redesign .pro_pagination .pagination>li>span {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #A1A1A1;
	font-family: 'Fixel Text', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease;
}

.blog-redesign .pro_pagination .pagination>li.active>span,
.blog-redesign .pro_pagination .pagination>li.active>a {
	background: transparent;
	border: 0;
	color: #141414;
	cursor: default;
}

.blog-redesign .pro_pagination .pagination>li>a:hover,
.blog-redesign .pro_pagination .pagination>li>a:focus {
	background: transparent;
	border: 0;
	color: #141414;
}

.blog-redesign .pro_pagination .pagination>li.pro_pagination__ellipsis>span {
	color: #A1A1A1;
	cursor: default;
}

.blog-redesign .pro_pagination .pagination>li>a.pro_pagination__arrow {
	box-sizing: border-box;
	padding: 12px 10px;
	color: #141414;
}

.blog-redesign .pro_pagination .pagination>li>a.pro_pagination__arrow svg {
	display: block;
	width: 6px;
	height: 11px;
}

.blog-redesign .pro_pagination .pagination>li>a.pro_pagination__arrow:hover {
	color: #5E5E5E;
}

/* ===== Tablet (2-col, hero collapses to full width) ===== */
@media (max-width: 991px) {
	.blog-redesign h1 {
		font-size: 22px;
		margin-bottom: 16px;
	}

	.blog-redesign__featured {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}

	.blog-redesign__item--hero {
		grid-column: span 2;
		grid-row: auto;
	}

	.blog-redesign__item--hero .blog-redesign__image-link {
		aspect-ratio: 448 / 324;
	}

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

	.blog-redesign__item {
		padding: 24px 0 0;
	}

	.blog-redesign__summary {
		padding: 14px 24px 24px;
	}

	.blog-redesign__item--hero .blog-redesign__title {
		font-size: 18px;
	}
}

/* ===== Mobile (single-column stack — Figma 1240:27081 vibe) ===== */
@media (max-width: 575px) {
	.blog-redesign h1 {
		font-size: 20px;
		margin-bottom: 12px;
	}

	.blog-redesign__featured,
	.blog-redesign__grid {
		grid-template-columns: 1fr;
		border-left: none;
		border-right: none;
	}

	.blog-redesign__item,
	.blog-redesign__item--hero {
		grid-column: auto;
		grid-row: auto;
		padding: 16px 0 0;
		border-right: none;
	}

	.blog-redesign__summary {
		padding: 12px 16px 16px;
	}

	.blog-redesign__image-link,
	.blog-redesign__item--hero .blog-redesign__image-link {
		aspect-ratio: 358 / 324;
	}

	.blog-redesign__title,
	.blog-redesign__item--hero .blog-redesign__title {
		font-size: 16px;
		-webkit-line-clamp: 1;
	}

	.blog-redesign__description {
		font-size: 12px;
		-webkit-line-clamp: 2;
	}

	.blog-redesign__subscribe.footer__subscribe {
		max-width: 100%;
		padding: 24px 16px;
	}

	.blog-redesign__subscribe .footer__mail {
		max-width: 100%;
	}

	.blog-redesign .pro_pagination {
		gap: 24px;
		padding: 40px 0 48px;
	}

	.blog-redesign .pro_pagination__pages {
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.blog-redesign .pro_pagination__pages::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.blog-redesign .pro_pagination .pagination {
		flex-shrink: 0;
		margin: 0 auto;
	}
}

/* Blog Post */
.blog_post .main_thumb {
	padding: 20px 0 7px;
	transition: all 400ms ease 0s;
}
/* 
.blog_post .main_thumb:hover {
	opacity: 0.8;
	transition: all 400ms ease 0s;
} */

.blog_post h1 {
	margin-bottom: 17px;
	font-size: 36px;
}

.blog_post label {
	font-size: 14px;
}

.blog_post .main_description p {
	margin-bottom: 18px;
}

.blog_stats {
	font-size: 13px;
	text-transform: none;
	color: #999999;
	margin: 0 0 15px;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 5px;
}

.column-2 .blog_stats,
.column-3 .blog_stats,
.column-4 .blog_stats,
.blog_post .related .blog_stats {
	font-size: 12px;
	margin: 0 0 12px;
	padding-bottom: 1px;
}

#column-left .blog_stats,
#column-right .blog_stats {
	font-size: 11px;
	margin-bottom: -4px;
	border-bottom: none;
	padding-bottom: 0;
}

.blog_stats span {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 8px;
	line-height: 12px;
}

.blog_stats span+span {
	padding-left: 7px;
	border-left: 1px solid #eeeeee;
}

.blog_stats .fa {
	color: #bbbbbb;
	margin-right: 5px;
}

.blog_stats .text {
	font-weight: inherit;
}

#column-left .blog_stats .text,
#column-right .blog_stats .text,
.column-2 .blog_stats .text,
.column-3 .blog_stats .text,
.column-4 .blog_stats .text {
	font-size: 0;
}

.blog_stats .hl {
	color: #777777;
}

#column-left .blog_stats .hl,
#column-right .blog_stats .hl,
.column-2 .blog_stats .hl,
.column-3 .blog_stats .hl,
.column-4 .blog_stats .hl {
	font-weight: inherit;
}

.blog_post .blog_stats {
	margin: 0 0 22px;
}

.blog_post .tags {
	display: block;
	padding-top: 5px;
	margin-bottom: 25px;
	font-size: 13px;
	color: #aaaaaa;
}

.blog_post .tags a {
	font-size: 14px;
	margin-left: 2px;
}

.blog_post h3 {
	margin: 20px 0 18px;
	padding-bottom: 6px;
	display: block;
	border-bottom: 1px solid #eeeeee;
}

.blog_post h3 i {
	vertical-align: middle;
	margin-right: 7px;
}

.blog_post .share {
	margin-bottom: 40px;
}

.blog_post .share .fa {
	font-size: 19px;
	padding: 0 10px;
	margin: 0 5px 10px 0;
	color: #f5f5f5;
	height: 36px;
	line-height: 36px;
	width: 120px;
	transition: all 300ms;
}

.blog_post .share .fa:hover {
	opacity: 0.9;
	transition: all 300ms;
}

.blog_post .share .fa:after {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	vertical-align: top;
	margin-left: 10px;
}

.blog_post .share .fa-facebook {
	background: #3b5998;
}

.blog_post .share .fa-facebook:after {
	content: "Facebook"
}

.blog_post .share .fa-twitter {
	background: #00aced;
}

.blog_post .share .fa-twitter:after {
	content: "Twitter"
}

.blog_post .share .fa-google-plus {
	background: #dd4b39;
}

.blog_post .share .fa-google-plus:after {
	content: "Google+"
}

.blog_post .share .fa-navicon {
	background: #f1f1f1;
	color: #888888;
	text-align: center;
	font-size: 17px;
}

.blog_post .at15t_compact,
.at16nc.at16t_compact {
	background-position: -9999px -9999px !important;
}

/* Related blogs */
.blog_post .related .blog_item {
	margin-bottom: 15px;
}

.blog_post .related .blog_title {
	font-size: 18px;
}

.blog_post .related p {
	font-size: 14px;
	line-height: 20px;
}

.blog_post .related p a {
	color: #999999;
}

.blog_post .related p .fa {
	color: #cccccc;
}

/* Comments */
.blog_post #comment {
	margin-bottom: 55px;
}

.blog_post .blog_comment {
	display: block;
	font-size: 14px;
	margin-bottom: 25px;
}

/* Modules */
.blog-module {
	margin-bottom: 40px;
}

.blog-module.latest {
	margin-bottom: 20px;
}

.blog-module h3 {
	margin: 15px 0 10px 0;
	padding-bottom: 6px;
	border-bottom: 1px solid #f5f5f5;
}

.blog-module h3 a.all {
	float: right;
	font-size: 13px;
	line-height: 24px;
}

.blog-module h3 a.all .fa {
	color: #cccccc;
}

#column-left .blog-module h3 a.all,
#column-right .blog-module h3 a.all {
	display: none;
}

/* Category Module */
.blog-category>ul>li {
	position: relative;
	border-bottom: 1px solid #f5f5f5;
}

.blog-category ul>li>ul {
	display: none;
	padding-left: 0;
}

.blog-category>ul>li.active>ul {
	display: block;
}

.blog-category>ul>li>a {
	display: block;
	line-height: 34px;
	font-size: 14px;
}

.blog-category .sign {
	position: absolute;
	right: 0px;
	top: 0px;
	line-height: 34px;
	width: 30px;
	text-align: center;
	cursor: pointer;
	color: #cccccc;
}

.blog-category li .sign .fa-minus,
.blog-category li.open .sign .fa-plus {
	font-size: 0;
}

.blog-category .sign .fa,
.blog-category li.open .sign .fa-minus,
.blog-category li.open ul li.open .sign .fa-minus,
.blog-category li.open ul li .sign .fa-plus {
	font-size: 11px;
}

.blog-category>ul>li ul>li {
	border-top: 1px solid #f5f5f5;
	list-style: none;
}

.blog-category>ul>li ul>li {
	border-top: 1px solid #f5f5f5;
	list-style: none;
}

.blog-category>ul>li ul>li a {
	line-height: 34px;
	font-size: 13px;
}

.blog-category>ul>li ul>li a .fa {
	color: #cccccc;
	font-size: 10px;
	margin: 0 6px;
}

.captcha_wrap img {
	max-width: none;
}

.blog_grid_holder.blog_products {
	padding-top: 5px;
}

.blog_product {
	font-size: 14px;
}

.blog_product .image {
	margin-top: 0;
}

.blog_product .name {
	display: inline-block;
	margin-bottom: 5px;
}

.blog_product .price-old {
	text-decoration: line-through;
}

.blog_product .price-tax {
	font-size: 11px;
	display: block;
	color: #aaaaaa;
}

@media screen and (max-width:767px) {

	.column-3 .blog_item,
	.column-4 .blog_item {
		width: 50%;
	}

	.blog_stats .text {
		font-size: 0
	}
}

@media screen and (max-width:567px) {

	.column-2 .blog_item,
	.column-3 .blog_item,
	.column-4 .blog_item {
		width: 100%;
	}
}

.breadcrumb-blog {
	position: relative;
	padding: 30px 0 34px;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	row-gap: 8px;
	column-gap: 8px;
	font-family: 'Fixel Display', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0, 5px;
	color: #B7B7B7;
	align-items: anchor-center;
}

.breadcrumb-blog>li {
	position: relative;
}

.breadcrumb-blog>li .fa-home {
	font-size: 15px;
}

.breadcrumb-blog li a,
.breadcrumb-blog a {
	color: var(--secondary-light-color);
}

.breadcrumb-blog li:last-child a,
.breadcrumb-blog a:hover {
	color: var(--primary-color);
}

.breadcrumb-blog>li+li:before {
	content: '/';
	font-family: FontAwesome;
	color: var(--primary-color);
	padding: 0px 8px 0px 5px;
	font-size: 16px;
	line-height: 19px;
}

@media (max-width: 991px) {
	.breadcrumb-blog {
		font-size: 14px;
	}
}

/* ============================================================
   BLOG ARTICLE PAGE — Figma 1240:27335 (desktop) / 1262:28548 (mobile)
   Narrow content column, centered uppercase title, optional orange
   view-count badge on the left, embedded inline images, tags at bottom.
   ============================================================ */

.blog.blog_post {
	max-width: 712px;
	margin: 0 auto;
	padding: 0 0 32px;
	position: relative;
}

/* Top hero image inside .main_thumb — Figma keeps the lead image inline
   inside the content area, not as a standalone full-width hero. */
.blog.blog_post .main_thumb {
	margin: 0 0 32px;
	padding: 0;
}

.blog.blog_post .main_thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* Orange view-count badge — Figma places it to the left of the title
   (visible only when post_page_view_status is enabled in blog admin). */
.blog.blog_post .blog_stats {
	display: flex;
	justify-content: flex-start;
	border: 0;
	margin: 0 0 24px;
	padding: 0;
	min-height: 0;
}

.blog.blog_post .blog_stats:empty {
	display: none;
}

.blog.blog_post .blog_stats span {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 10px;
	background: #FF5A1F;
	color: #FFFFFF;
	border: 0;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
}

.blog.blog_post .blog_stats span + span {
	margin-left: 8px;
	padding-left: 10px;
	border-left: 0;
}

.blog.blog_post .blog_stats .fa,
.blog.blog_post .blog_stats .text {
	display: none;
}

.blog.blog_post .blog_stats .hl {
	color: inherit;
	font-weight: inherit;
	background: transparent;
	padding: 0;
}

/* Title — centered, Fixel Text Medium uppercase, ~22px desktop */
.blog.blog_post h1 {
	margin: 0 0 16px !important;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 500;
	font-size: 22px !important;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #141414;
	text-align: center;
}

/* Short divider after title (Figma shows a thin black mark) */
.blog.blog_post h1::after {
	content: '';
	display: block;
	width: 95px;
	height: 1px;
	background: #141414;
	margin: 48px auto 0;
}

/* Body content */
.blog.blog_post .main_description {
	margin: 0;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px !important;
	color: #141414;
}

/* CKEditor / Google-Docs pasted content has inline `style="line-height:1.2"`
   on every <p>/<span>. !important + 24px overrides those inline rules so
   the article reads with consistent breathing room. */
.blog.blog_post .main_description p,
.blog.blog_post .main_description span,
.blog.blog_post .main_description li {
	line-height: 24px !important;
	font: inherit;
	color: inherit;
}
@media (max-width: 768px) {
  .blog.blog_post .main_description p,
  .blog.blog_post .main_description span,
  .blog.blog_post .main_description li {
    line-height: 22px !important;
  }
}

.blog.blog_post .main_description p {
	margin: 0 0 18px;
}

.blog.blog_post .main_description p:last-child {
	margin-bottom: 0;
}

.blog.blog_post .main_description b,
.blog.blog_post .main_description strong {
	font-weight: 500;
	color: #141414;
}

.blog.blog_post .main_description a {
	color: #141414;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blog.blog_post .main_description a:hover {
	color: #5E5E5E;
}

/* Inline images centered & full-width inside content column */
.blog.blog_post .main_description img {
	display: block;
	width: 100%;
	height: auto;
	margin: 32px 0;
}

/* Section headings inside content */
.blog.blog_post .main_description h2,
.blog.blog_post .main_description h3 {
	margin: 32px 0 12px;
	font-family: 'Fixel Text', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #141414;
}

/* Lists */
.blog.blog_post .main_description ul,
.blog.blog_post .main_description ol {
	margin: 0 0 18px;
	padding-left: 20px;
	color: inherit;
}

.blog.blog_post .main_description li {
	margin: 0 0 4px;
	font: inherit;
	color: inherit;
}

.blog.blog_post .main_description li p {
	margin: 0;
}

/* Tags row at the very bottom — Figma 1248:27728 typography.
   Breaks out of `.blog_post`'s 712px column via position:relative + left:50%
   so the tags row matches Bootstrap's `.container` content width per
   breakpoint (720 / 940 / 1140) — same width as the rest of the site. */
.blog.blog_post .tags {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100vw - 30px);
	margin: 70px 0 0;
	padding: 0;
	font-family: 'Fixel Display', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: #A1A1A1;
	text-align: left;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.blog.blog_post .tags { width: 720px; }
}

@media (min-width: 992px) {
	.blog.blog_post .tags { width: 940px; }
}

@media (min-width: 1200px) {
	.blog.blog_post .tags { width: 1140px; }
}

/* Site override: at 1240+ `.container` widens to 1440px
   (stylesheet.css:6867). Match it so tags align with container edges. */
@media (min-width: 1240px) {
	.blog.blog_post .tags { width: 1410px; }
}

.blog.blog_post .tags .tags__label {
	color: #141414;
	margin-right: 4px;
}

.blog.blog_post .tags a {
	margin-left: 4px;
	color: #A1A1A1;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.blog.blog_post .tags a:hover {
	color: #141414;
}

/* Mobile (Figma 1262:28548) */
@media (max-width: 767px) {
	.blog.blog_post {
		padding: 0 0 16px;
		max-width: 100%;
	}
	.blog.blog_post h1 {
		font-size: 18px !important;
		text-align: left;
	}
	.blog.blog_post h1::after {
		margin-left: 0;
	}
	.blog.blog_post .blog_stats {
		margin-bottom: 16px;
	}
	.blog.blog_post .main_description {
		font-size: 14px;
		line-height: 24px !important;
	}
	.blog.blog_post .main_description img {
		margin: 24px 0;
	}
	.blog.blog_post .tags {
		margin-top: 48px;
	}
}