/* ==========================================================================
   产品描述美化（yszun_cart 版，移植自参考站 desc_beautify）
   --------------------------------------------------------------------------
   作用：把后台富文本描述里的 <li>字段：值</li> 在浏览器端渲染成
   「键值两列 + 蓝色小标签」的规格卡，不改数据库里的任何产品数据。

   选择器前缀用 .qsv-card-desc（本主题的描述容器类名），
   而不是参考站的 .product-description —— 两者类名体系不同，
   并且要压过 qiucart-product-server.css 里对 .qsv-card-desc 的既有规则。

   配套脚本：assets/js/qiucart-desc-beautify.js
   ========================================================================== */

.qsv-card-desc .ps-container {
  max-width: 100%;
  padding: 4px 0;
  text-align: left;
}

.qsv-card-desc .ps-container__group { margin-bottom: 0; }

/* 规格行：键值两列，行间一条淡分隔线 */
.qsv-card-desc .ps-container__item {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  line-height: 1.5;
  transition: background .2s ease;
  opacity: 0;
  animation: ps-fadeInUp .45s ease-out forwards;
}
.qsv-card-desc .ps-container__item:hover { background: rgba(0, 0, 0, .03); }
.qsv-card-desc .ps-container__item:nth-child(1) { animation-delay: .04s; }
.qsv-card-desc .ps-container__item:nth-child(2) { animation-delay: .08s; }
.qsv-card-desc .ps-container__item:nth-child(3) { animation-delay: .12s; }
.qsv-card-desc .ps-container__item:nth-child(4) { animation-delay: .16s; }
.qsv-card-desc .ps-container__item:nth-child(5) { animation-delay: .20s; }
.qsv-card-desc .ps-container__item:nth-child(6) { animation-delay: .24s; }
.qsv-card-desc .ps-container__item:nth-child(7) { animation-delay: .28s; }
.qsv-card-desc .ps-container__item:nth-child(8) { animation-delay: .32s; }

@keyframes ps-fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 左侧字段名 */
.qsv-card-desc .ps-container__label {
  flex: 0 0 auto;
  min-width: 76px;
  max-width: 110px;
  padding: 0 8px 0 0;
  /* !important 是为了压过 .qsv-card-desc * 那条通配规则 */
  color: #666 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* 右侧值 */
.qsv-card-desc .ps-container__value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 4px;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* 蓝色小标签（从 <font color="#0066ff"> 这类强调文字提取） */
.qsv-card-desc .ps-container__chip {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 4px;
  color: #0f52b3 !important;
  background: rgba(0, 82, 204, .12) !important;
  border: 1px solid rgba(0, 82, 204, .2);
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

/* 无法拆成键值对的行（如"加配置联系客服"）→ 灰底小块 */
.qsv-card-desc .ps-container__features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.qsv-card-desc .ps-container__feature {
  padding: 4px 10px;
  border-radius: 6px;
  color: #444 !important;
  background: rgba(0, 0, 0, .03) !important;
  border: 1px solid rgba(0, 0, 0, .04);
  font-size: 13px !important;
  line-height: 1.4 !important;
  transition: all .3s ease;
  opacity: 0;
  animation: ps-fadeInUp .4s ease-out forwards;
}
.qsv-card-desc .ps-container__feature:hover {
  background: rgba(0, 0, 0, .07) !important;
  border-color: rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}

/* 红色警示语（原文用红色 <font> 标记）单独突出 */
.qsv-card-desc .ps-container__warn {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: #d93025 !important;
  background: rgba(217, 48, 37, .06) !important;
  border: 1px solid rgba(217, 48, 37, .15);
  font-size: 13px !important;
  line-height: 1.6 !important;
}

@media (max-width: 480px) {
  .qsv-card-desc .ps-container__item { min-height: 28px; padding: 3px 0; }
  .qsv-card-desc .ps-container__label { min-width: 68px; font-size: 13px !important; padding-right: 4px; }
  .qsv-card-desc .ps-container__value { gap: 4px; padding-left: 2px; font-size: 13px !important; }
  .qsv-card-desc .ps-container__chip { padding: 0 4px; font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .qsv-card-desc .ps-container__item,
  .qsv-card-desc .ps-container__feature { animation: none; opacity: 1; }
  .qsv-card-desc .ps-container__feature:hover { transform: none; }
}