/* LOJA. Dono: frente Loja e Biblioteca.
   Livro 3D de CSS (também usado na estante da Biblioteca), vitrine, página do material e barra de compra. */

/* =====================================================================================
   LIVRO 3D: capa de couro, moldura e título dourados, lombada, borda das páginas dourada,
   contracapa e sombra no chão. Tamanho por --w, --h, --e (espessura). Matiz do couro: --hc.
   ===================================================================================== */
.lj-livro { --w: 116px; --h: 166px; --e: 18px; --pe: calc(var(--e) - 3px); --hc: 22;
  position: relative; display: block; flex: none; width: var(--w); height: var(--h); perspective: 1000px; perspective-origin: 50% 38%; }
.lj-livro.lj-g { --w: 184px; --h: 264px; --e: 30px; perspective: 1300px; }
.lj-livro.lj-mini { --w: 42px; --h: 60px; --e: 8px; perspective: 520px; }
.lj-flutua { position: absolute; inset: 0; transform-style: preserve-3d; }
.lj-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-22deg); }
.lj-3d > span { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* capa */
.lj-3d > .lj-capa {
  inset: 0; transform: translateZ(calc(var(--e) / 2)); border-radius: 2px 7px 7px 2px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--w) * .045);
  padding: calc(var(--w) * .15) calc(var(--w) * .13) calc(var(--w) * .2) calc(var(--w) * .19);
  background:
    radial-gradient(110% 60% at 32% 6%, hsl(var(--hc) 36% 27% / .85), transparent 62%),
    radial-gradient(150% 110% at 50% 46%, hsl(var(--hc) 38% 13%), hsl(var(--hc) 46% 5%));
  box-shadow: inset 0 0 0 1px rgba(255,236,190,.07), inset 0 calc(var(--h) * -.16) calc(var(--h) * .16) calc(var(--h) * -.12) rgba(0,0,0,.8);
}
.lj-capa::before {   /* grão do couro */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .36; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lj-capa::after {    /* vinco da dobradiça junto da lombada + luz de cima */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.6) 0, rgba(255,240,210,.09) calc(var(--w) * .032), rgba(0,0,0,.42) calc(var(--w) * .058), rgba(255,240,210,.05) calc(var(--w) * .074), transparent calc(var(--w) * .12)),
    linear-gradient(180deg, rgba(255,240,210,.07), transparent 20%, transparent 78%, rgba(0,0,0,.3));
}
.lj-capa > * { position: relative; }
.lj-c-moldura { position: absolute !important; inset: calc(var(--w) * .06) calc(var(--w) * .06) calc(var(--w) * .06) calc(var(--w) * .125); border: 1px solid rgba(234,199,124,.62); border-radius: 2px 4px 4px 2px; pointer-events: none; }
.lj-c-moldura::before { content: ''; position: absolute; inset: calc(var(--w) * .024); border: 1px solid rgba(234,199,124,.26); border-radius: 1px 3px 3px 1px; }
.lj-c-moldura i { position: absolute; width: calc(var(--w) * .036); height: calc(var(--w) * .036); background: linear-gradient(135deg, #fff0c4, #d9b46a 60%, #8f6a2c); transform: rotate(45deg); box-shadow: 0 0 6px rgba(255,214,140,.55); }
.lj-c-moldura i:nth-child(1) { top: calc(var(--w) * -.018 - .5px); left: calc(var(--w) * -.018 - .5px); }
.lj-c-moldura i:nth-child(2) { top: calc(var(--w) * -.018 - .5px); right: calc(var(--w) * -.018 - .5px); }
.lj-c-moldura i:nth-child(3) { bottom: calc(var(--w) * -.018 - .5px); left: calc(var(--w) * -.018 - .5px); }
.lj-c-moldura i:nth-child(4) { bottom: calc(var(--w) * -.018 - .5px); right: calc(var(--w) * -.018 - .5px); }
.lj-c-estrela { display: block; line-height: 0; filter: drop-shadow(0 0 calc(var(--w) * .05) rgba(255,210,130,.5)); }
.lj-c-tit {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
  font: 600 calc(var(--w) * .088)/1.3 var(--cinzel); letter-spacing: .055em; text-transform: uppercase; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #fff4d2 0%, #f1d591 34%, #c9984a 68%, #f3da9b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 5px rgba(255,200,110,.16));
}
.lj-c-fio { width: 46%; height: 1px; background: linear-gradient(90deg, transparent, rgba(234,199,124,.85), transparent); margin: calc(var(--w) * .012) 0; flex: none; }
.lj-c-fio::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * .032); height: calc(var(--w) * .032); margin: calc(var(--w) * -.016) 0 0 calc(var(--w) * -.016); background: #e8c478; transform: rotate(45deg); }
.lj-c-sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 96%; font: italic 400 calc(var(--w) * .068)/1.36 var(--serif); color: rgba(240,222,178,.72); }
.lj-c-pe { position: absolute !important; left: calc(var(--w) * .07); right: 0; bottom: calc(var(--w) * .1); font: 600 calc(var(--w) * .04)/1 var(--cinzel); letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; color: rgba(234,199,124,.6); }
.lj-brilho {   /* reflexo que corre pela capa quando o livro gira */
  position: absolute !important; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
  background: linear-gradient(104deg, transparent 38%, rgba(255,242,214,.13) 47%, rgba(255,242,214,.04) 53%, transparent 62%) no-repeat;
  background-size: 280% 100%; background-position: 50% 0;
}
/* com banner: a imagem vira uma placa emoldurada na capa; banner em pé vira a capa inteira */
.lj-capa.com-banner { justify-content: flex-start; padding-top: calc(var(--w) * .14); gap: calc(var(--w) * .06); }
.lj-capa.com-banner .lj-c-estrela, .lj-capa.com-banner .lj-c-sub { display: none; }
.lj-capa.com-banner .lj-c-tit { -webkit-line-clamp: 3; }
.lj-c-placa { display: block; width: 100%; aspect-ratio: 4 / 3.3; border-radius: 2px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px rgba(234,199,124,.6), 0 0 0 calc(var(--w) * .022) hsl(var(--hc) 40% 8%), 0 0 0 calc(var(--w) * .022 + 1px) rgba(234,199,124,.3), 0 8px 16px rgba(0,0,0,.55); }
.lj-c-placa img { width: 100%; height: 100%; object-fit: cover; }
.lj-capa.cheia { padding: 0; }
.lj-capa.cheia .lj-c-placa { position: absolute; inset: 0; aspect-ratio: auto; box-shadow: none; border-radius: 0; }
.lj-capa.cheia > :not(.lj-c-placa):not(.lj-brilho) { display: none; }
.lj-capa.cheia::before { display: none; }

