:root {
  --ycg-primary: #E63429;
  --ycg-primary-hover: #C62820;
  --ycg-primary-soft: rgba(230, 52, 41, 0.08);
  --ycg-ink: #14181f;
  --ycg-ink-2: #2a303c;
  --ycg-bg: #f4f1ec;
  --ycg-surface: #ffffff;
  --ycg-text: #1c212b;
  --ycg-text-sub: #5a6270;
  --ycg-text-muted: #8a93a3;
  --ycg-border: #e4e0d8;
  --ycg-danger: #d7261b;
  --ycg-radius: 4px;
  --ycg-radius-lg: 12px;
  --ycg-shadow: 0 12px 40px rgba(20, 24, 31, 0.08);
  --ycg-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ycg-display: "PingFang SC", "Songti SC", "Noto Serif SC", "Microsoft YaHei", serif;
  --ycg-container: 1180px;
  --ycg-header-h: 72px;
  /* 评分金：品牌红体系里没有「评分金」，星级/评分统一用这两个 token。
     原先散落 3 处各自硬编码（#ffb020 / #f5a623 / #e2e4e8），已全部收敛到这里。 */
  --ycg-star-on: #ffb020;
  --ycg-star-off: #e2e4e8;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: var(--ycg-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ycg-text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(230,52,41,.06), transparent 55%),
    radial-gradient(900px 400px at 100% 0%, rgba(20,24,31,.04), transparent 50%),
    var(--ycg-bg);
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}

a:hover { color: var(--ycg-primary); }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-family: var(--ycg-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--ycg-ink);
}

h1 { font-size: clamp(1.75rem, 2.4vw, 2.35rem); }
h2 { font-size: clamp(1.35rem, 1.8vw, 1.65rem); }
h3 { font-size: 1.1rem; font-family: var(--ycg-font); font-weight: 600; }

.ycg-container {
  width: min(100% - 40px, var(--ycg-container));
  margin-inline: auto;
}

/* —— Top strip —— */
.ycg-topbar {
  background: var(--ycg-ink);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .04em;
}

.ycg-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  gap: 16px;
}

.ycg-topbar a { color: rgba(255,255,255,.82); }
.ycg-topbar a:hover { color: #fff; }

.ycg-topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.ycg-topbar__phone { white-space: nowrap; }

/* 对齐旧站顶栏「厂商中心」下拉 */
.ycg-topbar__drop {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
}

.ycg-topbar__drop-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.82);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ycg-topbar__drop-btn::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform .2s ease;
}

.ycg-topbar__drop.is-open .ycg-topbar__drop-btn,
.ycg-topbar__drop-btn:hover { color: #fff; }

.ycg-topbar__drop.is-open .ycg-topbar__drop-btn::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.ycg-topbar__panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 118px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  z-index: 120;
}

.ycg-topbar__drop.is-open .ycg-topbar__panel { display: block; }

.ycg-topbar__panel > a,
.ycg-topbar__mp-label {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #555 !important;
  font-size: 13px;
  letter-spacing: 0;
  border-bottom: 1px dashed #e5e5e5;
  text-decoration: none;
}

.ycg-topbar__panel > a:last-of-type { border-bottom: 1px dashed #e5e5e5; }
.ycg-topbar__panel > a:hover,
.ycg-topbar__mp:hover .ycg-topbar__mp-label { color: var(--ycg-brand, #e63429) !important; }

.ycg-topbar__mp {
  position: relative;
  border-bottom: 0;
}

.ycg-topbar__mp-label {
  border-bottom: 0;
  cursor: default;
}

.ycg-topbar__mp-pop {
  display: none;
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  width: 124px;
  height: 124px;
  padding: 2px;
  background: var(--ycg-brand, #e63429);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 121;
}

.ycg-topbar__mp-pop::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left-color: var(--ycg-brand, #e63429);
}

.ycg-topbar__mp-pop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}

.ycg-topbar__mp:hover .ycg-topbar__mp-pop { display: block; }

/* —— Header（默认 = PC 样式；手机样式仅见下方 max-width / .ycg-is-mobile） —— */
.ycg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(228,224,216,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

.ycg-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--ycg-header-h);
}

.ycg-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.ycg-logo__img {
  height: 38px;
  width: auto;
  display: block;
}

.ycg-logo span {
  display: block;
  margin-top: 2px;
  font-family: var(--ycg-font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ycg-text-muted);
  text-transform: uppercase;
}

.ycg-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ycg-nav::-webkit-scrollbar { display: none; }

.ycg-nav a {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ycg-text-sub);
  border-radius: 999px;
  white-space: nowrap;
}

.ycg-nav a.is-active,
.ycg-nav a:hover {
  color: var(--ycg-primary);
  background: var(--ycg-primary-soft);
}

/* 仅手机抽屉内展示 */
.ycg-nav__tel,
.ycg-nav__mobile-only { display: none; }

.ycg-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.ycg-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ycg-primary);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  letter-spacing: .02em;
}

.ycg-header__phone-ico {
  display: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ycg-header__phone-num { display: inline; }

.ycg-nav-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 8px;
}
.ycg-nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--ycg-ink);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.ycg-header.is-nav-open .ycg-nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ycg-header.is-nav-open .ycg-nav-toggle span:nth-child(2) { opacity: 0; }
.ycg-header.is-nav-open .ycg-nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.ycg-nav-mask { display: none; }

.ycg-search {
  display: flex;
  width: min(280px, 28vw);
  border: 1px solid var(--ycg-border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.ycg-search:focus-within {
  border-color: rgba(230,52,41,.45);
  box-shadow: 0 0 0 3px rgba(230,52,41,.1);
}

.ycg-search input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 9px 14px;
  font-size: 13px;
  min-width: 0;
  background: transparent;
}

.ycg-search button {
  border: 0;
  background: var(--ycg-primary);
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.ycg-search button:hover { background: var(--ycg-primary-hover); }
.ycg-search__label-short { display: none; }

html.ycg-nav-lock {
  overflow: hidden;
}

/* PC 端硬锁定：宽屏下绝不出现汉堡抽屉/手机头（不受 .ycg-is-mobile 误伤除外见下方说明） */
@media (min-width: 961px) {
  html:not(.ycg-is-mobile) .ycg-nav-toggle,
  html:not(.ycg-is-mobile) .ycg-nav-mask,
  html:not(.ycg-is-mobile) .ycg-nav__mobile-only,
  html:not(.ycg-is-mobile) .ycg-nav__tel,
  html:not(.ycg-is-mobile) .ycg-header__phone-ico {
    display: none !important;
  }
  html:not(.ycg-is-mobile) .ycg-header__phone-num {
    display: inline !important;
  }
  html:not(.ycg-is-mobile) .ycg-header__inner {
    flex-wrap: nowrap !important;
    gap: 28px !important;
    min-height: var(--ycg-header-h) !important;
    padding: 0 !important;
  }
  html:not(.ycg-is-mobile) .ycg-logo__img {
    height: 38px !important;
  }
  html:not(.ycg-is-mobile) .ycg-header__actions {
    flex: 0 0 auto !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    order: 0 !important;
    width: auto !important;
  }
  html:not(.ycg-is-mobile) .ycg-search {
    flex: 0 0 auto !important;
    width: min(280px, 28vw) !important;
    max-width: none;
  }
  html:not(.ycg-is-mobile) .ycg-header__phone {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html:not(.ycg-is-mobile) .ycg-nav {
    display: flex !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: auto !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  html:not(.ycg-is-mobile) .ycg-nav a {
    display: inline-block !important;
    width: auto !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
  }
  html:not(.ycg-is-mobile) .ycg-topbar {
    display: block !important;
  }
  html:not(.ycg-is-mobile).ycg-nav-lock {
    overflow: visible !important;
  }
}

/* —— Buttons —— */
.ycg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 2px;
  background: var(--ycg-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px rgba(230,52,41,.22);
}

.ycg-btn:hover {
  background: var(--ycg-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

.ycg-btn--ghost {
  background: transparent;
  color: var(--ycg-ink);
  border: 1px solid rgba(20,24,31,.22);
  box-shadow: none;
}

.ycg-btn--ghost:hover {
  border-color: var(--ycg-primary);
  color: var(--ycg-primary);
  background: var(--ycg-primary-soft);
}

.ycg-btn--light {
  background: #fff;
  color: var(--ycg-ink);
  box-shadow: none;
}

.ycg-btn--light:hover {
  background: #fff;
  color: var(--ycg-primary);
}

/* 按钮内图标（内联 SVG，stroke 走 currentColor 自动跟随按钮文字色）。
   18px 是这个字号档的合适体量；图标与文字间距由 .ycg-btn 的 gap 控制。 */
.ycg-btn__ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* —— Banner carousel（对齐源站 3 张 CDN 图） —— */
.ycg-banner {
  position: relative;
  width: 100%;
  background: #0a1a3a;
  overflow: hidden;
}

.ycg-banner__track {
  position: relative;
  height: 400px;
}

.ycg-banner__slide {
  display: block;
  line-height: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}

.ycg-banner__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.ycg-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ycg-banner__img--mobile { display: none; }

.ycg-banner__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
  padding: 0 12px;
}

.ycg-banner__arrow {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ycg-banner__arrow:hover { background: rgba(0,0,0,.55); }

.ycg-banner__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}

.ycg-banner__dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  padding: 0;
}

.ycg-banner__dot.is-active { background: #fff; }

/* PC 轮播右侧帮采卡片（移动端隐藏） */
.ycg-banner__card {
  display: none;
}

@media (min-width: 961px) {
  .ycg-banner__card {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 4;
    top: 50%;
    right: max(24px, calc((100% - var(--ycg-container)) / 2));
    transform: translateY(-50%);
    width: 260px;
    padding: 22px 22px 20px;
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 16px 40px rgba(8, 16, 40, .35);
    backdrop-filter: blur(8px);
  }

  .ycg-banner__card h2 {
    margin: 0 0 14px;
    font-family: var(--ycg-font);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
  }

  .ycg-banner__card ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  .ycg-banner__card li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
  }

  .ycg-banner__card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff6a2a;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
  }

  .ycg-banner__card li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 5px;
    height: 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  .ycg-banner__card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 8px;
    background: #ff6a2a;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
  }

  .ycg-banner__card-cta:hover {
    background: #ff7d45;
    transform: translateY(-1px);
  }
}

/* PC 轮播左侧一级分类导航（移动端隐藏） */
.ycg-banner__cats {
  display: none;
}

@media (min-width: 961px) {
  .ycg-banner__cats {
    display: block;
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: max(24px, calc((100% - var(--ycg-container)) / 2));
    width: 150px;
    background: #fff;
    border-radius: 0;
    overflow: visible;
  }

  .ycg-banner__cats ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ycg-banner__cats li + li { border-top: 1px solid var(--ycg-border); }

  .ycg-banner__cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--ycg-text);
    transition: background .18s ease, color .18s ease;
  }

  .ycg-banner__cats-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ycg-banner__cats-name svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    fill: none;
    stroke: var(--ycg-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill .18s ease, stroke .18s ease;
  }

  .ycg-banner__cats a:hover .ycg-banner__cat-ico .cat-ico-bag {
    fill: var(--ycg-primary);
  }

  .ycg-banner__cats a b {
    flex: 0 0 auto;
    color: var(--ycg-text-muted);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    transition: color .18s ease, transform .18s ease;
  }

  .ycg-banner__cats a:hover {
    background: var(--ycg-primary-soft);
    color: var(--ycg-primary);
  }

  .ycg-banner__cats a:hover b {
    color: var(--ycg-primary);
    transform: translateX(2px);
  }

  /* 二级分类悬浮面板 */
  .ycg-banner__sub {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 20;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
    width: 380px;
    max-height: 100%;
    overflow: auto;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ycg-border);
    box-shadow: 0 14px 30px rgba(20, 24, 31, .12);
  }

  .ycg-banner__cats li:hover > .ycg-banner__sub {
    display: grid;
  }

  .ycg-banner__sub a {
    display: block;
    min-height: 0;
    padding: 6px 0;
    font-size: 13px;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ycg-banner__sub a:hover {
    color: var(--ycg-primary);
    background: transparent;
  }
}

/* —— Sections —— */
.ycg-banner + .ycg-section {
  margin-top: 20px;
}

.ycg-section {
  padding: clamp(30px, 6vw, 24px) 0;
}

.ycg-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ycg-border);
}

.ycg-section__head h2 {
  margin: 0;
  position: relative;
  padding-left: 14px;
}

.ycg-section__head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  bottom: .25em;
  width: 3px;
  background: var(--ycg-primary);
}

.ycg-section__head a {
  color: var(--ycg-text-muted);
  font-size: 13px;
  letter-spacing: .06em;
}

.ycg-section__head a:hover { color: var(--ycg-primary); }

.ycg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ycg-item {
  background: var(--ycg-surface);
  border: 1px solid var(--ycg-border);
  border-radius: var(--ycg-radius-lg);
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.ycg-item:hover {
  transform: translateY(-3px);
  border-color: rgba(230,52,41,.25);
  box-shadow: var(--ycg-shadow);
}

a.ycg-item--hit {
  display: block;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.ycg-item--hit:hover { color: inherit; }
.ycg-item__hit-title {
  display: block;
  font-size: 16px;
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--ycg-text);
}
a.ycg-item--hit:hover .ycg-item__hit-title { color: var(--ycg-primary); }

.ycg-item__thumb {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
  border-radius: 8px;
  background: #ebe7e0;
}

.ycg-item__title {
  font-size: 15px;
  margin: 12px 0 6px;
  font-family: var(--ycg-font);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ycg-item__meta {
  color: var(--ycg-text-muted);
  font-size: 12px;
}

/* —— Page shells —— */
.ycg-breadcrumbs {
  padding: 18px 0 8px;
  color: var(--ycg-text-muted);
  font-size: 13px;
}

.ycg-breadcrumbs a { color: var(--ycg-text-sub); }

.ycg-page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  padding: 12px 0 48px;
  align-items: start;
}

.ycg-side {
  position: sticky;
  top: calc(var(--ycg-header-h) + 16px);
  background: var(--ycg-surface);
  border: 1px solid var(--ycg-border);
  border-radius: var(--ycg-radius-lg);
  padding: 20px 16px;
  box-shadow: var(--ycg-shadow);
}

.ycg-side__title {
  margin: 0 0 14px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--ycg-border);
  font-family: var(--ycg-display);
  font-size: 1.05rem;
}

.ycg-side a {
  display: block;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 8px;
  color: var(--ycg-text-sub);
  font-size: 14px;
}

.ycg-side a.is-active,
.ycg-side a:hover {
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-weight: 600;
}

.ycg-article {
  background: var(--ycg-surface);
  border: 1px solid var(--ycg-border);
  border-radius: var(--ycg-radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--ycg-shadow);
  min-height: 420px;
}

.ycg-article__lead {
  margin: 0 0 22px;
  max-width: 40em;
  color: var(--ycg-text-sub);
  font-size: 16px;
}

.ycg-article p {
  max-width: 42em;
  color: var(--ycg-text-sub);
}

.ycg-rich {
  color: var(--ycg-text-sub);
  line-height: 1.8;
  font-size: 15px;
}

.ycg-rich p { margin: 0 0 1em; max-width: none; }
.ycg-rich img { max-width: 100%; height: auto; }
.ycg-rich img[src*="ymjx_anq"] {
  width: 14px;
  height: 16px;
  max-width: none;
  vertical-align: -2px;
  display: inline;
}
.ycg-rich table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.ycg-rich td, .ycg-rich th { border: 1px solid var(--ycg-border); padding: 8px 10px; }
.ycg-rich a { color: var(--ycg-primary); }

.ycg-prose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.ycg-prose-card {
  padding: 18px 16px;
  border: 1px solid var(--ycg-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #faf8f5);
}

.ycg-prose-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ycg-ink);
  font-family: var(--ycg-display);
}

/* —— Footer —— */
.ycg-footer {
  margin-top: 24px;
  background:
    linear-gradient(180deg, #1a1f28 0%, #12161d 100%);
  color: rgba(255,255,255,.68);
  padding: 52px 0 24px;
  font-size: 13px;
}

.ycg-footer a { color: rgba(255,255,255,.82); }
.ycg-footer a:hover { color: #fff; }

.ycg-footer h3 {
  color: #fff;
  font-family: var(--ycg-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ycg-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto;
  gap: 28px;
}

.ycg-footer__brand {
  color: #fff;
  font-family: var(--ycg-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: .04em;
}

.ycg-footer__meta {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
}

.ycg-footer__phone { margin-top: 12px; }

.ycg-footer__qrs {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ycg-footer__qr {
  text-align: center;
  min-width: 108px;
}

.ycg-footer__qr img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  display: block;
  margin: 0 auto 8px;
  background: #fff;
  padding: 4px;
  border-radius: 4px;
}

.ycg-footer__legal {
  line-height: 1.85;
  font-size: 12px;
}

.ycg-footer__beian {
  color: rgba(255,255,255,.55);
  margin-right: 8px;
}

.ycg-footer__tip { white-space: nowrap; }

/* —— Pager —— */
.ycg-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.ycg-pager a,
.ycg-pager span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ycg-border);
  border-radius: 2px;
  background: #fff;
  padding: 0 10px;
}

.ycg-pager a:hover,
.ycg-pager .is-current {
  border-color: var(--ycg-primary);
  color: var(--ycg-primary);
  background: var(--ycg-primary-soft);
}

@media (max-width: 1024px) {
  .ycg-grid { grid-template-columns: repeat(2, 1fr); }
  .ycg-page { grid-template-columns: 1fr; }
  .ycg-side { position: static; }
  .ycg-prose-grid { grid-template-columns: 1fr; }
  .ycg-search { width: 200px; }
}

@media (max-width: 960px) {
  .ycg-banner__track { height: 200px; }
  .ycg-banner__arrow { width: 32px; height: 32px; font-size: 22px; }
  .ycg-banner__slide.has-mobile .ycg-banner__img--pc { display: none; }
  .ycg-banner__slide.has-mobile .ycg-banner__img--mobile { display: block; }
  .ycg-banner:has(.has-mobile) .ycg-banner__track { height: min(56vw, 260px); }
}

/* 平板/手机：单行头（logo + 搜索 + 汉堡），栏目折叠右侧抽屉 */
@media (max-width: 960px) {
  .ycg-topbar { display: none; }
  /* 取消 backdrop-filter，避免内部 fixed 被裁成站头高度 */
  .ycg-header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ycg-header__inner {
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 56px;
    padding: 8px 0;
  }
  .ycg-logo__img { height: 32px; }
  .ycg-header__actions {
    flex: 1 1 auto;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
  }
  .ycg-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .ycg-search input {
    padding: 8px 10px;
    font-size: 12px;
  }
  .ycg-search button {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 13px;
  }
  .ycg-search__label-full { display: none; }
  .ycg-search__label-short { display: inline; }
  .ycg-header__phone,
  .ycg-header__phone-ico,
  .ycg-header__phone-num,
  .ycg-nav__tel {
    display: none !important;
  }
  .ycg-nav-toggle { display: inline-block; position: relative; z-index: 130; }
  .ycg-nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 7.2em;
    max-width: 42vw;
    height: 100vh;
    height: 100dvh;
    z-index: 220;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 56px 0 24px;
    margin: 0;
    background: #fff;
    border-left: 1px solid var(--ycg-border);
    box-shadow: -8px 0 28px rgba(20, 24, 31, .12);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, visibility .22s;
  }
  html.ycg-nav-open .ycg-nav,
  .ycg-header.is-nav-open .ycg-nav {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .ycg-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 0;
    font-size: 15px;
    line-height: 1.3;
    border-bottom: 1px solid #f2f0eb;
    box-sizing: border-box;
  }
  .ycg-nav a:last-child { border-bottom: 0; }
  .ycg-nav__mobile-only { display: flex; }
  .ycg-nav-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(20, 24, 31, .42);
  }
  .ycg-nav-mask[hidden] { display: none !important; }
  .ycg-header.is-nav-open .ycg-nav-toggle { color: var(--ycg-ink); }
}

@media (max-width: 760px) {
  .ycg-banner__track { height: 160px; }
  .ycg-footer { padding: 36px 0 20px; }
  .ycg-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
  }
  .ycg-footer__grid > div:first-child,
  .ycg-footer__qrs { grid-column: 1 / -1; }
  .ycg-footer__brand { font-size: 1.2rem; margin-bottom: 8px; }
  .ycg-footer h3 { margin-bottom: 10px; font-size: 12px; }
  .ycg-footer__grid > div > p { margin: 0 0 8px; line-height: 1.5; }
  .ycg-footer__phone { margin-top: 8px; }
  .ycg-footer__meta { margin-top: 24px; padding-top: 14px; }
  .ycg-footer__tip { white-space: normal; }
  .ycg-grid { grid-template-columns: 1fr; }
  .ycg-value-row { grid-template-columns: 1fr; }
  .ycg-feat__tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none;
  }
  .ycg-feat__tabs::-webkit-scrollbar { display: none; }
  .ycg-feat__tab { flex: 0 0 auto; }
}

