/* =============================================================
 * hot-products.css — 热卖产品模块交互样式
 * 配合 js/home.js：悬停/点击圆形图标切换背景、Logo、标题、大图。
 * 类名前缀：.hot-
 * ============================================================= */

/* =============================================================
 * hot-products.css — 热卖产品模块交互样式
 * 配合 js/home.js：悬停/点击圆形图标切换背景、Logo、标题、大图。
 * 类名前缀：.hot-
 *
 * ── 缺失图片说明 ──────────────────────────────────────────
 * 下列 19 个文件在「网页另存为」时未被下载，源站 CDN
 * (huali-website-file.wahlap.net) 开启防盗链，直接请求返回 403，
 * 本地无法自动补齐。把原图放进 images/ 即可自动生效，无需改代码。
 *
 *   产品背景图 (10)
 *     nba-bg.png      taku-bg.webp     9DXPLUS-bg.png
 *     party-bg.png    goose-bg.png     smurf-bg.png
 *     s-bg.webp       zida-bg.webp     action-bg.png
 *     Ultraman-bg.webp
 *
 *   产品 Logo (9；nba-logo.png 已存在)
 *     taku-logo.webp   9DXPLUS-logo.png  party-logo.png
 *     goose-logo.png   smurf-logo.png    s-logo.webp
 *     zida-logo.png    action-logo.png   Ultraman-logo.webp
 * ───────────────────────────────────────────────────────────
 * ============================================================= */

/* ---------- 容器 ---------- */
.hot {
  position: relative;
}

/* 背景层缺图时给深色底，避免纯黑空洞 */
.hot .hot-layer[data-role='bg'] {
  background-color: #0a0a0a;
  background-size: contain;
}


/* 背景层与遮罩不拦截鼠标，否则圆形图标无法 hover */
.hot .styles_productBG__2ds0d,
.hot .styles_productBGMask__IImCU {
  pointer-events: none;
}

/* 内容层压在背景之上 */
.hot .hot-inner {
  position: relative;
  z-index: 3;
}

/* ---------- 通用层：默认隐藏，选中时显示 ---------- */
.hot .hot-layer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.hot .hot-layer.is-active {
  opacity: 1;
  visibility: visible;
}

/* 背景层：铺满整个 section */
.hot .hot-layer[data-role='bg'] {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hot .hot-layer[data-role='bg'].is-active {
  opacity: 1;
}

/* ---------- Logo 层：占位盒内切换 ---------- */
.hot .hot-logo-box {
  position: relative;
}

.hot .hot-logo {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* ---------- 标题层：纵向排列 ---------- */
.hot .styles_productBLM__ExGdD {
  position: relative;
}

.hot .hot-title {
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  display: block;
}

.hot .hot-title p {
  margin: 0;
  line-height: 4rem;
}

/* ---------- 大图层：右侧单图显示 ---------- */
.hot .hot-figures {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 350px;
}

.hot .hot-figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  text-decoration: none;
}

.hot .hot-figure img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 460px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* ---------- 圆形图标 ---------- */
.hot .hot-dot {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  filter: grayscale(100%);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.hot .hot-dot img {
  max-width: 90%;
  max-height: 80px;
  width: auto;
  height: auto;
  display: block;
  pointer-events: none;
}

/* 选中态：取消灰度（对应原站 productBLBIA） */
.hot .hot-dot.is-active {
  filter: none;
}

.hot .hot-dot:hover {
  transform: scale(1.05);
}

.hot .hot-dot:focus-visible {
  outline: 2px solid #e80109;
  outline-offset: 4px;
}

/* 触屏设备没有 hover，给个常驻选中样式 */
.hot .hot-dot[aria-selected='true'] {
  filter: none;
}

/* ---------- 「查看更多」 ---------- */
.hot .hot-more {
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
  /* 移动端 logo 容易遮挡，隐藏 */
  .hot .hot-logo-box {
    display: none;
  }

  .hot .hot-title {
    /* position: static; */
    left: auto;
    right: auto;
  }

  .hot .hot-figures {
    min-height: 240px;
  }

  .hot .hot-figure img {
    width: 100%;
    object-position: center center;
  }
}