/* =============================================================
   LIVRARIA AKASHA — estilo.css
   Ordem do arquivo:
   1. Variáveis
   2. Base
   3. Peças reutilizáveis (container, espaços de imagem, títulos, botões)
   4. Blocos 1 a 8, na ordem da página
   5. Media queries
   ============================================================= */


/* =============================================================
   1. VARIÁVEIS
   ============================================================= */
:root {
  /* Cores */
  --anil-profundo: #1A0B4F;   /* fundo escuro principal */
  --anil:          #4A2FCE;   /* brilhos, textos de apoio */
  --ouro:          #C9A96E;   /* cor de destaque */
  --branco:        #FDFCFF;   /* fundo claro e texto sobre escuro */
  --tinta:         #0D0B1A;   /* preto cósmico — topbar e assinatura */

  /* Tipografia */
  --display:   'Cinzel', serif;
  --editorial: 'Cormorant Garamond', serif;
  --corpo:     'DM Sans', sans-serif;

  /* Medidas globais */
  --largura-container: 1080px;
  --recuo-container: 24px;
  --raio: 8px;
}


/* =============================================================
   2. BASE
   ============================================================= */
body {
  font-family: var(--corpo);
  background-color: var(--branco);
  color: var(--anil-profundo);
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* =============================================================
   3. PEÇAS REUTILIZÁVEIS
   ============================================================= */

/* --- Container de 1080px --- */
.container-akasha {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--recuo-container);
}

/* --- Espaços reservados de imagem ---
   Retângulos vazios que marcam onde entra a <img> vinda do banco. */
.espaco-img {
  background-color: #EDEBF2;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 4px;
}

.espaco-capa {                 /* capas de livro */
  aspect-ratio: 7 / 10;
}

.espaco-materia {              /* imagens do blog — sangram até a borda do cartão */
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border-width: 0 0 1px 0;
}

/* --- Losango de assinatura --- */
.losango {
  color: var(--ouro);
}

/* --- Título de seção (blocos 5, 6 e 7) --- */
.titulo-secao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.titulo-secao > .losango {
  font-size: 12px;
  line-height: 1;
}

.titulo-secao-texto {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 25px;
  color: var(--anil-profundo);
  margin: 0;
  white-space: nowrap;
}

.filete {
  flex: 1;
  height: 1px;
  background-color: rgba(201, 169, 110, .4);
}

/* Botão "VER TUDO" — bloco 5 */
.botao-ver-tudo {
  flex-shrink: 0;
  width: 104px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 110, .6);
  border-radius: var(--raio);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--anil-profundo);
  transition: background-color .2s ease, border-color .2s ease;
}

.botao-ver-tudo:hover {
  border-color: var(--ouro);
  background-color: rgba(201, 169, 110, .12);
}

/* Link "Ver tudo" / "Ver todas" — blocos 6 e 7 */
.link-ver-tudo {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--anil-profundo);
  opacity: .8;
  transition: opacity .2s ease;
}

.link-ver-tudo:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Botões do banner --- */
.botao-ouro {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding-inline: 22px;
  background-color: var(--ouro);
  color: var(--tinta);
  border-radius: var(--raio);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: filter .2s ease;
}

.botao-ouro:hover {
  filter: brightness(1.08);
}

.botao-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding-inline: 26px;
  border: 1px solid rgba(201, 169, 110, .6);
  border-radius: var(--raio);
  color: var(--ouro);
  font-size: 13px;
  letter-spacing: .04em;
  transition: background-color .2s ease, border-color .2s ease;
}

.botao-contorno:hover {
  border-color: var(--ouro);
  background-color: rgba(201, 169, 110, .12);
}

/* --- Seção clara padrão (blocos 5, 6 e 7) --- */
.secao {
  background-color: var(--branco);
  padding-top: 40px;
  padding-bottom: 34px;
}


/* =============================================================
   4. BLOCO 1 — TOPBAR
   ============================================================= */
.topbar {
  background-color: var(--tinta);
}

.topbar-conteudo {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.topbar-aviso {
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--ouro);
}

.topbar-conteudo .losango {
  font-size: 9px;
  line-height: 1;
}


/* =============================================================
   4. BLOCO 2 — CABEÇALHO
   ============================================================= */
.cabecalho {
  background-color: var(--anil-profundo);
}

.cabecalho-conteudo {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Logo horizontal (LOGO-Akasha-H.png, proporcao 4.78:1).
   A 46px de altura ele mede 220px de largura — a medida de logo do projeto. */
.logo {
  flex-shrink: 0;
  display: block;
}

.logo-img {
  display: block;
  height: 46px;
  width: auto;
  /* Correção óptica: na arte, o ícone ocupa a altura toda (centro y=113)
     mas o texto AKASHA fica centrado em y=130 — 17px abaixo, de 226.
     Centralizar a caixa deixaria a palavra 3px baixa em relação à busca. */
  transform: translateY(-3px);
}

/* Campo de busca */
.busca {
  flex: 1;
  max-width: 540px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 22px;
  padding-right: 5px;
  background-color: var(--branco);
  border-radius: 25px;
}

.busca-campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background-color: transparent;
  font-family: var(--corpo);
  font-size: 14px;
  color: var(--tinta);
}

.busca-campo::placeholder {
  color: rgba(13, 11, 26, .45);
}

.busca-botao {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: var(--ouro);
  color: var(--tinta);
  font-size: 16px;
}

/* Ações da conta */
.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.botao-entrar {
  width: 80px;
  height: 50px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(201, 169, 110, .5);
  border-radius: var(--raio);
  color: var(--ouro);
  transition: border-color .2s ease, background-color .2s ease;
}

.botao-entrar:hover,
.botao-sacola:hover {
  border-color: var(--ouro);
  background-color: rgba(201, 169, 110, .1);
}

.botao-entrar i {
  font-size: 17px;
  line-height: 1;
}

.botao-entrar-texto {
  font-size: 10px;
  letter-spacing: .08em;
}

.botao-sacola {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 110, .5);
  border-radius: var(--raio);
  color: var(--ouro);
  font-size: 18px;
  transition: border-color .2s ease, background-color .2s ease;
}

.sacola-selo {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--ouro);
  color: var(--tinta);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


/* =============================================================
   4. BLOCO 3 — BARRA DE NAVEGAÇÃO E MEGA MENU
   ============================================================= */
.barra-nav {
  background-color: var(--branco);
  border-bottom: 1px solid rgba(201, 169, 110, .4);
}

.barra-nav-conteudo {
  position: relative;   /* âncora do mega menu */
}

.nav-itens {
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--anil-profundo);
}

.botao-categorias {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 20px 0 0;
  border: 0;
  border-right: 1px solid rgba(26, 11, 79, .15);
  background-color: transparent;
  font-family: var(--corpo);
  font-size: 13px;
  color: var(--anil-profundo);
  white-space: nowrap;
}

.botao-categorias .bi-list {
  font-size: 16px;
  line-height: 1;
}

.seta-categorias {
  font-size: 11px;
  line-height: 1;
  color: var(--ouro);
  transition: transform .2s ease;
}

/* Seta gira 180° quando o painel está aberto */
.botao-categorias[aria-expanded="true"] .seta-categorias {
  transform: rotate(180deg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 20px;
}

.nav-link-akasha {
  white-space: nowrap;
  transition: color .2s ease;
}

.nav-link-akasha:hover {
  color: var(--anil);
}

.selo-prevenda {
  flex-shrink: 0;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 100px;
  background-color: var(--anil-profundo);
  color: var(--ouro);
  font-size: 12px;
  white-space: nowrap;
}

.selo-prevenda .losango {
  font-size: 9px;
}

/* --- Mega menu --- */
.mega-menu {
  display: none;                    /* .aberto liberta */
  position: absolute;
  top: calc(100% + 14px);
  left: var(--recuo-container);
  right: var(--recuo-container);
  z-index: 30;
  padding: 30px 34px 26px;
  background-color: var(--branco);
  border-radius: 14px;
  border-top: 2px solid var(--ouro);
  box-shadow: 0 24px 60px rgba(13, 11, 26, .45);
}

.mega-menu.aberto {
  display: block;
}

.mega-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(201, 169, 110, .4);
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--anil-profundo);
}

