/* Layout Utilities for Core Web Vitals (CLS) */
.ratiobox {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

.ratiobox.ratio-16-9 { padding-top: 56.25%; }
.ratiobox.ratio-4-3 { padding-top: 75%; }
.ratiobox.ratio-1-1 { padding-top: 100%; }
.ratiobox.ratio-blog { padding-top: 56.25%; }
.ratiobox.ratio-slider { padding-top: 30%; }
@media (max-width: 767px) {
  .ratiobox.ratio-slider { padding-top: 69%; }
}
.ratiobox.ratio-banner-home { padding-top: 31.27%; }
.ratiobox.ratio-product { padding-top: 100%; }

/* Fix conflict with original image-resize */
.image-resize.ratiobox {
  padding-bottom: 0 !important;
}

.ratiobox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratiobox .ls-blur-up-is-loading,
.ratiobox .lazyload:not([src]) {
  visibility: hidden;
}

/* Fallback if ratio class is missing */
.ratiobox:not([class*="ratio-"]) {
  height: auto;
  padding-top: 0;
}
.ratiobox:not([class*="ratio-"]) img {
  position: static;
  height: auto;
  width: 100%;
  display: block;
}

/* Video Stability */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Global Standardize Haravan Editor Inline YouTube Wrappers */
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 */
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;
}

/* AJAX content placeholder */
.featured-blog-list {
	min-height: 250px;
}
@media (max-width: 767px) {
	.featured-blog-list {
		min-height: 400px;
	}
}

/* --------------------------------------------------------------------------------
   PRODUCT DETAIL PAGE CLS OPTIMIZATIONS
   -------------------------------------------------------------------------------- */

/* Main Product Featured Image & Gallery Aspect Ratio Fix */
.product-image-feature {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Recommendation Widget (#rcm-related-product) Layout Stability before OwlCarousel loads */
#rcm-related-product .list-products-app:not(.owl-loaded) {
  display: flex;
  overflow: hidden;
  min-height: 380px;
  gap: 10px;
}

#rcm-related-product .list-products-app:not(.owl-loaded) .pro-loop {
  flex: 0 0 calc(20% - 8px);
  width: calc(20% - 8px);
}

@media (max-width: 1199px) and (min-width: 768px) {
  #rcm-related-product .list-products-app:not(.owl-loaded) .pro-loop {
    flex: 0 0 calc(25% - 8px);
    width: calc(25% - 8px);
  }
}

@media (max-width: 767px) {
  #rcm-related-product .list-products-app:not(.owl-loaded) .pro-loop {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
  }
}

/* Product Description & Article Inline Images Stability */
.product-tabs img, .product-description img {
  max-width: 100%;
  height: auto;
  content-visibility: auto;
}