.art-carousel { position: relative; }
.carousel-viewport { overflow: hidden; padding: 3px; border-radius: 22px; }
.carousel-track { display: flex; gap: 13px; transition: transform 360ms cubic-bezier(0.22, 0.7, 0.2, 1); }
.carousel-track img { width: clamp(190px, 26vw, 250px); height: clamp(190px, 26vw, 250px); flex: 0 0 auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-raised); object-fit: cover; cursor: zoom-in; transition: transform 180ms ease, box-shadow 180ms ease; }
.carousel-track img:hover { transform: scale(1.015); box-shadow: var(--shadow-soft); }
.gallery-error { width: 100%; padding: 24px; border: 1px dashed var(--border-strong); border-radius: 16px; color: var(--muted); font-size: 0.88rem; text-align: center; }
.carousel-btn { position: absolute; z-index: 2; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-solid); box-shadow: var(--shadow-card); color: var(--text); cursor: pointer; transform: translateY(-50%); transition: color 150ms ease, background 150ms ease, transform 150ms ease; }
.carousel-btn:hover { transform: translateY(-50%) scale(1.05); background: var(--text); color: var(--bg); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn:disabled:hover { transform: translateY(-50%); background: var(--surface-solid); color: var(--text); }
.carousel-btn.prev { left: -17px; }
.carousel-btn.next { right: -17px; }

@media (max-width: 560px) {
  .carousel-btn { width: 36px; height: 36px; }
  .carousel-btn.prev { left: -9px; }
  .carousel-btn.next { right: -9px; }
  .carousel-track { gap: 9px; }
  .carousel-track img { width: min(65vw, 230px); height: min(65vw, 230px); border-radius: 14px; }
}