.mega-titulo .losango {
  font-size: 10px;
  font-family: var(--corpo);
  font-style: normal;
}

.mega-lista li + li {
  margin-top: 11px;
}

.mega-lista a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  color: var(--anil-profundo);
  transition: color .2s ease;
}

.mega-lista a:hover {
  color: var(--anil);
}

.mega-lista i {
  font-size: 16px;
  line-height: 1;
  color: var(--ouro);
}

/* Cartão de destaque da terceira coluna */
.mega-destaque {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(201, 169, 110, .5);
  border-radius: var(--raio);
  background-color: rgba(201, 169, 110, .07);
}

.mega-destaque-rotulo {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ouro);
}

.mega-destaque-titulo {
  margin-top: 6px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--anil-profundo);
}

.mega-destaque-subtitulo {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(26, 11, 79, .7);
}

/* Rodapé do painel */
.mega-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 11, 79, .12);
  font-size: 12px;
}

.mega-rodape-link {
  color: var(--anil-profundo);
  transition: color .2s ease;
}

.mega-rodape-link:hover {
  color: var(--anil);
}

.mega-rodape-contagem {
  color: var(--anil-profundo);
  opacity: .55;
}


/* =============================================================
   4. BLOCO 4 — BANNER CARROSSEL
   ============================================================= */
.banner {
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 76% 46%, rgba(74, 47, 206, .6), transparent 56%);
}

.banner-slide {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 26px 56px 36px;   /* espaço lateral para as setas do carrossel */
}

/* A linha cresce até preencher o slide; as margens negativas do .row do
   Bootstrap anulam o recuo das colunas e alinham o texto ao recuo acima. */
.banner-slide > .row {
  flex: 1;
  min-width: 0;
}

.selo-banner,
.etiqueta-banner {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--ouro);
}

.etiqueta-banner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid rgba(201, 169, 110, .6);
  border-radius: 100px;
}

.titulo-banner {
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.18;
  color: var(--ouro);
  max-width: 15ch;
}

.titulo-banner-menor {
  font-size: 32px;
  max-width: none;
}

.titulo-banner-colecao {
  font-size: 34px;
  max-width: none;
}

.texto-banner {
  margin: 12px 0 20px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(253, 252, 255, .8);
}

.texto-banner-centro {
  margin-inline: auto;
}

.autor-banner {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(253, 252, 255, .75);
}

.linha-preco {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 10px 0 18px;
}

.preco-antigo {
  font-size: 14px;
  color: rgba(253, 252, 255, .55);
  text-decoration: line-through;
}

.preco-atual {
  font-size: 26px;
  font-weight: 700;
  color: var(--ouro);
}

/* Slide 3 — coluna única centralizada */
.slide-centralizado {
  width: 100%;
  text-align: center;
}

.slide-centralizado .titulo-banner {
  margin-inline: auto;
}

/* Capas do banner */
.trio-capas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.capa-lateral {
  width: 80px;
  height: 120px;
}

.capa-central {
  width: 108px;
  height: 162px;
}

.capa-lancamento {
  width: 145px;
  height: 215px;
  margin-inline: auto;
}

/* Setas */
.banner-carrossel .seta-banner {
  width: 40px;
  height: 40px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 110, .45);
  border-radius: 50%;
  background-color: rgba(13, 11, 26, .5);
  color: var(--ouro);
  font-size: 16px;
  opacity: 1;
  transition: background-color .2s ease, border-color .2s ease;
}

.banner-carrossel .seta-banner:hover {
  border-color: var(--ouro);
  background-color: rgba(13, 11, 26, .75);
}

.banner-carrossel .carousel-control-prev {
  left: 2px;
}

.banner-carrossel .carousel-control-next {
  right: 2px;
}

/* Indicadores */
.banner-carrossel .carousel-indicators {
  margin: 0;
  bottom: 14px;
  gap: 8px;
}

.banner-carrossel .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  margin: 0;
  border: 1px solid var(--ouro);
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
}

.banner-carrossel .carousel-indicators .active {
  background-color: var(--ouro);
}


/* =============================================================
   4. BLOCO 5 — EXPLORE POR MUNDO
   ============================================================= */
.cartao-categoria {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 14px;
  border: 1px solid rgba(26, 11, 79, .15);
  border-radius: var(--raio);
  transition: border-color .2s ease, transform .2s ease;
}

.cartao-categoria:hover {
  border-color: var(--ouro);
  transform: translateY(-2px);
}

.cartao-categoria-icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(201, 169, 110, .14);
  color: var(--ouro);
  font-size: 16px;
}

.cartao-categoria-nome {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--anil-profundo);
}


/* =============================================================
   4. BLOCO 6 — DESTAQUES DA SEMANA (cartão de produto)
   ============================================================= */
.cartao-produto-capa {
  position: relative;
  margin-bottom: 13px;
}

.cartao-produto-selo {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 3px;
  background-color: var(--ouro);
  color: var(--tinta);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
}

.cartao-produto-categoria {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(74, 47, 206, .75);
}

.cartao-produto-titulo {
  min-height: 38px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--anil-profundo);
}

.cartao-produto-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cartao-produto-preco {
  font-size: 18px;
  font-weight: 700;
  color: var(--anil-profundo);
}

.botao-sacola-produto {
  flex-shrink: 0;
  width: 36px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ouro);
  border-radius: 6px;
  background-color: transparent;
  color: var(--ouro);
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}

.botao-sacola-produto:hover {
  background-color: var(--ouro);
  color: var(--tinta);
}


/* =============================================================
   4. BLOCO 7 — DO BLOG DA AKASHA (cartão de matéria)
   ============================================================= */
.cartao-materia {
  height: 100%;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease;
}

.cartao-materia:hover {
  border-color: rgba(201, 169, 110, .6);
}

.cartao-materia-topo {
  position: relative;
}

.cartao-materia-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 3px;
  background-color: var(--branco);
  color: var(--anil-profundo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
}

.cartao-materia-corpo {
  padding: 18px;
}

.cartao-materia-data {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--anil-profundo);
  opacity: .5;
}

.cartao-materia-titulo {
  min-height: 50px;
  margin: 8px 0 0;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--anil-profundo);
}

.cartao-materia-resumo {
  min-height: 40px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--anil-profundo);
  opacity: .7;
}

.cartao-materia-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ouro);
}

.cartao-materia-link:hover {
  text-decoration: underline;
}


/* =============================================================
   4. BLOCO 8 — RODAPÉ
   ============================================================= */
.rodape-corpo {
  background-color: var(--anil-profundo);
  padding-top: 42px;
  padding-bottom: 28px;
}

.logo-rodape .logo-img {
  height: 42px;
}

.rodape-descricao {
  max-width: 240px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(253, 252, 255, .72);
}

.rodape-rotulo {
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ouro);
}

.rodape-sociais {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.circulo-social {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 110, .5);
  border-radius: 50%;
  color: var(--ouro);
  font-size: 14px;
  transition: background-color .2s ease, border-color .2s ease;
}

.circulo-social:hover {
  border-color: var(--ouro);
  background-color: rgba(201, 169, 110, .14);
}

.rodape-titulo {
  margin: 0;
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ouro);
}

.rodape-filete {
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 8px;
  margin-bottom: 15px;
  background-color: var(--ouro);
}

.rodape-lista li + li {
  margin-top: 9px;
}

.rodape-lista a {
  font-size: 13px;
  color: rgba(253, 252, 255, .78);
  transition: color .2s ease, opacity .2s ease;
}

