@charset "UTF-8";
.linha-livros {
  margin: 30px 0;
  position: relative;
}

.linha-header {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  margin-bottom: 10px;
}

.livros-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Firefox */
}

.livros-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.livro-card {
  min-width: 180px;
  max-width: 180px;
  margin-right: 15px;
  flex: 0 0 auto;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.livro-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
}

.livro-card h4 {
  margin: 10px 0 5px;
  font-size: 1em;
}

.livro-card button {
  background: #0077cc;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.livro-card button:hover {
  background: #005fa3;
}

/* setas */
.seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  z-index: 10;
}

.seta-esq {
  left: -10px;
}

.seta-dir {
  right: -10px;
}

/* modal */
#modalLivro {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

#modalLivro iframe {
  width: 80%;
  height: 80%;
  border: none;
  background: #fff;
}

#modalLivro .fechar {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

/*aqui para cima foi colocado o estilo para as 4 linhas de generos.*/
.imagem-link {
  display: flex;
  align-items: center;
  /* alinha verticalmente */
  gap: 0px;
  /* espaço entre imagem e link */
}

.imagem-link img {
  width: 80px;
  height: auto;
  row-gap: 0px;
}

.imagem-link a {
  font-size: 13px;
  color: #04e8e8;
  text-decoration: none;
  background-color: hsl(0, 91%, 45%);
  padding: 1px 1px;
  border-radius: 8px;
}


.box1-col-alt {

  /* ========================================================= */
  /* ESTILOS PARA A SEÇÃO DE CATEGORIAS */
  /* ========================================================= */
  .box1-col-alt {
      position: relative;
      display: flex;
      flex-direction: column; /* CRÍTICO: Organiza os itens verticalmente */
      align-items: center;   /* Centraliza horizontalmente o conteúdo (Título, Imagem, Botão) */
      justify-content: flex-start; /* Alinha o conteúdo ao topo do card */
      
      width: 100%; 
      max-width: 220px; 
     /* min-height: 250px; /* Altura mínima para não ficar muito espremido */
      padding: 10px 0; 
      margin: 10px;
      text-align: center;
  
      /* Mantendo a identidade visual dos cards de livro */
      border: 1px solid #d30e0e76;
      border-radius: 10px;
      background-color: #000;
      box-shadow: 0 0 12px 4px #0f0300;
  
  &:not(:has(> :nth-child(6))) {
    max-width: calc(var(--item-max-width) * 5);
  }

  &:not(:has(> :nth-child(5))) {
    max-width: calc(var(--item-max-width) * 4);
  }

  &:not(:has(> :nth-child(4))) {
    max-width: calc(var(--item-max-width) * 3);
  }

  &:not(:has(> :nth-child(3))) {
    max-width: calc(var(--item-max-width) * 2);
  }

  &:not(:has(> :nth-child(2))) {
    max-width: calc(var(--item-max-width) * 1);
  }}

  .border: 1px solid rgba(211, 14, 14, 0.463);
  border-radius:6px;
  /* gap: 12px;*/
  padding: 1px;
}

.box-col-alt a {
  text-align: center;
  /*margin: 2px 0;*/
}/*





/* setas */
.products-slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 1px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.products-slider .prev {
  left: 10px;
}

.products-slider .next {
  right: 10px;
}

.products-slider .nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.A2O4W8X6IK {
  display: none !important;
}

@-webkit-keyframes borderBlinkGeneric {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: red;
  }
}

@keyframes borderBlinkGeneric {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: red;
  }
}

@-webkit-keyframes borderBlinkSpecific {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: blue;
  }
}

@keyframes borderBlinkSpecific {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: blue;
  }
}

@-webkit-keyframes borderBlinkHeuristic {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: greenyellow;
  }
}

@keyframes borderBlinkHeuristic {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: greenyellow;
  }
}

.B2O4W8X6IL {
  /* border-color: red !important; */
  border-width: 3px !important;
  border-style: dashed !important;
  -webkit-animation: borderBlinkGeneric 1s step-end infinite;
  animation: borderBlinkGeneric 1s step-end infinite;
}

.C2O4W8X6IM {
  /* border-color: blue; */
  border-width: 3px !important;
  border-style: dotted !important;
  -webkit-animation: borderBlinkSpecific 1s step-end infinite;
  animation: borderBlinkSpecific 1s step-end infinite;
}

.D2O4W8X6IN {
  border-color: yellow !important;
  border-width: 3px !important;
  border-style: solid !important;
  -webkit-animation: borderBlinkHeuristic 1s step-end infinite;
  animation: borderBlinkHeuristic 1s step-end infinite;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 20px;
}
.card_galeria:hover{
  
box-shadow: 0 0 12px 4px #a40414;
}
.card_galeria-samais a:hover{
  background-color: #A40414;
}






