/* =========================================================
   人体工学椅招商（/join）  前缀：join-
   共用组件（卡片轮播、表单、背景图、图标）见 join_common.css
   ========================================================= */

/* ---------- 市场机遇 ---------- */
.join-market { background: #f6f7f9; }
.join-market-space { height: 3.4rem; }
.join-market-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.join-market-card { position: relative; padding: .5rem .56rem .54rem; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .06); }
.join-market-no { position: absolute; right: .44rem; top: .36rem; font-family: Arial, sans-serif; font-size: .56rem; font-weight: 800; line-height: 1; color: #f0f0f0; }
.join-market-card h3 { position: relative; font-size: .28rem; margin-bottom: .2rem; padding-right: .8rem; }
.join-market-card p { position: relative; font-size: .18rem; line-height: 1.9; color: var(--c-text-2); }
.join-market-card p + p { margin-top: .12rem; }

/* ---------- 零售创新 ---------- */
.join-retail-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.join-retail-item { padding: .56rem .44rem .52rem; border-radius: var(--radius-lg); background: #fff; text-align: center; transition: transform .4s var(--ease), box-shadow .4s; }
.join-retail-item:hover { transform: translateY(-.06rem); box-shadow: 0 .16rem .4rem rgba(0, 0, 0, .07); }
.join-retail-icon { width: 1rem; height: 1rem; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: .44rem; }
.join-retail-icon img { max-width: 60%; max-height: 60%; }
.join-retail-text h3 { font-size: .26rem; margin: .3rem 0 .16rem; }
.join-retail-text p { font-size: .17rem; line-height: 1.95; color: var(--c-text-2); }

/* ---------- 九大优势：默认 3 列网格；≥1200 且 5~10 项时为环形 ---------- */
.join-adv-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .24rem; }
.join-adv-center { display: none; }
.join-adv-item { display: flex; align-items: center; gap: .18rem; padding: .24rem .28rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.join-adv-icon { width: .64rem; height: .64rem; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: .3rem; transition: background .3s, color .3s; }
.join-adv-icon img { max-width: 62%; max-height: 62%; }
.join-adv-text { min-width: 0; }
.join-adv-text h3 { font-size: .2rem; line-height: 1.4; }
.join-adv-text p { margin-top: .02rem; font-size: .15rem; line-height: 1.5; color: var(--c-text-3); transition: color .3s; }
.join-adv-item:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .12); }
.join-adv-item:hover .join-adv-icon { background: #fff; color: var(--c-text); }
.join-adv-item:hover .join-adv-text p { color: rgba(255, 255, 255, .7); }

@media (min-width: 1200px) {
  @supports (top: calc(1px * sin(30deg))) {
    .join-adv-list.is-ring { display: block; position: relative; height: 6.6rem; }
    .join-adv-list.is-ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10.2rem; height: 5rem; border: 1px dashed #cfcfcf; border-radius: 50%; transform: translate(-50%, -50%); }
    .join-adv-list.is-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0) 70%); transform: translate(-50%, -50%); }
    .is-ring .join-adv-center { display: flex; position: absolute; z-index: 1; left: 50%; top: 50%; width: 2.3rem; height: 2.3rem; margin: -1.15rem 0 0 -1.15rem; border-radius: 50%; background: var(--c-primary); color: #fff; align-items: center; justify-content: center; text-align: center; padding: .3rem; font-size: .32rem; font-weight: 700; line-height: 1.35; letter-spacing: .02rem; box-shadow: 0 0 0 .16rem rgba(0, 0, 0, .05), 0 0 0 .32rem rgba(0, 0, 0, .03); }
    .is-ring .join-adv-item { position: absolute; z-index: 2; left: calc(50% + cos(var(--a)) * 5.1rem); top: calc(50% + sin(var(--a)) * 2.5rem); width: 2.8rem; padding: .12rem .24rem .12rem .12rem; border-radius: 1rem; transform: translate(-50%, -50%); box-shadow: 0 .08rem .24rem rgba(0, 0, 0, .05); opacity: 0; transition: opacity .6s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s; transition-delay: calc(var(--i) * .08s + .2s), 0s, 0s, 0s, 0s; }
    .is-ring.in .join-adv-item { opacity: 1; }
    .is-ring .join-adv-icon { width: .66rem; height: .66rem; }
  }
}

