/* ==========================================================================
   Component: Book Page (single product no estilo do site atual)
   ========================================================================== */

.book-page {
  color: var(--color-fg);
}

/* alinhamento lateral igual ao resto da loja */
.book-page .container--fluid {
  --container-fluid-padding: var(--space-20);
}

/* --- 1. Topo: galeria em painel colorido + coluna de compra fixa --- */

/* O painel usa a cor extraida da capa (--stage-bg, calculada no PHP e
   cacheada); sem capa cai no painel neutro. */
.book-hero {
  --stage-bg: var(--color-panel);

  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-16);
  align-items: start;
  padding-right: var(--space-20);
}

/* Coluna esquerda: a galeria e, abaixo dela, todo o conteudo do livro. */
.book-hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

/* Dentro da coluna, o depoimento e as abas seguem o recuo do conteudo e nao
   mais a largura da pagina. Os espacamentos proprios delas (que existiam
   quando eram secoes soltas) sao zerados: o respiro vem do gap da coluna. */
.book-hero__main .book-quote,
.book-hero__main .book-details {
  max-width: none;
  margin: 0;
  padding: 0 var(--space-12);
  background: none;
}

.book-hero__main .book-details .container--fluid {
  --container-fluid-padding: 0;
  padding-inline: 0;
}

@media (max-width: 960px) {
  .book-hero__main .book-quote,
  .book-hero__main .book-details {
    padding-inline: var(--space-6);
  }
}

.book-hero__main .book-quote__headline {
  font-size: clamp(var(--text-h4), 2.4vw, var(--text-h3));
}

@media (max-width: 960px) {
  .book-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-right: 0;
  }

  .book-hero__main {
    display: contents;
  }

  /* Com display:contents no main, quote/details/info viram flex items diretos
     do hero. O hero usa align-items:start, então sem width eles pegam o
     max-content (as tabs em nowrap esticariam o bloco e criariam overflow
     horizontal) — trava a largura no viewport e deixa o scroll das tabs agir. */
  .book-hero__main .book-quote,
  .book-hero__main .book-details,
  .book-hero__info {
    width: 100%;
    min-width: 0;
  }

  .book-hero__stage { order: 1; }
  .book-hero__info  { order: 2; }
  .book-hero__main .book-quote   { order: 3; }
  .book-hero__main .book-details { order: 4; }
}

/* Coluna de imagens: sangra ate a borda esquerda, encosta reto no topo e so
   arredonda embaixo. Cada figura ocupa a altura da tela, entao rolar a pagina
   percorre a galeria do livro. */
.book-hero__stage {
  display: flex;
  flex-direction: column;
  background-color: var(--stage-bg);
  border-radius: 0 0 var(--radius-2xl) 0;
  overflow: hidden;
}

.book-hero__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(46rem, calc(100vh - 5.5rem));
  margin: 0;
  padding: var(--space-16) var(--space-12);
}

@media (max-width: 960px) {
  .book-hero__stage {
    border-radius: 0;
    width: 100%;
  }

  .book-hero__figure {
    min-height: 0;
    padding: var(--space-12) var(--space-6);
    justify-content: center;
  }
}

/* A capa nunca passa da altura da tela: max-height limita o lado maior e o
   width:auto preserva a proporcao (o max-width so segura capas horizontais). */
.book-hero__cover {
  display: block;
  width: auto;
  max-width: min(30rem, 100%); /* 480px */
  max-height: calc(100vh - 14rem);
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 2rem 4rem rgba(5, 5, 5, 0.3);
}

.book-hero__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(30rem, 100%);
  aspect-ratio: 3 / 4;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  background:
    var(--texture-noise),
    linear-gradient(180deg, var(--color-neutral-950), var(--color-neutral-800));
}

/* --- Coluna de informacoes --- */

/* Coluna direita: autor, titulo, abas e compra. Acompanha a rolagem para o
   CTA nunca sair da tela enquanto a galeria e o conteudo rolam a esquerda. */
