/* Two opt-in physical models. Standard books and catalogue cards keep noir.css unchanged. */
.book-model {
  --book-depth: 18px;
  --book-board: #397782;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateZ(-2deg);
  transition: transform .5s cubic-bezier(.22,.7,.15,1);
  isolation: isolate;
}
.book-model-front,.book-model-back,.book-model-pages,.book-model-spine {
  display: block;
  position: absolute;
  backface-visibility: hidden;
}
.book-model-front {
  inset: 0;
  background: var(--book-board);
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(var(--book-depth) / 2));
  transform-origin: left center;
  box-shadow: 0 1px 0 #ffffff85,1px 2px 0 #0004;
  overflow: hidden;
}
.book-model-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 1;
  backface-visibility: hidden;
  mix-blend-mode: normal;
}
.book-model-back {
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  background: var(--book-board);
  transform: translateZ(calc(var(--book-depth) / -2));
  box-shadow: 18px 22px 28px #0003;
}
.book-model-pages {
  inset: 5px 4px 5px 6px;
  background: #f4f0e5;
  transform-style: preserve-3d;
  box-shadow: inset 5px 0 12px #00000012;
}
.book-model-pages:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: calc(var(--book-depth) - 3px);
  transform: rotateY(90deg) translateX(50%);
  transform-origin: right center;
  background: repeating-linear-gradient(90deg,#d4cec0 0 1px,#fffcf4 1px 3px);
}
.book-model-pages:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--book-depth) - 3px);
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: center top;
  background: repeating-linear-gradient(0deg,#d4cec0 0 1px,#fffcf4 1px 3px);
}
.book-model-spine {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--book-depth);
  background: linear-gradient(90deg,#0004,var(--book-board) 35%,#fff2);
  transform: translateX(-50%) rotateY(-90deg);
  transform-origin: center;
  border-radius: 2px;
}
.book-model-hinge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 2px 0 1px #fff3,inset 6px 0 5px #0002,inset -1px 0 #ffffff80;
  background: linear-gradient(90deg,transparent 7px,#00000016 8px,#ffffff18 10px,transparent 12px);
  pointer-events: none;
}
.book-model--pocket {
  --book-depth: 18px;
  --book-board: #b7a99b;
  /* Isolation flattens the page edges; keep this volume in its own 3D space. */
  isolation: auto;
  transform: rotateX(6deg) rotateY(-28deg) rotateZ(-2deg);
}
.book-model--pocket .book-model-pages { background: #f6f1e5; }
.book-model--pocket .book-model-pages:after {
  width: calc(var(--book-depth) - 2px);
  background: repeating-linear-gradient(90deg,#c4bcae 0 .6px,#fffdf5 .6px 2px);
  box-shadow: inset 0 0 3px #81776355;
}
.book-model--pocket .book-model-pages:before {
  top: auto;bottom: 0;height: calc(var(--book-depth) - 2px);
  transform: rotateX(90deg) translateY(50%);transform-origin: center bottom;
  background: repeating-linear-gradient(0deg,#c4bcae 0 .6px,#fffdf5 .6px 2px);
}
.book-model--pocket:after {
  content: "";position: absolute;top: 2px;left: 3px;right: 2px;
  height: calc(var(--book-depth) - 2px);
  transform: rotateX(90deg) translateY(-50%);transform-origin: center top;
  background: repeating-linear-gradient(0deg,#c4bcae 0 .6px,#fffdf5 .6px 2px);
}
.book-model--square-hardcover .book-model-pages { inset: 4px 2px 4px 6px; }
.book-model--square-hardcover .book-model-front { border: 2px solid #b3d5d9;box-sizing: border-box;box-shadow: 0 2px 0 #1e505b,1px 3px 0 #163d49; }
.book-model--square-hardcover .book-model-back { border: 2px solid #397782; }
.book-model--pocket .book-model-front,.book-model--pocket .book-model-back { border-radius: 1px 3px 8px 1px; }
.book-model--pocket .book-model-front { box-shadow: 1px 1px 0 #0003; }
.book-model--pocket .book-model-pages { inset: 2px 2px 3px 3px; }
.book-model--pocket .book-model-hinge { background: linear-gradient(90deg,#0002,transparent 5px);box-shadow: inset 1px 0 #fff4,inset -2px -2px 3px #0001; }
.book-model--pocket .book-model-spine { border-radius: 50% 0 0 50%; }

/* Hero slots remain stable and opaque; each model's geometry is fixed inside its slot. */
.hero-book[data-book-format="square-hardcover"],.hero-book[data-book-format="pocket"] { background: transparent; }
.hero-book[data-book-format="square-hardcover"] .hero-book-face,.hero-book[data-book-format="pocket"] .hero-book-face { display: none; }
.hero-book .book-model { position: absolute;left: 50%;top: 50%;height: auto;transform: translate(-50%,-50%) rotateY(-12deg); }
.hero-book .book-model--square-hardcover { width: 128%;aspect-ratio: 1 / 1;--book-depth: 14px; }
.hero-book .book-model--pocket { width: 80%;aspect-ratio: 2 / 3;--book-depth: 14px;transform: translate(-50%,-50%) rotateX(5deg) rotateY(-22deg); }
.hero-book .book-model-back { box-shadow: -7px 16px 22px #0005; }

/* Detail: 280 × 280 hardcover; 184 × 276 pocket. No image-based sizing. */
.product-book-button[data-book-format="square-hardcover"] { width: min(280px,72%);height: auto;aspect-ratio: 1 / 1; }
.product-book-button[data-book-format="pocket"] { width: min(184px,58%);height: auto;aspect-ratio: 2 / 3; }
.product-book-button:not(:disabled):hover > .book-model { transform: rotateY(-12deg) rotateZ(-1deg) translateY(-5px); }
.product-book-button:not(:disabled):hover > .book-model--pocket { transform: rotateX(5deg) rotateY(-20deg) rotateZ(-1deg) translateY(-5px); }
.book-format-label { display: inline-flex;align-items: center;border: 1px solid #d8d5ca;border-radius: 20px;padding: 6px 12px;margin: 0 0 18px;font-size: 10px;letter-spacing: .04em;color: #686150;background: #f4f1e8; }

/* The opening cover uses the selected model. PDF pages continue to render normally. */
.reader-dialog[data-book-format="square-hardcover"] .reader-opening-cover { bottom: auto;height: auto;aspect-ratio: 1 / 1;border-radius: 2px 5px 5px 2px;box-shadow: 0 3px 0 #397782,0 6px 0 #f5f1e6,0 9px 0 #397782; }
.reader-dialog[data-book-format="pocket"] .reader-opening-cover { bottom: auto;height: auto;aspect-ratio: 2 / 3;border-radius: 1px 3px 8px 1px;box-shadow: 0 2px 0 #d9d1c2,0 4px 0 #b7a99b; }
@media(prefers-reduced-motion: reduce) { .book-model { transition: none; } }