/**
 * Winkbuy — variante "amazon" da página de produto.
 * Carregado por cima de product.css só quando esta variante está ativa
 * (ver enqueue em inc/modules/product/product.php). Não afeta a variante default.
 */

/*
 * .wb-lower (Características/Descrição/Opiniões) tem max-width: 920px no
 * product.css — bem mais estreito que a galeria+buybox acima (que ocupam
 * a largura toda do .wb-product, até 1280px), então mesmo centralizado
 * ficava desproporcional: uma faixa estreita boiando no meio de uma linha
 * bem mais larga. Remove o teto de 920px pra acompanhar a mesma largura
 * do restante da página.
 */
@media (min-width: 900px) {
	.wb-lower {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/*
 * Desktop: inverte qual coluna gruda ao rolar. No default é a buybox
 * (.wb-col-buy, sticky no product.css) — faz sentido lá porque a galeria é
 * a coluna mais alta. Aqui a buybox cresceu bastante (preço, parcelamento,
 * frete, selos, vendedor/entrega) e passou a ser a mais alta das duas,
 * então quem tem "espaço sobrando" pra grudar agora é a galeria.
 */
@media (min-width: 900px) {
	.wb-col-buy {
		position: static !important;
		align-self: auto !important;
	}
	/*
	 * --wb-header-h é medida em tempo real pelo amazon-header-offset.js (a
	 * altura de verdade do header fixo do Elementor) — a galeria gruda
	 * sempre logo abaixo dele, mesmo que a altura do header mude (menu
	 * mobile, banner, efeito "encolher ao rolar" etc.). 103px é só o
	 * fallback caso o JS não rode por algum motivo.
	 */
	.wb-col-gallery {
		position: sticky;
		top: calc(var(--wb-header-h, 103px) + 8px);
		align-self: start;
		/*
		 * Sem fundo opaco + z-index explícito, o repaint do scroll pode
		 * misturar essa camada com o conteúdo da buybox ao lado bem no
		 * instante em que a galeria "gruda" perto do header fixo do tema —
		 * aparece como um "fantasma"/sobreposição do título por trás do
		 * menu. z-index baixo de propósito: fica acima do conteúdo normal
		 * da página, mas não deve competir com o header (esse já tem seu
		 * próprio z-index bem mais alto no tema).
		 */
		z-index: 1;
		background: var(--wb-surface);
	}
}

/* ---------- Galeria: miniaturas mais discretas ---------- */
.wb-thumb {
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 0;
	overflow: hidden; /* sem isso a imagem interna fica com cantos retos, "vazando" do arredondamento do botão */
}
.wb-thumb img { border-radius: inherit; }
.wb-thumb.is-active {
	border: 2px solid #e77600;
	box-shadow: none;
}

/*
 * Opções de variação (tamanho/cor/etc.): as sem imagem (.wb-swatch--text)
 * saíam com fundo branco "vazio" e menos definição visual que as opções
 * com cor/imagem. Padroniza as três num visual único, estilo Amazon
 * (fundo cinza claro, borda neutra, selecionado com contorno escuro).
 */
.wb-swatch {
	border-radius: 4px !important;
	border-color: #d5d9d9 !important;
}
.wb-swatch--text {
	background: #f0f2f2 !important;
	border: 1px solid #d5d9d9 !important;
	color: #0f1111 !important;
	font-weight: 500 !important;
}
.wb-swatch--color,
.wb-swatch--image {
	border: 1px solid #d5d9d9 !important;
}
.wb-swatch:hover {
	border-color: #0f1111 !important;
}
.wb-swatch[aria-checked="true"] {
	border: 2px solid #0f1111 !important;
	box-shadow: none !important;
}
.wb-swatch--text[aria-checked="true"] {
	background: #fff !important;
}
.wb-swatch.is-unavailable {
	background: #f7f7f7 !important;
	color: #999 !important;
}

/* ---------- Zoom: amplia a imagem no próprio lugar, seguindo o cursor ---------- */
@media (min-width: 900px) {
	.wb-stage { cursor: zoom-in; }
	.wb-slide { cursor: zoom-in; }
}

.wb-amz-zoom-surface {
	position: absolute;
	background-repeat: no-repeat;
	background-color: var(--wb-surface);
	pointer-events: none;
	z-index: 2;
}

/* ---------- Setas de navegação da imagem: minimalista, sem fundo/borda ---------- */
.wb-stage .wb-stage-nav {
	background: none;
	color: #4a4a4a;
	border: 0;
	box-shadow: none;
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .7));
}
.wb-stage .wb-stage-nav:hover { color: #111; filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .8)); }
.wb-stage .wb-stage-nav[disabled] { color: #ccc; filter: none; }

/* Sem hover em touch, as setas não ajudam — navegação ali é por swipe/dots. */
@media (max-width: 899px) {
	.wb-stage-nav { display: none !important; }
}

/* ---------- Ampliar + compartilhar: agrupados na base direita da imagem ---------- */
.wb-amz-stage-tools {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	gap: 8px;
	z-index: 3;
}
/* !important: tema tem reset global de svg (ex: svg{width:1em}) com força
   maior que a nossa, deixando os ícones minúsculos sem isso. */
.wb-amz-stage-tools .wb-stage-expand {
	position: static;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wb-border);
	color: #111;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.wb-amz-stage-tools .wb-stage-expand svg {
	width: 18px !important;
	height: 18px !important;
	display: block;
	flex: 0 0 auto;
}
/* O display:flex !important acima vence o [hidden] nativo do navegador —
   sem isso, esconder o botão de zoom via JS.hidden (slide de vídeo ativo,
   ver gallery.js) não tinha efeito nenhum. */
.wb-amz-stage-tools .wb-stage-expand[hidden] {
	display: none !important;
}
.wb-amz-stage-tools .wb-stage-expand:hover {
	background: #f4f4f4;
	border-color: #111;
	color: #111;
}

/* ---------- Buybox: empilhada, estilo caixa lateral de compra ---------- */
.wb-col-buy {
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius-sm);
	padding: 16px;
	background: var(--wb-surface);
}