/* contracapa, lombada e páginas (borda dourada, como Bíblia de capa dura) */
.lj-3d > .lj-tras { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--e) / 2)); border-radius: 7px 2px 2px 7px; background: radial-gradient(120% 100% at 50% 40%, hsl(var(--hc) 36% 11%), hsl(var(--hc) 46% 5%)); }
.lj-3d > .lj-lomb { top: 0; left: calc(var(--e) / -2); width: var(--e); height: var(--h); transform: rotateY(-90deg); border-radius: 3px;
  background: linear-gradient(90deg, hsl(var(--hc) 46% 5%), hsl(var(--hc) 34% 19%) 45%, hsl(var(--hc) 46% 6%)); }
.lj-3d > .lj-lomb::after { content: ''; position: absolute; left: 0; right: 0; top: 12%; height: 1px; background: rgba(234,199,124,.6);
  box-shadow: 0 calc(var(--h) * .03) 0 rgba(234,199,124,.35), 0 calc(var(--h) * .72) 0 rgba(234,199,124,.35), 0 calc(var(--h) * .75) 0 rgba(234,199,124,.6); }
.lj-3d > .lj-miolo { top: 3px; left: calc(var(--w) - var(--pe) / 2 - 3px); width: var(--pe); height: calc(var(--h) - 6px); transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(255,250,235,.28), transparent 45%, rgba(40,25,5,.32)),
    repeating-linear-gradient(90deg, rgba(110,75,25,0) 0 1.2px, rgba(110,75,25,.3) 1.2px 1.8px),
    linear-gradient(180deg, #fbebb9 0%, #e5c072 18%, #b98a3e 50%, #e9cd88 78%, #c19346 100%); }
.lj-3d > .lj-miolo-topo, .lj-3d > .lj-miolo-base { left: 2px; width: calc(var(--w) - 5px); height: var(--pe);
  background:
    repeating-linear-gradient(180deg, rgba(110,75,25,0) 0 1.2px, rgba(110,75,25,.28) 1.2px 1.8px),
    linear-gradient(90deg, #c4974a, #f3dc9f 40%, #d4aa5a 80%, #a97c35); }
.lj-3d > .lj-miolo-topo { top: calc(3px - var(--pe) / 2); transform: rotateX(90deg); }
.lj-3d > .lj-miolo-base { top: calc(var(--h) - 3px - var(--pe) / 2); transform: rotateX(-90deg); }
/* fita marcadora: o material é seu */
.lj-3d > .lj-fita { left: 30%; top: calc(var(--h) - 8px); width: max(5px, calc(var(--w) * .07)); height: calc(var(--h) * .14); transform: translateZ(2px);
  background: linear-gradient(90deg, #8f6a2c, #f3d995 48%, #a77c34); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.lj-chao { position: absolute; left: 4%; right: -10%; bottom: calc(var(--h) * -.075); height: calc(var(--h) * .1); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.92), rgba(0,0,0,.5) 50%, transparent); filter: blur(4px); }
.lj-mini .lj-chao { filter: blur(2px); bottom: -5px; }
.lj-mini .lj-c-moldura::before, .lj-mini .lj-c-moldura i { display: none; }
.lj-mini .lj-capa { padding: 0; }
.lj-mini .lj-c-moldura { inset: 3px 3px 3px 5px; }

/* o grande flutua devagar e a sombra no chão acompanha */
.lj-g .lj-flutua { animation: ljFlutua 7.5s ease-in-out infinite; }
.lj-g .lj-chao { animation: ljChao 7.5s ease-in-out infinite; }
@keyframes ljFlutua { 0%, 100% { transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg); } 50% { transform: translate3d(0, -11px, 0) rotateY(5deg) rotateZ(-.7deg); } }
@keyframes ljChao { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(.84); opacity: .6; } }
.lj-g .lj-brilho::after {   /* de vez em quando um brilho passa pela capa, como luz de vela no ouro (só transform: não pesa) */
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; transform: translateX(-120%) skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255,244,220,.20) 50%, transparent); animation: ljVarre 9s ease-in-out infinite 2.4s; }
@keyframes ljVarre { 0%, 72% { transform: translateX(-120%) skewX(-14deg); } 100% { transform: translateX(330%) skewX(-14deg); } }

/* =====================================================================================
   PALCO (o livro grande com a aura de luz atrás)
   ===================================================================================== */
.lj-palco { position: relative; display: grid; place-items: center; height: 350px; margin: 0 -18px; overflow: hidden; touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none; outline: none; -webkit-tap-highlight-color: transparent; }
.lj-palco.segura { cursor: grabbing; }
.lj-palco .lj-livro { margin-top: -6px; }
.lj-palco::before {   /* poça de luz no chão, debaixo do livro (a sombra escura fica por cima dela) */
  content: ''; position: absolute; left: 50%; top: calc(50% + 128px); width: 300px; height: 64px; margin: -32px 0 0 -150px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,150,.26), rgba(255,206,130,.09) 55%, transparent); }
