/* Rivo Jewellery Showcase Gallery v2.1 — dark stage */
.rjg, .rjg *{box-sizing:border-box}

.rjg{
    --rjg-ink:#EDE6DA;
    --rjg-accent:#C9A86A;
    --rjg-surface:transparent;
    --rjg-frame:#FFFFFF;
    --rjg-ratio:1/1;
    --rjg-ratio-n:1;
    --rjg-fit:cover;
    --rjg-cols:3;
    --rjg-h:min(72vh, 680px);          /* stage height cap */
    --rjg-rail:84px;
    --rjg-muted:color-mix(in srgb, var(--rjg-ink) 55%, transparent);
    --rjg-line:color-mix(in srgb, var(--rjg-ink) 16%, transparent);
    --rjg-ease:cubic-bezier(.22,.61,.36,1);
    position:relative;
    width:100%;
    color:var(--rjg-ink);
    background:var(--rjg-surface);
    font-family:var(--rjg-text, inherit);
}
.rjg--has-surface{padding:clamp(20px,4vw,64px)}
.rjg--brand-fonts{
    --rjg-display:'Marcellus', 'Times New Roman', Georgia, serif;
    --rjg-text:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* neutralise theme button / img styles */
.rjg button{
    appearance:none;-webkit-appearance:none;
    font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;
    background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;
    cursor:pointer;line-height:1.2;min-height:0;
}
.rjg button:focus-visible, .rjg a:focus-visible{outline:2px solid var(--rjg-accent);outline-offset:3px}
.rjg img{max-width:none;height:auto;border:0;border-radius:0;box-shadow:none}

/* ---------- showcase: rail | stage */
.rjg-body{
    display:flex;justify-content:center;align-items:flex-start;
    gap:clamp(16px,2vw,28px);
}
.rjg-stage{
    position:relative;min-width:0;
    width:min(100% - (var(--rjg-rail) + 28px), calc(var(--rjg-h) * var(--rjg-ratio-n)));
}
.rjg:not(.rjg--has-rail) .rjg-stage{width:min(100%, calc(var(--rjg-h) * var(--rjg-ratio-n)))}

.rjg-frame{
    position:relative;margin:0;
    width:100%;aspect-ratio:var(--rjg-ratio);
    background:var(--rjg-frame);
    overflow:hidden;
    touch-action:pan-y;user-select:none;
}
.rjg-frame .rjg-main{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    max-width:none !important;max-height:none !important;
    margin:0 !important;padding:0 !important;
    display:block !important;
    object-fit:var(--rjg-fit) !important;object-position:center !important;
    opacity:1;transform:scale(1);
    transition:opacity .45s var(--rjg-ease), transform .9s var(--rjg-ease);
}
.rjg-frame.is-changing .rjg-main{opacity:0;transform:scale(1.015)}

/* vertical thumbnail rail */
.rjg-strip{
    flex:0 0 var(--rjg-rail);
    display:flex;flex-direction:column;gap:10px;
    max-height:var(--rjg-h); /* JS syncs this to the real frame height */
    overflow-y:auto;overflow-x:hidden;
    scroll-behavior:smooth;scrollbar-width:none;
    padding-left:6px;
}
.rjg-strip::-webkit-scrollbar{display:none}
.rjg .rjg-thumb{
    flex:none;width:100%;
    aspect-ratio:var(--rjg-ratio);
    position:relative;overflow:visible;
    background:var(--rjg-frame);
    opacity:.38;transition:opacity .3s ease;
}
.rjg .rjg-thumb::before{
    content:"";position:absolute;left:-6px;top:0;bottom:0;width:2px;
    background:var(--rjg-accent);transform:scaleY(0);transition:transform .35s var(--rjg-ease);
}
.rjg .rjg-thumb:hover{opacity:.75}
.rjg .rjg-thumb.is-active{opacity:1}
.rjg .rjg-thumb.is-active::before{transform:scaleY(1)}
.rjg .rjg-thumb img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:var(--rjg-fit)}

