/**
 * 医院档案页样式（single.css）
 *
 * 规范来源：.ai/FRONTEND.md 第 1 / 3 / 4 节（设计 Token、模块顺序、通用样式）
 * 所有选择器统一 unithmemd- 前缀，避免污染 Flatsome 主题；完全重写，未复制任何参考站 CSS。
 */

/* -------------------------------------------------------------------------
 * 1. 设计 Token
 * ---------------------------------------------------------------------- */
:root {
    /* 主色系 — 森林绿 */
    --unithmemd-primary: #1a9d5e;
    --unithmemd-primary-hover: #157a4a;
    --unithmemd-primary-light: #e8f6ee;
    --unithmemd-primary-dark: #0f5c37;

    /* 中性色 */
    --unithmemd-dark: #333333;
    --unithmemd-medium: #636363;
    --unithmemd-light: #999999;
    --unithmemd-bg: #f4f4f4;
    --unithmemd-border: #e5e5e5;
    --unithmemd-white: #ffffff;

    /* 语义色 */
    --unithmemd-danger: #dc2626;

    /* 阴影 */
    --unithmemd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --unithmemd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --unithmemd-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.12);

    /* 圆角 */
    --unithmemd-radius-sm: 8px;
    --unithmemd-radius-md: 12px;
    --unithmemd-radius-lg: 24px;

    /* 字体 */
    --unithmemd-font: 'Manrope', 'Roboto', system-ui, -apple-system, sans-serif;

    /* 间距 */
    --unithmemd-space-1: 0.5rem;
    --unithmemd-space-2: 1rem;
    --unithmemd-space-3: 1.5rem;
    --unithmemd-space-4: 2rem;
    --unithmemd-space-5: 3rem;
}

/* -------------------------------------------------------------------------
 * 2. 页面容器
 * ---------------------------------------------------------------------- */
.unithmemd-single-hospital {
    width: 75vw;
    max-width: 1800px; /* 一般屏幕 75vw 完全生效，超宽屏最多 1800px */
    margin: 0 auto;
    padding: 0 40px var(--unithmemd-space-5);
    font-family: var(--unithmemd-font);
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    box-sizing: border-box;
}

.unithmemd-single-hospital *,
.unithmemd-single-hospital *::before,
.unithmemd-single-hospital *::after {
    box-sizing: border-box;
}

.unithmemd-single-hospital img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
 * 2.1 桌面两栏布局：主内容 75% + 右侧 sticky 卡片 25%
 *     （Hero 在 .unithmemd-layout 之外，横跨整个容器 100%）
 * ---------------------------------------------------------------------- */
.unithmemd-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.unithmemd-layout__main,
.unithmemd-layout__aside {
    min-width: 0;
}

/* sticky 关键：侧栏必须与主栏等高（align-self: stretch），
 * 否则侧栏高度 = 卡片高度，sticky 没有任何可移动空间，看起来"不吸附"。
 */
.unithmemd-layout__aside {
    align-self: stretch;
}

/* -------------------------------------------------------------------------
 * 2.2 下半部分：100% 全宽（无卡片），保留模块分隔线
 *
 * 包住"评论区之后"的模块（Doctors / Before-After / Payments / Licences / Videos）。
 * 宽度继承 .unithmemd-single-hospital（100%），模块之间的 1px 分隔线由
 * .unithmemd-section 的 border-top 提供 —— 与 .unithmemd-reviews 的 border-top
 * 之间隔着整个评论区的正文与内边距，不会出现"双线"。
 * ---------------------------------------------------------------------- */
.unithmemd-full-section {
    /* 无特殊样式，模块分隔线由 .unithmemd-section 的 border-top 提供 */
}

.unithmemd-float-card {
    position: sticky;
    top: 100px;
    max-width: 320px;
    margin-left: auto;
    padding: 24px;
    background: var(--unithmemd-white);
    border: 1px solid var(--unithmemd-border);
    border-radius: var(--unithmemd-radius-md);
    box-shadow: var(--unithmemd-shadow-md);
}

.unithmemd-float-card__title {
    margin: 0 0 var(--unithmemd-space-2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--unithmemd-primary-dark);
}

.unithmemd-float-card__btn {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-align: center;
}

.unithmemd-float-card__btn:last-child {
    margin-bottom: 0;
}

/* 手机端底部固定双按钮：默认隐藏（仅手机显示） */
.unithmemd-mobile-cta {
    display: none;
}