.lj-palco:focus-visible .lj-3d > .lj-capa { outline: 2px solid rgba(240,211,143,.75); outline-offset: 4px; }
.lj-aura { position: absolute; left: 50%; top: 46%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,232,186,.34), rgba(255,226,170,.10) 34%, transparent 46%),
    radial-gradient(closest-side, rgba(255,216,150,.30), rgba(217,180,106,.15) 42%, rgba(217,180,106,.05) 60%, transparent 72%); }
.lj-aura::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 6deg, rgba(255,228,175,.12) 0deg 1.4deg, transparent 1.4deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 16%, rgba(0,0,0,.45) 42%, transparent 70%); mask-image: radial-gradient(closest-side, #000 16%, rgba(0,0,0,.45) 42%, transparent 70%);
  animation: ljRaios 150s linear infinite; }
@keyframes ljRaios { to { transform: rotate(360deg); } }
.lj-cintilas { position: absolute; inset: 0; pointer-events: none; }
.lj-cintilas .estrela4 { position: absolute; }
.lj-cintilas .estrela4:nth-child(1) { left: calc(50% - 128px); top: 24%; animation-delay: -.6s; }
.lj-cintilas .estrela4:nth-child(2) { left: calc(50% + 104px); top: 58%; animation-delay: -1.9s; animation-duration: 4.4s; }
.lj-cintilas .estrela4:nth-child(3) { left: calc(50% + 86px); top: 9%; animation-delay: -2.8s; animation-duration: 5.2s; }
.lj-palco.liberado .lj-aura { animation: ljLibera 1.8s var(--mola) both; }
@keyframes ljLibera { 0% { transform: scale(.5); opacity: 0; } 35% { transform: scale(1.22); opacity: 1; filter: brightness(1.9); } 100% { transform: none; opacity: 1; } }