.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(248, 5, 5, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 800px;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

@import url("https://fonts.googleapis.com/css2?family=Outfit&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Outfit;
  /*background-color: lightcoral;*/
}

.imagem-produto {
  align-items: center;
  /*width: 80%;*/
  /* proporção da imagem dentro do card **/
  max-width: 90%;
  max-height: 100%;*
  /* imagem nunca ultrapassa o contêiner **/
 aspect-ratio: 4 /3;
  border-radius: 8px;
  display: block;
  /* evita espaços indesejados */
  object-fit: cover;
  /* preenche o espaço sem distorcer */
  border-radius: 8px;
  /* opcional: cantos arredondados */
  gap: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
  /* centraliza a imagem *
  /* background-color: darkblue;*/
  /* background-image: linear-gradient(to bottom right, #ff7e5f, #feb47b);*/
}

/*body {
  background: #a3db0b;
}*/

.header-box {
  display: flex;
  justify-content: center;
  padding: 20 var;
}


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

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f4a70cf4;
  padding: 10px 20px;
  color: white;
}

.nav-country {
  display: flex;
  align-items: end;
  margin-left: 15px;
  font-size: 13px;
  color: #c4c4c4;
}

.nav-country h1 {
  font-size: 14px;
  color: white;
}

.nav-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgb(74, 8, 8);
  color: grey;
  max-width: 1000px;
  border-radius: 4px;
  margin-left: 15px;
}

.nav-search-category {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 5px;
  background-color: #e5e5e5;
  border-radius: 4px 0px 0px 4px;
}

.nav-search-input {
  border: none;
  outline: none;
  padding-left: 20px;
  width: 100%;
}

.nav-search-icon {
  max-width: 41px;
  padding: 8px;
  background: #ffd64f;
  border-radius: 0px 4px 4px 0px;
}

.nav-language {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  margin-left: 15px;
}

.nav-texts {
  margin-left: 15px;
  background-color: #232f3e;
  padding: 10px 20px;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-texts p {
  font-size: 10px;
}

.nav-texts h1 {
  font-size: 14px;
}

.nav-texts a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.nav-cart {
  display: flex;
  align-items: end;
  margin: 0px 15px;
}

.nav-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 20px;
  background: #232f3e;
  color: white;
  font-size: 15px;
}

.nav-bottom div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.header-slider ul {
  display: flex;
  overflow-y: hidden;
  margin-top: 0px;
  flex-direction: row;
}

.header-img {
  max-width: 100%;
  mask-image: linear-gradient(to bottom, #000000 50%, transparent 100%);
  background-color: #a3db0b;
}

.header-slider a {
  position: relative;
  /*top: 0%;*/
  z-index: 3;
 
  /* background: #ffffff4f;*/
  text-decoration: none;
  cursor: pointer;
  /*flex-direction: row;*/
 /* padding: 2vh 1vw;*/
  /* .header-slider a {*/
   top: 4%;

  font-size: 15px;
}

.control_next {
  right: 0;
}

.box-row {
  display:grid;
  /*grid-template-columns:repeat(auto-fit,minmax(150px,1fr));*/
  /*display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* não permite que quebrem linha */
  gap: 10px; /* espaçamento entre os itens */
  justify-content: space-between; /* ou center, flex-start, etc. */
margin: 10px 20px;
  gap:0px;
 align-items: stretch;
  flex-direction: row;
  flex: 1 1 290px; /* Garante que o card ocupe o espaço e tenha um tamanho base */
  /*-  max-width: 200px; /* Define uma largura máxima razoável para o card */
  width: 100%;
  /*overflow-x: auto;*/
  /*background-color: rgb(28, 232, 14);*/
  /* cada item ocupa espaço flexível *
  max-height: 80%;
  max-width:80%;
 /* height:fit-content;*/
}
.box-row .item {
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 200px);
  height: auto;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  padding: 0.5vw;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}

.box-row img {
/* width: 100%;
 /* height: auto;*/
  object-fit: contain;
}

.box-row .item p {
  font-size: clamp(0.7rem, 1vw, 1rem);
}

.box-col img {
  border-radius: 20px;
  width: 100%;
  /*165,12px;*/
  height: auto;
  /*165,12px;*
  min-height: 165, 12px;
  max-height: 165, 12px;*/
  object-fit: contain;

  /* background-color: red;*/
}