/* 横向 slider 通用：可横滚 / 拖动时的光标（滑动能力由 JS 打 class） */
.unithmemd-slider--active {
    cursor: grab;
}

.unithmemd-slider--dragging {
    cursor: grabbing;
    user-select: none;
}

/* 模块间距 + 模块之间分隔线 */
.unithmemd-hero,
.unithmemd-section {
    padding: var(--unithmemd-space-5) 0;
}

.unithmemd-section {
    border-top: 1px solid var(--unithmemd-border);
}

/* 模块标题（Phase 3.7：16px / 字重 400 / 纯黑；3.9：去掉标题下方分隔线）
 * 模块分隔线只保留 .unithmemd-section 的 border-top，避免"框线"过多。
 */
.unithmemd-section-title {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    margin: 0 0 var(--unithmemd-space-3) 0;
    padding-bottom: var(--unithmemd-space-2);
}

/* -------------------------------------------------------------------------
 * 3. 模块 1：Hero（主图 + 标题 + 标签 + 科室）
 * ---------------------------------------------------------------------- */
.unithmemd-hero__image img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: var(--unithmemd-radius-lg);
}

/* 模块 1 画廊：横跨容器 100%；左大图（跨 2×2）+ 右侧最多 4 张小图，不足则留白
 * 行高用 clamp 按视口宽度平滑缩放，让主图接近 4:3（上限仍是 234px）。
 */
.unithmemd-hero__gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 11vw, 234px);
    gap: 12px;
}

.unithmemd-hero__gallery-main,
.unithmemd-hero__gallery-thumb {
    margin: 0;
    overflow: hidden;
    border-radius: var(--unithmemd-radius-md);
}

.unithmemd-hero__gallery-main {
    grid-column: span 2;
    grid-row: span 2;
    border-radius: var(--unithmemd-radius-lg);
}

.unithmemd-hero__gallery-main img,
.unithmemd-hero__gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 相册：lightbox 链接填满格子（点任意图 → Flatsome lightbox） */
.unithmemd-hero__link {
    display: block;
    width: 100%;
    height: 100%;
}

/* "Show all photos" 按钮：绝对定位到画廊右下角 */
.unithmemd-hero__gallery-wrap {
    position: relative;
}

.unithmemd-show-all-photos {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    background: var(--unithmemd-white);
    border: 1px solid var(--unithmemd-border);
    border-radius: var(--unithmemd-radius-sm);
    box-shadow: var(--unithmemd-shadow-md);
    cursor: pointer;
}

.unithmemd-show-all-photos:hover {
    background: var(--unithmemd-primary-light);
}

.unithmemd-show-all-photos__icon {
    font-size: 16px;
    line-height: 1;
}

.unithmemd-hero__info {
    padding-top: var(--unithmemd-space-4);
}

.unithmemd-hero__title {
    margin: 0 0 var(--unithmemd-space-1);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: #000000;
}

.unithmemd-hero__subtitle {
    margin: 0 0 var(--unithmemd-space-1);
    font-size: 18px;
    font-weight: 400;
    color: #000000;
}

.unithmemd-hero__alt-name {
    margin: 0 0 var(--unithmemd-space-3);
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

.unithmemd-hero__tags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.unithmemd-hero__tags::-webkit-scrollbar {
    display: none;
}

.unithmemd-tag,
.unithmemd-badge-partner {
    flex: 0 0 auto;
    white-space: nowrap;
}

.unithmemd-hero__departments {
    margin-top: var(--unithmemd-space-2);
}

.unithmemd-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    background: var(--unithmemd-primary-light);
    color: var(--unithmemd-primary);
}

.unithmemd-badge-partner {
    display: inline-flex; /* 内含认证徽章图标 + 文案，纵向居中对齐 */
    align-items: center;
    gap: 6px;
    background: var(--unithmemd-primary);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
}

.unithmemd-dept-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    background: var(--unithmemd-primary-light);
    color: var(--unithmemd-primary);
    margin-right: 6px;
    margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
 * 模块 0：Official Partner（Hero 之后、About 之前；仅勾选官方合作时输出）
 * ---------------------------------------------------------------------- */
.unithmemd-partner__box {
    background: #f4f4f4;
    border-left: 4px solid var(--unithmemd-primary-dark);
    border-radius: 12px;
    padding: 24px 28px;
}

.unithmemd-partner__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
}

.unithmemd-partner__icon {
    font-size: 22px;
    line-height: 1;
}

.unithmemd-partner__text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: #333333;
}

/* -------------------------------------------------------------------------
 * 模块 2：About
 * ---------------------------------------------------------------------- */