.rodape-lista a:hover {
  color: var(--ouro);
  opacity: 1;
}

/* Faixa de pagamento */
.faixa-pagamento {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 110, .22);
}

.faixa-pagamento .rodape-rotulo {
  margin-top: 0;
}

.bandeiras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Caixa da bandeira. A marca dentro é um SVG monocromático em branco,
   guardado em assets/img/ — ver .bandeira-marca abaixo. */
.bandeira {
  width: 45px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 1px solid rgba(253, 252, 255, .25);
  border-radius: 3px;
}

.bandeira-marca {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.selo-seguranca {
  width: 175px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-inline: 12px;
  border: 1px solid rgba(201, 169, 110, .45);
  border-radius: var(--raio);
}

.selo-seguranca .bi-lock {
  font-size: 15px;
  color: var(--ouro);
}

.selo-seguranca-textos {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.selo-seguranca-titulo {
  font-size: 10px;
  color: var(--ouro);
}

.selo-seguranca-subtitulo {
  font-size: 9px;
  color: rgba(253, 252, 255, .6);
}

/* Assinatura */
.rodape-assinatura {
  background-color: var(--tinta);
}

.assinatura-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-block: 14px;
}

.assinatura-direitos {
  font-size: 12px;
  color: rgba(253, 252, 255, .6);
}

.assinatura-direitos .losango {
  font-size: 9px;
}

/* Selo compacto — abraça o conteúdo em vez de ocupar uma caixa fixa,
   com sombra e leve zoom no hover (mesmo gesto dos círculos sociais). */
.pilula-dev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background-color: var(--branco);
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(13, 11, 26, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.pilula-dev:hover,
.pilula-dev:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(13, 11, 26, .3);
}

.pilula-dev-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: rgba(13, 11, 26, .55);
  white-space: nowrap;
}

/* Logo da Sytrion. O arquivo servido (sytrion.png) e o logo.png original
   com a margem transparente aparada, para ocupar o selo por inteiro. */
.pilula-dev-marca {
  display: block;
  height: 17px;
  width: auto;
}


/* ==========================================================
   PÁGINA SOBRE
   ========================================================== */

/* --- Espaço de imagem exclusivo desta página --- */
.espaco-conceito {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}


/* --- BLOCO 1 — Breadcrumb --- */
.trilha {
  background-color: var(--branco);
  border-bottom: 1px solid rgba(26, 11, 79, .1);
  padding-block: 16px;
}

.trilha-lista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: rgba(26, 11, 79, .7);
}

/* O losango separador e decoracao pura: vem do CSS, nao do HTML.
   A cor vem daqui (e nao de opacity no <ol>) para o ouro nao desbotar. */
.trilha-lista li + li::before {
  content: "\25C6";
  margin-inline: 8px;
  color: var(--ouro);
}

.trilha-lista a:hover {
  text-decoration: underline;
}


/* --- BLOCO 2 — Hero institucional --- */
.sobre-hero {
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 50% 10%, rgba(74, 47, 206, .55), transparent 60%);
  padding-block: 48px;
}

.sobre-hero-conteudo {
  text-align: center;
}

.sobre-hero-selo {
  margin-bottom: 20px;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--ouro);
}

.sobre-hero-titulo {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.18;
  color: var(--ouro);
}

.sobre-hero-texto {
  max-width: 520px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(253, 252, 255, .82);
}


/* --- BLOCO 3 — O nome ---
   Grade de areas nomeadas. No desktop o texto ocupa a coluna esquerda e a
   imagem a direita; no celular as mesmas areas sao reempilhadas (ver media
   query) para a imagem cair entre o titulo e os paragrafos. As linhas 1fr
   das pontas centralizam o texto verticalmente contra a imagem. */
.sobre-nome {
  background-color: var(--branco);
  padding-block: 56px;
}

.nome-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas:
    ".      imagem"
    "rotulo imagem"
    "titulo imagem"
    "textos imagem"
    ".      imagem";
  column-gap: 56px;
}

.nome-rotulo {
  grid-area: rotulo;
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--anil);
}

.nome-rotulo .losango {
  font-size: 11px;
}

.nome-titulo {
  grid-area: titulo;
  margin: 0 0 22px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  color: var(--anil-profundo);
}

.nome-figura {
  grid-area: imagem;
  align-self: center;
  margin: 0;
}

.nome-textos {
  grid-area: textos;
}

.nome-textos p {
  max-width: 480px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(13, 11, 26, .78);
}

.nome-textos p + p {
  margin-top: 16px;
}


/* --- BLOCO 4 — Nossa curadoria (fundo tinta) --- */
.secao-curadoria {
  background-color: var(--tinta);
  padding-block: 56px;
}

/* Variacao clara do titulo de secao, para uso sobre fundo escuro */
.titulo-secao-claro .titulo-secao-texto {
  color: var(--ouro);
}

.titulo-secao-claro .filete {
  background-color: rgba(201, 169, 110, .3);
}

.cartao-curadoria {
  height: 100%;
  padding: 26px;
  border: 1px solid rgba(201, 169, 110, .35);
  border-radius: 10px;
}

.cartao-curadoria-icone {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background-color: rgba(201, 169, 110, .14);
  color: var(--ouro);
  font-size: 21px;
}

.cartao-curadoria-titulo {
  margin-bottom: 10px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--ouro);
}

.cartao-curadoria-texto {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(253, 252, 255, .75);
}


/* --- BLOCO 5 — Como a Akasha fala --- */
.secao-voz {
  background-color: var(--branco);
  padding-block: 56px;
}

.grade-voz {
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}

.traco-voz {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-left: 2px solid var(--ouro);
  background-color: rgba(201, 169, 110, .05);
  font-size: 15px;
  line-height: 1.65;
  color: var(--anil-profundo);
}

/* 15px x 1.65 = 24.75px de altura de linha: o losango recebe a mesma
   caixa para centralizar na primeira linha do texto, e nao no topo dela. */
.traco-voz .losango {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 25px;
}

.traco-voz strong {
  font-weight: 600;
}


/* --- BLOCO 6 — Números --- */
.secao-numeros {
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 50% 50%, rgba(74, 47, 206, .45), transparent 65%);
  padding-block: 48px;
}

.grade-numeros {
  text-align: center;
}

.numero-valor {
  font-family: var(--display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--ouro);
}

.numero-rotulo {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(253, 252, 255, .7);
}


/* --- BLOCO 7 — Chamada final --- */
.secao-chamada {
  background-color: var(--branco);
  padding-block: 56px;
}

.chamada-conteudo {
  text-align: center;
}

.chamada-losango {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1;
}

.chamada-titulo {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.22;
  color: var(--anil-profundo);
}

.chamada-texto {
  max-width: 440px;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 11, 79, .72);
}

.chamada-botoes {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.chamada-botoes .botao-ouro {
  width: 200px;
  height: 46px;
  justify-content: center;
}

.chamada-botoes .botao-contorno {
  width: 180px;
  height: 46px;
}

/* O .botao-contorno da home e para fundo escuro (borda ouro).
   Esta variacao serve aos fundos claros. */
.botao-contorno-escuro {
  border-color: rgba(26, 11, 79, .25);
  color: var(--anil-profundo);
}

.botao-contorno-escuro:hover {
  border-color: var(--anil-profundo);
  background-color: rgba(26, 11, 79, .05);
}


/* ==========================================================
   PÁGINA DE PRODUTOS
   ========================================================== */

/* --- BLOCO 2 — Hero horizontal --- */
.produtos-hero {
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 20% 50%, rgba(74, 47, 206, .55), transparent 62%);
  padding-block: 40px;
}

.produtos-hero-conteudo {
  display: flex;
  align-items: center;
  gap: 22px;
}