/*
 * Título e preço: uma única escala fluida (clamp), sem degraus por
 * media query — cresce suavemente do mobile até um teto, em vez de pular
 * de tamanho entre breakpoints. Título discreto, preço em destaque
 * moderado (no default o preço é desproporcionalmente maior: 31-38px vs
 * 22-30px, o que não cabia bem na buybox mais estreita/com borda daqui).
 * !important: o tema define tamanho de heading (h1) e força a própria
 * especificidade nisso (mesmo problema já visto nos botões) — sem isso o
 * título volta a ficar enorme, principalmente no mobile.
 */
.wb-title {
	max-width: none !important;
	font-size: clamp(20px, 4vw, 26px) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	margin-bottom: 8px !important;
}
.wb-price-now {
	font-size: clamp(26px, 5vw, 32px) !important;
	font-weight: 700 !important;
}


/* Empilha add-to-cart + comprar agora, cada um ocupando a largura toda (padrão Amazon). */
.wb-form--native form.cart,
.wb-form--native .woocommerce-variation-add-to-cart {
	flex-direction: column;
	align-items: stretch;
}
.wb-form--native .quantity { align-self: flex-start; }

/* Preço e disponibilidade da variação selecionada (classes nativas do Woo). */
.wb-form--native .woocommerce-variation-price {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #007600 !important;
}
.wb-form--native .woocommerce-variation-price .amount { color: #007600 !important; }
.wb-form--native .woocommerce-variation-price del { color: #565959 !important; opacity: .8; }
.wb-form--native .woocommerce-variation-price del .amount { color: #565959 !important; }
.wb-form--native .woocommerce-variation-price ins { color: #007600 !important; text-decoration: none; }
.wb-form--native .stock.in-stock { color: #007600 !important; font-weight: 600 !important; }
.wb-form--native .stock.out-of-stock { color: #b12704 !important; font-weight: 600 !important; }
.wb-form--native .stock.available-on-backorder { color: #b06000 !important; font-weight: 600 !important; }

/* "em Nx de R$Y sem juros": mesmo verde Amazon usado no preço/estoque. */
.wb-installments {
	color: #007600 !important;
}

/*
 * Preço/estoque da variação selecionada (.woocommerce-variation) fica entre
 * a quantidade e os botões nesse fluxo em coluna — não deve alterar a
 * largura/altura dos botões, então eles ficam com tamanho fixo e não
 * "encolhem" (flex-shrink: 0) independente do que aparece ao lado.
 */
.wb-form--native .single_add_to_cart_button,
.wb-form--native .wb-native-buynow {
	width: 100%;
	flex: 0 0 auto;
	flex-shrink: 0;
	border-radius: 999px !important; /* mesmo motivo da cor: especificidade do tema ganhava e deixava o botão quadrado */
	font-weight: 600;
	margin: 0;
}

/*
 * "Adicionar ao carrinho" primeiro, "Comprar agora" por baixo — ordem visual
 * da Amazon. !important necessário: o CSS do tema define cor de botão com
 * especificidade maior que a nossa (ex: .woocommerce button.button), então
 * sem isso a cor do tema vence e o botão não fica no tom amarelo/laranja.
 */
.wb-form--native .single_add_to_cart_button {
	order: 0;
	background: #ffd814 !important;
	border-color: #fcd200 !important;
	color: #111 !important;
}
.wb-form--native .single_add_to_cart_button:hover { background: #f7ca00 !important; }

.wb-form--native .wb-native-buynow {
	order: 1;
	background: #ffa41c !important;
	border-color: #ff8f00 !important;
	color: #111 !important;
}
.wb-form--native .wb-native-buynow:hover { background: #fa9018 !important; }

/* Mantém somente o spinner visível sobre os CTAs amarelo/laranja. Estas
 * regras precisam vir na variante, pois as cores acima também usam !important. */
.wb-form--native .single_add_to_cart_button.is-loading,
.wb-form--native .wb-native-buynow.is-loading {
	color: transparent !important;
	text-shadow: none !important;
	-webkit-text-fill-color: transparent !important;
	/* Sem isso, o color herda a transition do tema (mais longa que os
	 * ~50ms que temos antes do submit ser retomado) e o texto fica só
	 * parcialmente esmaecido em vez de sumir no frame seguinte. */
	transition: none !important;
}
.wb-form--native .single_add_to_cart_button.is-loading::after,
.wb-form--native .wb-native-buynow.is-loading::after {
	border-color: rgba(17, 17, 17, .28);
	border-top-color: #111;
}

/* ---------- Avaliações em destaque, logo abaixo do título ---------- */
.wb-rating-line { background: transparent; padding: 0; }
.wb-stars, .wb-stars::before { color: #ffa41c; }
.wb-rating-value { font-weight: 700; }
.wb-rating-count { color: var(--wb-accent); }
.wb-rating-line:hover .wb-rating-count { text-decoration: underline; }
.wb-rating-line--empty .wb-rating-count { color: var(--wb-text-muted, #565959); }

/* ---------- Frete: botão "Calcular" do tamanho do campo de CEP ---------- */
.wb-shipping-form {
	align-items: stretch;
}
.wb-shipping-form .wb-btn--ghost {
	flex: 0 0 auto;
	width: auto;
	height: 40px;
	min-height: 40px;
	padding: 0 16px;
	font-size: 13px;
	white-space: nowrap;
}

/*
 * Títulos de seção (Características/Descrição/Opiniões): no default eles
 * saem quase do mesmo tamanho do título do produto (20-21px vs título
 * ~20-26px) — reduz e padroniza os três num tamanho menor e consistente
 * entre si, mesma família visual do título (peso 600, letras um pouco
 * mais próximas) mas claramente secundário na hierarquia.
 */
.wb-section-title {
	font-size: clamp(16px, 1.6vw, 18px) !important;
	font-weight: 600 !important;
	letter-spacing: -.005em !important;
}

/*
 * "X avaliações para <produto>" e "Adicionar uma avaliação": títulos que o
 * próprio WooCommerce imprime dentro de comments_template(), com classes
 * diferentes das nossas (woocommerce-Reviews-title / #reply-title) — por
 * isso não pegavam o ajuste do .wb-section-title acima.
 */
.wb-reviews-list .woocommerce-Reviews-title,
.wb-reviews-list #reply-title {
	font-size: clamp(16px, 1.6vw, 18px) !important;
	font-weight: 600 !important;
	letter-spacing: -.005em !important;
	margin: 0 0 16px !important;
}

/*
 * "Ver descrição completa" / "Ver todas as características": cor de texto
 * mais clara e amigável (tom de link da Amazon) + um fundo suave, pra
 * parecer um botão de verdade em vez de um texto solto sem nenhum contorno.
 */
.wb-more {
	color: #007185 !important;
	font-weight: 500 !important;
	background: #f0f8f9 !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
}
.wb-more:hover {
	color: #c7511f !important;
	background: #fdf3ed !important;
	text-decoration: none !important;
}

/* "Compartilhar" ao lado do código do produto: mesmo tratamento de botão. */
.wb-share {
	color: #007185 !important;
	font-weight: 500 !important;
	background: #f0f8f9 !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	margin: 0 !important;
}
.wb-share:hover {
	color: #c7511f !important;
	background: #fdf3ed !important;
	text-decoration: none !important;
}

/*
 * Lightbox (visualização ampliada): botões com fundo escuro definido em vez
 * de quase-transparente — ficavam pouco visíveis sobre fotos claras. Setas
 * somem no mobile (mesmo critério das setas da galeria principal): sem
 * hover em touch elas mais atrapalham do que ajudam, e a partir de agora
 * o lightbox também responde a swipe (ver gallery.js).
 */
.wb-lightbox-close,
.wb-lightbox-nav {
	background: rgba(0, 0, 0, .55) !important;
	color: #fff !important;
}
.wb-lightbox-close:hover,
.wb-lightbox-nav:hover:not([disabled]) {
	background: rgba(0, 0, 0, .75) !important;
}
@media (max-width: 899px) {
	.wb-lightbox-nav { display: none !important; }
}

/* Botão de fechar: o "×" não ficava centralizado (button não centraliza
   sozinho) e o alvo de toque era pequeno demais no mobile. */
.wb-lightbox-close {
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 26px !important;
	border-radius: 50% !important;
}

/* ---------- Bloco vendedor/entrega ---------- */
.wb-amz-seller {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wb-border);
	font-size: 13px;
	line-height: 1.6;
	color: var(--wb-text-muted, #565959);
}
.wb-amz-seller strong { color: var(--wb-text); }
.wb-amz-seller .wb-amz-seller-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wb-amz-seller .wb-amz-seller-row[hidden] { display: none; }

/* ---------- Responsivo: mobile e tablet ---------- */
@media (max-width: 500px) {
	.wb-col-buy { padding: 12px; }
}

/*
 * Selos "Compra protegida / Pagamento seguro / Entrega..." (.wb-assurance):
 * no default eles quebram linha livremente e acabam empilhados um por linha
 * em telas estreitas. Trava numa única linha rolável horizontalmente em vez
 * de empilhar — mesmo padrão já usado nas miniaturas da galeria.
 */
@media (max-width: 767px) {
	.wb-assurance {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.wb-assurance::-webkit-scrollbar { display: none; }
	.wb-assurance span { flex: 0 0 auto; white-space: nowrap; }
}

/* iPad/tablet em retrato (768–1023px): buybox ainda em coluna única (grid
   de 2 colunas só entra em min-width: 900px no product.css), então aqui só
   garante que a caixa não fique espremida. */
@media (min-width: 768px) and (max-width: 899px) {
	.wb-col-buy { padding: 14px; }
}