.unithmemd-about__content {
    font-size: 14px;
    line-height: 1.75;
    color: #000000;
}

.unithmemd-about__content > *:first-child {
    margin-top: 0;
}

.unithmemd-about__content > *:last-child {
    margin-bottom: 0;
}

.unithmemd-about__content p {
    margin: 0 0 var(--unithmemd-space-2);
}

.unithmemd-about__content h2,
.unithmemd-about__content h3,
.unithmemd-about__content h4 {
    color: #000000;
}

.unithmemd-about__content ul,
.unithmemd-about__content ol {
    padding-left: 1.25rem;
    margin: 0 0 var(--unithmemd-space-2);
}

.unithmemd-about__content a {
    color: var(--unithmemd-primary);
}

.unithmemd-about__content img {
    border-radius: var(--unithmemd-radius-md);
}

/* About 折叠（是否启用由 about-collapse.js 按内容高度决定） */
.unithmemd-about__content--collapsed {
    max-height: 300px;
    overflow: hidden;
    position: relative;
}

.unithmemd-about__content--collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
}

.unithmemd-about__toggle {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    background: none;
    border: none;
    cursor: pointer;
}

.unithmemd-about__toggle:hover {
    color: var(--unithmemd-primary);
}

/* -------------------------------------------------------------------------
 * 模块 3：Doctors（横向 slider，无箭头；卡片高度随内容自适应，min-height 兜底）
 * ---------------------------------------------------------------------- */
.unithmemd-doctors__grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.unithmemd-doctors__grid::-webkit-scrollbar {
    display: none;
}

.unithmemd-doctor-card {
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    display: flex;
    flex-direction: column;
    min-height: 240px;
    height: auto;
    overflow: hidden;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--unithmemd-border);
    border-radius: var(--unithmemd-radius-md);
    padding: clamp(12px, 1.2vw, 20px);
    box-shadow: var(--unithmemd-shadow-sm);
}

