/* Native catalogue gallery. This file owns its desktop, phone and rotation layout. */
.riko-catalog__lightbox { position:fixed; inset:0; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; color:var(--riko-on-brand); background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--riko-brand) 22%,var(--riko-brand-deep)),var(--riko-brand-deep) 75%); overscroll-behavior:contain }
.riko-catalog__lightbox[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto }
.riko-catalog__lightbox::backdrop { background:var(--riko-brand-deep) }
.riko-catalog__lightbox [hidden] { display:none!important }
.riko-catalog__lightbox-bar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:76px; padding:12px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left)); border-bottom:1px solid color-mix(in srgb,var(--riko-on-brand) 12%,transparent) }
.riko-catalog__lightbox-identity { min-width:0; display:grid; gap:4px }
.riko-catalog__lightbox-kicker { color:var(--riko-on-brand-muted); font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase }
.riko-catalog__lightbox-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--riko-on-brand); font-size:15px; font-weight:600; line-height:1.4 }
.riko-catalog__lightbox-actions { display:flex; align-items:center; gap:16px; flex-shrink:0 }
.riko-catalog__lightbox-position { padding:7px 12px; border:1px solid color-mix(in srgb,var(--riko-on-brand) 18%,transparent); border-radius:24px; color:var(--riko-on-brand-muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap }
.riko-catalog__lightbox button { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; padding:0; border:1px solid color-mix(in srgb,var(--riko-on-brand) 28%,transparent); border-radius:50%!important; color:var(--riko-on-brand); background:color-mix(in srgb,var(--riko-brand-deep) 88%,transparent); cursor:pointer; transition:background-color .16s ease,border-color .16s ease,transform .16s ease }
.riko-catalog__lightbox button:hover { border-color:var(--riko-on-brand); background:color-mix(in srgb,var(--riko-on-brand) 14%,var(--riko-brand-deep)) }
.riko-catalog__lightbox button:active { transform:scale(.94) }
.riko-catalog__lightbox :is(button,a):focus-visible { outline:3px solid var(--riko-focus-on-brand); outline-offset:3px }
.riko-catalog__lightbox button > svg { width:20px; height:20px }
.riko-catalog__lightbox-stage { position:relative; display:flex; min-width:0; min-height:0; width:100%; padding:18px 84px; align-items:center; justify-content:center }
.riko-catalog__lightbox-stage > img { display:block; min-width:0; min-height:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none }
.riko-catalog__lightbox-stage > button { position:absolute; z-index:1; top:calc(50% - 24px) }
.riko-catalog__image-prev { left:max(20px,env(safe-area-inset-left)) }
.riko-catalog__image-next { right:max(20px,env(safe-area-inset-right)) }
.riko-catalog__lightbox-footer { display:grid; gap:6px; min-width:0; max-height:25dvh; overflow:auto; padding:16px max(84px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(84px,env(safe-area-inset-left)); text-align:center }
.riko-catalog__lightbox-footer:not(:has([data-catalog-image-caption]:not([hidden]),[data-catalog-image-credit]:not([hidden]))) { display:none }
.riko-catalog__lightbox .riko-catalog__lightbox-caption { margin:0!important; color:var(--riko-on-brand)!important; font-size:14px; font-weight:500; line-height:1.55; overflow-wrap:anywhere }
.riko-catalog__lightbox [data-catalog-image-credit] { color:var(--riko-on-brand-muted)!important; font-size:11px; font-weight:400 }
.riko-catalog__lightbox-hint { display:none; margin:4px 0 0; color:var(--riko-on-brand-muted); font-size:10px; line-height:1.5 }
.riko-catalog__lightbox-status { position:absolute; z-index:1; display:grid; justify-items:center; gap:14px; max-width:calc(100% - 128px); padding:24px; border:1px solid color-mix(in srgb,var(--riko-on-brand) 18%,transparent); border-radius:12px; background:var(--riko-brand-deep); color:var(--riko-on-brand); text-align:center }
.riko-catalog__lightbox-status > p { margin:0; font-size:14px; line-height:1.5 }
.riko-catalog__lightbox-status-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px }
.riko-catalog__lightbox .riko-catalog__lightbox-retry { width:auto; min-height:44px; height:auto; padding:10px 18px; border-radius:24px!important; font:inherit; font-size:13px }
.riko-catalog__lightbox-status a { display:inline-flex; min-height:44px; align-items:center; color:var(--riko-on-brand); font-size:13px; text-decoration:underline; text-underline-offset:3px }
.riko-catalog__lightbox[data-gallery-state="loading"] .riko-catalog__lightbox-status::before { content:""; width:24px; height:24px; border:2px solid color-mix(in srgb,var(--riko-on-brand) 22%,transparent); border-top-color:var(--riko-on-brand); border-radius:50%; animation:riko-gallery-spin .8s linear infinite }
.riko-catalog__lightbox[data-gallery-state="ready"] .riko-catalog__lightbox-stage > img { animation:riko-gallery-reveal .18s ease-out }
@keyframes riko-gallery-spin { to { transform:rotate(360deg) } }
@keyframes riko-gallery-reveal { from { opacity:0 } to { opacity:1 } }
@media (hover:hover) and (min-width:761px) { .riko-catalog__lightbox-hint { display:block } }
@media (max-width:760px) {
  .riko-catalog__lightbox-bar { min-height:72px; gap:10px; padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)) }
  .riko-catalog__lightbox-title { max-width:52vw; font-size:13px }
  .riko-catalog__lightbox-kicker { font-size:9px; letter-spacing:.08em }
  .riko-catalog__lightbox-actions { gap:10px }
  .riko-catalog__lightbox-position { padding:0; border:0; font-size:10px }
  .riko-catalog__lightbox button { width:44px; height:44px; flex-basis:44px }
  .riko-catalog__lightbox-stage { padding:8px 6px }
  .riko-catalog__lightbox-stage > button { top:auto; bottom:12px }
  .riko-catalog__image-prev { left:max(14px,env(safe-area-inset-left)) }
  .riko-catalog__image-next { right:max(14px,env(safe-area-inset-right)) }
  .riko-catalog__lightbox-footer { padding:12px 20px max(18px,env(safe-area-inset-bottom)); gap:6px }
  .riko-catalog__lightbox .riko-catalog__lightbox-caption { font-size:13px }
  .riko-catalog__lightbox-status { max-width:calc(100% - 48px); padding:20px }
}
/* Full-height stage survives rotation while the same native dialog stays open. */
@media screen and (orientation:landscape) and (max-height:600px) {
  .riko-catalog__lightbox[open] { grid-template-rows:64px minmax(0,1fr) auto }
  .riko-catalog__lightbox-stage { grid-column:1; grid-row:1 / -1; height:100%; padding:0 }
  .riko-catalog__lightbox-bar { grid-column:1; grid-row:1; min-height:0; border:0; padding-top:env(safe-area-inset-top); background:linear-gradient(180deg,color-mix(in srgb,var(--riko-brand-deep) 94%,transparent),color-mix(in srgb,var(--riko-brand-deep) 86%,transparent)) }
  .riko-catalog__lightbox-stage > button { top:calc(50% - 24px); bottom:auto }
  .riko-catalog__lightbox-footer { grid-column:1; grid-row:3; z-index:1; max-height:25dvh; padding:7px 76px max(7px,env(safe-area-inset-bottom)); gap:2px; background:linear-gradient(0deg,color-mix(in srgb,var(--riko-brand-deep) 95%,transparent),color-mix(in srgb,var(--riko-brand-deep) 82%,transparent)) }
  .riko-catalog__lightbox .riko-catalog__lightbox-caption { font-size:11px }
  .riko-catalog__lightbox-hint { display:none }
}
@media (prefers-reduced-motion:reduce) { .riko-catalog__lightbox *, .riko-catalog__lightbox ::before { animation:none!important; transition:none!important } }
@media (forced-colors:active) {
  .riko-catalog__lightbox, .riko-catalog__lightbox-bar, .riko-catalog__lightbox-footer, .riko-catalog__lightbox-status { background:Canvas; color:CanvasText }
  .riko-catalog__lightbox button { background:ButtonFace; color:ButtonText; border-color:ButtonText }
  .riko-catalog__lightbox :is(button,a):focus-visible { outline-color:Highlight }
}