.box-col {

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-radius: 8px;
  justify-content: space-between;
  height: 165px;
  width: 165px;
  /* limite opcional para cada bloco */
  text-align: center;
  /*width: 165, 12px;*/
  /* largura fixa */
  background-color: rgb(225, 153, 70);
  /* daqui para baixo ok*/
  box-sizing: border-box;
  flex: 1 1 180px;
  /* cada item ocupa espaço flexível */
  max-width: 100%;
  /* limite de largura para cada coluna */
  /* limite opcional para cada bloco */
  margin: 5px;
  gap: 1px;
  padding: 0px 0px;
  background: rgb(234, 190, 61);
  z-index: 3;
  max-height: 80%;



  object-fit: cover;
  /* ajusta o conteúdo sem distorcer */
  border-radius: 8px;
  /* opcional: deixa os cantos arredondados */

  /*background-color: #a3db0b;*/
}

.box-col a {
  margin: 2px 0;
  text-align: center;
  
}

.bloco-titulo {
 
  color: rgb(234, 182, 69);
  text-align: center;
  align-content: center;
  
  padding:10px;
  font-size: 16px;
  margin-top: 2px 0;
  text-transform: uppercase;
  z-index: 2;
  
}
.bloco1-titulo {
  /*width: 50%;*/
  z-index: 1;
  gap:inherit;
  margin-top: 2px 0;
  align-items: center;
}

.bloco-titulo h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
 
  line-height: 1.1;
  color: rgb(234, 182, 69);
  text-align: center;
  max-height: 4.5em;
  font-size: clamp(0.5rem, 1vw, 1rem);
  text-transform: uppercase;
  margin: 8px;
    /* CRÍTICO: Força o texto a ficar em uma única linha */
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;

  

}.products-slider {

  display: flex;

  flex-wrap: nowrap; /*impede a quebra de linha*/
  gap: 12px;}

.bloco1-titulo h3 {
  margin-top: 0;
  text-align: center;
  font-size: clamp(8px, 1vw, 14px);
  color: #04e8e8;
 /* min-height: 40px;*/
  /* ou use clamp() para responsividade */
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  /* escala dinamicamente com viewport **/
  /*margin: 2px 0;*/
  
  display: flex; /*como estou usando display:flex, preciso usar justify-content*/
}
  


.bloco1-imagem {
  
    /* CRÍTICO: Permite que a imagem use o espaço vertical disponível e empurre o botão */
    flex-grow: 1; 
    height: 290px;
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 2 / 3; /* Exemplo: Proporção de livro (largura/altura). Ajuste conforme a proporção real das suas imagens. */
    /* Espaçamento entre a imagem e o botão */
    margin-bottom: 15px; 
   /* border-radius: 10px;*/
 
}
.bloco1-imagem img {
  align-items: center;
  /* Faz a imagem preencher o container */
 /* width: 100%;*/
  height: 100%;
  /* MÁGICA: Garante que a imagem preencha o espaço sem distorcer, cortando o excesso */
  object-fit: cover; 
  align-items: center;
  /* Se quiser que a imagem caiba completamente, deixando espaço em branco, use: object-fit: contain; */
  border-radius: 10px;
}
/*
.bloco-link {
  padding-bottom: 10px;
  text-align: center;
  z-index: 2;
 /* text-transform: uppercase;
    text-align: center;
    text-align-last: center;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    padding-bottom: 10px;
  text-align: center;
  z-index: 2;
  /*
  flex: 1 1 100;
  text-transform: uppercase;
  text-align: center;
  text-align-last: center;
  width: 100%;
  /* ocupa toda a largura do card *
  display: flex;
  justify-content: center;
  align-items: top;
  margin-top: auto;
  padding-top: 5px;
  /* empurra o botão para o fim do card *
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  /* min-width: fit-content;*

}*/
.bloco1-link {
  flex: 1 1 100;
  text-transform: uppercase;
  text-align: center;
  text-align-last: center;
  width: 100%;
  
  /* ocupa toda a largura do card */
  display: flex;
  justify-content: center;
  align-items: top;
  margin-top: 1rem;
  /* empurra o botão para o fim do card */
  font-size: clamp(0.675rem, 1.2vw, 0.875rem);
  /* min-width: fit-content;*/

}
.bloco1-link a {
  /* min-width: fit-content;*/
  max-width: 90%;
  /* limite dentro do card */
  display: block;
  overflow: hidden;
  /* corta o excesso */
  margin: 12px 0;
  text-align: center;
  text-align-last: center;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  text-overflow: ellipsis;
  padding: 4px 6px;
  border-radius: 6px;
  background: crimson;
  color: #fff;
  text-decoration: none;
  text-wrap: wrap;
  /* mantém em linha única */
  margin-top: auto;
  /* gruda no fim do card */
}

