@layer components {
  .book-hero__cover, [data-gallery-book] { position: relative; min-width: 0; }
  .book-hero__cover.book-3d--ready > img, [data-gallery-book].book-3d--ready > img { opacity: 0; pointer-events: none; }
  .book-3d { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; }
  .book-3d__surface { position: relative; min-width: 0; min-height: 15rem; cursor: grab; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .book-3d.is-dragging .book-3d__surface { cursor: grabbing; }
  .book-3d__surface:focus-visible { outline: 2px solid var(--gold-dark, #9a7435); outline-offset: 3px; }
  .book-3d__canvas { display: block; width: 100%; height: 100%; }
  .book-3d__rotate-hint { appearance: none; position: absolute; right: var(--book-cue-right, 8px); bottom: var(--book-cue-bottom, 8px); z-index: 2; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; color: rgba(255,250,240,.92); background: rgba(18,14,10,.38); border: 1px solid rgba(255,250,240,.42); border-radius: 50%; opacity: .34; font: inherit; cursor: pointer; touch-action: manipulation; pointer-events: auto; transition: opacity .18s ease; }
  .book-3d__rotate-hint svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  .book-3d__rotate-hint:hover { opacity: .58; }
  .book-3d__rotate-hint:focus-visible { opacity: .8; outline: 2px solid var(--gold-dark, #9a7435); outline-offset: 2px; }
  .book-3d.is-dragging .book-3d__rotate-hint { opacity: 0; }
}
@media (max-width: 760px) { .book-3d__surface { min-height: 12rem; } }
@media (prefers-reduced-motion: reduce) {
  .book-3d { display: none !important; }
  .book-hero__cover.book-3d--ready > img, [data-gallery-book].book-3d--ready > img { opacity: 1; }
}