/* =========================================
   PÁGINA DO LIVRO - SEÇÃO ESQUERDA
   ========================================= */

.container-detalhe-livro {
    max-width: 1100px;
    margin: 50px auto;
    display: flex;
    gap: 40px;
    
    /* AQUI ESTÁ A MUDANÇA: */
    /* Ordem: Topo | Direita | Baixo | Esquerda */
    /* Mude o último número para 100px ou mais até ficar onde você quer */
    padding: 0 20px 0 0px; 
    
    font-family: 'Roboto', sans-serif;
}

.coluna-esquerda-livro {
    width: 40%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    /* Isso garante que a capa e o botão comecem na mesma linha imaginária */
    align-items: flex-start; 
}

/* --- GALERIA INTELIGENTE --- */
.galeria-livro {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start; /* Alinha no topo */
}

.lista-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50px; /* Largura fixa da coluna */
}

/* Estilo da MINIATURA (Agora é uma Imagem) */
.thumb-item {
    width: 50px;
    height: 70px;
    object-fit: cover; /* Garante que a imagem preencha o retângulo sem esticar */
    border: 1px solid #ddd; /* Borda suave */
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.6; /* Fica meio transparente quando não selecionada */
    transition: all 0.3s;
}

/* Quando passa o mouse ou quando está ativa */
.thumb-item:hover, .thumb-item.ativa {
    opacity: 1; /* Fica totalmente visível */
    border-color: #e30613; /* Borda vermelha se quiser destacar */
}

/* Capa Principal */
.capa-principal-wrapper {
    flex: 1;
}

.capa-principal-wrapper img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    display: block;
}

/* (Mantenha o CSS do botão "Leia um trecho" que já fizemos) */

/* Área da Capa Principal */
.capa-principal-wrapper {
    flex: 1;
    
    /* ADICIONE ISSO AQUI: */
    width: 100%;       /* Tenta ocupar espaço */
    max-width: 280px;  /* Mas trava em 280px. Diminua este número se quiser menor */
    /* ------------------- */
}

.capa-principal-wrapper img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Sombra suave */
    display: block;
}


/* =========================================
   LEIA UM TRECHO (Formulário Expansível)
   ========================================= */

.area-leia-trecho-container {
    border-bottom: 1px solid #ddd;
    margin-top: 13px;
    
    /* --- ADICIONE ISSO AQUI --- */
    width: 100%;       /* Tenta ocupar o espaço... */
    max-width: 280px;  /* ...mas trava em 280px (largura média de uma capa) */
    /* -------------------------- */
}