/* =====================================================================================
   VITRINE
   ===================================================================================== */
.lj-cab { padding-bottom: 0; }
.lj-cab .olho { margin-bottom: 10px; }
.lj-destaque { position: relative; }
.lj-dest-txt { text-align: center; margin-top: -12px; padding: 0 6px; }
.lj-dest-txt .olho { justify-content: center; }
.lj-dest-txt .titulo-m { margin-top: 10px; font-size: 28px; }
.lj-dest-txt .sub { max-width: 310px; margin: 8px auto 0; }
.lj-dest-acao { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.lj-dest-acao .bt svg { width: 18px; height: 18px; margin-right: -6px; }
.lj-preco, .lj-b-preco { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; white-space: nowrap;
  background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lj-preco { font-size: 30px; font-weight: 500; line-height: 1; }
.lj-preco small, .lj-b-preco small { font-size: .5em; margin-right: .18em; letter-spacing: .02em; position: relative; top: -.62em; }
.lj-prateleira { gap: 18px; padding-top: 12px; padding-bottom: 6px; }
.lj-item { width: 130px; flex: none; display: flex; flex-direction: column; align-items: flex-start; text-align: left; scroll-snap-align: start; }
.lj-item .lj-livro { margin: 2px 0 20px 6px; }
.lj-item-txt, .lj-solo-txt { display: block; padding: 0 2px; min-width: 0; }
.lj-item-txt b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.lj-preco-p { display: block; margin-top: 5px; font: 500 17px/1.2 var(--serif); color: var(--ouro-2); white-space: nowrap; font-variant-numeric: lining-nums; }
.lj-preco-p small { font-size: .7em; margin-right: 2px; color: var(--ouro); }
.lj-seu { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; font: 600 10.5px/1 var(--cinzel); letter-spacing: .18em; text-transform: uppercase; color: var(--ouro-2); }
.lj-seu svg { width: 13px; height: 13px; color: var(--ouro); }
.lj-solo { display: flex; align-items: center; gap: 22px; width: 100%; text-align: left; padding: 6px 0 4px 8px; }
.lj-solo .lj-livro { margin-bottom: 14px; }
.lj-solo-txt { flex: 1; }
.lj-solo-txt b { display: block; font: 500 21px/1.2 var(--serif); letter-spacing: -.01em; }
.lj-solo-txt em { display: block; font-style: normal; font-size: 14px; color: var(--txt-2); line-height: 1.42; margin-top: 6px; }
.lj-solo-ver { display: inline-flex; align-items: center; gap: 2px; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ouro); }
.lj-solo-ver svg { width: 17px; height: 17px; }
.lj-meus .lj-linhas { margin: 0 2px; }
.lj-linha { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.lj-linha-abre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-align: left; }
.lj-linha .lj-livro { margin: 0 8px 6px 2px; }
.lj-linha-txt { min-width: 0; display: block; }
/* o nome do que a pessoa comprou aparece inteiro (até duas linhas), sem reticências no meio da palavra */
.lj-linha-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.lj-linha-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--txt-3); font-size: 13px; line-height: 1.38; margin-top: 3px; }
.lj-linha .bt { flex: none; }
.lj-esq { display: grid; justify-items: center; gap: 14px; padding: 46px 0 10px; }
.lj-esq i { display: block; }
.lj-esq-livro { width: 184px; height: 264px; border-radius: 4px 10px 10px 4px; }
.lj-esq-l1 { width: 62%; height: 26px; margin-top: 34px; }
.lj-esq-l2 { width: 40%; height: 16px; }
.lj-vazio { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 90px 24px 40px; color: var(--txt-2); }
.lj-vazio > svg { width: 46px; height: 46px; color: var(--ouro); margin-bottom: 10px; }
.lj-vazio b { font: 500 25px/1.2 var(--serif); color: var(--txt); }
.lj-vazio span { font-size: 15px; max-width: 300px; line-height: 1.5; }
.lj-vazio .bt { margin-top: 18px; }