.book-hero__info {
  position: sticky;
  top: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 34rem;
  padding-top: var(--space-16);
}

@media (max-width: 960px) {
  .book-hero__info {
    position: static;
    padding: 0 var(--space-6) var(--space-10);
  }
}

/* Card branco em volta do bloco de compra. */
.book-hero__info .book-buy {
  padding: var(--space-6);
  background-color: #fff;
  border-radius: var(--radius-xl);
  box-shadow:
    0 2px 4px -2px rgba(10, 10, 10, 0.05),
    0 14px 30px -20px rgba(10, 10, 10, 0.12);
}

/* Preco acima e CTA ocupando a largura do card. */
.book-hero__info .book-buy__action {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.book-hero__info .book-buy__cta {
  width: 100%;
}

@media (max-width: 960px) {
  .book-hero__info {
    padding-inline: var(--space-6);
  }
}

.book-hero__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
}

.book-hero__author-avatar img {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 50%;
}

.book-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h2), 3.5vw, var(--text-h1)); /* 41.8px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.book-hero__subtitle {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-h6); /* 16.8px */
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
}

.book-hero__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-2);
}

.book-hero__buy .buy-panel {
  flex: 1 1 15rem;
}

/* --- Abas na coluna de informacoes (visao geral / infos tecnicas) --- */

.book-tabs-wrap {
  width: 100%;
  margin-top: var(--space-2);
}

.book-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.book-tabs__tab {
  position: relative;
  padding: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-h6); /* 16.8px */
  font-weight: var(--font-medium);
  color: var(--color-fg-subtle);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}

.book-tabs__tab:hover {
  color: var(--color-fg);
}

/* o traco da aba ativa cobre a linha do tablist */
.book-tabs__tab.is-active {
  color: var(--color-fg);
  font-weight: var(--font-semibold);
}

.book-tabs__tab.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: var(--color-fg);
}

/* No mobile as tabs não quebram linha (o wrap + border-bottom virava um
   "degrau" com a tab ativa desalinhada). Elas permanecem numa única linha e
   rolam horizontalmente, com a trilha de scroll oculta.
   960px, não 767: é o breakpoint em que o hero empilha (e onde o
   width:100% dos flex items já prepara este scroll) — em 768–960 o
   degrau voltava. */
@media (max-width: 960px) {
  .book-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-6);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .book-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .book-tabs__tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.book-panel[hidden] {
  display: none;
}

.book-panel__body {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
}

.book-panel__body p {
  margin: 0;
}

/* na coluna do topo o par rotulo/valor fica mais compacto */
.book-tabs-wrap .book-tech__row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  padding: var(--space-3) 0;
}

.book-tabs-wrap .book-tech__label,
.book-tabs-wrap .book-tech__value {
  font-size: var(--text-p);
}

/* --- Bloco de compra: seletor de opcoes + preco + CTA --- */

.book-buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-2);
}

/* livro exclusivo da trilha: sem seletor, so o aviso */
.book-buy__exclusive {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-small); /* 11.67px */
  font-weight: var(--font-medium);
  color: var(--color-fg);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

.book-buy__choice-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
}

/* pilulas de escolha: a ativa preenche, as outras ficam vazadas */
.book-buy__segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.book-buy__segment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
  color: var(--color-fg);
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.book-buy__segment:hover {
  border-color: var(--color-fg);
}

.book-buy__segment.is-active {
  color: #fff;
  background-color: var(--color-fg);
  border-color: var(--color-fg);
}

/* O desconto viaja dentro da pilula da opcao a que ele pertence.
   Azul secundario (nao o amarelo de acao) pra nao competir com o botao
   "Adicionar ao carrinho", que fica logo abaixo tambem amarelo. */
