/* =============================================================================
   首页头图轮播 · 叠加式布局（参考佳士得新式头图）
   -----------------------------------------------------------------------------
   原样式：chr-hero-banner__row 是 bootstrap 栅格（col-md-4 文字 + col-md-8 图），
          呈现为左右分栏。
   本文件覆盖为：图片铺满整个 slide，文字以 absolute 叠加在左上角，
          底部加一层暗色渐变（scrim）保证白色文字可读。

   作用范围仅限 .chr-hero-banner--overlay（新加的 class），
   不影响站内其它 hero banner。
   ========================================================================== */

/* ---------- 1. slide 本身撑满 ---------- */
.chr-header-carousel .chr-header-carousel-slide,
.chr-header-carousel > .chr-header-carousel-slide,
.chr-header-carousel .glide__slide > chr-header-carousel-slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}

/*
 * 高度：原设计是 .chr-header-carousel-slide{height:100%} 依赖父级，
 * 而父级没有固定高度 -> 高度塌成内容高度（实测只有 231px）。
 * 这里给轮播容器一个明确的视口高度（16:9 宽幅，限制在 460~620px 之间），
 * slide 与内部元素全部按它铺满。
 */
.chr-header-carousel {
  height: clamp(460px, 42vw, 620px);
  min-height: 460px;
}

/* ---------- 2. hero banner 铺满 ---------- */
/*
 * 高度链：.chr-header-carousel (固定高) -> .glide -> .glide__track ->
 *         .glide__slides -> .glide__slide -> chr-header-carousel-slide ->
 *         .chr-header-carousel-slide -> .chr-hero-banner
 * Glide 自身给 .glide__slides/.glide__track 设了 position:absolute 布局，
 * 必须逐级显式给 height:100% 才能把高度传下去（实测少了这一步 slide 只有 418px）。
 */
/*
 * 宽度与位移：
 * 自写的 carousel-runtime.js 用「各 slide 的 offsetLeft 差值」来算横向位移
 * （st.pos[i] = slides[i].offsetLeft - slides[0].offsetLeft）。
 * 如果用 flex:0 0 100% 让三个 slide 叠在同一位置，offsetLeft 差值会全为 0，
 * 切换就失效（实测切到第 2、3 张是空白）。
 *
 * 正确做法：保持 Glide 原生的「每个 slide 独占一份宽度、横向排开」，
 * 用 --hero-w 统一宽度，位移交给 transform。
 */
.chr-header-carousel {
  --hero-h: clamp(460px, 42vw, 620px);
  /* slide 宽度 = 轮播可视区宽度（不含滚动条），用 100vw 不准（会有滚动条宽度差），
     所以用 calc(100vw - 侧边留白)；窄屏时视口本身就是全宽。 */
  --hero-w: 100%;
  position: relative;
  height: var(--hero-h);
  min-height: 460px;
}

.chr-header-carousel .glide,
.chr-header-carousel .glide__track,
.chr-header-carousel .glide__slides {
  height: var(--hero-h) !important;
}

/* track 负责裁剪（slides 不能裁，否则 transform 移出的内容看不见） */
.chr-header-carousel .glide__track {
  position: relative;
  overflow: hidden;
}

.chr-header-carousel .glide__slides {
  align-items: stretch !important;
  align-content: stretch !important;
  /*
   * 关键（踩了两轮才定位到）：
   * .glide__slides 既有 inline transform: translate3d(-Npx)，又有 overflow:hidden，
   * 两者组合会让「被移出原始盒子的内容」被裁掉 —— 表现为第一张正常、
   * 切换后整块空白（DOM 里图片存在、naturalWidth 正常、位置也正确，就是不绘制）。
   *
   * 裁剪应该由外层 .glide__track（overflow:hidden）负责，
   * slides 自身不能裁 —— 否则 transform 移出去的内容永远看不见。
   */
  overflow: visible !important;
}

