/* Approved Option 2: complete-image viewer, quiet thumbnail rail, no photo crops. */
.cs-procedure-gallery {
  --cs-gallery-ink: #202426;
  --cs-gallery-accent: #2aadd4;
  --cs-gallery-gutter: 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  min-width: 0;
  margin: 0 auto;
  color: var(--cs-gallery-ink);
  background: #fff;
  font: inherit;
}
.cs-procedure-gallery *, .cs-procedure-gallery *::before, .cs-procedure-gallery *::after { box-sizing: border-box; }
.cs-procedure-gallery .cs-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: min(68vh, 680px);
  height: min(68svh, 680px);
  min-width: 0;
  padding: 0 var(--cs-gallery-gutter);
  touch-action: pan-y pinch-zoom;
}
.cs-procedure-gallery .cs-gallery-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  cursor: zoom-in;
}
.cs-procedure-gallery .cs-gallery-open > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  box-shadow: none;
}
.cs-procedure-gallery .cs-gallery-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  color: var(--cs-gallery-ink);
  background: #fff;
  box-shadow: none;
  cursor: zoom-in;
}
.cs-procedure-gallery .cs-gallery-expand svg { width: 22px; height: 22px; }
.cs-procedure-gallery .cs-gallery-prev,
.cs-procedure-gallery .cs-gallery-next {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  margin: -28px 0 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cs-gallery-ink);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cs-procedure-gallery .cs-gallery-prev { left: 0; }
.cs-procedure-gallery .cs-gallery-next { right: 0; }
.cs-procedure-gallery .cs-gallery-prev svg,
.cs-procedure-gallery .cs-gallery-next svg { display: block; width: 28px; height: 28px; }
.cs-procedure-gallery .cs-gallery-prev:hover,
.cs-procedure-gallery .cs-gallery-next:hover,
.cs-procedure-gallery .cs-gallery-expand:hover { background: transparent; color: #087ca3; }
.cs-procedure-gallery .cs-gallery-prev:focus-visible,
.cs-procedure-gallery .cs-gallery-next:focus-visible,
.cs-procedure-gallery .cs-gallery-open:focus-visible,
.cs-procedure-gallery .cs-gallery-expand:focus-visible,
.cs-procedure-gallery .cs-gallery-thumb:focus-visible {
  outline: 2px solid #087ca3;
  outline-offset: 3px;
}
.cs-procedure-gallery .cs-gallery-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 8px 0 12px;
}
.cs-procedure-gallery .cs-gallery-count {
  display: block;
  margin: 10px 0 16px;
  color: #42484b;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.cs-procedure-gallery .cs-gallery-meta .cs-gallery-count { margin: 0; }
.cs-procedure-gallery .cs-gallery-thumbs {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 3px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 3px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd1d4 transparent;
  -webkit-overflow-scrolling: touch;
}
.cs-procedure-gallery .cs-gallery-thumb {
  position: relative;
  display: flex;
  flex: 0 0 100px;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 82px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}
.cs-procedure-gallery .cs-gallery-thumb::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: transparent;
  content: '';
}
.cs-procedure-gallery .cs-gallery-thumb[aria-current="true"]::after { background: var(--cs-gallery-accent); }
.cs-procedure-gallery .cs-gallery-thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  box-shadow: none;
}
.cs-procedure-gallery .cs-gallery-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cs-gallery-sensitive > summary {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 0;
  color: #202426;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  text-underline-offset: 4px;
}
.cs-gallery-sensitive > summary:focus-visible { outline: 2px solid #087ca3; outline-offset: 4px; }
.cs-gallery-sensitive[open] > summary { margin-bottom: 14px; }
.cs-gallery-sensitive > .cs-gallery-sensitive-note { max-width: 600px; margin: 0 auto 16px; color: #5b6266; font-size: 13px; line-height: 1.6; text-align: center; }
.cs-procedure-gallery .cs-gallery-safe-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}
.cs-procedure-gallery [hidden] { display: none !important; }
.cs-procedure-gallery[data-count="1"] .cs-gallery-stage { padding-inline: 0; }
.cs-procedure-gallery[data-count="1"] .cs-gallery-prev,
.cs-procedure-gallery[data-count="1"] .cs-gallery-next,
.cs-procedure-gallery[data-count="1"] .cs-gallery-count,
.cs-procedure-gallery[data-count="1"] .cs-gallery-thumbs { display: none; }
.cs-gallery-lightbox {
  --pswp-bg: #111;
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #fff;
  --pswp-icon-stroke-color: transparent;
  --pswp-icon-stroke-width: 0;
  z-index: 2147483000;
}
.cs-gallery-lightbox .pswp__top-bar { padding-top: env(safe-area-inset-top, 0px); }
.cs-gallery-lightbox .pswp__button {
  width: 52px;
  height: 52px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  opacity: 1 !important;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.cs-gallery-lightbox .pswp__button--close { margin-right: max(8px, env(safe-area-inset-right, 0px)); }
.cs-gallery-lightbox .pswp__button--arrow { top: 50%; width: 52px; height: 64px; margin-top: -32px; }
.cs-gallery-lightbox .pswp__button--arrow--prev { left: max(0px, env(safe-area-inset-left, 0px)); }
.cs-gallery-lightbox .pswp__button--arrow--next { right: max(0px, env(safe-area-inset-right, 0px)); }
.cs-gallery-lightbox .pswp__button .pswp__icn { top: 12px; left: 12px; width: 28px; height: 28px; fill: none; }
.cs-gallery-lightbox .pswp__button--arrow .pswp__icn { top: 18px; }
.cs-gallery-lightbox .pswp__button--arrow--next .pswp__icn { transform: none; }
.cs-gallery-lightbox .pswp__counter { margin-top: 14px; margin-left: max(16px, env(safe-area-inset-left, 0px)); color: #fff; font-size: 13px; line-height: 24px; opacity: 1; }
.cs-gallery-lightbox .pswp__button:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.cs-gallery-lightbox .pswp__icn-shadow { display: none; }
.cs-gallery-lightbox .pswp__top-bar,
.cs-gallery-lightbox .pswp__button--close,
.cs-gallery-lightbox .pswp__button--arrow,
.cs-gallery-lightbox .pswp__counter { opacity: 1 !important; visibility: visible !important; }
.cs-gallery-lightbox.pswp--one-slide .pswp__button--arrow,
.cs-gallery-lightbox.pswp--one-slide .pswp__counter { display: none !important; }
@media (max-width: 600px) {
  .cs-procedure-gallery { --cs-gallery-gutter: 32px; }
  .cs-procedure-gallery .cs-gallery-stage { height: min(62vh, 420px); height: min(62svh, 420px); }
  .cs-procedure-gallery .cs-gallery-prev { justify-content: flex-start; padding: 10px 0 10px 2px; }
  .cs-procedure-gallery .cs-gallery-next { justify-content: flex-end; padding: 10px 2px 10px 0; }
  .cs-procedure-gallery .cs-gallery-prev svg,
  .cs-procedure-gallery .cs-gallery-next svg { width: 24px; height: 24px; }
  .cs-procedure-gallery .cs-gallery-thumbs { gap: 8px; padding-bottom: 10px; }
  .cs-procedure-gallery .cs-gallery-thumb { flex-basis: 76px; width: 76px; height: 66px; }
  .cs-procedure-gallery .cs-gallery-count { margin: 8px 0 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-procedure-gallery *, .cs-gallery-lightbox * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}