/* O Cabeçalho clicável */
.header-leia-trecho {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.texto-leia {
    font-size: 14px;
    color: #333; /* Texto escuro */
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

.icone-seta {
    color: #e30613; /* Vermelho */
    font-size: 14px;
    transition: transform 0.3s ease; /* Animação suave */
}

/* Classe que vamos adicionar com JS para girar a seta */
.icone-seta.girar {
    transform: rotate(180deg);
}

/* --- A PARTE DO FORMULÁRIO (Escondida) --- */
.conteudo-leia-trecho {
    display: none; /* Começa invisível */
    padding-bottom: 20px;
    animation: fadeIn 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.titulo-leia {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
}

/* Container que segura os dois inputs */
.linha-inputs {
    display: flex;       /* Ativa o modo lado a lado */
    flex-direction: row; /* Garante que fique em linha */
    gap: 10px;           /* Espacinho entre eles */
    margin-bottom: 10px;
}

/* Força cada input a ocupar metade do espaço */
.linha-inputs .input-bege {
    width: 50%; /* Ou use 'flex: 1;' para dividir automaticamente */
}

.input-bege {
    background-color: #f4eee8; /* Cor bege igual da foto */
    border: none;
    border-radius: 25px; /* Bem arredondado */
    padding: 12px 20px;
    font-size: 14px;
    color: #555;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    outline: none;
}

.input-bege.full {
    width: 100%; /* Ocupa linha toda */
    box-sizing: border-box; /* Garante que não estoure a tela */
    margin-bottom: 15px;
}

/* Checkbox */
.check-area {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #333;
    margin-bottom: 20px;
}

.check-area input {
    accent-color: #0075ff; /* Cor do check azul */
    width: 16px;
    height: 16px;
}

/* Botão Quero Ler */
.btn-quero-ler {
    background-color: #e30613;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 800;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-quero-ler:hover {
    background-color: #b00000;
}

/* --- BOTÃO CARREGANDO (SPINNER) --- */
.btn-quero-ler.carregando {
    background-color: #b00000;
    color: transparent; /* Esconde o texto "QUERO LER" */
    pointer-events: none; /* Impede clicar de novo */
    position: relative;
}

/* A bolinha girando */
.btn-quero-ler.carregando::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 3px solid #ffffff;
    border-top: 3px solid transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- TELA DE SUCESSO --- */
.sucesso-leia-trecho {
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: fadeIn 0.5s;
}

.wrapper-sucesso-img {
    position: relative;
    width: 70px; /* Tamanho da capinha pequena */
}

.wrapper-sucesso-img img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    display: block;
}

/* O Botão Vermelho Redondo */
.btn-download-red {
    position: absolute;
    bottom: -10px; /* Sai um pouco pra fora da imagem */
    right: -10px;
    width: 35px;
    height: 35px;
    background-color: #e30613;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 14px;
    transition: transform 0.2s;
}

.btn-download-red:hover {
    transform: scale(1.1);
    background-color: #c00000;
}

/* Texto "APROVEITE SUA LEITURA" */
.msg-aproveite span {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #000;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
}

/* =========================================
   COLUNA DIREITA (TOPO)
   ========================================= */

.coluna-direita-livro {
    flex: 1; 
    max-width: 600px;
    padding-top: 0; /* Alinha com o topo da capa */
}

/* Título */
.titulo-livro-detalhe {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 49px;
    color: #e30613;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
    margin-top: 0;
}

/* Autor */
.nome-autor-grande {
    font-size: 18px; /* Um pouco maior */
    color: #575757;
    font-weight: 700;
    margin: 0 0 5px 0; /* Margem pequena embaixo para colar no "Avalie" */
    font-family: 'Roboto', sans-serif;
}

/* Avalie este livro */
.area-avaliacao {
    margin-bottom: 25px; /* Espaço até os botões de formato */
}

.link-avaliar {
    font-size: 13px;
    color: #777;
    text-decoration: none; /* Sem sublinhado normal */
    font-family: 'Roboto', sans-serif;
}

.link-avaliar:hover {
    text-decoration: underline; /* Sublinha quando passa o mouse */
    color: #e30613;
}

/* Seletor Livro/Ebook */
.seletor-formato {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Estilo Básico (INATIVO) */
.badge-formato {
    background-color: transparent; /* Fundo invisível normal */
    border: 1px solid transparent; /* Borda invisível */
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    color: #777;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    
    /* Suaviza a mudança de cor */
    transition: background-color 0.3s, color 0.3s; 
}

/* --- O EFEITO NOVO: HOVER --- */
/* Quando passa o mouse em cima (e não está ativo) */
.badge-formato:hover {
    background-color: #f0f0f0; /* Ganha um fundo cinza claro */
    color: #333; /* Texto escurece */
}

/* Estilo ATIVO (SELECIONADO) */
.badge-formato.ativo {
    background-color: #f4eee8; /* Fundo Bege fixo */
    color: #e30613;            /* Texto Vermelho */
    border: 1px solid #e30613; /* Borda Vermelha */
}

/* (Opcional) Se passar o mouse no botão que JÁ está ativo */
.badge-formato.ativo:hover {
    background-color: #eaddd3; /* Fica um bege um pouquinho mais escuro */
}

/* Preço */
.area-preco-detalhe {
    margin-bottom: 20px;
}

.preco-destaque {
    display: block;
    font-size: 40px; /* Preço bem grande */
    font-weight: 700;
    color: #333;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
}

.preco-parcelado {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
    display: block;
}

/* Botão Comprar */
.btn-comprar-gigante {
    background-color: #e30613;
    color: white;
    width: 100%;
    max-width: 250px;
    padding: 12px;
    border: none;
    border-radius: 22px;
    font-size: 22px;
    font-weight: 800;
    font-family: 'Barlow Condensed', sans-serif;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 15px;
}

.btn-comprar-gigante:hover {
    background-color: #b00000;
}

/* =========================================
   HOTSITE E BOTÃO COMPRAR
   ========================================= */
.link-hotsite {
    display: block; /* Faz o link ocupar a largura toda para a linha ir de ponta a ponta */
    color: #e30613;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    
    /* A MÁGICA DA LINHA AQUI: */
    border-bottom: 1px solid #e5e5e5; /* Cria a linha de baixo */
    padding: 22px 0; /* Dá a mesma altura/espaço interno da caixa do Gênero */
    margin-top: -30px; /* "Puxa" o botão para cima para colar exatamente na linha anterior */
    margin-bottom: 30px; /* Devolve o espaço inferior para a sinopse não grudar */
}

.link-hotsite:hover {
    text-decoration: underline;
}

/* O estado cinza do botão comprando */
.btn-comprar-gigante.adicionando {
    background-color: #ba8080; /* Cor cinza/avermelhada da imagem */
    color: #dfdfdf;
    pointer-events: none; /* Impede novos cliques */
}

/* =========================================
   MENSAGEM DE CARRINHO VERDE (PUSH)
   ========================================= */
.msg-carrinho-push {
    width: 100%;
    background-color: #d8f1e0; /* Verde bem suave da imagem */
    color: #4da563; /* Tom de verde do texto */
    
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-out, opacity 0.3s ease; 
    opacity: 0;
    display: block; 
}

.msg-carrinho-push.mostrar {
    max-height: 80px; 
    opacity: 1;
    border-bottom: 1px solid #c8e1d0;
}

.conteudo-msg-topo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 20px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
}

.msg-texto-icone {
    display: flex;
    align-items: center;
    gap: 10px;
}

.link-carrinho {
    color: #4da563;
    font-weight: 400;
    text-decoration: underline;
}

.btn-fechar-msg {
    font-size: 1.5rem;
    cursor: pointer;
    color: #4da563;
}

/* Dropdown Lojas (Mantido igual) */
.dropdown-lojas-wrapper {
    width: 100%;
    max-width: 250px;
    position: relative;
    /* margin-bottom retirado pois é o fim desta seção */
}

.btn-dropdown-lojas {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: white;
    font-size: 14px;
    color: #000;
    font-family: 'Roboto', sans-serif;
}

.lista-lojas {
    display: none;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    background-color: #f3ece6;
    border-radius: 4px;
    position: absolute; /* Flutua por cima do conteúdo seguinte */
    width: 100%;
    z-index: 10; /* Garante que fique em cima */
}

.lista-lojas li {
    border-bottom: 1px solid #eaddd3;
}

.lista-lojas li:last-child {
    border-bottom: none;
}

.lista-lojas a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #e30613;
    font-size: 14px;
    transition: background 0.2s;
    font-family: 'Roboto', sans-serif;
}

.lista-lojas a:hover {
    background-color: #eaddd3;
    font-weight: bold;
}

/* Subtítulo (Vermelho, logo abaixo do título) */
.subtitulo-livro-detalhe {
    font-family: 'Barlow Condensed', sans-serif; /* Mesma fonte do título */
    font-size: 22.6px; /* Menor que o título (que é 42px) */
    color: #e30613;  /* Vermelho igual */
    text-transform: uppercase;
    font-weight: 400; /* Um pouco mais fino que o título */
    margin-top: -5px; /* Cola no título de cima */
    margin-bottom: 10px; /* Espaço até o autor */
    line-height: 1.2;
    display: none; /* Começa escondido, o JS mostra se existir */
}

/* =========================================
   FAIXA DE INFORMAÇÕES TÉCNICAS
   ========================================= */

.linha-infos-tecnicas {
    display: flex;
    justify-content: space-between; /* Um na esquerda, outro na direita */
    align-items: center;
    
    border-top: 1px solid #e5e5e5;    /* Linha cinza em cima */
    border-bottom: 1px solid #e5e5e5; /* Linha cinza embaixo */
    
    padding: 22px 0;   /* Espaço interno vertical */
    margin-top: 30px;  /* Espaço para separar do dropdown de cima */
    margin-bottom: 30px;
    
    font-family: 'Roboto', sans-serif;
}

/* Categorias (Esquerda) */
.texto-categorias {
    color: #e30613; /* Vermelho */
    text-transform: uppercase; /* Letras maiúsculas */
    font-size: 14px;
    font-weight: 500;
}

/* Classificação (Direita) */
.texto-classificacao {
    color: #000;
    font-size: 14px;
}

.texto-classificacao strong {
    font-weight: 700; /* O número fica mais forte (Bold) */
}

/* =========================================
   SINOPSE (EXPANSÍVEL)
   ========================================= */

.sinopse-wrapper {
    margin-top: 20px;
    padding-bottom: 20px; /* Um respiro no final da página */
    border-top: 1px solid transparent; /* Apenas para garantir espaçamento */
}

.texto-sinopse {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6; /* Espaçamento entre linhas para leitura confortável */
    color: #333;
    text-align: left; /* Ou 'justify' se preferir quadradinho */
    
    /* O SEGREDO DO "ESCONDIDO": */
    max-height: 180px; /* Mostra mais ou menos 8 a 10 linhas */
    overflow: hidden;  /* O que passar disso, esconde */
    transition: max-height 0.5s ease; /* Animação suave ao abrir */
}

/* Classe que o JavaScript vai adicionar para abrir */
.texto-sinopse.expandido {
    max-height: 2000px; /* Um valor bem alto para caber qualquer texto */
}

/* Botão LEIA + */
.btn-leia-mais {
    display: inline-block;
    margin-top: 15px;
    color: #e30613; /* Vermelho */
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-leia-mais:hover {
    text-decoration: underline;
}

/* =========================================
   ÁREA DE FRETE
   ========================================= */

.area-frete-wrapper {
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 20px;
    padding-top: 20px;
}

.titulo-frete {
    font-family: 'Barlow Condensed', sans-serif;
    color: #444; /* Cinza escuro */
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 700;
}

.label-cep {
    display: block;
    font-size: 15px;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.input-frete-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.input-frete-container input {
    padding: 11.5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 150px;
    font-size: 16px;
    color: #333;
}

/* O Botão Redondo */
#btnCalcularFrete {
    width: 47px;
    height: 47px;
    border-radius: 25%; /* Faz virar bolinha */
    border: none;
    background-color: #ff8e8e; /* Rosa Salmão (Estado Inicial) */
    color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#btnCalcularFrete:hover {
    background-color: #ff6b6b;
}

/* Quando calculado (Fica Vermelho igual imagem) */
#btnCalcularFrete.calculado {
    background-color: #e30613; /* Vermelho forte */
}

/* --- TABELA DE RESULTADOS --- */
.tabela-frete {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.tabela-frete th {
    text-align: left;
    font-weight: normal;
    color: #555;
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.tabela-frete td {
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f5f5f5; /* Linha bem fininha entre as opções */
}

.col-tempo, .col-preco {
    text-align: right; /* Alinha números à direita */
}

.col-desc {
    color: #444;
}

.espaco-final {
    height: 50px; /* Espaço em branco no fim da página */
}

/* =========================================
   INFORMAÇÕES TÉCNICAS (RODAPÉ FULL)
   ========================================= */

.secao-infos-tecnicas-full {
    width: 100%;
    background-color: #fff; /* ou a cor do fundo do site */
    padding: 40px 0 60px 0; /* Espaço em cima e embaixo */
    border-top: 1px solid #eee; /* Linha divisória suave no topo */
    margin-top: 50px;
}

/* Container para centralizar o conteúdo (se o site tiver largura máxima) */
.container-infos {
    max-width: 1200px; /* Mesma largura do resto do site */
    margin: 0 auto;
    padding: 0 20px;
}

.titulo-infos {
    font-family: 'Barlow Condensed', sans-serif;
    color: #444;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: lowercase; /* Igual na imagem */
}

/* O GRID QUE FAZ FICAR LADO A LADO */
.grid-infos-tecnicas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 Colunas de tamanhos iguais */
    gap: 40px; /* Espaço grande entre as colunas */
}

/* Estilo do texto */
.coluna-tec p {
    font-family: 'Roboto', sans-serif;
    font-size: 13px; /* Letra pequena e delicada */
    color: #333;
    margin-bottom: 8px;
    line-height: 1.5;
}

.coluna-tec strong {
    font-weight: 700;
    color: #000;
}

.texto-vermelho {
    color: #e30613;
    font-weight: 500;
}

/* Responsivo: No celular vira uma coluna só */
@media (max-width: 768px) {
    .grid-infos-tecnicas {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =========================================
   SEÇÃO AUTOR (VERMELHA)
   ========================================= */

.secao-autor-full {
    background-color: #ecd6a8; /* O Vermelho da marca */
    color: #fff;
    padding: 60px 0;
    width: 100%;
    margin-top: 50px;
    display: none; /* Começa escondido até o JS carregar os dados */
}

.container-autor {
    max-width: 1100px; /* Largura padrão do conteúdo */
    margin: 0 auto;
    padding: 0 20px;
}

.bio-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* FOTO DO AUTOR */
.autor-img-box img {
    width: 225px;
    height: 225px;
    object-fit: cover; /* Corta a imagem pra caber no quadrado */
    border-radius: 12px;
    background-color: #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* TEXTO */
.autor-texto-box {
    flex: 1;
}

.autor-texto-box h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#textoBio {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 800px;
}

/* =========================================
   SEÇÃO: OUTROS LIVROS DO AUTOR
   ========================================= */

/* Estilo do Título "OUTROS LIVROS" */
.titulo-sessao-autor {
    color: #ffffff; /* COR BRANCA */
    font-family: 'Barlow Condensed', sans-serif; /* Ou sua fonte padrão */
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    
    /* Caso o fundo da página já seja branco, você não vai ler nada.
       Se o fundo for escuro, vai ficar perfeito. 
       Se o fundo for branco, mude a cor acima para #000 ou #d32f2f */
}

/* --- Título da Seção --- */
.titulo-branco {
    color: #ffffff !important; /* Força a cor branca */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* --- O GRID (4 Livros por linha) --- */
#gridLivrosMesmoAutor {
    display: grid; /* Liga o modo grade */
    
    /* CRIA 4 COLUNAS DE TAMANHOS IGUAIS */
    grid-template-columns: repeat(4, 1fr); 
    
    gap: 20px; /* Espaço entre os livros */
    width: 100%;
}

/* --- Estilo da Capa do Livro --- */
.capa-livro-relacionado {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3; /* Força formato de livro (retrato) */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.capa-livro-relacionado:hover {
    transform: scale(1.05);
}

/* RESPONSIVO: No celular muda para 2 por linha */
@media (max-width: 768px) {
    #gridLivrosMesmoAutor {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsivo para celular */
@media (max-width: 768px) {
    .bio-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .titulo-outros-livros {
        display: block; /* Centraliza o título no mobile */
    }
    .grid-outros-livros {
        justify-content: center;
    }
}

/* No arquivo css/style.css */
.badge-pre-venda {
    display: inline-block;
    background-color: #e8e6df; /* Cor bege/cinza igual da referência */
    color: #000; /* Texto preto */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 3.5px 13px; /* Um pouco menor/delicado */
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* =========================================
   SEÇÃO: VOCÊ TAMBÉM PODE GOSTAR (AJUSTADO)
   ========================================= */

section.secao-sugestoes {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: 'Barlow', sans-serif;
    display: block;
}

.titulo-sugestoes {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border-left: 5px solid #d32f2f;
    padding-left: 15px;
}

.wrapper-sugestoes {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0; /* O gap será controlado dentro do trilho para caber 4 */
}

/* O Trilho */
.trilho-sugestoes {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px; /* Espaço entre os livros */
    padding: 10px 5px;
    width: 100%;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.trilho-sugestoes::-webkit-scrollbar { display: none; }

/* REGRA DOS 4 LIVROS POR VEZ */
.trilho-sugestoes .card-livro {
    /* Cálculo: 100% da tela - 3 espaços de 20px (60px total), dividido por 4 */
    min-width: calc((100% - 60px) / 4);
    width: calc((100% - 60px) / 4);
    flex-shrink: 0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* BOTÕES DE NAVEGAÇÃO (SETAS LIMPAS) */
.btn-nav-sugestao {
    background-color: transparent; /* Fundo transparente */
    border: none; /* Sem borda */
    box-shadow: none; /* Sem sombra */
    color: #333; /* Cor da seta */
    font-size: 24px; /* Seta maior */
    width: 40px;
    height: 100%; /* Altura total para facilitar o clique */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.3s ease;
    z-index: 5;
    flex-shrink: 0;
}

.btn-nav-sugestao:hover {
    color: #d32f2f; /* Vermelho ao passar o mouse */
    background-color: transparent; /* Garante que não apareça fundo */
    transform: scale(1.2); /* Leve zoom */
}

/* Responsivo para Celular (Mostra 2 ou 1 por vez) */
@media (max-width: 768px) {
    .btn-nav-sugestao { display: none; } /* Esconde setas no mobile */
    
    .trilho-sugestoes .card-livro {
        /* No celular, mostra 2 por vez ou 1 e meio */
        min-width: calc((100% - 20px) / 2);
        width: calc((100% - 20px) / 2);
    }
}
@media (max-width: 480px) {
    .trilho-sugestoes .card-livro {
        min-width: 85%; /* Um card quase inteiro */
        width: 85%;
    }
}

/* =========================================
   SEÇÃO: AVALIAÇÃO DOS CLIENTES
   ========================================= */

.secao-avaliacoes {
    background-color: #f4efe9; /* Cor bege do fundo */
    padding: 60px 20px;
    font-family: 'Barlow', sans-serif;
    color: #333;
}

.container-avaliacoes {
    max-width: 800px; /* Largura controlada para o formulário não esticar demais */
    margin: 0 auto;
}

.titulo-avaliacoes {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    /* Se quiser centralizado como parece na imagem, use center. Se for à esquerda, tire essa linha */
    text-align: left; 
}

/* Estrelas */
.linha-estrelas {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Para mobile */
    gap: 10px;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.label-gostou {
    font-weight: 700;
    font-size: 0.9rem;
}

.grupo-estrelas {
    display: flex;
    gap: 5px;
    cursor: pointer;
}

.grupo-estrelas i {
    font-size: 1.2rem;
    color: #ccc; /* Cor cinza padrão */
    transition: color 0.2s;
}

/* Classe para quando a estrela estiver ativa (amarela/cheia) */
.grupo-estrelas i.ativa {
    color: #fdd835; /* Amarelo ouro */
    font-weight: 900; /* Garante que fique cheia (solid) */
}

.texto-ajuda {
    font-size: 0.8rem;
    color: #666;
}

/* Campos do Formulário */
.campo-avaliacao {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.campo-avaliacao label {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.campo-avaliacao label .ast {
    color: #d32f2f; /* Asterisco vermelho */
}

.campo-avaliacao textarea,
.campo-avaliacao input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    width: 100%;
    background-color: #fff;
    resize: vertical; /* Permite redimensionar só altura do textarea */
}

.campo-avaliacao textarea:focus,
.campo-avaliacao input:focus {
    outline: none;
    border-color: #aaa;
}

/* Botão Enviar */
.btn-enviar-comentario {
    background-color: #d32f2f; /* Vermelho padrão */
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 25px; /* Arredondado estilo pílula */
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s;
    margin-top: 10px;
}

.btn-enviar-comentario:hover {
    background-color: #b71c1c;
}

html {
    scroll-behavior: smooth;
}

/* =========================================
   ESTILO E-BOOK
   ========================================= */

.container-botoes-ebook {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    align-items: flex-start; /* Alinha à esquerda */
}

.btn-loja-ebook {
    background-color: #d32f2f; /* Vermelho */
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 8px 20px;
    border-radius: 20px; /* Borda redonda pílula */
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.3s ease;
    display: inline-block;
}

.btn-loja-ebook:hover {
    background-color: #b71c1c; /* Vermelho mais escuro */
}

/* Ajuste para o cursor nos badges de formato */
.badge-formato {
    cursor: pointer;
    user-select: none;
}

/* =========================================
   SIDEBAR DO CARRINHO (OFF-CANVAS GIGANTE)
   ========================================= */

/* Fundo escuro atrás da gaveta */
.overlay-carrinho {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Cor escura transparente */
    z-index: 9998; /* Fica abaixo da Sidebar, mas acima de tudo */
    opacity: 0; /* Começa invisível */
    visibility: hidden;
    transition: opacity 0.3s ease; /* Animação suave de escorrer */
}

/* CLASSE QUE ATIVA O FUNDO ESCURO */
.overlay-carrinho.ativo {
    opacity: 1 !important;
    visibility: visible !important;
}

/* A Gaveta em si (Posicionada na Direita) */
.sidebar-carrinho {
    position: fixed;
    top: 0;
    right: -100%; /* Começa ESCONDIDO para a direita da tela */
    width: 100%;
    max-width: 400px; /* Largura da gaveta */
    height: 100vh; /* Altura total da tela */
    background-color: #fff;
    z-index: 9999; /* Fica acima de TUDO */
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease; /* Animação suave de deslizar */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* Sombra para dar profundidade */
    font-family: 'Roboto', sans-serif;
    
    /* A MÁGICA DA BORDA ARREDONDADA (Igual a image_bce5e3.png) */
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px;
}

/* CLASSE QUE ABRE A GAVETA (O JS adiciona) */
.sidebar-carrinho.aberto {
    right: 0 !important; /* Desliza para dentro da tela (Obrigatório) */
}

/* --- CABEÇALHO (Bege Igual image_bce5e3.png) --- */
.header-carrinho {
    background-color: #f4eee8; /* Cor bege da imagem */
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

/* A Seta Vermelha Limpa (Igual image_bce5e3.png) */
.btn-fechar-carrinho {
    background: transparent;
    border: none;
    color: #e30613; /* Vermelho forte */
    font-size: 26px; /* Seta grande */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
    outline: none;
}
.btn-fechar-carrinho:hover {
    transform: scale(1.1);
    background-color: #eaddd3; /* Fica bege escuro no hover */
}

.titulo-sacola-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 10px;
}

.icone-sacola-wrapper {
    position: relative;
    color: #e30613;
    font-size: 22px;
}

.badge-qtd-carrinho {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #fdd835; /* Amarelo ouro */
    color: #000;
    font-size: 11px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo-sacola-area h2 {
    color: #e30613;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    margin: 0;
    font-weight: 700;
}

/* --- CORPO (Onde o JS injeta os itens) --- */
.conteudo-carrinho {
    flex: 1; /* Ocupa o espaço livre */
    overflow-y: auto; /* Permite scroll se tiver muitos livros */
    padding: 20px;
}

/* Estilo do Item (Livro) */
.item-carrinho {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.img-item-carrinho {
    width: 70px;
    height: 100px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.infos-item-carrinho {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.titulo-item-carrinho {
    font-family: 'Barlow Condensed', sans-serif;
    color: #e30613;
    font-size: 18px;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.preco-item-carrinho {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin-bottom: auto; /* Empurra os botões pra baixo */
}

/* Controles de Qtd (+ e -) e Lixeira */
.controles-item-carrinho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.controle-qtd {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.btn-qtd {
    background: #f9f9f9;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: #555;
    transition: background 0.2s;
}
.btn-qtd:hover { background: #eee; }

.input-qtd {
    width: 30px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-size: 14px;
    pointer-events: none; /* Impede digitar direto */
}

.btn-remover-item {
    background: transparent;
    border: none;
    color: #777;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}
.btn-remover-item:hover { color: #e30613; }

.divisor-item-carrinho {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 10px 0 20px 0;
}

/* ==========================================
   ÁREA DO CUPOM E BOTÃO APLICAR
   ========================================== */
.area-cupom {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: stretch; /* Garante que o campo de digitar e o botão fiquem da mesma altura */
}

.area-cupom input {
    flex: 1; /* O campo de texto ocupa o espaço que sobrar */
    padding: 15px 15px; /* Deixa o campo mais altinho */
    border: 1px solid #ccc;
    border-radius: 8px; /* Borda levemente arredondada no campo */
    font-size: 15px;
    outline: none;
}

.area-cupom input:focus {
    border-color: #e30613; /* Fica vermelho ao clicar para digitar */
}

.input-cupom {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 6px; /* Borda levemente arredondada no input */
    font-size: 14px;
    outline: none;
}
.input-cupom:focus { border-color: #e30613; }

.btn-aplicar-cupom {
    background-color: #e30613;
    color: #fff;
    border: none;
    /* A MÁGICA ESTÁ AQUI NO PADDING: 12px de altura, 40px de comprimento nas laterais */
    padding: 12px 40px; 
    border-radius: 30px; /* Formato de pílula bem arredondada */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; /* Letra um pouco maior */
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s;
    white-space: nowrap; /* Impede o texto de "esmagar" em telas menores */
}
.btn-aplicar-cupom:hover { background-color: #b00000; }

/* --- RODAPÉ (Footer) DO CARRINHO --- */
.footer-carrinho {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom-left-radius: 20px; /* Mantém arredondado no fim */
}

.area-total-carrinho {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.label-total {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.valor-total-carrinho {
    color: #e30613;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 28px;
}

/* ==========================================
   ESTILOS DE PREÇO DA SACOLA
   ========================================== */
.preco-item-padrao {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0;
    display: block;
}

.preco-unitario-cinza {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    margin: 0 0 2px 0;
    display: block;
}

.preco-total-destaque {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin: 0 0 15px 0;
    display: block;
}

.link-ir-carrinho {
    color: #555;
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 14px;
}
.link-ir-carrinho:hover { text-decoration: underline; color: #e30613; }

.btn-finalizar-compra {
    background-color: #e30613;
    color: white;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 30px; /* Botão pilula grande */
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-finalizar-compra:hover { background-color: #c00000; }

/* --- RESPONSIVO --- */
@media (max-width: 480px) {
    .sidebar-carrinho {
        max-width: 100%; /* Ocupa a tela toda no celular */
        border-radius: 0; /* Tira arredondado no mobile */
    }
}

/* =========================================
   ESTILOS DO PLAYER DE ÁUDIO
   ========================================= */
.player-audio-fllumen {
    display: flex;
    align-items: center;
    background-color: #f4ede6; /* O Bege da Fllumen */
    border-radius: 50px;
    padding: 10px 15px;
    gap: 12px;
    width: 100%;
}

.btn-controle-audio {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #003366; /* Azul escuro */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.icone-vermelho {
    color: #e30613; /* Botão play vermelho Fllumen */
    font-size: 16px;
}

.tempo-audio-texto {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #003366;
    white-space: nowrap;
}

/* Customizando a barra cinza de tempo */
.barra-deslizante {
    flex-grow: 1;
    -webkit-appearance: none;
    height: 4px;
    background: #888;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.barra-deslizante::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #555;
    cursor: pointer;
}

/* =======================================================
   CSS: GAVETA DA SACOLA (SIDE CART) | FLLUMEN
   ======================================================= */

/* 1. O Fundo Escuro (Overlay) */
.sacola-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semitransparente */
    z-index: 9998; /* Abaixo da gaveta */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sacola-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

/* 2. A Gaveta do Carrinho (Goal 1: Bordas Arredondadas Dramáticas) */
.sacola-gaveta {
    position: fixed;
    top: 0;
    right: -450px; /* Escondido fora da tela */
    width: 400px;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999; /* No topo de tudo */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    
    /* ANIMAÇÃO SUAVE E CORTES (Goal 1: Rounding) */
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Arredondamos significativamente o canto superior esquerdo (externo) */
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px;
    
    /* Importante para o botão "espetado" aparecer fora */
    overflow: visible; 
}

.sacola-gaveta.aberto {
    right: 0; /* Desliza para dentro da tela */
}

/* 3. O Botão Circular "Espetado" (Goal 2: Fora mas junto) */
.btn-fechar-espetado {
    position: absolute;
    top: 30px; /* Alinhado com o texto "SUA SACOLA" */
    left: -20px; /* Jutting out 20px to the left */
    width: 40px;
    height: 40px;
    background-color: #e30613; /* O vermelho Fllumen */
    color: white;
    border: none;
    border-radius: 50%; /* Círculo perfeito */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s;
}

.btn-fechar-espetado:hover {
    transform: scale(1.1);
}

/* 4. Cabeçalho (Fundo Bege) */
.sacola-header {
    background-color: #f6f3ee; /* Tom bege do seu print */
    padding: 25px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    border-top-left-radius: 20px; /* Mantém o arredondamento */
}

.icone-sacola-wrapper {
    position: relative;
    font-size: 28px;
    color: #e30613;
    margin-right: 15px;
}

.badge-qtd {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #ffd700; /* Amarelo da notificação */
    color: #333;
    font-size: 11px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo-sacola {
    font-family: 'Barlow Condensed', sans-serif;
    color: #e30613;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}

/* 5. Área dos Produtos (Rolagem) */
.sacola-itens-area {
    flex: 1; /* Preenche o espaço restante */
    overflow-y: auto; /* Permite rolagem se tiver muitos itens */
    padding: 20px;
}

/* 6. Formato do Item (Goal 4: Exato como o print) */
/* =======================================================
   ESTILOS DOS ITENS DO CARRINHO (LIVROS, BOTÕES E LIXEIRA)
   ======================================================= */

/* O Container do Livro */
.carrinho-item-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 25px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

/* A Capa do Livro (Maior) */
.carrinho-item-img {
    width: 90px;
    height: 130px;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Container dos Textos e Botões */
.infos-item-carrinho {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Título Vermelho do Livro */
.titulo-item-carrinho {
    font-family: 'Barlow Condensed', sans-serif;
    color: #e30613;
    font-size: 24px; /* Título maior */
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    line-height: 1.1;
}

/* Área dos botões + e - */
.controles-item-carrinho {
    display: flex;
    align-items: center;
    gap: 12px; /* Espaço entre os botões */
    margin-top: 10px;
}

/* As Bolinhas Cinzas de + e - (BEM MAIORES) */
.btn-qtd {
    background: none;
    border: none;
    font-size: 32px; /* Tamanho do ícone gigante */
    color: #666;
    cursor: pointer;
    padding: 0;
    display: flex;
    transition: transform 0.1s, color 0.2s;
}

.btn-qtd:hover {
    color: #e30613; /* Fica vermelho ao passar o mouse */
    transform: scale(1.1); /* Dá uma leve "crescida" */
}

/* A Caixinha do Número (Mais Larga e Alta) */
.input-qtd {
    width: 55px; 
    height: 40px; 
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 18px; /* Número maior */
    font-weight: bold;
    color: #333;
    background: #fff;
    outline: none;
}

/* Nova linha que ocupa a largura inteira (Esquerda e Direita) */
.area-controles-full {
    display: flex;
    justify-content: space-between; /* A MÁGICA: Joga um pra esquerda e o outro pra direita! */
    align-items: center;
    width: 100%;
    margin-top: auto; /* Empurra essa linha lá pro fundo do bloco */
    padding-top: 10px;
}

/* A Lixeira (Agora sem position absolute, solta na direita) */
.btn-remover-item {
    background: none;
    border: none;
    color: #777;
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
}

.btn-remover-item:hover {
    color: #e30613;
    transform: scale(1.1);
}

/* 7. Rodapé (Cupom e Total) */
.sacola-rodape {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 -5px 10px rgba(0,0,0,0.03);
}

.area-cupom {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.area-cupom input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.btn-aplicar-cupom {
    background-color: #e30613;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 20px; /* Formato pílula */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    color: #555;
    font-size: 14px;
    margin-bottom: 15px;
}

.resumo-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.resumo-total .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.resumo-total .valor {
    font-size: 24px;
    font-weight: 700;
    color: #e30613;
}

.link-ir-carrinho {
    display: block;
    text-align: center;
    color: #888;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 15px;
}

.btn-finalizar-compra {
    width: 100%;
    background-color: #e30613;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 25px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-finalizar-compra:hover {
    background-color: #b00000;
}

/* Ajustes para telas pequenas */
@media (max-width: 500px) {
    .sacola-gaveta {
        width: 100%;
        right: -100%;
        border-radius: 0;
    }
}