.studio-dt-carousel { position: relative; }
.studio-dt-carousel__track {
    display: flex; gap: var(--space-md);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; list-style: none; margin: 0; padding: 0;
}
.studio-dt-carousel__track::-webkit-scrollbar { display: none; }
.studio-dt-carousel__slide { flex: 0 0 auto; scroll-snap-align: start; }
/* Round white circular buttons with a thin line-arrow (the glyph in the markup is hidden). */
.studio-dt-carousel__prev, .studio-dt-carousel__next {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: calc(var(--z-base) + 1); border: 0;   /* above the gallery image, below the sticky title (--z-sticky) */
    background: var(--frost-bg);                       /* frosted like the cookie card */
    -webkit-backdrop-filter: var(--frost-blur);
            backdrop-filter: var(--frost-blur);
    cursor: pointer;
    border-radius: 50%; width: 3.5rem; height: 3.5rem;
    box-shadow: 0 2px 12px rgba(20, 20, 30, .14);
    display: flex; align-items: center; justify-content: center;
    font-size: 0;                       /* hide the ‹ › glyph */
    color: var(--color-text-default);
    transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
/* Sink 1px on click, like links + pills. */
.studio-dt-carousel__prev:active,
.studio-dt-carousel__next:active { transform: translateY(calc(-50% + 1px)); }
.studio-dt-carousel__prev::before, .studio-dt-carousel__next::before {
    content: ""; width: 2.75rem; height: 2.75rem; background-color: currentColor;   /* ~2× the old arrow */
    -webkit-mask: var(--arrow) center / contain no-repeat;
            mask: var(--arrow) center / contain no-repeat;
}
.studio-dt-carousel__prev { left: 0; --arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012H4M11%205l-7%207%207%207'/%3E%3C/svg%3E"); }
.studio-dt-carousel__next { right: 0; --arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h16M13%205l7%207-7%207'/%3E%3C/svg%3E"); }

/* Multi-image gallery: each slide fills the gallery column so one image shows per
   view and the arrows overlay the image. flex-basis 100% (not width:100%) resolves
   against the flex track's main size; a bare width:100% mis-resolves against the
   block and overflows the column. */
.studio-dt-mid .studio-dt-carousel__slide { flex: 0 0 100%; }
.studio-dt-mid .studio-dt-carousel__slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.studio-dt-mid .studio-dt-carousel__prev { left: var(--space-md); }
.studio-dt-mid .studio-dt-carousel__next { right: var(--space-md); }