/* VELORA-free R DESIGN price guide flipbook (custom implementation).
 *
 * Own code, no external library, no CDN — no third-party license obligations.
 * Layout model:
 *   PC / tablet (>=861px): a spread of two portrait pages side by side;
 *     spread 0 shows the cover alone, the last spread closes with the back page.
 *   Mobile (<=860px): a single portrait page, swipe / drag to turn.
 * Every surface reserves the exact page aspect-ratio box first, then the image
 * fades in — no layout shift, no horizontal overflow.
 */

/* ============ shell ============ */
.pg-book {
  --pg-page-w: 46vmin;
  --pg-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 0;
}

/* the dedicated viewer box: the book only ever scales INSIDE this area, so
 * the toolbar below can never be covered or pushed off-screen. */
.pg-book-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* the stage reserves exactly the page ratio; no layout shift while loading */
  touch-action: pan-y;
}

/* ============ the book ============ */
.pg-stage {
  position: relative;
  width: 100%;
  perspective: 2200px;
  perspective-origin: 50% 50%;
  display: flex;
  justify-content: center;
  flex: none;
}

.pg-book-body {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .22s ease;
  /* width/height are set from JS to keep the spine ratio exact */
  will-change: transform;
}

/* the two static slots: left page, right page (PC spread view) */
.pg-slot {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.pg-slot--l {
  left: 0;
  border-radius: var(--pg-radius) 0 0 var(--pg-radius);
  box-shadow: inset -14px 0 22px -14px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .55);
}
.pg-slot--r {
  right: 0;
  border-radius: 0 var(--pg-radius) var(--pg-radius) 0;
  box-shadow: inset 14px 0 22px -14px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .55);
}
.pg-slot--solo {
  left: auto;
  right: auto;
}

.pg-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.pg-slot img.pg-ready { opacity: 1; }

/* paper edges hint (the stacked pages under the cover) */
.pg-book-body::before,
.pg-book-body::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
  z-index: 0;
}
.pg-book-body::before { left: -6px; }
.pg-book-body::after { right: -6px; }

/* ============ the turning leaf ============ */
.pg-leaf {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 20;
  pointer-events: none;
}
.pg-leaf--back { transform-origin: right center; }
.pg-leaf-face {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: hidden;
  border-radius: 0 var(--pg-radius) var(--pg-radius) 0;
  backface-visibility: hidden;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .6);
}
.pg-leaf--back .pg-leaf-face {
  border-radius: var(--pg-radius) 0 0 var(--pg-radius);
  transform: rotateY(180deg);
}
.pg-leaf-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* flipping gradient: a soft shading sweeping over the paper while it turns */
.pg-leaf-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22));
  opacity: 0;
  transition: opacity .2s ease;
}
.pg-leaf.pg-flipping .pg-leaf-face::after { opacity: 1; }

/* ============ spine shadow on top slot ============ */
.pg-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 40px;
  transform: translateX(-50%);
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100%);
}

/* ============ hotspot hit areas (click / drag zones) ============ */
.pg-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 30;
}
.pg-hit--prev { left: 0; }
.pg-hit--next { right: 0; }

/* ============ toolbar ============ */
/* the bar lives OUTSIDE the overflow-clipped viewport in normal flow, so the
 * zoomed book can never cover, push or hide the paging/zoom/fullscreen
 * buttons. (Sticky positioning pulled the bar up over the book.) */
.pg-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(8, 9, 12, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 4px;
}
.pg-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.pg-btn:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .4); }
.pg-btn:active { transform: translateY(1px); }
.pg-btn[disabled] { opacity: .34; cursor: default; transform: none; }
.pg-btn:focus-visible,
.pg-hit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-btn svg { width: 18px; height: 18px; flex: none; }

.pg-counter {
  min-width: 96px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}
.pg-counter small { display: block; font-size: 11px; font-weight: 600; opacity: .6; letter-spacing: .1em; margin-top: 1px; }

.pg-slider-wrap { display: flex; align-items: center; }
.pg-slider {
  width: 130px;
  accent-color: #fff;
  min-height: 44px;
  cursor: pointer;
}

/* ============ status & error ============ */
.pg-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: linear-gradient(120deg, #eceff3 0%, #e2e6ec 50%, #eceff3 100%);
  background-size: 220% 220%;
  animation: pg-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--pg-radius);
}
.pg-loading b { font-size: 13px; color: #676d76; font-weight: 700; letter-spacing: .1em; }
@keyframes pg-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.pg-error {
  position: absolute;
  inset: 0;
  z-index: 41;
  display: grid;
  place-items: center;
  gap: 10px;
  grid-auto-flow: row;
  align-content: center;
  background: #111;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: var(--pg-radius);
}
.pg-error b { font-size: 15px; }
.pg-error span { font-size: 13px; opacity: .75; line-height: 1.7; }

/* ============ fullscreen ============ */
.pg-book.pg-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  padding: 18px;
  background: rgba(6, 6, 8, .97);
  justify-content: center;
  align-content: center;
  gap: 18px;
  overflow: auto;
}
.pg-book.pg-fullscreen .pg-stage { flex: 0 1 auto; }

/* ============ responsive ============ */
@media (max-width: 860px) {
  .pg-book-body { --pg-radius: 3px; }
  .pg-slot--l, .pg-slot--r { border-radius: var(--pg-radius); }
  .pg-slot--l { box-shadow: none; }
  .pg-spine { display: none; }
  .pg-leaf-face { border-radius: var(--pg-radius); }
  .pg-leaf--back .pg-leaf-face { border-radius: var(--pg-radius); }
  .pg-slider { display: none; }
  .pg-slider-wrap { display: none; }
  .pg-bar { gap: 10px; }
  .pg-btn { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-book-body, .pg-slot img, .pg-btn { transition: none; }
}

/* ============ page section wrapper ============ */
.price-guide { padding-top: 10px; }
.price-guide .lede { margin-bottom: 30px; }
.pg-hint {
  max-width: 720px;
  margin: 4px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .62);
}