/**
 * Pagina do produto — visual "Atelie" (direcao C revisada, 20/08/2026).
 *
 * Continuacao dos cards Vitrine da loja aplicada a pagina do produto.
 * Aprovada no artefato "Produto Atelie": topo enxuto (breadcrumb 1 linha,
 * sufixo do titulo vira eyebrow via JS), swatches em pill de contorno azul
 * com preco por tamanho (JS), preco no estilo da loja em escala de pagina
 * (markup do snippet 6607 v2.4.0), CTA azul em pill com seta, stepper de
 * quantidade, frete em capsula, pagamento sem caixa tracejada e abas em
 * caixa normal.
 *
 * Sobrescreve o CSS do snippet WPCode 13100 — alguns !important espelham os
 * de la (mesma guerra dos cards, ver pcc-shop-cards.css). Tudo escopado em
 * .single-product para nao vazar. JS de apoio: pcc-product-page.js.
 */

/* ---------------------------------------------------------------------------
 * Topo: hero sem o gradiente, breadcrumb discreto em 1 linha, titulo 20px.
 * O ultimo item do breadcrumb (o proprio produto, em caps) sai — o titulo
 * logo abaixo ja diz onde o cliente esta.
 * ------------------------------------------------------------------------ */
.single-product .hero-section {
	background: #fff !important;
	background-image: none !important;
}

.single-product .ct-breadcrumbs {
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0;
	color: #8a96a3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.single-product .ct-breadcrumbs a {
	color: #8a96a3;
}

.single-product .ct-breadcrumbs > span:last-of-type {
	display: none;
}

.single-product .ct-breadcrumbs > span:nth-last-of-type(2) .ct-separator {
	display: none;
}

.single-product .entry-header h1 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Eyebrow injetado pelo JS quando o titulo termina em "Kit Pintura com
   Cristais" — o sufixo sai do h1 e vira etiqueta em cima */
.pcc-pp-eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9a7bbf;
	margin: 2px 0 4px;
}

/* ---------------------------------------------------------------------------
 * Galeria: badge de promocao em pill lilas (era circulo azul) e miniaturas
 * com raio + borda ativa azul
 * ------------------------------------------------------------------------ */