.bloco-link a {
  display: inline-block;
  padding: 6px 10px;
  background-color: crimson;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(0.5rem, 1vw, 0.9rem);/*
  color: rgb(255, 255, 255);
  margin-top: 2px;
  padding: 4px 6px;
  border-radius: 6px;
  background: crimson;
  text-decoration: none;
  text-wrap: wrap;
  /* min-width: fit-content;*/
  /*max-width: 90%;*/
  /* limite dentro do card *

  overflow: hidden;
  /* corta o excesso *
  /* Esta é a chave: empurra o elemento para o fundo do container Flex (o .box-col-alt) *
    margin-top: auto; 
    display: inline-block; /* Ou flex, mas block funciona bem para um link *
  text-align: center;
  text-align-last: center;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  text-overflow: ellipsis;
  padding: 4px 6px;
  border-radius: 6px;
  background: crimson;
  color: #fff;
  text-decoration: none;
  text-wrap: wrap;
  /* mantém em linha única */
 
}
.bloco-link a:hover {
  background: #a40414;
}

.box-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 20px 30px;
  align-items: flex-start;
}

.product-card2 {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  justify-content: end;

  background: #fbfbfb;
}


  padding: 10px;
  justify-content: space-between;
  overflow: hidden;
  /*background-repeat: no-repeat; /* evita repetição */
  background-position: center;
  /* centraliza a imagem *
  height: fit-content;*/
  max-width: 100%;
  background-color: #000000;
}


.products-slider .products {
  display: flex;
  overflow-x: auto;
  gap: 2px;
  margin-top: 10px;
  background-color: rgb(121, 206, 245);
  flex-direction: row;
  justify-content: space-between;
  height: 390px; /* Exemplo: Dê a altura que você precisar */
    border: 1px solid red; /* Para visualização */
}

.products-slider .products::-webkit-scrollbar {
  display: none;
}

.products-slider .products img {
  max-width: 120px;
  max-height: 200;
  background-color: orange;
  justify-content: space-between;
}

.products-slider-with-price {
  background-color: rgb(243, 8, 8);
  margin: 0px 30px;
  padding: 20px;
  margin-bottom: 15px;
  background-color: orange;
  flex-direction: row;
}

.products-slider-with-price .products {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-top: 10px;
  background-color: orange;
  flex-direction: row;
}

.products-slider-with-price .products::-webkit-scrollbar {
  display: none;
  flex-direction: row;
}

.product-card {
  display: flex;
  flex-direction: row;
  justify-content: end;
  min-width: 210px;
  background: #fbfbfb;
}

.products-slider-with-price img {
  width: 110px;
  margin: 0px 50px;
}

.product-offer p {
  background-color: #be0b3b;
  color: white;
  /*display: inline-block;*/
  padding: 2px 5px;
  border-radius: 2px;
  margin: 8px 0px;
  font-size: 13px;
}

.product-offer span {
  color: #be0b3b;
  font-weight: 500;
  font-size: 12px;
}

.product-price {
  color: grey;
  font-size: 13px;
}

.product-price span {
  font-size: 16px;
  font-weight: 500;
  color: #525252;
}

.product-price p {
  color: grey;
  font-size: 13px;
}

.product-card h4 {
  color: #525252;
  font-size: 15px;
  font-weight: 400;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  background-color: #131921;
  padding: 20px 60px;
}

/* ---------- media query ----------- */

@media only screen and (max-width: 1200px) {/*desktop grande*/
  nav {
    flex-wrap: wrap;
  }

min-height: 300px;


}

.nav-search {
  order: 7;
  margin: 15px 0 5px;
  min-width: 300px;
}

@media (max-width: 1000px) {}

@media (max-width: 800px) {


  .box-col {
    max-width: 100%;
  }
}



}

@media only screen and (max-width: 780px)/* tablet*/{





  .imagem-produto {
    max-height: 30%;
    z-index: auto;
  }

  .bloco-titulo h3 {
    color: #008000 font-size: 0.9rem;
    z-index: 4;
  }
}

@media (max-width: 360px)/* celular*/ {}


.nav-country {
  display: none;
}

}

.nav-language {
  display: none;
}

.nav-texts {
  display: none;
}

.nav-bottom {
  font-size: 13px;
  gap: 10px;
  overflow-x: scroll;
}

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

.nav-bottom p {
  text-wrap: nowrap;
}

.mobile-user-icon {
  display: flex !important;
  flex: 1;
  justify-content: flex-end;
}

.mobile-user-icon img {
  width: 25px;
}

.nav-cart h4 {
  display: none;
}