.produtos-hero-icone {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 169, 110, .45);
  border-radius: 50%;
  background-color: rgba(201, 169, 110, .14);
  color: var(--ouro);
  font-size: 32px;
}

.produtos-hero-selo {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--ouro);
}

.produtos-hero-titulo {
  margin: 8px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--ouro);
}

.produtos-hero-texto {
  max-width: 520px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(253, 252, 255, .8);
}


/* --- BLOCO 3 — Conteúdo: barra lateral fixa + grade elástica --- */
.produtos-conteudo {
  background-color: var(--branco);
  padding-top: 28px;
  padding-bottom: 50px;
}

.produtos-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: start;
}

.produtos-principal {
  min-width: 0;   /* deixa a grade encolher dentro do grid */
}


/* --- 3.1 Barra lateral --- */
.caixa-filtro {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 10px;
}

.caixa-filtro-rotulo {
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--anil-profundo);
}

.item-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--anil-profundo);
  transition: background-color .2s ease;
}

.item-categoria:hover {
  background-color: rgba(26, 11, 79, .04);
}

.categoria-contagem {
  flex-shrink: 0;
  color: rgba(74, 47, 206, .6);
}

/* Estado marcado: é o filtro em vigor */
.categoria-ativa {
  background-color: var(--anil-profundo);
  color: var(--ouro);
}

.categoria-ativa:hover {
  background-color: var(--anil-profundo);
}

.categoria-ativa .categoria-contagem {
  color: var(--ouro);
}

.opcao-filtro {
  display: flex;
  align-items: center;
  gap: 10px;
}

.opcao-filtro + .opcao-filtro {
  margin-top: 12px;
}

/* Caixa de seleção desenhada à mão, mantendo o <input> real por baixo */
.caixa-selecao {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(26, 11, 79, .3);
  border-radius: 3px;
  background-color: var(--branco);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.caixa-selecao:checked {
  border-color: var(--ouro);
  background-color: var(--ouro);
}

.caixa-selecao:checked::after {
  content: "\2713";
  font-size: 10px;
  line-height: 1;
  color: var(--tinta);
}

.caixa-selecao:focus-visible {
  outline: 2px solid var(--anil);
  outline-offset: 2px;
}

.opcao-filtro label {
  font-size: 13px;
  color: var(--anil-profundo);
  cursor: pointer;
}


/* --- 3.2 Cabeçalho da grade --- */
.cabecalho-grade {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(201, 169, 110, .4);
}

.contagem-resultados {
  font-size: 13px;
  color: var(--anil-profundo);
  opacity: .65;
}

.ordenar-campo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ordenar-rotulo {
  font-size: 12px;
  color: var(--anil-profundo);
  opacity: .55;
}

/* A seta é desenhada em SVG embutido para poder sair em ouro */
.select-ordenar {
  width: 196px;
  height: 30px;
  padding: 0 30px 0 10px;
  appearance: none;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: 6px;
  background-color: var(--branco);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9A96E'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  font-family: var(--corpo);
  font-size: 12.5px;
  color: var(--anil-profundo);
  cursor: pointer;
}

.grade-produtos {
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}


/* --- Paginação (reaproveitada pela página do blog) --- */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.pagina-botao {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: 6px;
  font-size: 13px;
  color: var(--anil-profundo);
  transition: border-color .2s ease, background-color .2s ease;
}

.pagina-botao:hover {
  border-color: var(--ouro);
}

.pagina-atual {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
  color: var(--ouro);
}

.pagina-atual:hover {
  border-color: var(--anil-profundo);
}

.pagina-reticencias {
  color: var(--anil-profundo);
  opacity: .45;
}


/* --- Barra de ações: existe só abaixo de 992px (ver media query) --- */
.barra-acoes {
  display: none;
  margin-bottom: 22px;
}

.barra-acoes-contagem {
  height: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--anil-profundo);
  opacity: .65;
}

.barra-acoes-botoes {
  display: flex;
  gap: 13px;
}

.botao-acao {
  width: 165px;
  height: 42px;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: var(--raio);
  background-color: transparent;
  font-family: var(--corpo);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--anil-profundo);
}

.botao-acao-cheio {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
  color: var(--ouro);
}


/* --- BLOCO 4 — Painéis do celular (Offcanvas do Bootstrap) --- */
.painel-akasha {
  height: 80vh;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-color: var(--branco);
}

.painel-akasha.painel-ordenar {
  height: auto;
}

.painel-alca {
  width: 60px;
  height: 5px;
  margin: 14px auto;
  border-radius: 3px;
  background-color: rgba(26, 11, 79, .25);
}

.painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 14px;
  border-bottom: 1px solid rgba(26, 11, 79, .12);
}

.painel-titulo {
  width: 120px;
  height: 26px;
  margin: 0;
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 26px;
  color: var(--anil-profundo);
}

.painel-fechar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: 50%;
  background-color: transparent;
  font-size: 13px;
  color: var(--anil-profundo);
}

.painel-corpo {
  padding: 18px 20px;
}

/* No painel, os itens ficam maiores para caber o dedo */
.painel-corpo .item-categoria {
  height: 34px;
}

.painel-corpo .opcao-filtro {
  height: 30px;
}

.painel-rodape {
  display: flex;
  gap: 13px;
  padding: 14px 20px;
  border-top: 1px solid rgba(26, 11, 79, .12);
}

.botao-painel {
  flex: 1;
  height: 46px;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: var(--raio);
  background-color: transparent;
  font-family: var(--corpo);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--anil-profundo);
}

.botao-painel-cheio {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
  color: var(--ouro);
}

.lista-ordenar .item-ordenar {
  display: block;
  padding: 13px 4px;
  font-size: 14px;
  color: var(--anil-profundo);
}

.lista-ordenar li + li {
  border-top: 1px solid rgba(26, 11, 79, .08);
}


/* ==========================================================
   PÁGINA BLOG
   ========================================================== */

/* Espaço de imagem da matéria em destaque: 16/10, não 16/9.
   Sangra até as bordas do cartão, então a única borda é a que separa
   a imagem do texto (à direita no desktop, embaixo no celular). */
.espaco-materia-destaque {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  border-width: 0 1px 0 0;
}


/* --- BLOCO 2 — Hero --- */
.blog-hero {
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 50% 10%, rgba(74, 47, 206, .55), transparent 60%);
  padding-block: 58px;
}

.blog-hero-conteudo {
  text-align: center;
}

.blog-hero-selo {
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--ouro);
}

.blog-hero-titulo {
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.18;
  color: var(--ouro);
}

.blog-hero-texto {
  max-width: 480px;
  margin: 18px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(253, 252, 255, .82);
}


/* --- BLOCO 3 — Matéria em destaque --- */
.blog-destaque {
  background-color: var(--branco);
  padding-top: 44px;
}

.cartao-destaque {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 12px;
  overflow: hidden;
}

.cartao-destaque-figura {
  position: relative;
}

.cartao-destaque-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 13px;
  border-radius: 3px;
  background-color: var(--branco);
  color: var(--anil-profundo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
}

.cartao-destaque-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 32px 34px 0;
}

.cartao-destaque-meta {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--anil-profundo);
  opacity: .5;
}

.cartao-destaque-titulo {
  margin: 0 0 12px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.28;
  color: var(--anil-profundo);
}

.cartao-destaque-resumo {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--anil-profundo);
  opacity: .72;
}

.cartao-destaque-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.botao-ler-materia {
  width: 170px;
  height: 42px;
  justify-content: center;
}

/* Selo do acervo: a ligação entre matéria e produto.
   Reutilizável nas páginas de matéria que virão depois. */
.selo-acervo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--anil);
}

.selo-acervo i {
  font-size: 15px;
  line-height: 1;
}


/* --- BLOCO 4 — Filtros --- */
.blog-filtros {
  background-color: var(--branco);
  padding-top: 36px;
  padding-bottom: 24px;
}