/* 手机 UA（含「请求桌面网站」）：强制走移动端布局，不依赖视口宽度 */
html.ycg-is-mobile .ycg-topbar { display: none !important; }
html.ycg-is-mobile .ycg-banner__cats,
html.ycg-is-mobile .ycg-banner__card { display: none !important; }
html.ycg-is-mobile .ycg-banner__track { height: 180px; }
html.ycg-is-mobile .ycg-banner__slide.has-mobile .ycg-banner__img--pc { display: none; }
html.ycg-is-mobile .ycg-banner__slide.has-mobile .ycg-banner__img--mobile { display: block; }
html.ycg-is-mobile .ycg-banner:has(.has-mobile) .ycg-banner__track { height: min(56vw, 260px); }
html.ycg-is-mobile .ycg-header__inner {
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 56px;
  padding: 8px 0;
}
html.ycg-is-mobile .ycg-logo__img { height: 32px; }
html.ycg-is-mobile .ycg-header__actions {
  flex: 1 1 auto;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}
html.ycg-is-mobile .ycg-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
html.ycg-is-mobile .ycg-search input {
  padding: 8px 10px;
  font-size: 12px;
}
html.ycg-is-mobile .ycg-search button {
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: 13px;
}
html.ycg-is-mobile .ycg-search__label-full { display: none; }
html.ycg-is-mobile .ycg-search__label-short { display: inline; }
html.ycg-is-mobile .ycg-header {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.ycg-is-mobile .ycg-header__phone,
html.ycg-is-mobile .ycg-header__phone-ico,
html.ycg-is-mobile .ycg-header__phone-num,
html.ycg-is-mobile .ycg-nav__tel {
  display: none !important;
}
html.ycg-is-mobile .ycg-nav-toggle { display: inline-block; position: relative; z-index: 130; }
html.ycg-is-mobile .ycg-nav {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 7.2em;
  max-width: 42vw;
  height: 100vh;
  height: 100dvh;
  z-index: 220;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 56px 0 24px;
  margin: 0;
  background: #fff;
  border-left: 1px solid var(--ycg-border);
  box-shadow: -8px 0 28px rgba(20, 24, 31, .12);
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .22s ease, visibility .22s;
}
html.ycg-is-mobile.ycg-nav-open .ycg-nav,
html.ycg-is-mobile .ycg-header.is-nav-open .ycg-nav {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
html.ycg-is-mobile .ycg-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.3;
  border-bottom: 1px solid #f2f0eb;
  box-sizing: border-box;
}
html.ycg-is-mobile .ycg-nav__mobile-only { display: flex; }
html.ycg-is-mobile .ycg-nav-mask {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(20, 24, 31, .42);
}
html.ycg-is-mobile .ycg-nav-mask[hidden] { display: none !important; }
html.ycg-is-mobile .ycg-container { width: min(100% - 24px, var(--ycg-container)); }
html.ycg-is-mobile .ycg-value-row { grid-template-columns: 1fr; }
html.ycg-is-mobile .ycg-hotcat-grid { grid-template-columns: 1fr 1fr; }
html.ycg-is-mobile .ycg-prod-grid,
html.ycg-is-mobile .ycg-prod-grid--4,
html.ycg-is-mobile .ycg-steward__people,
html.ycg-is-mobile .ycg-firm__goods { grid-template-columns: 1fr 1fr; }
/* 专区商品是图文横排卡，手机必须单列，否则会撑出屏外 */
html.ycg-is-mobile .ycg-zone .ycg-prod-grid--zone {
  grid-template-columns: minmax(0, 1fr);
}
html.ycg-is-mobile .ycg-zone {
  overflow: hidden;
  max-width: 100%;
}
html.ycg-is-mobile .ycg-zone__goods,
html.ycg-is-mobile .ycg-zone__panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
html.ycg-is-mobile .ycg-firm-grid { grid-template-columns: 1fr; }
html.ycg-is-mobile .ycg-news__layout { grid-template-columns: 1fr; }
html.ycg-is-mobile .ycg-news__featured,
html.ycg-is-mobile .ycg-news__list { grid-template-columns: 1fr; }
html.ycg-is-mobile .ycg-zone__body { grid-template-columns: 1fr; }
html.ycg-is-mobile .ycg-zone__head {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
html.ycg-is-mobile .ycg-zone__tabs {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.ycg-is-mobile .ycg-zone__tabs::-webkit-scrollbar { display: none; }
html.ycg-is-mobile .ycg-zone__tab {
  flex: 0 0 auto;
  max-width: 10.5em;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.ycg-is-mobile .ycg-footer { padding: 36px 0 20px; }
html.ycg-is-mobile .ycg-footer__grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
}
html.ycg-is-mobile .ycg-footer__grid > div:first-child,
html.ycg-is-mobile .ycg-footer__qrs { grid-column: 1 / -1; }
html.ycg-is-mobile .ycg-footer__brand { font-size: 1.2rem; margin-bottom: 8px; }
html.ycg-is-mobile .ycg-footer h3 { margin-bottom: 10px; font-size: 12px; }
html.ycg-is-mobile .ycg-footer__grid > div > p { margin: 0 0 8px; line-height: 1.5; }
html.ycg-is-mobile .ycg-footer__phone { margin-top: 8px; }
html.ycg-is-mobile .ycg-footer__meta { margin-top: 24px; padding-top: 14px; }
html.ycg-is-mobile .ycg-footer__tip { white-space: normal; }
html.ycg-is-mobile .ycg-feat__tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  scrollbar-width: none;
}
html.ycg-is-mobile .ycg-feat__tabs::-webkit-scrollbar { display: none; }
html.ycg-is-mobile .ycg-feat__tab { flex: 0 0 auto; }

@media (max-width: 520px) {
  .ycg-search button { padding: 0 10px; }
}

/* —— Homepage —— */
.ycg-section--tight { padding-top: 0; }

.ycg-section__head--center {
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.ycg-section__sub {
  margin: 0;
  color: var(--ycg-text-muted);
  font-size: 14px;
}

.ycg-section__more {
  position: absolute;
  right: 0;
  top: 8px;
  font-size: 13px;
  color: var(--ycg-text-muted);
  font-family: var(--ycg-font);
  font-weight: 400;
}

.ycg-value-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ycg-value-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 14px 12px;
}

.ycg-value-card svg.ycg-value-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--ycg-primary);
}

.ycg-value-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.ycg-value-card p {
  margin: 0;
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.45;
}

.ycg-hotcat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.ycg-hotcat {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}

.ycg-hotcat:hover {
  border-color: var(--ycg-primary);
  transform: translateY(-2px);
  color: inherit;
}

.ycg-hotcat__media {
  display: block;
  height: 96px;
  background: #f5f5f5;
  overflow: hidden;
}

.ycg-hotcat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ycg-hotcat__ph {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--ycg-primary);
  font-weight: 600;
  font-size: 14px;
  background: var(--ycg-primary-soft);
}

.ycg-hotcat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 12px;
}

.ycg-hotcat__body strong {
  font-size: 14px;
  font-weight: 600;
}

.ycg-hotcat__body em {
  font-style: normal;
  font-size: 12px;
  color: var(--ycg-text-muted);
}

.ycg-feat__tabs,
.ycg-zone__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}

.ycg-feat__tab,
.ycg-zone__tab {
  appearance: none;
  border: 1px solid var(--ycg-border);
  background: #fff;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

.ycg-feat__tab.is-active,
.ycg-zone__tab.is-active {
  border-color: var(--ycg-primary);
  color: var(--ycg-primary);
  background: var(--ycg-primary-soft);
  font-weight: 600;
}

.ycg-feat__panel[hidden],
.ycg-zone__panel[hidden],
.ycg-news__panel[hidden] { display: none; }

/* 短信验证码区：按运营商通道动态显隐；需压过 label/flex 的 display */
.ycg-sms-field[hidden] {
  display: none !important;
}

.ycg-feat__more,
.ycg-firm__more {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
}

.ycg-feat__more a,
.ycg-firm__more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--ycg-primary);
  border-radius: 2px;
  color: var(--ycg-primary);
  background: #fff;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.ycg-feat__more a:hover,
.ycg-firm__more a:hover {
  background: var(--ycg-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(230, 52, 41, .22);
}

.ycg-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ycg-prod-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ycg-prod {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 10px;
  transition: border-color .2s ease;
}

.ycg-prod:hover { border-color: var(--ycg-primary); }

/* 云采购专区：图片在左（方形固定高度、居中裁剪、左对齐）+ 资料在右 */
.ycg-prod--row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
}

.ycg-prod--row .ycg-prod__img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  margin-bottom: 0;
}

.ycg-prod--row .ycg-prod__img img {
  object-fit: cover;
  object-position: center;
}

.ycg-prod--row .ycg-prod__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ycg-prod--row .ycg-prod__headline,
.ycg-prod--row .ycg-prod__params {
  margin: 0;
}

.ycg-prod--row .ycg-prod__foot {
  margin-top: auto;
}

.ycg-prod__img {
  display: block;
  position: relative;
  height: 148px;
  background: #f6f6f6;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}

.ycg-prod__hot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #f08a24;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.ycg-prod__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ycg-prod__video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.ycg-prod__img.is-playing .ycg-prod__video { display: block; }
.ycg-prod__img.is-playing > img { visibility: hidden; }
.ycg-prod__img.is-playing .ycg-prod__play { display: none; }
.ycg-prod__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  border: 2px solid rgba(255, 255, 255, .92);
  box-sizing: border-box;
  cursor: pointer;
}
.ycg-prod__play::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 10px;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fff;
}

.ycg-prod__headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}

.ycg-prod__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0.8em;
}

.ycg-prod__price {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ycg-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ycg-prod__meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ycg-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ycg-prod__params {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.5;
}

.ycg-prod__params b {
  color: #444;
  font-weight: 600;
}

.ycg-prod__params .ycg-prod__tel {
  white-space: nowrap;
}

.ycg-prod__params .ycg-prod__tel a {
  color: var(--ycg-primary);
}

.ycg-prod__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ycg-prod__ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  background: var(--ycg-primary);
  color: #fff !important;
  border-radius: 2px;
  font-size: 13px;
}

.ycg-prod__ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ycg-primary);
  white-space: nowrap;
}

.ycg-prod__ok-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.ycg-prod__ok-ico .ok-shield {
  fill: #eaf4fe;
  stroke: #a9d2f5;
  stroke-width: 1;
}

.ycg-prod__ok-ico .ok-glass {
  fill: #fff;
  stroke: #5aa9e6;
  stroke-width: 1.4;
}

.ycg-prod__ok-ico .ok-handle {
  fill: none;
  stroke: #5aa9e6;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.ycg-prod__ok-ico .ok-check {
  fill: none;
  stroke: #3d9be0;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ycg-zone {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 16px 18px 18px;
  margin-bottom: 16px;
}

.ycg-zone__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ycg-zone__head h3 {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
}

.ycg-zone__tabs {
  flex: 1;
  justify-content: flex-start;
  margin: 0;
}

.ycg-zone__head > a {
  margin-left: auto;
  font-size: 13px;
  color: var(--ycg-text-muted);
}

.ycg-zone__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: stretch;
}

.ycg-zone__advisor {
  background: linear-gradient(165deg, #E63429 0%, #c62820 100%);
  color: #fff;
  border-radius: 4px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ycg-zone__advisor-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.ycg-zone__advisor-lead {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .92;
}

.ycg-zone__advisor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ycg-zone__advisor-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 2px;
  font-size: 12px;
}

.ycg-zone__advisor-card {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 10px;
  margin-top: 4px;
}

.ycg-zone__advisor-card img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.ycg-zone__advisor-card strong {
  display: block;
  font-size: 15px;
}

.ycg-zone__advisor-card em {
  display: block;
  font-style: normal;
  font-size: 12px;
  opacity: .9;
  margin-top: 2px;
}

.ycg-zone__advisor-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  background: #fff;
  color: var(--ycg-primary) !important;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
}

.ycg-zone__advisor-more {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.9) !important;
}

.ycg-zone__goods { min-width: 0; }

.ycg-prod-grid--zone {
  grid-template-columns: repeat(2, 1fr);
}

.ycg-firm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ycg-firm {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.ycg-firm__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ycg-firm__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 72px;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  background: #fafafa;
  overflow: hidden;
}

.ycg-firm__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ycg-shop-card__placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.ycg-firm__name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.ycg-firm__name a {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ycg-firm__area {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #f08a24;
  background: #fff7ef;
  border: 1px solid #f3c48c;
  border-radius: 2px;
  padding: 0 4px;
}

.ycg-firm__main {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ycg-firm__main span { color: #999; }

.ycg-firm__stat {
  margin: 0 0 12px;
  font-size: 13px;
  color: #888;
}

.ycg-firm__stat em {
  font-style: normal;
  color: var(--ycg-primary);
  font-weight: 600;
}

.ycg-firm__stat i {
  font-style: normal;
  color: var(--ycg-border);
  margin: 0 8px;
}

.ycg-firm__goods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  border-top: 1px dashed var(--ycg-border);
  padding-top: 12px;
  margin-bottom: 12px;
}

.ycg-firm__g {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: #444;
}

.ycg-firm__g img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 2px;
  background: #f5f5f5;
}

.ycg-firm__g span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ycg-firm__g em {
  font-style: normal;
  color: var(--ycg-primary);
}

.ycg-firm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.ycg-firm__actions .ycg-btn {
  min-height: 40px;
  padding: 0 8px;
  font-size: 14px;
}

.ycg-firm__actions .ycg-btn--ghost {
  color: var(--ycg-primary);
  border-color: var(--ycg-primary);
}

.ycg-steward {
  background: linear-gradient(180deg, #f7f7f8 0%, #fff 100%);
}

.ycg-steward__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
}

.ycg-steward__info {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 24px 22px;
}

.ycg-steward__info h3 { margin: 0 0 8px; font-size: 18px; }
.ycg-steward__info > p { margin: 0 0 14px; color: var(--ycg-text-muted); font-size: 13px; }
.ycg-steward__info ul { margin: 0 0 18px; padding: 0; list-style: none; }
.ycg-steward__info li {
  position: relative;
  padding: 6px 0 6px 16px;
  font-size: 13px;
  color: #444;
}
.ycg-steward__info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ycg-primary);
}

.ycg-steward__ticker {
  margin-top: 18px;
  height: 350px;
  overflow: hidden;
  border-top: 1px dashed var(--ycg-border);
  padding-top: 10px;
}

.ycg-steward__ticker-track { animation: ycg-ticker 18s linear infinite; }
.ycg-steward__ticker p { margin: 0; padding: 4px 0; font-size: 12px; color: #666; }

@keyframes ycg-ticker {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.ycg-steward__people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ycg-steward__person {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 14px 10px 16px;
  text-align: center;
  transition: border-color .2s ease, transform .2s ease;
}

.ycg-steward__person:hover {
  border-color: var(--ycg-primary);
  transform: translateY(-2px);
}

.ycg-steward__person img {
  width: 96px;
  height: 112px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.ycg-steward__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ycg-ink);
  margin-bottom: 2px;
}

.ycg-steward__role {
  display: block;
  font-size: 12px;
  color: var(--ycg-primary);
  margin-bottom: 4px;
}

.ycg-steward__spec {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 4px;
  min-height: 2.8em;
}

.ycg-steward__served {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.ycg-steward__cta {
  display: inline-block;
  min-width: 88px;
  padding: 6px 12px;
  background: var(--ycg-primary);
  color: #fff !important;
  border-radius: 2px;
  font-size: 13px;
  margin-bottom: 6px;
}

.ycg-steward__rate { display: block; font-size: 12px; color: #888; }

.ycg-buyers {
  background: linear-gradient(180deg, #f3f0ea 0%, #faf8f4 45%, #fff 100%);
  overflow: hidden;
}

.ycg-buyers__wrap {
  position: relative;
  padding: 4px 0 8px;
}

.ycg-buyers__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ycg-buyers__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: ycg-buyers-marquee 42s linear infinite;
  will-change: transform;
}

.ycg-buyers__wrap:hover .ycg-buyers__track,
.ycg-buyers__wrap.is-paused .ycg-buyers__track {
  animation-play-state: paused;
}

@keyframes ycg-buyers-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ycg-buyer {
  flex: 0 0 300px;
  width: 300px;
  background: #fff;
  border: 1px solid rgba(228, 224, 216, .95);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 24, 31, .06);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ycg-buyer:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(20, 24, 31, .1);
}

.ycg-buyer__media {
  position: relative;
  height: 150px;
  background: #eceae5;
  overflow: hidden;
}

.ycg-buyer__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(20,24,31,.28));
  pointer-events: none;
}

.ycg-buyer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ycg-buyer__body {
  padding: 14px 14px 12px;
  flex: 1;
}

.ycg-buyer h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ycg-ink);
  line-height: 1.35;
}

.ycg-buyer__time {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ycg-primary);
  font-weight: 500;
}

.ycg-buyer__txt {
  margin: 0;
  font-size: 13px;
  color: #5a6270;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}

.ycg-buyer__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  background: #f7f5f1;
  border-top: 1px solid #ebe7df;
  font-size: 12px;
}

.ycg-buyer__tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 2px;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-weight: 600;
}

.ycg-buyer__area {
  color: #8a93a3;
  white-space: nowrap;
}

.ycg-buyers__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 1px solid var(--ycg-border);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: #444;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.ycg-buyers__arrow:hover {
  border-color: var(--ycg-primary);
  color: var(--ycg-primary);
}

.ycg-buyers__arrow--prev { left: -6px; }
.ycg-buyers__arrow--next { right: -6px; }

@media (max-width: 760px) {
  .ycg-buyer { flex-basis: 260px; width: 260px; }
  .ycg-buyers__arrow { display: none; }
  .ycg-buyers__viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.ycg-news__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 385px);
  gap: 12px;
  align-items: stretch;
}

.ycg-news__main,
.ycg-news__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 0 20px 18px;
  overflow: hidden;
}

.ycg-news__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ycg-border);
  margin-bottom: 14px;
}

.ycg-news__tab-list {
  display: flex;
  align-items: center;
  gap: 66px;
  padding-left: 7px;
  margin-bottom: -1px;
}

.ycg-news__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 14px 0;
  font-size: 15px;
  line-height: 21px;
  color: #666;
  cursor: pointer;
}

.ycg-news__tab.is-active {
  color: var(--ycg-primary);
  font-weight: 600;
}

.ycg-news__tabs > a,
.ycg-news__side-head a {
  font-size: 12px;
  color: #888;
}

.ycg-news__featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 12px;
  margin-bottom: 14px;
}

.ycg-news__feature {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.ycg-news__feature img {
  width: 124px;
  height: 84px;
  object-fit: cover;
  border-radius: 3px;
  background: #f3f3f3;
}

.ycg-news__feature-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ycg-news__feature-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ycg-news__feature-date,
.ycg-news__list time,
.ycg-news__side-list time {
  font-size: 12px;
  color: #999;
  flex-shrink: 0;
  white-space: nowrap;
}

.ycg-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 10px;
}

.ycg-news__list a,
.ycg-news__side-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: #333;
  line-height: 22px;
  padding: 2px 0;
}

.ycg-news__list a { font-size: 14px; }
.ycg-news__side-list a { font-size: 13px; }

.ycg-news__list a i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.ycg-news__list a span,
.ycg-news__side-list a span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ycg-news__list a:hover,
.ycg-news__side-list a:hover { color: var(--ycg-primary); }

.ycg-news__side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--ycg-border);
  margin-bottom: 23px;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
}

.ycg-news__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ycg-border);
  min-width: 0;
}

.ycg-news__cats a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 0 4px;
  border: 1px solid var(--ycg-border);
  border-radius: 3px;
  font-size: 13px;
  color: #444;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
}

.ycg-news__cats a:hover {
  border-color: var(--ycg-primary);
  color: var(--ycg-primary);
  background: var(--ycg-primary-soft);
}

.ycg-news__side-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  row-gap: 10px;
  min-width: 0;
  width: 100%;
}
.ycg-news__side-list li {
  min-width: 0;
  overflow: hidden;
}
.ycg-news__side-list time {
  margin-left: auto;
}

@media (max-width: 1100px) {
  .ycg-hotcat-grid { grid-template-columns: repeat(4, 1fr); }
  .ycg-prod-grid,
  .ycg-prod-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .ycg-value-row { grid-template-columns: 1fr 1fr; }
  .ycg-firm-grid { grid-template-columns: repeat(2, 1fr); }
  .ycg-steward__grid { grid-template-columns: 1fr; }
  .ycg-news__layout { grid-template-columns: 1fr; }
  .ycg-section__more { position: static; }
  .ycg-zone__body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ycg-hotcat-grid { grid-template-columns: 1fr 1fr; }
  .ycg-prod-grid,
  .ycg-prod-grid--4,
  .ycg-steward__people,
  .ycg-firm__goods { grid-template-columns: 1fr 1fr; }
  .ycg-zone .ycg-prod-grid--zone {
    grid-template-columns: minmax(0, 1fr);
  }
  .ycg-zone {
    overflow: hidden;
    max-width: 100%;
  }
  .ycg-zone__goods,
  .ycg-zone__panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .ycg-news__featured,
  .ycg-news__list { grid-template-columns: 1fr; }
  .ycg-firm-grid { grid-template-columns: 1fr; }
  .ycg-value-row { grid-template-columns: 1fr; }
  .ycg-zone__head { flex-direction: column; align-items: flex-start; }
  .ycg-zone__head > a { margin-left: 0; }
}

