/* 仅约束首页护理轨道：保留卡片尺寸、图片比例、间距及左对齐位置。 */
#treatments .treatment-rail {
  --treatment-inset: max(1.5rem, calc((100vw - 1160px) / 2));
  display: flex;
  gap: 0;
  width: calc(100% - 2 * var(--treatment-inset));
  max-width: 1160px;
  margin: 3.5rem var(--treatment-inset) 0;
  padding: 0 .1rem .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
#treatments .treatment-card {
  flex: 0 0 390px;
  width: 390px;
  max-width: 100%;
  margin-right: 1.4rem;
  scroll-snap-align: start;
}
#treatments .treatment-rail:focus-visible,
#treatments .treatment-carousel-controls button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
/* Flickity 只重排现有三张卡片；加载失败时上方原生横向滚动仍可使用。 */
#treatments .treatment-rail.flickity-enabled {
  display: block;
  position: relative;
  overflow: hidden;
  scroll-snap-type: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
#treatments .treatment-rail.is-pointer-down { cursor: grabbing; }
#treatments .flickity-viewport { position: relative; overflow: hidden; touch-action: pan-y; }
#treatments .flickity-slider { position: absolute; width: 100%; height: 100%; }
#treatments .treatment-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .9rem;
  margin-bottom: 3.5rem;
}
#treatments .treatment-carousel-controls[hidden] { display: none; }
#treatments .treatment-carousel-controls button[hidden] { display: none; }
#treatments .treatment-carousel-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(25, 36, 34, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
#treatments .treatment-carousel-controls button:hover { background: #eef2f1; }
#treatments .treatment-carousel-controls button:active { transform: scale(.94); }
#treatments .treatment-carousel-arrow { font-size: 1.25rem !important; }
#treatments .treatment-carousel-dots { display: flex; gap: 0; }
#treatments .treatment-carousel-controls .treatment-carousel-dot { min-width: 36px; border-color: transparent; background: transparent; }
#treatments .treatment-carousel-dot span { width: 6px; height: 6px; border-radius: 50%; background: #a5aeaa; }
#treatments .treatment-carousel-dot[aria-current="true"] span { background: var(--ink); }
#treatments .treatment-carousel-controls .treatment-carousel-pause { padding: 0 1rem; font-size: .8125rem; }
#treatments .treatment-carousel-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 820px) {
  #treatments .treatment-rail { --treatment-inset: 1rem; margin-top: 2.5rem; }
  #treatments .treatment-card { flex-basis: max(250px, 78vw); width: max(250px, 78vw); }
  #treatments .treatment-carousel-controls { gap: .3rem; justify-content: center; margin-bottom: 2.5rem; }
  #treatments .treatment-carousel-controls .treatment-carousel-pause { padding: 0 .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  #treatments .treatment-carousel-controls button { transition: none; }
}