.filtros-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filtros-rotulo {
  flex-shrink: 0;
  margin-right: 6px;
  font-size: 12px;
  color: var(--anil-profundo);
  opacity: .55;
}

.pilula-filtro {
  flex-shrink: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding-inline: 18px;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--anil-profundo);
  transition: border-color .2s ease;
}

.pilula-filtro:hover {
  border-color: var(--ouro);
}

.pilula-filtro-ativa {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
  color: var(--ouro);
}

.pilula-filtro-ativa:hover {
  border-color: var(--anil-profundo);
}

.filtros-contagem {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  color: var(--anil-profundo);
  opacity: .55;
}


/* --- BLOCO 5 — Grade de matérias --- */
.blog-grade-secao {
  background-color: var(--branco);
  padding-bottom: 50px;
}

.blog-grade {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.paginacao-blog {
  margin-top: 34px;
}

/* O cartao de materia e o mesmo da home; aqui a data usa <time datetime>,
   que e inline por padrao. Garante a mesma caixa que o <p> original. */
time.cartao-materia-data {
  display: block;
}


/* ==========================================================
   IMAGENS VINDAS DO BANCO
   ========================================================== */
/* As classes .espaco-* seguem valendo para quem ainda não tem imagem
   cadastrada. Quando existe arquivo, a <img> entra no lugar — com a mesma
   proporção, para a grade não dançar conforme o cadastro avança. */

.capa-produto {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: 4px;
}

.imagem-materia,
.imagem-destaque {
  display: block;
  width: 100%;
  object-fit: cover;
}

.imagem-materia {
  aspect-ratio: 16 / 9;
}

.imagem-destaque {
  aspect-ratio: 16 / 10;
  height: 100%;
}

/* Seção sem nada publicado ainda */
.aviso-vazio {
  padding: 26px 0;
  font-size: 14px;
  color: rgba(26, 11, 79, .6);
}


/* ==========================================================
   PÁGINA DO PRODUTO
   ========================================================== */

.produto-topo {
  padding-bottom: 20px;
}

/* Grade nomeada: galeria à esquerda e compra à direita no desktop; abaixo de
   992px viram uma coluna só, com a capa em cima. */
.produto-grade {
  display: grid;
  grid-template-columns: minmax(0, 515fr) minmax(0, 469fr);
  gap: 48px;
  align-items: start;
}

.produto-galeria {
  display: flex;
  gap: 10px;
}

/* Reservado para quando existir uma tabela de imagens adicionais. A coluna já
   está prevista aqui para o leiaute não precisar ser refeito depois. */
.produto-miniaturas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.produto-miniatura {
  width: 64px;
  height: 92px;
  padding: 0;
  border: 1px solid rgba(26, 11, 79, .15);
  border-radius: 4px;
  background: none;
  overflow: hidden;
  cursor: pointer;
}

.produto-capa {
  position: relative;
  flex: 1;
  min-width: 0;
}

.produto-capa-img {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: 6px;
}

.selo-desconto {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 3px;
  background-color: #B42318;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}


/* --- Coluna da compra --- */

.produto-categoria {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--anil);
}

.produto-titulo {
  margin: 10px 0 0;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--anil-profundo);
}

.produto-autor {
  margin-top: 6px;
  font-size: 15px;
  color: rgba(26, 11, 79, .65);
}

.produto-avaliacao {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(26, 11, 79, .6);
}

.estrelas {
  color: var(--ouro);
  font-size: 12px;
  letter-spacing: 1px;
}

.produto-codigo {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}

.produto-divisoria {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid rgba(26, 11, 79, .12);
}

.produto-preco-antigo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(26, 11, 79, .5);
}

.produto-desconto {
  padding: 2px 8px;
  border-radius: 3px;
  background-color: rgba(180, 35, 24, .1);
  font-size: 12px;
  font-weight: 700;
  color: #B42318;
}

.produto-preco {
  margin: 4px 0 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--anil-profundo);
}

.produto-parcelamento {
  font-size: 13.5px;
  color: rgba(26, 11, 79, .7);
}

.produto-pix {
  margin-top: 6px;
  font-size: 13.5px;
  color: #1F7A4D;
}

.produto-pix .losango {
  font-size: 10px;
}

.produto-linha-compra {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
}

.seletor-quantidade {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 124px;
  height: 50px;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: var(--raio);
  overflow: hidden;
}

.seletor-botao {
  width: 38px;
  height: 100%;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--anil-profundo);
  cursor: pointer;
}

.seletor-botao:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.seletor-campo {
  width: 48px;
  height: 100%;
  border: 0;
  border-inline: 1px solid rgba(26, 11, 79, .12);
  text-align: center;
  font-family: var(--corpo);
  font-size: 15px;
  color: var(--anil-profundo);
  -moz-appearance: textfield;
}

/* As setinhas nativas do campo numérico ficam pequenas demais para o dedo e
   duplicariam os botões de mais e menos. */
.seletor-campo::-webkit-outer-spin-button,
.seletor-campo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.produto-botao-sacola {
  flex: 1;
  height: 50px;
  justify-content: center;
  border: 0;
  font-family: var(--corpo);
  cursor: pointer;
}

.produto-botao-comprar {
  width: 100%;
  height: 50px;
  justify-content: center;
  background: none;
  font-family: var(--corpo);
  cursor: pointer;
}

.produto-ultimas {
  margin-top: 10px;
  font-size: 12.5px;
  color: #8A6D3B;
}

.produto-indisponivel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(26, 11, 79, .15);
  border-radius: var(--raio);
  background-color: rgba(26, 11, 79, .03);
  font-size: 14px;
  color: rgba(26, 11, 79, .6);
}

.produto-garantias {
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

.produto-garantias li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: rgba(26, 11, 79, .7);
}

.produto-garantias i {
  font-size: 18px;
  color: var(--ouro);
}


/* --- Descrição e ficha técnica --- */

.produto-detalhes {
  padding-top: 10px;
}

.produto-descricao p {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(13, 11, 26, .78);
}

.ficha-tecnica {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ficha-tecnica th,
.ficha-tecnica td {
  height: 42px;
  padding: 0 14px;
  text-align: left;
  vertical-align: middle;
}

.ficha-tecnica th {
  width: 44%;
  font-weight: 500;
  color: rgba(26, 11, 79, .6);
}

.ficha-tecnica td {
  color: var(--anil-profundo);
}

/* Faixa alternada: com oito linhas de rótulo curto, o olho se perde sem ela. */
.ficha-tecnica tr:nth-child(odd) {
  background-color: rgba(26, 11, 79, .03);
}


/* --- Matéria ligada ao produto --- */

.materia-ligada {
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 30% 50%, rgba(74, 47, 206, .55), transparent 62%);
  padding-block: 30px;
}

.materia-ligada-conteudo {
  display: flex;
  align-items: center;
  gap: 22px;
}

.materia-ligada-img {
  flex-shrink: 0;
  width: 150px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

.materia-ligada-textos {
  flex: 1;
  min-width: 0;
}

.materia-ligada-selo {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ouro);
}

.materia-ligada-titulo {
  margin: 8px 0 4px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--branco);
}

.materia-ligada-meta {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(253, 252, 255, .6);
}

.materia-ligada-botao {
  flex-shrink: 0;
  width: 160px;
  height: 44px;
  justify-content: center;
}


/* --- Barra de compra do celular --- */
/* Escondida no desktop: lá a coluna de compra já acompanha a leitura. */
.barra-compra-celular {
  display: none;
}

/* A busca da página 404 não fica sobre fundo escuro como a do cabeçalho. */
.busca-erro {
  max-width: 420px;
  margin: 0 auto 20px;
  border: 1px solid rgba(26, 11, 79, .15);
}