/* —— 我要买 /g —— */
.ycg-buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  padding-bottom: 48px;
}
.ycg-buy__lead {
  margin: -4px 0 18px;
  color: var(--ycg-text-sub);
  font-size: 14px;
}
.ycg-buy-filter {
  list-style: none;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
}
.ycg-buy-filter > li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ycg-border);
  font-size: 13px;
}
.ycg-buy-filter > li:last-child { border-bottom: 0; }
.ycg-buy-filter > li > span { color: var(--ycg-text-muted); padding-top: 4px; }
.ycg-buy-filter > li > div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ycg-buy-filter a {
  padding: 2px 8px;
  border-radius: 3px;
  color: #333;
}
.ycg-buy-filter a.is-on,
.ycg-buy-filter a:hover {
  background: var(--ycg-primary);
  color: #fff;
}
.ycg-buy-filter__picked em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--ycg-primary);
  color: var(--ycg-primary);
  font-style: normal;
  border-radius: 3px;
}
.ycg-buy-filter__picked em a { padding: 0; color: inherit; }
.ycg-buy-filter__reset { color: var(--ycg-text-muted) !important; background: none !important; }
.ycg-buy-filter__count { margin: 0; width: 100%; color: var(--ycg-text-sub); }
.ycg-buy-rec {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 14px 16px 8px;
  margin-bottom: 16px;
}
.ycg-buy-rec__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ycg-buy-rec__swap {
  border: 0;
  background: none;
  color: var(--ycg-primary);
  cursor: pointer;
  font: inherit;
}
.ycg-buy-rec__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ycg-buy-rec__list[hidden] {
  display: none !important;
}
.ycg-buy-rec__list a { display: grid; gap: 6px; font-size: 12px; color: #333; }
.ycg-buy-rec__list img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 4px;
  background: #f6f6f6;
}
.ycg-buy-rec__list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ycg-buy-toolbar {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.ycg-buy-tabs { display: flex; gap: 16px; margin-bottom: 10px; font-weight: 600; }
.ycg-buy-tabs .is-on { color: var(--ycg-primary); border-bottom: 2px solid var(--ycg-primary); padding-bottom: 4px; }
.ycg-buy-sort {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 13px;
}
.ycg-buy-sort .is-on { color: var(--ycg-primary); font-weight: 600; }
.ycg-buy-price { display: flex; align-items: center; gap: 6px; }
.ycg-buy-price input {
  width: 72px;
  height: 30px;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 0 8px;
}
.ycg-buy-price button, .ycg-buy-check {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ycg-border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.ycg-buy-check.is-on { border-color: var(--ycg-primary); color: var(--ycg-primary); }
.ycg-buy-bars { margin-top: 12px; font-size: 12px; color: var(--ycg-text-sub); }
.ycg-buy-bars > div { display: grid; grid-template-columns: 64px 1fr 48px; gap: 8px; align-items: center; margin-top: 4px; }
.ycg-buy-bars i {
  display: block;
  height: 8px;
  background: var(--ycg-primary);
  border-radius: 4px;
  min-width: 2px;
}
.ycg-buy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ycg-buy-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 140px;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 16px;
}
.ycg-buy-card__img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  background: #f6f6f6;
}
.ycg-buy-card h2 { font-size: 16px; margin: 0 0 8px; font-family: var(--ycg-font); }
.ycg-buy-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-buy-card__facts em { color: #333; font-style: normal; margin-left: 4px; }
.ycg-buy-card__attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ycg-text-sub);
}
.ycg-buy-card__attrs div { display: grid; grid-template-columns: auto 1fr; gap: 6px; min-width: 0; }
.ycg-buy-card__attrs dt { color: var(--ycg-text-muted); }
.ycg-buy-card__attrs dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ycg-buy-card__price { margin: 0 0 6px; }
.ycg-buy-card__price strong { color: var(--ycg-primary); font-size: 18px; }
.ycg-buy-card__shop { margin: 0 0 10px; font-size: 13px; }
.ycg-buy-card__cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.ycg-buy-card__cta .ycg-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.ycg-buy-card__cta span { font-size: 12px; color: var(--ycg-text-muted); }
.ycg-buy-card__side { font-size: 13px; color: var(--ycg-text-sub); }
.ycg-buy-score b { color: var(--ycg-primary); font-size: 20px; margin-right: 4px; }
/* ⚠️ 商品列表（/g.html）的「综合评分」仍是进度条口径，非星级；
   但配色已并入全局评分金 token，与 .ycg-stars 保持同一色。 */
.ycg-buy-stars {
  height: 8px;
  background: var(--ycg-star-off);
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 10px;
}
.ycg-buy-stars i { display: block; height: 100%; background: var(--ycg-star-on); }
.ycg-buy-card__ask {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--ycg-border);
  font-size: 13px;
  color: var(--ycg-text-sub);
}
.ycg-buy-qa {
  background: #fff8f6;
  border: 1px solid #f3d2cc;
  border-radius: 8px;
  padding: 16px;
}
.ycg-buy-qa ul { list-style: none; margin: 8px 0; padding: 0; }
.ycg-buy-qa li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.ycg-buy-empty { padding: 24px; background: #fff; text-align: center; }
.ycg-buy-risk, .ycg-buy-join { font-size: 12px; color: var(--ycg-text-muted); }
.ycg-buy__side { display: grid; gap: 16px; align-content: start; }
.ycg-buy-steward, .ycg-buy-rank, .ycg-buy-shops {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 16px;
}
.ycg-buy-steward h2, .ycg-buy-rank h2, .ycg-buy-shops h2 { font-size: 16px; margin: 0 0 8px; font-family: var(--ycg-font); }
.ycg-buy-steward ul { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--ycg-text-sub); }
.ycg-buy-steward form { display: grid; gap: 8px; }
.ycg-buy-steward input {
  height: 36px;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 0 10px;
}
.ycg-buy-steward__code { display: flex; gap: 6px; align-items: stretch; }
.ycg-buy-steward__code input { flex: 1; min-width: 0; }
.ycg-buy-steward__code button {
  flex: 0 0 auto;
  min-width: 7.5em;
  border: 1px solid var(--ycg-border);
  background: #fafafa;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.ycg-buy-rank ol, .ycg-buy-shops ul { list-style: none; margin: 0; padding: 0; }
.ycg-buy-rank a, .ycg-buy-shops a {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ycg-border);
  font-size: 13px;
}
.ycg-buy-rank i {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: #eee;
  text-align: center;
  line-height: 18px;
  font-style: normal;
  flex-shrink: 0;
}
.ycg-buy-rank li:nth-child(-n+3) i { background: var(--ycg-primary); color: #fff; }
.ycg-buy-rank span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ycg-buy-rank em { color: var(--ycg-primary); font-style: normal; }
.ycg-buy-shops img { width: 48px; height: 48px; object-fit: contain; background: #fafafa; border-radius: 4px; }
.ycg-buy-shops strong { display: block; }
.ycg-buy-shops p { margin: 4px 0 0; color: var(--ycg-text-muted); font-size: 12px; }
.ycg-buy-shop-q { max-width: 280px; margin: 0; }
.ycg-buy-shop-q input[type="search"] { min-width: 0; }
.ycg-shop-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 140px;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  align-items: start;
}
.ycg-shop-row__cover {
  display: block;
  width: 220px;
  height: 165px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}
.ycg-shop-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ycg-shop-row__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 14px;
}
.ycg-shop-row__body h2 {
  font-size: 18px;
  margin: 0 0 8px;
  font-family: var(--ycg-font);
}
.ycg-shop-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-shop-row__meta em { color: var(--ycg-primary); font-style: normal; font-weight: 600; }
.ycg-shop-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.ycg-shop-row__badges span {
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--ycg-primary);
  color: var(--ycg-primary);
  border-radius: 3px;
  white-space: nowrap; /* 与 .ycg-shop-badges 同款徽标，避免窄列折断文字 */
}
.ycg-shop-row__main {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
.ycg-shop-row__main a { margin-left: 8px; color: var(--ycg-primary); }
.ycg-shop-row__side {
  font-size: 13px;
  color: var(--ycg-text-sub);
  text-align: right;
}
.ycg-shop-row__report {
  display: inline-block;
  margin-top: 8px;
  color: var(--ycg-primary);
  font-size: 13px;
}

/* —— 星级认证：5 星展示（站内唯一星级组件）———————————————————
   原来是「20px 红色数字 + 8px 橙色进度条」，进度条读起来像"完成度"而不是评分。
   改为 5 颗星：双层同字叠放 —— 底层灰星当空位，上层金星用 width 裁切，
   所以 4.5 星能精确显示半颗，不是只能整数跳。
   填充比例直接取后端的 star_width（= star/5*100），模板侧不做任何计算。

   尺寸档（全站星级都走这一套，不再各页各写一份实现）：
     .ycg-stars      15px —— 厂商详情页头部评分行
     --xl            22px —— 厂商信用认证页 hero
     --lg            17px —— 厂商大全侧栏主评
     --sm            11px —— 资质徽标行内迷你星
   配色取全局 --ycg-star-on / --ycg-star-off（见文件顶部 :root）。 */
.ycg-stars {
  position: relative;
  display: inline-block;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", "MS Gothic", sans-serif;
  font-size: 15px;
  font-style: normal; /* 徽标内嵌在 <i> 里，必须压掉斜体 */
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--ycg-star-off);
}
.ycg-stars::before {
  content: "\2605\2605\2605\2605\2605"; /* ★★★★★ 空位底纹 */
}
.ycg-stars::after {
  content: "\2605\2605\2605\2605\2605"; /* ★★★★★ 点亮层 */
  position: absolute;
  top: 0;
  left: 0;
  width: var(--star-fill, 0%);
  overflow: hidden;
  color: var(--ycg-star-on);
}
/* 注：字距也会算进行内盒宽度，末星之后那一点字距会让填充比例比实际星形
   略偏小约 2%，4.5 星这类半星完全看不出来，换来星星之间更透气。 */
.ycg-stars--xl { font-size: 22px; letter-spacing: 3px; } /* 信用认证页 hero */
.ycg-stars--lg { font-size: 17px; letter-spacing: 2px; } /* 厂商大全侧栏主评 */
.ycg-stars--sm { font-size: 11px; letter-spacing: 1.5px; } /* 徽标内迷你星（档位保留） */

/* —— 星级评分数字（一位小数）———————————————————————————————
   站内「星星 + 4.6」这一形态在大全侧栏 / 厂商详情 hero / 信用认证页 hero 共用，
   数字统一走等宽数字（tabular-nums）：各厂商分值不同，比例数字会让 4.6 与 4.1
   在列表里左右跳动，等宽后整列对齐。字号与配色由各容器自己给。
   数值口径见各模板内的 {php} 块（与 BuyListService::score() 一致）。 */
.ycg-score-num {
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ycg-text);
}

/* 注：资质徽标行里的星级 chip 原先内嵌迷你星（.ycg-badge-star 包一个 <i>），
   现改为「4.6星认证」纯文字 chip，与同行的「平台审查 / 实力认证」统一为
   一套描边外框，故 .ycg-badge-star 这个专为内嵌 <i> 而生的容器已删除。 */
/* 侧栏整体靠右（.ycg-shop-row__side 用 text-align: right），但本行是 flex 容器，
   text-align 管不到 flex 主轴 —— 必须显式 flex-end 才能与下方「星级认证 /
   厂商信用认证」右边缘对齐。≤1024px 侧栏转左对齐时再改回 flex-start。 */
.ycg-shop-row__rate { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 6px; }
.ycg-shop-row__rate .ycg-score-num { font-size: 17px; }
.ycg-shop-row__rate-cap {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--ycg-text-sub);
}
@media (max-width: 1024px) {
  .ycg-buy { grid-template-columns: 1fr; }
  .ycg-buy-rec__list { grid-template-columns: repeat(3, 1fr); }
  .ycg-buy-card { grid-template-columns: 140px 1fr; }
  .ycg-buy-card__side { grid-column: 1 / -1; }
  .ycg-shop-row { grid-template-columns: 140px 1fr; }
  .ycg-shop-row__cover { width: 140px; height: 105px; }
  .ycg-shop-row__side { grid-column: 1 / -1; text-align: left; }
  /* 侧栏转左对齐，评分行也要跟着回左，否则会孤零零贴在右边缘 */
  .ycg-shop-row__rate { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .ycg-buy-filter > li { grid-template-columns: 1fr; }
  .ycg-buy-rec__list { grid-template-columns: 1fr 1fr; }
  .ycg-buy-card { grid-template-columns: 1fr; }
  .ycg-buy-card__attrs { grid-template-columns: 1fr; }
  .ycg-shop-row { grid-template-columns: 1fr; }
  .ycg-shop-row__cover { width: 100%; height: 180px; }
}

/* —— 厂商店铺 —— */
.ycg-shop { padding-bottom: 48px; }
.ycg-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 20px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 6px;
}
.ycg-shop-tabs a {
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 14px;
}
.ycg-shop-tabs a.is-on { background: var(--ycg-primary); color: #fff; }
.ycg-shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
/* 两个 grid 项都要显式 min-width: 0。
   轨道是 minmax(0, ·fr)，但 grid item 默认 min-width: auto —— 自动最小尺寸取
   内容的 min-content，会把轨道顶出容器。本页的元凶是缩略图条：12 张 78px 缩略图
   的 min-content = 1024px，加上两侧翻页按钮，整条 strip 是 1092px，于是 375px
   视口下整页横向溢出 754px。
   注意：给 .ycg-shop-hero__thumbs 自己设 min-width: 0 / overflow-x: auto 是不够的
   —— 那管的是「实际布局时的自动最小尺寸」，管不住它向上贡献给父级的 min-content。 */
.ycg-shop-hero__media,
.ycg-shop-hero__info { min-width: 0; }
.ycg-shop-hero__main {
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  min-height: 280px;
  position: relative;
}
.ycg-shop-hero__main img,
.ycg-shop-hero__main video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #f3f3f3;
}
.ycg-shop-player { position: relative; }
/* 已有原生 controls，不再叠自定义红播放钮 */
.ycg-shop-player__play { display: none !important; }
.ycg-shop-hero__strip {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; min-width: 0; max-width: 100%;
}
.ycg-shop-hero__thumbs {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scroll-behavior: smooth; flex: 1;
  min-width: 0; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0; height: 62px;
}
.ycg-shop-hero__thumbs::-webkit-scrollbar { display: none; }
.ycg-shop-hero__thumbs button {
  flex: 0 0 78px;
  width: 78px;
  height: 58px;
  min-width: 78px;
  max-width: 78px;
  min-height: 58px;
  max-height: 58px;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #eee;
  cursor: pointer;
  overflow: hidden;
  font-size: 11px;
  color: #fff;
  position: relative;
  display: block;
}
.ycg-shop-hero__thumbs button.is-on { border-color: var(--ycg-primary); }
.ycg-shop-hero__thumbs img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.ycg-shop-thumb-label {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a); font-size: 12px; letter-spacing: 1px;
}
.ycg-shop-hero__nav {
  flex: 0 0 28px; height: 58px; border: 1px solid var(--ycg-border); background: #fff; cursor: pointer;
  border-radius: 4px; position: relative;
}
.ycg-shop-hero__nav::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid #666; border-right: 2px solid #666; transform: translate(-40%, -50%) rotate(45deg);
}
.ycg-shop-hero__nav--prev::before { transform: translate(-20%, -50%) rotate(-135deg); }
.ycg-shop-hero__nav:hover { border-color: var(--ycg-primary); }
.ycg-shop-hero__nav:hover::before { border-color: var(--ycg-primary); }
.ycg-shop-hero__info h1 { font-size: 22px; margin-bottom: 8px; }
.ycg-shop-score { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.ycg-shop-score em { color: var(--ycg-primary); font-style: normal; }
/* flex-wrap + nowrap 缺一不可：联系页窄列（375px 下信息列约 189px）里
   三个徽标排不下，缺 wrap 就溢出、缺 nowrap 就把「平台审查」折断成
   「平台审 / 查」两行 —— 现在改为整块换行。 */
.ycg-shop-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ycg-shop-badges span {
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--ycg-primary);
  color: var(--ycg-primary);
  border-radius: 3px;
  white-space: nowrap;
}
.ycg-shop-kpis {
  list-style: none;
  margin: 0 0 12px;
  padding: 12px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px dashed var(--ycg-border);
  border-bottom: 1px dashed var(--ycg-border);
  text-align: center;
}
.ycg-shop-kpis b { display: block; font-size: 16px; }
.ycg-shop-kpis span { font-size: 12px; color: var(--ycg-text-muted); }
.ycg-shop-main, .ycg-shop-intro { font-size: 14px; line-height: 1.7; }
.ycg-shop-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ycg-shop-ticker {
  height: 72px; overflow: hidden; position: relative;
  background: #fafafa; border-radius: 4px; padding: 0 10px;
}
.ycg-shop-ticker__track { animation: ycg-shop-ticker 14s linear infinite; }
.ycg-shop-ticker__track p {
  margin: 0; padding: 6px 0; font-size: 12px; color: var(--ycg-text-muted);
  border-bottom: 1px dashed #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes ycg-shop-ticker {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.ycg-shop-ticker:hover .ycg-shop-ticker__track { animation-play-state: paused; }
.ycg-shop-block {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 16px 20px 20px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ycg-shop-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ycg-shop-block__head h2, .ycg-shop-block h2 { margin: 0; font-size: 18px; font-family: var(--ycg-font); }
.ycg-shop-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ycg-shop-tags button {
  border: 1px solid var(--ycg-border);
  background: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
.ycg-shop-tags button.is-on { border-color: var(--ycg-primary); color: var(--ycg-primary); }

/* —— 官方认证（对齐原站 land/shop 深色证书卡） —— */
.ycg-shop-cert {
  margin: 24px 0;
  background: #fff;
  border-radius: 8px;
  padding: 20px 24px 28px;
  border: 1px solid var(--ycg-border);
}
.ycg-shop-cert__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  font-family: var(--ycg-font);
}
.ycg-shop-cert__panel {
  position: relative;
  overflow: hidden;
}
.ycg-shop-cert__seal {
  position: absolute;
  right: -8px;
  top: -12px;
  z-index: 2;
  width: 200px;
  height: 108px;
  background: url(https://cdn1.yuncaigou.net/static/theme/image/common/shencha.png) 0 0 / contain no-repeat;
  pointer-events: none;
}
.ycg-shop-cert__frame {
  border: 3px solid #787878;
  background: #3e3e3e;
  padding: 2px;
}
.ycg-shop-cert__inner {
  border: 1px solid #787878;
  background: #3e3e3e url(https://cdn1.yuncaigou.net/static/theme/image/shop/xmvip1_bj_02.jpg) repeat;
  padding: 40px 28px 36px;
  color: #bfbfbf;
}
.ycg-shop-cert__head {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 560px;
}
.ycg-shop-cert__head h3 {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 700;
  color: #f2f1ec;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.ycg-shop-cert__head p {
  margin: 0;
  font-size: 14px;
  color: #9a9a9a;
  line-height: 1.6;
}
.ycg-shop-cert__examiner {
  display: flex;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
  align-items: flex-start;
}
.ycg-shop-cert__photo {
  flex: 0 0 80px;
  width: 80px;
  min-height: 100px;
}
.ycg-shop-cert__photo img {
  display: block;
  max-width: 80px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: cover;
}
.ycg-shop-cert__meta { flex: 1; min-width: 0; }
.ycg-shop-cert__meta-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  align-items: center;
  color: #a09f9f;
  font-size: 12px;
}
.ycg-shop-cert__name { color: #a09f9f; }
.ycg-shop-cert__stats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: #a09f9f;
}
.ycg-shop-cert__stats em { font-style: normal; }
.ycg-shop-cert__stats strong {
  color: #a09f9f;
  font-size: 14px;
  font-weight: 700;
}
.ycg-shop-cert__stars {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 16px;
  vertical-align: middle;
  background: url(https://cdn1.yuncaigou.net/static/theme/image/shop/p_xm_sc_xing.png) -5px -27px no-repeat;
}
.ycg-shop-cert__stars-on {
  position: absolute;
  left: 0;
  top: 0;
  height: 16px;
  background: url(https://cdn1.yuncaigou.net/static/theme/image/shop/p_xm_sc_xing.png) -5px -3px no-repeat;
}
.ycg-shop-cert__std {
  display: inline-block;
  margin-top: 10px;
  padding: 0 12px;
  height: 24px;
  line-height: 23px;
  border: 0;
  background: #c5c5c5;
  color: #000;
  font-size: 12px;
  cursor: pointer;
}
.ycg-shop-cert__std:hover { background: #d8d8d8; }
.ycg-shop-cert__lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #bfbfbf;
}
.ycg-shop-cert__line {
  max-width: 900px;
  margin: 36px auto 0;
  border-bottom: 1px solid #727272;
}
.ycg-shop-cert__items {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px 8px;
  max-width: 980px;
  margin: 36px auto 0;
}
.ycg-shop-cert__item {
  width: 150px;
  text-align: center;
}
.ycg-shop-cert__item-name {
  font-size: 14px;
  color: #bfbfbf;
  margin-bottom: 6px;
}
.ycg-shop-cert__item-num {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  font-size: 18px;
  color: #bfbfbf;
  position: relative;
  padding-right: 20px;
}
.ycg-shop-cert__item-num span {
  font-size: 50px;
  line-height: 1;
  font-family: Helvetica, Arial, sans-serif;
  color: #fff;
  font-weight: 400;
}
.ycg-shop-cert__item-num::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 16px;
  height: 16px;
  background: url(https://cdn1.yuncaigou.net/static/theme/image/shop/xmvip1_he_01.png) -360px -40px no-repeat;
}
.ycg-shop-cert__btn {
  display: block;
  width: 140px;
  margin: 36px auto 0;
  line-height: 40px;
  text-align: center;
  border: 1px solid #8c8c8c;
  color: #bfbfbf;
  font-size: 18px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.ycg-shop-cert__btn:hover {
  border-color: #dec092;
  background: #dec092;
  color: #363636;
}

.ycg-modal[hidden] { display: none !important; }
.ycg-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ycg-modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.ycg-modal__box {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}
.ycg-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}
.ycg-modal__head p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.ycg-modal__close {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
}
.ycg-modal__body {
  padding: 16px 18px 22px;
  font-size: 14px;
  line-height: 1.75;
  color: #444;
}
.ycg-modal__body p { margin: 0 0 8px; }

@media (max-width: 900px) {
  .ycg-shop-cert { padding: 16px 12px 20px; }
  .ycg-shop-cert__seal {
    width: 120px;
    height: 64px;
    right: -4px;
    top: -6px;
    opacity: .9;
  }
  .ycg-shop-cert__inner { padding: 28px 16px 24px; }
  .ycg-shop-cert__head h3 { font-size: 24px; }
  .ycg-shop-cert__examiner { flex-direction: column; align-items: center; text-align: center; }
  .ycg-shop-cert__meta-top { justify-content: center; }
  .ycg-shop-cert__stats { justify-content: center; }
  .ycg-shop-cert__lead { text-align: left; font-size: 13px; }
  .ycg-shop-cert__item { width: 42%; }
  .ycg-shop-cert__item-num span { font-size: 40px; }
}

.ycg-shop-shipai {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.ycg-shop-shipai__videos,
.ycg-shop-shipai__photos {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ycg-shop-shipai__vcard {
  position: relative; display: block; width: 100%; height: 180px; padding: 0; border: 0; cursor: pointer; background: #111; border-radius: 4px; overflow: hidden;
}
.ycg-shop-shipai__vcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* 实拍入口用半透明深色播放标，避免像「红点」 */
.ycg-shop-shipai__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  pointer-events: none;
}
.ycg-shop-shipai__play::before {
  content: ""; position: absolute; left: 19px; top: 15px;
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
.ycg-shop-shipai__carousel {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 180px;
}
.ycg-shop-shipai__carousel .ycg-shop-hero__nav {
  height: 180px;
  align-self: stretch;
}
.ycg-shop-shipai__track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 180px;
  scrollbar-width: none;
}
.ycg-shop-shipai__track::-webkit-scrollbar { display: none; }
.ycg-shop-shipai__shot {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
  min-width: 180px;
  max-width: 180px;
  min-height: 180px;
  max-height: 180px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ycg-shop-shipai__shot img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.ycg-shop-shipai p { margin: 8px 0 0; font-size: 13px; color: var(--ycg-text-muted); }
.ycg-shop-cmt { padding: 10px 0; border-bottom: 1px dashed var(--ycg-border); }
.ycg-shop-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.ycg-shop-form { display: grid; gap: 8px; }
.ycg-shop-form input {
  height: 38px;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 0 10px;
}
/* 「看过的人又看了」：厂商卡片网格。
   旧版是单列全宽行 —— 3 张商品图被拉成 374×80 的细横幅（严重裁切、只看得见画面中缝），
   且每个厂商独占 245px 高、5 家就 1374px；改 2 列卡片后高度约省一半，
   缩略图回到 4:3 正常比例。卡片沿用站内口径：容器级圆角 8px、内件级 4px。 */
/* 单列/多列都要写 minmax(0, 1fr)：不写的话隐式轨道的 min 是 auto，
   内容 min-content 大于容器时轨道就顶出去。本卡曾被顶到 443px（容器 293px），
   右侧那一列商品图被 .ycg-shop-block 的 overflow:hidden 裁掉 —— 页面级
   scrollWidth 查不出来，只能靠肉眼看截图或本文件的内部裁切检查。 */
.ycg-shop-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ycg-shop-others article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  transition: border-color .2s ease;
}
.ycg-shop-others article:hover { border-color: var(--ycg-primary); }
.ycg-shop-others__head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ycg-shop-others__head img,
.ycg-shop-others__ph {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #fafafa;
}
.ycg-shop-others__head img { object-fit: contain; }
/* 没有 logo 时用厂名首字占位。否则这一行的名称会突然左移 50px，
   2 列卡片并排时看起来是斜的 —— 对齐问题在网格里比在列表里显眼得多。 */
.ycg-shop-others__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-size: 16px;
  font-weight: 600;
}
/* flex 项默认 min-width: auto，不归零则公司名/主营不会折行，整行被顶宽 */
.ycg-shop-others__head > div { min-width: 0; }
.ycg-shop-others__head strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ycg-shop-others__stat { display: block; margin-top: 2px; font-size: 12px; color: var(--ycg-text-muted); }
.ycg-shop-others__main {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ycg-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 3 列商品图：img 是 width:100% 的替换元素，1fr 的 auto 下限会取图片固有宽度，
   窄屏下三列一起把轨道撑爆；minmax(0, 1fr) 才允许列缩到容器之内 */
.ycg-shop-others__goods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto; /* 卡片等高时把商品行压到底边，否则名称长短不一会让间距参差 */
  padding-top: 10px;
}
.ycg-shop-others__goods a { display: block; min-width: 0; }
.ycg-shop-others__goods img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: #f6f6f6;
}
.ycg-shop-others__goods span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ycg-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ycg-shop-others__goods a:hover span { color: var(--ycg-primary); }

@media (max-width: 760px) {
  .ycg-shop-others { grid-template-columns: minmax(0, 1fr); }
}

.ycg-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.86);
  display: flex; align-items: center; justify-content: center;
}
.ycg-lightbox[hidden] { display: none !important; }
.ycg-lightbox__body { max-width: min(960px, 90vw); max-height: 80vh; }
.ycg-lightbox__body img, .ycg-lightbox__body video {
  max-width: 90vw; max-height: 80vh; display: block; margin: 0 auto; background: #000;
}
.ycg-lightbox__close {
  position: absolute; right: 24px; top: 16px; font-size: 36px; color: #fff; background: none; border: 0; cursor: pointer;
}
.ycg-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35); border-radius: 50%; cursor: pointer;
}
.ycg-lightbox__nav--prev { left: 24px; }
.ycg-lightbox__nav--next { right: 24px; }
.ycg-lightbox__nav::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translate(-40%, -50%) rotate(45deg);
}
.ycg-lightbox__nav--prev::before { transform: translate(-20%, -50%) rotate(-135deg); }
.ycg-lightbox__num { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; margin: 0; }