.book-buy__segment-off {
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  font-size: var(--text-small); /* 11.67px */
  font-weight: var(--font-medium);
  color: var(--color-secondary-fg);
  background-color: var(--color-secondary);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* --- Painel da opcao escolhida --- */

.book-buy__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.book-buy__panel[hidden] {
  display: none;
}

.book-buy__note {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
}

.book-buy__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.book-buy__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-ui);
}

.book-buy__price-was {
  font-size: var(--text-h5); /* 20.16px */
  color: var(--color-fg-subtle);
}

.book-buy__price-now {
  font-size: var(--text-h4); /* 24.19px */
  font-weight: var(--font-semibold);
  color: var(--color-fg);
}

.book-buy__price .amount,
.book-buy__price bdi {
  color: inherit;
}

.book-buy__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
  text-align: center;
  text-decoration: none;
  color: var(--color-cta-fg);
  background-color: var(--color-cta);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-normal) var(--ease-default);
}

.book-buy__cta:hover {
  background-color: var(--color-cta-dark);
}

/* opcao externa: preto, e o CTA avisa para onde leva */
.book-buy__cta--external {
  color: #fff; /* CTA amarelo tem texto escuro; aqui o fundo é preto */
  background-color: var(--color-neutral-950);
}

.book-buy__cta--external:hover {
  background-color: var(--color-neutral-800);
}

.book-buy__cta-hint {
  font-size: var(--text-small); /* 11.67px */
  opacity: 0.7;
}

.book-buy__aside {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.book-buy__aside:hover {
  color: var(--color-fg);
}

/* --- 2. Depoimento --- */

.book-quote {
  max-width: 62rem;
  padding-top: var(--space-24);
}

.book-quote__headline {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h3), 3.2vw, var(--text-h2));
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.book-quote__headline em {
  font-style: italic;
}

.book-quote__body {
  max-width: 72rem;
  font-family: var(--font-ui);
  font-size: var(--text-h6); /* 16.8px */
  line-height: var(--leading-relaxed);
  color: var(--color-fg-muted);
}

.book-quote__body p {
  margin: 0 0 var(--space-4);
}

.book-quote__body p:last-child {
  margin-bottom: 0;
}

.book-quote__author {
  margin: var(--space-6) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-h6);
  color: var(--color-fg);
}

.book-quote__author a {
  color: var(--color-info);
  text-decoration: none;
}

.book-quote__author a:hover {
  text-decoration: underline;
}

/* --- Lista "para quem e este livro" (dentro da aba) --- */

.book-audience__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-audience__item {
  padding: var(--space-4) 0;
  font-family: var(--font-ui);
  font-size: var(--text-h6);
  color: var(--color-fg);
}

.book-audience__item + .book-audience__item {
  border-top: 1px solid var(--color-border);
}

/* --- 5. Sinopse / estrutura / sumario em abas (banda cinza) --- */

.book-details {
  margin-top: var(--space-24);
  padding: var(--space-16) 0 var(--space-24);
  background-color: var(--color-bg);
}

/* No bloco de baixo as abas tem mais respiro e o texto ganha largura de
   leitura; no topo elas vivem na coluna estreita. */
.book-details .book-tabs {
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.book-details .book-panel__body {
  max-width: 52rem;
  font-size: var(--text-h6);
  color: var(--color-fg-muted);
}

/* conteudo rico vindo do editor */
.book-panel__body--rich h2 {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.book-panel__body--rich h3 {
  margin: var(--space-10) 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  color: var(--color-fg);
}

.book-details .book-panel__body--rich p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

.book-details .book-panel__body--rich p:last-child {
  margin-bottom: 0;
}

/* --- 6. Autor + livros dele --- */

.book-author {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-20);
  padding-block: var(--space-20);
  background-color: #ffffff;
  --container-fluid-padding: var(--space-20);
}

@media (max-width: 860px) {
  .book-author {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.book-author__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.book-author__avatar img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.book-author__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
}

.book-author__bio p {
  margin: 0 0 var(--space-4);
  max-width: 46ch;
  font-family: var(--font-ui);
  font-size: var(--text-h6);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-muted);
}

.book-author__bio p:last-child {
  margin-bottom: 0;
}

/* --- "Do mesmo autor" --- */

.book-author__works-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
  color: var(--color-fg-subtle);
}

