/* =========================================================
 * 烟火云 YanHuoIDC · 局部购物车 CSS（仅订购页 product-card）
 * 用法：后台「网站设置 → 自定义CSS → 购物车CSS」整段粘贴/替换
 * 说明：
 *   - 描述内容继续用 .yanhuoidc_bq / .yanhuoidc_adv（不要改回 gcc_*）
 *   - 卡片圆角、标签色对齐友商展示；首页/导航样式不放这里
 *   - 标题区：左对齐；ECS 标 24px；字号 14px / 字重 500 / #333
 * ========================================================= */

/* ---------- 基础 ---------- */
.product-description li {
  list-style: none;
}

.flex-center-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

p.stock-info {
  display: none;
}

/* ---------- 卡片圆角（友商圈润边框） ---------- */
.product-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  border-color: #d0d0d0;
}

/* 标题区：左对齐、紧凑（column 布局下勿用 align-items:center，否则标题会横居中） */
.product-card .product-card-header,
.product-card-header {
  border-radius: 12px 12px 0 0;
  height: auto !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 10px 16px !important; /* 与描述/价格同一左边线，避免图标比规格更靠里 */
  box-sizing: border-box;
  background: #f7f7f9;
}

.product-card .product-card-header .header-title,
.product-card-header .header-title,
.product-card .header-title {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
}

.product-card .product-card-header .header-title h5,
.product-card-header .header-title h5,
.product-card .header-title h5 {
  margin: 0;
  width: 100% !important;
  max-width: 100%;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  /* 行高锁死为 24px 图标高度，flex 垂直居中 */
  line-height: 24px !important;
  min-height: 24px;
  color: #333333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  box-sizing: border-box;
}

/* ---------- 购物车 ico（ECS 标 24px，比 18 大、比 32 小） ---------- */
.product-card:hover .header-title h5::before {
  transform: rotate(5deg);
}

.header-title h5::before {
  content: "";
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  align-self: center;
  /* 旧路径「ecs 云服务器ECS.png」404，空白占位把标题顶成看起来居中 */
  background-image: url("/img/ecs.png");
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform 0.3s ease;
}

/* 隐藏主题自带 img ico，避免和 ::before 叠两层 */
.product-card-header .header-title img,
.product-card .header-title img {
  display: none !important;
}

/* 价格区左右留白；按钮用自身 margin（与友商一致，避免双重缩进） */
.product-card .product-Parameters {
  display: block;
  padding: 4px 0 0;
  border-radius: 0 0 12px 12px;
}

.product-card .product-Parameters .pricing-info {
  text-align: left;
  padding: 2px 16px 0 !important;
}

/* 立即购买：左右留白 + 圆角（覆盖主题 width:100%） */
.product-card .product-Parameters .buy-now-button {
  display: block !important;
  box-sizing: border-box;
  margin: 12px 16px 16px !important;
  width: auto !important;
  border-radius: 6px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-align: center;
}

.product-card .product-Parameters .buy-now-button:hover {
  opacity: 0.95;
  /* 变焦由 module.css 主 CTA 统一处理（scale），此处不再叠 translateY */
}

.product-card .product-Parameters .buy-now-button:active {
  opacity: 1;
}

/* 悬停微光扫过 */
.product-card .product-Parameters .buy-now-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
}

.product-card .product-Parameters .buy-now-button:hover::before {
  left: 100%;
}

.product-card .product-card-body .product-description {
  /* 与标题图标同一左边线（header 16px）；原先 12px 导致规格比图标更靠左 */
  padding: 10px 16px 0;
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.amount {
  font-weight: 700;
}

@keyframes yanhuoCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 亮点标签（保留你的内容 class） ---------- */
/* 字号/内边距保持接近原样；靠描述区左右留白换同行空间 */
.yanhuoidc_bq {
  background-color: rgba(252, 241, 235, 1);
  color: rgba(254, 95, 71, 1) !important;
  margin-right: 2px;
  margin-bottom: 8px;
  min-width: max-content;
  padding: 0 7px;
  height: 24px;
  line-height: 24px !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

/* 兼容误用友商 class 的旧 HTML */
.gcc_label {
  background-color: rgba(252, 241, 235, 1);
  color: rgba(254, 95, 71, 1) !important;
  margin-right: 2px;
  margin-bottom: 8px;
  min-width: max-content;
  padding: 0 7px;
  height: 24px;
  line-height: 24px !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- CPU / 优势徽章 ---------- */
.yanhuoidc_adv,
.gcc_adv,
.gcc_cpu,
.cpu-style {
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #0008ff;
  font-size: 12px !important;
  font-style: normal;
  line-height: 16px !important;
  border-radius: 2px;
  background: #fff;
  color: #0008ff !important;
  position: relative;
  float: right;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.yanhuoidc_adv:hover,
.gcc_adv:hover,
.gcc_cpu:hover {
  background: #0008ff;
  color: #fff !important;
}

/* ---------- 配置行（可选结构） ---------- */
.config-item {
  display: flex;
  padding: 4px 0;
}

.config-label {
  min-width: 60px;
  text-align: left;
  padding-right: 15px;
  font-weight: 700;
}

.config-value {
  flex: 1;
  text-align: left;
}

/* ---------- 物理机 table.tftable ---------- */
table.tftable,
table#tfhover {
  font-size: 13px;
  color: #83838e;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  border-width: 0;
  border-collapse: collapse;
  table-layout: auto !important;
}

table.tftable td {
  font-size: 13px;
  border-width: 0;
  padding: 2px 0;
  border-style: solid;
  border-color: transparent;
  line-height: 26px;
  color: #83838e;
}

.product-card .product-description table.tftable td:first-child,
.product-card .product-description table.tftable td:first-child b {
  color: #999 !important;
  white-space: nowrap;
  font-weight: 600;
}

.product-card .product-description > hr {
  margin: 10px 0 8px;
  border: 0;
  border-top: 1px solid #eee;
}

/* 香港/美国宿主机 product-specs */
.product-card .product-specs {
  display: block;
  width: 100%;
  font-size: 13px;
  color: #83838e;
  line-height: 26px;
}
.product-card .product-specs > div,
.product-card .product-specs li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  line-height: 26px;
  height: auto !important;
}

/* ---------- 手机：卡片铺满，避免 260px 固定卡宽右侧大片留白 ---------- */
@media (max-width: 768px) {
  .shopping-cart-page.mobileEnd .sky-productList,
  .shopping-cart-page .sky-productList {
    grid-template-columns: 1fr !important;
  }

  /* 卡变宽后描述区可恢复正常左右留白；标签仍 nowrap 一行 */
  .product-card .product-card-body .product-description {
    padding: 10px 16px 0;
  }
}