.ycg-report { background: #fff; border: 1px solid var(--ycg-border); border-radius: 8px; padding: 0 0 40px; margin-bottom: 24px; overflow: hidden; }
.ycg-report__hero {
  text-align: center; padding: 36px 20px 28px;
  background: linear-gradient(180deg, #fff7f6 0%, #fff 70%);
  border-bottom: 1px solid #f0e0de;
}
.ycg-report__brand { margin: 0 0 12px; color: var(--ycg-primary); font-size: 14px; letter-spacing: 2px; }
/* 原为「140×24 灰底进度条 + 橙红渐变填充」，进度条读起来像完成度；
   现改为统一的 .ycg-stars（--xl 档）＋ 一位小数分值，与全站星级形态一致。
   容器由行内流改为 flex：hero 是 text-align:center，只有整体 flex 居中才能
   让「星 + 数字」作为一组居中，而不是各自按行内基线排。 */
.ycg-report__stars {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 10px;
}
.ycg-report__stars .ycg-score-num { font-size: 22px; color: var(--ycg-primary); }
.ycg-report__hero h1 { margin: 0 0 8px; font-size: 28px; color: var(--ycg-primary); }
.ycg-report__sub { margin: 0; font-size: 18px; }
.ycg-report__en { margin: 4px 0 12px; font-size: 12px; color: var(--ycg-text-muted); letter-spacing: 1px; }
.ycg-report__name { margin: 0; font-size: 16px; font-weight: 600; }
.ycg-report__exam {
  display: flex; gap: 16px; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--ycg-border);
}
.ycg-report__exam img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ycg-report__scores { padding: 24px 28px; }
.ycg-report__scores h2, .ycg-report__toc h2, .ycg-report__block h2 { margin: 0 0 14px; font-size: 18px; }
.ycg-report__scores ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ycg-report__scores li { display: grid; grid-template-columns: 110px 1fr 36px; gap: 12px; align-items: center; font-size: 14px; }
.ycg-report__scores li div { height: 10px; background: #f2f2f2; border-radius: 5px; overflow: hidden; }
.ycg-report__scores li i { display: block; height: 100%; background: var(--ycg-primary); }
.ycg-report__scores em { font-style: normal; color: var(--ycg-primary); text-align: right; }
.ycg-report__toc { padding: 0 28px 20px; }
.ycg-report__toc ol { margin: 0; padding-left: 20px; line-height: 2; }
.ycg-report__toc a { color: var(--ycg-text); text-decoration: none; }
.ycg-report__toc a:hover { color: var(--ycg-primary); }
.ycg-report__block { padding: 20px 28px; border-top: 1px solid var(--ycg-border); }
.ycg-report__block h3 { font-size: 15px; margin: 16px 0 10px; }
.ycg-report__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ycg-report__table th, .ycg-report__table td { border: 1px solid var(--ycg-border); padding: 10px 12px; text-align: left; }
.ycg-report__table th { width: 120px; background: #fafafa; font-weight: 600; }
.ycg-report__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.ycg-report__gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; border: 1px solid var(--ycg-border); }
.ycg-report__videos { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; width: 100%; max-width: 100%; }
.ycg-report__vcard { background: #111; border-radius: 6px; overflow: hidden; width: 100%; }
.ycg-report__videos video {
  display: block;
  width: 100%;
  height: 420px;
  background: #111;
  object-fit: cover;
  object-position: center;
}
.ycg-report__note { margin: 10px 0 0; font-size: 13px; color: #555; line-height: 1.7; }

/* —— 店铺联系我们 —— */
.ycg-contact {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 32px;
}
.ycg-contact__info,
.ycg-contact__panel {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 24px 28px;
}
.ycg-contact__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.ycg-contact__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  flex: 0 0 72px;
}
.ycg-contact__head h1 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.35;
  font-family: var(--ycg-font);
}
.ycg-contact__tagline {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-contact__facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border-top: 1px dashed var(--ycg-border);
  border-bottom: 1px dashed var(--ycg-border);
  text-align: center;
}
.ycg-contact__facts li { min-width: 0; }
.ycg-contact__label {
  display: block;
  font-size: 12px;
  color: var(--ycg-text-muted);
  margin-bottom: 4px;
}
.ycg-contact__facts strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ycg-contact__accent { color: var(--ycg-primary); }
.ycg-contact__meta {
  margin: 0 0 18px;
  display: grid;
  gap: 12px;
}
.ycg-contact__meta > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
}
.ycg-contact__meta dt {
  margin: 0;
  color: var(--ycg-text-muted);
  font-weight: 400;
}
.ycg-contact__meta dd { margin: 0; color: var(--ycg-text); }
.ycg-contact__phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ycg-primary-soft);
  border-radius: 8px;
  margin-bottom: 10px;
}
/* ⚠️ 必须排除「立即拨打」按钮：它的 href 也是 tel: 开头，会被这条「大号品牌红
   文字」规则命中 —— 红底 + 红字 = 按钮文字完全隐形，只剩一个空色块。
   加 :not(.ycg-btn) 后按钮才取回 .ycg-btn 的白字。 */
.ycg-contact__phone a[href^="tel"]:not(.ycg-btn) {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ycg-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}
/* 「立即拨打」CTA：与浅粉底拉开对比，体量放大一档；flex: none 防止号码变长时
   被挤扁（父容器已允许折行，窄屏会整块换行而不是压缩按钮） */
.ycg-contact__phone .ycg-btn {
  flex: none;
  padding: 0 20px;
  font-size: 15px;
}
.ycg-contact__phone em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--ycg-ink-2);
}
.ycg-contact__note {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.6;
}
.ycg-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-size: 13px;
}
.ycg-contact__links a { color: var(--ycg-text-sub); }
.ycg-contact__links a:hover { color: var(--ycg-primary); }
.ycg-contact__panel h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-family: var(--ycg-font);
}
.ycg-contact__panel-desc {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-contact__form {
  display: grid;
  gap: 12px;
}
.ycg-contact__form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ycg-text-sub);
}
.ycg-contact__form input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--ycg-border);
  border-radius: 6px;
  padding: 0 12px;
  font: inherit;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ycg-contact__form input:focus {
  outline: none;
  border-color: var(--ycg-primary);
  box-shadow: 0 0 0 3px var(--ycg-primary-soft);
}
.ycg-contact__code {
  display: flex;
  gap: 8px;
}
.ycg-contact__code input { flex: 1; }
.ycg-contact__code .ycg-btn {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}
.ycg-contact__submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
}
.ycg-contact__agree {
  margin: 0;
  font-size: 12px;
  color: var(--ycg-text-muted);
  text-align: center;
}
.ycg-contact__msg {
  margin: 0;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--ycg-primary);
  text-align: center;
}
@media (max-width: 960px) {
  .ycg-contact { grid-template-columns: 1fr; }
  .ycg-contact__facts { grid-template-columns: repeat(2, 1fr); }
  .ycg-contact__phone { flex-direction: column; align-items: stretch; }
}


@media (max-width: 960px) {
  /* minmax(0, 1fr) 而非 1fr：1fr 的 min 是 auto，等于把上一条防线的保险丝摘掉，
     内容 min-content 大于容器时轨道会溢出（原本就有的移动端 754px 横向溢出来源） */
  .ycg-shop-hero, .ycg-shop-contact, .ycg-shop-shipai { grid-template-columns: minmax(0, 1fr); }
  .ycg-shop-shipai__shot { flex: 0 0 140px; width: 140px; height: 140px; min-width: 140px; max-width: 140px; min-height: 140px; max-height: 140px; }
  .ycg-shop-shipai__carousel,
  .ycg-shop-shipai__track,
  .ycg-shop-shipai__carousel .ycg-shop-hero__nav,
  .ycg-shop-shipai__vcard { height: 140px; }
  .ycg-report__gallery { grid-template-columns: repeat(2, 1fr); }
  .ycg-report__videos { grid-template-columns: 1fr; }
  .ycg-report__videos video { height: 280px; }
  .ycg-report__scores li { grid-template-columns: 90px 1fr 28px; }
}



/* —— 买卖头条 —— */
.ycg-toutiao { padding-bottom: 40px; }
.ycg-toutiao__hero {
  position: relative;
  height: 240px;
  margin: 0 0 16px;
  overflow: hidden;
  background: #1a1a1a;
}
.ycg-toutiao__hero-track { position: absolute; inset: 0; }
.ycg-toutiao__hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  text-decoration: none;
}
.ycg-toutiao__hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.ycg-toutiao__hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ycg-toutiao__hero-title {
  position: relative;
  z-index: 2;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  font-family: var(--ycg-font);
}
.ycg-toutiao__hero--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #c62820, #e63429 45%, #8a1f18);
}
.ycg-toutiao__hero--fallback h1 {
  margin: 0;
  font-size: 36px;
  color: #fff;
  font-family: var(--ycg-font);
}
.ycg-toutiao__hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.ycg-toutiao__hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
}
.ycg-toutiao__hero-dot.is-active { background: #fff; }
.ycg-toutiao__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 12px;
}
.ycg-toutiao__tabs a {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--ycg-text-sub);
  text-decoration: none;
}
.ycg-toutiao__tabs a.is-on,
.ycg-toutiao__tabs a:hover {
  background: var(--ycg-primary);
  color: #fff;
}
.ycg-toutiao__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}
.ycg-toutiao__main,
.ycg-toutiao__side {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
}
.ycg-toutiao__main { padding: 8px 20px 24px; }
.ycg-toutiao__side { padding: 16px 16px 8px; position: sticky; top: 88px; }
.ycg-toutiao__search {
  display: flex;
  gap: 8px;
  margin: 12px 0 8px;
}
.ycg-toutiao__search input {
  flex: 1;
  height: 40px;
  border: 1px solid var(--ycg-border);
  border-radius: 6px;
  padding: 0 12px;
  font: inherit;
}
.ycg-toutiao__search .ycg-btn { min-height: 40px; }
.ycg-toutiao__list { list-style: none; margin: 0; padding: 0; }
.ycg-toutiao__item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--ycg-border);
}
.ycg-toutiao__thumb {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
  aspect-ratio: 4 / 3;
}
.ycg-toutiao__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ycg-toutiao__body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ycg-toutiao__body h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-family: var(--ycg-font);
  font-weight: 700;
}
.ycg-toutiao__body h2 a { color: var(--ycg-ink); text-decoration: none; }
.ycg-toutiao__body h2 a:hover { color: var(--ycg-primary); }
.ycg-toutiao__lead {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ycg-text-sub);
  text-decoration: none;
}
.ycg-toutiao__lead:hover { color: var(--ycg-primary); }
.ycg-toutiao__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--ycg-text-muted);
}
.ycg-toutiao__tags,
.ycg-toutiao__meta time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ycg-toutiao__tags {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.ycg-toutiao__tags i,
.ycg-toutiao__meta time i,
.ycg-toutiao__art-tags i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  opacity: .45;
  mask: no-repeat center / contain;
  -webkit-mask: no-repeat center / contain;
}
.ycg-toutiao__tags i,
.ycg-toutiao__art-tags i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
}
.ycg-toutiao__meta time i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11H7v-2h4V7h2v6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11H7v-2h4V7h2v6z'/%3E%3C/svg%3E");
}
.ycg-toutiao__empty { padding: 40px 0; text-align: center; color: var(--ycg-text-muted); list-style: none; }
.ycg-toutiao__tip {
  margin: 16px 0 8px;
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.6;
}
.ycg-toutiao__side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ycg-border);
}
.ycg-toutiao__side-head h2 {
  margin: 0;
  font-size: 16px;
  font-family: var(--ycg-font);
}
.ycg-toutiao__flame {
  width: 16px;
  height: 16px;
  background: var(--ycg-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 23c-4.4 0-8-3.1-8-7.5 0-3.2 1.8-5.6 3.5-7.4C9.3 6.1 11 3.8 11 2c2.5 2.1 4 5.2 4 8 0 1.1-.2 2.1-.6 3 1.1-.7 1.9-1.9 2.2-3.3.9 1.5 1.4 3.3 1.4 5.3 0 4.4-2.7 8-6 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 23c-4.4 0-8-3.1-8-7.5 0-3.2 1.8-5.6 3.5-7.4C9.3 6.1 11 3.8 11 2c2.5 2.1 4 5.2 4 8 0 1.1-.2 2.1-.6 3 1.1-.7 1.9-1.9 2.2-3.3.9 1.5 1.4 3.3 1.4 5.3 0 4.4-2.7 8-6 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ycg-toutiao__hot { list-style: none; margin: 0; padding: 0; }
.ycg-toutiao__hot li { border-bottom: 1px dashed var(--ycg-border); }
.ycg-toutiao__hot li:last-child { border-bottom: 0; }
.ycg-toutiao__hot a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
}
.ycg-toutiao__hot-img {
  display: block;
  width: 72px;
  height: 54px;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f5f5;
}
.ycg-toutiao__hot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ycg-toutiao__hot-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ycg-toutiao__hot-txt strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ycg-ink);
}
.ycg-toutiao__hot a:hover strong { color: var(--ycg-primary); }
.ycg-toutiao__hot-txt time { font-size: 12px; color: var(--ycg-text-muted); }

.ycg-toutiao__article { padding: 28px 32px 36px; }
.ycg-toutiao__article h1 {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.4;
  font-family: var(--ycg-font);
}
.ycg-toutiao__art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  font-size: 13px;
  color: var(--ycg-text-muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ycg-border);
  margin-bottom: 18px;
}
.ycg-toutiao__chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-size: 12px;
}
.ycg-toutiao__art-lead {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #fafafa;
  border-left: 3px solid var(--ycg-primary);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ycg-text-sub);
}
.ycg-toutiao__art-tags {
  margin: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-toutiao__pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.ycg-toutiao__pn a,
.ycg-toutiao__pn .is-disabled {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--ycg-border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: #fafafa;
}
.ycg-toutiao__pn a:hover { border-color: var(--ycg-primary); }
.ycg-toutiao__pn span { display: block; font-size: 12px; color: var(--ycg-text-muted); margin-bottom: 4px; }
.ycg-toutiao__pn strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
}
.ycg-toutiao__pn .is-disabled { opacity: .55; cursor: not-allowed; }
.ycg-toutiao__disclaimer {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.7;
}
.ycg-toutiao .ycg-rich { line-height: 1.85; overflow: hidden; }
.ycg-toutiao .ycg-rich img { max-width: 100%; height: auto; }