/* ---------- 品牌卖点：PC 横向手风琴 ---------- */
.join-acc { display: flex; gap: .16rem; height: 5.6rem; }
.join-acc-item { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; color: #fff; cursor: pointer; outline: none; transition: flex-grow .4s var(--ease); }
.join-acc-item.on { flex-grow: 3.86; cursor: default; }
.join-acc-bg { position: absolute; inset: 0; }
.join-acc-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.join-acc-item.on .join-acc-bg img { transform: scale(1.04); }
.join-acc-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); transition: background .4s; }
.join-acc-item.on .join-acc-mask { background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .1) 100%); }
.join-acc-label { position: absolute; left: .1rem; right: .1rem; bottom: .44rem; text-align: center; font-size: .22rem; font-weight: 600; line-height: 1.4; transition: opacity .3s; }
.join-acc-item.on .join-acc-label { opacity: 0; }
.join-acc-body { position: absolute; left: .56rem; bottom: .56rem; width: 5.4rem; opacity: 0; transform: translateY(.24rem); transition: opacity .3s, transform .3s; pointer-events: none; }
.join-acc-item.on .join-acc-body { opacity: 1; transform: none; transition: opacity .4s .2s, transform .4s .2s; }
.join-acc-icon { width: .64rem; height: .64rem; font-size: .56rem; color: #fff; }
.join-acc-icon .ico { stroke-width: 1.3; }
.join-acc-body h3, .join-brand-card-body h3 { margin: .24rem 0 .2rem; font-size: .36rem; }
.join-acc-line { display: block; width: .6rem; height: 2px; margin-bottom: .22rem; background: #fff; }
.join-acc-body li, .join-brand-card-body li { font-size: .18rem; line-height: 2; color: rgba(255, 255, 255, .85); }
.join-acc-item:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

/* 手机：品牌卖点轮播卡片 */
.join-brand-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: #fff; aspect-ratio: 3 / 4; }
.join-brand-card-bg, .join-brand-card-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.join-brand-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .2) 65%, rgba(0, 0, 0, .05) 100%); }
.join-brand-card-body { position: absolute; z-index: 1; left: .4rem; right: .4rem; bottom: .44rem; }

/* ---------- 品牌实力 / 奖项 ---------- */
.join-awards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .36rem .24rem; }

