/* =========================================================================
   PINTE TINTAS — Tela de Produto (single product)
   -------------------------------------------------------------------------
   Estiliza a página de produto nativa do WooCommerce (módulos Woo do Divi)
   no idioma visual da loja / Ofertas. Carregado só em is_product().
   Os cards de "Produtos relacionados" usam o pinte-loja.css.

   GALERIA: mantida no PADRÃO do WooCommerce (imagem em cima, miniaturas
   embaixo) — NÃO reflowamos (o flexslider mede o slide em px e brigar com
   isso cortava a imagem). Só damos acabamento: imagem grande arredondada +
   borda, e o selo OFERTA dentro da imagem.
   ========================================================================= */

:root {
	--ptp-blue:      #4080C0;
	--ptp-blue-dark: #356AA0;
	--ptp-ink:       #20242B;
	--ptp-border:    #8A94A3;
	--ptp-media-bg:  #F8FAFC;
}

/* -------------------------------------------------------------------------
   GALERIA — acabamento (padrão do Woo preservado).
   ------------------------------------------------------------------------- */
.single-product div.product .woocommerce-product-gallery {
	position: relative !important;
}
/* imagem principal: cantos arredondados + borda sutil (clipa os cantos) */
.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--ptp-border) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
}
.single-product div.product .woocommerce-product-gallery img.wp-post-image,
.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: 12px !important;
}
/* selo OFERTA: pastilha verde no canto superior esquerdo, DENTRO da imagem.
   v1.9.4 — igualado à vitrine de Ofertas: Inter 900, MAIÚSCULAS, maior e com
   mais contraste (antes ficava fraco e com a fonte do tema). */
.single-product div.product .woocommerce-product-gallery > .onsale,
.single-product div.product .woocommerce-product-gallery .onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	z-index: 6 !important;
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	background: #1B9E4B !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	padding: 5px 14px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 900 !important;
	font-size: .9rem !important;
	letter-spacing: .4px !important;
	text-transform: uppercase !important;
	line-height: 1.35 !important;
	white-space: nowrap !important;
	box-shadow: 0 2px 6px rgba(20, 36, 70, .18) !important;
}
/* miniaturas (embaixo, padrão): só arredonda os cantos pra combinar */
.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li img {
	border-radius: 6px !important;
	transition: opacity .15s ease !important;
}
.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.single-product div.product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   PREÇO (resumo) — azul da marca, forte. Não afeta os relacionados
   (ul.products, estilizados pelo pinte-loja.css).
   ------------------------------------------------------------------------- */
.single-product .et_pb_wc_price .price,
.single-product div.product .entry-summary .price,
.single-product div.product .summary .price {
	color: var(--ptp-blue) !important;
	font-weight: 800 !important;
	font-size: 1.6rem !important;
}
.single-product .et_pb_wc_price .price del,
.single-product div.product .entry-summary .price del { opacity: .55 !important; font-weight: 600 !important; }
.single-product .et_pb_wc_price .price ins,
.single-product div.product .entry-summary .price ins { text-decoration: none !important; }

/* -------------------------------------------------------------------------
   BOTÃO "Adicionar ao carrinho" — azul da marca.
   ------------------------------------------------------------------------- */