/*
 * 宽度（关键）：
 * Glide 的位移机制是：.glide__slides 的 width = slide 宽度 × 总数，
 * 再用 inline transform: translate3d(-Npx) 左右滑动。
 * 快照里这些 width 是按原站某个视口写死的（内联 style），换视口就对不上，
 * 表现为「第一张正常，切换后空白」。
 *
 * 解法：宽度由 scripts/christies/carousel-runtime.js 在运行时按当前可视宽度
 * 精确设置（像素值），这里不用百分比去猜，避免循环依赖。
 * CSS 只保证不被 !important 覆盖掉 JS 写的 inline style。
 */
.chr-header-carousel .glide__slides > chr-header-carousel-slide {
  height: 100% !important;
}

.chr-header-carousel .chr-header-carousel-slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.chr-header-carousel .glide__slides {
  /* Glide 用 transform 横向移动，容器本身要允许溢出被裁切 */
  overflow: hidden;
}

/*
 * 宽度：Glide 在内联 style 里写死了每个 slide 的 width（如 1905px）与
 * .glide__slides 的总 width（5745px），那是按某个视口算的。
 * 视口一变，slide 宽度就和容器对不上 —— 表现为图片被拉伸、右侧露黑边。
 *
 * 注意：实际的 slide 元素是 <chr-header-carousel-slide>，**没有 glide__slide 类**
 * （那是 Glide 的标准结构，这里被组件换成了自定义元素），
 * 所以选择器要直接命中 chr-header-carousel-slide。
 */
.chr-header-carousel .glide__slides > chr-header-carousel-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
}

.chr-header-carousel .glide__slides {
  width: 100% !important;
  gap: 0 !important;
}

.chr-hero-banner--overlay {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: stretch;
  background: #000;
}

.chr-hero-banner--overlay .container-fluid {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* 原 .chr-hero-banner__row 是 row 栅格，这里不需要栅格 */
.chr-hero-banner--overlay .chr-hero-banner__row {
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ---------- 3. 图片层：绝对定位铺满 ---------- */
/*
 * 注意层叠上下文（这个坑排查了两轮）：
 * .glide__slides 上有 inline transform: translate3d(...)，transform 会创建
 * **层叠上下文**，于是 .glide__track（position:relative 的祖先）会与
 * slides 内的内容分层比较，track 反而盖在图片之上。
 * 实测 elementFromPoint(图片中心) 命中的是 DIV.glide__track 而不是 <img>，
 * 表现为「第一张正常，切换后是空白」。
 *
 * 正确解法：把 .glide__track 与 .glide__slides 的 z-index 显式设为 0
 * （两者同为 0 时按 DOM 顺序绘制，slides 在 track 之后 -> 盖住 track），
 * slide 内部再用自己的 z-index 分层。
 */
.chr-header-carousel .glide,
.chr-header-carousel .glide__track,
.chr-header-carousel .glide__slides {
  z-index: 0 !important;
}

.chr-header-carousel .glide__slides > chr-header-carousel-slide,
.chr-header-carousel .chr-header-carousel-slide,
.chr-header-carousel .chr-hero-banner--overlay {
  position: relative;
  z-index: 1;
}

.chr-hero-banner--overlay .chr-hero-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.chr-hero-banner--overlay .chr-hero-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.chr-hero-banner--overlay .chr-hero-banner__image .chr-img__wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.chr-hero-banner--overlay .chr-hero-banner__image img,
.chr-hero-banner--overlay .chr-hero-banner__image .chr-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* 原站的懒加载样式会让非视口内的图片保持透明，这里直接覆盖 */
.chr-hero-banner--overlay .chr-hero-banner__image .chr-img.lazyload,
.chr-hero-banner--overlay .chr-hero-banner__image .chr-img.lazyloaded {
  opacity: 1 !important;
}

/* ---------- 4. 底部暗色渐变，保证白字可读 ---------- */
.chr-hero-banner--overlay .chr-hero-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.62) 26%,
      rgba(0, 0, 0, 0.28) 46%,
      rgba(0, 0, 0, 0.05) 62%,
      rgba(0, 0, 0, 0) 78%
    ),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.12) 30%,
      rgba(0, 0, 0, 0) 55%
    );
}

