.blog-page .main{padding: 50px 0;}

/* BLOG ARCHIVE */

.blog-filter ul{display: flex; gap: 5px; flex-wrap: wrap;}
.blog-filter ul li a{display: flex; align-items: center; padding: 5px 25px; font-size: 13px; font-weight: 700; border-radius: 50px; border: 1px #ddd solid;}
.blog-filter ul li a:hover{background: rgba(233, 107, 11, 0.05); color: #E96B0B; border-color: rgba(233, 107, 11, 0.5);}
.blog-filter ul li a.active{background: #E96B0B; color: #fff; border-color: rgba(233, 107, 11, 0.5);}

.blog-container{display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 25px; margin: 30px 0;}

.blog-container .blog-post{ position: relative; display: flex; flex-direction: column; overflow: hidden;}
.blog-container .blog-post h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; font-size: 20px; overflow: hidden;}
.blog-container .blog-post .new-banner {position: absolute; right: 0; background: var(--orange); z-index: 3; color: var(--white); display: block;  padding: 4px 9px; font-family: "Saira", sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 2px; border-radius: 50px;}
	
.blog-container .blog-post .blog-tags{display: flex; flex-wrap: wrap; gap: 0 12px; margin: 15px 0 5px;}
.blog-container .blog-post .blog-tags strong{display: block; background: #E96B0B; padding: 4px 9px; font-family: "Saira", sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 2px; color: #fff; border-radius: 50px;}

.blog-container .blog-post .blog-date{font-size: 14px;}

.blog-container .blog-post .blog-img{display: flex; align-items: center; justify-content: center; position: relative; background: #000; width: 100%; height: 203px; border-radius: 10px; overflow: hidden;}
.blog-container .blog-post .blog-img:before{content: ""; position: absolute; inset: 0; background-image: var(--bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(15px); transform: scale(1.1); transition: all .2s ease-in-out; z-index: 0;}
.blog-container .blog-post .blog-img img{position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; transition: all .2s ease-in-out; z-index: 1;}
.blog-container .blog-post .blog-img i{display: flex; align-items: center; justify-content: center; position: absolute; background: rgba(0, 0, 0, 0.75); width: 35px; height: 35px; font-family: "Font Awesome 6 Free"; font-size: 12px; font-weight: 900; content: "\f067"; color: #fff; border-radius: 50px; opacity: 0; transition: all .2s ease-in-out; z-index: 999;}

.blog-container .blog-post:hover .blog-img:before{opacity: .25;}
.blog-container .blog-post:hover .blog-img > img{opacity: .75;}
.blog-container .blog-post:hover .blog-img > i{opacity: 1;}

/* BLOG ARTICLE */

.blog-detail-page p{margin: 15px 0;}

.blog-detail-page .product-add .product-details p{margin: 0;}

.blog-detail-page .banner{position: relative; overflow: hidden;}
.blog-detail-page .banner .tag{display: inline-flex; background: #E96B0B; padding: 4px 9px; font-family: "Saira", sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 2px; color: #fff; border-radius: 50px;}
.blog-detail-page .banner:before{content: ""; position: absolute; inset: 0; background: rgba(17, 17, 17, 0.65); z-index: 1;}
.blog-detail-page .banner > * {position: relative; z-index: 2;}
.blog-detail-page .banner .wrap{max-width: 900px;}

.blog-detail-page .main{padding: 50px 0;}
.blog-detail-page .main .wrap{max-width: 900px;}
.blog-detail-page .main .flex-row{gap: 15px; margin: 15px 0;}
.blog-detail-page .product-gallery{margin: 15px 0;}

.sources{background: #f8f8f8; margin-top: 40px; padding: 24px; border: 1px solid #ddd; border-radius: 12px;}
.sources p{position: relative; font-size: 12px; margin: 0 !important; padding-left: 20px;}
.sources p::before{content:"•"; position:absolute; left:0; top:0; color:#666; }
.sources a{margin-left: 6px; font-weight: 600; text-decoration: none; color: var(--orange);}
.sources a:hover{text-decoration: underline; color: var(--dk-orange);}
.sources a::after{content:"↗"; margin-left: 4px; font-size: .8em; }

.blog-pagination{display: flex; align-items: center; justify-content: space-between; background: #f5f5f5; margin-top: 25px; padding: 15px 20px; font-size: 12px;}
.blog-pagination a{display: flex; align-items: center; gap: 6px; font-weight: 500; line-height: 1;}
.blog-pagination a:hover{color: #E96B0B;}
.blog-pagination a.disabled{opacity: .25; pointer-events: none;}

/* RESPONSIVE */

@media screen and (max-width: 1400px){
	.blog-container{grid-template-columns: repeat(3, 1fr); gap: 30px 20px;}
}
@media screen and (max-width: 1150px){
	.blog-page .main, .blog-detail-page .main{padding: 35px 0;}

	.blog-container{grid-template-columns: repeat(2, 1fr);}
	.blog-container .blog-post .blog-img{height: 150px;}
}
@media screen and (max-width: 480px){
	.blog-filter ul li a{padding: 5px 20px;}
	.blog-container{grid-template-columns: repeat(1, 1fr);}
}