@charset "UTF-8";
/* ============================================================
 * 项目详情页样式 —— 1:1 移植 beauts_app/pages/project/detail.vue scoped scss
 * 单位:cqw;1rpx = 0px
 * 复用 app.css 已有的:.detail-nav / .text img / .toggle-lang / .feedback-list-component / .app-popup-*
 * ============================================================ */

.body { background: #f6f6f6; padding-bottom:round(down, calc(95 * var(--px)), 1px); min-height: 100vh; }

/* ===== 顶部轮播 ===== */
.swiper-body {
    position: relative;
    width: 100%; height:round(down, calc(375 * var(--px)), 1px);
    background: #f5f5f5; overflow: hidden;
}
.swiper-body .swiper { width: 100%; height: 100%; }
.swiper-body .swiper-item { width: 100%; height: 100%; }
.swiper-body .swiper-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swiper-body .swiper-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:16%; height:round(down, calc(60 * var(--px)), 1px); z-index: 5;
}
.swiper-body .swiper-play img { width: 100%; height: 100%; }
/* 老站实测：高 18px、padding 0 7px、行高 18px、12px 字 */
.swiper-body .current {
    position: absolute; right:round(down, calc(10 * var(--px)), 1px); bottom:round(down, calc(24 * var(--px)), 1px);
    height:round(down, calc(18 * var(--px)), 1px); line-height:round(down, calc(18 * var(--px)), 1px);
    color: #fff; font-size:round(down, calc(12 * var(--px)), 1px);
    background: rgba(51,51,51,0.5); padding:0 round(down, calc(7 * var(--px)), 1px);
    border-radius:round(down, calc(10 * var(--px)), 1px);
}

/* ===== 价格 + 项目名 ===== */
/* ==========================================================================
   项目名 + 价格 + 医生卡
   数值全部照 pages/project/detail.vue 的 SCSS 换算（375 下 1rpx = 0.5px）。

   ⚠ 上一版这一段是自造的：.price-cur / .price-val / .price-unit / .sale-num /
     .user-name / .user-job / .user-tag —— 老站里一个都没有。老站的结构是
       .project-price-box > .price-title > .title
                                         > .bottom-box > .price-top > text×3
                                                       > text（已预约N）
       .project-price-box > .title > .title-user > .user-left + .user-right
                                                   > .user-top > text
                                                   > .user-down > text + view×N
   ========================================================================== */