.nav-cart img {
  width: 25px;
}


footer {
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
}

.dropdown {
  display: none;
  position: relative;
  top: 100%;
  left: 0;
  background-color: white;
  min-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 4px;
  padding: 16px;
}

.dropdown h4 {
  margin: 8px 0;
  font-size: 14px;
  color: #111;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

.dropdown a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #007185;
  text-decoration: none;
}

.dropdown a:hover {
  text-decoration: underline;
}

.menu-container:hover .dropdown {
  display: block;
}

.menu-container {
  position: relative;
  background-color: #a3db0b;
}

.menu-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.genero-label {
  font-size: 0.8em;
  font-weight: bold;
  color: #f1ecec;
  margin-bottom: 5px;
  text-align: center;
  font-size: clamp(0.5rem, 1.5vw, 1.2rem);
}




.products-slider3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  max-width: 100%;
  background-color: rgb(0, 0, 0);
  gap: 12px;
  background-position: center center;
}


.products-slider .box-row {
  display: grid; /* Descomentado para ativar o Grid */
  /*grid-template-columns: repeat(auto-fit, 
      minmax(clamp(200px, 60%, 290px), 1fr));
 /* display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  align-content: space-between;
  justify-items: auto;
  justify-content: center;
  align-items: space-between;*/
  grid-template-columns: repeat(8, 1fr);
  /* sempre 5 colunas */
  gap: 12px;
  /*width: 100%;
  max-height: 500px;
 /* flex; 1 1 100%;
  /* cada item ocupa espaço flexível */
  

}


.products-slider .box-col-alt:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 12px 4px #a40414;
}

/*.products-slider .bloco-titulo h3 {
  font-size: clamp(0.7rem, 1.2vw, 1rem);
  color: #04e8e8;
  margin-bottom: 6px;
}*/

.bloco-imagem img {
  width: 100%;
    height: 290px;
    object-fit: cover;
    aspect-ratio: 2 / 3;
    display: block;
    border-radius: 6px;
    z-index: 1;
    margin: 0;
    padding: 0;

  /*width: 100%;
   /* height: 100%;
    /* Garante que a imagem preencha o container sem distorcer (cortando as bordas) *
    object-fit: cover;
  /*width: 100%;
  aspect-ratio: 3 / 4;
  /* mantém proporção */
 /* object-fit: cover;*
  border-radius: 6px;
  /*flex:1 1 60%;*
  width: 100%;
    height: 100%;
    /* Garante que a imagem preencha a área definida, cortando o excesso **
    object-fit: cover;*/
}

/*.products-slider .bloco-link a {
  display: block;
  margin-top: 6px;
  padding: 6px;
  border-radius: 6px;
  background: crimson;
  color: #fff;
  font-size: clamp(0.6rem, 1.2vw, 0.9rem);
  text-decoration: none;
}

/* Setas de navegação */
.products-slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.products-slider .prev {
  left: 5px;
}

.products-slider .next {
  right: 5px;
}

.products-slider .nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* copiado para ver se melhora o texto da galeria e do productos-slider */


@font-face {
  font-family: "Source Serif Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Source Serif Pro Light"), local("SourceSerifPro-Light"), url(https://fonts.gstatic.com/s/sourceserifpro/v8/neIXzD-0qpwxpaWvjeD0X88SAOeasd8ctSyqxA.woff2) format("woff2")
}

@font-face {
  font-family: "Source Serif Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Serif Pro"), local("SourceSerifPro-Regular"), url(https://fonts.gstatic.com/s/sourceserifpro/v8/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oA.woff2) format("woff2")
}

@font-face {
  font-family: "Source Serif Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Source Serif Pro Bold"), local("SourceSerifPro-Bold"), url(https://fonts.gstatic.com/s/sourceserifpro/v8/neIXzD-0qpwxpaWvjeD0X88SAOeasc8btSyqxA.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format("woff2")
}