@media (max-width: 960px) {
  .ycg-toutiao__layout { grid-template-columns: 1fr; }
  .ycg-toutiao__side { position: static; }
  .ycg-toutiao__item { grid-template-columns: 120px 1fr; gap: 12px; }
  .ycg-toutiao__body h2 { font-size: 16px; }
  .ycg-toutiao__article { padding: 20px 16px 28px; }
  .ycg-toutiao__pn { grid-template-columns: 1fr; }
}


/* —— 小云帮采 / 投诉帮 —— */
.ycg-bangcai__crumb,
.ycg-tousu__crumb {
  padding: 14px 0 0;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-bangcai__hero {
  margin-top: 12px;
  background: #E63429;
  color: #fff;
  overflow: hidden;
}
.ycg-bangcai__hero-inner {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: end;
  min-height: 500px;
  padding: 24px 0 0;
}
.ycg-bangcai__hero-inner--no-steward {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.ycg-bangcai__steward {
  position: relative;
  align-self: end;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
  height: 500px;
  min-height: 500px;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.ycg-bangcai__steward > img {
  display: block;
  flex: 0 0 220px;
  width: 220px;
  height: 500px;
  object-fit: contain;
  object-position: center bottom;
}
.ycg-bangcai__steward-tags {
  position: static;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 28px;
  padding: 0 0 72px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  pointer-events: none;
  line-height: 1.4;
  max-width: 46px;
}
.ycg-bangcai__steward-tags p {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.ycg-bangcai__steward-tags span {
  opacity: 1;
  color: #fff;
}
.ycg-bangcai__steward-tags strong {
  display: inline;
  margin-top: 12px;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: #fff;
  font-weight: 700;
}
.ycg-bangcai__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #fff;
  opacity: 1;
  font-weight: 500;
}
.ycg-bangcai__hero-copy {
  padding: 56px 0 40px;
  color: #fff;
}
.ycg-bangcai__hero-copy h1 {
  margin: 0 0 28px;
  font-size: 40px;
  line-height: 1.28;
  font-family: var(--ycg-font);
  color: #fff;
  font-weight: 700;
  text-shadow: none;
}
.ycg-bangcai__hero-copy h1 em {
  font-style: normal;
  color: #fff;
  font-weight: 700;
}
.ycg-bangcai__pains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
}
.ycg-bangcai__pains li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  color: #fff;
}
.ycg-bangcai__pains li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E63429' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ycg-bangcai__pains strong {
  display: block;
  font-size: 16px;
  margin-bottom: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}
.ycg-bangcai__pains span {
  font-size: 14px;
  opacity: 1;
  color: rgba(255,255,255,.92);
  line-height: 1.45;
}
.ycg-bangcai__card {
  align-self: center;
  background: #fff;
  color: var(--ycg-text);
  border-radius: 12px;
  padding: 22px 22px 16px;
  box-shadow: 0 18px 48px rgba(20,24,31,.18);
  margin-bottom: 36px;
}
.ycg-bangcai__card h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-family: var(--ycg-font);
  text-align: center;
}
.ycg-bangcai__card-sub {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-bangcai__card-sub em {
  font-style: normal;
  color: var(--ycg-primary);
  font-weight: 700;
}
.ycg-bangcai__form {
  display: grid;
  gap: 10px;
}
.ycg-bangcai__form input,
.ycg-tousu__form input,
.ycg-tousu__form textarea,
.ycg-tousu__form select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
  background: #fff;
  color: inherit;
}
.ycg-tousu__form textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
}
.ycg-bangcai__form input:focus,
.ycg-tousu__form input:focus,
.ycg-tousu__form textarea:focus,
.ycg-tousu__form select:focus {
  outline: none;
  border-color: var(--ycg-primary);
  box-shadow: 0 0 0 3px var(--ycg-primary-soft);
}
.ycg-bangcai__code,
.ycg-tousu__form-split {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.ycg-bangcai__code input,
.ycg-tousu__form-split select {
  flex: 1;
  width: auto;
}
.ycg-bangcai__code .ycg-btn {
  flex: 0 0 auto;
  min-width: 7.5em;
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
  line-height: 1;
}
.ycg-bangcai__submit { width: 100%; min-height: 46px; margin-top: 4px; }
.ycg-bangcai__msg {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-size: 13px;
  color: var(--ycg-primary);
}
.ycg-bangcai__ticker {
  margin-top: 12px;
  height: 36px;
  overflow: hidden;
  border-top: 1px dashed var(--ycg-border);
  padding-top: 8px;
}
.ycg-bangcai__ticker-track { animation: ycg-shop-ticker 16s linear infinite; }
.ycg-bangcai__ticker-track p {
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ycg-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ycg-bangcai__subnav {
  background: #fff;
  border-bottom: 1px solid var(--ycg-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ycg-bangcai__subnav .ycg-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.ycg-bangcai__subnav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ycg-text-sub);
  text-decoration: none;
}
.ycg-bangcai__subnav a.is-on,
.ycg-bangcai__subnav a:hover {
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
}
.ycg-bangcai__section,
.ycg-tousu__section {
  padding: 48px 0;
}
.ycg-bangcai__section--alt,
.ycg-tousu__section--alt {
  background: #fff;
  border-top: 1px solid var(--ycg-border);
  border-bottom: 1px solid var(--ycg-border);
}
.ycg-bangcai__head {
  text-align: center;
  margin-bottom: 28px;
}
.ycg-bangcai__head h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-family: var(--ycg-font);
}
.ycg-bangcai__head p {
  margin: 0;
  color: var(--ycg-text-muted);
  font-size: 14px;
}
.ycg-bangcai__adv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ycg-bangcai__adv li {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ycg-bangcai__adv li:hover {
  transform: translateY(-3px);
  box-shadow: var(--ycg-shadow);
}
.ycg-bangcai__adv img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 12px;
}
.ycg-bangcai__adv strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}
.ycg-bangcai__adv span {
  font-size: 13px;
  color: var(--ycg-text-muted);
  line-height: 1.5;
}
.ycg-bangcai__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: none;
}
.ycg-bangcai__steps li {
  position: relative;
  background: var(--ycg-bg);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
}
.ycg-bangcai__steps em {
  display: block;
  font-style: normal;
  font-size: 28px;
  font-weight: 700;
  color: var(--ycg-primary);
  margin-bottom: 10px;
}
.ycg-bangcai__steps span {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}
.ycg-bangcai__cta-wrap { text-align: center; margin: 28px 0 0; }
.ycg-bangcai__reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ycg-bangcai__reviews li {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 16px;
}
.ycg-bangcai__reviews img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
}
.ycg-bangcai__reviews strong { display: block; margin-bottom: 6px; }
.ycg-bangcai__reviews p {
  margin: 0;
  font-size: 13px;
  color: var(--ycg-text-sub);
  line-height: 1.6;
}
.ycg-bangcai__team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ycg-bangcai__team li {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 28px 16px 24px;
  text-align: center;
}
.ycg-bangcai__team-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  border: 1px solid rgba(0, 0, 0, .06);
  box-sizing: border-box;
}
.ycg-bangcai__team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 采购服务各专题共用顾问卡 */
.ycg-bangcai__section .ycg-bangcai__team > li,
.ycg-tousu__section .ycg-bangcai__team > li,
.ycg-topic__section .ycg-bangcai__team > li {
  padding: 28px 16px 24px;
}
.ycg-bangcai__team strong { display: block; font-size: 16px; }
.ycg-bangcai__team span {
  display: block;
  margin: 4px 0 8px;
  font-size: 12px;
  color: var(--ycg-text-muted);
}
.ycg-bangcai__team p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ycg-text-sub);
}
.ycg-bangcai__footcta {
  background: linear-gradient(115deg, #c62820, #e63429);
  color: #fff;
  text-align: center;
  padding: 48px 0;
}
.ycg-bangcai__footcta h2 {
  margin: 0 0 8px;
  font-size: 28px;
  color: #fff;
  font-family: var(--ycg-font);
}
.ycg-bangcai__footcta p {
  margin: 0 0 20px;
  opacity: .92;
}
.ycg-bangcai__footcta .ycg-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.65);
}

.ycg-tousu__hero {
  margin-top: 12px;
  background:
    linear-gradient(120deg, #1c212b 0%, #2a303c 55%, #3a2220 100%);
  color: #fff;
}
.ycg-tousu__hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: end;
  min-height: 360px;
  padding: 40px 0 0;
}
.ycg-tousu__hero-inner--no-visual {
  grid-template-columns: 1fr;
}
.ycg-tousu__eyebrow {
  margin: 0 0 10px;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: #f0b4ae;
}
.ycg-tousu__hero-copy {
  padding-bottom: 40px;
}
.ycg-tousu__hero-copy h1 {
  margin: 0 0 14px;
  font-size: 34px;
  color: #fff;
  font-family: var(--ycg-font);
}
.ycg-tousu__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  max-width: 520px;
}
.ycg-tousu__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ycg-tousu__hero-actions .ycg-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}
.ycg-tousu__hero-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: end;
  line-height: 0;
  margin: 0;
  padding: 0;
  width: 360px;
  max-width: 100%;
  height: 340px;
}
.ycg-tousu__hero-visual img {
  display: block;
  width: 360px;
  height: 340px;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.ycg-tousu__cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ycg-tousu__cases li {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
}
.ycg-tousu__cases img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 12px;
}
.ycg-tousu__cases strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.ycg-tousu__cases span {
  font-size: 13px;
  color: var(--ycg-primary);
}
.ycg-tousu__flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ycg-tousu__flow li {
  background: var(--ycg-bg);
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
}
.ycg-tousu__flow em {
  display: block;
  font-style: normal;
  color: var(--ycg-primary);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 8px;
}
.ycg-tousu__flow strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}
.ycg-tousu__flow span {
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.5;
}
.ycg-tousu__form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  justify-content: space-between;
  gap: 40px 48px;
  align-items: center;
}
.ycg-tousu__form-intro {
  min-width: 0;
  max-width: 380px;
}
.ycg-tousu__form-intro .ycg-bangcai__head {
  text-align: left;
  margin-bottom: 18px;
}
.ycg-tousu__tips {
  margin: 0;
  padding-left: 18px;
  color: var(--ycg-text-sub);
  line-height: 1.9;
  font-size: 14px;
}
.ycg-tousu__form {
  display: grid;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  min-width: 0;
  box-shadow: 0 8px 28px rgba(20, 24, 31, 0.05);
}
.ycg-tousu__form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ycg-text-sub);
  min-width: 0;
}

/* 交易保障 / 入驻 / 严选 / 补贴 专题 */
.ycg-topic__hero {
  margin-top: 12px;
  background:
    linear-gradient(120deg, #1c212b 0%, #2a303c 55%, #3a2220 100%);
  color: #fff;
}
.ycg-topic--ruzhu .ycg-topic__hero {
  background: linear-gradient(120deg, #1a2433 0%, #243447 50%, #1f3a4a 100%);
}
.ycg-topic--yanxuan .ycg-topic__hero {
  background: linear-gradient(120deg, #1f2420 0%, #2c3530 55%, #3a3220 100%);
}
.ycg-topic--butie .ycg-topic__hero {
  background: linear-gradient(120deg, #2a1f1c 0%, #3a2a24 55%, #4a3020 100%);
}
.ycg-topic__hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
  min-height: 360px;
  padding: 40px 0;
}
.ycg-topic__eyebrow {
  margin: 0 0 10px;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: #f0b4ae;
}
.ycg-topic__hero-copy h1 {
  margin: 0 0 14px;
  font-size: 34px;
  color: #fff;
  font-family: var(--ycg-font);
  line-height: 1.25;
}
.ycg-topic__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.84);
  max-width: 540px;
}
.ycg-topic__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ycg-topic__hero-actions .ycg-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}
.ycg-topic__hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ycg-topic__hero-visual img {
  max-width: min(380px, 100%);
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* 交易保障主视觉：透明底插画直接叠深色 Hero，无黑方底框 */
.ycg-topic--baozhang .ycg-topic__hero {
  background:
    radial-gradient(ellipse 52% 68% at 84% 50%, rgba(230, 52, 41, 0.22) 0%, transparent 64%),
    linear-gradient(120deg, #1c212b 0%, #2a303c 55%, #3a2220 100%);
}
.ycg-topic--baozhang .ycg-topic__hero-visual {
  background: transparent;
  box-shadow: none;
  border: 0;
}
.ycg-topic--baozhang .ycg-topic__hero-visual img {
  max-width: min(420px, 100%);
  max-height: 320px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
}
.ycg-topic__section {
  padding: 48px 0;
}
.ycg-topic__section--alt {
  background: var(--ycg-bg);
}
.ycg-topic__intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
}
.ycg-topic__intro-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ycg-text-sub);
}
.ycg-topic__intro-visual {
  display: flex;
  justify-content: center;
}
.ycg-topic__intro-visual img {
  max-width: min(320px, 100%);
  max-height: 240px;
  object-fit: contain;
}
.ycg-topic__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.ycg-topic__features li {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.ycg-topic__features li:hover {
  border-color: rgba(196, 48, 43, 0.35);
  box-shadow: 0 8px 24px rgba(28, 33, 43, 0.06);
}
.ycg-topic__feature-icon {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.ycg-topic__feature-icon img {
  max-width: 96px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ycg-topic__features strong {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
}
.ycg-topic__features span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ycg-text-muted);
}
.ycg-topic__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.ycg-topic__steps li {
  background: var(--ycg-bg);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
}
.ycg-topic__section--alt .ycg-topic__steps li,
.ycg-topic__section:not(.ycg-topic__section--alt) .ycg-topic__cases li {
  background: #fff;
}
.ycg-topic__steps em {
  display: block;
  font-style: normal;
  color: var(--ycg-primary);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 8px;
}
.ycg-topic__steps strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}
.ycg-topic__steps span {
  font-size: 13px;
  color: var(--ycg-text-muted);
  line-height: 1.55;
}
.ycg-topic__cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ycg-topic__cases li {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
}
.ycg-topic__cases strong {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.ycg-topic__cases span {
  font-size: 13px;
  color: var(--ycg-primary);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .ycg-bangcai__hero-inner { grid-template-columns: 1fr 320px; }
  .ycg-bangcai__steward { display: none; }
  .ycg-bangcai__adv,
  .ycg-bangcai__steps,
  .ycg-bangcai__team,
  .ycg-tousu__cases,
  .ycg-topic__features,
  .ycg-topic__cases { grid-template-columns: repeat(2, 1fr); }
  .ycg-tousu__flow,
  .ycg-topic__steps { grid-template-columns: repeat(2, 1fr); }
  .ycg-topic__intro { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .ycg-bangcai__hero-inner,
  .ycg-tousu__hero-inner,
  .ycg-topic__hero-inner,
  .ycg-tousu__form-grid,
  .ycg-bangcai__reviews { grid-template-columns: 1fr; }
  .ycg-tousu__form-intro { max-width: none; }
  .ycg-bangcai__hero-copy { padding: 28px 0 20px; }
  .ycg-bangcai__hero-copy h1,
  .ycg-topic__hero-copy h1 { font-size: 28px; }
  .ycg-bangcai__pains { grid-template-columns: 1fr; }
  .ycg-bangcai__card { margin-bottom: 24px; }
  .ycg-bangcai__adv,
  .ycg-bangcai__steps,
  .ycg-bangcai__team,
  .ycg-tousu__cases,
  .ycg-tousu__flow,
  .ycg-topic__features,
  .ycg-topic__steps,
  .ycg-topic__cases { grid-template-columns: 1fr; }
  .ycg-tousu__hero-visual,
  .ycg-topic__hero-visual { display: none; }
  .ycg-topic__section,
  .ycg-tousu__section { padding: 36px 0; }
}

/* ========== 采购问答 / 排行榜（GEO 列表页） ========== */
.ycg-qa__crumb { padding: 14px 0 0; font-size: 13px; color: var(--ycg-text-muted); }
.ycg-qa__crumb a { color: var(--ycg-text-sub); }
.ycg-qa__eyebrow {
  margin: 0 0 10px;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--ycg-primary);
}
.ycg-qa__hero {
  margin-top: 12px;
  background: linear-gradient(125deg, #1c212b 0%, #2a303c 55%, #3a2a24 100%);
  color: #fff;
}
.ycg-qa__hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 28px;
  align-items: center;
  padding: 36px 0 40px;
}
.ycg-qa__hero h1 {
  margin: 0 0 12px;
  font-size: 32px;
  color: #fff;
  font-family: var(--ycg-font);
  line-height: 1.25;
}
.ycg-qa__lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.84);
  max-width: 560px;
}
.ycg-qa__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ycg-qa__hero-actions .ycg-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}
.ycg-qa__hero-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
}
.ycg-qa__hero-stat strong {
  display: block;
  font-size: 36px;
  line-height: 1.1;
  color: #fff;
}
.ycg-qa__hero-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
.ycg-qa__hero-stat p:last-child {
  margin: 14px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
}
.ycg-qa__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  padding: 28px 0 48px;
  align-items: start;
}
.ycg-qa__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.ycg-qa__tabs a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ycg-border);
  font-size: 13px;
  color: var(--ycg-text-sub);
  background: #fff;
}
.ycg-qa__tabs a.is-on {
  background: var(--ycg-primary-soft);
  border-color: transparent;
  color: var(--ycg-primary);
  font-weight: 600;
}
.ycg-qa-card {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.ycg-qa-card:hover { border-color: rgba(196, 48, 43, 0.35); }
.ycg-qa-card__link { color: inherit; }
.ycg-qa-card h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.45;
  font-family: var(--ycg-font);
}
.ycg-qa-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12px;
  color: var(--ycg-text-muted);
  margin-bottom: 10px;
}
.ycg-qa-card__meta em {
  font-style: normal;
  color: var(--ycg-primary);
  font-weight: 600;
}
.ycg-qa-card__answer {
  margin: 0;
  padding: 12px 14px;
  background: var(--ycg-bg);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ycg-text-sub);
}
.ycg-qa-card__answer a {
  margin-left: 6px;
  color: var(--ycg-primary);
  white-space: nowrap;
}
.ycg-qa-card__pending,
.ycg-qa__empty {
  margin: 0;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-qa-sidebox {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 18px 16px;
  margin-bottom: 14px;
}
.ycg-qa-sidebox h2 {
  margin: 0 0 10px;
  font-size: 15px;
}
.ycg-qa-sidebox ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ycg-text-sub);
}
.ycg-qa-sidebox p { margin: 0 0 8px; font-size: 13px; }
.ycg-qa-sidebox--cta {
  background: linear-gradient(160deg, #fff 0%, #f8f1ef 100%);
  text-align: center;
}
.ycg-qa-sidebox--cta .ycg-btn { margin-top: 8px; }
.ycg-qa-related { list-style: none; margin: 0; padding: 0; }
.ycg-qa-related li { margin-bottom: 10px; }
.ycg-qa-related a {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ycg-ink);
}
.ycg-qa-related a:hover { color: var(--ycg-primary); }
.ycg-qa-detail__head {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 22px 22px 16px;
  margin-bottom: 16px;
}
.ycg-qa-detail__head h1 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.35;
  font-family: var(--ycg-font);
}
.ycg-qa-detail__answers { margin-bottom: 16px; }
.ycg-qa-detail__answers h2,
.ycg-qa-detail__related-biz h2,
.ycg-qa-detail__cta h2 {
  margin: 0 0 12px;
  font-size: 18px;
}
.ycg-qa-answer {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.ycg-qa-answer__who {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-qa-answer__who strong { color: var(--ycg-ink); font-size: 14px; }
.ycg-qa-answer__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ycg-text-sub);
  white-space: pre-wrap;
}
.ycg-qa-related-biz {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.ycg-qa-related-biz__card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 10px;
  padding: 12px;
}
.ycg-qa-related-biz__card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: #fafafa;
}
.ycg-qa-related-biz__card strong { display: block; font-size: 14px; margin-bottom: 4px; }
.ycg-qa-related-biz__card span { font-size: 12px; color: var(--ycg-primary); }
.ycg-qa-detail__cta {
  margin-top: 8px;
  padding: 22px;
  border-radius: 12px;
  background: linear-gradient(120deg, #1c212b, #3a2a24);
  color: #fff;
  text-align: center;
}
.ycg-qa-detail__cta h2 { color: #fff; }
.ycg-qa-detail__cta p { margin: 0 0 14px; color: rgba(255,255,255,.8); font-size: 14px; }
.ycg-qa-detail__cta .ycg-btn--ghost,
.ycg-qa-detail__cta .ycg-btn { min-width: 140px; }

.ycg-rank__hero {
  margin-top: 12px;
  background: linear-gradient(125deg, #1a2433 0%, #243447 50%, #2c3530 100%);
  color: #fff;
}
.ycg-rank__hero-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  padding: 36px 0 40px;
}
.ycg-rank__hero h1 {
  margin: 0 0 12px;
  font-size: 32px;
  color: #fff;
  font-family: var(--ycg-font);
}
.ycg-rank__updated {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.ycg-rank__tabs { display: flex; gap: 8px; }
.ycg-rank__tabs a {
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
}
.ycg-rank__tabs a.is-on {
  background: #fff;
  color: var(--ycg-ink);
  font-weight: 600;
}
.ycg-rank__podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 8px;
}
.ycg-rank-podium {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 14px;
  padding: 18px 14px 20px;
  color: inherit;
}
.ycg-rank-podium--1 { order: 2; border-color: rgba(196, 48, 43, 0.35); box-shadow: 0 10px 28px rgba(28,33,43,.06); }
.ycg-rank-podium--2 { order: 1; }
.ycg-rank-podium--3 { order: 3; }
.ycg-rank-podium__badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--ycg-primary);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.ycg-rank-podium__media {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 12px;
}
.ycg-rank-podium__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ycg-rank-podium__ph {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #ccc;
}
.ycg-rank-podium strong {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 6px;
}
.ycg-rank-podium em {
  font-style: normal;
  color: var(--ycg-primary);
  font-weight: 700;
  margin-bottom: 4px;
}
.ycg-rank-podium > span {
  font-size: 12px;
  color: var(--ycg-text-muted);
  line-height: 1.4;
}
.ycg-rank__list-wrap { padding: 20px 0 8px; }
.ycg-rank__list-head { margin-bottom: 14px; }
.ycg-rank__list-head h2 { margin: 0 0 6px; font-size: 22px; }
.ycg-rank__list-head p { margin: 0; font-size: 13px; color: var(--ycg-text-muted); }
.ycg-rank-list { list-style: none; margin: 0; padding: 0; }
.ycg-rank-list__item {
  display: grid;
  grid-template-columns: 44px 88px 1fr 96px auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ycg-rank-list__no {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--ycg-bg);
  color: var(--ycg-text-sub);
}
.ycg-rank-list__no.is-top {
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
}
.ycg-rank-list__media {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  display: block;
}
.ycg-rank-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ycg-rank-list__body strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  line-height: 1.35;
}
.ycg-rank-list__body p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-rank-list__score { text-align: center; }
.ycg-rank-list__score em {
  display: block;
  font-style: normal;
  font-size: 22px;
  font-weight: 700;
  color: var(--ycg-primary);
  line-height: 1.1;
}
.ycg-rank-list__score span {
  display: block;
  font-size: 12px;
  color: var(--ycg-text-muted);
}
.ycg-rank-list__sub { margin-top: 4px !important; }
.ycg-rank-list__cta { white-space: nowrap; }
.ycg-rank__note {
  margin: 28px 0 48px;
  padding: 18px 20px;
  background: var(--ycg-bg);
  border-radius: 12px;
}
.ycg-rank__note h2 { margin: 0 0 8px; font-size: 15px; }
.ycg-rank__note p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ycg-text-sub); }