@media (max-width: 991.98px) {
  .produto-grade {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* As miniaturas passam de coluna lateral a fileira embaixo da capa. */
  .produto-galeria {
    flex-direction: column-reverse;
  }

  .produto-miniaturas {
    flex-direction: row;
  }

  .produto-capa {
    max-width: 320px;
    margin-inline: auto;
  }

  .materia-ligada-conteudo {
    flex-direction: column;
    align-items: flex-start;
  }

  .materia-ligada-img {
    width: 100%;
  }

  .materia-ligada-botao {
    width: 100%;
  }

  /* A barra fixa aparece só aqui, onde o botão sai de vista ao rolar. */
  .barra-compra-celular {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid rgba(26, 11, 79, .12);
    background-color: var(--branco);
    box-shadow: 0 -6px 20px rgba(13, 11, 26, .1);
  }

  .barra-compra-valor {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: var(--anil-profundo);
  }

  .barra-compra-parcela {
    display: block;
    font-size: 12px;
    color: rgba(26, 11, 79, .6);
  }

  .barra-compra-botao {
    border: 0;
    font-family: var(--corpo);
    cursor: pointer;
  }
}



/* ==========================================================
   PEÇAS COMPARTILHADAS DA LOJA
   ==========================================================
   Formulários, avisos e pílulas existiam só no admin.css. Agora a loja também
   precisa deles — no checkout e na área da conta —, e ela não carrega aquele
   arquivo. As cores são as mesmas, para as duas partes do site parecerem uma. */

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--anil-profundo);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ouro);
  box-shadow: 0 0 0 .2rem rgba(201, 169, 110, .25);
}

.form-check-input:checked {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
}

.obrigatorio {
  color: #B42318;
}

.campo-ajuda {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(26, 11, 79, .55);
}

.mensagem {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
}

.mensagem-sucesso {
  border: 1px solid rgba(31, 122, 77, .3);
  background-color: rgba(31, 122, 77, .08);
  color: #1F7A4D;
}

.mensagem-erro {
  border: 1px solid rgba(180, 35, 24, .3);
  background-color: rgba(180, 35, 24, .06);
  color: #B42318;
}

.mensagem-erro ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.pilula {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.pilula-rascunho  { background-color: rgba(201, 169, 110, .15); color: #8A6D3B; }
.pilula-publicado { background-color: rgba(31, 122, 77, .12);   color: #1F7A4D; }
.pilula-inativo   { background-color: rgba(13, 11, 26, .08);    color: rgba(13, 11, 26, .55); }
.pilula-tag       { background-color: rgba(74, 47, 206, .1);    color: var(--anil); letter-spacing: .06em; }
.pilula-cancelado { background-color: rgba(180, 35, 24, .1);    color: #B42318; }


/* ==========================================================
   CAMINHO DA COMPRA (sacola → pagamento → confirmação)
   ========================================================== */

.etapas-compra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.etapa-compra {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(26, 11, 79, .45);
}

/* A seta entre uma etapa e a seguinte */
.etapa-compra + .etapa-compra::before {
  content: "\203A";
  margin-right: 4px;
  color: rgba(26, 11, 79, .3);
}

.etapa-numero {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: 50%;
  font-size: 12px;
}

.etapa-concluida {
  color: var(--anil-profundo);
}

.etapa-concluida .etapa-numero {
  border-color: var(--ouro);
  background-color: var(--ouro);
  color: var(--tinta);
}

.etapa-atual {
  font-weight: 500;
  color: var(--anil-profundo);
}

.etapa-atual .etapa-numero {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
  color: var(--ouro);
}


/* --- Blocos do checkout --- */

.cartao-checkout {
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 10px;
  background-color: var(--branco);
}

.cartao-checkout-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--anil-profundo);
}

.cartao-checkout-titulo .losango {
  font-family: var(--corpo);
  font-style: normal;
  font-size: 11px;
}


/* --- Formas de pagamento --- */

.opcoes-pagamento {
  display: grid;
  gap: 10px;
}

.cartao-pagamento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(26, 11, 79, .15);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.cartao-pagamento:hover {
  border-color: var(--ouro);
}

/* :has() deixa o cartão inteiro reagir ao radio que está dentro dele —
   sem precisar de JavaScript para pintar a opção escolhida. */
.cartao-pagamento:has(input:checked) {
  border-color: var(--anil-profundo);
  background-color: rgba(74, 47, 206, .04);
}

.cartao-pagamento-icone {
  font-size: 20px;
  color: var(--ouro);
}

.cartao-pagamento-textos {
  display: flex;
  flex-direction: column;
}

.cartao-pagamento-nome {
  font-size: 14px;
  color: var(--anil-profundo);
}

.cartao-pagamento-apoio {
  font-size: 12px;
  color: rgba(26, 11, 79, .55);
}

.campos-cartao {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 11, 79, .1);
}

.aviso-demonstracao {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8A6D3B;
}


/* --- Lista de revisão --- */

.revisao-itens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.revisao-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(26, 11, 79, .08);
}

.revisao-item:last-child {
  border-bottom: 0;
}

.revisao-item-textos {
  flex: 1;
  min-width: 0;
}

.revisao-item-quantidade {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(26, 11, 79, .55);
}

.revisao-item-valor {
  font-weight: 700;
  color: var(--anil-profundo);
  white-space: nowrap;
}


/* --- Resumo lateral --- */

.resumo-compra {
  position: sticky;
  top: 20px;
  padding: 24px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 10px;
  background-color: var(--branco);
}

.resumo-linhas {
  margin: 0 0 18px;
}

.resumo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.resumo-linha dt {
  font-weight: 400;
  color: rgba(26, 11, 79, .7);
}

.resumo-linha dd {
  margin: 0;
  color: var(--anil-profundo);
}

.resumo-linha-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 11, 79, .12);
}

.resumo-linha-total dt {
  font-size: 15px;
  color: var(--anil-profundo);
}

.resumo-linha-total dd {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
}

.resumo-linhas-compacto {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(26, 11, 79, .12);
}

.frete-gratis {
  color: #1F7A4D;
}

.resumo-apoio {
  margin-bottom: 16px;
  font-size: 12.5px;
  color: #8A6D3B;
}

.resumo-confirmar {
  width: 100%;
  justify-content: center;
  border: 0;
  font-family: var(--corpo);
  cursor: pointer;
}

.resumo-voltar {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  text-align: center;
  color: rgba(26, 11, 79, .55);
}


/* ==========================================================
   CONFIRMAÇÃO DO PEDIDO
   ========================================================== */

.confirmacao-topo {
  padding: 20px 0 30px;
  text-align: center;
}

.confirmacao-icone {
  font-size: 44px;
  color: #1F7A4D;
}

.confirmacao-titulo {
  margin: 14px 0 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  color: var(--anil-profundo);
}

.confirmacao-apoio {
  color: rgba(26, 11, 79, .7);
}

.confirmacao-codigo {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 20px;
  border: 1px solid rgba(201, 169, 110, .6);
  border-radius: 8px;
  background-color: rgba(201, 169, 110, .1);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--anil-profundo);
}

.confirmacao-acoes {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.bloco-pagamento {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 8px;
  background-color: rgba(26, 11, 79, .02);
}

.bloco-pagamento-rotulo {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26, 11, 79, .5);
}

.bloco-pagamento-codigo {
  display: block;
  margin-top: 8px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  word-break: break-all;
  color: var(--anil-profundo);
}

.dado-endereco,
.dado-forma,
.dado-prazo {
  font-size: 14px;
  line-height: 1.6;
  color: var(--anil-profundo);
}

.dado-forma,
.dado-prazo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.dado-forma i,
.dado-prazo i {
  color: var(--ouro);
}


/* ==========================================================
   LINHA DO TEMPO DO PEDIDO
   ========================================================== */

.linha-tempo {
  display: flex;
  margin: 22px 0 28px;
  padding: 0;
  list-style: none;
}

.etapa-tempo {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  color: rgba(26, 11, 79, .45);
}

