@charset "UTF-8";
/* ============================================================
   君遇圣景 · 产品详情页（移动端）
   参考：商品详情页（标题 / 描述 / 零售+团购价 / 累计销售 / 立即抢购 / 参数表 / 详情+评论标签）
   ============================================================ */

.product-detail{
  padding-top:.1rem;
  padding-bottom:0;
}

/* 顶部栏「返回」 */
.pd-back{
  flex-shrink:0;
  font-size:.24rem; color:var(--gold); letter-spacing:.1em;
}

/* 产品大图 */
.pd-cover{ width:100%; margin-bottom:.28rem; }
.pd-cover img{ width:100%; height:auto; display:block; border-radius:.16rem; }

/* 顶部切换图集：横向滑动 + 吸附 */
.pd-carousel{ position:relative; }
.pd-carousel .pd-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  border-radius:.16rem;
}
.pd-carousel .pd-track::-webkit-scrollbar{ display:none; }
.pd-carousel .pd-slide{
  flex:0 0 100%; width:100%; scroll-snap-align:center;
}
.pd-carousel .pd-slide img{
  width:100%; height:auto; display:block; border-radius:.16rem;
  pointer-events:auto;
}
.pd-carousel .pd-dots{
  position:absolute; left:0; right:0; bottom:.14rem;
  display:flex; justify-content:center; gap:.12rem;
  pointer-events:none;
}
.pd-carousel .pd-dots i{
  width:.12rem; height:.12rem; border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 .04rem rgba(0,0,0,.3);
  transition:background .2s;
}
.pd-carousel .pd-dots i.is-on{ background:#fff; }

/* 标题 */
.pd-title{
  font-family:var(--serif); font-weight:400;
  font-size:.38rem; line-height:1.45; letter-spacing:.02em; color:var(--text);
  margin:0 0 .14rem;
}

/* 描述 */
.pd-desc{
  font-size:.24rem; line-height:1.85; color:var(--dim);
  margin:0 0 .24rem; text-align:justify;
}

/* 价格区 */
.pd-price-row{ margin-bottom:.16rem; }
.pd-price-main{ display:flex; flex-direction:column; gap:.06rem; }
.pd-price-main > div{
  display:flex; align-items:baseline; gap:.1rem;
  font-size:.24rem; line-height:1.7;
}
.pd-price-row span{ color:var(--dim); }
.pd-price-row strong{ font-family:var(--serif); font-size:.32rem; }
.pd-retail strong{ color:#a52a2a; font-weight:700; }  /* 零售价暗红加粗 */
.pd-sale strong{ color:#c62828; }   /* 团购价用醒目红 */
.pd-unit{ font-size:.22rem; font-weight:400; }  /* /套 字号小点 */

/* 操作区：累计销售 + 立即抢购 */
.pd-actions{
  display:flex; align-items:center; gap:.18rem; flex-wrap:wrap;
  margin-bottom:.32rem; padding-bottom:.26rem;
  border-bottom:1px solid var(--sep);
}
.pd-sales{
  display:inline-flex; align-items:center; justify-content:center; gap:.1rem;
  height:.72rem; padding:0 .28rem;
  background:var(--text); color:#fff; border-radius:.12rem;
  font-size:.24rem; letter-spacing:.02em;
  white-space:nowrap; flex-shrink:0;
}
.pd-buy{
  display:inline-flex; align-items:center; justify-content:center; gap:.08rem;
  height:.72rem; padding:0 .34rem;
  border:1px solid #c62828; color:#c62828; border-radius:.12rem;
  font-size:.26rem; letter-spacing:.04em;
  transition:all .2s ease;
  white-space:nowrap; flex-shrink:0;
}
.pd-buy svg{ width:.28rem; height:.28rem; }
.pd-buy:active{ background:#c62828; color:#fff; }

/* 参数表 */
.pd-spec{
  background:var(--ink-2); border:1px solid var(--sep);
  border-radius:.16rem; overflow:hidden;
  margin-bottom:.32rem;
}
.pd-spec-row{
  display:flex; align-items:center;
  border-bottom:1px solid var(--sep);
}
.pd-spec-row:last-child{ border-bottom:0; }
.pd-spec-label{
  width:1.6rem; flex-shrink:0;
  padding:.2rem .24rem;
  font-size:.24rem; color:var(--dim); letter-spacing:.2em;
  text-align:justify; text-align-last:justify;
  background:#fff;
}
.pd-spec-value{
  flex:1; padding:.2rem .24rem;
  font-size:.24rem; color:var(--text);
}

/* 详情/评论 标签 */
.pd-tabs{
  display:flex; border-bottom:1px solid var(--sep);
  margin-bottom:.24rem;
}
.pd-tabs button{
  flex:1; padding:.2rem 0;
  font-size:.26rem; color:var(--dim); letter-spacing:.04em;
  position:relative;
}
.pd-tabs button.is-active{ color:var(--gold); }
.pd-tabs button.is-active::after{
  content:""; position:absolute; left:25%; right:25%; bottom:0;
  height:2px; background:var(--gold);
}

/* 详情面板 */
.pd-panel{ display:none; }
.pd-panel.is-active{ display:block; }
.pd-panel p{
  font-size:.26rem; line-height:1.95; color:var(--text);
  margin:0 0 .2rem; text-align:justify;
}
.pd-panel figure{ margin:0 0 .24rem; }
.pd-panel figure img{ width:100%; height:auto; border-radius:.12rem; display:block; }

/* 评论为空 */
.pd-empty{ text-align:center; color:var(--soft); padding:1rem 0; font-size:.26rem; }

/* 评论列表 */
.pd-comment-list{
  list-style:none; margin:0; padding:0;
}
.pd-comment-item{
  padding:.24rem 0;
  border-bottom:1px dashed var(--sep);
}
.pd-comment-item:last-child{ border-bottom:0; }
.pd-comment-hd{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.12rem;
}
.pd-comment-user{ display:flex; align-items:baseline; gap:.1rem; }
.pd-comment-user strong{
  font-size:.26rem; color:var(--text); font-weight:400;
}
.pd-comment-user span{
  font-size:.22rem; color:var(--soft);
}
.pd-comment-hd time{
  font-size:.2rem; color:var(--soft);
}
.pd-comment-bd{
  font-size:.24rem; line-height:1.7; color:var(--dim);
  margin-bottom:.12rem;
}
.pd-reply{
  font-size:.22rem; line-height:1.6; color:var(--dim);
  background:var(--ink-2); border-radius:.1rem;
  padding:.12rem .16rem;
}
.pd-reply-label{
  color:#c62828; margin-right:.06rem;
}

/* 我要评论 */
.pd-comment-btn{
  display:flex; align-items:center; justify-content:center; gap:.1rem;
  width:100%; height:.74rem; margin-bottom:.24rem;
  background:var(--gold); color:#fff; border-radius:.12rem;
  font-size:.28rem; letter-spacing:.04em; border:0;
}
.pd-comment-btn svg{ width:.3rem; height:.3rem; }
.pd-comment-btn:active{ opacity:.9; }

/* 评论表单 */
.pd-comment-form{
  background:var(--ink-2); border:1px solid var(--sep);
  border-radius:.16rem; padding:.22rem .2rem;
  margin-bottom:.24rem;
}
.pd-form-row{
  display:flex; align-items:center; gap:.12rem;
  margin-bottom:.18rem;
}
.pd-form-row label{
  width:1.3rem; flex-shrink:0;
  font-size:.24rem; color:var(--text); text-align:justify; text-align-last:justify;
}
.pd-form-row input,
.pd-form-row textarea{
  flex:1; min-width:0; padding:.16rem .18rem;
  border:1px solid var(--sep); border-radius:.1rem;
  background:#fff; font-size:.24rem; color:var(--text);
  outline:none; appearance:none; -webkit-appearance:none;
}
.pd-form-row input:focus,
.pd-form-row textarea:focus{ border-color:var(--gold); }
.pd-form-row textarea{ resize:vertical; line-height:1.5; }
.pd-form-code{ align-items:center; }
.pd-form-code input{ flex:1; min-width:0; }
.pd-form-code canvas{
  width:1.5rem; height:.6rem; border-radius:.08rem;
  border:1px solid var(--sep); background:#fff;
  cursor:pointer; flex-shrink:0;
}
.pd-form-submit{
  display:block; width:100%; height:.74rem; margin-top:.08rem;
  background:#ff6600; color:#fff; border:0; border-radius:.12rem;
  font-size:.28rem; letter-spacing:.04em;
}
.pd-form-submit:active{ opacity:.9; }

/* 未找到 */
.pd-notfound{ text-align:center; color:var(--dim); padding:1.6rem 0; font-size:.26rem; }
.pd-notfound a{ color:var(--gold); }

/* ============================================================
   立即订购弹窗
   ============================================================ */
.pd-order-mask{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  padding:.4rem .3rem;
  box-sizing:border-box;
}
.pd-order-modal{
  width:100%; max-width:6rem; max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:.2rem;
  box-shadow:0 .2rem .6rem rgba(0,0,0,.2);
  box-sizing:border-box;
  animation:pdOrderIn .25s ease;
}
@keyframes pdOrderIn{
  from{ opacity:0; transform:translateY(.3rem); }
  to{ opacity:1; transform:translateY(0); }
}
.pd-order-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:.24rem .3rem; border-bottom:1px solid var(--sep);
}
.pd-order-hd h3{
  font-family:var(--serif); font-size:.32rem; font-weight:400; color:var(--text);
}
.pd-order-close{
  width:.56rem; height:.56rem; line-height:.56rem;
  font-size:.44rem; color:var(--dim); background:none; border:0;
}
.pd-order-close:active{ color:var(--text); }

.pd-order-form{ padding:.24rem .3rem .34rem; }
.pd-order-row{ margin-bottom:.2rem; }
.pd-order-row:last-of-type{ margin-bottom:.1rem; }
.pd-order-row label{
  display:block; margin-bottom:.08rem;
  font-size:.24rem; color:var(--text);
}
.pd-order-row input,
.pd-order-row textarea{
  width:100%; padding:.16rem .18rem;
  border:1px solid var(--sep); border-radius:.1rem;
  background:#fff; font-size:.24rem; color:var(--text);
  outline:none; appearance:none; -webkit-appearance:none;
}
.pd-order-row input:focus,
.pd-order-row textarea:focus{ border-color:var(--gold); }

/* 只读信息 */
.pd-order-readonly{ display:flex; align-items:baseline; gap:.16rem; }
.pd-order-readonly label{ margin-bottom:0; flex-shrink:0; }
.pd-order-readonly span{
  flex:1; font-size:.24rem; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd-order-readonly strong{
  font-size:.28rem; color:#ff0000; font-weight:700;
}

/* 数量 */
.pd-order-qty{ display:flex; align-items:center; gap:.16rem; }
.pd-order-qty label{ margin-bottom:0; }
.pd-qty{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--sep); border-radius:.1rem; overflow:hidden;
}
.pd-qty-btn{
  width:.6rem; font-size:.3rem; color:var(--text);
  background:#f7f7f7; border:0; border-right:1px solid var(--sep);
  display:flex; align-items:center; justify-content:center;
}
.pd-qty-btn:last-child{ border-right:0; border-left:1px solid var(--sep); }
.pd-qty-btn:active{ background:#eee; }
.pd-qty input{
  width:.72rem; text-align:center; padding:.1rem 0;
  border:0; border-radius:0; font-size:.26rem;
  appearance:none; -webkit-appearance:none;
}
.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* 验证码 */
.pd-order-code{ display:flex; align-items:center; gap:.12rem; }
.pd-order-code label{ margin-bottom:0; flex-shrink:0; }
.pd-order-code input{ flex:1; min-width:0; }
.pd-order-code canvas{
  width:1.5rem; height:.6rem; border-radius:.08rem;
  border:1px solid var(--sep); background:#fff;
  cursor:pointer; flex-shrink:0;
}

/* 立即订购 */
.pd-order-submit{
  display:block; width:100%; height:.8rem; margin-top:.18rem;
  background:#ff6600; color:#fff; border:0; border-radius:.12rem;
  font-size:.3rem; letter-spacing:.04em;
}
.pd-order-submit:active{ opacity:.9; }

/* 详情正文长图：上下零缝隙拼接 */
.pd-body-fig{
  margin:0; padding:0;
  line-height:0; font-size:0;
}
.pd-body-fig + .pd-body-fig{ margin-top:0; }
.pd-body-fig img{
  display:block; width:100%; height:auto;
  border-radius:0; margin:0;
  vertical-align:top;
}
/* 描述文字与首图之间保留一点呼吸 */
.pd-panel p + .pd-body-fig{ margin-top:.18rem; }

/* 服务端下发的验证码图片（替代原 canvas 自绘） */
.pd-form-code img{
  width:1.5rem; height:.6rem; border-radius:.08rem;
  border:1px solid var(--sep); background:#fff;
  cursor:pointer; flex-shrink:0;
}
.pd-order-code img{
  width:1.5rem; height:.6rem; border-radius:.08rem;
  border:1px solid var(--sep); background:#fff;
  cursor:pointer; flex-shrink:0;
}