.modes { display: flex; justify-content: center; margin: 0 auto 22px; width: max-content; }
.modes button { padding: 11px 22px; font-size: 16px; }

.realbook { display: grid; gap: 18px; animation: rise .5s both; }

.flip-stage {
  position: relative; border-radius: 28px; padding: 40px clamp(14px, 4vw, 56px) 20px; overflow: hidden; color: #f4efe3;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255, 171, 45, .16), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #474a54 0%, #2c2e35 55%, #1d1e23 100%);
  box-shadow: 0 30px 60px -30px rgba(20, 22, 28, .7);
}
.flip-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .22)); }

.flip-host { position: relative; width: 100%; min-height: 200px; z-index: 1; --mx: 30%; }
.flip-book { width: 100%; }
.book-shade { position: absolute; border-radius: 6px; box-shadow: 0 34px 50px -18px rgba(0, 0, 0, .75), 0 8px 18px -6px rgba(0, 0, 0, .5); }
.stack { position: absolute; background: repeating-linear-gradient(90deg, #fbf8f0 0 1px, #d6cdb6 1px 2px); box-shadow: 0 12px 18px -10px rgba(0, 0, 0, .6); }
.stack.left { border-radius: 4px 0 0 4px; }
.stack.right { border-radius: 0 4px 4px 0; }
.fmt-board .stack { background: repeating-linear-gradient(90deg, #f7f3ea 0 2px, #c9bfa6 2px 2.4px); }
.fmt-hardcover .stack.left { border-left: 4px solid #3a3c44; }
.fmt-hardcover .stack.right { border-right: 4px solid #3a3c44; }

.flip-page { background: #fffdf8; overflow: hidden; }
.flip-page .sheet { width: 100%; height: 100%; min-width: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.flip-page .sheet::after { display: none; }
.flip-page img { user-select: none; -webkit-user-drag: none; }
.flip-page::before, .flip-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.flip-page.--right::after { background: linear-gradient(90deg, rgba(20, 15, 10, .3), rgba(20, 15, 10, .06) 4%, transparent 9%); }
.flip-page.--left::after { background: linear-gradient(270deg, rgba(20, 15, 10, .3), rgba(20, 15, 10, .06) 4%, transparent 9%); }
.flip-page.front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .12) 1.2%, transparent 3%); }

.finish-glossy .flip-page::before { background: linear-gradient(115deg, transparent calc(var(--mx) - 22%), rgba(255, 255, 255, .5) var(--mx), transparent calc(var(--mx) + 16%)); mix-blend-mode: screen; }
.finish-glossy .flip-page img { filter: saturate(1.14) contrast(1.06); }
.finish-matte .flip-page::before { opacity: .45; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.finish-matte .flip-page img { filter: saturate(.93) contrast(.96) brightness(1.02); }

.fmt-board .flip-page.--right { border-radius: 0 18px 18px 0; }
.fmt-board .flip-page.--left { border-radius: 18px 0 0 18px; }
.fmt-board .flip-page { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06); }
.fmt-hardcover .flip-page.is-cover.--right { border-radius: 0 6px 6px 0; }
.fmt-hardcover .flip-page.is-cover.--left { border-radius: 6px 0 0 6px; }
.fmt-paperback .flip-page.front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 2%); }

.inside { width: 100%; height: 100%; }
.inside.plain { background: #fffdf8; }
.inside.endpaper {
  background-color: #2c2e35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><path d='M14 6l2.2 5.8L22 14l-5.8 2.2L14 22l-2.2-5.8L6 14l5.8-2.2z' fill='%23ffab2d'/><circle cx='42' cy='42' r='2.4' fill='%23e6e0ce'/><circle cx='44' cy='12' r='1.4' fill='%23ffab2d' opacity='.6'/></svg>");
}

.back-cover { position: relative; width: 100%; height: 100%; container-type: inline-size; background: #e6e0ce; display: grid; place-content: center; justify-items: center; gap: 2.4cqw; text-align: center; color: #2c2e35; }
.back-cover img { width: 30cqw; border-radius: 2cqw; box-shadow: 0 1cqw 0 rgba(44, 46, 53, .9); }
.back-cover p { font: 600 4cqw/1.1 var(--display); }
.back-cover strong { font: 800 2.4cqw var(--body); letter-spacing: .14em; text-transform: uppercase; }
.barcode { position: absolute; right: 6cqw; bottom: 6cqw; width: 17cqw; height: 9cqw; background: #fff repeating-linear-gradient(90deg, #2c2e35 0 1px, transparent 1px 3px, #2c2e35 3px 5px, transparent 5px 6px, #2c2e35 6px 7px, transparent 7px 10px) content-box; padding: 1.2cqw; }

.flip-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; }
.flip-btn { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #f4efe3; background: transparent; color: #f4efe3; font: 400 30px/1 var(--display); padding-bottom: 4px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.flip-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: scale(1.06); }
.flip-btn:disabled { opacity: .3; cursor: default; }
.flip-label { min-width: 150px; text-align: center; font-weight: 800; letter-spacing: .02em; }
.flip-extra { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.flip-link { background: none; border: 0; color: #c9c4b6; font: 700 14px var(--body); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.flip-link:hover { color: var(--accent); }

.flip-side { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: end; }
.side-main, .side-buy { display: grid; gap: 10px; }
.flip-side h3 { font-size: 26px; font-weight: 600; }
.flip-side .muted { font-size: 15px; }
.side-label { font-weight: 800; font-size: 14px; margin-top: 4px; }
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.fmt { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; background: #fffefa; color: var(--ink); font: 15px/1.35 var(--body); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.fmt:hover { border-color: var(--ink); transform: translateY(-1px); }
.fmt.on { border-color: var(--ink); background: var(--accent-soft); box-shadow: 0 3px 0 var(--ink); }
.fmt-icon { font-size: 26px; line-height: 1; margin-top: 2px; }
.fmt strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; }
.fmt small { color: var(--ink-2); font-size: 13.5px; }
.rec { font-style: normal; font-size: 11px; font-weight: 800; background: var(--ink); color: var(--accent); padding: 2px 8px; border-radius: 999px; }
.finishes { width: 100%; }
.finishes button { flex: 1; }

@media (max-width: 980px) {
  .flip-side { grid-template-columns: 1fr; align-items: stretch; }
  .formats { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .flip-stage { padding: 28px 14px 16px; border-radius: 20px; }
  .flip-nav { margin-top: 22px; }
}

.order-pick { display: flex; flex-wrap: wrap; width: 100%; }
.order-pick button { flex: 1 1 auto; padding: 9px 12px; }