div.lowerCatCard {
  position: absolute;
  background: #e9e9e9;
  padding: 5px 5px;
  height: 200px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

div.lowerCatCard:hover {
  opacity: 0.95;
  bottom: 0;
  height: 390px;}

  
.products-slider .header-box {
  
    /* copiado do .products-slider3, .header-box3 */
      width: 100%;
      box-sizing: border-box;
      background-color: rgb(0, 0, 0);/*
  display: flex;
  flex-direction: row;
  gap: 2px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  flex:1 1 100%;*/
}


.box-col-alt3 a {
  text-align: center;
  margin: 2px 0;
}
.box-col-alt3:hover {
  transform: translateY(-5px);
 
    background: #a40414;
}
/* imagens reduzem proporcionalmente */
.box-col-alt3 img {
  width: 100%;
  height: auto;
  max-height: 20vh;
  object-fit: contain;
}

.bloco-titulo3 {
  width: 100%;
  z-index: 1;
  gap:inherit;
  margin-top: 2px 0;
}

.bloco-titulo3 h3 {
  margin-top: 0;
  text-align: center;
  font-size: clamp(8px, 1vw, 14px);
  color: #04e8e8;
 /* min-height: 40px;*/
  /* ou use clamp() para responsividade */
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* escala dinamicamente com viewport **/
  /*margin: 2px 0;*/
  text-align: center;
  display: flex; /*como estou usando display:flex, preciso usar justify-content*
  justify-content: center; /*centraliza horizontalmente*
  align-items: center; /*centraliza verticalmente*
  text-align: center;
  font-size: clamp(0.85rem, 1.6vw, 1rem);/*reduz conforme a viewport*
  color: #333;
  z-index: 1;*/

}
.bloco-imagem3 {
 /* min-height: 120px;*/
 /* width: 100%;*/
  align-items: center;
  justify-content: center;
  /* ocupa toda a largura disponível */
  aspect-ratio: 2 / 3;
  /* define proporção largura/altura (ex: 4:3) */
  object-fit: cover;
  /* preenche o espaço sem distorcer */
  border-radius: 8px;
  display: flex;
  flex:0 0 auto;

}

.bloco-link3 {
  flex: 1 1 100;
  text-transform: uppercase;
  text-align: center;
  text-align-last: center;
  width: 100%;
  /* ocupa toda a largura do card */
  display: flex;
  justify-content: center;
  align-items: top;
  margin-top: auto;/*1rem;  /* empurra o botão para o fim do card */
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  /* min-width: fit-content;*/

}


 .products-slider3 .box-col3 {
  flex: 1;
  max-width: 200px;
  text-align: center;
  border: 1px solid #ccc;
 /* padding: 10px;*/
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.products-slider3 img {
  /*width: 100%;*/
  height: auto;
  border-radius: 5px;
}


.box-row3 .item {
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 200px);
  height: auto;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
 /* padding: 0.5vw;*/
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}

.box-row3 img {
 /* width: 100%;*/
 /* height: auto;*/
  object-fit: contain;
}

.box-row3 .item p {
  font-size: clamp(0.7rem, 1vw, 1rem);
}

.box-col3 img3 {
  border-radius: 20px;
  width: 100%;
  /*165,12px;*/
  height: auto;
  /*165,12px;*
  min-height: 165, 12px;
  max-height: 165, 12px;*/
  object-fit: contain;

  /* background-color: red;*/
}


.card3:hover {
  transform: translateY(-5px);
}

.card-title3 {
  
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3em;
  min-height: 3em;
  line-height: 1.5em;
  text-transform: uppercase;
  
  font-weight: bold;
  color: #eab645;
  font-family: "Roboto", sans-serif;
  text-align: center;
  }

 

.box-row3 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* sempre 6 colunas */
  gap: clamp(4px, 2vw, 12px);
  /*gap: 12px;*/
  justify-items: center;
  align-items: start;
  width: 100%;
  max-height: 350px;
  /*margin: 10px 12px;*/
  box-sizing: border-box;
  /* evitar barras horizontais e permitir que os cards encolham */
  overflow: visible;
}