/* =====================================================================================
   PÁGINA DO MATERIAL
   ===================================================================================== */
.tela.lj-pagina { padding-bottom: calc(var(--abas) + 116px); }
.lj-pagina .lj-palco { height: 336px; margin-top: -10px; }
.lj-pag-cab { text-align: center; padding: 0 6px; margin-top: -14px; }
.lj-pag-cab .olho { justify-content: center; }
.lj-pag-tit { font: 500 31px/1.12 var(--serif); letter-spacing: -.015em; margin: 12px 0 0; text-wrap: balance; }
.lj-pag-sub { color: var(--txt-2); font: italic 400 18px/1.45 var(--serif); margin: 8px auto 0; max-width: 320px; text-wrap: balance; }
.lj-desc { margin: 30px 2px 0; padding-top: 26px; position: relative; }
.lj-desc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,180,106,.45) 50%, transparent); }
.lj-desc p { font: 400 18px/1.62 var(--serif); color: rgba(243,238,229,.86); margin: 0 0 14px; text-wrap: pretty; }
.lj-dentro-olho { display: flex; margin: 24px 0 8px; }
.lj-dentro { list-style: none; margin: 0 0 12px; padding: 0; }
.lj-dentro li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linha); font-size: 16px; line-height: 1.45; color: var(--txt); }
.lj-dentro li:first-child { border-top: 0; }
.lj-dentro li svg { width: 13px; height: 13px; color: var(--ouro); flex: none; margin-top: 5px; filter: drop-shadow(0 0 6px rgba(240,200,120,.55)); }
.lj-confia { display: flex; gap: 12px; align-items: flex-start; margin: 24px 2px 0; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 14px; line-height: 1.5; color: var(--txt-3); }
.lj-confia svg { width: 20px; height: 20px; color: var(--ouro); flex: none; margin-top: 1px; }
/* como funciona: três passos ligados por um fio de ouro (medalhas de vidro com o ícone, texto curto embaixo) */
.lj-passos { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--linha); text-align: center; }
.lj-passos.sem-desc { border-top: 0; padding-top: 6px; }
.lj-passos > .olho { justify-content: center; }
.lj-passos ol { position: relative; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lj-passos ol::before {   /* o fio que liga as três medalhas */
  content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 23px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(217,180,106,.15), rgba(240,211,143,.7) 50%, rgba(217,180,106,.15)); }