.book-author__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 480px) {
  .book-author__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.author-book__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.author-book__cover img,
.author-book__cover-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 0.5rem 1.5rem rgba(5, 5, 5, 0.14);
  transition: transform var(--duration-normal) var(--ease-default);
}

.author-book__cover-placeholder {
  background: linear-gradient(135deg, var(--color-neutral-200), var(--color-neutral-300));
}

.author-book__link:hover .author-book__cover img {
  transform: translateY(-0.25rem);
}

.author-book__title {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

/* --- 7. Podcast (banda amarela) --- */

.book-podcast {
  padding: var(--space-24) 0;
  background-color: var(--color-accent);
  color: var(--color-neutral-950);
}

.book-podcast__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 860px) {
  .book-podcast__inner {
    grid-template-columns: 1fr;
  }
}

.book-podcast__episode {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.book-podcast__number {
  font-family: var(--font-heading);
  font-size: var(--text-d3); /* 72px */
  font-weight: var(--font-bold);
  line-height: 0.9;
}

.book-podcast__topic {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-h5);
  line-height: var(--leading-snug);
}

.book-podcast__brand {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.book-podcast__text {
  max-width: 52rem;
  margin: 0 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-relaxed);
}

.book-podcast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.book-podcast__actions a {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
  color: inherit;
  text-decoration: none;
}

.book-podcast__actions a:hover {
  text-decoration: underline;
}

/* --- Informacoes tecnicas (rotulo / valor) --- */

.book-tech {
  margin: 0;
}

.book-tech__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  padding: var(--space-4) 0;
}

@media (max-width: 600px) {
  .book-tech__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.book-tech__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-h6);
  color: var(--color-fg-subtle);
}

.book-tech__value {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-h6);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
}

.book-tech__value em {
  font-style: italic;
}

/* A marca da Bold acompanha o texto do CTA e da pilula do digital. */
.bold-mark {
  flex-shrink: 0;
}

/* Sao dois desenhos: o "dark" (contorno) para o fundo claro da pilula em
   repouso, e o "light" (preenchido) quando ela acende. */
.book-buy__segment .bold-mark--light,
.book-buy__segment.is-active .bold-mark--dark {
  display: none;
}

.book-buy__segment.is-active .bold-mark--light {
  display: block;
}

/* ==========================================================================
   Nanobook variant — livros grátis: barra colorida horizontal atrás da capa
   ========================================================================== */

.book-page--nanobook .book-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 0 var(--space-16);
  padding-right: var(--space-20);
}

.book-page--nanobook .book-hero__main {
  display: contents;
}

/* Stage: faixa com a capa, ocupa toda a largura */
.book-page--nanobook .book-hero__stage {
  position: relative;
  grid-column: 1 / -1;
  width: auto;
  background: none;
  border-radius: 0;
  align-items: center;
  margin-right: calc(-1 * var(--space-20));
}

/* Barra colorida que cruza horizontalmente por trás da capa */
.book-page--nanobook .book-hero__stage::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 51.13%;
  height: 46%;
  transform: translateY(-50%);
  background-color: var(--stage-bg);
}

.book-page--nanobook .book-hero__figure {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: var(--space-12) var(--space-8);
}

.book-page--nanobook .book-hero__cover-clip {
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0.5rem 2rem rgba(5, 5, 5, 0.12);
  width: 34.375rem; /* 550px */
  max-width: 100%;
}

.book-page--nanobook .book-hero__cover {
  display: block;
  width: 100%;
  max-height: none;
  box-shadow: none;
  transform: scale(1.03);
}

/* Conteúdo (sinopse, abas) fica na coluna esquerda */
.book-page--nanobook .book-hero__main .book-quote,
.book-page--nanobook .book-hero__main .book-details {
  grid-column: 1;
}

