.post-carousel { width: 100%; margin: 1em 0; }
.pc-stage, .pc-tool .image-tool__image { position: relative; }
.pc-stage { width: 100%; min-width: 0; touch-action: pan-y pinch-zoom; }
.pc-stage > img, .pc-stage > .pc-open img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: .675rem; }
.pc-open { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.pc-tool .image-tool__caption:empty::before { content: attr(data-placeholder); color: #87919d; font-style: italic; }
.pc-tools, .pc-create { position: absolute; z-index: 1; inset: 12px 12px auto auto; }
.pc-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.pc-edit, .pc-count {
  background: rgb(0 0 0 / 66%); border: 0; border-radius: 5px; padding: 5px 9px;
  color: #fff; font: 500 14px/1.3 system-ui, sans-serif;
}
.pc-edit, .pc-arrow { cursor: pointer; }
.pc-edit, .pc-arrow { opacity: 0; }
.pc-tool .pc-create { display: none; }
.pc-tool.image-tool--filled .pc-create { display: block; }
.pc-tool :is(.pc-stage,.image-tool__image):is(:hover,:focus-within),
.ce-block--focused .pc-tool :is(.pc-stage,.image-tool__image) {
  outline: 2px solid #75bdff; outline-offset: 0; border-radius: .675rem;
}
.pc-stage:is(:hover,:focus-within) :is(.pc-arrow,.pc-edit),
.pc-tool .image-tool__image:is(:hover,:focus-within) .pc-create { opacity: 1; }
.pc-arrow, .pc-viewing .post-gallery-nav {
  position: absolute; z-index: 1; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 54px; padding: 0;
  background: transparent; border: 0; color: #fff; filter: drop-shadow(0 1px 3px #333);
}
.pc-arrow::before { content: ''; width: 15px; height: 15px; border: solid currentColor; border-width: 3px 3px 0 0; }
.pc-prev { left: 2%; }
.pc-next { right: 2%; }
.pc-prev::before { transform: rotate(-135deg); }
.pc-next::before { transform: rotate(45deg); }
.pc-tool.pc-carousel > :is(.image-tool__image,.cdx-button),
.pc-tool.pc-editing > :not(.pc-panel),
.pc-stage[hidden], .pc-arrow[hidden], .post-gallery-nav[hidden], .post-gallery-close[hidden] { display: none !important; }

.pc-panel {
  --pc-tile-bg: #cbd5e1;
  --pc-divider: #fff;
  width: 100%; min-width: 0; aspect-ratio: 6/5; background: #e2e8f0; color: #1f2937;
  border-radius: .675rem; overflow: clip; font: 400 14px/1.4 system-ui, sans-serif; text-align: left;
}
html.dark .pc-panel { --pc-tile-bg: #374151; --pc-divider: #11182b; background: #1f2937; color: #e5e7eb; }
.pc-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px; border-bottom: 1px solid var(--pc-divider); }
.pc-panel-count { margin-left: auto; }
.pc-panel button { border: 0; font: inherit; cursor: pointer; }
.pc-panel :is(.pc-save,.pc-cancel) { padding: 6px 14px; border-radius: 7px; }
.pc-save { background: white; color: #161616; }
.pc-cancel, .pc-add { background: var(--pc-tile-bg); color: inherit; }
.pc-panel button:disabled { opacity: .55; cursor: default; }
.pc-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 13px; }
.pc-tile, .pc-add { position: relative; aspect-ratio: 7/5; min-width: 0; border-radius: 6px; }
.pc-tile { cursor: grab; touch-action: none; }
.pc-tile img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.pc-remove {
  position: absolute; inset: 3px 3px auto auto; width: 25px; height: 25px; padding: 0;
  background: rgb(0 0 0 / 60%); color: white; line-height: 1; border-radius: 4px;
}
.pc-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pc-status { padding: 0 13px 8px; overflow-wrap: anywhere; }
body.post-gallery-open { overflow: hidden; }
.post-gallery-overlay.pc-viewing { padding: 5vh 4vw; }
.pc-viewing .post-gallery-stage { max-width: none; }
.pc-viewing .post-gallery-image { width: 100%; height: 100%; object-fit: contain; border-radius: 0; cursor: zoom-out; touch-action: pan-y pinch-zoom; }
.pc-viewing .post-gallery-counter {
  position: absolute; top: 6px; bottom: auto; left: auto; height: 28px; line-height: 28px;
  transform: none; background: #646464; color: white;
}
.pc-viewing .post-gallery-counter { right: 6px; border-radius: 4px; padding: 0 8px; font-size: 13px; }
.pc-viewing .post-gallery-nav { opacity: 0; }
.pc-viewing .post-gallery-nav:is(:hover,:focus-visible) { opacity: 1; }
@media (hover: none) {
  .pc-edit, .pc-arrow { opacity: 1; }
}
@media (max-width: 520px) {
  .pc-panel-head { gap: 6px; padding: 9px; }
  .pc-panel-head > span:first-child { flex-basis: 100%; }
  .pc-panel-count { margin-left: 0; margin-right: auto; }
  .pc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pc-tools, .pc-create { top: 6px; right: 6px; }
  .pc-viewing.post-gallery-overlay { padding: 36px 0; }
}
.pc-tool { container-type: inline-size; }
@container (min-width: 400px) and (max-width: 570px) {
  .pc-panel-head { gap: 6px; padding: 10px; font-size: 12px; }
  .pc-panel :is(.pc-save,.pc-cancel) { padding: 6px 9px; }
}