/**
 * 媒体区骨架屏：渐变流动动画（--gradient / --shimmer 均为同款渐变，周期 1s）
 * 配合 skeleton-media.js：MIN_MS=1000，资源就绪后至少展示满 1s 再加 .mhs-skeleton-wrap--loaded
 */

.mhs-skeleton-wrap {
  position: relative;
  overflow: hidden;
  background-color: #e8eaed;
  --mhs-sk-base: #e8eaed;
  --mhs-sk-mid: #f2f3f5;
}

.mhs-skeleton-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  will-change: opacity, transform, background-position;
}

.mhs-skeleton-wrap.mhs-skeleton-wrap--loaded::after {
  opacity: 0;
  animation: none !important;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* 渐变：背景位置往复移动 */
.mhs-skeleton-wrap--gradient::after {
  background: linear-gradient(
    110deg,
    var(--mhs-sk-base) 0%,
    var(--mhs-sk-mid) 35%,
    #fafbfc 50%,
    var(--mhs-sk-mid) 65%,
    var(--mhs-sk-base) 100%
  );
  background-size: 220% 100%;
  animation: mhs-sk-gradient-move 1s ease-in-out infinite;
}

/* --shimmer：与 gradient 相同，保留类名以兼容模板 */
.mhs-skeleton-wrap--shimmer::after {
  background: linear-gradient(
    110deg,
    var(--mhs-sk-base) 0%,
    var(--mhs-sk-mid) 35%,
    #fafbfc 50%,
    var(--mhs-sk-mid) 65%,
    var(--mhs-sk-base) 100%
  );
  background-size: 220% 100%;
  animation: mhs-sk-gradient-move 1s ease-in-out infinite;
}

@keyframes mhs-sk-gradient-move {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mhs-skeleton-wrap--gradient::after,
  .mhs-skeleton-wrap--shimmer::after {
    animation: none !important;
    background: var(--mhs-sk-base);
  }
}

/* —— 首页轮播 —— */
.va-main-banner .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
}
.va-main-banner .mhs-skeleton-wrap > a,
.va-main-banner .mhs-skeleton-wrap > .va-main-banner-slide-nolink {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}
.va-main-banner .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  display: block;
}

/* —— 首页热门产品（异步插入） —— */
.va-main-pro-list .va-main-pro-itemt .mhs-skeleton-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
}

/* —— 搜索列表产品图 —— */
.product-area .card-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.product-area .card-image .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.product-area .card-image .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* —— 店铺 quality 列表 —— */
.shop-pc-splist .hotlist .hotlistsp li .imgs > a {
  display: block;
  width: 100%;
  height: 100%;
}
.shop-pc-splist .hotlist .hotlistsp li .imgs .mhs-skeleton-wrap {
  width: 100%;
  height: 203px;
}
.shop-pc-splist .hotlist .hotlistsp li .imgs .mhs-skeleton-wrap img,
.shop-pc-splist .hotlist .hotlistsp li .imgs .mhs-skeleton-wrap video {
  position: relative;
  z-index: 1;
}

/* —— 店铺首页 banner / 热销图 —— */
.shop-home-banner-slide-media.mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 120px;
}
.shop-home-banner-slide-media.mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
}
.shop-home-product-img .mhs-skeleton-wrap {
  width: 100%;
  aspect-ratio: 1;
}
.shop-home-product-img .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* —— 商品详情主图区：遮罩在主图/视频之上、推荐角标（z-index:4）之下 —— */
.detail-pdp #magnifier .small-box .small-box.mhs-skeleton-wrap::after {
  z-index: 3;
  border-radius: 8px;
}
.detail-pdp #magnifier.detail-pdp--zoom-off .small-box .small-box.mhs-skeleton-wrap::after {
  z-index: 3;
}
.detail-pdp #magnifier .small-box .small-box.mhs-skeleton-wrap.mhs-skeleton-wrap--loaded::after {
  z-index: 0;
}

/* 详情缩略图（视频项播放图标 z-index 见 details 页内联样式） */
.detail-pdp #magnifier .thumbnail-box--left .item .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 56px;
  border-radius: 4px;
}
.detail-pdp #magnifier .thumbnail-box--left .item .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* —— 主站资讯列表封面 —— */
.va-article-list-thumb .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
}
.va-article-list-thumb .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* —— 首页 FEATURE 资讯大图（异步） —— */
.va-main-news-left a .mhs-skeleton-wrap {
  display: block;
  width: 466rem;
  height: 448rem;
  max-width: 100%;
}
.va-main-news-left a .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .va-main-news-left a .mhs-skeleton-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 466 / 448;
  }
}

/* —— 首页 Categories 网格产品图（异步）：与 main.css 中 .va-main-pcr-item img 比例一致 —— */
.va-main-pcr-item .mhs-skeleton-wrap {
  width: 80%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
}
.va-main-pcr-item .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 99%;
  height: 99%;
  object-fit: cover;
  display: block;
}

/* —— 店铺资讯列表封面 —— */
.zx-news-card__media .mhs-skeleton-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: inherit;
}
.zx-news-card__media .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* —— 搜索供应商列表 Logo —— */
.gys .qyinfo .avatar .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.gys .qyinfo .avatar .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
  border: 1px solid #f5f5f5;
}

/* —— 侧栏排行 / 资讯侧栏推荐商品图 —— */
.goods-sidebar-rank .goods-rank-img .mhs-skeleton-wrap,
.zx-list-sidebar .zx-rec-img .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.goods-sidebar-rank .goods-rank-img .mhs-skeleton-wrap img,
.zx-list-sidebar .zx-rec-img .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* —— 商品详情异步「Related products」 —— */
.detail-pdp .xgtj.detail-pdp-related ul li .imgs > a {
  display: block;
  width: 100%;
  height: 100%;
}
.detail-pdp .xgtj.detail-pdp-related ul li .imgs .mhs-skeleton-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.detail-pdp .xgtj.detail-pdp-related ul li .imgs .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* —— 首页 News 右侧旁 Factory Exploration：视频封面缩略图（与 main.css .va-main-news-vimg 460×260 一致） —— */
.va-main-news-vthumb .mhs-skeleton-wrap {
  display: block;
  width: 430rem;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 460 / 260;
}
.va-main-news-vthumb .mhs-skeleton-wrap .va-main-news-vimg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .va-main-news-vthumb .mhs-skeleton-wrap {
    width: 100%;
    height: auto;
  }
}

/* —— 首页 Factory Tour：会展事迹列表封面（时间轴左列） —— */
.va-main-exhibition-list a .mhs-skeleton-wrap {
  flex: 0 0 auto;
  width: 200rem;
  aspect-ratio: 1.62 / 1;
  margin-right: 20rem;
  flex-shrink: 0;
}
.va-main-exhibition-list a .mhs-skeleton-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .va-main-exhibition-list a .mhs-skeleton-wrap {
    width: 130rem;
  }
}

/* —— 首页 / 店铺：会展视频封面网格（播放图标叠在骨架之上） —— */
.va-main-exhibition-right a .va-main-exhibition-icon {
  z-index: 4;
}
.va-main-exhibition-right a .mhs-skeleton-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1.14 / 1;
}
.va-main-exhibition-right a .mhs-skeleton-wrap .va-main-exhibition-thumb {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: unset;
  min-height: 0;
}