/* O traço que liga uma etapa à anterior. Fica atrás da bolinha. */
.etapa-tempo:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  height: 2px;
  background-color: rgba(26, 11, 79, .12);
}

.etapa-tempo-marca {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 11, 79, .15);
  border-radius: 50%;
  background-color: var(--branco);
  font-size: 16px;
}

.etapa-tempo-nome {
  display: block;
  margin-top: 8px;
}

.etapa-tempo-feita {
  color: var(--anil-profundo);
}

.etapa-tempo-feita .etapa-tempo-marca {
  border-color: var(--ouro);
  background-color: var(--ouro);
  color: var(--tinta);
}

.etapa-tempo-feita:not(:first-child)::before {
  background-color: var(--ouro);
}

.etapa-tempo-atual {
  font-weight: 500;
}

.etapa-tempo-atual .etapa-tempo-marca {
  box-shadow: 0 0 0 4px rgba(201, 169, 110, .25);
}

.pedido-data {
  margin-bottom: 4px;
  font-size: 13px;
  color: rgba(26, 11, 79, .55);
}


/* --- Histórico de pedidos na conta --- */

.tabela-pedidos {
  margin: 0;
  vertical-align: middle;
}

.tabela-pedidos th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26, 11, 79, .5);
  white-space: nowrap;
}

.codigo-pedido {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  color: var(--anil);
}


@media (max-width: 575.98px) {
  .linha-tempo {
    font-size: 11px;
  }

  .etapa-tempo-marca {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .etapa-tempo:not(:first-child)::before {
    top: 14px;
  }
}


/* ==========================================================
   ÁREA DA CONTA
   ========================================================== */

.cartao-conta {
  padding: 24px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: 10px;
  background-color: var(--branco);
}

.cartao-conta-titulo {
  margin: 0 0 18px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--anil-profundo);
}

.lista-dados {
  margin: 0 0 20px;
}

.lista-dados dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26, 11, 79, .5);
}

.lista-dados dd {
  margin: 2px 0 14px;
  font-size: 15px;
  color: var(--anil-profundo);
}

.conta-vazio {
  padding: 34px 0 10px;
  text-align: center;
  color: rgba(26, 11, 79, .65);
}

.conta-vazio i {
  font-size: 30px;
  color: var(--ouro);
}

.conta-vazio p {
  margin: 12px 0 18px;
}


/* ==========================================================
   SACOLA (CARRINHO)
   ========================================================== */

/* O botão da sacola virou um formulário; o form não pode quebrar a linha
   de preço + botão do cartão. */
.form-sacola {
  display: inline-flex;
  margin: 0;
}

/* Faixa de aviso depois de uma ação ("livro foi para a sacola") */
.aviso-carrinho {
  padding: 11px 0;
  background-color: rgba(201, 169, 110, .16);
  border-bottom: 1px solid rgba(201, 169, 110, .4);
  font-size: 13.5px;
  color: var(--anil-profundo);
}

.sacola-vazia {
  padding: 50px 0 60px;
  text-align: center;
  color: rgba(26, 11, 79, .65);
}

.sacola-vazia i {
  font-size: 34px;
  color: var(--ouro);
}

.sacola-vazia p {
  margin: 12px 0 20px;
}

.tabela-sacola {
  vertical-align: middle;
}

.tabela-sacola th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26, 11, 79, .55);
  white-space: nowrap;
}

.coluna-capa-sacola {
  width: 62px;
}

.capa-sacola {
  display: block;
  width: 48px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
}

.capa-sacola-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EDEBF2;
  color: rgba(26, 11, 79, .35);
}

.sacola-titulo {
  display: block;
  font-size: 14px;
  color: var(--anil-profundo);
}

.sacola-estoque {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #8A6D3B;
}

.campo-quantidade {
  width: 74px;
  margin-inline: auto;
  text-align: center;
}

.sacola-subtotal {
  font-weight: 700;
  color: var(--anil-profundo);
}

.botao-remover {
  border: 0;
  background: none;
  font-size: 13px;
  color: rgba(26, 11, 79, .45);
  cursor: pointer;
}

.botao-remover:hover {
  color: #B42318;
}

.sacola-rodape {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(26, 11, 79, .12);
}

.sacola-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sacola-total {
  min-width: 250px;
  text-align: right;
}

.sacola-total-rotulo {
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(26, 11, 79, .55);
}

.sacola-total-valor {
  margin: 4px 0 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  color: var(--anil-profundo);
}

.sacola-total-apoio {
  margin-bottom: 14px;
  font-size: 12px;
  color: rgba(26, 11, 79, .55);
}

.sacola-finalizar {
  width: 100%;
  justify-content: center;
}

.sacola-esvaziar {
  margin-top: 16px;
}

.link-esvaziar {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12.5px;
  color: rgba(26, 11, 79, .55);
  text-decoration: underline;
  cursor: pointer;
}


/* =============================================================
   5. MEDIA QUERIES
   ============================================================= */