@media (max-width: 1000px) {
  .ycg-qa__layout { grid-template-columns: 1fr; }
  .ycg-qa__hero-inner { grid-template-columns: 1fr; }
  .ycg-qa__hero-stat { max-width: 280px; }
  .ycg-rank__podium { grid-template-columns: 1fr; }
  .ycg-rank-podium--1,
  .ycg-rank-podium--2,
  .ycg-rank-podium--3 { order: 0; }
  .ycg-rank-list__item {
    grid-template-columns: 36px 72px 1fr;
    grid-template-areas:
      "no media body"
      "score score cta";
  }
  .ycg-rank-list__no { grid-area: no; }
  .ycg-rank-list__media { grid-area: media; width: 72px; height: 72px; }
  .ycg-rank-list__body { grid-area: body; }
  .ycg-rank-list__score { grid-area: score; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .ycg-rank-list__score em { font-size: 18px; }
  .ycg-rank-list__cta { grid-area: cta; justify-self: end; }
  .ycg-qa-related-biz { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .ycg-qa__hero h1,
  .ycg-rank__hero h1 { font-size: 26px; }
}

.ycg-qa-detail__jump { margin: 14px 0 0; }
/* 锚点定位修正：头部「我来答」指向下方 #qa-answer-form。
   站头 .ycg-header 是 sticky，不加 scroll-margin-top 时浏览器会把表单顶到视口顶，
   标题被站头压掉 52px(桌面) / 135px(移动)。
   站头实测高度（与产品详情页同一耦合点，改站头时需同步）：
     ≥961px → 73px；≤960px → 约 57px（单行：logo + 搜索 + 电话 + 汉堡） */
.ycg-qa-detail__form-wrap {
  scroll-margin-top: calc(var(--ycg-header-h) + 16px);
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 12px;
  padding: 20px 22px 22px;
  margin-bottom: 16px;
}
@media (max-width: 960px) {
  .ycg-qa-detail__form-wrap { scroll-margin-top: 72px; }
}
.ycg-qa-detail__form-wrap h2 {
  margin: 0 0 6px;
  font-size: 18px;
}
.ycg-qa-detail__form-tip {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-qa-form { display: grid; gap: 12px; }
.ycg-qa-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ycg-text-sub);
}
.ycg-qa-form textarea,
.ycg-qa-form input[type="text"],
.ycg-qa-form input[type="tel"],
.ycg-qa-form input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100%;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  box-sizing: border-box;
}
.ycg-qa-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.ycg-qa-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ycg-qa-form__anon {
  display: flex !important;
  align-items: center;
  gap: 8px;
  grid-template-columns: none !important;
}
.ycg-qa-form__anon input { width: auto; }
@media (max-width: 800px) {
  .ycg-qa-form__row { grid-template-columns: 1fr; }
}

/* ========== 商品详情 GEO / B2B ========== */
.ycg-gd-preview {
  background: #fff7ed;
  border-bottom: 1px solid #fdba74;
  color: #9a3412;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.5;
}
.ycg-gd-preview a { color: #9a3412; font-weight: 600; }
.ycg-gd__crumb {
  padding: 14px 0 0;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-gd__crumb a { color: var(--ycg-text-sub); }
.ycg-gd-hero {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 20px 0 8px;
}
.ycg-gd-gallery__main {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ycg-gd-gallery__main img,
.ycg-gd-gallery__main video {
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  object-fit: contain;
  display: block;
  background: #fafafa;
}
.ycg-gd-gallery__main [hidden] {
  display: none !important;
}
.ycg-gd-gallery__main video {
  background: #111;
}
.ycg-gd-thumb--video {
  position: relative;
  background: #111;
}
.ycg-gd-thumb--video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  pointer-events: none;
}
.ycg-gd-gallery__empty {
  color: #bbb;
  font-size: 14px;
}
.ycg-gd-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ycg-gd-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}
.ycg-gd-thumb.is-on,
.ycg-gd-thumb:hover {
  border-color: var(--ycg-primary);
}
.ycg-gd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ycg-gd-info__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.ycg-gd-info__eyebrow span {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
}
.ycg-gd-info h1 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.3;
  font-family: var(--ycg-font);
}
.ycg-gd-info__lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ycg-text-sub);
}
.ycg-gd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: linear-gradient(120deg, #fff7f6, #fff);
  border: 1px solid rgba(196, 48, 43, 0.12);
  border-radius: 8px;
}
.ycg-gd-price em {
  font-style: normal;
  font-size: 28px;
  font-weight: 700;
  color: var(--ycg-primary);
  line-height: 1;
}
.ycg-gd-price span {
  font-size: 12px;
  color: var(--ycg-text-muted);
}
.ycg-gd-facts {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ycg-gd-facts li {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 4px;
  padding: 10px 12px;
}
.ycg-gd-facts span {
  display: block;
  font-size: 12px;
  color: var(--ycg-text-muted);
  margin-bottom: 4px;
}
.ycg-gd-facts strong {
  font-size: 14px;
  color: var(--ycg-ink);
}
.ycg-gd-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
}
.ycg-gd-highlights div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  font-size: 13px;
}
.ycg-gd-highlights dt {
  margin: 0;
  color: var(--ycg-text-muted);
}
.ycg-gd-highlights dd {
  margin: 0;
  color: var(--ycg-ink);
  font-weight: 600;
}
.ycg-gd-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
/* 注：原 `.ycg-gd-maker`（hero 内的横向厂商名片）已随版式调整移除，
   其 7 条规则（含 ≤800px 断点内的两行）为无引用死代码，一并清理。
   厂商信息现由侧栏竖版名片 `.ycg-gd-vendor` 承担。 */
.ycg-gd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
  padding: 28px 0 56px;
}
/* 章节导航：下划线 tab ————————————————————————————————————————
   原为「一排白底胶囊」：每枚都是独立按钮，且与下方卡片同样式（白底 + 描边 +
   圆角），吸顶时整条挤成一片白、层次糊掉，也看不出"当前在哪个章节"。
   改为一条 tab 栏：整条只留一条基线，用品牌红指示条 + 字重区分选中项。
   指示条三段状态 —— 收起（默认）/ 半展（hover）/ 全展（选中）。
   注：`padding` 决定吸顶条高度，改动后须同步 `--gd-bar-h`（见文末吸顶小节）。 */
.ycg-gd-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 4px 0 0;
  border-bottom: 1px solid var(--ycg-border);
  background: linear-gradient(180deg, var(--ycg-bg) 70%, transparent);
}
.ycg-gd-anchors a {
  position: relative;
  padding: 12px 14px;
  border-radius: 0;
  font-size: 14px;
  color: var(--ycg-text-sub);
  text-decoration: none;
  transition: color 0.18s ease;
}
.ycg-gd-anchors a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ycg-primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.ycg-gd-anchors a:hover { color: var(--ycg-primary); }
.ycg-gd-anchors a:hover::after { transform: scaleX(0.5); }
.ycg-gd-anchors a.is-on,
.ycg-gd-anchors a[aria-current="true"] {
  color: var(--ycg-primary);
  font-weight: 600;
}
.ycg-gd-anchors a.is-on::after,
.ycg-gd-anchors a[aria-current="true"]::after { transform: scaleX(1); }
.ycg-gd-block {
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 22px 22px 24px;
  margin-bottom: 16px;
}
.ycg-gd-block__head { margin-bottom: 16px; }
.ycg-gd-block__head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.ycg-gd-block__head p {
  margin: 0;
  font-size: 13px;
  color: var(--ycg-text-muted);
}
.ycg-gd-table {
  width: 100%;
  border-collapse: collapse;
}
.ycg-gd-table th,
.ycg-gd-table td {
  border: 1px solid var(--ycg-border);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.ycg-gd-table th {
  width: 160px;
  background: #fafafa;
  color: var(--ycg-text-sub);
  font-weight: 600;
}
.ycg-gd-param-fallback {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ycg-gd-param-fallback li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ycg-bg);
  border-radius: 4px;
  font-size: 14px;
}
.ycg-gd-param-fallback span { color: var(--ycg-text-muted); }
.ycg-gd-rich {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ycg-text);
  overflow: hidden;
}
.ycg-gd-rich > *:first-child { margin-top: 0; }
.ycg-gd-rich > *:last-child { margin-bottom: 0; }
.ycg-gd-rich img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px auto;
  border-radius: 4px;
}
.ycg-gd-rich p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
}
.ycg-gd-rich h1,
.ycg-gd-rich h2,
.ycg-gd-rich h3,
.ycg-gd-rich h4 {
  margin: 20px 0 10px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ycg-text);
}
.ycg-gd-rich h1 {
  font-size: 17px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ycg-border);
}
.ycg-gd-rich h2 {
  font-size: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}
.ycg-gd-rich h3 {
  font-size: 15px;
  margin-top: 18px;
}
.ycg-gd-rich h4 {
  font-size: 14px;
  color: var(--ycg-text-sub);
}
.ycg-gd-rich ul,
.ycg-gd-rich ol {
  margin: 0 0 14px;
  padding-left: 1.35em;
}
.ycg-gd-rich li {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.7;
}
.ycg-gd-rich li:last-child { margin-bottom: 0; }
.ycg-gd-rich li strong,
.ycg-gd-rich li b {
  font-weight: 600;
  color: var(--ycg-text);
}
.ycg-gd-rich strong,
.ycg-gd-rich b { font-weight: 600; }
.ycg-gd-rich a { color: var(--ycg-primary); }
.ycg-gd-rich table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 14px;
}
.ycg-gd-rich th,
.ycg-gd-rich td {
  border: 1px solid var(--ycg-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.ycg-gd-rich th {
  background: #fafafa;
  font-weight: 600;
  color: var(--ycg-text-sub);
}
.ycg-gd-empty {
  margin: 0;
  font-size: 14px;
  color: var(--ycg-text-muted);
}
.ycg-gd-company-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
  font-size: 14px;
}
.ycg-gd-company-links a { color: var(--ycg-primary); }
.ycg-gd-faq__item {
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 10px;
  background: #fff;
}
.ycg-gd-faq__item summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  list-style: none;
}
.ycg-gd-faq__item summary::-webkit-details-marker { display: none; }
.ycg-gd-faq__item p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ycg-text-sub);
}
.ycg-gd-faq__more {
  margin: 8px 0 0;
  font-size: 13px;
}
/* 侧栏三块卡（厂商名片 / 采购保障 / 快速入口）共用同一底色与描边：极淡品牌红
   自上而下渐隐 + 淡红描边。品牌红在这里兼作"平台背书"的语义色，三块统一后
   侧栏色调整齐，也给卡内的红色 CTA 做同色呼应（克制，不做成整块红——侧栏
   底色是米白，通栏红卡会抢走主体内容的注意力）。
   底色只在这里写一次（`--gd-card-bg` 供「采购保障」叠柔光时复用），各卡的
   内边距 / margin 仍各自定义。 */
.ycg-gd-vendor,
.ycg-gd-sidebox {
  --gd-card-bg: linear-gradient(180deg, rgba(230, 52, 41, 0.055), #fff 62%);
  background: var(--gd-card-bg);
  border: 1px solid rgba(230, 52, 41, 0.16);
  border-radius: 8px;
}
.ycg-gd-sidebox {
  /* 与厂商名片同内边距，三块合成一个整体时视觉更齐；同时压缩侧栏总高，
     让 1440×900 这类视口能一屏放下（见文末「4. 侧栏整体吸顶」换算） */
  padding: 16px;
  margin-bottom: 12px;
}
/* 注：原 `.ycg-gd-sidebox--sticky`（单块吸顶）已废弃 —— 改为整个侧栏
   `.ycg-gd-side` 一起吸顶，见文末「4. 侧栏整体吸顶」。 */
.ycg-gd-sidebox h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 15px;
}

/* 「采购保障」卡的专属装饰：右下角柔光（底色与快速入口完全共用，见上）。
   走 background 图层叠加而非溢出的伪元素——溢出会连带裁掉磁贴 hover 的
   外阴影；因为用了 background 简写，共用底色要在这一层里再叠一遍。 */
.ycg-gd-sidebox--assure {
  background-image:
    radial-gradient(130px 96px at 100% 100%, rgba(230, 52, 41, 0.10), rgba(230, 52, 41, 0) 72%),
    var(--gd-card-bg);
}
/* 标题右侧的「4 项保障」胶囊 */
.ycg-gd-assure__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(230, 52, 41, 0.10);
  color: var(--ycg-primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* —— 保障条目：2×2 磁贴 ————————————————————————————————
   原来是四行「勾徽 + 文字」竖排清单：280px 宽的侧栏里每行只用到约 100px，
   右侧整片留白，卡内显得空。改为 2 列网格磁贴——每格自带线描图标、白底与
   淡红描边，横向空间用满，格子本身即是装饰。
   列宽用 minmax(0, 1fr) 而非 1fr：1fr 的最小值是 auto(min-content)，长词会
   顶破列宽（同首页专区踩过的坑）。 */
.ycg-gd-sidebox--assure ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ycg-text-sub);
}
.ycg-gd-sidebox--assure ul a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(230, 52, 41, 0.10);
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.ycg-gd-sidebox--assure ul a:hover {
  background: #fff;
  border-color: rgba(230, 52, 41, 0.34);
  color: var(--ycg-primary);
  box-shadow: 0 3px 10px rgba(230, 52, 41, 0.10);
}
/* 磁贴内图标：品牌红，hover 与文字同步变深 */
.ycg-gd-assure__ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ycg-primary);
  opacity: 0.85;
  transition: opacity 0.16s ease;
}
.ycg-gd-sidebox--assure ul a:hover .ycg-gd-assure__ico { opacity: 1; }
.ycg-gd-sidebox--assure ul span {
  min-width: 0;
  white-space: nowrap;
}

/* —— 快速入口：行式磁贴 ————————————————————————————————
   原来是三行裸文字链接，看不出可点。改为整行磁贴：右端箭头 + hover 时整行
   转品牌红、箭头右推 2px，形成明确的"进入"暗示。
   磁贴底色/描边与「采购保障」的磁贴保持同款（白 + 淡红描边）——两张卡共用
   同一底色后，磁贴若还用米白 --ycg-bg 会发灰、与旁边那张对不上。 */
