.page-header{padding-bottom: 0px !important; }

.produto{margin-bottom: 22px;transition: all .3s ease-in-out;-webkit-box-shadow: 1px 1px 3px #c3c3c3;box-shadow: 1px 1px 3px #c3c3c3;background-color: var(--cor-fundo-produtos);padding: 8px;border-radius: 10px;height: auto;min-height: 280px;display: flex;flex-direction: column;border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 20px; background: linear-gradient(to bottom, #ffffff, #f9f9f9);}
.produto a:hover{text-decoration: none;}
.img-produto{height: 150px;position: relative;margin-bottom: 4px;}

/* Ajustar espaçamento das avaliações */
.produto .rating {
	margin-bottom: 3px !important;
}
.img-produto img{width: 90%;margin: 0 auto;}
/* Centralização e melhor encaixe das imagens no card */
.img-produto{display:flex;align-items:center;justify-content:center;}
.img-produto img{height:100%;width:auto;max-width:100%;object-fit:contain;}
.produto .pic-1{opacity: 1; transition:all .7s  0s}
.produto:hover .pic-1{opacity: 0;}
.produto .pic-2{opacity: 0;transition:all .7s  0s;position: absolute;top: 0; bottom: 0; right: 0; left: 0; margin-inline: auto;}
.produto:hover .pic-2{opacity: 1;}
.produto:hover .img-produto{animation-name:blur;animation-duration:0.7s ;}
@keyframes blur{0%{filter: opacity(1)}50%{filter: opacity(0.7)}100%{filter: opacity(1)}}


.nome-prod-desktop{font-size: 13px;color: #404040;margin: 10px 0px;height: auto;min-height: 36px;/* font-weight: bold; */text-align: center;line-height: 1.4;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.preco-prod{display: flex; flex-direction: column;}
.preco-de{color: #7f8c8d !important; text-decoration: line-through;text-align: center;}
.preco-por{color: #2980b9;font-size: 16px;font-weight: bold;height: auto;min-height: 22px;text-align: center;line-height: 1.2;}
.preco-por b{font-size: 12px;color: #2980b9;}
.sem-juros{margin: 0;margin-top: 3px;height: auto;min-height: 20px;color: var(--cor-1);margin-bottom: 4px;line-height: 1.3;}
.parcelas{font-size: 11px !important;text-align: center;}

.titulo{ height: 75px; display: block;text-align: left; overflow: hidden; padding-left: 15px; padding-right: 15px; }
.titulo h4{font-family: 'Roboto',sans-serif;text-align: center;color: #6d7e88;font-size: 14px;text-decoration: none; overflow: hidden;}
.indisponivel{ opacity: 0.60; }

.compre-adicione-container{display: flex; justify-content: center; height: 0px;}
.btn-buy {
	margin-top: 0px !important;
	width: 100%;
	border-color: #04040440;
	background-color: #595eb1;
	color: #fff;
	/* font-weight: bold !important; */
	margin-top: 0px;
    width: 100%;
    border-color: #04040440;
    /* Cor dinâmica vinda do banco com fallback para var(--cor-1) */
    color: #fff;
    padding: 6px 9px !important;
	padding: 6px 9px !important;
	
}

.btn-buy:hover {
    filter: brightness(0.92);
}

.btn-carrinho {
	border-color: #595eb1 !important;
	color: #595eb1 !important;
	transition: all 0.3s ease;
}

.btn-carrinho:hover {
	background-color: #595eb1 !important;
	color: #fff !important;
}

/* Área dos botões - sempre no final do card */
.produto .botoes-area {
	margin-top: auto;
	padding-top: 8px;
	position: relative;
	z-index: 5;
}

/* Garantir que o conteúdo se expanda adequadamente */
.produto .conteudo-produto {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 80px;
	padding-bottom: 0; /* sem espaço extra; o espaço é reservado pelo card quando houver seletor */
}

/* Ajustar espaçamento quando há muitos elementos */
.produto .preco-prod {
	margin-bottom: 5px;
}

.produto .parcelas {
	margin-bottom: 5px;
}

.produto .pix-boleto-info {
    margin-bottom: 5px;
    color: #27ae60;
    border: 1px dashed #27ae60;
    background-color: transparent;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* Bloco de mensagem B2B (login/cadastro/aprovação) */
.produto .mensagem-b2b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #cfd8dc;
  background: linear-gradient(180deg, #f9fbfc 0%, #f2f7fa 100%);
  color: #3f5461;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  margin: 8px 0 10px 0;
}
.produto .mensagem-b2b i { color: #90a4ae; margin-right: 6px; }
.produto .mensagem-b2b-acoes { display: flex; gap: 8px; }
.produto .mensagem-b2b-acoes .btn {
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Seletor de variações */
.produto .mudar_dados {
	margin-bottom: 5px;
}

/* Reduzir espaçamento quando poucos elementos estão visíveis */
.produto .conteudo-produto:empty,
.produto .conteudo-produto:only-child {
	margin-bottom: 0;
}

/* Ajustar espaçamento do nome do produto */
.produto .nome-prod-desktop {
	margin: 8px 0px;
}

/* Ajustar espaçamento do fabricante */
.produto .fabricante-info {
	margin-bottom: 5px;
	text-align: center;
}

/* Ajustar espaçamento da área de variações */
.produto .variacao-area {
	margin-bottom: 5px;
}

/* Garantir que todos os elementos fiquem dentro do card */
.produto > * {
	max-width: 100%;
}

.produto {
  position: relative;
}

/* Ajustar espaçamento quando poucos elementos estão visíveis */
.produto:has(.conteudo-produto:empty) .botoes-area {
	padding-top: 5px;
}

/* Reduzir espaçamento quando apenas imagem e nome estão visíveis */
.produto:has(.conteudo-produto:only-child) .botoes-area {
	padding-top: 5px;
}

/* Ajustar espaçamento da imagem quando há pouco conteúdo */
.produto .img-produto {
	margin-bottom: 5px;
}
.btn-shop{width: 50%;}

.btn-adicionar{font-family: 'Roboto',sans-serif;border-radius: 5px 0 0 5px !important;color:#999 !important;font-size:10px;line-height: 10px !important;text-align: left;transform: translateX(-110%);transition: all .3s; text-transform: uppercase;padding:6px 2px 5px 2px !important}
.btn-adicionar span{font-size:10px;display: inline-block; overflow: hidden;}
.btn-adicionar i{display:inline-block;font-size: 18px;}
.produto:hover .btn-adicionar{transform: translateX(0);}
.btn-comprar{position: relative !important; top: -230px; border-radius: 100px !important; font-weight: 800; color: #272727 !important; text-transform: uppercase; background-color: #272727; opacity: 0; transition: all .2s ease; padding: 10px !important;}
.produto:hover .btn-comprar, .ver-produto{opacity: 1;}

.btn-add-cart .btn-add{position: relative !important; top: -230px; border-radius: 100px !important; font-weight: 800; color: #272727 !important; text-transform: uppercase; background-color: #272727; transition: all .2s ease; padding: 10px !important;}
.produto:hover button{ opacity: 1; -webkit-transition: all 0.3s ease-in-out; }

.btn-indisponivel{ background-color: #fff; padding: 8px 25px !important; border-radius: 25px !important; text-transform: uppercase; color: #333 !important; margin: 15px 0px; font-weight: 600 !important;  }
/* SELOS */

.selos{
  position: absolute;
  top: 8px;
  right: auto;
  background: #595eb1;
  color: #fff;
  font-weight: 700 !important;
  text-transform: uppercase;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 999px;
  letter-spacing: .5px;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.selo-l{ left: 8px; right: auto; }
.selo-r{ right: 8px; left: auto; }

.col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
.col-xs-15, .col-md-15 { width: 20%; float: left; }

@media (min-width: 992px){
	.produto{min-height: 260px; height: auto;}
}


@media (max-width: 992px) {
	.img-produto img {
    /* width: auto; */
    margin: 0 auto;
}
		.img-produto{/* height: 130px !important; */}	

	.produto{margin-bottom: 25px;min-height: auto;height: auto;/* padding: 21px 18px 80px 17px; */}
	.nome-prod-desktop{font-size: 12px; color: #404040; height: 40px !important;min-height: 47px;text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
	.preco-por{font-size: 14px;height: auto;min-height: 32px;}
	
	/* Ajustes para mobile */
	.produto .botoes-area {
		margin-top: 10px;
		padding-top: 8px;
	}
	
	.produto .conteudo-produto {
		flex: 1;
	}
}

/* Mobile refinements: tornar os cards mais fluidos e bonitos no celular */
@media (max-width: 768px){
	/* Imagem com proporção estável e melhor encaixe */
	.img-produto{height:auto;aspect-ratio:1/1;max-height:50vw;}
	.img-produto img{width:100%;height:100%;object-fit:contain;}

	/* Cartões mais compactos e modernos */
	.produto{padding:8px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,0.06);min-height:auto;height:auto;}
	.nome-prod-desktop{font-size:12.5px;min-height:auto;height:auto;margin:6px 0;}
	.preco-por{font-size:15px;}
	.preco-por b{font-size:13px}
	.parcelas{font-size:11px !important;margin-bottom:4px;}
	.pix-boleto-info{font-size:11px;padding:4px 6px;margin-bottom:6px}
	.produto .conteudo-produto{min-height:auto}

	/* Botões mais confortáveis para toque */
	.btn-buy{font-size:14px;padding:10px 12px !important;border-radius:6px;}

	/* Layout dos botões: ícone de carrinho + botão comprar ao lado */
	.produto .botoes-area{display:flex;gap:8px;align-items:center;margin-top:8px}
	.produto .botoes-area .col-md-12{padding:0}
	.produto .botoes-area .col-md-12:first-child{flex:0 0 auto}
	.produto .botoes-area .col-md-12:last-child{flex:1 1 auto}
	/* Transformar botão de carrinho em ícone circular, mantendo cor dinâmica */
	.produto .btn-carrinho{width:42px;height:42px;padding:0 !important;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:0;background-color: #595eb1 !important;border-color: #595eb1 !important;color:#fff !important}
	.produto .btn-carrinho i{margin:0;font-size:18px}

	/* Carrosséis (home): cards compactos no mobile */
	.owl-carousel .produto{padding:8px;border-radius:10px;min-height:auto;height:auto}
	.owl-carousel .img-produto{height:auto;aspect-ratio:1/1;max-height:45vw}
	.owl-carousel .nome-prod-desktop{font-size:12.5px;min-height:auto;margin:6px 0}
	.owl-carousel .preco-por{font-size:15px}
	.owl-carousel .preco-por b{font-size:13px}
	.owl-carousel .parcelas{font-size:11px !important;margin-bottom:4px}
	#bestsellers .produto,.vitrine-carrosel .produto{box-shadow:0 4px 10px rgba(0,0,0,.05)}

	/* Exibir seletor de variação sem depender de hover no mobile */
	.container-box-tam{opacity:1;visibility:visible;pointer-events:auto;max-height:none;position:static;margin-top:8px;}
	.box-tam{height:auto;}

	/* Em "Mais Vendidos" o seletor também deve ficar no fluxo */
	#bestsellers .container-box-tam{position:static;max-height:none;margin-top:8px;}
	/* Remover padding extra no mobile */
	#bestsellers .produto{padding-bottom:8px !important}

	/* Mobile: exibir apenas imagem e título (oculta preço, parcelas, pix, botões, avaliações etc.) */
	.produto .rating,
	/* .produto .preco-prod, */
	/* .produto .preco-de, */
	/* .produto .preco-por, */
	/* .produto .sem-juros, */
	/* .produto .parcelas, */
	.produto .pix-boleto-info,
	.produto .mensagem-b2b,
	.produto .fabricante-info,
	.produto .variacao-area,
	.produto .mudar_dados,
	.produto .container-box-tam,
	.produto .botoes-area { display:none !important; }

	/* Título mais compacto */
	.produto .nome-prod-desktop{margin:6px 0 2px 0}

	/* Reexibir preço (De e Por) e parcelamento no mobile */
	.produto .preco-prod{display:block !important;margin:6px 0}
	.produto .preco-de{display:block !important;font-size:12px !important;margin-bottom:2px}
	.produto .preco-por{display:block !important;font-size:15px !important;min-height:auto}
	.produto .preco-por b{font-size:13px}
	.produto .parcelas{display:block !important;font-size:11px !important;margin-top:2px}
	.produto .sem-juros{display:block !important;margin:0;color:var(--cor-1)}

	/* Reexibir avaliações (rating) no mobile */
	.produto .rating{display:block !important;margin-bottom:3px !important;text-align:center}
}

/* Reduzir transições baseadas em hover no mobile (coerência) */
@media (hover: none){
	.produto .pic-1{opacity:1;}
	.produto .pic-2{opacity:0;}
	.produto:hover .pic-1{opacity:1;}
	.produto:hover .pic-2{opacity:0;}
}

@media (max-width: 992px) {
    .col-md-15 { width: 50%; float: left; }
    /* Mobile/Tablet: ocultar texto do carrinho e usar ícone circular */
    .produto .btn-carrinho{font-size:0 !important;width:42px;height:42px;padding:0 !important;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background-color: #595eb1 !important;border-color: #595eb1 !important;color:#fff !important}
    .produto .btn-carrinho i{margin:0 !important;font-size:18px}
    #similares .btn-carrinho{width:42px !important;padding:0 !important}
    .produto .botoes-area{display:flex;gap:8px;align-items:center}
    .produto .botoes-area .col-md-12{padding:0}
    .produto .botoes-area .col-md-12:first-child{flex:0 0 auto}
    .produto .botoes-area .col-md-12:last-child{flex:1 1 auto}
}

/* container que centraliza */
.box-tam {
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
  height: 30px;
  margin: 0;
  gap: 5px; /* se tiver mais de um */
}

/* botão ajustado ao conteúdo */
.label-filtro {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 12px; /* controla largura pelo padding */
  margin: 0;
}

/* oculta input mas mantém clicável */
.label-filtro input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* hover */
.label-filtro:hover {
  border-color: #888;
}

/* ativo */
.label-filtro:has(input:checked) {
  border-color: var(--cor-1);
  background-color: var(--cor-1);
  color: #fff;
}

.box-tam .owl-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.box-tam .owl-prev svg {
    width: 15px;
    height: 15px;
}

.box-tam .owl-next svg {
    width: 15px;
    height: 15px;
}

.box-tam .owl-prev {
    left: 5px !important; /* afasta a seta da borda esquerda */
    top: 15% !important;
}

.box-tam .owl-next {
    right: 5px !important; /* afasta a seta da borda direita */
    top: 15% !important;
}

.row-box-tam{
  box-shadow: 0 3px 3px -2px #c3c3c3;background-color: var(--cor-fundo-produtos);border-radius: 0 0 10px 10px; padding-bottom: 5px;
}

.container-box-tam {
    position: static; /* em vitrines gerais, fica no fluxo após os botões */
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    pointer-events: none; /* desativa interação quando oculto */
    opacity: 0;
    visibility: hidden;
    max-height: 0; /* não ocupa espaço quando oculto */
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1;
    margin-top: 8px; /* deixa um pouco abaixo dos botões */
}

/* Quando passar o mouse sobre o produto, o carrossel aparece sem sobrepor */
.produto:hover .container-box-tam {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 38px; /* altura suficiente para o seletor */
}

/* Itens do carrossel */
.box-tam .owl-item {
    text-align: center;
}

/* (Removido) Overrides específicos do #bestsellers para manter cartões idênticos aos demais carrosséis */
/* Ajuste mínimo para as setas do carrossel de Mais Vendidos ficarem posicionadas corretamente
   (sem alterar layout dos cards/variações) */
#bestsellers > .owl-controls .owl-buttons div {
  position: absolute;
  top: 40% !important;
  transform: translateY(-50%);
  z-index: 2;
}
#bestsellers > .owl-controls .owl-prev { left: 5px !important; }
#bestsellers > .owl-controls .owl-next { right: 5px !important; }

/* Escopo Similares: cards mais compactos e botões responsivos */
#similares .produto{min-height:auto;height:auto}
#similares .img-produto{height:170px}
#similares .nome-prod-desktop{min-height:36px}
#similares .preco-por{font-size:16px}
#similares .btn-carrinho,#similares .btn-buy{width:100%;padding:10px 12px !important;font-size:14px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;white-space:normal}
#similares .btn-carrinho i{margin-right:6px}

@media (max-width: 992px){
  #similares .img-produto{height:auto;aspect-ratio:1/1;max-height:55vw}
  #similares .btn-carrinho,#similares .btn-buy{font-size:13px;padding:9px 10px !important}
}