/* imagem: usa viewport (vw) para reduzir proporcionalmente em telas pequenas */
.bloco-imagem3 img {
  width: 100%;
  height: auto;
 /* max-height: 100%; /* encolhe quando a tela fica estreita */
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

/* título: encolhe com viewport, com limites via clamp */
.card-title3 h3,
.bloco-titulo3 h3 {
  display:-webkit-box;
  -webkit-line-clamp: 3; /* mostra até 3 linhas */
  line-clamp: 3; /* padrão para compatibilidade */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 1.1;
  margin: 2px 0;
  color: #eab645;
  text-align: center;
  overflow: hidden;
  max-height: 4.5em; /* 3 linhas × 1.5em de altura */
   font-size: clamp(0.5rem, 1vw, 1rem); /* escala automática */
   
  text-transform: uppercase;
  }/************/
  /* FORCE 5 COLUNAS — os 5 cards SEMPRE aparecem por linha,
   e elementos encolhem proporcionalmente (vw / clamp) */


/* botão / link: também encolhe */
.bloco-link3 a {
      font-size: clamp(0.5rem, 1vw, 0.9rem);
    /*text-overflow: ellipsis;*/
    padding: 4px 6px;
    border-radius: 6px;
    background: crimson;
    color: #fff;
    text-decoration: none;
    text-wrap: wrap;
    /* mantém em linha única */
    margin-top: 2px;
    /* gruda no fim do card */
 
  /*display: inline-block;*/
}

/* garante que o grid não force itens a extrapolarem a largura do container */
.products-slider3, .header-box3 {
  width: 100%;
  box-sizing: border-box;
  background-color: #000000;
}




.products-slider3 {
    display: flex;
    flex-wrap: nowrap; /*impede a quebra de linha*/
    gap: 12px;
    /*padding: 10px;*/
    justify-content: space-between;
   /* overflow: hidden;*/
    /*background-repeat: no-repeat; /* evita repetição */
    background-position: center;
    /* centraliza a imagem */
    /*height: fit-content;*/
    max-width: 100%;
        background-color: #000000;
  }
  .box-col-alt3 {
    border: 2px solid #a40414 !important;
    border-radius: 10px;
    box-shadow: 0 0 12px 4px #0f0300 !important;
    overflow: visible;
    transition: box-shadow 0.3s ease;
  }
  /* remove gaps gigantes que você tinha (corrige gap excessivo caso exista) */
.box-col-alt3 {
  gap:clamp(8px, 2vw, 12px) !important;
}

/* efeito hover simples */

.box-col-alt3:hover {
  transform: translateY(-6px);
}

/* card individual — comportamento de encolhimento proporcional */
.box-col-alt3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* distribui imagem, título e botão */
  align-items: center;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 2 / 3;  /* controla a largura máxima do card; 1fr da grid já resolve distribuição */
 /* border: 20px solid #00ffff !important;
 /* box-shadow: 0 0 12px 4px #00ffff !important;*/
  transition: box-shadow 0.3s ease;
  height: auto;
  background: #0c0c0b;
  flex: 1 1 100%;
  max-height: 320px;
  border: 1px solid #d30e0e76;
  border-radius: 10px;
  text-align:center;
 /*overflow:hidden;*/
   box-sizing: border-box;
  font-size: 100%;
    /*align-content: space-between;*/
    transition: transform 0.3s ease;
    justify-items: center;
    margin: 0.8em;  
    overflow:visible;
}
.galeria {
  display: flex;
  flex-wrap: nowrap;
  /*impede a quebra de linha*/
 flex-direction: row; /* Essencial para o carrossel horizontal */
  gap: 2px;
  padding: 1px;
  justify-content: space-between;
  overflow: hidden;
  /*background-repeat: no-repeat; /* evita repetição */
  background-position: center;
  /* centraliza a imagem */
  width: 100%;
  max-width: 100%;
  height: 680px;
  background-color: #000000;
 
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 1px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex !important;
   justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height:auto;
display: flex !important;
flex-direction: row !important; /* CRÍTICO: Força a linha horizontal */
   /* flex-wrap: wrap !important;     /* CRÍTICO: Permite quebra de linha */
   
}
/* Força o <a class="card_galeria"> a comportar-se como card empilhado verticalmente */
a.card_galeria,
.card_galeria {
  border: 1px solid rgba(211, 14, 14, 0.463);
  border-radius: 8px;
  display: flex !important;
  flex-direction: column !important;
     /* CRÍTICO: Não cresce (0), não encolhe (0), tamanho base 220px */
    flex: 0 0 220px !important; 
    height: auto !important;
  align-items:start !important;
  margin:0;
 /* width: 220px;  */      /* ajuste conforme desejar */
  /*height: auto;   /* garante altura uniforme */
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none; /* evitar estilos de link */
  background-color: #000;
}



/* Container da imagem: ocupa topo do card e mantém proporção */
.card_galeria-img {
  width: 100% !important;
  height: 290px !important;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;/* CRÍTICO: Impede que o container da imagem encolha */
  /*flex: 0 0 auto; /* não expande além do definido */
    padding: 0;
  margin: 0;
  box-sizing: border-box;
  /*flex-grow: 1;*/
}

/* A própria imagem: preencher bem, sem "empurrar" */
.card_galeria-img img.card_imagem-produto,
.card_galeria-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;       /* corte inteligente - ou use contain se preferir ver a imagem inteira */
  display: flex;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  box-sizing: border-box;
  flex-grow: 0;
}

/* Bloco de informações fica abaixo e ocupa toda largura */
.card_galeria-info {
  width: 100% !important;
  /*flex: 1 1 auto !important;*/
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  background: #000;
  text-transform: capitalize;
  

 /*flex-grow: 0; /* Ocupa o espaço que sobra no card */
 

  margin-top: 0.5rem;
  color: #bed764;
}

