/* Digital catalogue viewer */
html, body { height: 100%; }
body.cat { overflow: hidden; display: block; background: #060606; }
:root { --bar: 62px; }
.cat-bar { height: var(--bar); display: flex; align-items: center; gap: 14px; padding: 0 clamp(10px, 2vw, 22px); background: rgba(11, 11, 11, .97); border-bottom: 1px solid var(--rn-line); position: relative; z-index: 20; }
.cat-bar .brand img { height: 42px; width: auto; }
.cat-bar .ttl { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--rn-antique-gold); font-size: .85rem; display: none; }
.cat-bar .count { font-family: var(--font-tag); letter-spacing: .14em; color: var(--rn-champagne); font-size: .9rem; margin-left: auto; white-space: nowrap; }
.cat-bar .tools { display: flex; gap: 8px; align-items: center; }
.ib { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rn-line); border-radius: 3px; color: var(--rn-frame-gold); transition: .2s; position: relative; }
.ib:hover { background: rgba(180, 144, 96, .15); color: var(--rn-champagne); }
.ib svg { width: 22px; height: 22px; }
.ib[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: 48px; right: 0; white-space: nowrap; background: #000; border: 1px solid var(--rn-line); padding: 4px 10px; font-family: var(--font-tag); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rn-champagne); z-index: 30; pointer-events: none; }
.cat-body { height: calc(100vh - var(--bar)); height: calc(100dvh - var(--bar)); display: flex; position: relative; }

.cat-rail { width: 290px; flex: none; background: #0c0c0d; border-right: 1px solid var(--rn-line-soft); display: flex; flex-direction: column; z-index: 15; }
.cat-rail .rh { padding: 14px; border-bottom: 1px solid var(--rn-line-soft); display: flex; gap: 8px; align-items: center; }
.cat-rail .rh .input { padding: 9px 12px; }
.cat-rail .rx { display: none; }
.cat-rail ol { list-style: none; overflow-y: auto; flex: 1; padding: 8px; }
.cat-rail li button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: none; border: 1px solid transparent; padding: 7px; border-radius: 3px; transition: .15s; }
.cat-rail li button:hover { background: rgba(180, 144, 96, .08); }
.cat-rail li.on button { border-color: var(--rn-frame-gold); background: rgba(180, 144, 96, .12); }
.cat-rail li img { width: 66px; height: 50px; object-fit: cover; border: 1px solid var(--rn-frame-gold); flex: none; background: #000; }
.cat-rail li b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rn-champagne); line-height: 1.2; }
.cat-rail li span { font-size: .84rem; color: var(--rn-muted); }
.cat-rail li .num { font-family: var(--font-tag); color: var(--rn-antique-gold); font-size: .72rem; width: 20px; flex: none; text-align: right; }

.cat-scroll { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; background: radial-gradient(900px 600px at 50% 30%, #17120d, #060606 70%); }
.cat-page { min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px 10px; }
.cat-page .sw { width: min(100%, calc((100vh - var(--bar) - 92px) * 1084 / 1600)); width: min(100%, calc((100dvh - var(--bar) - 92px) * 1084 / 1600)); aspect-ratio: 1084 / 1600; background: #111; box-shadow: 0 20px 70px rgba(0, 0, 0, .8), 0 0 0 1px rgba(180, 144, 96, .35); position: relative; }
.cat-page .sw .skel { position: absolute; inset: 0; background: linear-gradient(110deg, #141416 30%, #1e1f22 50%, #141416 70%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
.cat-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; width: min(100%, 560px); min-height: 42px; }
.cat-actions .btn { padding: 9px 16px; font-size: .76rem; }

.cat-fab { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 12; }
.cat-fab .ib { background: rgba(11, 11, 11, .85); width: 48px; height: 48px; }
.hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(11, 11, 11, .9); border: 1px solid var(--rn-line); padding: 7px 16px; font-family: var(--font-tag); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--rn-champagne); z-index: 12; transition: opacity .6s; pointer-events: none; white-space: nowrap; }

@media (min-width: 1000px) { .cat-bar .ttl { display: block; } #b-index { display: none; } }
@media (max-width: 999px) {
  .cat-rail { position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 360px); transform: translateX(-102%); transition: transform .3s ease; box-shadow: 20px 0 60px rgba(0, 0, 0, .7); }
  .cat-rail.open { transform: none; }
  .cat-rail .rx { display: inline-flex; }
  .cat-fab { right: 8px; } .cat-fab .ib { width: 40px; height: 40px; }
  .hint { display: none; }
}
@media (max-width: 560px) { .cat-bar .brand img { height: 36px; } .cat-bar .tools .ib { width: 38px; height: 38px; } .cat-bar .tools { gap: 6px; } .cat-page { padding: 8px 4px; } .cat-fab { display: none; } }

/* ---------- print / PDF ---------- */
@page { size: 210mm 310mm; margin: 0; }
@media print {
  html, body, body.cat { height: auto !important; overflow: visible !important; background: #000 !important; display: block !important; }
  .cat-bar, .cat-rail, .cat-fab, .cat-actions, .hint, .toast, .site-footer { display: none !important; }
  .cat-body { display: block; height: auto; }
  .cat-scroll { overflow: visible !important; height: auto !important; scroll-snap-type: none; background: #000; }
  .cat-page { min-height: 0; padding: 0; gap: 0; break-after: page; page-break-after: always; display: block; }
  .cat-page .sw { width: 210mm !important; height: 310mm; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.cat-rail .rh .input { flex: 1; min-width: 0; }
.cat-rail .rh #rb { width: 112px; max-width: 112px; flex: none; padding-left: 10px; }