.unithmemd-doctor-card__avatar {
    display: block; /* 去掉行内图片的基线留白，徽章 bottom: 0 才能正好贴住头像圆边 */
    width: clamp(56px, 7vw, 100px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

/* 头像容器 + 认证徽章（Twitter Verified Badge：public/assets/images/verified-badge.svg） */
.unithmemd-doctor-card__avatar-wrap {
    position: relative;
    display: inline-block;
    /* 卡片是 column flex：flex 子项默认被拉伸成整卡宽度（inline-block 会被块级化），
     * 徽章就会跑到卡片右边缘而不是头像右下角 —— 加 align-self 让它缩到头像尺寸。
     */
    align-self: flex-start;
    margin-bottom: 12px;
}

.unithmemd-doctor-card__avatar-wrap .unithmemd-doctor-card__avatar {
    margin-bottom: 0;
}

.unithmemd-doctor-card__verified {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.unithmemd-doctor-card__verified img {
    display: block;
    width: 18px;
    height: 18px;
}

/* 通用认证徽章（Twitter Verified Badge）：尺寸由各场景规则或 <img> 的 width/height 属性决定 */
.unithmemd-verified-badge {
    display: inline-block;
    vertical-align: middle;
}

.unithmemd-doctor-card__name {
    margin: 0 0 var(--unithmemd-space-1);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #000000;
}

.unithmemd-doctor-card__languages {
    margin: 0 0 var(--unithmemd-space-1);
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

.unithmemd-doctor-card__position {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #000000;
    overflow: hidden;
}

.unithmemd-doctor-card__position p {
    margin: 0 0 var(--unithmemd-space-1);
}

.unithmemd-doctor-card__position > *:last-child {
    margin-bottom: 0;
}

.unithmemd-doctor-card__cases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: var(--unithmemd-space-1);
    max-height: 88px;
    overflow: hidden;
}

.unithmemd-doctor-card__case {
    width: clamp(48px, 4.4vw, 80px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--unithmemd-radius-sm);
}

/* -------------------------------------------------------------------------
 * 模块 4：Treatments（三级价格表：科室 → 医疗类别 → 项目）
 * ---------------------------------------------------------------------- */
.unithmemd-treatment-dept {
    margin-bottom: var(--unithmemd-space-4);
}

.unithmemd-treatment-dept:last-child {
    margin-bottom: 0;
}

/* 一级：科室（父级分类） */
.unithmemd-treatment-dept__title {
    margin: 0 0 var(--unithmemd-space-2);
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

/* 二级：医疗类别（子级分类，<details>/<summary> 可折叠） */
.unithmemd-treatment-cat {
    margin-bottom: var(--unithmemd-space-3);
}

.unithmemd-treatment-cat:last-child {
    margin-bottom: 0;
}

/* =====================================================================
 * 折叠标题：自定义三角 + 底部分隔线
 * ================================================================== */

/* 隐藏浏览器默认的折叠标记（Chrome / Firefox / Safari） */
.unithmemd-treatment-cat__title::-webkit-details-marker {
    display: none;
}

.unithmemd-treatment-cat__title::marker {
    display: none;
}

.unithmemd-treatment-cat__title {
    list-style: none;
}

/* 标题整体：底部加一条分隔线（始终显示） */
.unithmemd-treatment-cat__title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid #e5e5e5; /* 分隔线 */
    cursor: pointer;
    user-select: none;
}

/* 每个科室的最后一个类别：去掉底部分隔线（末尾不再多一条横线）
   :last-child 覆盖常态（<details> 作为科室容器最后一个子元素）；
   :last-of-type 覆盖混合结构（同一容器里既有 <details> 又有无类别层的 --flat div 时） */
.unithmemd-treatment-cat:last-child > .unithmemd-treatment-cat__title,
.unithmemd-treatment-cat:last-of-type > .unithmemd-treatment-cat__title {
    border-bottom: none;
}

/* 自定义三角：用 CSS border 画，不依赖 emoji / SVG */
.unithmemd-treatment-cat__icon {
    display: inline-block;
    width: 0;
    height: 0;
    flex-shrink: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--unithmemd-dark);
    transition: transform 0.2s ease;
    transform: rotate(0deg); /* 收起时 ▶ */
}

/* 展开时旋转成 ▼ */
details[open] > .unithmemd-treatment-cat__title .unithmemd-treatment-cat__icon {
    transform: rotate(90deg);
}

/* 类别名（保持原有视觉） */
.unithmemd-treatment-cat__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--unithmemd-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* 数量 */
.unithmemd-treatment-cat__count {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    text-transform: none;
    letter-spacing: 0;
}

.unithmemd-price-table {
    table-layout: fixed; /* PC 端固定列宽：表头与内容严格对齐 */
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--unithmemd-space-3);
}

/* PC 端列宽：项目名 60% / 价格 20% / 时长 20%（三列统一左对齐，表头与单元格一致） */
.unithmemd-price-table th:nth-child(1),
.unithmemd-price-table td:nth-child(1) {
    width: 60%;
    text-align: left;
}

.unithmemd-price-table th:nth-child(2),
.unithmemd-price-table td:nth-child(2) {
    width: 20%;
    text-align: left;
}

.unithmemd-price-table th:nth-child(3),
.unithmemd-price-table td:nth-child(3) {
    width: 20%;
    text-align: left;
}

.unithmemd-price-table:last-child {
    margin-bottom: 0;
}

.unithmemd-price-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 1px solid var(--unithmemd-border);
    font-weight: 700;
    font-size: 12px;
    color: var(--unithmemd-dark);
    text-transform: uppercase;
}

.unithmemd-price-table td {
    padding: 15px;
    border-bottom: 1px solid var(--unithmemd-border);
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    vertical-align: middle;
}

.unithmemd-price-table tbody tr:hover {
    background: var(--unithmemd-primary-light);
}


/* -------------------------------------------------------------------------
 * 面包屑导航（第 9 轮：首页 ▶ 国家 ▶ 省份 ▶ 城市 ▶ 医院；全灰配色 + 内联 SVG 图标）
 * 放在主样式（single.css）里：档案页与聚合页都会加载本文件（archive.css 依赖它）
 * ---------------------------------------------------------------------- */
.unithmemd-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 8px 0; /* 档案页：距顶部导航 12px，距下方图库 8px */
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
}