/* Garante que título/autor/preço fiquem empilhados corretamente */
.card_galeria-title{
  text-transform:uppercase;
  width: 100%;
  text-align: center;
  margin: 6px 0;
}
.card_galeria-author{
  width: 100%;
  text-align: center;
  margin: 6px 0;
  text-transform: capitalize;
  background: blend mode 25px; ;
  accent-color:unset;
}
.card_galeria-price {
  color:#A40414;
  width: 100%;
  text-align: center;
  margin: 6px 0;
  text-transform: capitalize;
}
.card_galeria-samais {
  width: 100%;
  text-align: center;
  margin: 6px 0;
  text-transform: capitalize;
}

/* Se quiser que o botão fique sempre no rodapé do info */
.card_galeria-samais {
  margin-top: auto;
}
.scrolling-content {
  background-color: #000;
  display: flex !important;
  flex-direction: row !important; /* CRÍTICO: Mantém tudo em uma única linha */
  overflow-x: scroll !important; /* CRÍTICO: Habilita o scroll horizontal */
  flex-wrap: nowrap !important; /* CRÍTICO: Impede que os livros quebrem a linha */
  flex-grow: 1 !important; /* Ocupa o espaço entre as setas */
  gap: 20px; /* Espaço entre os cards */
  
  /* Opcional: Esconder a barra de rolagem padrão para uma aparência mais limpa */
  scrollbar-width: none; /* Firefox */
}
.scrolling-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}/* 4. Estilo das Setas de Navegação */
.nav-button {
    background: #f80404;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    margin: 0 5px;
    height: 50px; /* Altura para as setas */
    border-radius: 4px;
    transition: background 0.3s;
}
.nav-button:hover {
    background: #cf0505;
}

.box-col-alt
{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* empilha do topo para baixo */
  align-items: stretch; /* ocupa largura do grid cell */
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
  background: #0c0c0b;
  border: 2px solid #a40414;
  border-radius: 10px;
  overflow: hidden;
 /* aspect-ratio: 2 / 3; /* mantém proporção visual do “livro” */
 /* min-height: 320px; /* garante espaço mínimo para título + botão */
 position: relative !important;
 z-index: 1 !important;
}
.bloco-imagem {
  /*width: 65%;*/
  flex: 0 0 auto; /* não encolhe para esconder o título, nem cresce além do definido */
  aspect-ratio: 2 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #111;
  object-fit: cover;
  border-radius: 8px;
  height:290px;
  margin:auto;
}
/* imagem interna ocupa o container sem deslocar outros elementos */
.bloco-imagem img {
  /*width: 100%;*/
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
}
.bloco-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: transparent;
  color: #eab645;
  font-size: clamp(0.5rem, 1vw, 1.2rem);
  flex: 1 1 auto; /* ocupa o espaço disponível entre imagem e botão */
  /*min-height: 64px;*/
  box-sizing: border-box;
}
.bloco-titulo h3{
  margin: 0;
  font-size: clamp(0.35rem, 0.68vw, 1.0rem);
  line-height: 1.15;
  color: #eab645;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: uppercase;
  white-space: normal; /* permite quebra de linha */
  word-break: break-word; /* quebra palavras longas se necessário */
 
}
.bloco-link{
  padding: 8px 10px;
  text-align: center;
  flex: 0 0 auto; /* não expande, fica sempre visível */
  margin-top: 10px; /* garanta que o botão "grude" na parte inferior */
  background: transparent;
  font-size: clamp(0.5rem, 1vw, 1.2rem);
}
.bloco-link a{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: crimson;
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.65rem, 0.9vw, 0.95rem);

}
/* Evita sobreposição vertical causada por posicionamento absoluto em algum lugar */

.bloco-imagem img {
  width: 100%;
 /* max-height: 100%;*/
  height: 290px;
}

@media (max-width: 1500px) {
  .products-slider .products,
  .scrolling-content,
  .box-row,
  .box-col-alt,
  .galeria { grid-template-columns: repeat(6, minmax(auto, 1fr)); }
}
@media (max-width: 900px) {
  .products-slider .products,
  .scrolling-content,
  .box-row,
  .box-col-alt,
  .galeria { grid-template-columns: repeat(6, minmax(auto, 1fr)); }
}
@media (max-width: 600px) {
  .products-slider .products,
  .scrolling-content,
  .box-row,
  .box-col-alt,
  .galeria { grid-template-columns: repeat(6, minmax(auto, 1fr)); }
}
@media (max-width: 360px) {
  .products-slider .products,
  .scrolling-content,
  .box-row,
  .box-col-alt,
  .galeria { grid-template-columns:repeat(6, minmax(auto, 1fr));
}