/* Duomeishi Product Showcase */
.dms-sc {
  --dms-ink: #16232e;
  --dms-mute: #5c6b78;
  --dms-line: #e3e8ed;
  --dms-bg: #f6f8fa;
  --dms-accent: #0f6f7a;
  --dms-accent-soft: #e6f2f3;
  --dms-radius: 14px;
  font-family: inherit;
  color: var(--dms-ink);
}

/* ---------- 工具条 ---------- */
.dms-sc__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.dms-sc__search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}
.dms-sc__search svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: none; stroke: #8b98a5; stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.dms-sc__search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--dms-line);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  color: var(--dms-ink);
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.dms-sc__search input:focus {
  outline: none;
  border-color: var(--dms-accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 122, .12);
}
.dms-sc__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dms-mute); }
.dms-sc__sort select {
  padding: 10px 14px;
  border: 1px solid var(--dms-line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--dms-ink);
}

/* ---------- 筛选 ---------- */
.dms-sc__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.dms-sc__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dms-line);
}
.dms-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--dms-line);
  border-radius: 999px;
  background: #fff;
  color: var(--dms-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .16s ease;
}
.dms-chip:hover { border-color: var(--dms-accent); color: var(--dms-accent); }
.dms-chip.is-active {
  background: var(--dms-accent);
  border-color: var(--dms-accent);
  color: #fff;
}
.dms-chip__n {
  font-size: 12px;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}
.dms-sc__subs .dms-chip {
  background: var(--dms-bg);
  font-size: 13px;
  padding: 6px 13px;
}
.dms-sc__subs .dms-chip.is-active { background: var(--dms-accent); color: #fff; }

.dms-sc__count { font-size: 14px; color: var(--dms-mute); margin: 0 0 16px; }
.dms-sc__count strong { color: var(--dms-ink); font-weight: 600; }
.dms-sc__empty { padding: 48px 0; text-align: center; color: var(--dms-mute); }

/* ---------- 网格 ---------- */
.dms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.dms-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--dms-line);
  border-radius: var(--dms-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dms-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(22, 35, 46, .10);
  border-color: #cfd8e0;
}
.dms-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--dms-bg);
  overflow: hidden;
}
.dms-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.dms-card:hover .dms-card__media img { transform: scale(1.045); }
.dms-card__code {
  position: absolute;
  left: 10px; top: 10px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, .94);
  color: var(--dms-accent);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.dms-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.dms-card__title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; }
.dms-card__title a { color: var(--dms-ink); text-decoration: none; }
.dms-card__title a:hover { color: var(--dms-accent); }
.dms-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dms-card__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.dms-price { color: #c0392b; font-weight: 700; font-size: 16px; }
.dms-price small { font-weight: 500; font-size: 12px; color: var(--dms-mute); }
.dms-price--ask { color: var(--dms-accent); font-size: 14px; }
.dms-moq { color: var(--dms-mute); }
.dms-card__cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--dms-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dms-card__cta:hover { border-bottom-color: var(--dms-accent); }

/* ---------- 分类卡片 ---------- */
.dms-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.dms-cat {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--dms-line);
  border-radius: var(--dms-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dms-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 35, 46, .10); }
.dms-cat img { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--dms-bg); }
.dms-cat__body { padding: 16px 18px 18px; }
.dms-cat__body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.dms-cat__body p { margin: 0 0 10px; font-size: 13px; color: var(--dms-mute); }
.dms-cat__subs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.dms-cat__subs li {
  font-size: 12px;
  background: var(--dms-accent-soft);
  color: var(--dms-accent);
  padding: 3px 9px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  /* 明确 2 列：auto-fill + minmax(150px) 在窄容器（约 312px）里差 2px 会跌回单列 */
  .dms-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .dms-sc { --dms-radius: 12px; }
  /* 卡片标题两行截断，保证 2 列高度整齐 */
  .dms-card__title { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* 型号小字不低于 12px */
  .dms-card__code { font-size: 12px; }
  /* 点击区：查看详情按钮加高 */
  .dms-card__cta { display: block; text-align: center; padding: 11px 0; }
}

/* ---------- 语言切换器 ---------- */
.dms-lang-item { display: inline-flex; align-items: center; }
.dms-lang {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f2f5f7; border: 1px solid #dde3e8; border-radius: 999px;
  padding: 4px 12px 4px 9px; cursor: pointer;
}
.dms-lang svg { width: 15px; height: 15px; fill: none; stroke: #0f6f7a; stroke-width: 1.7; stroke-linecap: round; }
.dms-lang__sel {
  border: 0; background: transparent; font-size: 13.5px; font-weight: 600; color: #16232e;
  padding: 0 2px; cursor: pointer; outline: none; max-width: 130px;
}
.dms-lang:hover { border-color: #0f6f7a; }

/* ---------- 移动端浮动语言切换器 ----------
   手机上主题把主导航折叠进汉堡菜单（UL.primary-menu 变 display:none），
   菜单里的切换器随之不可见。JS 检测到菜单隐藏时，会把切换器移到页头
   右上角固定悬浮，保证随时可切换语言。 */
.dms-lang-item--float {
  position: fixed; top: 10px; right: 12px; z-index: 99999;
  list-style: none; margin: 0; padding: 0;
}
.dms-lang-item--float .dms-lang {
  background: rgba(255,255,255,.94); border: 1px solid #dde3e8;
  box-shadow: 0 2px 12px rgba(12,60,70,.14);
  padding: 8px 12px 8px 10px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dms-lang-item--float svg { width: 17px; height: 17px; }
.dms-lang-item--float .dms-lang__sel { font-size: 14px; max-width: 108px; min-height: 24px; }
@media (min-width: 701px) {
  .dms-lang-item--float { display: none !important; }
}

/* ---------- 工厂设备视频（Our Factory 视频，与 4 张设备图同格同尺寸） ---------- */
.dms-fitem-video { cursor: pointer; }
.dms-fitem-video .dms-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #0b1620;
}
.dms-fitem-video::before {
  content: "\25B6"; /* ▶ */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(15, 111, 122, .9); color: #fff; font-size: 19px; line-height: 48px;
  text-align: center; padding-left: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: opacity .2s ease;
}
.dms-fitem-video:hover::before { opacity: 0; }
.dms-fitem-video:hover { filter: brightness(1.04); }

/* 点击放大的视频灯箱 */
.dms-vid-lightbox {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(8, 14, 20, .88); padding: 4vw;
}
.dms-vid-lightbox.open { display: flex; }
.dms-vid-lightbox video {
  max-width: 94vw; max-height: 86vh; width: auto; height: auto;
  border-radius: 12px; background: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.dms-vid-lightbox .dms-vid-close {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 26px; cursor: pointer; line-height: 44px;
  transition: background .2s ease;
}
.dms-vid-lightbox .dms-vid-close:hover { background: rgba(255, 255, 255, .28); }