.unithmemd-breadcrumbs a {
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.unithmemd-breadcrumbs a:hover {
    color: #222222;
}

.unithmemd-breadcrumbs .unithmemd-breadcrumbs__sep {
    display: inline-flex;
    align-items: center;
    color: #aaaaaa;
    font-size: 12px;
    margin: 0 4px;
}

.unithmemd-breadcrumbs .unithmemd-breadcrumbs__current {
    color: #555555;
    font-weight: 400;
}

/* 图标（房子 / 箭头都是内联 SVG）：颜色由 SVG 自身的 stroke="currentColor" 跟随文字色（#555，hover #222）
   注意：这里不写 fill —— 写了会覆盖 SVG 的 fill="none"，把描边图形变成实心块 */
.unithmemd-breadcrumbs .unithmemd-breadcrumbs__home-icon {
    display: inline-flex;
    align-items: center;
    height: 17px;
}

.unithmemd-breadcrumbs .unithmemd-breadcrumbs__home-icon svg {
    height: 17px;
    width: auto;
}

.unithmemd-breadcrumbs .unithmemd-breadcrumbs__sep svg {
    height: 15px;
    width: auto;
    transform: rotate(-90deg);
}

/* 面包屑紧贴图库：紧跟面包屑之后的 Hero 去掉自身 3rem 上内边距（否则面包屑与图库之间会空一大片） */
.unithmemd-breadcrumbs + .unithmemd-hero {
    padding-top: 0;
}
.unithmemd-price {
    color: var(--unithmemd-primary);
    font-weight: 700;
}

/* -------------------------------------------------------------------------
 * 模块 5：Before and After（横向滚动）
 * ---------------------------------------------------------------------- */
.unithmemd-before-after__scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: var(--unithmemd-space-1);
    -webkit-overflow-scrolling: touch;
}

.unithmemd-before-after__item {
    flex: 0 0 224px;
    width: 224px;
    height: 200px;
    object-fit: cover;
    border-radius: var(--unithmemd-radius-md);
}

/* -------------------------------------------------------------------------
 * 模块 6：Licences（横向 slider；桌面每项固定 100×100，边框为透明 1px 占位（视觉无边框），圆角 20px）
 * 正方形由外层 .unithmemd-licence-item 容器保证，<img> 绝对定位填满容器。
 * ---------------------------------------------------------------------- */
.unithmemd-licences__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.unithmemd-licences__grid::-webkit-scrollbar {
    display: none;
}

.unithmemd-licence-item {
    position: relative;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--unithmemd-white);
    border: 1px solid transparent; /* 占位保留：视觉上无边框，但尺寸与黑色边框时完全一致 */
    border-radius: 20px;
    box-sizing: border-box;
}

.unithmemd-licence-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 模块 7：Videos（封面图卡片 + 横向 slider：桌面 5 个 / 手机 1.3 个）
 * 点击卡片在新标签页打开原视频（不内嵌 iframe，避免首屏加载播放器）
 * ---------------------------------------------------------------------- */
.unithmemd-videos__list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.unithmemd-videos__list::-webkit-scrollbar {
    display: none;
}

.unithmemd-video {
    position: relative;
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
    scroll-snap-align: start;
    background: #f0f0f0; /* 封面加载失败 / 无封面（B 站）时露出的浅灰底 */
    border-radius: var(--unithmemd-radius-md);
    cursor: pointer;
    text-decoration: none; /* 卡片是 <a>：防止主题给链接加下划线（会出现在 ▶ 下方） */
}

.unithmemd-video__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #f0f0f0; /* 加载失败时显示浅灰（不是黑） */
}

.unithmemd-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding-left: 4px; /* 视觉居中三角 */
    font-size: 24px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    pointer-events: none;
    transition: background 0.2s;
}

.unithmemd-video:hover .unithmemd-video__play {
    background: rgba(0, 0, 0, 0.7);
}

/* -------------------------------------------------------------------------
 * 模块 8：Accepted Payment Methods（图标版）
 * ---------------------------------------------------------------------- */
.unithmemd-payments__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.unithmemd-payment-item {
    display: block;
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* -------------------------------------------------------------------------
 * 4. 通用按钮（FRONTEND.md 第 4 节，供后续模块复用）
 * ---------------------------------------------------------------------- */
.unithmemd-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: var(--unithmemd-radius-sm);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.unithmemd-btn--primary {
    background: var(--unithmemd-primary);
    color: #fff;
}

.unithmemd-btn--primary:hover {
    background: var(--unithmemd-primary-hover);
}

.unithmemd-btn--outline {
    background: transparent;
    color: var(--unithmemd-dark);
    border: 1px solid var(--unithmemd-dark);
}

/* -------------------------------------------------------------------------
 * 相册 lightbox（DOM 由 gallery.js 动态创建，这里只管样式）
 * ---------------------------------------------------------------------- */
.unithmemd-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.unithmemd-lightbox.is-open {
    display: flex;
}

.unithmemd-lightbox__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
}

.unithmemd-lightbox__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--unithmemd-radius-sm);
}

.unithmemd-lightbox__image[hidden] {
    display: none;
}