.single-product .ct-product-gallery-container .onsale {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f1e5fc;
	border: 1px solid #dcbdf7;
	color: #212529;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}

.single-product .flexy-pills .ct-media-container {
	border-radius: 10px;
	overflow: hidden;
}

.single-product .flexy-pills li.active .ct-media-container {
	box-shadow: inset 0 0 0 2px #00aaff;
}

/* ---------------------------------------------------------------------------
 * Variacoes: rotulo pequeno cinza com o valor em destaque; swatch quadrado
 * azul-chapado vira pill de contorno; selecionado = azul-claro + borda azul
 * (estilo da direcao B/C do artefato). Com preco por tamanho (JS), a pill
 * vira cartao de canto 12px.
 * ------------------------------------------------------------------------ */
.single-product table.variations th.label,
.single-product table.variations th.label label {
	font-size: 12.5px;
	font-weight: 500;
	color: #576471;
	text-transform: none;
}

.single-product table.variations th.label label span {
	font-weight: 600;
	color: #212529;
}

.single-product .variations .ct-swatch-container {
	width: auto;
	height: auto !important; /* o tema fixa via var e o preco vazava na borda */
	min-width: 0;
	min-height: 0;
	padding: 8px 16px;
	background: #fff;
	border: 1.5px solid #e6eaec;
	border-radius: 999px;
	box-shadow: none;
}

/* Cadeia com data-attr para ganhar do CSS do tema (que fixa a altura do
   swatch via --swatch-size e clipava o preco na borda do botao) */
.single-product .variations .ct-variation-swatches[data-swatches-type] .ct-swatch-container .ct-swatch {
	width: auto;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #576471;
	text-align: left;
}

/* o valor ja esta visivel dentro da pill — tooltip repetindo vira ruido */
.single-product .variations .ct-swatch-container .ct-tooltip {
	display: none;
}

.single-product .variations .ct-variation-swatches[data-swatches-type] .ct-swatch-container .ct-swatch-content {
	width: auto;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	justify-content: flex-start;
}

.single-product .variations .ct-swatch-container[aria-pressed="true"] {
	background: #e6f7ff;
	border-color: #00aaff;
}

.single-product .variations .ct-swatch-container[aria-pressed="true"] .ct-swatch {
	color: #0077b3;
}

/* Pill com preco por variacao (span injetado pelo JS) vira cartao */
.single-product .variations .ct-swatch-container:has(.pcc-sw-price) {
	border-radius: 12px;
	padding: 8px 14px;
}

.pcc-sw-price {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: #8a96a3;
	margin-top: 1px;
	font-variant-numeric: tabular-nums;
}

.single-product .variations .ct-swatch-container[aria-pressed="true"] .pcc-sw-price {
	color: #0077b3;
	opacity: 0.75;
}

.single-product .reset_variations {
	font-size: 11.5px;
	color: #8a96a3;
}

/* ---------------------------------------------------------------------------
 * Preco (markup novo do snippet 6607 v2.4.0): o estilo da loja em escala de
 * pagina — riscado, preco em tinta + tag verde "no Pix", chip lilas "3x".
 * A caixa branca/hover/badge "Economize" do 13100 morre aqui.
 * ------------------------------------------------------------------------ */
.single-product .bwp-main-product-price-container {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 14px 0 0;
}

.single-product .bwp-main-product-price-container .bwp-variable-text {
	font-size: 12.5px;
	line-height: 1.3;
	font-weight: 500;
	color: #8a96a3;
	margin: 0 0 2px;
	text-transform: none;
	text-align: left; /* o 13100 centraliza */
}

.single-product .bwp-main-product-price-container .bwp-price-strike s {
	text-decoration: line-through;
}

.single-product .bwp-main-product-price-container .bwp-pix-box {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* o 13100 centraliza */
	gap: 8px;
	padding: 0 !important;
	margin: 0;
	background: none !important;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	transition: none;
}

.single-product .bwp-main-product-price-container .bwp-pix-box:hover {
	transform: none;
	box-shadow: none !important;
}

.single-product .bwp-main-product-price-container .bwp-pix-price {
	font-size: 24px !important;
	line-height: 1.2;
	font-weight: 700;
	color: #212529 !important;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.single-product .bwp-main-product-price-container .bwp-pix-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 999px;
	font-size: 12px !important;
	line-height: 1.3;
	font-weight: 600;
	color: #15803d !important;
	white-space: nowrap;
}

.single-product .bwp-main-product-price-container .bwp-pix-tag .bwp-pix-icon {
	width: 13px;
	height: 13px;
	fill: #15803d;
	margin: 0;
}

.single-product .bwp-main-product-price-container .bwp-installment-container {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 !important;
	margin: 7px 0 0;
	text-align: left;
}

.single-product .bwp-main-product-price-container .bwp-installment-text {
	font-size: 12px !important;
	line-height: 1.45;
	font-weight: 500;
	color: #576471;
}

.single-product .bwp-main-product-price-container .bwp-installment-count {
	display: inline-block;
	padding: 1px 8px;
	background: #f1e5fc;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: #212529;
}

.single-product .bwp-main-product-price-container .bwp-installment-value {
	font-weight: 600;
	color: #212529;
}

/* O preco padrao do tema (produto simples) duplicaria o riscado do bloco */
.single-product .entry-summary > .price,
.single-product .entry-summary-items > .price {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Estoque: a pill verde gigante vira microcopy com ponto
 * ------------------------------------------------------------------------ */
/* !important: o tema/13100 estiliza .stock.in-stock com caps + verde-claro */
.single-product .entry-summary p.stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none !important;
	border: 0;
	padding: 0;
	margin: 9px 0 0;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #15803d !important;
}

.single-product .entry-summary p.stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
}

.single-product .entry-summary p.stock.out-of-stock {
	color: #b91c1c;
}

.single-product .entry-summary p.stock.out-of-stock::before {
	background: #ef4444;
}

/* ---------------------------------------------------------------------------
 * Quantidade + CTA: stepper em pill (JS monta − 1 +) e botao azul em pill
 * com seta, sem o brilho do tema (mesmo padrao do CTA dos cards)
 * ------------------------------------------------------------------------ */
.single-product .ct-cart-actions {
	gap: 10px;
	margin-top: 14px;
}

.single-product .ct-cart-actions .quantity.pcc-qty {
	display: inline-flex;
	align-items: center;
	width: auto !important; /* o tema fixa ~70px e espremia os botoes p/ 20px */
	max-width: none;
	border: 1.5px solid #e6eaec;
	border-radius: 999px;
	overflow: hidden;
}

.pcc-qty-btn {
	flex: 0 0 34px; /* respiro do mockup: 34px por botao, valor com 28px */
	width: 34px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #576471;
	cursor: pointer;
	user-select: none;
}

.single-product .pcc-qty input.qty {
	width: 28px;
	min-height: 0;
	padding: 0;
	border: 0 !important;
	background: transparent;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #212529;
	appearance: textfield;
	-moz-appearance: textfield;
}

.single-product .pcc-qty input.qty::-webkit-outer-spin-button,
.single-product .pcc-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .entry-summary .single_add_to_cart_button {
	min-height: 48px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
}

.single-product .entry-summary .single_add_to_cart_button::before {
	display: none;
}

/* Seta no ::after (o ::before e do tema; o ::after vira spinner no .loading) */
.single-product .entry-summary .single_add_to_cart_button:not(.loading)::after {
	content: "\203A"; /* › */
	position: static;
	width: auto;
	height: auto;
	margin-left: 6px;
	border: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	opacity: 1;
	filter: none;
	transform: none;
	animation: none;
}

