/* ============================================================================
   produtos.css — estilos da página de produto refatorada (produtos-view-nova.php)
   Carregado apenas pela ação indexnovo() do produtos-controller
   (rota /produtos/indexnovo). Tudo escopado em .pdp-nova para NÃO afetar a página
   antiga (/produtos/index) nem o restante da loja. Cor do tema herdada de
   var(--mc-cor) / .btn-primary (cada loja tem a sua via template-NN.css).
   ============================================================================ */

/* ===== Respiro geral da página ===== */
.pdp-nova.main-container.headerOffset { padding-bottom: 50px; overflow-x: hidden; }
.pdp-nova .breadcrumb { margin-bottom: 14px; }

/* Barra de navegação na largura do conteúdo: a coluna do Bootstrap recua 15px de
   cada lado e deixava a barra mais estreita que o bloco do produto. Zerando o
   recuo, ela ocupa a largura inteira do container. A faixa de aviso das Regras
   do Carrinho vem logo abaixo e acompanha, senão desalinha com o breadcrumb. */
.pdp-nova .breadcrumbDiv,
.pdp-nova .rp-aviso-col { padding-left: 0; padding-right: 0; }

/* ===== Galeria (Swiper): thumbs verticais + imagem principal com zoom =====
   Layout: thumbs em coluna à esquerda, imagem principal à direita. O Swiper cuida do
   dimensionamento (sem os bugs de altura do bxSlider). */
/* largura contida: a galeria não estica pela coluna inteira (col-md-8 é larga e fazia
   a imagem ficar enorme/quebrar). Limita a área e mantém proporção equilibrada. */
/* thumbs à esquerda + imagem principal à direita (padrão de mercado BR: ML/Amazon/Magalu).
   No markup os thumbs já vêm antes, então a ordem natural do flex resolve. */
.pdp-nova .pdp-galeria { display: flex; gap: 12px; align-items: flex-start; max-width: 680px; width: 100%; }
.pdp-nova .pdp-galeria-thumbs { flex: 0 0 84px; max-width: 84px; min-width: 0; }
.pdp-nova .pdp-galeria-main { flex: 1 1 auto; min-width: 0; }
/* contenção: os swipers nunca podem estourar a largura (causava arrasto p/ a direita +
   barra de rolagem horizontal quando o Swiper calculava largura antes do layout pronto) */
.pdp-nova .pdpMain, .pdp-nova .pdpThumbs { width: 100%; max-width: 100%; overflow: hidden; }
.pdp-nova .pdp-galeria-thumbs .pdpThumbs { width: 84px; }

/* imagem principal — moldura suave, ALTURA LIMITADA (não cresce com a coluna larga;
   a imagem cabe dentro via object-fit:contain, sem empurrar o resto da página). */
.pdp-nova .pdpMain {
	border: 1px solid #ececec; border-radius: 12px; background: #fff; overflow: hidden;
	height: 560px;
}
/* o wrapper/slides nunca excedem a largura do .pdpMain (contém o overflow do Swiper) */
.pdp-nova .pdpMain .swiper-wrapper { max-width: 100%; }
.pdp-nova .pdpMain .swiper-slide { display: flex; align-items: center; justify-content: center; height: 560px; width: 100%; flex-shrink: 0; max-width: 100%; box-sizing: border-box; }
.pdp-nova .pdpMain .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.pdp-nova .pdpMain .swiper-zoom-container { width: 100%; height: 100%; }