/* 视频模式：16:9 播放器（iframe.src 由 gallery.js 在打开 / 关闭时设置 / 清空） */
.unithmemd-lightbox__video {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--unithmemd-radius-md);
    overflow: hidden;
}

.unithmemd-lightbox__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.unithmemd-lightbox__video[hidden] {
    display: none;
}

/* 视频模式：白磨砂背景换成深色（否则黑底播放器边缘很突兀） */
.unithmemd-lightbox.is-video {
    background: rgba(0, 0, 0, 0.9);
}

.unithmemd-lightbox__close,
.unithmemd-lightbox__nav {
    position: absolute;
    padding: 0;
    color: #333333;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.unithmemd-lightbox__close:hover,
.unithmemd-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #000000;
}

.unithmemd-lightbox__close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 24px;
    line-height: 1;
}

.unithmemd-lightbox__nav {
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    font-size: 26px;
    line-height: 1;
}

.unithmemd-lightbox__nav--prev {
    left: 20px;
}

.unithmemd-lightbox__nav--next {
    right: 20px;
}

.unithmemd-lightbox__nav[hidden],
.unithmemd-lightbox__counter[hidden] {
    display: none;
}

.unithmemd-lightbox__counter {
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -40px;
    width: 80px;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #333333;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * 5. 响应式：平板 768px ~ 1100px
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .unithmemd-single-hospital {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 平板起改单栏：右侧卡片不再吸附，作为正文末尾的普通卡片 */
    .unithmemd-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .unithmemd-float-card {
        position: static;
        max-width: none;
        margin: 0 0 var(--unithmemd-space-4);
    }

    .unithmemd-hero__image img {
        height: 380px;
    }

    .unithmemd-hero__gallery {
        grid-auto-rows: clamp(110px, 12vw, 184px);
    }

    /* 平板：医生卡片每屏 2 张 */
    .unithmemd-doctor-card {
        flex: 0 0 calc((100% - 1 * 24px) / 2);
    }

    /* 平板：Licences 沿用桌面 100×100 固定尺寸（横向 slider 自动滚动） */
}

/* -------------------------------------------------------------------------
 * Get Quote 触发器（Quote 1.1）：位置在 Treatments 表格之前，全宽描边按钮
 * ---------------------------------------------------------------------- */
.unithmemd-quote-trigger-wrap {
    margin: var(--unithmemd-space-4) 0;
}

.unithmemd-quote-trigger {
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: var(--unithmemd-radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.unithmemd-quote-trigger:hover {
    background: #f4f4f4;
}

/* -------------------------------------------------------------------------
 * 报价弹窗（Get a Quote）：结构 / 尺寸与评论弹窗保持一致，复用同一套设计 token
 * 交互见 public/assets/js/quote.js
 * ---------------------------------------------------------------------- */
.unithmemd-quote-modal[hidden] {
    display: none;
}

.unithmemd-quote-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.unithmemd-quote-modal__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.unithmemd-quote-modal__content {
    position: relative;
    width: 80vw;
    min-width: 320px;
    max-width: 1400px;
    height: auto;
    max-height: 90vh;
    margin: auto;
    padding: 40px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: var(--unithmemd-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.unithmemd-quote-modal__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
}

.unithmemd-quote-modal__desc {
    margin: 0 0 var(--unithmemd-space-3);
    font-size: 14px;
    color: var(--unithmemd-medium);
}

.unithmemd-quote-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #000000;
    background: transparent;
    border: none;
    cursor: pointer;
}

.unithmemd-quote-modal__close:hover {
    color: var(--unithmemd-primary);
}

/* 项目列表：手机端整块可横向滚动 */
.unithmemd-quote-form__treatments {
    overflow-x: auto;
}

.unithmemd-quote-form__dept {
    margin: var(--unithmemd-space-3) 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}

.unithmemd-quote-form__dept:first-child {
    margin-top: 0;
}

.unithmemd-quote-form__table {
    width: 100%;
    border-collapse: collapse;
}

.unithmemd-quote-form__table th,
.unithmemd-quote-form__table td {
    padding: 10px 8px;
    font-size: 14px;
    text-align: left;
    color: #000000;
    border-bottom: 1px solid var(--unithmemd-border);
}

.unithmemd-quote-form__table th {
    font-size: 12px;
    font-weight: 500;
    color: var(--unithmemd-medium);
    white-space: nowrap;
}

.unithmemd-quote-form__table th:first-child,
.unithmemd-quote-form__table td:first-child {
    width: 32px;
}

.unithmemd-quote-form__qty {
    width: 72px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 14px;
    color: #000000;
    background: #ffffff;
    border: 1px solid var(--unithmemd-border);
    border-radius: var(--unithmemd-radius-sm);
    box-sizing: border-box;
}

.unithmemd-quote-form__qty:disabled {
    color: var(--unithmemd-light);
    background: #f7f7f7;
    cursor: not-allowed;
}

/* 增值服务（Quote 1.1）：无价格、需定制报价 */
.unithmemd-quote-form__services {
    margin-top: var(--unithmemd-space-4);
    padding-top: var(--unithmemd-space-4);
    border-top: 1px solid var(--unithmemd-border);
}

.unithmemd-quote-form__services-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
}

.unithmemd-quote-form__services-desc {
    margin: 0 0 var(--unithmemd-space-3);
    font-size: 14px;
    color: var(--unithmemd-medium);
}

.unithmemd-quote-form__services-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.unithmemd-quote-form__service {
    border-bottom: 1px solid var(--unithmemd-border);
}

.unithmemd-quote-form__service:last-child {
    border-bottom: none;
}

.unithmemd-quote-form__service-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
}

.unithmemd-quote-form__service-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.unithmemd-quote-form__service-name {
    flex: 1 1 auto;
    font-size: 15px;
    color: #000000;
}

.unithmemd-quote-form__service-badge {
    flex: 0 0 auto;
    font-size: 13px;
    font-style: italic;
    color: var(--unithmemd-medium);
}

/* 底部摘要：sticky 固定在弹窗底部（总价 + 邮箱 + 提交常驻可见） */
.unithmemd-quote-form__summary {
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* 全出血：让底色盖住内容区底部内边距，滚动内容不会从缝隙露出 */
    margin: var(--unithmemd-space-3) -40px -40px;
    padding: 16px 40px;
    background: #ffffff;
    border-top: 1px solid var(--unithmemd-border);
}

.unithmemd-quote-form__total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #000000;
}