.single-product .single_add_to_cart_button,
.single-product .et_pb_wc_add_to_cart .single_add_to_cart_button {
	background: var(--ptp-blue) !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
	transition: background-color .15s ease !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product .et_pb_wc_add_to_cart .single_add_to_cart_button:hover {
	background: var(--ptp-blue-dark) !important;
}

/* -------------------------------------------------------------------------
   ABAS (Woo Tabs) — realce da aba ativa no azul da marca.
   ------------------------------------------------------------------------- */
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .et_pb_wc_tabs ul.tabs li.active a { color: var(--ptp-blue) !important; }
.single-product .woocommerce-tabs ul.tabs li.active,
.single-product .et_pb_wc_tabs ul.tabs li.active { border-bottom-color: var(--ptp-blue) !important; }

/* -------------------------------------------------------------------------
   "Produtos relacionados" — título. Os CARDS usam o pinte-loja.css.
   ------------------------------------------------------------------------- */
.single-product .related.products > h2,
.single-product .et_pb_wc_related_products h2 {
	color: var(--ptp-ink) !important;
	font-weight: 800 !important;
}

/* -------------------------------------------------------------------------
   "Produtos relacionados" — COLUNAS: agora quem manda é o DIVI (v1.9.4).
   -------------------------------------------------------------------------
   Decisão do Marcelo: definir as colunas dos relacionados direto no módulo
   Divi (Column Layout responsivo: Desktop 2 / Tablet 2 / Telefone 1), igual
   ao resto da tela de produto que ele montou no builder. Para o Divi assumir,
   o pinte-loja.css deixou de aplicar o GRID na tela de produto
   (body:not(.single-product)); aqui mantemos só o visual do card (herdado do
   pinte-loja.css). Por isso NÃO há mais regra de grid-template-columns para
   os relacionados neste arquivo — ela brigaria com o Divi.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   CARRINHO — QUANTIDADE (chamativa + stepper) e BOTÃO lado a lado (v1.9.3)
   -------------------------------------------------------------------------
   Container real (confirmado via DevTools; produto VARIÁVEL):
     .et_pb_wc_add_to_cart form.variations_form.cart .single_variation_wrap
       .woocommerce-variation-add-to-cart.variations_button
         .quantity > input.qty[name="quantity"]   (id dinâmico quantity_<hash>)
         button.single_add_to_cart_button          (disabled até escolher a variação)

   O stepper −/+ é INJETADO pelo pinte-produto.js (só em is_product). Este CSS
   cuida só do visual e do layout:
     • a .quantity só recebe o visual de grupo quando o JS a marca com
       .pt-qty-ready → se o JS falhar, cai graciosamente no input nativo;
     • no mobile (≤700) a quantidade e o botão ficam LADO A LADO (isso vale
       mesmo sem o JS: a regra mira a .quantity, não a .pt-qty-ready).
   O desktop já era lado a lado (float nativo do Woo) — não é tocado além do
   visual do grupo.
   ------------------------------------------------------------------------- */

/* Grupo da quantidade: [ − ][ nº ][ + ] numa linha, borda azul da marca. */
.single-product div.product .quantity.pt-qty-ready {
	display: inline-flex !important;
	align-items: stretch !important;
	height: 52px !important;
	border: 2px solid var(--ptp-blue) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #FFFFFF !important;
	box-sizing: border-box !important;
}

/* Botões − / + */
.single-product div.product .quantity.pt-qty-ready .pt-qty-btn {
	flex: 0 0 auto !important;
	width: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	background: #F2F4F8 !important;
	color: var(--ptp-blue) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color .15s ease, color .15s ease !important;
}
.single-product div.product .quantity.pt-qty-ready .pt-qty-btn:hover {
	background: var(--ptp-blue) !important;
	color: #FFFFFF !important;
}
.single-product div.product .quantity.pt-qty-ready .pt-qty-minus { border-right: 1px solid #E6E9EF !important; }
.single-product div.product .quantity.pt-qty-ready .pt-qty-plus  { border-left:  1px solid #E6E9EF !important; }

/* O número — grande, centralizado, negrito; sem as setinhas nativas.
   v2.0.1 — `max-width: none`: o WooCommerce/Divi capa o input.qty em ~86px
   (max-width do tema). Esse teto impedia o `flex-grow:1` de esticar o campo
   no mobile — o `+` parava no meio da caixa e sobrava vazio à direita. Como
   `width:auto` NÃO vence `max-width`, destravamos o teto AQUI, escopado só ao
   nosso stepper (.quantity.pt-qty-ready). No desktop o input tem width:56px
   fixo e a caixa é inline-flex compacta (sem espaço livre), então continua em
   56px, sem esticar — o max-width:none só remove o teto, não força largura. */
.single-product div.product .quantity.pt-qty-ready input.qty {
	flex: 1 1 auto !important;
	width: 56px !important;
	min-width: 48px !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	color: var(--ptp-ink) !important;
	-moz-appearance: textfield !important;
	box-sizing: border-box !important;
}
.single-product div.product .quantity.pt-qty-ready input.qty::-webkit-outer-spin-button,
.single-product div.product .quantity.pt-qty-ready input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
/* Foco: realce azul suave na caixa toda. */
.single-product div.product .quantity.pt-qty-ready:focus-within {
	box-shadow: 0 0 0 3px rgba(64, 128, 192, .25) !important;
}
/* A label de leitor de tela não ocupa espaço no flex. */
.single-product div.product .quantity.pt-qty-ready > label.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* -------------------------------------------------------------------------
   QUANTIDADE + BOTÃO — layout (v1.9.5)
   -------------------------------------------------------------------------
   Decisão do Marcelo: DESKTOP os dois na MESMA LINHA (quantidade à esquerda,
   botão preenchendo o resto); MOBILE empilhados COM espaço entre eles.

   Um container flex com `gap` resolve os dois casos: no desktop é linha; no
   mobile vira coluna — e o `gap` garante o respiro em AMBOS (sem depender de
   margens, que estavam sumindo). `flex-wrap` evita qualquer sobreposição se
   faltar largura (o botão cai para baixo limpo, nunca por cima). O botão usa
   min-height (não height fixa) para crescer se o texto precisar de 2 linhas,
   em vez de cortar.
   ------------------------------------------------------------------------- */
.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 12px !important;
}
.single-product div.product .woocommerce-variation-add-to-cart .quantity.pt-qty-ready {
	flex: 0 0 auto !important;
	float: none !important;
	margin: 0 !important;
}
.single-product div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 auto !important;
	margin: 0 !important;
	min-height: 52px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* MOBILE (≤700) — empilha: quantidade na linha inteira, botão na linha
   inteira embaixo. O `gap: 12px` do container cuida do espaço entre eles.
   v1.9.6 — stepper na LINHA INTEIRA (Opção 1): o campo do número ESTICA para
   preencher o meio (flex:1 + width:auto), então o "−" encosta na ponta
   esquerda e o "+" na ponta direita, com o número centralizado entre eles.
   (No desktop o grupo segue compacto — ali ele é flex:0 0 auto, sem esticar.)
   O display:flex aqui garante que o 100% de largura seja respeitado (o base é
   inline-flex, usado no desktop). */
@media (max-width: 700px) {
	.single-product div.product .woocommerce-variation-add-to-cart {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.single-product div.product .woocommerce-variation-add-to-cart .quantity.pt-qty-ready {
		display: flex !important;
		width: 100% !important;
	}
	.single-product div.product .woocommerce-variation-add-to-cart .quantity.pt-qty-ready input.qty {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
	}
	.single-product div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		width: 100% !important;
	}
}