/* thumbs verticais — quadradinhos; o ativo ganha borda na cor do tema */
.pdp-nova .pdpThumbs { height: 560px; }
.pdp-nova .pdpThumbs .swiper-slide {
	height: 78px !important; border: 1px solid #e4e6ea; border-radius: 8px; overflow: hidden;
	background: #fff; cursor: pointer; opacity: 1;
	display: flex; align-items: center; justify-content: center;
}
.pdp-nova .pdpThumbs .swiper-slide img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pdp-nova .pdpThumbs .swiper-slide-thumb-active { border-color: var(--mc-cor, #b9c0c9); }

/* Neste projeto o Bootstrap é customizado: col-md E col-lg só ativam em ≥1200px.
   Abaixo de 1200px as colunas já empilham sozinhas (viram 100%). Então a galeria/dados
   ficam lado a lado SÓ em ≥1200px (igual header/carrinho/checkout do projeto).
   Aqui só centralizamos a galeria quando empilhada (≤1199px), sem forçar largura. */
/* 992–1199px: colunas lado a lado — galeria encostada à esquerda, aproveitando a
   largura da coluna (não centralizar, senão sobra vão à esquerda). */
@media (min-width: 992px) and (max-width: 1199px) {
	.pdp-nova .pdp-galeria { max-width: 100%; margin: 0 0 18px; }
}
/* ≤991px: empilhado (coluna única) — galeria centralizada e contida; thumbs viram
   faixa horizontal abaixo da imagem; imagem com altura menor. */
@media (max-width: 991px) {
	.pdp-nova .pdp-galeria { flex-direction: column-reverse; max-width: 460px; margin: 0 auto 18px; }
	/* em flex-column, a largura dos filhos vira 'auto' (= conteúdo) e a imagem natural
	   estourava o container. Força 100% em todos os blocos da galeria. */
	.pdp-nova .pdp-galeria-main,
	.pdp-nova .pdp-galeria-thumbs { flex: none; width: 100%; max-width: 100%; min-width: 0; }
	.pdp-nova .pdp-galeria-thumbs .pdpThumbs,
	.pdp-nova .pdpThumbs { width: 100%; height: auto; }
	.pdp-nova .pdpThumbs .swiper-slide { width: 70px !important; height: 70px !important; }
	.pdp-nova .pdpMain { width: 100%; max-width: 100%; }
	.pdp-nova .pdpMain,
	.pdp-nova .pdpMain .swiper-slide { height: 360px; }
}

/* ===== Coluna de dados: hierarquia título → preço → código → descrição ===== */

/* Título — sem o uppercase "gritado" do global; peso forte, leitura natural */
.pdp-nova .product-title {
	font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
	text-transform: none; color: #2c2f36; margin: 0 0 10px;
	overflow-wrap: break-word; word-break: break-word;   /* nomes longos quebram, não vazam */
}

/* Preço — protagonista da coluna, logo abaixo do título */
.pdp-nova .product-price {
	font-size: 30px; font-weight: 700; line-height: 1.1; color: #2c2f36;
	margin: 0 0 6px;
}
.pdp-nova .product-price .price-sales { color: #2c2f36; }
/* preço promocional na cor do tema, valor antigo riscado e discreto ao lado */
.pdp-nova .product-price .old-price,
.pdp-nova .product-price .price-standard {
	font-size: 17px; font-weight: 500; color: #9aa0ab; text-decoration: line-through;
	margin-left: 10px; vertical-align: middle;
}
/* "Total R$ …" (produtos por quantidade/qtd mínima) — apoio sob o unitário */
.pdp-nova .product-price .price-sales-unit,
.pdp-nova .product-price .valorTotal {
	display: block; font-size: 14px; font-weight: 600; color: #6b7180; margin-top: 4px;
}

/* Código do produto — discreto, colado ao preço (mesmo grupo), com divisor abaixo
   para separar do bloco de seleção. Ritmo de mercado: agrupar o que é relacionado. */
.pdp-nova .product-code {
	font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: .2px;
	text-transform: none; color: #9aa0ab; margin: 6px 0 0; padding: 0;
}
/* atalho "Ver descrição completa" — link discreto na cor do tema, com divisor abaixo
   (assume o border que era do código, mantendo a separação do bloco de seleção) */
.pdp-nova .pdp-link-descricao {
	display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0;
	font-size: 13px; font-weight: 600; color: var(--mc-cor, #3a3f49); text-decoration: none;
}
.pdp-nova .pdp-link-descricao:hover { text-decoration: underline; }
.pdp-nova .pdp-link-descricao .fa { font-size: 12px; }

/* Selo Frete Grátis — pill verde (mesmo padrão do carrinho/checkout) */
.pdp-nova .new-product {
	display: inline-flex; align-items: center; float: none;
	background: #e8f6ee; color: #1e8e4f; border-radius: 20px;
	font-weight: 600; font-size: 12px; padding: 4px 12px; line-height: 1; margin: 0 0 14px;
}

/* Descrição — leitura confortável */
.pdp-nova .details-description {
	color: #5a606b; font-size: 14px; line-height: 1.6; margin: 0 0 18px;
	border-top: 1px solid #f0f1f3; padding-top: 16px;
}
.pdp-nova .details-description p { margin: 0; }

/* ===== Botão principal "Adicionar ao carrinho" — CTA na cor do tema =====
   A ordem (status de disponibilidade → botão → selo de segurança) agora vem do HTML
   (refatorado no PHP), não de CSS. Aqui é só espaçamento. */
.pdp-nova .cart-actions { border-bottom: 0; padding-bottom: 0; margin: 24px 0 0; }
.pdp-nova .cart-actions .addto { width: 100%; }
/* status de disponibilidade (1º item) — espaço abaixo, antes do botão */
.pdp-nova .cart-actions .addto > .incaps:first-child { margin: 0 0 12px; }
/* selo "PEDIDOS SEGUROS" (cadeado, após o botão) */
.pdp-nova .cart-actions .addto .incaps-seguranca { margin: 14px 0 0; }

/* ===== Produto indisponível ("avise-me quando chegar") ===== */
.pdp-nova #div_indisponivel {
	margin: 0 0 14px; padding: 14px 16px; border-radius: 10px;
	background: #fafbfc; border: 1px solid #ececec;
}
/* texto explicativo — legível, com respiro (não colado no botão) */
.pdp-nova #div_indisponivel #texto_email_indisponivel,
.pdp-nova #div_indisponivel span {
	display: block; font-size: 13.5px; color: #5a606b; line-height: 1.5;
}
.pdp-nova #div_indisponivel #texto_email_indisponivel b { color: #3a3f49; }
/* campo de e-mail (visitante não logado) — input no padrão da página */
.pdp-nova #div_indisponivel .email_indisponivel {
	width: 100%; box-sizing: border-box; margin-top: 10px;
	height: 42px; padding: 8px 14px; font-size: 14px; color: #3a3f49;
	border: 1.5px solid #d6dae0; border-radius: 8px; background: #fff; box-shadow: none;
}
.pdp-nova #div_indisponivel .email_indisponivel:focus { border-color: var(--mc-cor, #b9c0c9); outline: 0; }
.pdp-nova #div_indisponivel .texto_vermelho { display: block; margin-top: 6px; font-size: 12.5px; color: #c0392b; }
/* o <br> do markup legado some (o respiro vem do input) */
.pdp-nova #div_indisponivel br { display: none; }
/* botão "Avise-me" alinhado ao CTA principal (full-width, na cor do tema) */
.pdp-nova .cart-actions .addto #div_indisponivel + .btn-cart,
.pdp-nova .cart-actions .addto #div_indisponivel ~ #btnComprar { margin-top: 4px; }

/* ===== Sugestões disponíveis (mostradas quando o produto principal está indisponível) =====
   Grid de cards globais (.card-produto), lado a lado. */
.pdp-nova .pdp-sugestoes-titulo {
	margin: 0 0 18px; padding: 0; font-size: 18px; font-weight: 700; color: #2c2f36;
}
.pdp-nova .pdp-sugestoes-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch;
}
@media (max-width: 991px) { .pdp-nova .pdp-sugestoes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .pdp-nova .pdp-sugestoes-grid { grid-template-columns: 1fr; } }

