.rv-gallery{--rv-bg:#ffffff;--rv-border:#e5e7eb;--rv-accent:#0F3D6E;
  --rv-arrow-bg:#ffffff;--rv-arrow-fg:#111827;--rv-arrow-bg-hover:#ffffff;--rv-arrow-fg-hover:#111827;
  --rv-full-bg:#ffffff;--rv-full-fg:#111827;--rv-full-bg-hover:#ffffff;--rv-full-fg-hover:#111827}
.rv-gallery{background:var(--rv-bg);border:1px solid var(--rv-border);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(15,61,110,.10)}
.rv-viewer{position:relative;overflow:hidden;border-radius:10px}
.rv-stage{position:relative;background:#000;height:clamp(340px,70vh,900px);max-height:82vh;overflow:hidden}
.rv-main{width:100%;height:100%;display:block;object-fit:cover}
.rv-fit-contain .rv-main{object-fit:contain;background:#000}
.rv-prev,.rv-next{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;background:var(--rv-arrow-bg);color:var(--rv-arrow-fg);border:1px solid #e5e7eb;width:44px;height:44px;border-radius:999px;cursor:pointer;font-size:20px;box-shadow:0 6px 16px rgba(15,61,110,.12)}
.rv-prev{left:10px}.rv-next{right:10px}
.rv-full{position:absolute;right:10px;top:10px;display:flex;align-items:center;justify-content:center;background:var(--rv-full-bg);color:var(--rv-full-fg);border:1px solid #e5e7eb;width:36px;height:36px;border-radius:10px;cursor:pointer;line-height:1}
.rv-prev:hover,.rv-next:hover{background:var(--rv-arrow-bg-hover);color:var(--rv-arrow-fg-hover)}
.rv-full:hover{background:var(--rv-full-bg-hover);color:var(--rv-full-fg-hover)}
.rv-counter{position:absolute;left:10px;bottom:10px;background:rgba(17,24,39,.72);color:#fff;padding:4px 8px;border-radius:8px;font-weight:700;font-size:13px;z-index:6}
.rv-watermark{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;pointer-events:none}
.rv-thumbs{display:flex;gap:10px;overflow:auto;padding:12px 4px 4px;margin-top:8px;justify-content:center;align-items:center}
.rv-align-left .rv-thumbs{justify-content:flex-start}
.rv-align-center .rv-thumbs{justify-content:center}
.rv-align-right .rv-thumbs{justify-content:flex-end}
.rv-thumbs::-webkit-scrollbar{height:8px}
.rv-thumb{border:2px solid transparent;border-radius:10px;padding:0;background:#fff;cursor:pointer;flex:0 0 auto}
.rv-thumb img{display:block;width:120px;height:90px;object-fit:cover;border-radius:8px}
.rv-thumb.is-active{border-color:var(--rv-accent)}
@media (max-width:720px){.rv-thumb img{width:92px;height:72px}.rv-prev,.rv-next{width:38px;height:38px;font-size:18px}}

/* Clickable hit zones */
.rv-hit{position:absolute; top:0; bottom:0; width:40%; cursor:pointer; z-index:5; background:transparent;}
.rv-hit-left{left:0}
.rv-hit-right{right:0}
.rv-hit-left:hover{background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0))}
.rv-hit-right:hover{background:linear-gradient(270deg, rgba(255,255,255,.04), rgba(255,255,255,0))}

/* Overlay zoom mode */
.rv-gallery.rv-zoomed .rv-stage{position:relative;background:#000;height:clamp(340px,70vh,900px);max-height:82vh;overflow:hidden}
.rv-gallery.rv-zoomed .rv-prev, .rv-gallery.rv-zoomed .rv-next, .rv-gallery.rv-zoomed .rv-counter, .rv-gallery.rv-zoomed .rv-full{z-index:10000}
html.rv-no-scroll, body.rv-no-scroll{overflow:hidden}

/* Ensure UI controls are above click-zones */
.rv-prev,.rv-next,.rv-full{z-index:10; pointer-events:auto}
.rv-hit{z-index:5}

@media (max-width: 1024px){
  .rv-stage{height:clamp(320px,66vh,820px);max-height:78vh}
}
@media (max-width: 640px){
  .rv-stage{height:clamp(280px,62vh,740px);max-height:76vh}
}
/* Larger tap targets on phones */
@media (max-width: 640px){
  .rv-prev,.rv-next{width:44px;height:44px;font-size:20px}
  .rv-full{width:40px;height:40px;font-size:18px}
}

/* Improved overlay sizing for mobile (dynamic viewport units) */
.rv-gallery.rv-zoomed{background:#000}
.rv-gallery.rv-zoomed .rv-stage{
  position:fixed;
  inset:0;
  height:100dvh;
  max-height:100dvh;
  background:#000;
  z-index:9999;
}
@supports not (height: 100dvh){
  .rv-gallery.rv-zoomed .rv-stage{height:100vh;max-height:100vh}
}

/* Mobile fix: in CONTAIN mode, let image define height so no black band */
@media (max-width: 640px){
  .rv-fit-contain .rv-stage{height:auto;max-height:none;background:transparent}
  .rv-fit-contain .rv-main{width:100%;height:auto;object-fit:contain}
}

/* === Mobile universal fix (<=640px): no fixed height, no black band === */
@media (max-width: 640px){
  .rv-gallery .rv-stage{height:auto !important; max-height:none !important; background:transparent !important}
  .rv-gallery .rv-main{width:100% !important; height:auto !important; object-fit:contain !important}
  /* keep controls visible */
  .rv-gallery .rv-prev,.rv-gallery .rv-next{top:50%; transform:translateY(-50%)}
}

/* Click layer ordering (ensure interactivity) */
.rv-stage{position:relative}
.rv-hit{position:absolute; top:0; bottom:0; width:40%; z-index:8; cursor:pointer; background:transparent}
.rv-prev,.rv-next,.rv-full{z-index:12; pointer-events:auto}
/* On mobile, let clicks go through the photo to the stage/hit-zones */
@media (max-width: 640px){
  .rv-main{pointer-events:none}
}

/* === Tablet fix (641px–1024px): In CONTAIN mode, auto height to avoid black band === */
@media (min-width: 641px) and (max-width: 1024px){
  .rv-fit-contain .rv-stage{height:auto !important; max-height:none !important; background:transparent !important}
  .rv-fit-contain .rv-main{width:100% !important; height:auto !important; object-fit:contain !important}
}

/* Make viewer/stage transparent outside of zoom to avoid visible black bands */
.rv-viewer{background:transparent}
.rv-stage{background:transparent}
/* Keep black only in zoom (overlay/fullscreen) */
.rv-gallery.rv-zoomed .rv-stage{background:#000}

/* Small screens & tablet: let content decide height to avoid gaps across rotations */
@media (max-width:1024px){
  .rv-gallery .rv-stage{height:auto !important; max-height:none !important}
  .rv-gallery .rv-main{width:100% !important; height:auto !important; object-fit:contain !important}
}

/* Defensive layering */
.rv-stage{position:relative}
.rv-hit{position:absolute; top:0; bottom:0; width:40%; z-index:8}
.rv-prev,.rv-next,.rv-full{z-index:12; pointer-events:auto}