/* Studio Setup hero carousel — centre-focus inside .hero-device-wrap
   (centre card with the previous/next cards peeking in at the sides). */
.hero-device-wrap.studio-hero-wrap { padding: 0 10%; }
.studio-hero-wrap .hero-device { max-width: 1120px; }

/* --sh-w: centre card width, --sh-k: scale of the previous/next cards,
   --sh-gap: clear space between the centre card and a neighbour (all % of the viewport). */
.sh-carousel { position: relative; display: flow-root; margin: 0 -9%; --sh-w: 80%; --sh-k: 0.8; --sh-gap: 1.1%; }
/* The viewport clips the track; the centre card is bigger than the old single
   slide and the neighbours peek in at the sides, scaled down and dimmed. */
/* The viewport clips the track, so it needs room for the shared hero media shadow (30px above the card, 70px below): 40px / 80px of padding, with the extra 14px / 46px taken back by negative margins so the carousel keeps its 26px / 34px footprint (display: flow-root on the carousel stops those margins collapsing out of it). */
.sh-viewport { overflow: hidden; width: 100%; padding: 40px 0 80px; margin: -14px 0 -46px; }
.sh-track { display: flex; align-items: stretch; will-change: transform; }

.sh-slide {
  flex: 0 0 var(--sh-w);
  /* scale() shrinks a card towards its own centre, opening (1 - k) / 2 of its
     width as extra space on each side; the negative margin takes that back so
     the space actually seen is --sh-gap. */
  margin: 0 calc((var(--sh-gap) - var(--sh-w) * (1 - var(--sh-k)) / 2) / 2);
  aspect-ratio: 1280 / 584;
  background: #050816;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0.55;
  transform: scale(var(--sh-k));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  transition: transform 0.8s ease, opacity 0.8s ease, box-shadow 0.8s ease;
}
@media (max-width: 767px) { .sh-slide { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07); } } /* half strength on phones, like --hero-media-shadow */
.sh-slide.is-active {
  opacity: 1;
  transform: none;
  box-shadow: var(--hero-media-shadow);
}
/* Set by studio-hero.js while a clone is swapped for its real slide (no visible change allowed). */
.sh-carousel.is-snapping .sh-slide { transition: none; }
.sh-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Product photos on white (snl_studio_hero_carousel(..., true), ops.php): shown whole on a white card with a hairline,
   because the white slides would otherwise melt into the white hero. */
.sh-carousel--contain .sh-slide { background: var(--plate); border: 1px solid var(--border); }
.sh-carousel--contain .sh-slide img { object-fit: contain; }
.sh-carousel--contain .sh-arrow { border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(11, 16, 32, 0.16); }

.sh-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--fg-primary);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.sh-arrow:hover { transform: translateY(-50%) scale(1.18); }
.sh-arrow--prev { left: calc((100% - var(--sh-w)) / 2 - 16px); }
.sh-arrow--next { right: calc((100% - var(--sh-w)) / 2 - 16px); }

.sh-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.sh-dots button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.sh-dots button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, background 0.2s ease;
}
.sh-dots button[aria-current="true"]::before { width: 20px; background: #0b1020; }

@media (max-width: 899px) {
  .hero-device-wrap.studio-hero-wrap { padding: 0 4% 24px; }
  .sh-carousel { margin: 0 -4%; --sh-w: 90%; --sh-gap: 1.5%; }
}
@media (max-width: 599px) {
  .sh-arrow { display: none; }
}