/* ===== PVL Export — Full Catalog Flipbook ===== */

.catalog-body{
  min-height:100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(176,141,87,.06), transparent 60%),
    var(--bg-deep);
  overflow-x:hidden;
}

/* ---------- Top bar ---------- */
.cat-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(14px,4vw,40px);
  border-bottom:1px solid var(--border);
  background:rgba(16,18,21,.6);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:30;
}
.cat-back{
  display:flex;align-items:center;gap:6px;
  color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;
  transition:color .2s;
}
.cat-back:hover{color:var(--silver-hi)}
.cat-title{display:flex;align-items:center;gap:10px;font-family:var(--font-latin)}
.cat-logo{width:28px;height:28px;border-radius:6px}
.cat-title span{font-weight:700;font-size:.85rem;letter-spacing:.16em;color:var(--silver-hi)}
.cat-title-sub{color:var(--gold);font-weight:600;letter-spacing:.2em;font-size:.7rem;margin-inline-start:6px}
.cat-count{
  font-family:var(--font-latin);font-size:.82rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:6px 14px;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate;
}
.cat-count #pageNow{color:var(--silver-hi);font-weight:700}

/* ---------- Book area ---------- */
.book-wrap{
  position:relative;flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px) clamp(8px,3vw,24px) 10px;
  min-height:0;
}
.book{
  position:relative;
  width:min(88vw, 420px);
  aspect-ratio:1100/1555;
  perspective:2400px;
  border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.book-shadow-under{
  position:absolute;inset:6px -6px -10px 6px;
  background:rgba(0,0,0,.4);filter:blur(14px);border-radius:10px;z-index:0;
}
.page{
  position:absolute;inset:0;
  border-radius:10px;overflow:hidden;
  backface-visibility:hidden;
  background:#e9e6df;
}
.page img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.page-top{
  z-index:2;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  will-change:transform;
}
.page-top.flip-active::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.5), transparent 35%, transparent 65%, rgba(0,0,0,.5));
  animation:flipShadow .68s ease;
  pointer-events:none;
}
@keyframes flipShadow{
  0%{opacity:0}
  45%{opacity:.55}
  100%{opacity:0}
}
.page-bottom{z-index:1}

/* invisible tap zones over the book, left/right halves */
.book-tap{
  position:absolute;top:0;bottom:0;width:50%;z-index:15;
  background:none;border:0;cursor:pointer;
}
.book-tap.prev{left:0}
.book-tap.next{right:0}

.arrow-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:46px;height:46px;border-radius:50%;
  background:rgba(31,34,39,.85);color:var(--silver-hi);
  border:1px solid var(--border);cursor:pointer;font-size:1.05rem;
  backdrop-filter:blur(6px);transition:all .25s;
  display:flex;align-items:center;justify-content:center;
}
.arrow-btn:hover{background:var(--surface-2);border-color:var(--silver-lo)}
.arrow-btn:disabled{opacity:.25;cursor:default}
.arrow-btn.prev{left:clamp(4px,2vw,24px)}
.arrow-btn.next{right:clamp(4px,2vw,24px)}
html[dir="rtl"] .arrow-btn.prev{left:auto;right:clamp(4px,2vw,24px)}
html[dir="rtl"] .arrow-btn.next{right:auto;left:clamp(4px,2vw,24px)}

.cat-hint{
  text-align:center;font-size:.76rem;color:var(--silver-lo);
  padding:2px 16px 14px;opacity:.85;
}

/* ---------- Thumbnails ---------- */
.thumbs{
  display:flex;gap:8px;overflow-x:auto;
  padding:6px clamp(14px,4vw,40px) 18px;
  scrollbar-width:thin;
}
.thumbs button{
  flex:0 0 auto;width:40px;aspect-ratio:1100/1555;
  border-radius:5px;overflow:hidden;border:2px solid transparent;
  padding:0;cursor:pointer;background:#e9e6df;opacity:.55;
  transition:all .25s;
}
.thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs button.active{border-color:var(--gold);opacity:1;transform:translateY(-2px)}
.thumbs button:hover{opacity:1}

/* ---------- Floating WhatsApp CTA ---------- */
.cat-wa{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  background:var(--metal-grad);color:#15171a;
  padding:12px 22px;border-radius:999px;
  font-weight:700;font-size:.9rem;text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:40;
  white-space:nowrap;
}

@media (max-width:560px){
  .cat-title span:not(.cat-title-sub){display:none}
  .cat-back span{display:none}
  .arrow-btn{display:none}
  .cat-wa span{display:none}
  .cat-wa{padding:14px;bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  .page-top{transition:opacity .3s !important;transform:none !important}
  .page-top.flip-active::after{animation:none}
}