.project-price-box { margin:round(down, calc(10 * var(--px)), 1px) round(down, calc(12 * var(--px)), 1px); }
.project-price-box .price-title {
    position: relative;
    background: #fff;
    border-radius:round(down, calc(12 * var(--px)), 1px);
    box-sizing: border-box;
}
.project-price-box .price-title .title {
    padding:round(down, calc(17 * var(--px)), 1px) round(down, calc(9 * var(--px)), 1px) round(down, calc(5 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
    font-size:round(down, calc(16 * var(--px)), 1px); font-weight: 500; color: #1b1b1b;
    margin: 0;
}
.project-price-box .price-title .bottom-box {
    padding:1px round(down, calc(9 * var(--px)), 1px) round(down, calc(14 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
    display: flex; justify-content: space-between; align-items: center;
}
.project-price-box .price-title .price-top { margin-top:round(down, calc(15 * var(--px)), 1px); }
.project-price-box .price-title .price-top > span:nth-child(1) {
    font-size:round(down, calc(10 * var(--px)), 1px); color: #fc6290; margin-right:round(down, calc(4 * var(--px)), 1px);
}
.project-price-box .price-title .price-top > span:nth-child(2) {
    font-size:round(down, calc(16 * var(--px)), 1px); color: #fc6290; font-weight: 600;
}
.project-price-box .price-title .price-top > span:nth-child(3) {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #999999;
}
/* 「已预约 N」 */
.project-price-box .price-title .bottom-box > span {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #999999; margin-top:round(down, calc(15 * var(--px)), 1px);
}

/* 医生卡外层：老站是第二个 .project-price-box 里的 .title（白底圆角） */
.project-price-box .title {
    width: 100%;
    background-color: #ffffff;
    padding:round(down, calc(10 * var(--px)), 1px);
    border-radius:round(down, calc(10 * var(--px)), 1px);
    box-sizing: border-box;
}
.title-user { width: 100%; display: flex; align-items: center; text-decoration: none; }
.title-user .user-left {
    width:round(down, calc(45 * var(--px)), 1px); height:round(down, calc(45 * var(--px)), 1px); flex-shrink: 0; margin-right:round(down, calc(5 * var(--px)), 1px);
}
.title-user .user-left img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #f5f5f5;
}
.title-user .user-right { flex-grow: 1; min-width: 0; }
.title-user .user-top {
    display: flex; align-items: center; justify-content: space-between;
    font-size:round(down, calc(13 * var(--px)), 1px); font-weight: 500; color: #333333;
    margin-bottom:round(down, calc(4 * var(--px)), 1px);
}
.title-user .user-down {
    max-width:round(down, calc(300 * var(--px)), 1px);
    display: flex; flex-wrap: wrap; align-items: center;
    font-size:round(down, calc(11 * var(--px)), 1px); font-weight: normal; color: #666666;
}
.title-user .user-down > span { flex-shrink: 0; margin-bottom:round(down, calc(5 * var(--px)), 1px); font-size:round(down, calc(12 * var(--px)), 1px); }
.title-user .user-down > div {
    margin-bottom:round(down, calc(5 * var(--px)), 1px); flex-shrink: 0;
    padding:1px round(down, calc(3 * var(--px)), 1px);
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333333;
    background: #f3f3f3; border-radius:round(down, calc(2 * var(--px)), 1px);
    margin-left:round(down, calc(8 * var(--px)), 1px);
}

/* ===== 项目机构 (.mechanism) ===== */
.mechanism {
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    padding:round(down, calc(12 * var(--px)), 1px); margin:round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) 0;
}
.mechanism .mechanism-title { font-size:round(down, calc(14 * var(--px)), 1px); color: #333; }
/* 老站 margin: 24rpx 0 —— 上下都有 12px（只写上边距会让 .mechanism 矮 12：134 → 122）。
   也没有 gap，间距由右箭头的 margin-left 出。 */
.mechanism .mechanism-detail {
    display: flex; align-items: center; justify-content: space-between;
    margin:round(down, calc(12 * var(--px)), 1px) 0;
    text-decoration: none; color: inherit;
}
.mechanism .mechanism-cover {
    flex: 0 0 round(down, calc(70 * var(--px)), 1px); height:round(down, calc(70 * var(--px)), 1px);
    border-radius:round(down, calc(6 * var(--px)), 1px); overflow: hidden; background: #f5f5f5;
}
.mechanism .mechanism-cover img { width: 100%; height: 100%; object-fit: cover; }
.mechanism .mechanism-detail-left { flex: 1; min-width: 0; }
/* 老站实测这一行高 25 —— 18px 字 × 默认行高。别设 align-items:center 之外的东西。 */
.mechanism .mechanism-detail-top {
    display: flex; justify-content: space-between; align-items: center;
    line-height:round(down, calc(25 * var(--px)), 1px);
    margin-bottom:round(down, calc(7 * var(--px)), 1px); gap:round(down, calc(6 * var(--px)), 1px);
}
/* ⚠ 老站是 .mechanism-detail-top > text（第一个），没有 .mechanism-name */
.mechanism .mechanism-detail-top > span:first-child {
    font-size:round(down, calc(18 * var(--px)), 1px); font-weight: 600; color: #1b1b1b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.mechanism .clinic-fee {
    color: #fc6290; font-size:round(down, calc(14 * var(--px)), 1px); font-weight: bold;
    white-space: nowrap;
}
.mechanism .mechanism-detail-down {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #aaa; font-weight: 300; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* ⚠ 没有 margin-top —— 老站这里是行内 style，只有颜色/字号/flex（多 5px 会让
   .mechanism 从 134 涨到 139） */
.mechanism .mechanism-detail-resp { color: #aaa; font-size:round(down, calc(12 * var(--px)), 1px); }
/* 老站 51rpx × 52rpx = 25.5 × 26，左边距 20rpx = 10px（不是百分比） */
.mechanism .mechanism-detail-right { width:round(down, calc(25.5 * var(--px)), 1px); height:round(down, calc(26 * var(--px)), 1px); flex-shrink: 0; margin-left:round(down, calc(10 * var(--px)), 1px); }
.mechanism .mechanism-detail-right img { width: 100%; height: 100%; }

/* ===== Head 标题(共用) ===== */
.head {
    display: flex; justify-content: space-between; align-items: center;
    padding:round(down, calc(20 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}
.head .head-left {
    display: flex; align-items: center;
    font-size:round(down, calc(14 * var(--px)), 1px); font-weight: 500; color: #1b1b1b;
}
.head .head-left > div:first-child {
    width:0.5333%; height:round(down, calc(13 * var(--px)), 1px);
    background: #333; border-radius:round(down, calc(10 * var(--px)), 1px); margin-right:round(down, calc(6 * var(--px)), 1px);
}
.head .head-right {
    display: flex; align-items: center;
    font-size:round(down, calc(10 * var(--px)), 1px); color: #A1A1A1;
}
.head .head-right img { width:1.3333%; height:round(down, calc(9 * var(--px)), 1px); margin-left:round(down, calc(6 * var(--px)), 1px); }

/* ===== 精选案例(共用结构,样式独立) ===== */
.case { background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px); padding:round(down, calc(8 * var(--px)), 1px); margin:0 round(down, calc(10 * var(--px)), 1px); }
.case .case-list { display: flex; flex-wrap: wrap; gap:round(down, calc(12 * var(--px)), 1px); justify-content: space-around; }
.case .case-item {
    width:calc(50% - 2.6667%); height:round(down, calc(210 * var(--px)), 1px);
    border-radius:round(down, calc(10 * var(--px)), 1px); overflow: hidden;
}
.case .cae-box { width: 100%; height: 100%; display: flex; flex-direction: column; }
.case .case-top { display: flex; flex: 1; }
.case .case-img {
    background-position: center; background-size: cover;
    width: 100%; height: 100%; background-color: #f5f5f5;
}
.case .case-bottom { background: #fff; padding:round(down, calc(5 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); }
.case .case-title {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    margin-bottom:round(down, calc(11 * var(--px)), 1px); line-height: 1.4;
}
.case .case-user { display: flex; align-items: center; }
.case .case-user img {
    width:5.3333%; height:round(down, calc(20 * var(--px)), 1px); border-radius: 50%;
    border: 1px solid #ccc; margin-right:round(down, calc(7 * var(--px)), 1px); object-fit: cover;
}
.case .case-user span { font-size:round(down, calc(12 * var(--px)), 1px); color: #afafaf; }

/* ===== 项目介绍富文本 (.text) ===== */
/* 富文本正文实测 13px */
.text {
    font-size:round(down, calc(13 * var(--px)), 1px); color: #333;
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    margin:0 round(down, calc(10 * var(--px)), 1px); padding:round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
    line-height: 1.6;
    word-break: break-word; overflow-wrap: break-word;
}

/* ===== 推荐项目瀑布(.list) ===== */
.list {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    padding:0 round(down, calc(11 * var(--px)), 1px) round(down, calc(15 * var(--px)), 1px);
}
/* 推荐项目双列瀑布流。数值照 pages/project/detail.vue 的 SCSS：
   卡片 calc(50% - 11rpx)、图 232rpx 高、标题 padding 18rpx 15rpx 0、
   价格 padding 10rpx 15rpx 0，卡片自身 padding-bottom 18rpx。 */
.list .list-odd-detail {
    background: #ffffff;
    border-radius:round(down, calc(7 * var(--px)), 1px);
    margin-bottom:round(down, calc(12 * var(--px)), 1px);
    padding:0 0 round(down, calc(9 * var(--px)), 1px);
    width: calc(50% - round(down, calc(5.5 * var(--px)), 1px));
    text-decoration: none;
    display: block;
}
.list .list-odd-img { width: 100%; height:round(down, calc(116 * var(--px)), 1px); }
.list .list-odd-img img { width: 100%; height: 100%; object-fit: cover; border-radius:round(down, calc(7 * var(--px)), 1px); }
.list .list-odd-title {
    width: 100%;
    padding:round(down, calc(9 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px) 0;
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333333;
    box-sizing: border-box;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}
.list .list-odd-price {
    padding:round(down, calc(5 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px) 0;
    font-size:round(down, calc(12 * var(--px)), 1px); color: #EF5189; font-weight: 700;
    box-sizing: border-box;
}
.list .list-odd-price-currency { font-size:round(down, calc(10 * var(--px)), 1px); }
/* ⚠ 实测 11px（SCSS 写的 20rpx=10，但 uView 会再叠一层） */
.list .list-odd-price-unit { font-size:round(down, calc(11 * var(--px)), 1px); color: #606060; font-weight: normal; }
.list .one-ellipsis {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== 底部按钮 .btns(与 doctor-detail 同结构) ===== */
.btns {
    position: fixed; bottom: 0;
    left: 50%; right: auto;
    transform: translateX(-50%);
    /* 跟随全站容器上限（--page-max，实测老站是 640）。
       ⚠ fixed 元素必须显式写 max-width —— 它不受父容器约束。 */
    max-width: var(--page-max); width: 100%; z-index: 55;
    background: #fff; box-sizing: border-box;
    padding:0 round(down, calc(10 * var(--px)), 1px);
    height:calc(calc(50 * var(--px)) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; align-items: center;
    border-top: 1px solid #f1f1f1;
}
.btns .btns-detail {
    width: 100%;
    /* ⚠ stretch 不是 center：老站 .btns-img 是撑满 50 高的（实测 50 vs 42） */
    display: flex; align-items: stretch; justify-content: space-between;
    gap:round(down, calc(10 * var(--px)), 1px);
}
.btns .btns-detail .btns-img {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-decoration: none; color: inherit;
}
/* ⚠ .btns-img / .h5-app-text / .orderpoint 的定义统一在 app.css
   （数值照 pages/doctor/detail.vue 的 SCSS 实测）。这里原来那几条是早期
   凭印象写的：图标宽用了百分比、气泡是纯色 #FE739D 而不是渐变、字号 9 而不是 10。
   删掉，避免覆盖正确的定义。 */
.btns .btns-detail .btns-right {
    /* 宽度/收缩统一在 app.css（flex: 0 1 190px） */
    height:round(down, calc(40 * var(--px)), 1px);
    background: #FF9AC3; border-radius:round(down, calc(20 * var(--px)), 1px);
    display: flex; align-items: center; justify-content: center;
    font-size:round(down, calc(15 * var(--px)), 1px); color: #fff; position: relative;
}
.btns .btns-detail .btns-consult { background: #4CD964; }


/* ── PORTING_STANDARD §二：mode="aspectFill" → object-fit: cover ── */
.swiper-body .swiper-img, .project .project-detail img,
.case .case-list .case-img, .feedback-images img,
.mechanism .mechanism-cover img, .doctor-card img { object-fit: cover; }

/* §二：轮播容器
   ⚠ 早先这里把高度写死成 375px「绕开 padding-bottom:100% 陷阱」——
     那是误判。老站 H5 分支就是 height:0 + padding-bottom:100%（永远 1:1）。
     写死 375 在手机上看不出差别，桌面 750 容器下轮播就不跟着变高了。 */
.swiper-body { height: 0; padding-bottom: 100%; }
.swiper-body .swiper {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.swiper-body .swiper::-webkit-scrollbar { display: none; }
.swiper-body .swiper-track { display: flex; flex-wrap: nowrap; height: 100%; }
.swiper-body .swiper-item { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.swiper-body .swiper-img { width: 100%; height: 100%; }

/* §一：区块标题不锁死宽度 */
.head .head-left, .head .head-right { width: auto; flex: none; white-space: nowrap; }

/* 富文本图片死宽度 */
.text img, .project-content img { max-width: 100% !important; height: auto !important; }