/* --- Até 991px: busca em linha própria, nav com rolagem horizontal --- */
@media (max-width: 991.98px) {

  .cabecalho-conteudo {
    padding-top: 16px;
    padding-bottom: 16px;
    row-gap: 16px;
  }

  .busca {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .cabecalho-acoes {
    order: 2;
  }

  .nav-itens {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-itens::-webkit-scrollbar {
    display: none;
  }

  .selo-prevenda {
    margin-left: 24px;
  }

  .titulo-banner {
    font-size: 30px;
    max-width: none;
  }

  .titulo-banner-menor,
  .titulo-banner-colecao {
    font-size: 28px;
  }

  /* --- Página sobre --- */
  .sobre-hero-titulo {
    font-size: 30px;
  }

  .sobre-hero-texto {
    font-size: 15px;
  }

  /* Mesmas areas da grade, reempilhadas: a imagem sobe para depois do
     titulo, em vez de ficar por ultimo. */
  .nome-grade {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "rotulo"
      "titulo"
      "imagem"
      "textos";
    column-gap: 0;
  }

  .nome-figura {
    margin-bottom: 22px;
  }

  .grade-voz {
    --bs-gutter-y: 12px;
  }

  .grade-numeros {
    --bs-gutter-y: 50px;
  }

  .chamada-botoes {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .chamada-botoes .botao-ouro,
  .chamada-botoes .botao-contorno {
    width: 100%;
  }

  /* --- Página de produtos --- */
  /* A barra lateral sai de cena e vira o painel deslizante do rodapé */
  .produtos-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .barra-filtros {
    display: none;
  }

  .barra-acoes {
    display: block;
  }

  /* --- Página blog --- */
  .blog-hero-titulo {
    font-size: 32px;
  }

  /* O cartão de destaque vira vertical: imagem em cima, texto embaixo */
  .cartao-destaque {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .espaco-materia-destaque {
    border-width: 0 0 1px 0;
  }

  .cartao-destaque-corpo {
    padding: 24px;
  }

  .cartao-destaque-acoes {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* --- Até 767px: um aviso na topbar, recuo de 16px, sem setas no banner --- */
@media (max-width: 767.98px) {

  .oculto-mobile {
    display: none;
  }

  :root {
    --recuo-container: 16px;
  }

  .logo-img {
    height: 38px;
  }

  /* O título de seção passa a poder quebrar, para não estourar a linha */
  .titulo-secao {
    gap: 10px;
  }

  .titulo-secao-texto {
    font-size: 21px;
    white-space: normal;
  }

  .botao-ver-tudo {
    width: auto;
    padding-inline: 14px;
  }

  .banner-slide {
    padding: 26px 0 34px;
  }

  .banner-carrossel .seta-banner {
    display: none;
  }

  .titulo-banner {
    font-size: 26px;
  }

  .titulo-banner-menor,
  .titulo-banner-colecao {
    font-size: 24px;
  }

  .mega-menu {
    padding: 24px 20px 22px;
  }

  .assinatura-conteudo {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .faixa-pagamento {
    align-items: flex-start;
  }

  /* --- Página de produtos --- */
  .produtos-hero-conteudo {
    flex-direction: column;
    text-align: center;
  }

  .produtos-hero-texto {
    margin-inline: auto;
  }

  .produtos-hero-titulo {
    font-size: 30px;
  }

  .barra-acoes-botoes .botao-acao {
    flex: 1;
    width: auto;
  }

  /* Sem espaço para reticências e última página */
  .pagina-reticencias,
  .pagina-ultima {
    display: none;
  }

  /* --- Página blog --- */
  .blog-hero-titulo {
    font-size: 26px;
  }

  /* A fileira de filtros rola na horizontal, sem barra à vista */
  .filtros-linha {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filtros-linha::-webkit-scrollbar {
    display: none;
  }

  .filtros-rotulo,
  .filtros-contagem {
    display: none;
  }
}
.limpar-busca { margin-left: 8px; color: rgba(253, 252, 255, .9); text-decoration: underline; }


/* ==========================================================
   GALERIA DO PRODUTO — várias imagens
   ========================================================== */

.produto-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produto-miniatura:hover {
  border-color: rgba(201, 169, 110, .7);
}

/* A miniatura da imagem que está na capa grande: borda dourada. */
.produto-miniatura.ativa {
  border-color: var(--ouro);
  box-shadow: 0 0 0 1px var(--ouro);
}

.produto-miniatura:focus-visible {
  outline: 2px solid var(--anil);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  /* Em fileira embaixo da capa, as miniaturas rolam de lado se não couberem. */
  .produto-miniaturas {
    justify-content: center;
    overflow-x: auto;
    padding: 2px;
  }

  .produto-miniatura {
    flex-shrink: 0;
  }
}


/* ==========================================================
   AVALIAÇÕES
   ========================================================== */

/* --- Resumo no topo da página (só existe com avaliação visível) --- */
.produto-avaliacao-media {
  font-weight: 700;
  color: var(--anil-profundo);
}

.produto-avaliacao-conta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.produto-avaliacao-conta:hover {
  color: var(--anil-profundo);
}

/* --- Seção --- */
.produto-avaliacoes {
  padding-top: 10px;
  scroll-margin-top: 20px;
}

.aviso-avaliacao {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: var(--raio);
  font-size: 14px;
}

.aviso-avaliacao-sucesso {
  border: 1px solid rgba(31, 122, 77, .3);
  background-color: rgba(31, 122, 77, .08);
  color: #1F7A4D;
}

.aviso-avaliacao-erro {
  border: 1px solid rgba(180, 35, 24, .3);
  background-color: rgba(180, 35, 24, .06);
  color: #B42318;
}

/* --- Resumo à esquerda: média grande, estrelas e barras --- */
.resumo-media {
  font-family: var(--display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  color: var(--anil-profundo);
}

.resumo-estrelas {
  margin: 10px 0 4px;
  font-size: 18px;
}

.resumo-contagem {
  font-size: 13px;
  color: rgba(26, 11, 79, .6);
}

.barras-notas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.barra-nota {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--anil-profundo);
}

.barra-nota-rotulo i {
  font-size: 10px;
  color: var(--ouro);
}

.barra-nota-trilho {
  height: 8px;
  border-radius: 100px;
  background-color: rgba(26, 11, 79, .08);
  overflow: hidden;
}

.barra-nota-preenchida {
  display: block;
  height: 100%;
  border-radius: 100px;
  background-color: var(--ouro);
}

.barra-nota-total {
  text-align: right;
  color: rgba(26, 11, 79, .6);
}

/* Livro sem avaliação: um convite, não um zero. */
.avaliacoes-vazio {
  font-family: var(--editorial);
  font-style: italic;
  font-size: 21px;
  line-height: 1.35;
  color: var(--anil-profundo);
}

.avaliar-entrar {
  margin-top: 20px;
}

/* --- Formulário --- */
.form-avaliacao {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(26, 11, 79, .12);
  border-radius: var(--raio);
  background-color: rgba(26, 11, 79, .02);
}

.form-avaliacao-titulo {
  margin-bottom: 12px;
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--anil-profundo);
}

.escolha-nota {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

/* O <legend> do Bootstrap vem grande e flutuando; aqui ele é um rótulo comum. */
.form-avaliacao-rotulo,
legend.form-avaliacao-rotulo {
  float: none;
  display: block;
  width: auto;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26, 11, 79, .65);
}

.form-avaliacao-opcional {
  letter-spacing: 0;
  text-transform: none;
}

.estrelas-escolha {
  display: inline-flex;
  gap: 4px;
}

/* O radio some da vista, mas continua na página: recebe o foco do teclado e
   é o que o leitor de tela anuncia. display:none tiraria as duas coisas. */
.estrela-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.estrela-rotulo {
  font-size: 28px;
  line-height: 1;
  color: rgba(26, 11, 79, .2);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}

.estrela-rotulo:hover {
  transform: scale(1.1);
}

/* Com JavaScript, a classe "acesa" pinta até a estrela escolhida. Sem ele,
   o CSS pinta ao menos a própria estrela marcada. */
.estrela-rotulo.acesa,
.estrelas-escolha:not(.com-js) .estrela-radio:checked + .estrela-rotulo {
  color: var(--ouro);
}

.estrela-radio:focus-visible + .estrela-rotulo {
  outline: 2px solid var(--anil);
  outline-offset: 2px;
  border-radius: 4px;
}

.form-avaliacao-campo {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: var(--raio);
  background-color: #fff;
  font-family: var(--corpo);
  font-size: 14px;
  color: var(--tinta);
  resize: vertical;
}

.form-avaliacao-campo:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 .2rem rgba(201, 169, 110, .25);
}

.form-avaliacao-contador {
  margin-top: 4px;
  font-size: 12px;
  text-align: right;
  color: rgba(26, 11, 79, .55);
}

.form-avaliacao-contador.no-limite {
  color: #B42318;
}

.form-avaliacao-nota {
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8A6D3B;
}

.form-avaliacao-botao {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
  border: 0;
  font-family: var(--corpo);
  cursor: pointer;
}

/* --- Lista à direita --- */
.lista-avaliacoes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.avaliacao {
  padding: 18px 0;
  border-bottom: 1px solid rgba(26, 11, 79, .1);
}

.avaliacao:first-child {
  padding-top: 0;
}

.avaliacao-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.avaliacao-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--anil-profundo);
}

/* Quem comprou o livro: verde discreto, como a linha do PIX. */
.selo-compra-verificada {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 100px;
  background-color: rgba(31, 122, 77, .1);
  font-size: 11px;
  font-weight: 500;
  color: #1F7A4D;
}

.avaliacao-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(26, 11, 79, .55);
}

.avaliacao-comentario {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(13, 11, 26, .8);
  overflow-wrap: anywhere;
}

.ver-mais-avaliacoes {
  margin-top: 20px;
}

.ver-mais-avaliacoes[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
}


/* ==========================================================
   CARROSSEL VINDO DO PAINEL
   ========================================================== */

/* Capas de verdade no lugar dos espaços reservados: mesmas medidas
   (.capa-lateral, .capa-central, .capa-lancamento), agora com a imagem. */
.capa-banner {
  display: block;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(13, 11, 26, .45);
}

/* Imagem de fundo opcional. A camada escura por cima garante a leitura do
   texto em ouro, seja qual for a imagem enviada. */
.banner-slide-com-fundo {
  position: relative;
  background-size: cover;
  background-position: center;
}

.banner-slide-com-fundo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 11, 79, .94) 0%, rgba(26, 11, 79, .7) 60%, rgba(26, 11, 79, .5) 100%);
}

.banner-slide-com-fundo > * {
  position: relative;
  z-index: 1;
}