/* Bookli CSS 3D product books — pure CSS, no WebGL.
   Honest paper depth: --depth is set per-book by JS as
   coverWidth x (pages x 0.1mm / 210mm). A 68-page booklet looks thin,
   a 580-page bundle looks thick — never exaggerated. */

/* cover area becomes a little stage for the 3D book */
.prod-card .cover{position:relative;overflow:visible;display:flex;justify-content:center;align-items:flex-start;
  padding:22px 34px 16px;background:linear-gradient(180deg,var(--bg-soft),#ffffff);cursor:pointer}
/* page-count badge — real pages from products.js */
.page-badge{position:absolute;bottom:10px;right:12px;background:rgba(255,255,255,.96);
  border:2px solid var(--line);color:var(--navy);font-weight:800;font-size:.68rem;
  padding:3px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(18,59,117,.12);z-index:2;
  font-family:var(--font-head);white-space:nowrap}

.book3d{position:relative;width:min(100%,205px);aspect-ratio:848/1200;perspective:1100px}
.book3d-in{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(-16deg);transition:transform .22s ease-out;will-change:transform}
.book3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:2px 7px 7px 2px;transform:translateZ(calc(var(--depth,4px)/2));
  box-shadow:0 14px 22px rgba(18,59,117,.18);pointer-events:none}
/* spine — left face, per-product --spine color */
.book3d-in::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--depth,4px)*-1);width:var(--depth,4px);
  transform:rotateY(90deg);transform-origin:right;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.28),var(--spine,#047EEF) 35%,var(--spine,#047EEF) 65%,rgba(0,0,0,.28))}
/* page edges — bottom face */
.book3d-in::after{content:"";position:absolute;left:1.5%;right:1.5%;
  bottom:calc(var(--depth,4px)*-1);height:var(--depth,4px);
  transform:rotateX(90deg);transform-origin:top;border-radius:0 0 4px 4px;
  background:repeating-linear-gradient(0deg,#ffffff 0 1px,#d9e2e8 1px 2px)}

/* hover: book lifts and turns toward you (JS pointer tilt overrides inline) */
.prod-card:hover .book3d-in{transform:rotateY(-26deg) rotateX(4deg) translateY(-6px)}

/* fallback when 3D unsupported */
@supports not (transform-style:preserve-3d){
  .book3d-in{transform:none}
  .book3d-in::before,.book3d-in::after{display:none}
  .book3d img{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .book3d-in{transition:none;transform:rotateY(-8deg)}
  .prod-card:hover .book3d-in{transform:rotateY(-8deg)}
}

@media(max-width:560px){
  .prod-card .cover{padding:16px 26px 12px}
  .book3d{width:min(100%,170px)}
  .book3d-in{transform:rotateY(-10deg)}
}