/* ============================================================
   Semberlee — swipe galleries
   One photo at a time, swipeable on touch, arrows + dots on
   desktop. Native scroll-snap does the swiping, so the gallery
   still works with JavaScript turned off. Shared by every page
   that shows more than one photo of the same piece.
   ============================================================ */

.swipe{position:relative;}

.swipe-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-radius:16px;
  background:var(--blush);
}
.swipe-track::-webkit-scrollbar{display:none;}

.swipe-slide{
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--blush);
}
.swipe-slide img{width:100%; height:100%; object-fit:cover; display:block;}

/* Slides that open a full-size view are buttons, not links. */
button.swipe-slide{
  padding:0; border:0; font:inherit; line-height:0; cursor:zoom-in;
  -webkit-appearance:none; appearance:none;
}

/* Bouquets shot against a plain backdrop read better uncropped. */
.swipe.contain .swipe-slide img{object-fit:contain;}

/* ---------- ARROWS ---------- */
.swipe-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,0.92); color:var(--rose-deep);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
  box-shadow:0 8px 18px -8px rgba(139,58,71,0.55);
  transition:background .2s, transform .2s, opacity .2s;
}
.swipe-nav svg{width:15px; height:15px;}
.swipe-nav.prev{left:10px;}
.swipe-nav.next{right:10px;}
.swipe-nav:hover{background:#fff; transform:translateY(-50%) scale(1.08);}
.swipe-nav:disabled{opacity:0.3; cursor:default; box-shadow:none;}
.swipe-nav:disabled:hover{background:rgba(255,255,255,0.92); transform:translateY(-50%);}

/* ---------- DOTS + COUNT ---------- */
.swipe-dots{
  display:flex; justify-content:center; align-items:center;
  gap:7px; flex-wrap:wrap; margin-top:12px;
}
.swipe-dots button{
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:var(--rose-light); opacity:0.5; cursor:pointer;
  transition:transform .2s, opacity .2s, background .2s;
}
.swipe-dots button:hover{opacity:0.85;}
.swipe-dots button[aria-current="true"]{
  background:var(--rose-deep); opacity:1; transform:scale(1.3);
}

.swipe-count{
  display:block; text-align:center; font-size:0.75rem;
  color:var(--ink-soft); margin-top:8px;
}

/* Keyboard users need to see where they are. */
.swipe-track:focus-visible,
.swipe-nav:focus-visible,
.swipe-dots button:focus-visible{
  outline:2px solid var(--rose-mid); outline-offset:3px;
}

@media (max-width:860px){
  .swipe-nav{width:34px; height:34px;}
  .swipe-nav.prev{left:8px;}
  .swipe-nav.next{right:8px;}
}

/* Touch devices swipe — the arrows only get in the way there. */
@media (hover:none){
  .swipe-nav{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .swipe-track{scroll-behavior:auto;}
  .swipe-nav:hover{transform:translateY(-50%);}
}