.pp-case-card--reader .pp-case-media {
  height: 410px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(216,174,87,.14), transparent 48%),
    linear-gradient(145deg, #101c2b, #07111f);
}

.pp-case-card--reader .pp-case-media img {
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.48));
}

.pp-reader-button {
  cursor: pointer;
  font: inherit;
}

.pmr {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(216,174,87,.1), transparent 34%),
    #050b13;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.pmr.is-open { opacity: 1; visibility: visible; }

.pmr__top,
.pmr__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px clamp(16px,3vw,34px);
  border-color: rgba(216,174,87,.18);
  background: rgba(7,17,31,.96);
  backdrop-filter: blur(18px);
}

.pmr__top { border-bottom: 1px solid rgba(216,174,87,.18); }
.pmr__bottom { border-top: 1px solid rgba(216,174,87,.18); }

.pmr__heading { min-width: 0; }
.pmr__eyebrow { display:block; color:#d8ae57; font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.pmr__title { overflow:hidden; margin:3px 0 0; color:#fff; font-family:"Cormorant Garamond",serif; font-size:clamp(22px,2.4vw,34px); line-height:1; text-overflow:ellipsis; white-space:nowrap; }

.pmr__close,
.pmr__nav,
.pmr__tool {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  min-height:46px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:rgba(255,255,255,.035);
  color:#fff;
  cursor:pointer;
  font:800 13px Inter,sans-serif;
  text-decoration:none;
  transition:.24s ease;
}

.pmr__close { font-size:25px; }
.pmr__close:hover,.pmr__nav:hover,.pmr__tool:hover { border-color:#d8ae57; background:rgba(216,174,87,.12); color:#e8c878; transform:translateY(-1px); }
.pmr__nav:disabled { opacity:.25; cursor:default; transform:none; }

.pmr__stage {
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  align-items:center;
  min-height:0;
  padding:18px;
  overflow:hidden;
}

.pmr__pages { display:flex; align-items:center; justify-content:center; gap:2px; width:100%; height:100%; min-height:0; perspective:1500px; perspective-origin:50% 45%; }
/* aspect-ratio reserves the page box before the image arrives, so opening the
   reader and turning pages never shifts the layout. 2115x2990 = source page size. */
.pmr__page { display:block; width:auto; max-width:49%; height:auto; max-height:100%; aspect-ratio:2115/2990; object-fit:contain; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.55); transition:transform .22s ease,opacity .22s ease; }
.pmr__page[hidden] { display:none; }
.pmr__pages.is-turning-next .pmr__page { transform:rotateY(-4deg) translateX(-5px); opacity:.72; }
.pmr__pages.is-turning-prev .pmr__page { transform:rotateY(4deg) translateX(5px); opacity:.72; }

.pmr__status { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); padding:12px 17px; border:1px solid rgba(216,174,87,.22); border-radius:7px; background:rgba(7,17,31,.94); color:#dfe5ea; font-size:12px; font-weight:800; }
.pmr__status a { color:#e8c878; }
.pmr__pageinfo { min-width:150px; color:#cdd6df; font-size:12px; font-weight:700; }
.pmr__tools { display:flex; gap:9px; }
.pmr__tool { gap:7px; padding:0 15px; }
body.pmr-open { overflow:hidden; }

@media(max-width:760px){
  .pp-case-card--reader .pp-case-media { height:340px; }
  .pmr__top,.pmr__bottom { padding:9px 11px; }
  .pmr__title { font-size:18px; }
  .pmr__stage { grid-template-columns:44px minmax(0,1fr) 44px; padding:7px 3px; }
  .pmr__page { max-width:100%; max-height:100%; }
  .pmr__pageinfo { min-width:92px; font-size:10px; }
  .pmr__tool { min-width:42px; padding:0 10px; font-size:12px; }
  .pmr__tool-label { display:none; }
}

@media(prefers-reduced-motion:reduce){.pmr,.pmr__page{transition:none}}

/* ---- StPageFlip book (realistic corner page-flip; StPageFlip owns the 3D) --- */
.pmr__pages { position: relative; perspective: none; }
.pmr__book { width: 100%; height: 100%; margin: 0 auto; }
.pmr__book .stf__parent { margin: 0 auto; touch-action: none; }
/* Real magazine pages are opaque images, so page blocks need no fill; keeping them
   transparent hides the empty "inside cover" that would otherwise show as white. */
.pmr__book .stf__item { background: transparent; }
.pmr__book img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.pmr__book canvas.stf__canvas { display: block; margin: 0 auto; }

/* ---- Foutstatus (loader hangt nooit; altijd een uitweg) ------------------- */
.pmr__error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; height: 100%; padding: 24px; text-align: center; }
.pmr__error-msg { margin: 0; max-width: 440px; color: #dfe5ea; font-size: 15px; line-height: 1.55; font-weight: 700; }
.pmr__error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pmr__error-actions .btn { min-height: 44px; }

/* ---- Eenvoudige weergave (lazy swipe/scroll; robuuste fallback) ----------- */
.pmr__simple { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; }
.pmr__simple::-webkit-scrollbar { display: none; }
.pmr__simple:focus-visible { outline: 2px solid var(--pp-gold, #e8c878); outline-offset: -3px; }
.pmr__spage { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 4px; }
.pmr__spage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); border-radius: 2px; -webkit-user-drag: none; user-select: none; }
.pmr__spage-fail { max-width: 320px; color: #dfe5ea; font-size: 14px; line-height: 1.5; font-weight: 600; text-align: center; }
.pmr__spage-fail a { color: #e8c878; }