.ycg-gd-sidebox p { margin: 0; font-size: 13px; }
.ycg-gd-sidebox p + p { margin-top: 4px; }
.ycg-gd-sidebox p > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(230, 52, 41, 0.10);
  color: var(--ycg-text-sub);
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.ycg-gd-sidebox p > a::after {
  content: "\203A"; /* › */
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  opacity: 0.45;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.ycg-gd-sidebox p > a:hover {
  background: #fff;
  border-color: rgba(230, 52, 41, 0.34);
  color: var(--ycg-primary);
  box-shadow: 0 3px 10px rgba(230, 52, 41, 0.10);
}
.ycg-gd-sidebox p > a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

/* 主按钮：右侧补一个箭头，hover 时随之外推，强化"下一步"暗示 */
.ycg-gd-sidebox .ycg-btn { width: 100%; justify-content: center; }
.ycg-gd-sidebox .ycg-btn::after {
  content: "\2192"; /* → */
  margin-left: 6px;
  transition: transform 0.16s ease;
}
.ycg-gd-sidebox .ycg-btn:hover::after { transform: translateX(3px); }

@media (max-width: 1000px) {
  .ycg-gd-hero { grid-template-columns: 1fr; }
  .ycg-gd-layout { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .ycg-gd-info h1 { font-size: 24px; }
  .ycg-gd-facts,
  .ycg-gd-highlights,
  .ycg-gd-param-fallback { grid-template-columns: 1fr; }
  .ycg-gd-highlights div { grid-template-columns: 80px 1fr; }
}

/* ==========================================================================
   云采购专区 · 自适应优化
   修复三类问题：
   1) 栅格列被内容最小宽度撑开 → 窄屏横向溢出、第二列卡片出屏
   2) 列数随容器变窄反而增多（375px 2 列 / 768px 3 列 / 1280px 2 列）
   3) ≤1024px 专业顾问卡退化为通栏大红块，文字挤在左侧、按钮拉通全宽
   ========================================================================== */

/* 流体尺寸：随视口平滑伸缩，减少断点跳变 */
.ycg-zone {
  --zone-advisor-w: clamp(196px, 17vw, 232px);
  --zone-thumb: clamp(84px, 8.6vw, 124px);
}

/* minmax(0, 1fr) 允许商品区收缩到内容最小宽度以下，根治横向溢出 */
.ycg-zone__body {
  grid-template-columns: var(--zone-advisor-w) minmax(0, 1fr);
}

/* 专区商品固定 2 列：覆盖 ≤1100px 断点从 .ycg-prod-grid 继承来的 3 列 */
.ycg-zone .ycg-prod-grid--zone {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 缩略图改为随容器缩放的方形 */
.ycg-zone .ycg-prod--row .ycg-prod__img {
  width: var(--zone-thumb);
  height: var(--zone-thumb);
  aspect-ratio: 1 / 1;
}

/* 电话等长串允许断行，避免撑破栅格 */
.ycg-zone .ycg-prod__params span {
  overflow-wrap: anywhere;
}

/* 顾问卡信息区：收紧头像与说明文字，消除"孤字换行" */
.ycg-zone__advisor-card {
  padding: 9px 10px;
}
.ycg-zone__advisor-card > div {
  min-width: 0;
}
.ycg-zone__advisor-card img {
  width: 44px;
  height: 44px;
}
.ycg-zone__advisor-card em {
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* —— 中屏及以下：顾问卡由竖向长条转为横向紧凑条 —— */
@media (max-width: 1024px) {
  .ycg-zone__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ycg-zone__advisor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 20px;
    padding: 14px 18px;
  }
  .ycg-zone__advisor-title {
    grid-area: 1 / 1;
    font-size: 15px;
  }
  .ycg-zone__advisor-lead {
    grid-area: 2 / 1;
  }
  .ycg-zone__advisor-tags {
    grid-area: 3 / 1;
  }
  .ycg-zone__advisor-card {
    grid-area: 1 / 2 / span 2 / 3;
    margin-top: 0;
  }
  .ycg-zone__advisor-cta {
    grid-area: 3 / 2;
    width: auto;
    min-height: 40px;
    padding: 0 24px;
  }
  .ycg-zone__advisor-more {
    grid-area: 4 / 1 / 5 / 3;
    text-align: left;
  }
}

/* —— 小屏：专区商品改为单列，避免两列把文字压到不可读 / 撑出屏外 —— */
@media (max-width: 960px) {
  .ycg-zone {
    --zone-thumb: 92px;
    padding: 14px 14px 16px;
    overflow: hidden;
    max-width: 100%;
  }
  .ycg-zone .ycg-prod-grid--zone {
    grid-template-columns: minmax(0, 1fr);
  }
  .ycg-zone__goods,
  .ycg-zone__panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .ycg-zone .ycg-prod--row {
    max-width: 100%;
    box-sizing: border-box;
  }
  .ycg-zone__head {
    gap: 10px;
    margin-bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .ycg-zone__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ycg-zone__tabs::-webkit-scrollbar { display: none; }
  .ycg-zone__tab {
    flex: 0 0 auto;
    max-width: 10.5em;
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* —— 极窄屏：给顾问列定宽，避免它把左侧文案挤成逐字竖排 —— */
@media (max-width: 560px) {
  .ycg-zone__advisor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 132px);
    gap: 8px 14px;
    padding: 14px;
  }
  .ycg-zone__advisor-card {
    grid-area: 1 / 2 / span 2 / 3;
    gap: 8px;
    padding: 8px;
  }
  .ycg-zone__advisor-card img {
    width: 36px;
    height: 36px;
  }
  .ycg-zone__advisor-card strong {
    font-size: 13px;
  }
  .ycg-zone__advisor-card em {
    font-size: 10.5px;
    line-height: 1.3;
  }
  .ycg-zone__advisor-cta {
    grid-area: 3 / 2;
    min-height: 34px;
    padding: 0 8px;
    font-size: 13px;
  }
  .ycg-zone__advisor-more {
    grid-area: 4 / 1 / 5 / 3;
  }
}

/* ==========================================================================
   产品详情页（.ycg-gd）· 自适应与观感优化
   修复四类问题：
   1) ≤1000px 断点把 minmax(0, 1fr) 退化成裸 1fr，列宽被内容最小宽度顶住
      → 375px 横向溢出 197px、414px 溢出 158px
      （元凶：缩略图条 7 张合计 552px；相关推荐双列合计 382px）
   2) ≤1000px 图库按 4:3 铺满整宽 → 768px 时 728×632，平板首屏被一张图占满
   3) 参数事实卡 2 列时奇数项留空，且纵向占高过多，撑高了右侧信息栏
   4) 宽屏 hero 左右高度失衡（左 476px vs 右 666px，左列下方大片空白）

   圆角口径（与列表页 .ycg-buy-* 统一，是站内第二套紧凑色阶）：
     容器级 8px —— 内容大卡 / 主图 / 价格带 / 参数表 / 侧栏卡 / FAQ 项
     内件级 4px —— 缩略图 / 参数胶囊 / 正文图 / 卡内磁贴
     控件级 2px —— 按钮（全局 .ycg-btn），本页不再单独覆盖
   形态类不留在此列：胶囊标签 999px、厂商 logo 圆 50%、tab 指示条 2px 2px 0 0。
   ========================================================================== */

/* —— 1. 栅格可收缩 ———————————————————————————————————————— */

/* 轨道补回 minmax(0, …)：裸 1fr 的最小值是 auto（即 min-content） */
@media (max-width: 1000px) {
  .ycg-gd-hero { grid-template-columns: minmax(0, 1fr); }
  .ycg-gd-layout { grid-template-columns: minmax(0, 1fr); }
}

/* 子项「自动最小尺寸」归零，双保险 */
.ycg-gd-hero > *,
.ycg-gd-layout > * {
  min-width: 0;
}

/* 缩略图条是横向滚动容器，不应参与列宽计算 */
.ycg-gd-gallery,
.ycg-gd-gallery__thumbs {
  min-width: 0;
}

/* 高亮表标签列同样允许收缩 */
.ycg-gd-highlights div { grid-template-columns: 88px minmax(0, 1fr); }

@media (max-width: 800px) {
  .ycg-gd-facts,
  .ycg-gd-highlights,
  .ycg-gd-param-fallback { grid-template-columns: minmax(0, 1fr); }
  .ycg-gd-highlights div { grid-template-columns: 80px minmax(0, 1fr); }
}

/* —— 2. 图库尺寸收敛 ——————————————————————————————————————— */

/* 缩略图 72 → 64px：7 张共 496px，收进 520px 图库内，不再出现横向滚动条 */
.ycg-gd-thumb {
  width: 64px;
  height: 64px;
}

/* 单列时不再无限放大；桌面两列本就不超 520px，此规则无副作用 */
.ycg-gd-gallery {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* 导语限宽，避免单列时行宽过长影响阅读 */
.ycg-gd-info__lead { max-width: 68ch; }

/* —— 5. 信息区高度护栏：标题 / 导语限行，超出块内滚动 ———————————————
   标题与导语的字符长度由后端数据决定：标题 28px 折到 3 行、导语折到 4 行，
   都会把右侧信息区撑高，连带把 hero「左右两栏贴齐」的版式带歪（该对齐是
   这段版式的隐性约束，见文初说明）。这里给两者各设 2 行的天花板，超出的
   文字在块内滚动，信息区高度不再随文案长度变化。
   单位用 em（2.6em / 3.5em = line-height 的 2 倍）：≤800px 标题字号由 28px
   降到 24px 时上限自动跟随，不必重复声明断点。
   注：用 max-height 而非 height —— 短标题不必占满两行，当前页面效果不变。 */
.ycg-gd-info h1,
.ycg-gd-info__lead {
  max-height: 2.6em;
  overflow-y: auto;
  /* 默认滚动条宽 17px，会把标题/导语吃掉近一格宽度；纤细化后为 6px */
  scrollbar-width: thin;
  scrollbar-color: var(--ycg-border) transparent;
}
.ycg-gd-info__lead { max-height: 3.5em; }
.ycg-gd-info h1::-webkit-scrollbar,
.ycg-gd-info__lead::-webkit-scrollbar { width: 6px; }
.ycg-gd-info h1::-webkit-scrollbar-thumb,
.ycg-gd-info__lead::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--ycg-border);
}

/* —— 3. 参数事实：卡片栅格 → 紧凑标签行 —————————————————————— */
/* 消除奇数项空位，并把右侧信息栏压矮约 90px，与左侧图库高度对齐 */

.ycg-gd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ycg-gd-facts li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
}
.ycg-gd-facts span {
  display: inline;
  margin-bottom: 0;
}
.ycg-gd-facts strong { font-size: 13.5px; }

/* —— 4. 窄屏细节 —————————————————————————————————————————— */

@media (max-width: 640px) {
  .ycg-gd-block { padding: 18px 16px 20px; }
  .ycg-gd-layout { gap: 20px; padding: 20px 0 40px; }
  /* CTA 全宽堆叠，扩大触摸目标 */
  .ycg-gd-cta .ycg-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* 参数表在极窄屏改为上下排布，避免横向挤压 */
@media (max-width: 560px) {
  .ycg-gd-table,
  .ycg-gd-table tbody,
  .ycg-gd-table tr,
  .ycg-gd-table th,
  .ycg-gd-table td {
    display: block;
    width: auto;
  }
  .ycg-gd-table th { border-bottom: 0; }
}

/* —— 相关推荐：列数单调递减，窄屏不再挤成 190px ———————————————— */

.ycg-gd .ycg-prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .ycg-gd .ycg-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ycg-gd .ycg-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ycg-gd .ycg-prod-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   产品详情页 · 章节导航吸顶 + 锚点定位修正
   原状态（实测 375/414/560/768/900/1024/1280/1440 八个宽度全部命中）：
   1) .ycg-gd-anchors 是 sticky/top:0/z-index:5，而站头 .ycg-header 是
      sticky/top:0/z-index:100 → 导航条吸顶后整体钻到站头背后，等于看不见
   2) 五个 section 都没有 scroll-margin-top → 点锚点后浏览器把区块顶到视口顶，
      标题落在 19~23px 处，被「站头 + 导航条」压掉 50px(桌面) / 137px(移动)
   3) ≤560px 时五个胶囊换行成两排，导航条从 58px 涨到 104px，吸顶更占地

   站头实测高度（耦合点，改站头时需同步这里）：
     ≥961px → 73px（72px 内容 + 1px 下边框）
     ≤960px → 约 57px（单行头：logo + 搜索 + 电话图标 + 汉堡）
   ========================================================================== */

.ycg-gd {
  /* 吸顶条停靠位置：紧贴站头下沿 */
  --gd-stick-top: calc(var(--ycg-header-h) + 1px);
  /* 吸顶条自身高度（实测：4px 顶部内边距 + 45px tab 行 + 1px 基线，全宽度一致）
     胶囊版是 58px；改成下划线 tab 后矮了 5px，锚点偏移量须同步，否则跳转后
     标题会多空出 5px。改 tab 的内边距/字号后要重量一次。 */
  --gd-bar-h: 53px;
}

/* —— 1. 导航条：停在站头下沿，不再钻到站头背后 ————————————————— */
.ycg-gd-anchors {
  top: var(--gd-stick-top);
  /* 必须低于站头(100)、高于正文卡片，否则要么被站头盖、要么盖住站头 */
  z-index: 30;
  /* 吸顶后要有不透明底，否则下方卡片会从渐变里透出来 */
  background: linear-gradient(180deg, var(--ycg-bg) 82%, rgba(244, 241, 236, 0));
}

/* —— 2. 目标区块：锚点跳转后停在吸顶条下方，标题完整可见 ———————— */
.ycg-gd-main .ycg-gd-block[id] {
  scroll-margin-top: calc(var(--gd-stick-top) + var(--gd-bar-h) + 14px);
}

/* —— 3. 窄屏：胶囊改为单排横向滚动，吸顶条高度锁在 58px ———————— */
@media (max-width: 960px) {
  .ycg-gd {
    /* 单行站头 */
    --gd-stick-top: 57px;
  }
  .ycg-gd-anchors {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .ycg-gd-anchors::-webkit-scrollbar { display: none; }
  .ycg-gd-anchors a {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}

/* —— 4. 侧栏整体吸顶 ————————————————————————————————————————
   现状：厂商名片 / 采购保障 / 快速入口 三块**整体**随滚动吸顶，
   「采购保障」不再单独吸顶（单独吸顶会把上方名片滚走、下方快速入口被落下，
   三块出现视觉断裂，且吸顶块与名片在滚动中互相穿插）。

   实现要点（两处先前踩过的坑）：
   a) 必须 `align-self: start`，不能用 `stretch`：stretch 会把网格项的盒高
      撑到整行高，自身可移动范围归零 → 表现为完全不吸顶。侧栏随内容收缩才对。
   b) `top` 必须对齐站头下沿（`--ycg-header-h` + 间距），否则吸顶后被 72px
      的固定站头盖住。
   兜底：矮屏下侧栏总高可能超过视口，用 max-height 限制高度并允许侧栏内部
   滚动，保证「进入店铺 / 让管家帮我比价 / 快速入口」始终可达。 */
@media (min-width: 1001px) {
  .ycg-gd-side {
    position: sticky;
    top: calc(var(--ycg-header-h) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--ycg-header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 细滚动条：不抢占卡片宽度，静止时不显眼 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  }
  .ycg-gd-side::-webkit-scrollbar { width: 6px; }
  .ycg-gd-side::-webkit-scrollbar-track { background: transparent; }
  .ycg-gd-side::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
  }
}

/* ============================================================
   4b. 产品详情页 · 侧栏厂商名片（竖版卡，置于「采购保障」之上）
   ------------------------------------------------------------
   版式：圆形 logo → 公司名 → 认证徽标 → 虚线 → 综合指数 / 主营
        → 主按钮「进入店铺」+ 次按钮「在线咨询 / 全部商品」
   数据只用后端现有字段：company_logo / company_name / company_url /
   company_signing / company_indexes / company_main。
   参考图里的「已通过审核认证 · 地区 · N星认证」后端暂无对应字段，
   故此处不渲染；有字段的部分一律「有则显示」，不硬造内容。
   ============================================================ */
.ycg-gd-vendor {
  /* 综合指数星级：直接复用全局 .ycg-stars 组件（配色取 --ycg-star-on/-off） */
  margin-bottom: 12px;
  padding: 16px 16px 14px;
  /* 底色 / 描边 / 圆角由上方「三块卡共用底色」的合并规则提供 */
  text-align: center;
}

/* 圆形 logo：图片按 cover 铺满整圆（贴边、不留白），圆形裁切靠
   容器 border-radius: 50% + overflow: hidden */
.ycg-gd-vendor__logo {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  border: 1px solid #ededed;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.ycg-gd-vendor__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 无 logo 时的兜底：品牌红首字 */
.ycg-gd-vendor__logo > span {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ycg-primary);
}

.ycg-gd-vendor__name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ycg-ink);
}
.ycg-gd-vendor__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease;
}
.ycg-gd-vendor__name a:hover { color: var(--ycg-primary); }

/* 认证徽标：居中胶囊 + 勾号 */
.ycg-gd-vendor__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}
.ycg-gd-vendor__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 3px;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-size: 12px;
  line-height: 1.7;
}
.ycg-gd-vendor__badge::before {
  content: "\2713";
  font-size: 11px;
}

/* 虚线分隔：把「身份」与「数据」分开 */
.ycg-gd-vendor__divider {
  margin: 0 0 12px;
  border: 0;
  border-top: 1px dashed var(--ycg-border);
}

/* 综合指数：左标签 / 右数值 */
.ycg-gd-vendor__meta {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
}
.ycg-gd-vendor__meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ycg-gd-vendor__meta dt { color: var(--ycg-text-muted); }
.ycg-gd-vendor__meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--ycg-text);
}

/* —— 综合指数 · 星级行（满星 5 星）——————————————————————————
   星级本体用全局 .ycg-stars（画法与色值见「星级认证：5 星展示」一段）；
   填充比例由模板按 BuyListService::score() 的口径算好后写进 --star-fill，
   CSS 只负责画，不参与评分逻辑。 */
.ycg-gd-vendor__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 注：卡片内的星级已改用全局 .ycg-stars（默认 15px 档），
   原 .ycg-gd-vendor__stars 的独立实现在统一时删除，避免同一套双层叠字
   写法在站内出现多份、日后改一处漏一处。 */
.ycg-gd-vendor__score {
  font-weight: 600;
  color: var(--ycg-text);
}

/* 主营：两行截断，长经营类目不会把卡片撑高 */
.ycg-gd-vendor__main {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ycg-text-muted);
  text-align: left;
}

/* 按钮：主按钮整行，「在线咨询 / 全部商品」等分并排 */
.ycg-gd-vendor__actions { display: grid; gap: 8px; }
.ycg-gd-vendor__actions .ycg-btn {
  width: 100%;
  /* 圆角交给全局 .ycg-btn（2px），与列表页按钮同款，此处不再覆盖 */
}
.ycg-gd-vendor__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ycg-gd-vendor__sub .ycg-btn {
  padding: 0 8px;
  font-size: 13px;
  letter-spacing: 0;
  /* 参考图里两个次按钮用的是品牌红淡边框（而非 ghost 的深灰边） */
  border-color: rgba(230, 52, 41, 0.32);
}
/* 同特异性下本块位置更靠后，会盖掉 .ycg-btn--ghost:hover，故显式补回悬停态 */
.ycg-gd-vendor__sub .ycg-btn:hover {
  border-color: var(--ycg-primary);
  color: var(--ycg-primary);
  background: var(--ycg-primary-soft);
}

/* 单列（≤1000px）：侧栏变全宽，卡片限宽居中，避免竖版版式被拉散 */
@media (max-width: 1000px) {
  .ycg-gd-vendor {
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ========== HTML 网站地图 ========== */
.ycg-sitemap { padding-bottom: 48px; }
.ycg-sitemap__head h1 { margin-bottom: 8px; }
.ycg-sitemap__head p { margin: 0 0 28px; color: var(--ycg-text-sub); max-width: 52em; }
.ycg-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px 32px;
}
.ycg-sitemap__group h2 {
  margin: 0 0 12px;
  font-size: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ycg-border);
}
.ycg-sitemap__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ycg-sitemap__group li { margin: 0 0 8px; }
.ycg-sitemap__group a { color: var(--ycg-text-sub); }
.ycg-sitemap__group a:hover { color: var(--ycg-primary); }
.ycg-main { display: block; min-height: 40vh; }

/* ==========================================================================
   云采购严选专题 · 「特色服务与权益」模块（2026-09-18）
   --------------------------------------------------------------------------
   ⚠️ 2026-09-18 四次调整：**卡片回到站内原有形态**（白卡 + 图标在上 + 居中），
      与「成交补贴 / 现金补贴有何优势」完全同款 —— 本段只保留**列数**一处差异。
      同页的 steps / cases / 表单段不受影响，仍是四页统一（见文末各段）。
   模板零改动：图标 <div>、<strong>、<span> 三兄弟结构未变，纯 CSS 覆盖列数。
   为什么仍要写这段：严选是 6 项，基础 `auto-fit, minmax(200px,1fr)` 在 1180 容器里
   会展开成 5 列 → 6 项排成 5+1 孤儿行（末行只有 1 张卡、右边空一大块）。
   故只把列数显式锁成 3 列，其余全部回落基础规则（12px 圆角 / 居中 / 88px 图标盒）。
   ⚠️ 本段前缀 (0,2,0) 会压掉靠前的 1100 / 800 断点（媒体查询不增权重）→ 同权重补齐。
   ========================================================================== */
.ycg-topic--yanxuan .ycg-topic__features {
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 一排三个 —— 6 项正好 2 行 */
  grid-auto-rows: 1fr;   /* 两行等高 —— 否则描述折两行的那张卡会把首行撑高，与次行参差 */
}
@media (max-width: 1100px) {
  .ycg-topic--yanxuan .ycg-topic__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ycg-topic--yanxuan .ycg-topic__features { grid-template-columns: 1fr; }
}

/* ==========================================================================
   「严选采购怎么走」流程模块（2026-09-18）
   --------------------------------------------------------------------------
   同模板四页共用（严选 3 步 / 厂商入驻 4 / 交易保障 3 / 成交补贴 3），
   2026-09-18 二次调整：前缀由 `.ycg-topic--yanxuan` 放宽为 `.ycg-topic`，四页统一。
   原状：`li` 底色取 `--ycg-bg`，与本页 section 底色同色 → 卡片完全隐形，
        看着像三段裸文字；序号 01/02/03 只是红色大字，没有流程串联的暗示。
   现改：白卡 + 1px 边框 + 8px 圆角（与上方「特色服务与权益」同语汇）；
        序号收进浅红底圆形徽标；桌面在卡片间隙补一枚箭头，点出 01→02→03 的顺序。
   ⚠️ **4 步的页（厂商入驻）改成 4 列一行**：3 列会 3+1 孤儿行，而箭头是"右邻卡片"
      的语义 —— 一换行，行末那枚箭头就指向空白。保持一行才串得起来。
   ⚠️ 作用域前缀抬高了特异性 → 1100 / 800 断点在此补齐。
   ========================================================================== */
.ycg-topic .ycg-topic__steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 30px;   /* 加宽是为给卡片间隙的箭头留位（窄屏会收回 14px） */
  counter-reset: step;   /* 右下角的大号序号底纹靠 CSS 计数器取数——::before 拿不到 em 的文本 */
}
/* 「恰好 4 步」的页（厂商入驻）：改 4 列一行，让箭头始终指得着右边的卡片。
   卡宽由 384 收到 ~272 —— 徽标 34 + 标题 16px + 说明 13px，仍然装得下。 */
.ycg-topic .ycg-topic__steps:has(> li:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.ycg-topic .ycg-topic__steps li {
  position: relative;
  counter-increment: step;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 20px 18px 22px;
  text-align: left;
}
.ycg-topic .ycg-topic__steps li:hover {
  border-color: rgba(196, 48, 43, 0.35);
  box-shadow: 0 8px 24px rgba(28, 33, 43, 0.06);
}
/* 底纹：把步骤序号放大成半透明水印压在卡片右下角，补上右侧的留白。
   尺寸按卡内空间留足余量，整枚完整落在卡片里（不越界）。
   ⚠️ 因此不加 `overflow: hidden` —— 那会把卡片外侧的步骤箭头一并裁掉。 */
.ycg-topic .ycg-topic__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ycg-primary);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease;
}
.ycg-topic .ycg-topic__steps li:hover::before { opacity: 0.14; }
.ycg-topic .ycg-topic__steps em {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-size: 14px;
  margin-bottom: 12px;
}
.ycg-topic .ycg-topic__steps strong { font-size: 16px; margin-bottom: 6px; }
/* 步骤箭头：绝对定位在卡片右外侧，纵向对齐序号徽标中线（20 padding + 34/2） */
.ycg-topic .ycg-topic__steps li::after {
  content: "";
  position: absolute;
  top: 37px;
  right: -19px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid var(--ycg-primary);
  border-right: 2px solid var(--ycg-primary);
  opacity: 0.4;
  transform: rotate(45deg);
}
.ycg-topic .ycg-topic__steps li:last-child::after { display: none; }
@media (max-width: 1100px) {
  .ycg-topic .ycg-topic__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ycg-topic .ycg-topic__steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ycg-topic .ycg-topic__steps li::after { display: none; }
}
@media (max-width: 800px) {
  .ycg-topic .ycg-topic__steps { grid-template-columns: 1fr; }
  .ycg-topic .ycg-topic__steps:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; }
}

