/* Мои книги: кнопки «Купить книгу» и «Читать фрагмент», листалка фрагмента и окно покупки.
   Листалка повторяет оформление страницы персональной книги (personal-book/kniga.css, .flip-*). */

/* кнопки в карточке книги */
.store-card[data-book] .store-btn{min-width:0}
.store-btn.br-buy-btn{background:var(--lapis);color:#fff;border:0;font:inherit;cursor:pointer;box-shadow:0 0 0 1px var(--lapis),0 10px 22px -12px rgba(20,28,70,.7)}
.store-btn.br-buy-btn:hover{background:#18214A}
.br-buy-btn .store-btn-text small{color:rgba(255,255,255,.75)}
.br-buy-btn .store-btn-arrow{color:var(--gold)}
.br-frag-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;margin-top:14px;padding:0 24px;border-radius:999px;border:1px solid var(--gold-ink);background:transparent;color:var(--lapis);font:600 16px/1 var(--f-text);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.br-frag-btn:hover{background:rgba(117,89,26,.08);border-color:var(--lapis);transform:translateY(-1px)}
.br-frag-btn:focus-visible{outline:2px solid var(--lapis);outline-offset:3px}
.br-frag-btn svg{width:20px;height:20px;flex:none;color:var(--gold-ink)}
.br-frag-btn[hidden]{display:none}
@media (max-width:600px){.br-frag-btn{width:100%;justify-content:center}}

/* окна */
body.br-lock{overflow:hidden}
.br-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:56px 16px 24px;background:rgba(8,11,30,.92);color:#ECE7DA;font-family:var(--f-text)}
.br-modal[hidden]{display:none}
.br-close{position:absolute;top:12px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,231,218,.3);background:none;font-size:26px;line-height:1;cursor:pointer;color:#ECE7DA}
.br-close:hover{border-color:var(--gold)}
.br-eyebrow{margin:0;font:600 12px/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}

/* листалка */
.br-flip{grid-template-rows:1fr auto auto;gap:14px;padding-block:64px 20px;overflow:hidden}
.br-stage{display:grid;place-items:center;perspective:2600px;min-height:0}
.br-flip:not([hidden]) .br-stage{animation:brIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes brIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.br-book{--pw:300px;--ph:426px;position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.45,.05,.25,1);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.br-book.is-closed{transform:translateX(calc(var(--pw) * -.5))}
.br-book.is-single{width:var(--pw)}
.br-book.is-single.is-closed{transform:none}
.br-leaf,.br-base{position:absolute;top:0;left:50%;width:var(--pw);height:100%}
.is-single .br-leaf,.is-single .br-base{left:0}
.br-leaf{transform-origin:left center;transform-style:preserve-3d}
.br-leaf.is-flipped{transform:rotateY(-180deg)}
.br-leaf.turn-fwd{animation:brFwd .9s cubic-bezier(.4,.1,.25,1) both}
.br-leaf.turn-back{animation:brBack .9s cubic-bezier(.4,.1,.25,1) both}
@keyframes brFwd{0%{transform:rotateY(0)}30%{transform:rotateY(-50deg) skewY(-2.5deg)}70%{transform:rotateY(-135deg) skewY(2deg)}100%{transform:rotateY(-180deg)}}
@keyframes brBack{0%{transform:rotateY(-180deg)}30%{transform:rotateY(-130deg) skewY(2deg)}70%{transform:rotateY(-45deg) skewY(-2.5deg)}100%{transform:rotateY(0)}}
.is-single .br-leaf.is-flipped:not(.turn-fwd):not(.turn-back){visibility:hidden}
.br-face{position:absolute;inset:0;overflow:hidden;background:#FBF8F2;color:#1C1C28;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.br-face.back{transform:rotateY(180deg)}
.br-face img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.br-face::after{content:"";position:absolute;inset:0;pointer-events:none}
.br-face.front::after{background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,.06) 4%,transparent 9%,transparent 94%,rgba(0,0,0,.05))}
.br-face.back::after{background:linear-gradient(270deg,rgba(0,0,0,.24),rgba(0,0,0,.06) 4%,transparent 9%,transparent 94%,rgba(0,0,0,.05))}
.br-shade{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,12,30,.55),rgba(10,12,30,.15) 45%,rgba(255,255,255,.18) 80%,rgba(10,12,30,.2))}
.br-face.back .br-shade{transform:scaleX(-1)}
.turn-fwd .br-shade,.turn-back .br-shade{animation:brShade .9s ease-in-out both}
@keyframes brShade{0%,100%{opacity:0}50%{opacity:1}}
.br-face.br-hard{border-radius:0 5px 5px 0;background:#233164}
.br-face.br-hard::after{background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 5%,rgba(255,255,255,.08) 7%,transparent 10%)}
.br-face.br-endpaper{background:#233164 repeating-linear-gradient(45deg,rgba(222,172,58,.07) 0 1px,transparent 1px 12px);display:grid;place-items:center}
.br-endpaper span{display:grid;gap:calc(var(--pw) * .03);padding:0 14%;text-align:center;font-family:var(--f-display);font-style:italic;font-size:calc(var(--pw) * .045);color:rgba(232,211,160,.75)}
.br-endpaper b{font-style:normal;font-weight:500;font-size:calc(var(--pw) * .075);line-height:1.15;color:rgba(244,232,200,.92)}
.br-face.br-blank{background:#F6F1E6}
.br-base{background:#233164 repeating-linear-gradient(45deg,rgba(222,172,58,.07) 0 1px,transparent 1px 12px);border-radius:0 5px 5px 0;box-shadow:2px 0 0 #EDE7DA,3px 1px 0 #CFC7B6,5px 0 0 #EDE7DA,6px 1px 0 #CFC7B6,0 40px 70px -30px rgba(0,0,0,.9)}

/* страница с текстом */
.br-page{background:#FBF8F2}
.br-run{position:absolute;top:calc(var(--pw) * .06);left:0;right:0;margin:0;text-align:center;font:600 calc(var(--pw) * .024)/1 var(--f-text);letter-spacing:.18em;text-transform:uppercase;color:#9A8350}
.br-num{position:absolute;bottom:calc(var(--pw) * .055);left:0;right:0;margin:0;text-align:center;font-family:var(--f-display);font-size:calc(var(--pw) * .036);color:#9A8350}
.br-text{position:absolute;top:calc(var(--pw) * .13);bottom:calc(var(--pw) * .13);left:calc(var(--pw) * .11);right:calc(var(--pw) * .11);overflow:hidden;font-family:var(--f-display);font-weight:500;font-size:calc(var(--pw) * .049);line-height:1.42;hyphens:auto;-webkit-hyphens:auto}
.br-text p{margin:0;text-indent:1.4em;text-align:justify}
.br-text p.br-cont{text-indent:0}
.br-text p.br-label{text-indent:0;text-align:center;margin:0 0 1.1em;font:600 calc(var(--pw) * .026)/1.3 var(--f-text);letter-spacing:.18em;text-transform:uppercase;color:#75591A}
.br-text h4{margin:0 0 .8em;text-align:center;font-family:var(--f-display);font-weight:500;font-size:1.35em;line-height:1.15}
.br-text p.br-first{text-indent:0}
.br-text p.br-first::first-letter{float:left;font-size:3.3em;line-height:.82;margin:.06em .08em 0 0;color:#243165}
.br-measure{visibility:hidden;left:0;right:auto;width:var(--pw);pointer-events:none}

/* последняя страница */
.br-face.br-endpage{display:grid;place-items:center;text-align:center;background:#FBF8F2}
.br-end-in{display:grid;gap:calc(var(--pw) * .04);justify-items:center;padding:0 12%}
.br-end-in .br-eyebrow{font-size:calc(var(--pw) * .028)}
.br-end-in b{font-family:var(--f-display);font-weight:500;font-size:calc(var(--pw) * .085);line-height:1.1;color:#1C1C28}
.br-end-in p{margin:0;font-size:calc(var(--pw) * .036);line-height:1.5;color:#4A4A58}
.br-end-buy{padding:calc(var(--pw) * .032) calc(var(--pw) * .07);border:0;border-radius:999px;background:var(--lapis);color:#fff;font:600 calc(var(--pw) * .038)/1 var(--f-text);cursor:pointer}
.br-end-buy:hover{background:#18214A}

.br-book.no-anim,.br-book.no-anim *{transition:none!important;animation:none!important}
.br-ui{display:flex;justify-content:center;gap:18px;align-items:center;font-size:14px;color:rgba(236,231,218,.72)}
.br-ui span{min-width:150px;text-align:center}
.br-ui button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(236,231,218,.3);background:none;cursor:pointer;color:#ECE7DA;font-size:18px}
.br-ui button:hover:not(:disabled){border-color:var(--gold)}
.br-ui button:disabled{opacity:.3;cursor:default}
.br-hint{margin:0;text-align:center;font-size:13px;color:rgba(236,231,218,.6)}

/* окно покупки */
.br-sheet{position:relative;width:min(560px,100%);max-height:100%;overflow:auto;padding:clamp(24px,4vw,40px);border-radius:20px;background:#FBF8F2;color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.br-sheet .br-close{top:14px;right:14px;color:var(--ink);border-color:rgba(28,28,40,.2)}
.br-buy-head{display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px;align-items:center;padding-right:36px}
.br-buy-head .book-cover{display:block}
.br-buy-head img{display:block;width:100%;height:auto}
.br-buy-head h3{margin:6px 0 6px;font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3vw,32px);line-height:1.1}
.br-buy-head p:last-child{margin:0;font-size:15.5px;line-height:1.5}
.br-steps{margin:22px 0 20px;padding:16px 0 0 0;list-style:none;counter-reset:st;border-top:1px solid rgba(117,89,26,.2);display:grid;gap:8px}
.br-steps li{counter-increment:st;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:15.5px;line-height:1.45}
.br-steps li::before{content:counter(st);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(117,89,26,.12);color:var(--gold-ink);font:600 13px/1 var(--f-text)}
.br-format{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:rgba(117,89,26,.08);font-size:15.5px;line-height:1.45}
.br-format b{font-weight:700}
.br-form .chip span{font-size:14.5px}
.br-form .chip b{font-weight:700}
.br-form .form-status{margin:10px 0 0;font-size:15px;font-weight:600}
.br-alt{margin:16px 0 0;font-size:15px}
.br-alt a{color:var(--lapis)}
@media (max-width:480px){.br-buy-head{grid-template-columns:70px minmax(0,1fr);gap:14px}}

@media (prefers-reduced-motion:reduce){
  .br-book,.br-frag-btn{transition:none}
  .br-leaf.turn-fwd,.br-leaf.turn-back,.turn-fwd .br-shade,.turn-back .br-shade,.br-flip:not([hidden]) .br-stage{animation-duration:.01s}
}

/* разметка текста фрагмента */
.br-text h4{margin:.2em 0 .9em;text-align:center;font-family:var(--f-display);font-weight:500;font-size:1.45em;line-height:1.15;color:#1C1C28}
.br-text h4 small{display:block;margin-bottom:.35em;font:600 .5em/1.3 var(--f-text);letter-spacing:.18em;text-transform:uppercase;color:#75591A}
.br-text * + h4{margin-top:1.1em}
.br-text h5{margin:.9em 0 .45em;font-family:var(--f-display);font-weight:600;font-size:1.06em;line-height:1.25;color:#243165}
.br-text h4 + h5{margin-top:0;text-align:center;font-weight:500;font-style:italic}
.br-text p.br-sep{text-indent:0;text-align:center;margin:.5em 0;letter-spacing:.6em;color:#9A8350}
.br-text p.br-quote{text-indent:0;text-align:center;margin:.7em 6%;font-style:italic;color:#243165}
.br-text p.br-quote span{display:block;margin-top:.25em;font-style:normal;font-size:.85em;color:#75591A}
.br-text p.br-sign{text-indent:0;text-align:right;margin-top:.6em;font-style:italic}
.br-text p.br-letter{font-style:italic}
.br-text p.br-cut{text-align-last:justify}