/* loupe */
.rjg-loupe{
    --size:190px;
    position:absolute;left:0;top:0;z-index:3;
    width:var(--size);height:var(--size);
    margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    border-radius:50%;
    background-color:var(--rjg-frame);background-repeat:no-repeat;
    box-shadow:0 0 0 1px var(--rjg-accent), 0 20px 44px rgba(0,0,0,.35);
    pointer-events:none;opacity:0;transform:scale(.85);
    transition:opacity .2s ease, transform .25s var(--rjg-ease);
}
.rjg-frame.is-zooming .rjg-loupe{opacity:1;transform:scale(1)}
.rjg-frame.is-zooming{cursor:none}
.rjg-frame.is-zooming .rjg-expand{opacity:0}

/* buttons */
.rjg .rjg-btn{
    width:44px;height:44px;
    display:inline-grid;place-items:center;
    color:var(--rjg-ink);
    transition:background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rjg .rjg-expand{
    position:absolute;top:10px;right:10px;z-index:4;
    width:40px;height:40px;
    background:rgba(255,255,255,.85);color:#1a1a1a;
}
.rjg .rjg-expand:hover{background:#1a1a1a;color:#fff}

/* caption bar under the image */
.rjg-caption{
    display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
    padding-top:20px;
}
.rjg-info{min-width:0;flex:1}
.rjg-info > *{transition:opacity .35s ease, transform .45s var(--rjg-ease)}
.rjg-info.is-changing > *{opacity:0;transform:translateY(4px)}
.rjg .rjg-collection{margin:0 0 6px;font-size:13px;letter-spacing:.06em;color:var(--rjg-accent)}
.rjg .rjg-title{
    margin:0;padding:0;
    font-family:var(--rjg-display, inherit);font-weight:400;
    font-size:clamp(22px,2.2vw,30px);line-height:1.15;
    color:var(--rjg-ink);text-transform:none;letter-spacing:0;
}
.rjg .rjg-spec{margin:6px 0 0;font-size:14px;color:var(--rjg-muted)}
.rjg .rjg-desc{margin:14px 0 0;font-size:15px;line-height:1.7;font-weight:300;color:var(--rjg-muted);max-width:56ch}
.rjg .rjg-collection:empty, .rjg .rjg-title:empty, .rjg .rjg-spec:empty, .rjg .rjg-desc:empty{display:none}
.rjg .rjg-cta, .rjg .rjg-lb-cta{
    display:inline-flex;align-items:center;margin-top:18px;
    padding:13px 24px;
    font-size:14px;font-weight:500;letter-spacing:.03em;text-decoration:none;
    color:var(--rjg-ink);border:1px solid var(--rjg-accent);
    transition:background-color .25s ease, color .25s ease;
}
.rjg .rjg-cta:hover{background:var(--rjg-accent);color:#111}
.rjg .rjg-cta[hidden], .rjg .rjg-lb-cta[hidden]{display:none}

.rjg-controls{display:flex;align-items:center;gap:20px;flex:none}
.rjg-count{margin:0;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.rjg-count-cur{font-family:var(--rjg-display, inherit);font-size:24px;line-height:1;color:var(--rjg-ink)}
.rjg-count-total{font-size:13px;color:var(--rjg-muted)}
.rjg-nav{display:flex}
.rjg-nav .rjg-btn{border:1px solid var(--rjg-line)}
.rjg-nav .rjg-btn + .rjg-btn{border-left:0}
.rjg-nav .rjg-btn:hover{border-color:var(--rjg-accent);background:var(--rjg-accent);color:#111}

/* image-only gallery: count left, arrows right */
.rjg--no-text .rjg-info{display:none}
.rjg--no-text .rjg-controls{width:100%;justify-content:space-between}

.rjg-progress{margin-top:18px;height:1px;background:var(--rjg-line);overflow:hidden}
.rjg-progress span{display:block;height:100%;background:var(--rjg-accent);transform-origin:left;transform:scaleX(0)}

/* ---------- grid */
.rjg-cards{
    display:grid;
    grid-template-columns:repeat(var(--rjg-cols),minmax(0,1fr));
    gap:clamp(28px,3vw,48px) clamp(14px,1.6vw,24px);
}
.rjg .rjg-card{display:block;text-align:left;width:100%}
.rjg-card-media{display:block;position:relative;overflow:hidden;aspect-ratio:var(--rjg-ratio);background:var(--rjg-frame)}
.rjg-card-media img{
    position:absolute;inset:0;width:100% !important;height:100% !important;
    object-fit:var(--rjg-fit);transition:transform 1.1s var(--rjg-ease);
}
.rjg .rjg-card:hover .rjg-card-media img{transform:scale(1.045)}
.rjg-card-text{display:block;padding-top:14px}
.rjg-card-title{display:block;font-family:var(--rjg-display, inherit);font-size:19px;line-height:1.25}
.rjg-card-spec{display:block;margin-top:5px;font-size:14px;color:var(--rjg-muted)}

/* ---------- lightbox */
.rjg-lightbox{
    position:fixed;inset:0;z-index:999999;
    display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;
    padding:56px 16px 24px;
    background:rgba(8,8,8,.97);
    color:#fff;
    opacity:0;transition:opacity .3s ease;
}
.rjg-lightbox[hidden]{display:none}
.rjg-lightbox.is-open{opacity:1}
.rjg-lightbox .rjg-btn{background:transparent;color:#fff}
.rjg-lightbox .rjg-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.rjg .rjg-lb-close{position:absolute;top:8px;right:8px}
.rjg .rjg-lb-prev, .rjg .rjg-lb-next{justify-self:center}
.rjg-lb-figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-width:0}
.rjg .rjg-lb-img{
    max-width:100% !important;max-height:calc(100vh - 180px) !important;width:auto !important;height:auto !important;
    object-fit:contain;background:var(--rjg-frame);transition:opacity .3s ease;
}
.rjg-lightbox.is-changing .rjg-lb-img{opacity:0}
.rjg-lb-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;text-align:center}
.rjg-lb-title{font-family:var(--rjg-display, inherit);font-size:22px}
.rjg-lb-spec{font-size:14px;color:rgba(255,255,255,.6)}
.rjg-lb-title:empty, .rjg-lb-spec:empty{display:none}
.rjg .rjg-lb-cta{margin-top:0;color:#fff;padding:10px 20px}
.rjg .rjg-lb-cta:hover{background:var(--rjg-accent);color:#111}
html.rjg-lock, html.rjg-lock body{overflow:hidden}

/* ---------- responsive */
@media (max-width:1024px){
    .rjg-cards{grid-template-columns:repeat(var(--rjg-cols-md,3),minmax(0,1fr))}
}
@media (max-width:767px){
    .rjg{--rjg-h:none}
    .rjg-body{flex-direction:column-reverse;align-items:stretch;gap:12px}
    .rjg-stage, .rjg:not(.rjg--has-rail) .rjg-stage{width:100%}
    .rjg-strip{
        flex:none;flex-direction:row;max-height:none;
        overflow-x:auto;overflow-y:hidden;padding:0 0 6px;
    }
    .rjg .rjg-thumb{width:64px}
    .rjg .rjg-thumb::before{left:0;right:0;top:auto;bottom:-6px;width:auto;height:2px;transform:scaleX(0)}
    .rjg .rjg-thumb.is-active::before{transform:scaleX(1)}
    .rjg-caption{flex-direction:column;gap:16px;padding-top:16px}
    .rjg-controls{width:100%;justify-content:space-between}
    .rjg-cards{grid-template-columns:repeat(var(--rjg-cols-sm,2),minmax(0,1fr))}
    .rjg-lightbox{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;padding:56px 12px 12px}
    .rjg-lb-figure{grid-column:1 / -1;grid-row:1}
    .rjg .rjg-lb-prev{grid-row:2;grid-column:1;justify-self:start}
    .rjg .rjg-lb-next{grid-row:2;grid-column:2;justify-self:end}
}
@media (max-width:420px){
    .rjg-cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
    .rjg *, .rjg *::before{transition-duration:.01ms !important}
    .rjg-progress{display:none}
}