/* shop_join 页面组的专用样式（商城 / 商品詳情 / 兌換成功 / 申請入會）。
 * 只用 app.css 里的 var(--token)，不写十六进制色值；兼容 iOS Safari 14（不用 inset / flex gap / aspect-ratio）。
 * class 前缀：sj-（本组共用）、shp-（商城）、pd-（商品詳情）、dn-（兌換成功）、jn-（入會申請）。
 */

/* ---------------------------------------------------------------- 共用：入会引导（小程序 join-guide） */
.sj-guide-wrap { margin-top: var(--sp-3); }
.sj-guide { padding: var(--sp-5) var(--sp-4); text-align: center; }
.sj-guide__text { margin-top: var(--sp-2); }
.sj-guide__action { margin-top: var(--sp-4); }
.sj-guide__action .btn { display: inline-flex; width: auto; min-width: 160px; }

/* ---------------------------------------------------------------- 商城（tab） */
/* 余额胶囊：小程序放在大标题行右侧，这里放在列表顶部右对齐 */
.shp-bal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: fit-content;
  margin: var(--sp-4) var(--gutter) var(--sp-3) auto;
  padding: 7px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--tint-soft);
  white-space: nowrap;
}
.shp-bal__label { flex: 0 0 auto; color: var(--label-2); white-space: nowrap; }
.shp-bal__value { flex: 0 0 auto; color: var(--tint); line-height: 1; white-space: nowrap; }
.shp-search { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.shp-search .input { flex: 1 1 auto; min-width: 0; }
.shp-search .btn { flex: 0 0 auto; }

/* 两列商品网格：不用 aspect-ratio，图片区用 padding-bottom 撑出 1:1 */
.shp-grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.shp-card {
  display: block;
  width: calc((100% - var(--sp-3)) / 2);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: inherit;
  text-decoration: none;
}
.shp-card:active { transform: scale(0.98); opacity: 0.85; }
.shp-card.is-soldout { opacity: 0.5; }
.shp-card__img {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: var(--fill);
}
.shp-card__pic,
.shp-card__ph {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.shp-card__pic { display: block; object-fit: cover; }
.shp-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-3);
}
.shp-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--label-2);
  color: var(--bg-elevated);
}
.shp-card__body { display: block; padding: 10px var(--sp-3) var(--sp-3); }
.shp-card__name { display: block; min-height: 46px; }
.shp-card__price { display: block; margin-top: 4px; font-weight: 600; }
.shp-card__stock { display: block; margin-top: 2px; }
.shp-skeleton { display: block; width: 100%; height: 0; padding-bottom: 100%; border-radius: var(--radius); }
.shp-skel-line { display: block; height: 12px; margin-top: var(--sp-2); }
.shp-skel-line--short { width: 60%; }
.shp-foot { padding: var(--sp-4) 0 var(--sp-5); text-align: center; }

/* ---------------------------------------------------------------- 商品詳情 */
.pd-body { padding-bottom: var(--sp-5); }
.pd-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 92vw, 380px);
  overflow: hidden;
  border-radius: 0 0 26px 26px;
  background: var(--fill);
  box-shadow: var(--shadow-float);
}
.pd-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 22px; background: linear-gradient(180deg, transparent, var(--bg)); content: ""; pointer-events: none; }
.pd-hero__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-hero__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--label-3);
}
.pd-skel-hero { display: block; width: 100%; height: clamp(320px, 92vw, 380px); border-radius: 0 0 26px 26px; }
.pd-skel { padding-top: var(--sp-3); }
.pd-info { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.pd-info__price { margin-top: 4px; }
.pd-info__desc { margin-top: var(--sp-2); }
.pd-info__meta { display: flex; flex-wrap: wrap; margin-top: var(--sp-2); }
.pd-info__meta > span { margin-right: var(--sp-4); }

/* 数量步进器 */
.pd-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.pd-qty__ctl { display: flex; align-items: center; }
.pd-qty__btn {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-soft);
  color: var(--tint);
  font-size: 22px;
  line-height: var(--tap);
  text-align: center;
}
.pd-qty__btn.is-off { opacity: 0.35; }
.pd-qty__num { display: inline-block; min-width: 48px; text-align: center; }
.pd-tip { margin-top: var(--sp-2); }