/* ---------------------------------------------------------------------------
 * Frete: o simulador vira uma capsula cinza-suave com o botao dentro
 * (o "Ok" vira "Calcular" via JS)
 * ------------------------------------------------------------------------ */
/* Folga uniforme: 6px entre o botao e a borda da capsula em cima, embaixo e
   a direita (o botao de ~39px e o item mais alto e define a altura) */
.single-product .shipping-simulator-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f2f5f8;
	border: 0;
	border-radius: 999px;
	padding: 6px 6px 6px 14px;
}

/* o plugin estiliza o LABEL como caixa branca com sombra — vira transparente
   dentro da capsula */
.single-product .shipping-simulator-wrapper label {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	margin: 0;
	/* !important: o plugin estiliza via #wc-shipping-simulator (ID ganha de
	   qualquer cadeia de classes) — padding 16/18 e altura fixa inflavam a
	   capsula */
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	background: none !important;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	font-size: 0; /* esconde o texto "Simulador de Frete:", o caminhao fica */
}

.single-product .shipping-simulator-wrapper label svg.icon {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 auto;
	opacity: 0.65;
}

/* o rotulo "Simulador de Frete:"/"FRETE:" vive num span proprio do plugin */
.single-product .shipping-simulator-wrapper label .text {
	display: none;
}

.single-product .shipping-simulator-wrapper input.cep-number {
	flex: 1;
	min-width: 0;
	min-height: 0 !important;
	height: 36px !important; /* o plugin fixa ~50px e estourava a capsula */
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 13px;
	font-weight: 500;
	color: #212529;
}

.single-product .shipping-simulator-wrapper input.cep-number::placeholder {
	color: #8a96a3;
}

/* !important contra o CSS do plugin/tema (uppercase 16px, fundo cinza,
   altura fixa ~50px) */
.single-product .shipping-simulator-wrapper button.calculate {
	min-height: 0 !important;
	height: auto !important;
	padding: 8px 16px !important;
	background: #fff !important;
	border: 1px solid #e6eaec !important;
	border-radius: 999px !important; /* o plugin fixa 6px — pill como a capsula */
	font-size: 12.5px !important;
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: 0;
	color: #212529 !important;
}

.single-product .shipping-simulator-wrapper button.calculate::before {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pagamento seguro: a caixa tracejada vira um fio + frase (texto trocado
 * pelo JS) com os icones esmaecidos
 * ------------------------------------------------------------------------ */
/* o fio acima ja vem do .ct-product-divider do tema — fieldset fica sem
   borda nenhuma (a tracejada morre) e sem o flex centrado do tema */
.single-product fieldset.ct-payment-methods {
	display: block;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-top: 0;
	text-align: left;
}

.single-product fieldset.ct-payment-methods .ct-icon-container {
	display: inline-flex;
	margin: 0 10px 0 0;
	vertical-align: middle;
}

.single-product fieldset.ct-payment-methods legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: #576471;
}

.single-product fieldset.ct-payment-methods .ct-icon-container svg {
	width: 32px;
	height: 20px;
	filter: grayscale(1);
	opacity: 0.55;
}

/* Tres garantias (PS3) montadas pelo JS no lugar da legenda + bandeiras */
.pcc-trust-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 500;
	color: #576471;
}

.pcc-trust-row + .pcc-trust-row {
	margin-top: 6px;
}

.pcc-trust-row svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Abas: caixa normal em vez de CAIXA ALTA; no mobile viram lista com fios
 * ------------------------------------------------------------------------ */
.single-product .woocommerce-tabs ul.wc-tabs a {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 600;
	color: #212529;
}

.single-product .woocommerce-tabs ul.wc-tabs li.active a {
	color: #00aaff !important; /* o tema pinta a ativa com o lilas da paleta */
}

@media (max-width: 689px) {
	.single-product .woocommerce-tabs ul.wc-tabs li {
		margin: 0;
		text-align: left;
		border-bottom: 1px solid #e6eaec !important;
	}

	/* o indicador de aba ativa do tema (li.active::before, faixa azul de 3px)
	   nao faz sentido na lista empilhada — segue vivo no desktop */
	.single-product .woocommerce-tabs ul.wc-tabs li::before {
		display: none;
	}

	.single-product .woocommerce-tabs ul.wc-tabs li:first-child {
		border-top: 1px solid #e6eaec;
	}

	.single-product .woocommerce-tabs ul.wc-tabs a {
		width: 100%;
		justify-content: flex-start;
		text-align: left !important; /* o tema centraliza com a mesma forca */
		padding: 13px 2px;
		border: 0;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
 * Desktop: sobe a escala do topo e do preco
 * ------------------------------------------------------------------------ */
@media (min-width: 690px) {
	.single-product .entry-header h1 {
		font-size: 24px;
	}

	.single-product .bwp-main-product-price-container .bwp-pix-price {
		font-size: 26px !important;
	}
}