/* GalleryRail - ported from Framer code component GalleryRail.tsx
   A horizontal scroll-snapping strip of photographs at clamp(230px, 40vh,
   430px) (clamp(160px, 28vh, 230px) below 810px). It sits in the centred shop2
   shell (--jifu-measure wide) and bleeds one page gutter (--jifu-gutter) past
   it each side, so the first photograph starts at the shell edge on a wide
   viewport. js/framer/galleryrail.js advances it one card per interval while at
   least 35% is on screen and pauses on pointer/touch/focus. Reduced motion
   turns snapping and the image transitions off and holds the rail still. */
.fr-galleryrail {
  --fr-galleryrail-radius: 2px;
  --fr-galleryrail-gap: clamp(0.5rem, 1.4vw, 1rem);
  --fr-galleryrail-h: clamp(230px, 40vh, 430px);
  --fr-galleryrail-h-narrow: clamp(160px, 28vh, 230px);
  --fr-galleryrail-focus: #75593F;
  width: 100%;
}
.fr-galleryrail__rail {
  display: flex;
  gap: var(--fr-galleryrail-gap);
  list-style: none;
  margin: 0 auto;
  width: min(100%, calc(var(--jifu-measure, 1440px) + 2 * var(--jifu-gutter, clamp(1.5rem, 6.5vw, 8rem))));
  box-sizing: border-box;
  padding: 0 var(--jifu-gutter, clamp(1.5rem, 6.5vw, 8rem)) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scroll-padding-inline: var(--jifu-gutter, clamp(1.5rem, 6.5vw, 8rem));
}
.fr-galleryrail__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
}
.fr-galleryrail__img {
  display: block;
  width: auto;
  height: var(--fr-galleryrail-h);
  max-width: none;
  border-radius: var(--fr-galleryrail-radius);
  filter: saturate(0.92) contrast(1.03);
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s ease-out, box-shadow 0.42s ease-out;
}
@media (max-width: 809.98px) {
  .fr-galleryrail__img { height: var(--fr-galleryrail-h-narrow); }
}
@media (hover: hover) {
  .fr-galleryrail__item:hover .fr-galleryrail__img {
    transform: scale(1.035);
    filter: saturate(1.02) contrast(1.06);
    box-shadow: 0 18px 44px -22px rgba(25, 25, 25, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-galleryrail__rail { scroll-snap-type: none; }
  .fr-galleryrail__img { transition: none; }
  .fr-galleryrail__item:hover .fr-galleryrail__img { transform: none; }
}
.fr-galleryrail__rail::-webkit-scrollbar { height: 6px; }
.fr-galleryrail__rail::-webkit-scrollbar-thumb { background: rgba(25, 25, 25, 0.16); border-radius: 3px; }
.fr-galleryrail__rail:focus-visible { outline: 2px solid var(--fr-galleryrail-focus); outline-offset: 6px; }