/* 底部操作条里的合计 */
.pd-bar__label { display: block; }
.pd-bar__total { display: block; }

/* 确认兑换 sheet 内部 */
.pd-sh__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-1) 0 var(--sp-4);
}
.pd-sh__name { flex: 1 1 auto; min-width: 0; margin-right: var(--sp-3); }
.pd-sh__total { flex: 0 0 auto; }
.pd-sh__error { margin-top: var(--sp-2); }

/* ---------------------------------------------------------------- 兌換成功 */
.dn-wrap { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
.dn-skel { display: block; width: 50%; height: 60px; margin: 0 auto var(--sp-4); }
.dn-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-3);
  text-align: center;
}
.dn-hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--green-soft);
}
/* 对勾：两条边旋转 45 度（被取消的订单换成一条横线） */
.dn-hero__mark {
  width: 16px;
  height: 32px;
  margin-top: -4px;
  border-right: 5px solid var(--green);
  border-bottom: 5px solid var(--green);
  transform: rotate(45deg);
}
.dn-hero__icon.is-cancelled { background: var(--red-soft); }
.dn-hero__icon.is-cancelled .dn-hero__mark {
  width: 28px;
  height: 0;
  margin-top: 0;
  border-right: 0;
  border-bottom: 5px solid var(--red);
  transform: none;
}
.dn-hero__sub { margin-top: var(--sp-1); }
.dn-card { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.dn-kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-3) 0;
}
.dn-kv + .dn-kv { border-top: var(--hairline) solid var(--separator); }
.dn-kv__k { flex: 0 0 auto; margin-right: var(--sp-4); }
.dn-kv__v {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  word-break: break-all;
}
.dn-actions { margin-top: var(--sp-5); }
.dn-actions__gap { height: var(--sp-3); }

/* ---------------------------------------------------------------- 申請入會 */
.jn-wrap { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.jn-banner {
  margin-bottom: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  border: var(--hairline) solid var(--glass-stroke);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
}
.jn-banner__head { margin-bottom: var(--sp-2); }
.jn-banner .t-callout + .t-callout { margin-top: var(--sp-1); }
.jn-intro { margin: 0 var(--gutter) var(--sp-1); }
.jn-group-title { margin-top: var(--sp-3); }
.jn-photo { display: flex; align-items: center; margin: var(--sp-2) var(--gutter) var(--sp-3); padding: var(--sp-3); border-radius: var(--radius); background: var(--bg-elevated); }
.jn-photo__image { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-right: var(--sp-3); flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--tint-soft); color: var(--tint); font-size: 12px; }
.jn-photo__image img { width: 100%; height: 100%; object-fit: cover; }
.jn-photo__body { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; font-size: 14px; }
.jn-photo__body span { margin-top: var(--sp-1); color: var(--label-2); font-size: 12px; }
.jn-photo .btn { width: auto; min-width: 64px; margin-left: var(--sp-2); }
.jn-submit { margin-top: var(--sp-5); }
.jn-submit-error { margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------- 减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .shp-card:active { transform: none !important; opacity: 1 !important; }
}

/* 成交紀錄 */
.deal-row { margin-bottom: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.deal-row__head { display: flex; align-items: baseline; justify-content: space-between; }
.deal-row__title { flex: 1 1 auto; min-width: 0; margin-right: var(--sp-3); font-weight: 600; overflow-wrap: anywhere; }
.deal-row__price { flex: 0 0 auto; color: var(--tint); font-weight: 700; }
.deal-row__meta { display: flex; align-items: center; flex-wrap: wrap; margin-top: var(--sp-1); }
.deal-row__meta > * { margin-right: var(--sp-2); }