/* —— 3 · 「帮您解决」：品牌红警示条 ————————————————————————
   内容是 4 个「难点 / 说明」条目，四个专题页都配有数据（各 4 项），
   2026-09-18 二次调整：前缀由 `.ycg-topic--yanxuan` 放宽为 `.ycg-topic`，四页统一。
   形态是「警示条」：浅品牌红底 + 贯穿全高的一条红竖标 + 左对齐。
   底色浅红而非白，就是为了跟同页两段白卡（features / steps）区分开。
   标题用深墨而不是品牌红 —— 15px 粗体不算 large text，红字压浅红底
   只有 3.4:1，达不到 4.5:1；深墨在浅红底上是 12.5:1，红留给竖标即可。 */
.ycg-topic .ycg-topic__cases li {
  position: relative;
  text-align: left;
  background: var(--ycg-primary-soft);
  border: 1px solid rgba(230, 52, 41, 0.14);
  border-radius: 8px;
  padding: 20px 18px 20px 24px;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ycg-topic .ycg-topic__cases li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: var(--ycg-primary);
}
.ycg-topic .ycg-topic__cases li:hover {
  background: rgba(230, 52, 41, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(230, 52, 41, 0.12);
}
.ycg-topic .ycg-topic__cases strong {
  color: var(--ycg-ink);
  font-size: 15px;
  margin-bottom: 7px;
}
.ycg-topic .ycg-topic__cases span {
  color: var(--ycg-text-sub);
  font-size: 13px;
}

/* —— 4 · 「提交…需求」：收窄左右之间的空档 ————————————————
   这段表单是共享组件（`.ycg-tousu__form-grid`）：四个专题页 + 投诉页(投诉帮)
   都在用。2026-09-18 二次调整：原先只作用严选，现按要求**六页统一** →
   作用域改为 `:is(.ycg-topic, .ycg-tousu)`。
   ⚠️ 为什么不用裸类名：这几条要盖掉靠前的**双类**基础规则
      （如 `.ycg-tousu__form-intro .ycg-bangcai__head` = (0,2,0)），
      裸单类会输。`:is()` 取参数里最高的特异性 → 仍是 (0,2,0)，与改前一致。
   原状：左轨道 `1fr`（1180 容器下 612px），但 `.ycg-tousu__form-intro`
   有 `max-width: 380px` → 轨道里白扔 232px，再加 48px gap，
   文字与表单之间空白达 **280px**，左列显得"飘"。
   改法：表单 520→560px（反过来挤压左轨道）+ intro 放宽 380→520px +
   gap 56px → 空档收到 **约 100px**，左侧内容也装得更满。 */
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 560px);
  gap: 40px 56px;
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro {
  max-width: 520px;
}
@media (max-width: 1100px) {
  /* 窄屏左轨道变薄，表单同步收窄，避免左列被挤成窄条 */
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 500px);
    gap: 32px 40px;
  }
}
@media (max-width: 800px) {
  /* ⚠️ 必须补回单列：本段规则特异性 (0,2,0) 高于共享的 `.ycg-tousu__form-grid` (0,1,0)，
     媒体查询不增加权重 —— 不写这条，≤800 会仍是两列，左列被 300px 的表单挤成窄条 */
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* —— 5 · 「提交…需求」左列：面板化 + 勾选清单 + 记录本插图 ————————
   原状：左列是"裸"内容（标题 + 3 条圆点提示，共 165px 高），垂直居中漂在
   623px 高的米底 section 里，右侧表单却高 527px → 左列空掉 362px 且没有
   边界，显得"没做完"。字段与内容一字未动，纯粹把这块补满：
     ① `align-self: stretch` + flex column → 与右侧表单等高，成"板块"而非漂浮
     ② 浅品牌红渐变底 + 1px 淡红边 + 8px 圆角 → 与上方 cases 的浅红卡同语汇，
        也把"说明区"和右侧"填写区"从白卡里区分开
     ③ 3 条提示由裸圆点列表转「勾徽章 + 文字」清单（24px 圆徽章内嵌勾）
     ④ 底部 `::after` 一枚实心图标（内联 SVG data-uri，**不新增图片文件**），
        `margin-top: auto` + `margin-right/bottom` 留白，落在右下角
   2026-09-18 二次调整：作用域由 `.ycg-topic--yanxuan` 改为
   `:is(.ycg-topic, .ycg-tousu)` → 四个专题页 + 投诉帮页一并生效。 */
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro {
  max-width: 520px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, rgba(230, 52, 41, 0.07) 0%, rgba(230, 52, 41, 0.02) 62%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(230, 52, 41, 0.15);
  border-radius: 8px;
  padding: 26px 26px 22px;
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro .ycg-bangcai__head {
  /* ⚠️ 这里的三条虚线（标题下 1 条 + 前两条 li 各 1 条）必须等距。
     度量口径：li 的 `padding: 13px 0` + `border-bottom 1px` → 相邻两线距离 = li 盒高；
     而 线1 到 线2 的距离 = head 的 margin-bottom + padding-bottom + li 盒高。
     原 margin-bottom: 18px 让 线1→线2 = 69px 而 线2→线3 = 51px（差正好 18px）。
     故 margin-bottom 归零，让 线1 紧贴 li1 顶部；padding-bottom 与 li 的 padding 同取
     13px，使「标题末行→线1」与「li 文字末行→线」一致（16.2px）。 */
  margin-bottom: 0;
  padding-bottom: 13px;
  border-bottom: 1px dashed rgba(230, 52, 41, 0.18);
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__tips {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0;
}
/* 第 3 版（2026-09-18）：原来每条是「白底小条 + 1px 边框」，三条并列看着像
   三个输入框。改为**去掉逐条底与框、用满宽的极细虚线分隔** ——
   虚线撑满 620px 面板宽，右侧不会留下大片空白；整体读作一份"三点须知"。
   ⚠️ 没了白条托底，勾徽章必须从「淡红 0.12 圆」换成「白底圆 + 淡红描边」，
      否则透明白叠在浅红面板上会糊掉（见 PITFALLS §7.1「透明白叠同色底」）。 */
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__tips li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ycg-text-sub);
  padding: 13px 0;
  border-bottom: 1px dashed rgba(230, 52, 41, 0.18);
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__tips li:last-child { border-bottom: 0; }
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__tips li::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid rgba(230, 52, 41, 0.26);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.7 8.9 9.8 3.5' fill='none' stroke='%23E63429' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro::after {
  content: "";
  margin-top: auto;
  align-self: flex-end;      /* 靠右下角（不是左对齐） */
  margin-right: 22px;        /* ⚠️ "离边缘留点距离"：面板自身还有 26px padding，
                                故距面板右边框实为 26+22 = 48px，不要减掉 padding */
  margin-bottom: 8px;        /* 同理，距下边框 22+8 = 30px */
  width: 168px;
  height: 168px;
  /* 插图：一枚实心图标 —— 「记录本 + 笔」，语义为"填写采购需求"。
     源图为 1024 方图、双 path 实心填充，直接沿用其 `d` 数据，只把填充色换成品牌红
     （原 `#323333` → `%23E63429`），并去掉 t/class/p-id 无用属性。
     ⚠️ 实心图标比原线稿"重"，靠 **`opacity: .6`** 压淡（用户 2026-09-18 指定 60%），
        "线条看着粗"其实是填充色太实，降透明度比改几何更省事且保形。
     定位：盒取正方形（`align-self: flex-end` 贴右），内部 `center / contain` 正好填满，
     「留白距离」一律用 `margin` 而非 `background-position` —— 后者只挪图、盒子仍占原位，
     量出来看不出差别，且换 box 尺寸时容易忘了同步改。 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M926.08 192L425.6 92.16l-23.04 64-151.04 411.52a41.6 41.6 0 0 1-33.92 32 39.04 39.04 0 0 1-39.68-56.32l48.64-133.12L361.6 40.96a40.96 40.96 0 0 1 53.76-30.08l562.56 111.36a40.32 40.32 0 0 1 33.92 56.32c-64 206.72-135.04 413.44-215.04 615.04a640 640 0 0 1-64 128 207.36 207.36 0 0 1-167.04 92.8A236.16 236.16 0 0 1 448 990.72c-106.24-47.36-211.2-94.72-316.8-142.08a208.64 208.64 0 0 1-79.36-55.04 192 192 0 0 1-42.24-141.44c0-17.28 4.48-35.2 7.04-54.4l10.88 3.84c141.44 56.96 282.24 114.56 423.68 170.88a13.44 13.44 0 0 1 9.6 14.08 203.52 203.52 0 0 0 18.56 99.2 92.8 92.8 0 0 0 96.64 49.28 136.32 136.32 0 0 0 98.56-72.96 858.24 858.24 0 0 0 64-145.92c60.16-156.8 113.92-316.16 166.4-476.16 5.76-16 10.88-32 16-48.64z m0 0' fill='%23E63429'/%3E%3Cpath d='M645.76 689.92a37.76 37.76 0 0 1-50.56 35.84l-163.84-54.4a39.68 39.68 0 0 1-26.24-40.32 37.76 37.76 0 0 1 33.28-33.28 52.48 52.48 0 0 1 19.84 0l158.08 52.48a37.76 37.76 0 0 1 29.44 37.76z m64-155.52a35.84 35.84 0 0 1-10.24 26.88 36.48 36.48 0 0 1-26.88 10.88 44.16 44.16 0 0 1-16 0l-159.36-54.4a38.4 38.4 0 0 1-28.16-47.36 36.48 36.48 0 0 1 42.88-27.52c19.2 5.12 37.12 12.16 55.68 17.92l108.8 35.84a37.76 37.76 0 0 1 30.08 37.12z m67.84-166.4a36.48 36.48 0 0 1-40.96 37.12c-23.68-4.48-46.72-11.52-69.76-17.92l-102.4-27.52a37.12 37.12 0 0 1-30.08-33.92 36.48 36.48 0 0 1 18.56-36.48 42.24 42.24 0 0 1 35.2 0L704 320l44.8 12.16a39.04 39.04 0 0 1 28.8 37.12z m-380.16 39.04a40.96 40.96 0 0 1 40.96 40.96 39.68 39.68 0 0 1-38.4 38.4 40.96 40.96 0 0 1-42.88-38.4 38.4 38.4 0 0 1 38.4-38.4z m64-81.92a40.32 40.32 0 0 1-41.6-39.04 35.84 35.84 0 0 1 11.52-26.88 37.76 37.76 0 0 1 26.88-10.88 39.68 39.68 0 0 1 42.24 39.68 35.84 35.84 0 0 1-39.04 36.48zM336 554.88a39.68 39.68 0 0 1 41.6 39.04 37.76 37.76 0 0 1-10.88 26.88 40.32 40.32 0 0 1-26.24 10.88 40.96 40.96 0 0 1-44.16-39.04 38.4 38.4 0 0 1 39.68-37.76z m0 0' fill='%23E63429'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.6;
}
/* ⚠️ 上面的 `max-width: 520px` / `align-self: stretch` 与本文件更靠前的断点**特异性相同
   但位置更后**，会把它们的 `max-width: none` / `align-self: auto` 静默盖掉 ——
   单列断点必须在本段之后重写一遍，否则 ≤800 面板卡在 520px 宽、在 760px 容器里左缩。 */
@media (max-width: 800px) {
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro {
    max-width: none;
    align-self: auto;          /* 单列下没有"等高"的对象，交回居中 */
    padding: 22px 20px 18px;
  }
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro::after {
    /* 窄屏同样贴右下角，只是收小一档、留白同步收窄 */
    align-self: flex-end;
    width: 132px;
    height: 132px;
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 4px;
  }
}

/* —— 6 · 「提交…需求」：左右两块拼成一体面板 ————————————————
   第 4 段把右表单做成白卡、第 5 段把左列做成浅红说明面板，两块各自带
   边框圆角、中间留 56px 空档 —— 读起来是"两张卡"。这里消除接缝，
   拼成**一个**「左说明 / 右填写」的整体面板：
     ① `gap: 0` + `align-items: stretch` → 贴边且等高，接缝才平（共享值是 center）
     ② 接缝侧圆角与边框都去掉（左块 `8 0 0 8` 去右边框；右块 `0 8 8 8` 去左边框）
     ③ 阴影由右表单移到外层 grid：右表单在 DOM 里靠后、且左块背景是半透明渐变，
        若各留各的阴影，表单的阴影会渗到左块面板上形成一道脏影
     ④ 左块放开 `max-width`（上两段限到 380 / 520）→ 必须填满左轨道才贴得住右块
     ⑤ 外层 grid 兜一层白底：消灭拼接处可能出现的亚像素缝（透出米底成一条暗线）
   ⚠️ 本段与第 4/5 段**特异性相同、位置更后**，靠层叠顺序生效 ——
      凡是被覆盖的属性都必须在本段写明，不能依赖前面的声明。
   依旧全部带 `.ycg-topic--yanxuan` 作用域，共用该组件的投诉页零影响。 */
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-grid {
  gap: 0;
  align-items: stretch;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px -8px rgba(20, 24, 31, 0.10);
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro {
  max-width: none;
  border-radius: 8px 0 0 8px;
  border-right: 0;
}
:is(.ycg-topic, .ycg-tousu) .ycg-tousu__form {
  border-radius: 0 8px 8px 0;
  border-left: 0;
  box-shadow: none;
}
@media (max-width: 1100px) {
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-grid { gap: 0; }
}
@media (max-width: 800px) {
  /* 单列时改上下拼接：圆角与边框在接缝侧整体对调 */
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form-intro {
    max-width: none;
    border-radius: 8px 8px 0 0;
    border-right: 1px solid rgba(230, 52, 41, 0.15);
    border-bottom: 0;
  }
  :is(.ycg-topic, .ycg-tousu) .ycg-tousu__form {
    border-radius: 0 0 8px 8px;
    border-left: 1px solid var(--ycg-border);
    border-top: 0;
  }
}

/* ==========================================================================
   采购服务 · 模块样式统一 · 第二轮（2026-09-18）
   --------------------------------------------------------------------------
   用户要求：小云帮采 / 投诉帮 / 交易保障 / 厂商入驻 / 成交补贴 五页上
   「与云采购严选旧模块同款」的模块，统一换成严选已改版的新样式。
   **字段与文案一字未动，纯 CSS。**

   ① 三个同模板专题页（交易保障 / 厂商入驻 / 成交补贴）：与严选共用 topic.html
      与 `ycg-topic__*` 组件，故把 steps / cases / 表单段的前缀由 `.ycg-topic--yanxuan`
      放宽为 `.ycg-topic`（表单段为 `:is(.ycg-topic, .ycg-tousu)`），四页 + 投诉页同时生效。
      ⚠️ **例外：features 段（前面第 1 段）已按用户要求收窄回 `.ycg-topic--yanxuan`** ——
         「选择我们 / 选择开创云采购入驻 / 现金补贴有何优势」三个 features 模块保持原样式。
   ② 帮采页 / 投诉页的**同义模块**类名不同但结构同构，在本段按同一套视觉语言重写：
        严选 steps ⇄ `.ycg-bangcai__steps`
                        `.ycg-tousu__flow`     灰底块 + 红数字 → 白卡 + 圆形徽标 + 箭头 + 序号水印
      ⚠️ **「帮采服务优势」`.ycg-bangcai__adv` 已按用户要求撤销修改、回到原样式** ——
         即厂商入驻「选择开创云采购入驻」同款：白卡 + 图标在上 + 居中 + 12px 圆角
         （基础规则见前文 3885-3920，`repeat(4, 1fr)` 正好 4 项一行）。
      ⚠️ 投诉帮 cases（「这些情况，投诉帮都能管」）**未纳入统一**，按用户要求保持原样式
         （白卡 + 居中图标 + 品牌红描述，基础规则见前文 `.ycg-tousu__cases`）。
   ⚠️ 本段只改容器的 `gap` / `grid-auto-rows` / 计数器，**列数沿用基础样式** ——
      这两个组件的条数恰好与基础列数一致（steps 4 项 × 4 列、flow 5 项 × 5 列），
      都在一行内，箭头才串得起来。
      基础断点（1100 → 2 列 / 800 → 1 列）也只改列数、不改 gap，故无需重写。
   ========================================================================== */

/* —— 2 · 步骤/流程：帮采「帮采服务流程」+ 投诉「投诉流程」→ 严选 steps 白卡 ——
   `top: 37px` = li 的 padding-top 20 + 序号徽标 34/2，让箭头对准徽标中线；
   `right: -19px` 配 `gap: 26px` 正好落在卡片间隙中央。 */
.ycg-bangcai__steps,
.ycg-tousu__flow {
  grid-auto-rows: 1fr;
  gap: 26px;
  counter-reset: fuwu-step;
}
.ycg-bangcai__steps li,
.ycg-tousu__flow li {
  position: relative;
  counter-increment: fuwu-step;
  background: #fff;
  border: 1px solid var(--ycg-border);
  border-radius: 8px;
  padding: 20px 16px 22px;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ycg-bangcai__steps li:hover,
.ycg-tousu__flow li:hover {
  border-color: rgba(196, 48, 43, 0.35);
  box-shadow: 0 8px 24px rgba(28, 33, 43, 0.06);
}
.ycg-bangcai__steps li::before,
.ycg-tousu__flow li::before {
  content: counter(fuwu-step, decimal-leading-zero);
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ycg-primary);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease;
}
.ycg-bangcai__steps li:hover::before,
.ycg-tousu__flow li:hover::before { opacity: 0.14; }
/* 「投诉流程」是 5 列一行，单卡只有 ~215px 宽（帮采 4 列有 272）——
   同样的 88px 水印会占掉卡片近四成宽度、压到正文上，故单独收一档到 74px。 */
.ycg-tousu__flow li::before { font-size: 74px; }
.ycg-bangcai__steps li::after,
.ycg-tousu__flow li::after {
  content: "";
  position: absolute;
  top: 37px;
  right: -19px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid var(--ycg-primary);
  border-right: 2px solid var(--ycg-primary);
  opacity: 0.4;
  transform: rotate(45deg);
}
.ycg-bangcai__steps li:last-child::after,
.ycg-tousu__flow li:last-child::after { display: none; }
.ycg-bangcai__steps em,
.ycg-tousu__flow em {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ycg-primary-soft);
  color: var(--ycg-primary);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}
/* 帮采这一步的文案在 `span` 里（没有 strong），保留原字重与字号 */
.ycg-bangcai__steps span { position: relative; }
.ycg-tousu__flow strong { font-size: 15px; margin-bottom: 5px; }
.ycg-tousu__flow span { font-size: 12.5px; color: var(--ycg-text-sub); line-height: 1.55; }
/* ≤1100 基础样式把这几组都收成 2 列（会换行）→ 行末箭头指向空白，统一关掉 */
@media (max-width: 1100px) {
  .ycg-bangcai__steps li::after,
  .ycg-tousu__flow li::after { display: none; }
}

/* —— 全网询价 /xunjia.html —— */
.ycg-xunjia {
  padding: 20px 0 48px;
  background: #f5f6f8;
  min-height: 60vh;
}
.ycg-xunjia__wrap { max-width: 640px; }
.ycg-xunjia__head { margin-bottom: 16px; }
.ycg-xunjia__head h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ycg-ink, #1a1f28);
}
.ycg-xunjia__head p {
  margin: 0;
  color: var(--ycg-text-muted, #6b7280);
  font-size: 14px;
}
.ycg-xunjia__sec {
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 0 rgba(26, 31, 40, 0.04);
}
.ycg-xunjia__sec h2 {
  margin: 0 -16px 14px;
  padding: 0 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1f28;
  border-bottom: 1px solid #f0f1f3;
  background: transparent;
}
.ycg-xunjia__field {
  display: block;
  margin-bottom: 14px;
}
.ycg-xunjia__field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #4b5563;
}
.ycg-xunjia__field > span::before {
  content: '*';
  color: #e2231a;
  margin-right: 4px;
}
.ycg-xunjia__field input,
.ycg-xunjia__field select,
.ycg-xunjia__field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1a1f28;
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ycg-xunjia__field input:focus,
.ycg-xunjia__field select:focus,
.ycg-xunjia__field textarea:focus {
  border-color: #e2231a;
  box-shadow: 0 0 0 3px rgba(226, 35, 26, 0.12);
}
.ycg-xunjia__field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.ycg-xunjia__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ycg-xunjia__code-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ycg-xunjia__code-row input { flex: 1; min-width: 0; }
.ycg-xunjia__sms {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #f2741f;
  font-size: 14px;
  font-weight: 600;
  padding: 0 4px;
  white-space: nowrap;
  cursor: pointer;
}
.ycg-xunjia__sms:disabled { color: #9ca3af; cursor: default; }
.ycg-xunjia__submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: #e2231a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  height: 48px;
  cursor: pointer;
}
.ycg-xunjia__submit:active { opacity: 0.92; }
.ycg-xunjia__legal {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
}
.ycg-xunjia__legal a { color: #f2741f; }
.ycg-xunjia__msg {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: #e2231a;
  min-height: 1.2em;
}
@media (min-width: 761px) {
  .ycg-xunjia { padding: 32px 0 64px; }
  .ycg-xunjia__head h1 { font-size: 26px; }
}

/* 小程序 web-view 内：给自定义底栏留空 */
html.ycg-in-mp body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
html.ycg-in-mp .ycg-footer {
  margin-bottom: 8px;
}