/* ---------- 品类产品 ---------- */
.join-prod-card { display: block; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-gray); }
.join-prod-img { position: relative; aspect-ratio: 600 / 780; overflow: hidden; background: var(--c-bg-gray-2); }
.join-prod-img .pic, .join-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.join-prod-img img { transition: transform .6s var(--ease); }
.join-prod-card:hover .join-prod-img img { transform: scale(1.05); }
.join-prod-name { padding: .24rem .2rem; text-align: center; font-size: .2rem; font-weight: 600; transition: background .3s, color .3s; }
a.join-prod-card:hover .join-prod-name { background: var(--c-primary); color: #fff; }

/* ---------- 加盟要求（深色） ---------- */
.join-req { background: var(--c-dark); }
.join-req-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.join-req-item { padding: .2rem .4rem; text-align: center; }
.join-req-item:not(:nth-child(4n+1)) { border-left: 1px solid rgba(255, 255, 255, .2); }
.join-req-item:nth-child(n+5) { margin-top: .5rem; }
.join-req-icon { width: .8rem; height: .8rem; font-size: .64rem; color: #fff; }
.join-req-icon .ico { stroke-width: 1.2; }
.join-req-item h3 { margin: .3rem 0 .16rem; font-size: .26rem; }
.join-req-item p { font-size: .17rem; line-height: 1.9; color: rgba(255, 255, 255, .7); text-wrap: balance; }

/* ---------- 合作流程 ---------- */
.join-process { background: var(--c-bg-gray-2); }
.join-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .24rem; }
.join-step { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.6rem; padding: .36rem .36rem .4rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; transition: border-color .3s, box-shadow .3s, transform .4s var(--ease); }
.join-step:hover { border-color: var(--c-primary); box-shadow: 0 .14rem .36rem rgba(0, 0, 0, .07); transform: translateY(-.04rem); }
.join-step-icon { position: absolute; right: .32rem; top: .32rem; width: .76rem; height: .76rem; border-radius: 50%; background: var(--c-bg-gray); font-size: .36rem; transition: background .3s, color .3s; }
.join-step-icon img { max-width: 60%; max-height: 60%; }
.join-step:hover .join-step-icon { background: var(--c-primary); color: #fff; }
.join-step-no { font-family: Arial, sans-serif; font-size: .44rem; font-weight: 800; line-height: 1; }
.join-step-no i { font-style: normal; font-weight: 400; color: var(--c-text-3); margin-left: .02rem; }
.join-step h3 { margin-top: .18rem; font-size: .24rem; }
.join-step p { margin-top: .08rem; font-size: .15rem; line-height: 1.7; color: var(--c-text-3); }

/* ---------- 平板（761~1199，PC 版式但宽度较窄） ---------- */
@media (max-width: 1199px) {
  .join-awards-grid { grid-template-columns: repeat(4, 1fr); }
  .join-adv-text h3 { font-size: .22rem; }
  .join-adv-text p { font-size: .17rem; }
  .join-acc-body { left: .4rem; bottom: .4rem; width: 4.4rem; }
  .join-acc-label { font-size: .2rem; }
  .join-req-item { padding: .2rem .24rem; }
  .join-step { padding: .3rem .26rem .32rem; }
}

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  .join-market-space { height: 3.2rem; }
  .join-market-cards { grid-template-columns: 1fr; gap: .24rem; }
  .join-market-card { padding: .44rem .4rem .48rem; }
  .join-market-no { right: .36rem; top: .34rem; font-size: .64rem; }
  .join-market-card h3 { font-size: .34rem; margin-bottom: .16rem; }
  .join-market-card p { font-size: .27rem; line-height: 1.85; }

  .join-retail-list { grid-template-columns: 1fr; gap: .24rem; }
  .join-retail-item { display: flex; align-items: flex-start; gap: .3rem; padding: .4rem .36rem; text-align: left; }
  .join-retail-item:hover { transform: none; box-shadow: none; }
  .join-retail-icon { width: 1rem; height: 1rem; font-size: .46rem; }
  .join-retail-text h3 { font-size: .32rem; margin: .04rem 0 .1rem; }
  .join-retail-text p { font-size: .26rem; line-height: 1.8; }

  .join-adv-list { grid-template-columns: repeat(2, 1fr); gap: .2rem; }
  .join-adv-item { flex-direction: column; justify-content: center; gap: .16rem; padding: .36rem .16rem .32rem; text-align: center; }
  .join-adv-icon { width: .84rem; height: .84rem; font-size: .4rem; }
  .join-adv-text h3 { font-size: .28rem; }
  .join-adv-text p { font-size: .23rem; margin-top: .04rem; }
  .join-adv-list.is-odd .join-adv-item:last-child { grid-column: span 2; flex-direction: row; justify-content: center; gap: .24rem; text-align: left; }
  .join-adv-item:hover { background: #fff; color: var(--c-text); border-color: var(--c-line); box-shadow: none; }
  .join-adv-item:hover .join-adv-icon { background: var(--c-primary); color: #fff; }
  .join-adv-item:hover .join-adv-text p { color: var(--c-text-3); }

  .join-brand-card-body h3 { font-size: .4rem; margin: .2rem 0 .16rem; }
  .join-brand-card-body .join-acc-icon { width: .8rem; height: .8rem; font-size: .7rem; }
  .join-brand-card-body .join-acc-line { width: .7rem; margin-bottom: .18rem; }
  .join-brand-card-body li { font-size: .26rem; line-height: 1.8; }

  .join-prod-card { position: relative; }
  .join-prod-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem .3rem .34rem; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); color: #fff; font-size: .32rem; text-align: left; }
  a.join-prod-card:hover .join-prod-name { background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }

  .join-req-list { grid-template-columns: repeat(2, 1fr); }
  .join-req-item { padding: .4rem .16rem; }
  .join-req-item:not(:nth-child(4n+1)) { border-left: 0; }
  .join-req-item:nth-child(n+5) { margin-top: 0; }
  .join-req-item:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .2); }
  .join-req-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .2); }
  .join-req-icon { width: .9rem; height: .9rem; font-size: .72rem; }
  .join-req-item h3 { font-size: .32rem; margin: .24rem 0 .12rem; }
  .join-req-item p { font-size: .23rem; line-height: 1.65; }

  .join-steps { grid-template-columns: 1fr; gap: .2rem; }
  .join-step { flex-direction: row; align-items: center; justify-content: space-between; gap: .3rem; min-height: 0; padding: .32rem .36rem; }
  .join-step:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
  .join-step-text { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .24rem; }
  .join-step-no { font-size: .4rem; }
  .join-step-no i { display: none; }
  .join-step h3 { margin-top: 0; font-size: .3rem; }
  .join-step p { grid-column: 2; margin-top: .06rem; font-size: .24rem; line-height: 1.6; }
  .join-step-icon { position: static; width: .84rem; height: .84rem; font-size: .4rem; }
}