/* 旗下产品下拉卡片导航 - 仅作用于 #qxx-nav，防止与原主题CSS冲突 */

/* 导航栏高度变量（与 nav .nav-bar 一致） */
:root {
  --qxx-nav-h: 4.38vw;
  --qxx-panel-h: 22vw;
}

@keyframes qxx-slideDown {
  0%   { opacity: 0; max-height: 0; }
  100% { opacity: 1; max-height: var(--qxx-panel-h); }
}
@keyframes qxx-slideUp {
  0%   { opacity: 1; max-height: var(--qxx-panel-h); }
  100% { opacity: 0; max-height: 0; }
}
@keyframes qxx-fadeInUpsub {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 遮罩层：紧贴导航栏底部向下展开 */
#qxx-nav-mask {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: fixed;
  top: var(--qxx-nav-h);
  left: 0;
  z-index: 198;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  pointer-events: none;
}
#qxx-nav-mask.qxx-down {
  animation-name: qxx-slideDown;
  pointer-events: auto;
}
#qxx-nav-mask.qxx-up {
  animation-name: qxx-slideUp;
}

/* 下拉面板：放在遮罩层内部 */
.qxx-sub-panel {
  display: flex;
  width: 100%;
  height: var(--qxx-panel-h);
  padding: 3vw 8vw 2vw;
  justify-content: center;
  gap: 3vw;
  align-items: center;
}

/* 触发li hover 时显示 */
#qxx-nav-goods:hover .qxx-sub-panel {
  display: flex;
}

/* 下拉面板显示时，同步触发遮罩动画（JS控制） */
#qxx-nav-mask.qxx-down ~ * .qxx-sub-panel .qxx-box-wrap,
.qxx-sub-panel .qxx-box-wrap {
  animation-fill-mode: both;
}

/* 产品卡片 */
.qxx-box-wrap {
  position: relative;
  width: 13vw;
  height: 12.92vw;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 1vw 0.5vw;
  display: flex;
  justify-content: center;
  overflow: hidden;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: qxx-fadeInUpsub;
}

/* 卡片内图片链接 */
.qxx-box-wrap > a {
  width: 45%;
  display: block;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.qxx-box-wrap > a img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* 第二张图默认错位（悬停特效） */
.qxx-box-wrap > a:nth-child(2) {
  margin-left: -45%;
  transition: margin-left 0.3s 0.1s;
}
.qxx-box-wrap:hover > a:nth-child(2) {
  margin-left: 0;
}

/* 产品名称 */
.qxx-box-wrap .qxx-text {
  position: absolute;
  bottom: -4vw;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.83vw;
  color: #5a4e49;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qxx-box-wrap .qxx-text a {
  color: #5a4e49;
  text-decoration: none;
  font-size: 0.83vw;
}

/* 卡片整体链接（透明覆盖层，点击跳到产品页） */
.qxx-box-name {
  position: absolute;
  bottom: -5vw;
  left: 0;
  width: 100%;
  text-align: center;
}
.qxx-box-name a {
  font-size: 0.83vw;
  color: #5a4e49;
  text-decoration: none;
}
.qxx-box-name a:hover {
  color: #3c0263;
}