/* Info + CTA: coluna direita, sticky */
.book-page--nanobook .book-hero__info {
  grid-column: 2;
  grid-row: 2 / span 10;
  position: sticky;
  top: var(--space-10);
  max-width: 34rem;
  padding-top: var(--space-10);
}

@media (max-width: 960px) {
  .book-page--nanobook .book-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-right: 0;
  }

  .book-page--nanobook .book-hero__main {
    display: contents;
  }

  .book-page--nanobook .book-hero__stage {
    order: 1;
    margin-right: 0;
    width: 100%;
    min-width: 0;
  }
  .book-page--nanobook .book-hero__info  { order: 2; }
  .book-page--nanobook .book-hero__main .book-quote   { order: 3; }
  .book-page--nanobook .book-hero__main .book-details { order: 4; }

  .book-page--nanobook .book-hero__figure {
    padding: var(--space-10) var(--space-6);
    width: 100%;
    min-width: 0;
  }

  .book-page--nanobook .book-hero__cover-clip {
    width: 100%;
    max-width: 34.375rem;
  }

  .book-page--nanobook .book-hero__info {
    position: static;
    padding: 0 var(--space-6) var(--space-6);
  }
}

/* --- Veja também (cross-sell nanobook → livro pago) --- */

.book-crosssell {
  margin: var(--space-20) 0;
}

.book-crosssell__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-16);
  border: 3px solid var(--crosssell-color, var(--color-fg));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.book-crosssell__eyebrow {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-2);
}

.book-crosssell__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.book-crosssell__subtitle {
  color: var(--color-fg-subtle);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-8);
}

.book-crosssell__cta {
  display: inline-flex;
  background-color: var(--crosssell-color, var(--color-fg));
  color: #fff;
  border: none;
}

.book-crosssell__cover {
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-crosssell__img {
  width: auto;
  max-width: 100%;
  max-height: 24rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 1rem 3rem rgba(5, 5, 5, 0.15);
}

@media (max-width: 768px) {
  .book-crosssell__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-10);
  }

  .book-crosssell__cover {
    order: -1;
  }

  .book-crosssell__img {
    max-height: 18rem;
  }
}

/* --- O que você aprenderá (nanobook) --- */

.book-learnings {
  background-color: var(--color-bg-alt, #EBEBEB);
  padding: var(--space-16) 0;
  margin-top: var(--space-16);
}

.book-learnings__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-medium);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-8);
}

.book-learnings__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.book-learnings__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  font-size: var(--text-h6);
  line-height: var(--leading-normal);
  color: var(--color-neutral-900);
}

@media (max-width: 768px) {
  .book-learnings {
    padding: var(--space-10) 0;
  }

  .book-learnings__title {
    font-size: var(--text-h4);
  }

  .book-learnings__card {
    padding: var(--space-5) var(--space-6);
  }
}

.book-learnings + .book-author {
  margin-top: 0;
}

/* --- Livros relacionados --- */

.related.products {
  padding: var(--space-16) 0 var(--space-8);
}

@media (min-width: 1024px) {
  .related.products {
    padding-top: var(--space-20);
  }
}

.related.products > h2 {
  margin: 0 0 var(--space-8);
  padding-inline: var(--container-padding);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-medium);
  color: var(--color-fg);
}

@media (min-width: 1024px) {
  .related.products > h2 {
    padding-inline: var(--space-20);
  }
}

.related.products ul.products {
  padding: var(--space-8) 0 var(--space-8) var(--container-padding);
}

@media (min-width: 1024px) {
  .related.products ul.products {
    padding-left: var(--space-20);
  }
}

.product-loop-spacer {
  display: block !important;
  flex: 0 0 var(--container-padding) !important;
  min-width: var(--container-padding) !important;
  height: 1px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 1024px) {
  .product-loop-spacer {
    flex: 0 0 var(--space-20) !important;
    min-width: var(--space-20) !important;
  }
}