/* ===== "Compre junto" (order bump) — layout Amazon "Frequentemente comprados juntos" =====
   Faixa full-width: imagens grandes lado a lado com "+" entre elas (checkbox no canto),
   nome+preço abaixo; à direita o preço total + botão "Adicionar todos os N". */
/* clear:both desce a faixa abaixo das colunas flutuantes. A linha separadora (border-top,
   no lugar de um <hr> no markup) vai no col interno — não na .row — p/ ficar alinhada ao
   conteúdo (a .row tem gutter/margem negativa que faria a linha vazar nas laterais). */
/* respiro via padding-top no col (padding não sofre margin-collapse nem é "comido" pelo
   clear, ao contrário do margin-top na .row que não estava surtindo efeito). A linha
   separadora fica no topo desse padding. */
.pdp-nova .pdp-bump-row { clear: both; }
.pdp-nova .pdp-bump-row > .col-lg-12 {
	margin-top: 56px; padding-top: 40px; border-top: 1px solid #ececec;
}
.pdp-nova .pdp-bump {
	margin: 0; padding: 22px; border: 1px solid #e4e6ea; border-radius: 12px; background: #fff;
}
.pdp-nova .pdp-bump-titulo {
	margin: 0 0 18px; padding: 0; font-size: 18px; font-weight: 700; color: #2c2f36;
	text-transform: none; letter-spacing: 0;
}
/* conteúdo: fila de cards à esquerda + ação à direita */
.pdp-nova .pdp-bump-conteudo { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.pdp-nova .pdp-bump-fila { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; }

/* card de produto (principal e complementar) */
.pdp-nova .pdp-bump-card {
	flex: 0 1 180px; max-width: 180px; margin: 0; cursor: pointer; text-align: left;
}
.pdp-nova .pdp-bump-card-principal { cursor: default; }
.pdp-nova .pdp-bump-cb { position: absolute; opacity: 0; width: 0; height: 0; }

/* imagem do card + checkbox sobreposto no canto superior direito */
.pdp-nova .pdp-bump-img {
	position: relative; border: 1px solid #ececec; border-radius: 10px; background: #fafbfc;
	padding: 10px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.pdp-nova .pdp-bump-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-nova .pdp-bump-check {
	position: absolute; top: 8px; right: 8px;
	width: 22px; height: 22px; border-radius: 5px;
	border: 1.5px solid #cfd3da; background: #fff; color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 12px;
}
/* marcado (e o principal, sempre) → check na cor do tema */
.pdp-nova .pdp-bump-cb:checked ~ .pdp-bump-img .pdp-bump-check,
.pdp-nova .pdp-bump-card-principal .pdp-bump-check {
	background: var(--mc-cor, #2c2f36); border-color: var(--mc-cor, #2c2f36);
}
/* não marcado: esconde o "v" e apaga o card */
.pdp-nova .pdp-bump-cb:not(:checked) ~ .pdp-bump-img .pdp-bump-check .fa { display: none; }
.pdp-nova .pdp-bump-card:has(.pdp-bump-cb:not(:checked)) .pdp-bump-img { opacity: .55; }

/* nome + preço abaixo da imagem */
.pdp-nova .pdp-bump-card-info { padding: 8px 2px 0; }
.pdp-nova .pdp-bump-nome {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 12.5px; font-weight: 500; color: #3a3f49; line-height: 1.35;
}
.pdp-nova .pdp-bump-nome b { font-weight: 700; }
.pdp-nova .pdp-bump-valor { display: block; margin-top: 6px; font-size: 14px; font-weight: 800; color: #1f2937; }

/* separador "+" entre os cards */
.pdp-nova .pdp-bump-mais {
	flex: 0 0 auto; align-self: center; font-size: 22px; font-weight: 400; color: #9aa0ab;
	padding-bottom: 28px;   /* alinha o "+" com o centro das imagens (acima do nome/preço) */
}

/* ação à direita: preço total + botão (largura suficiente p/ o texto do botão não quebrar) */
.pdp-nova .pdp-bump-acao { flex: 0 0 auto; min-width: 280px; }
.pdp-nova .pdp-bump-total-wrap { margin-bottom: 12px; font-size: 15px; color: #3a3f49; }
.pdp-nova .pdp-bump-total-rotulo { font-weight: 500; }
.pdp-nova .pdp-bump-total { font-weight: 800; color: #1f2937; }
.pdp-nova .pdp-bump-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	background: var(--mc-cor, #2c2f36); border: 0; border-radius: 8px;
	color: #fff; font-size: 14px; font-weight: 700; padding: 13px 18px;
	cursor: pointer; transition: filter .15s ease; white-space: nowrap;
}
.pdp-nova .pdp-bump-btn:hover { filter: brightness(.92); color: #fff; }

/* mobile: cards menores; ação full-width abaixo da fila */
@media (max-width: 767px) {
	.pdp-nova .pdp-bump { padding: 16px; }
	.pdp-nova .pdp-bump-fila { flex-wrap: wrap; }
	.pdp-nova .pdp-bump-card { flex: 1 1 40%; max-width: none; }
	.pdp-nova .pdp-bump-mais { padding-bottom: 0; align-self: center; }
	.pdp-nova .pdp-bump-acao { flex: 1 1 100%; min-width: 0; width: 100%; }
}
.pdp-nova .cart-actions .btn-cart,
.pdp-nova .cart-actions button.btn-cart {
	float: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; max-width: 360px;
	background: var(--mc-cor, #2c2f36); border: 0; border-radius: 8px;
	color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
	text-transform: none; letter-spacing: 0; padding: 14px 22px; margin: 0;
	box-shadow: none; transition: filter .15s ease;
}
.pdp-nova .cart-actions .btn-cart:hover,
.pdp-nova .cart-actions button.btn-cart:hover { filter: brightness(.92); color: #fff; }

/* botão de orçamento (WhatsApp) mantém o verde próprio, só alinha o formato */
.pdp-nova .cart-actions .btn-info.btn-cart {
	background: #25d366; width: 100%; max-width: 360px;
}
.pdp-nova .cart-actions .btn-info.btn-cart:hover { background: #1ebe5d; }

/* linha de status (EM ESTOQUE / INDISPONÍVEL / grupo) — discreta, sem float caótico.
   Zera o padding-bottom:15px herdado do reset global de headings (gerava vão grande). */
.pdp-nova .cart-actions ~ .incaps,
.pdp-nova .incaps {
	float: none; display: flex; align-items: center; gap: 7px;
	font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
	text-transform: uppercase; margin: 14px 0 0; padding: 0;
}
.pdp-nova .incaps i { font-size: 15px; }

/* ===== Seleção de grade — CHIPS (modalidade 1 já nativa; 2/3 virão depois) ===== */

/* rótulo de cada grupo de grade ("Tamanho", "Cor"…) — substitui o .incaps flutuante.
   Ritmo vertical consistente entre grupos (~20px topo); chips com respiro padrão abaixo. */
.pdp-nova .pdp-grade-titulo {
	float: none; clear: both; display: block;
	font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
	text-transform: uppercase; color: #6b7180; margin: 20px 0 8px; padding: 0;
}
/* primeiro rótulo (logo após o divisor do código) não precisa do respiro topo cheio */
.pdp-nova .product-code + .pdp-grade-titulo,
.pdp-nova .product-code + div .pdp-grade-titulo:first-child { margin-top: 20px; }

/* container dos chips */
.pdp-nova .pdp-chips {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0;
}

/* chip: o <input> radio fica escondido; o <label> é o alvo clicável */
.pdp-nova .pdp-chip {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; padding: 9px 16px; margin: 0; cursor: pointer;
	border: 1.5px solid #d6dae0; border-radius: 8px; background: #fff;
	font-size: 14px; font-weight: 600; color: #3a3f49; line-height: 1;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	user-select: none;
}
.pdp-nova .pdp-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.pdp-nova .pdp-chip span { line-height: 1; }
.pdp-nova .pdp-chip:hover { border-color: var(--mc-cor, #b9c0c9); }

/* selecionado — borda/preenchimento na cor do tema */
.pdp-nova .pdp-chip:has(input:checked) {
	border-color: var(--mc-cor, #2c2f36);
	background: var(--mc-cor, #2c2f36); color: #fff;
}

/* indisponível — riscado e apagado, não clicável */
.pdp-nova .pdp-chip.pdp-chip-off,
.pdp-nova .pdp-chip input:disabled {
	cursor: not-allowed;
}
.pdp-nova .pdp-chip.pdp-chip-off {
	color: #b0b4bc; border-color: #ececec; background: #fafbfc; text-decoration: line-through;
}
.pdp-nova .pdp-chip.pdp-chip-off:hover { border-color: #ececec; }

/* ===== Seletor de Quantidade — select nativo limpo (sem chosen) ===== */
.pdp-nova .pdp-grade-titulo + div select,
.pdp-nova select.qtdProduto,
.pdp-nova select.qtdProdutoQuantidade,
.pdp-nova select[name="quantidade"] {
	height: 42px; min-width: 110px; max-width: 100%;
	border: 1.5px solid #d6dae0; border-radius: 8px; box-shadow: none;
	padding: 8px 14px; font-size: 14px; color: #3a3f49; background-color: #fff;
}
.pdp-nova select[name="quantidade"]:focus { border-color: var(--mc-cor, #b9c0c9); outline: 0; }
/* grupo Quantidade — mesmo ritmo vertical dos grupos de grade (anula o margin inline) */
.pdp-nova form .productFilter { margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; }
/* o "Quantidade" continua usando .incaps no markup — neutraliza o uppercase de status
   e dá a ele o visual de rótulo de campo. Escopado em .productFilter p/ NÃO atingir o
   status "EM ESTOQUE/INDISPONÍVEL" (que fica em .cart-actions, fora do .productFilter). */
.pdp-nova .productFilter .incaps {
	float: none; display: block; font-size: 12.5px; font-weight: 700; color: #6b7180;
	letter-spacing: .3px; margin: 0 0 8px;
}
/* esconde qualquer resíduo do chosen, caso a classe ainda exista no select */
.pdp-nova .chosen-container { display: none !important; }
.pdp-nova select.chosen-select { display: inline-block !important; }

/* ===== Abas full-width abaixo do produto (Descrição; futuro: Características, Avaliações) =====
   Padrão de e-commerce (ML/Amazon): faixa de abas ocupando toda a largura, separada da
   área de compra por respiro grande. Barra de guias com a aba ativa marcada por uma
   borda inferior na cor do tema; texto das guias neutro (cor de marca só na marcação). */
/* separação consistente (linha + respiro) entre as seções, igual ao "Compre junto".
   Borda no col interno p/ alinhar ao conteúdo (a .row tem gutter que faria a linha vazar). */
.pdp-nova .pdp-tabs-row { clear: both; }
.pdp-nova .pdp-tabs-row > .col-lg-12 { margin-top: 56px; padding-top: 40px; border-top: 1px solid #ececec; }
/* efeito de destaque ao chegar via "Ver descrição completa": flash sutil que desvanece */
.pdp-nova .pdp-tabs-row.pdp-destaque > .col-lg-12 { animation: pdpFlash 1.4s ease-out; }
@keyframes pdpFlash {
	0%   { background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 9999px rgba(0,0,0,.015); }
	100% { background: transparent; box-shadow: none; }
}
/* sem border-top aqui: a barra de guias (.nav-tabs) já tem a linha inferior que delimita
   a seção. Ter as duas criava uma "linha dupla" (parecia um <hr> sobrando). */
.pdp-nova .product-tab { clear: both; padding-top: 0; }

/* barra de guias */
.pdp-nova .product-tab .nav-tabs {
	border-bottom: 1px solid #ececec; padding: 0; margin: 0 0 4px;
	background: transparent !important; display: flex; gap: 28px;
}
.pdp-nova .product-tab .nav-tabs > li,
.pdp-nova .product-tab .nav-tabs > li.active {
	float: none; display: block; margin: 0; background: transparent !important;
}
/* guia (link) — texto neutro; a ativa ganha borda inferior na cor do tema */
.pdp-nova .product-tab .nav-tabs > li > a,
.pdp-nova .product-tab .nav-tabs > li > a:hover,
.pdp-nova .product-tab .nav-tabs > li > a:focus {
	background: none !important; background-color: transparent !important;
	border: 0 !important; border-radius: 0 !important;
	color: #9aa0ab !important; font-size: 16px; font-weight: 700; letter-spacing: .2px;
	text-transform: none; padding: 4px 0 12px !important; margin: 0;
	border-bottom: 2px solid transparent !important;   /* reserva o espaço do marcador */
	transition: color .15s ease;
}
.pdp-nova .product-tab .nav-tabs > li > a:hover { color: #6b7180 !important; }
.pdp-nova .product-tab .nav-tabs > li.active > a,
.pdp-nova .product-tab .nav-tabs > li.active > a:hover,
.pdp-nova .product-tab .nav-tabs > li.active > a:focus {
	background: none !important; background-color: transparent !important;
	border: 0 !important; border-radius: 0 !important;
	color: #2c2f36 !important; font-size: 16px; font-weight: 700;
	padding: 4px 0 12px !important; margin: 0;
	border-bottom: 2px solid var(--mc-cor, #2c2f36) !important;   /* marcador da aba ativa */
}

/* conteúdo das abas */
.pdp-nova .product-tab .tab-content { padding: 22px 0 0; color: #5a606b; font-size: 14px; line-height: 1.7; }
.pdp-nova .product-tab .tab-content h3 { font-size: 15px; font-weight: 700; color: #3a3f49; margin: 0 0 8px; padding: 0; }
.pdp-nova .product-tab .tab-content row,
.pdp-nova .product-tab .tab-content .container { display: block; width: 100%; padding: 0; }

/* ===== Bloco "Você pode gostar também" — título de seção + cards de produto ===== */
/* "Você pode gostar" — mesma separação (linha + respiro) das outras seções.
   margin lateral 0 anula o gutter da .row p/ a linha alinhar igual à da Descrição. */
.pdp-nova .recommended { clear: both; margin: 56px 0 0; padding-top: 40px; border-top: 1px solid #ececec; }
/* evita o "flash" de imagens grandes antes do owl montar: o slider começa oculto
   (.pdp-slider-loading) e o JS revela após o owl inicializar. Altura mínima reservada
   p/ não saltar o layout enquanto carrega. */
.pdp-nova #SimilarProductSlider.pdp-slider-loading { visibility: hidden; min-height: 360px; }
/* remove a linha/borda residual no rodapé do slider e do wrapper (vinha do global) */
.pdp-nova #SimilarProductSlider,
.pdp-nova .recommended #SimilarProductSlider,
.pdp-nova .recommended .owl-wrapper-outer,
.pdp-nova .recommended .owl-carousel { border: 0 !important; box-shadow: none !important; }
/* a section tinha background:#edeef0 + border-bottom (global) que apareciam como a
   FAIXA CINZA no rodapé do bloco. Neutraliza fundo e borda no escopo da página nova. */
.pdp-nova.section-product-info,
.pdp-nova .section-product-info,
.pdp-nova .product-details-container {
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	padding-bottom: 0 !important;
}
/* título: era <h1> caixa-alta gritado → cabeçalho de seção sóbrio, no padrão da página */
.pdp-nova .recommended > h1 {
	font-size: 20px; font-weight: 700; color: #2c2f36; letter-spacing: 0;
	text-transform: none; margin: 0 0 22px; padding: 0; line-height: 1.2; border: 0;
}

/* o card de produto agora é o componente global .card-produto (card-produto.css).
   Aqui só o espaçamento entre os itens do carrossel da recomendação. */
.pdp-nova .recommended .item { padding: 0 8px; height: 100%; }

/* ===== Controles do carrossel (owl) — setas só com ícone (sem "prev"/"next" em inglês) =====
   O owl é inicializado no script.js global (não editável aqui); tratamos só via CSS escopado:
   zeramos o texto e desenhamos a seta com ::before. */
.pdp-nova .recommended .owl-controls { margin-top: 18px; text-align: center; }
.pdp-nova .recommended .owl-controls .owl-buttons div {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; margin: 0 5px;
	font-size: 0;                                  /* esconde o texto "prev"/"next" */
	background: #fff; border: 1px solid #d6dae0; border-radius: 50%;
	color: #3a3f49; opacity: 1; box-shadow: none; cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pdp-nova .recommended .owl-controls .owl-buttons div:hover {
	border-color: var(--mc-cor, #b9c0c9); background: var(--mc-cor, #f7f8fa); color: #fff;
}
/* ícone de seta via Font Awesome (já carregado no projeto) */
.pdp-nova .recommended .owl-controls .owl-buttons .owl-prev::before {
	font-family: "FontAwesome"; content: "\f104"; font-size: 16px; line-height: 1;   /* ‹ */
}
.pdp-nova .recommended .owl-controls .owl-buttons .owl-next::before {
	font-family: "FontAwesome"; content: "\f105"; font-size: 16px; line-height: 1;   /* › */
}
/* pontos de paginação — discretos, ativo na cor do tema */
.pdp-nova .recommended .owl-controls .owl-page span {
	width: 8px; height: 8px; margin: 5px 4px; background: #cfd3da; opacity: 1;
}
.pdp-nova .recommended .owl-controls .owl-page.active span,
.pdp-nova .recommended .owl-controls.clickable .owl-page:hover span {
	background: var(--mc-cor, #6b7180);
}