/* Custom Article Stabilization */
.article-content {
	overflow: hidden;
}

/* 
   Content Image Protector - Standardized wrapper for 1,300+ legacy posts 
   Used by the Image Protector script in article.liquid
*/
.article-content-img-wrapper {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9; /* Standard 16:9 landscape default to minimize CLS shift for the majority of game/product images */
	background-color: #f5f5f5;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 4px;
}

/* Allow images in content to be centered but maintain stability */
.article-content img {
	max-width: 100%;
	height: auto !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Target images within the content to reserve space before Load */
.article-content img:not([width]):not([height]) {
	min-height: 200px;
	background-color: #f9f9f9;
}

/* Responsive YouTube in Articles */
.article-content iframe[src*="youtube.com"],
.article-content iframe[data-yt-src*="youtube.com"],
.article-content .video-wrapper iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	background-color: #000;
}

/* Standardize Haravan Editor Inline YouTube Wrappers */
.article-content span.mce-object-iframe {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	background-color: #000 !important;
	margin-bottom: 20px !important;
	overflow: hidden !important;
	border-radius: 4px !important;
}

/* Force absolute containment of iframe inside the standardized wrapper */
.article-content span.mce-object-iframe iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	z-index: 1 !important;
}

/* Dynamic Image Wrapper Image Styling */
.article-content-img-wrapper img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Carousel Loading-State Stabilizers (Related Posts, New Products, Inline Articles, & Sidebar Slides) */
.list-blogs-related:not(.owl-loaded),
.collection-owl-products:not(.owl-loaded),
.listProduct-related:not(.owl-loaded),
.sidebar-articles-slide:not(.owl-loaded) {
	display: flex !important;
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 20px;
	scrollbar-width: none; /* Hide scrollbar for a clean pre-load state */
}

/* 1. New Products Slider (.collection-owl-products) */
.collection-owl-products:not(.owl-loaded) {
	padding: 0 !important;
	gap: 10px !important;
}
.collection-owl-products:not(.owl-loaded) .pro-loop {
	flex: 0 0 calc(20% - 8px) !important; /* 5 items (100% - 40px) / 5 */
	min-width: unset !important;
}
@media (max-width: 1199px) {
	.collection-owl-products:not(.owl-loaded) .pro-loop {
		flex: 0 0 calc(25% - 7.5px) !important; /* 4 items */
	}
}
@media (max-width: 991px) {
	.collection-owl-products:not(.owl-loaded) .pro-loop {
		flex: 0 0 calc(33.333% - 6.67px) !important; /* 3 items */
	}
}
@media (max-width: 767px) {
	.collection-owl-products:not(.owl-loaded) {
		padding: 0 15px !important; /* Matches mobile stagePadding: 15 */
		gap: 0 !important; /* Matches mobile margin: 0 */
	}
	.collection-owl-products:not(.owl-loaded) .pro-loop {
		flex: 0 0 50% !important; /* Matches mobile items: 2 */
	}
}

/* 2. Related Products Slider (.listProduct-related) */
.listProduct-related:not(.owl-loaded) {
	padding: 0 !important;
	gap: 0 !important;
}
.listProduct-related:not(.owl-loaded) .pro-loop {
	flex: 0 0 25% !important; /* 4 items, margin 0 */
	min-width: unset !important;
}
@media (max-width: 1199px) {
	.listProduct-related:not(.owl-loaded) {
		gap: 10px !important;
	}
	.listProduct-related:not(.owl-loaded) .pro-loop {
		flex: 0 0 calc(33.333% - 6.67px) !important; /* 3 items */
	}
}
@media (max-width: 991px) {
	.listProduct-related:not(.owl-loaded) {
		gap: 10px !important;
	}
	.listProduct-related:not(.owl-loaded) .pro-loop {
		flex: 0 0 calc(50% - 5px) !important; /* 2 items */
	}
}
@media (max-width: 767px) {
	.listProduct-related:not(.owl-loaded) {
		padding: 0 20px !important; /* Matches mobile stagePadding: 20 */
		gap: 3px !important; /* Matches mobile margin: 3 */
	}
	.listProduct-related:not(.owl-loaded) .pro-loop {
		flex: 0 0 calc(50% - 1.5px) !important; /* 2 items */
	}
}

/* 3. Related Posts Slider (.list-blogs-related) */
.list-blogs-related:not(.owl-loaded) {
	padding: 0 !important;
	gap: 20px !important;
}
.list-blogs-related:not(.owl-loaded) .blog-item {
	flex: 0 0 calc(33.333% - 13.33px) !important; /* 3 items */
	min-width: unset !important;
}
@media (max-width: 999px) {
	.list-blogs-related:not(.owl-loaded) {
		gap: 10px !important;
	}
	.list-blogs-related:not(.owl-loaded) .blog-item {
		flex: 0 0 calc(50% - 5px) !important; /* 2 items */
	}
}
@media (max-width: 767px) {
	.list-blogs-related:not(.owl-loaded) {
		gap: 10px !important; /* Matches mobile margin: 10 */
	}
	.list-blogs-related:not(.owl-loaded) .blog-item {
		flex: 0 0 100% !important; /* Matches mobile items: 1 */
	}
}

/* 4. Sidebar Articles Slide (.sidebar-articles-slide) */
.sidebar-articles-slide:not(.owl-loaded) .sidebar-item {
	flex: 0 0 100% !important;
	min-width: 100% !important;
}

/* Article Bottom Banner Stability */
.content-banner.ratiobox-banner {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 17.9167%; /* 215px height / 1200px width aspect ratio */
	overflow: hidden;
	background-color: #f5f5f5;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 4px;
}
.content-banner.ratiobox-banner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}