.unithmemd-quote-form__total-value {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

.unithmemd-quote-form__email {
    margin-bottom: 12px;
}

.unithmemd-quote-form__email label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.unithmemd-quote-form__input {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: #000000;
    background: #ffffff;
    border: 1px solid var(--unithmemd-border);
    border-radius: var(--unithmemd-radius-sm);
    box-sizing: border-box;
}

.unithmemd-quote-form__input:focus {
    border-color: #000000;
    outline: none;
}

.unithmemd-quote-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.unithmemd-quote-form__message {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--unithmemd-medium);
}

.unithmemd-quote-form__message[hidden] {
    display: none;
}

.unithmemd-quote-form__message.is-error {
    color: var(--unithmemd-danger);
}

.unithmemd-quote-form__message.is-success {
    color: var(--unithmemd-primary);
}

/* -------------------------------------------------------------------------
 * 6. 响应式：手机 max-width: 767px（字号减 2-4px、间距减半、多列变单列）
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
    .unithmemd-single-hospital {
        width: 100%;
        padding: 0 16px 96px; /* 底部留出固定按钮高度 */
        font-size: 15px;
    }

    .unithmemd-hero,
    .unithmemd-section {
        padding: var(--unithmemd-space-3) 0;
    }

    .unithmemd-hero__image img {
        height: 300px;
        border-radius: var(--unithmemd-radius-md);
    }

    /* 手机端 Hero：横向 slider（每屏 1 张 + 露出下一张 30%），所有图 4:3 同尺寸 */
    .unithmemd-hero__gallery {
        display: flex;
        grid-template-columns: none;
        grid-auto-rows: auto;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .unithmemd-hero__gallery::-webkit-scrollbar {
        display: none;
    }

    /* 手机端 Hero：每屏 1 张整图（100%），4:3、无圆角 */
    .unithmemd-hero__gallery-main,
    .unithmemd-hero__gallery-thumb {
        flex: 0 0 100%;
        width: 100%;
        aspect-ratio: 4 / 3;
        scroll-snap-align: start;
        border-radius: 0;
    }

    .unithmemd-hero__gallery-main img,
    .unithmemd-hero__gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 手机端：按钮缩小一点，避免遮住图片主体 */
    .unithmemd-show-all-photos {
        right: 12px;
        bottom: 12px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .unithmemd-hero__info {
        padding-top: var(--unithmemd-space-3);
    }

    .unithmemd-hero__title {
        font-size: 28px;
    }

    .unithmemd-hero__subtitle {
        font-size: 16px;
    }

    .unithmemd-hero__alt-name {
        font-size: 14px;
    }

    .unithmemd-section-title {
        font-size: 18px;
        margin-bottom: var(--unithmemd-space-2);
        padding-bottom: var(--unithmemd-space-1);
    }

    /* 手机端：医生卡片每屏 1 张 + 露出下一张 30% */
    .unithmemd-doctors__grid {
        gap: 16px;
    }

    .unithmemd-doctor-card {
        flex: 0 0 70%;
        scroll-snap-align: start;
        padding: 16px;
    }

    .unithmemd-treatment-dept__title {
        font-size: 18px;
    }

    .unithmemd-treatment-cat__title {
        padding: 10px 0;
    }

    .unithmemd-treatment-cat__icon {
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 6px;
    }

    .unithmemd-treatment-cat__name {
        font-size: 14px;
    }

    .unithmemd-treatment-cat__count {
        font-size: 12px;
    }

    .unithmemd-price-table th,
    .unithmemd-price-table td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .unithmemd-price-table th {
        font-size: 11px;
    }

    /* 手机端重新分配列宽：项目名 45% / 价格 30% / 时长 25%
       （PC 端的 60% / 20% / 20% 写在媒体查询之外，不受影响；手机端 20% 太窄会把价格与时长挤在一起） */
    .unithmemd-price-table th:nth-child(1),
    .unithmemd-price-table td:nth-child(1) {
        width: 45%;
    }

    .unithmemd-price-table th:nth-child(2),
    .unithmemd-price-table td:nth-child(2) {
        width: 30%;
    }

    .unithmemd-price-table th:nth-child(3),
    .unithmemd-price-table td:nth-child(3) {
        width: 25%;
    }

    .unithmemd-before-after__item {
        flex: 0 0 168px;
        width: 168px;
        height: 150px;
    }

    /* 手机端 Licences：正方形，一排 6 个（aspect-ratio 加在容器上，不受图片比例影响） */
    .unithmemd-licences__grid {
        gap: 8px;
    }

    .unithmemd-licence-item {
        flex: 0 0 calc((100% - 5 * 8px) / 6);
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }

    .unithmemd-licence-item img {
        padding: 4px;
    }

    /* 手机端 Videos：每屏 1.3 个（露出下一张 30%） */
    .unithmemd-videos__list {
        gap: 12px;
    }

    .unithmemd-video {
        flex: 0 0 70%;
    }

    .unithmemd-payment-item {
        height: 24px;
    }

    /* 手机端：隐藏右侧卡片，改用底部固定双按钮 */
    .unithmemd-layout__aside {
        display: none;
    }

    .unithmemd-mobile-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid var(--unithmemd-border);
        backdrop-filter: blur(6px);
    }

    .unithmemd-mobile-cta__btn {
        padding: 12px 8px;
        font-size: 15px;
        text-align: center;
    }

    /* 手机端 lightbox：图片占满，切换按钮移到图片下方两侧 */
    .unithmemd-lightbox {
        padding: 12px;
    }

    .unithmemd-lightbox__figure,
    .unithmemd-lightbox__image {
        max-width: 100%;
        max-height: 76vh;
    }

    /* 手机端视频：占满宽度，保持 16:9 */
    .unithmemd-lightbox__video {
        width: 100%;
        max-width: 100%;
        border-radius: var(--unithmemd-radius-sm);
    }

    .unithmemd-lightbox__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .unithmemd-lightbox__nav {
        top: auto;
        bottom: 18px;
        margin-top: 0;
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .unithmemd-lightbox__nav--prev {
        left: 18px;
    }

    .unithmemd-lightbox__nav--next {
        right: 18px;
    }

    .unithmemd-lightbox__counter {
        bottom: 70px;
    }

    /* 手机端报价弹窗：单列 90vw + 更小内距 */
    .unithmemd-quote-modal {
        padding: 16px 12px;
    }

    .unithmemd-quote-modal__content {
        width: 90vw;
        min-width: 0;
        max-width: 90vw;
        max-height: 90vh;
        padding: 24px 16px;
        border-radius: 12px;
    }

    .unithmemd-quote-modal__title {
        font-size: 20px;
    }

    .unithmemd-quote-form__summary {
        margin: 16px -16px -24px;
        padding: 12px 16px;
    }

    .unithmemd-quote-form__table th,
    .unithmemd-quote-form__table td {
        padding: 8px 6px;
        font-size: 13px;
    }

    .unithmemd-quote-form__input {
        max-width: none;
    }
}