/* Flipa front-end: lightbox + bookshelf */
.flipa-lb-trigger{cursor:pointer}
button.flipa-lb-trigger{display:inline-flex;align-items:center;gap:8px;background:#2f6bff;color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:15px;line-height:1.2;cursor:pointer}
button.flipa-lb-trigger:hover{background:#2257d6}
img.flipa-lb-trigger{max-width:100%;height:auto;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .15s}
img.flipa-lb-trigger:hover{transform:translateY(-2px)}

.flipa-lb-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:2vmin}
.flipa-lb-overlay.open{display:flex}
.flipa-lb-box{position:relative;width:min(1100px,96vw);height:min(90vh,96vh);background:#222a36;border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.flipa-lb-box iframe{width:100%;height:100%;border:0;display:block}
.flipa-lb-close{position:absolute;top:8px;inset-inline-end:8px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.flipa-lb-close:hover{background:rgba(0,0,0,.85)}

.flipa-shelf{display:grid;gap:18px;grid-template-columns:repeat(var(--flipa-cols,3),1fr)}
@media(max-width:782px){.flipa-shelf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flipa-shelf{grid-template-columns:1fr}}
.flipa-shelf-item{cursor:pointer;text-align:center}
/* contain, NOT cover. The tile is a fixed 3/4 box whatever shape the book is, and until
   0.23.0 that was invisible because the shelf only ever drew title tiles. Covers made it
   visible and measurable: on a 564x752 tile a letter-size cover lost 1.4% off the sides,
   A4 lost 5.8% top and bottom, and a LANDSCAPE cover lost 47.0% of its width, cutting the
   headline off at both ends. Calendar mode is sold for landscape pages, so cover was
   butchering exactly the books that feature exists for. contain letterboxes against the
   tile background instead, which costs a portrait book nothing and keeps a landscape book
   whole. The padding below is the title tile's breathing room for text, so an img cancels
   it and fills the tile edge to edge. */
.flipa-shelf-cover{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18);background:#e9edf3;color:#7a8699;font-weight:700;padding:10px;box-sizing:border-box;transition:transform .15s}
img.flipa-shelf-cover{padding:0}
.flipa-shelf-item:hover .flipa-shelf-cover{transform:translateY(-3px)}
.flipa-shelf-title{margin-top:8px;font-size:14px;font-weight:600}