.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;background: rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 18px;}
.produto a:hover{text-decoration: none;}
.img-produto{height: 300px;position: relative;margin-bottom: 4px;}

/* Ajustar espaçamento das avaliações */
.produto .rating {
margin-bottom: 3px !important;
}
.img-produto img{width: 100% !important ;margin: 0 auto !important;}
/* 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: #000000;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: #000000;}
.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: #63674F;
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: #63674F !important;
color: #63674F !important;
transition: all 0.3s ease;
}

.btn-carrinho:hover {
background-color: #63674F !important;
color: #fff !important;
}

#marca_filtro_2 h3 {
font-size: 13px !important;
}

/* Área dos botões - sempre no final do card */
.produto .botoes-area {
margin-top: auto;
padding-top: 35px;
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: #63674F;
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{max-height: 450px; 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: 50px !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:1 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: #63674F !important;border-color: #63674F !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;margin-top:8px;

.container-box-tam{
position: absolute !important; bottom: 100px !important; left: 0px !important;
}

}
.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 .fabricante-info,
.produto .variacao-area,
.produto .mudar_dados,
.produto .container-box-tam,


/* 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}

/* Mensagem B2B: melhorar responsividade no mobile (botões em coluna, largura total) */
.produto .mensagem-b2b{align-items: stretch; text-align: left;}
.produto .mensagem-b2b-acoes{flex-direction: column; width: 100%; gap: 6px;}
.produto .mensagem-b2b-acoes .btn{width: 100%;}
}

/* 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: #63674F !important;border-color: #63674F !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; flex-direction: column;}
.produto .botoes-area .col-md-12{padding:0}
.produto .botoes-area .col-md-12:first-child{flex:1 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: absolute; /* em vitrines gerais, fica no fluxo após os botões */
left: auto;
right: auto;
bottom: auto;
width: 100%;
bottom: 100px;
left: 0;
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}
}

.img-cart-lateral{transition: all 0.3s ease;}
.img-cart-lateral:hover{opacity: 0.8;}