/* Instagram-style slider + pinned arrow icons when a post has 2+ photos */

div.flex.flex-col.gap-1:has(> img:nth-of-type(2)),
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

div.flex.flex-col.gap-1:has(> img:nth-of-type(2))::-webkit-scrollbar,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel)::-webkit-scrollbar {
  display: none;
}

div.flex.flex-col.gap-1:has(> img:nth-of-type(2)) > img,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) > img,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) > video,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) > div {
  min-width: 100% !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always;
}

/* Full-width sticky overlay so both arrows stay on the visible frame */
div.flex.flex-col.gap-1:has(> img:nth-of-type(2))::before,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel)::before {
  content: "";
  position: sticky;
  left: 0;
  z-index: 20;
  flex: 0 0 auto;
  width: var(--ig-w, 100%);
  height: 44px;
  margin-right: calc(var(--ig-w, 100%) * -1);
  align-self: center;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: left 10px center, right 10px center;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='white'/><polyline points='23 12 15 20 23 28' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='white'/><polyline points='17 12 25 20 17 28' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}