.lj-passos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.lj-p-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--ouro-2);
  background: radial-gradient(circle at 50% 30%, rgba(255,236,190,.16), rgba(18,15,24,.92) 72%); border: 1px solid rgba(234,199,124,.42);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px -6px rgba(240,200,120,.45); }
.lj-p-ic svg { width: 20px; height: 20px; }
.lj-p-tx { font-size: 13.5px; line-height: 1.38; color: var(--txt-2); text-wrap: balance; padding: 0 2px; }
.lj-confere { text-align: center; margin-top: 8px; }
.lj-confere .bt svg { width: 18px; height: 18px; }

/* barra fixa embaixo, acima das abas */
/* véu escuro debaixo da barra e das abas: o texto que rola por baixo não aparece no vão entre as duas */
.lj-barra-fundo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; height: calc(var(--abas) + 112px); pointer-events: none;
  background: linear-gradient(180deg, rgba(7,6,10,0) 0%, rgba(7,6,10,.78) 30%, rgba(7,6,10,.94) 62%); animation: ljFundoEntra .5s ease backwards; transition: opacity .3s; }
body.sem-abas .lj-barra-fundo { opacity: 0; }
@keyframes ljFundoEntra { from { opacity: 0; } }
.lj-barra { position: fixed; left: 0; right: 0; bottom: calc(var(--abas) + 2px); z-index: 41; display: flex; justify-content: center; padding: 0 12px; pointer-events: none;
  animation: ljBarraEntra .6s var(--mola) backwards .12s; transition: transform .45s var(--mola), opacity .3s; }
body.sem-abas .lj-barra { transform: translateY(calc(100% + var(--abas))); opacity: 0; }
.lj-barra-in { pointer-events: auto; width: 100%; max-width: 480px; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 8px 8px 8px 20px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(18,15,24,.74); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 18px 46px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(217,180,106,.07); }
.lj-b-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lj-b-rot { font-size: 12.5px; line-height: 1.2; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-b-preco { font-size: 25px; font-weight: 500; line-height: 1.05; }
.lj-b-so-preco .lj-b-preco { font-size: 30px; line-height: 1.1; }   /* sozinho na barra: o preço respira e fica grande */
.lj-b-hot { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--txt-2); }
.lj-b-hot svg { width: 18px; height: 18px; color: var(--ouro); flex: none; }
.lj-b-seu { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ouro-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-b-seu svg { width: 16px; height: 16px; color: var(--ouro); flex: none; }
.lj-barra .bt { flex: none; min-height: 50px; padding: 0 24px; }
@keyframes ljBarraEntra { from { transform: translateY(40px); opacity: 0; } }

@media (max-width: 370px) {
  .lj-livro.lj-g { --w: 172px; --h: 246px; --e: 28px; }
  .lj-palco { height: 330px; }
  .lj-barra .bt { padding: 0 18px; }
  .lj-b-preco { font-size: 22px; }
  .lj-b-so-preco .lj-b-preco { font-size: 27px; }
  .lj-p-tx { font-size: 13px; }
}
@media (min-width: 560px) { .lj-palco { margin: 0 -24px; } }
@media (prefers-reduced-motion: reduce) {
  .lj-g .lj-flutua, .lj-g .lj-chao, .lj-aura::before, .lj-g .lj-brilho::after { animation: none; }
}