/* ---------- 5. 文字叠加层 ---------- */
.chr-hero-banner--overlay .chr-hero-banner__overlay-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-inner {
  width: 100%;
  max-width: 620px;
  padding: 64px 40px 64px 100px;
  color: #fff;
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-label {
  display: inline-block;
  color: #d9b166;                 /* 品牌金色，呼应 CANOS */
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-title {
  color: #fff !important;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.25;
  margin-top: 14px !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-sub {
  display: block;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.6;
  margin-top: 14px !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-details {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-details .chr-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-button {
  margin-top: 24px;
}

.chr-hero-banner--overlay .chr-hero-banner__overlay-button .chr-button {
  width: auto !important;
  min-width: 132px;
}

/* 地点图标描边改白 */
.chr-hero-banner--overlay .chr-icon__stroke--light {
  stroke: #fff;
}

/* ---------- 6. 左右切换箭头：深色背景上要看得清 + 常驻显示 ---------- */
/*
 * 原站箭头是深色图标（内联 stroke/fill="#222"），因为原站头图是浅色底。
 * 本站头图是深色大图，已在 patch_hero_arrows.py 里把
 *   - class: glide__arrows--light -> glide__arrows--dark（color:#fff）
 *   - 去掉 SVG 内联的 stroke="#222" / fill="#222"（内联属性优先级高于 CSS 类，
 *     不去掉的话只改 class 依然会是深色）
 *
 * 另外原站 .glide__arrows--middle 默认 visibility:hidden，
 * 只有鼠标悬停/聚焦在轮播上才显示 —— 头图这种主视觉轮播应该常驻可见，
 * 否则用户不知道可以点。 这里强制 visibility:visible。
 */
.chr-header-carousel .glide__arrows--middle {
  visibility: visible !important;
  z-index: 5;
}

/* 箭头垂直居中于头图（原样式是 height:100% 的透明热区，图标贴在顶部） */
.chr-header-carousel .glide__arrow {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 40px;
}

.chr-header-carousel .glide__arrow--right {
  right: 0;
  left: auto;
  justify-content: flex-end;
}

.chr-header-carousel .glide__arrow--left {
  left: 0;
  right: auto;
  justify-content: flex-start;
}

.chr-header-carousel .glide__arrow > .chr-button {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.chr-header-carousel .glide__arrow > .chr-button:hover {
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  text-decoration: none;
  transform: scale(1.06);
}

.chr-header-carousel .glide__arrow > .chr-button:active {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

/* 图标描边/填充跟随 currentColor（= #fff） */
.chr-header-carousel .glide__arrow .chr-icon__stroke--dark {
  stroke: currentColor;
}

.chr-header-carousel .glide__arrow .chr-icon__fill--dark {
  fill: currentColor;
}

/* 焦点态用白色描边（深色背景下 #222 看不见） */
.chr-header-carousel .glide__arrows--dark > .chr-button:focus-within {
  outline: 1px solid #fff;
}

/* 禁用态（第一张时左箭头）：仍要看得见，只是弱一些 */
.chr-header-carousel .glide__arrow--disabled > .chr-button {
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 1023px) {
  .chr-header-carousel,
  .chr-hero-banner--overlay {
    min-height: 460px;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-inner {
    max-width: 100%;
    padding: 40px 24px 48px 64px;
  }

  /* 竖屏时渐变改为上下方向，避免遮住主体 */
  .chr-hero-banner--overlay .chr-hero-banner__scrim {
    background:
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.86) 0%,
        rgba(0, 0, 0, 0.62) 34%,
        rgba(0, 0, 0, 0.18) 58%,
        rgba(0, 0, 0, 0) 78%
      );
  }
}

@media (max-width: 575px) {
  .chr-header-carousel,
  .chr-hero-banner--overlay {
    min-height: 420px;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-inner {
    padding: 32px 20px 40px 56px;
  }
}

/* ============================================================
  终极覆盖：把页面上非主视觉轮播的导航箭头改成纯黑
   ------------------------------------------------------------
   区分两种轮播：
     主视觉头图（.glide__arrows--middle）→ 深色大图背景，箭头要白色
     其他轮播（.glide__arrows--light / aria-label 英文 prev/next）→
       浅色/图片背景，箭头要黑色
   hero-carousel.css 前面的 .glide__arrows--dark 规则给主视觉用白色，
   这里只覆盖非主视觉的，排除 --middle 父级。
   ============================================================ */

/* 按钮本体颜色 + 边框：只命中非主视觉的导航按钮 */
.glide__arrows--light .chr-button,
.glide__arrows:not(.glide__arrows--middle) .chr-button,
button[aria-label*="prev"],
button[aria-label*="Prev"],
button[aria-label*="next"],
button[aria-label*="Next"] {
  color: #000 !important;
  border-color: #000 !important;
}

/* SVG 箭头线条也强制纯黑 */
.glide__arrows--light .chr-button svg path,
.glide__arrows--light .chr-button svg line,
.glide__arrows--light .chr-button svg polygon,
.glide__arrows:not(.glide__arrows--middle) .chr-button svg path,
.glide__arrows:not(.glide__arrows--middle) .chr-button svg line,
.glide__arrows:not(.glide__arrows--middle) .chr-button svg polygon,
button[aria-label*="prev"] svg path,
button[aria-label*="prev"] svg line,
button[aria-label*="next"] svg path,
button[aria-label*="next"] svg line {
  stroke: #000 !important;
  fill: #000 !important;
}

/* 各种状态也保持纯黑（仍排除 --middle） */
.glide__arrows--light .chr-button:hover,
.glide__arrows--light .chr-button:active,
.glide__arrows--light .chr-button:focus-within,
.glide__arrows--light .glide__arrow--disabled .chr-button,
button[aria-label*="prev"]:hover,
button[aria-label*="prev"]:active,
button[aria-label*="prev"]:focus-within,
button[aria-label*="prev"]:disabled,
button[aria-label*="next"]:hover,
button[aria-label*="next"]:active,
button[aria-label*="next"]:focus-within,
button[aria-label*="next"]:disabled {
  color: #000 !important;
  border-color: #000 !important;
}

.glide__arrows--light .glide__arrow--disabled .chr-button svg path,
.glide__arrows--light .glide__arrow--disabled .chr-button svg line {
  stroke: #000 !important;
}

/* ============================================================
   移动端修复（首页三处）
   1) 主视觉轮播箭头过大（124px），压住标题下方的文案
   2) Braze 横幅文案列被挤成窄条，英文断行稀碎
   3) 「即將舉行拍賣」标题与筛选芯片拥挤
   注：这些元素的原始样式来自 react-legacy-index.css / critical.min.css，
      加载顺序在 hero-carousel.css 之后，故一律用 !important。
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- 1. 主视觉箭头缩小 + 文案避让 ---------- */
  .chr-header-carousel .glide__arrow,
  .glide__arrows--middle .glide__arrow {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .chr-header-carousel .glide__arrow--left {
    left: 6px !important;
  }

  .chr-header-carousel .glide__arrow--right {
    right: 6px !important;
  }

  .chr-header-carousel .glide__arrow .chr-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .chr-header-carousel .glide__arrow .chr-icon__wrapper {
    width: 16px !important;
    height: 16px !important;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ---------- 2. Braze 横幅：缩小标题字号，减少碎断行 ---------- */
  .cbanner__media img {
    max-height: 140px !important;
    object-fit: cover !important;
  }

  .cbanner__content {
    padding: 12px !important;
  }

  .cbanner__heading {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* ---------- 3. 即將舉行拍賣：标题与筛选芯片 ---------- */
  .chr-upcoming-auctions__heading,
  .chr-upcoming-auctions h2 {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .chr-upcoming-auctions .chr-quick-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 6px 0 18px !important;
  }

  .chr-upcoming-auctions .chr-button--tag {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    min-height: 28px !important;
  }
}

/* =============================================================================
   移动端首页样式（参考佳士得移动端首页）
   -----------------------------------------------------------------------------
   1) 头图轮播：单张全宽图 + 下方黑色信息面板（一个标题对应一张图）。
   2) promo 轮播：移动端改为大磁贴（每屏约 1 张 + 右侧露出下一张的一角），
      磁贴内标题缩小并限 3 行（宽度配合见 carousel-runtime.js）。
   3) 热门拍品：移动端改为双列紧凑卡片（slide 宽 47.5%，轮播脚本据此算出每屏 2 张）。
   ========================================================================== */
/* 即將舉行拍賣的横向滚动控件（仅移动端显示，见下方媒体查询） */
.chr-upcoming-auctions__scroller-nav {
  display: none;
}

@media (max-width: 767px) {
  /* ---------- 1. 头图：单图 + 黑色面板 ---------- */
  .chr-header-carousel,
  .chr-header-carousel .glide,
  .chr-header-carousel .glide__track,
  .chr-header-carousel .glide__slides > chr-header-carousel-slide,
  .chr-header-carousel .chr-header-carousel-slide,
  chr-hero-banner,
  .chr-hero-banner--overlay {
    display: block;
    height: auto !important;
    min-height: 0 !important;
  }

  /*
   * slides 容器保持横向 flex：3 张 slide 各占满屏宽，由 carousel-runtime.js
   * 写宽度（= 可视区宽）并用 translate3d 切换 —— 与参考站一致：
   * 移动端头图为「一屏 = 单图 + 黑面板」的横向轮播，圆点落在面板底部。
   * （曾改成 display:block 让 3 张纵向堆叠，导致轮播失效、圆点跑到底部，已回退。）
   */
  .chr-header-carousel .glide__slides {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    /* 桌面端给 slides 写死了 --hero-h（460px），移动端要随内容高度收缩，
       否则圆点会掉到面板下方的空白里（glide 比 slide 高出 ~70px） */
    height: auto !important;
  }

  /* 头图：单张全宽，容器按原图 1920×900 比例自适应，不裁剪不变形 */
  .chr-hero-banner--overlay .chr-hero-banner__media {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1920 / 900;
    overflow: hidden;
  }

  /* 移动端头图不加渐变遮罩，左右箭头也隐藏（靠滑动 + 圆点，同参考站） */
  .chr-hero-banner--overlay .chr-hero-banner__scrim {
    display: none !important;
  }

  .chr-header-carousel .glide__arrow {
    display: none !important;
  }

  /* 黑色信息面板：紧跟头图下方 */
  .chr-hero-banner--overlay .chr-hero-banner__overlay-content {
    position: static;
    display: block;
    height: auto;
    /* 底部留足空间给圆点（圆点绝对定位在面板底部） */
    padding: 24px 20px 44px;
    background: #000;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-inner {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-label {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* 标题固定预留 2 行高度：3 个 slide 的标题行数不同（1 行 / 2 行），
     预留后各 slide 总高度一致，避免切换时头图高度跳动 */
  .chr-hero-banner--overlay .chr-hero-banner__overlay-title {
    font-size: clamp(24px, 6.4vw, 30px);
    line-height: 1.3;
    margin-top: 10px !important;
    min-height: 2.6em;
    white-space: normal;
    word-break: break-word;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-sub {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px !important;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-button {
    margin-top: 18px;
  }

  /* 参考站的头图按钮为通栏浅色按钮 */
  .chr-hero-banner--overlay .chr-hero-banner__overlay-button .chr-button {
    width: 100% !important;
    min-width: 0;
    background: #fff !important;
    border-color: #fff !important;
    color: #1a1a1a !important;
    border-radius: 0 !important;
    min-height: 44px;
  }

  .chr-hero-banner--overlay .chr-hero-banner__overlay-button .chr-button__text {
    color: #1a1a1a !important;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
  }

  /* 圆点落在黑色面板底部（黑底白点，同参考站） */
  .chr-header-carousel .glide__bullets {
    bottom: 16px;
    left: 20px;
  }

  /* ---------- 2. promo 轮播磁贴：小标题 + 限 3 行 ---------- */
  .cbanner__heading {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    max-width: 220px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cbanner__content {
    padding: 12px 16px 16px !important;
  }

  /* ---------- 3. 热门拍品：双列紧凑卡片 ----------
   * 注意：.glide__slides 的内联 width 是按桌面端写的（20 张 × 394px），
   * 直接改 slide 宽度会被 flex-shrink 压回原尺寸。这里先把容器宽度收回 100%，
   * 再给 slide 固定 47.5% 且不允许收缩（flex: 0 0 47.5%）。 */
  .chr-trending-lots .glide__slides {
    width: 100% !important;
    column-gap: 4% !important;
  }

  .chr-trending-lots .glide__slides > chr-lot-tile-carousel-wrapper {
    flex: 0 0 47.5% !important;
    width: 47.5% !important;
    max-width: 47.5% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .chr-trending-lots .chr-lot-tile__primary-title {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .chr-trending-lots .chr-lot-tile__secondary-title {
    font-size: 0.75rem;
  }

  .chr-trending-lots .chr-lot-tile__price-label,
  .chr-trending-lots .chr-lot-tile__price-value {
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .chr-trending-lots .chr-lot-tile__buttons .chr-button {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  /* ---------- 4. 即將舉行拍賣：标题/筛选上下排列 + 单列大卡片横向滑动 ---------- */
  /* 覆盖桌面端 header 的横向排布（.chr-upcoming-auctions__desktop 的 flex-direction:row） */
  .chr-upcoming-auctions__desktop .chr-upcoming-auctions__header {
    flex-direction: column;
    align-items: stretch;
  }

  .chr-upcoming-auctions__filters {
    justify-content: flex-start;
  }

  /* 快照给 loader 写死了桌面端高度（657px），移动端单列后会造成大片空白 */
  .chr-upcoming-auctions chr-loader-next {
    height: auto !important;
  }

  /* 熱門拍品同理：快照 inline 写死 height:745px，移动端卡片变矮后下方留出大块空白 */
  .chr-trending-lots chr-loader-next {
    height: auto !important;
  }

  /* 两列栅格改成横向滚动：每屏 1 张卡片 + 右侧露出下一张
     touch-action: pan-y —— 横向滚动交给 carousel-runtime.js 的 Pointer 拖拽
     （跟手 + 松手固定滑一格），只保留竖向页面滚动 */
  .chr-upcoming-auctions .row.mt-lg-6 {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0;
    overflow-x: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .chr-upcoming-auctions .row.mt-lg-6::-webkit-scrollbar {
    display: none;
  }

  .chr-upcoming-auctions .row.mt-lg-6 > .col-6 {
    flex: 0 0 72%;
    width: 72%;
    max-width: 72%;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
  }

  /* 卡片内部的 Bootstrap 栅格边距归零，图片与文字对齐卡片边缘 */
  .chr-upcoming-auctions .row.mt-lg-6 .row {
    margin: 0;
  }

  .chr-upcoming-auctions .row.mt-lg-6 .col-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .chr-upcoming-auctions .chr-auction-tile-next__title {
    font-size: 1.125rem;
    line-height: 1.35;
    margin-bottom: 12px;
  }

  /*
   * 箭头 + 进度条：与熱門拍品（Glide）底部控件逐项对齐
   *   箭头 40×40 热区 + 24px 图形，贴容器左右边（不留内缩）；
   *   进度 2px 轨道 rgba(0,0,0,.1) + 2px 实心条 #222，两条无缝相接。
   */
  .chr-upcoming-auctions__scroller-nav {
    display: flex;
    align-items: center;
    gap: 0;
    /* 右侧留 12px，与热门拍品右箭头距屏幕边缘的距离一致 */
    margin: 20px 12px 0 0;
  }

  .chr-upcoming-auctions__nav-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .chr-upcoming-auctions__nav-btn svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  /* 同一枚图标画的是「向左」，下一张翻转 180°（与 glide__arrow 的 rotate--180 一致） */
  .chr-upcoming-auctions__nav-btn--next svg {
    transform: rotate(180deg);
  }

  .chr-upcoming-auctions__nav-btn:disabled {
    color: #b3b3b3;
    cursor: default;
  }

  .chr-upcoming-auctions__nav-line {
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .chr-upcoming-auctions__nav-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 2px;
    background: #222;
    will-change: width, transform;
  }

  /* 鼠标可拖拽（触摸走原生滚动）；拖动期间关掉吸附，松手再吸附 */
  .chr-upcoming-auctions .row.mt-lg-6 {
    cursor: grab;
  }

  .chr-upcoming-auctions .row.mt-lg-6.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
  }

  .chr-upcoming-auctions .row.mt-lg-6.is-dragging a {
    cursor: grabbing;
  }
}

/* =============================================================================
   移动端：「瀏覽更多 / 瀏覽全部」按钮移到区块标题右侧
   -----------------------------------------------------------------------------
   这两个区块的 HTML 里本来就有两份按钮：
     页眉 .chr-trending-lots__header-button / .chr-lot-articles__header .chr-lot-articles__nav
     页脚 .chr-trending-lots__footer-button / .chr-lot-articles__footer
   原站移动端隐藏页眉那份、显示页脚那份（按钮落在内容底部）。
   需求：移动端改为按钮跟着标题走（右上角），页脚那份隐藏。
   页眉容器是 flex column（标题 + 筛选），用绝对定位贴右上，不动原有排版。
   ========================================================================== */
@media (max-width: 767px) {
  /* ---------- 熱門拍品 ---------- */
  .chr-trending-lots__header {
    position: relative;
  }

  .chr-trending-lots__header-button {
    display: block !important;
    position: absolute;
    top: -4px;
    right: 0;
    margin: 0 !important;
  }

  /* 标题右侧留出按钮宽度，避免长标题压到按钮 */
  .chr-trending-lots__header > .chr-heading-l-serif {
    padding-right: 110px;
  }

  .chr-trending-lots__footer-button {
    display: none !important;
  }

  /* ---------- 最新專題 ---------- */
  .chr-lot-articles__header {
    position: relative;
  }

  .chr-lot-articles__header .chr-lot-articles__nav {
    display: block !important;
    position: absolute;
    top: -4px;
    right: 0;
    margin: 0 !important;
  }

  .chr-lot-articles__header > .chr-heading-l-serif {
    padding-right: 110px;
  }

  .chr-lot-articles__footer {
    display: none !important;
  }

  /* 两处按钮统一紧凑尺寸，与移动端标题（22px）同一行的视觉重量 */
  .chr-trending-lots__header-button .chr-button,
  .chr-lot-articles__header .chr-lot-articles__nav .chr-button {
    min-height: 32px;
    padding: 4px 10px;
  }

  .chr-trending-lots__header-button .chr-button__text,
  .chr-lot-articles__header .chr-lot-articles__nav .chr-button__text {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
}