/* =========================================================
   VM Brinquedos — Página de produto (single)
   ---------------------------------------------------------
   Carregado só em is_product() e DEPOIS de storefront-woocommerce-style
   (ver a dependência no functions.php). Aquele arquivo entra no
   wp_enqueue_scripts com prioridade 20 — o vm-theme.css entra na 10 —,
   então sem a dependência ele venceria os empates de especificidade
   contra este arquivo.

   O Storefront monta o single product em FLOATS com larguras em %
   (.images 39.13% / .summary 56.52%, com o corpo em
   .storefront-full-width-content). Aqui a página vira grid. Float é
   ignorado em item de grid, mas `width` não — daí os poucos
   `!important` em width/float/margin: são exatamente os pontos onde a
   grade de floats do Storefront tem especificidade maior que a nossa
   (até 0,5,2 nas miniaturas). Mesmo motivo do `display: grid !important`
   dos cards em vm-theme.css.

   Paleta, tipografia e tokens: 100% herdados de vm-theme.css.
   ========================================================= */

/* ── Escala tipográfica da página ──────────────────────────
   Hierarquia fixa: H1 → Preço → Descrição → Secundárias → Metadados.
   Nada de tamanho solto: todo texto da página sai de um destes tokens. */

.single-product {
	--vm-p-h1: clamp(1.625rem, 1.05rem + 1.6vw, 2.375rem);   /* 26 → 38 */
	--vm-p-price: clamp(1.5rem, 1.15rem + 1vw, 2rem);        /* 24 → 32 */
	--vm-p-lead: 1.0625rem;                                  /* 17 — descrição curta */
	--vm-p-body: 1rem;                                       /* 16 — secundárias */
	--vm-p-meta: 0.8125rem;                                  /* 13 — metadados */

	/* Altura do header encolhido (~88px) + respiro de 16px. */
	--vm-p-sticky-top: 104px;

	/* Coluna das miniaturas no desktop. */
	--vm-p-thumbs: 88px;
}

/* Alinha a página ao header/footer (1240px) em vez dos 1064px do
   Storefront — a imagem principal precisa do espaço extra. */
.single-product #content > .col-full {
	max-width: 1240px;
}

/* ── Breadcrumb — discreto, é orientação e não conteúdo ──── */

.single-product .storefront-breadcrumb {
	background: transparent;
	margin: 0;
	padding: var(--vm-s-24) 0 0;
	border: 0;
}

.single-product .storefront-breadcrumb .col-full {
	max-width: 1240px;
}

.single-product .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	font-size: var(--vm-p-meta);
	font-weight: 600;
	line-height: 1.5;
	color: var(--vm-texto-suave);
}

.single-product .woocommerce-breadcrumb a {
	color: var(--vm-texto-suave);
	text-decoration: none;
	transition: color var(--vm-transition);
}

.single-product .woocommerce-breadcrumb a:hover {
	color: var(--vm-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── A grade da página ─────────────────────────────────────
   Galeria e resumo lado a lado; tudo o que vier depois (abas,
   upsells, relacionados, paginação do Storefront) atravessa as duas
   colunas. Regra genérica em `> *` para que qualquer bloco que um
   plugin injete caia inteiro embaixo, e não espremido numa coluna. */

.single-product div.product {
	position: relative;
	display: grid;
	/* A imagem tem de sair maior que a coluna de texto — é ela o ponto
	   focal da página, não o bloco de informações. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	column-gap: clamp(2rem, 4vw, 4rem);
	row-gap: var(--vm-s-48);
	align-items: start;
	margin-top: var(--vm-s-32);

	/* O Storefront usa `overflow: hidden` aqui só para conter os floats do
	   layout dele. Em grid não há float a conter, e o overflow custa caro:
	   ele tornaria ESTE elemento o scrollport do `position: sticky` do
	   resumo — que então nunca acompanharia a rolagem e ainda nasceria
	   empurrado --vm-p-sticky-top para baixo. */
	overflow: visible;
}

/* O clearfix do Storefront viraria item do grid e abriria uma linha vazia. */
.single-product div.product::before,
.single-product div.product::after {
	content: none !important;
}

.single-product div.product > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .images {
	grid-column: 1;
	grid-row: 1;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.single-product div.product > .summary {
	grid-column: 2;
	grid-row: 1;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	max-width: 34rem;
}

/* O resumo acompanha a rolagem enquanto a galeria passa — o CTA nunca
   sai da tela na primeira dobra. Só no desktop, e só se couber. */
@media (min-width: 1024px) and (min-height: 700px) {
	.single-product div.product > .summary {
		position: sticky;
		top: var(--vm-p-sticky-top);
	}
}

/* ── Galeria ───────────────────────────────────────────────
   Miniaturas em coluna à esquerda (desktop), imagem principal grande à
   direita: o ponto focal da página. No mobile as miniaturas viram
   faixa horizontal (ver Responsivo).

   Flex com `row-reverse` — e não grid de duas colunas — de propósito: o
   WooCommerce desliga o flexslider quando o produto tem UMA imagem só
   (`1 === this.$images.length` no single-product.js), e aí não existem
   nem .flex-viewport nem .flex-control-thumbs. Num grid de colunas fixas
   isso deixaria uma coluna de miniaturas vazia empurrando a foto; no flex
   a imagem simplesmente ocupa a linha toda. Boa parte do catálogo vem do
   Bling com uma imagem só, então este é o caso comum, não a exceção. */

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	display: flex;
	flex-direction: row-reverse; /* DOM: [viewport, miniaturas] → visual: [miniaturas, viewport] */
	align-items: flex-start;
	gap: var(--vm-s-16);
}

.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0; /* o Storefront deixa 1.618em embaixo — aqui quem espaça é o flex */
	border-radius: var(--vm-radius);
}

/* Painel da imagem principal — fundo branco, borda suave, quadrado.
   `contain` evita corte: foto de brinquedo do Bling vem em proporções
   variadas. */
.single-product div.product .woocommerce-product-gallery__image {
	background: var(--vm-branco);
	border: 1px solid var(--vm-card-borda);
	border-radius: var(--vm-radius);
	overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery__image a {
	display: block;
	outline-offset: -3px;
}

.single-product div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: var(--vm-s-8);
	border-radius: var(--vm-radius);
	transition: transform 0.5s var(--vm-ease-fn);
}

/* Zoom lúdico e discreto ao passar o mouse. O zoom nativo do WooCommerce
   (jquery.zoom, ligado pelo Storefront) sobrepõe a .zoomImg — que não
   pode receber este scale, senão a lente treme. */
.single-product div.product .woocommerce-product-gallery__image:hover img:not(.zoomImg) {
	transform: scale(1.03);
}

.single-product div.product .woocommerce-product-gallery__image img.zoomImg {
	padding: 0;
	aspect-ratio: auto;
	transform: none !important;
	background: var(--vm-branco);
}

/* Botão da lightbox — pílula sobre a imagem.
   Cuidado ao mexer: o Storefront esconde o emoji 🔍 do markup do Woo com
   `text-indent: -999px` + `overflow: hidden` e desenha o ícone real num
   ::before com Font Awesome. Isso só funciona em layout de bloco — trocar
   este botão para flex/grid faria o emoji reaparecer ao lado do ícone.
   Por isso aqui só mudam cor, tamanho e forma.

   O `background-color` do customizer do Storefront (0,4,1) mira este
   mesmo botão; o `body` na frente garante o desempate a nosso favor. */
body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: var(--vm-s-12);
	right: var(--vm-s-12);
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--vm-branco);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--vm-shadow), 0 0 0 1px var(--vm-card-borda);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--vm-transition), transform var(--vm-transition), background var(--vm-transition), box-shadow var(--vm-transition);
}

/* line-height = altura do botão: é o que centra o glifo verticalmente
   (o padrão do Storefront, `line-height: 2`, mira um botão de 2em). */
body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	line-height: 40px;
	font-size: 0.9rem;
	color: var(--vm-navy);
}

body.single-product div.product .woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger,
body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible {
	opacity: 1;
	transform: none;
}

body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
	background: var(--vm-amarelo);
	box-shadow: var(--vm-shadow), 0 0 0 1px var(--vm-amarelo);
}

/* Sempre visível no touch — não há hover para revelar. */
@media (hover: none) {
	body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		opacity: 1;
		transform: none;
	}
}

/* ── Miniaturas ───────────────────────────────────────────
   O Storefront distribui os <li> em floats com % por nº de colunas
   (.flex-control-thumbs li chega a 0,5,2 de especificidade) — daí os
   !important para devolver o controle ao grid. */

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	flex: 0 0 var(--vm-p-thumbs);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vm-s-8);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

/* O clearfix do Storefront (content:"" + display:table) viraria duas
   células fantasma neste grid, desalinhando todas as miniaturas. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
	content: none !important;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0;
	padding: var(--vm-s-4);
	background: var(--vm-branco);
	border: 1px solid var(--vm-card-borda);
	border-radius: 10px;
	cursor: pointer;
	opacity: 1; /* o padrão do Woo é .5 — apagado demais para o nosso creme */
	transition: border-color var(--vm-transition), transform var(--vm-transition), box-shadow var(--vm-transition);
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: var(--vm-gold-soft);
	transform: translateY(-2px);
	box-shadow: var(--vm-shadow);
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--vm-amarelo);
	box-shadow: 0 0 0 2px rgba(248, 189, 23, 0.35);
}

/* Miniatura é controle: precisa de foco visível ao teclado. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:focus-visible {
	outline: 3px solid var(--vm-navy);
	outline-offset: 2px;
}

/* Selo de oferta — sobre a imagem principal, mesma linguagem do card da
   vitrine. O padrão (12px da esquerda) serve ao mobile e ao produto de
   imagem única; quando há coluna de miniaturas, o selo precisa saltá-la
   (ver o :has() logo abaixo) para não cair em cima da primeira. */
.single-product div.product > span.onsale {
	position: absolute;
	top: var(--vm-s-12);
	left: var(--vm-s-12);
	right: auto;
	z-index: 2;
	margin: 0;
	padding: 0.3rem 0.8rem;
	background: var(--vm-coral);
	color: var(--vm-branco);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.4;
	border-radius: 999px;
	min-width: 0;
	min-height: 0;
	box-shadow: 0 4px 10px rgba(255, 107, 91, 0.35);
}

/* Só no desktop, e só quando o flexslider realmente montou as miniaturas
   à esquerda. Se o :has() falhar num navegador antigo, o selo volta ao
   canto da galeria — degrada para cosmético, não quebra o layout. */
@media (min-width: 1024px) {
	.single-product div.product:has(.woocommerce-product-gallery .flex-control-thumbs) > span.onsale {
		left: calc(var(--vm-p-thumbs) + var(--vm-s-16) + var(--vm-s-12));
	}
}

/* ── Resumo: ritmo vertical ───────────────────────────────
   Um único bloco no grid de 8 controla o respiro entre os elementos;
   cada bloco só ajusta o que precisa fugir do padrão. */

.single-product div.product > .summary > * {
	margin-top: 0;
	margin-bottom: var(--vm-s-16);
}

.single-product div.product > .summary > *:last-child {
	margin-bottom: 0;
}

/* ── Nome do produto ──────────────────────────────────────
   Leve, com entrelinha curta e largura máxima em ch: título de e-commerce
   passa de 3 linhas e vira parágrafo. */

.single-product div.product .product_title {
	margin: 0 0 var(--vm-s-12);
	max-width: 20ch;
	font-family: var(--vm-font);
	font-size: var(--vm-p-h1);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--vm-ink);
	text-wrap: balance;
}

/* ── Avaliações ──────────────────────────────────────────── */

.single-product div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--vm-s-8);
	margin: 0 0 var(--vm-s-16);
	line-height: 1;
}

.single-product div.product .woocommerce-product-rating .star-rating {
	margin: 0;
	color: var(--vm-amarelo);
	font-size: 0.9rem;
}

.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
	font-size: var(--vm-p-meta);
	font-weight: 600;
	color: var(--vm-texto-suave);
	text-decoration: none;
}

.single-product div.product .woocommerce-product-rating .woocommerce-review-link:hover {
	color: var(--vm-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Preço — segundo na hierarquia, logo abaixo do nome ──── */

.single-product div.product > .summary p.price,
.single-product div.product > .summary span.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--vm-s-8);
	margin: 0 0 var(--vm-s-24);
	font-family: var(--vm-font);
	font-size: var(--vm-p-price);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--vm-navy);
}

.single-product div.product > .summary p.price del {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--vm-texto-suave);
	opacity: 0.85;
	order: 2;
}

.single-product div.product > .summary p.price ins {
	background: transparent;
	text-decoration: none;
	color: var(--vm-coral-deep);
	order: 1;
}

.single-product div.product > .summary p.price .woocommerce-Price-currencySymbol {
	font-size: 0.6em;
	font-weight: 700;
	margin-right: 0.15em;
	vertical-align: 0.35em;
	color: var(--vm-texto-suave);
}

/* ── Descrição curta ──────────────────────────────────────
   Medida de leitura confortável (~60ch), entrelinha alta e contraste
   real. Se o texto vier do Bling em <ul>, os itens ganham marcador
   dourado — sem tocar no conteúdo. */

.single-product div.product .woocommerce-product-details__short-description {
	margin: 0 0 var(--vm-s-24);
	max-width: 60ch;
	font-size: var(--vm-p-lead);
	line-height: 1.7;
	color: var(--vm-texto);
}

.single-product div.product .woocommerce-product-details__short-description > *:last-child {
	margin-bottom: 0;
}

.single-product div.product .woocommerce-product-details__short-description p {
	margin: 0 0 var(--vm-s-12);
}

.single-product div.product .woocommerce-product-details__short-description ul {
	margin: 0 0 var(--vm-s-12);
	padding: 0;
	list-style: none;
}

.single-product div.product .woocommerce-product-details__short-description ul li {
	position: relative;
	margin: 0 0 var(--vm-s-8);
	padding-left: var(--vm-s-24);
}

.single-product div.product .woocommerce-product-details__short-description ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vm-amarelo);
}

/* ── Faixa de confiança (vm_trust_strip no functions.php) ──
   Fica entre a descrição e o CTA: é o último argumento antes do clique. */

.vm-trust-strip {
	display: flex;
	flex-direction: column;
	gap: var(--vm-s-12);
	margin: 0 0 var(--vm-s-24);
	padding: var(--vm-s-16);
	list-style: none;
	background: var(--vm-card);
	border: 1px solid var(--vm-card-borda);
	border-radius: 14px;
}

.vm-trust-strip li {
	display: flex;
	align-items: center;
	gap: var(--vm-s-12);
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vm-texto);
}

.vm-trust-strip svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--vm-navy);
}

/* ── Estoque ──────────────────────────────────────────────
   Ponto colorido + texto. O template stock.php só imprime texto, então o
   indicador é ::before — nada de markup novo. */

.single-product div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s-8);
	margin: 0 0 var(--vm-s-16);
	padding: 0;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--vm-texto);
	background: none;
}

.single-product div.product .stock::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vm-mint);
	box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.25);
}

.single-product div.product .stock.out-of-stock {
	color: var(--vm-coral-deep);
}

.single-product div.product .stock.out-of-stock::before {
	background: var(--vm-coral-deep);
	box-shadow: 0 0 0 3px rgba(232, 82, 63, 0.2);
}

.single-product div.product .stock.available-on-backorder {
	color: var(--vm-texto);
}

.single-product div.product .stock.available-on-backorder::before {
	background: var(--vm-amarelo);
	box-shadow: 0 0 0 3px rgba(248, 189, 23, 0.28);
}

/* ── Form de compra: quantidade + CTA ─────────────────────
   O Storefront joga a .quantity num float com clearfix; aqui vira flex. */

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vm-s-12);
	margin: 0 0 var(--vm-s-24);
	padding: 0;
}

.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
	content: none !important;
}

/* Seletor de quantidade — os botões − / + são injetados pelo
   vm-product.js (só existem se o JS rodar, nunca um controle morto). */
.single-product div.product form.cart .quantity {
	display: flex;
	align-items: stretch;
	float: none !important;
	margin: 0 !important;
	background: var(--vm-branco);
	border: 1px solid var(--vm-card-borda);
	border-radius: 12px;
	overflow: hidden;
}

.single-product div.product form.cart .quantity .qty {
	width: 3.25rem;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--vm-font);
	font-size: var(--vm-p-body);
	font-weight: 800;
	color: var(--vm-navy);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* As setas nativas do input[type=number] competem com os nossos botões. */
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product div.product form.cart .quantity .qty:focus {
	outline: none;
}

/* Foco no conjunto: o input não tem borda própria. */
.single-product div.product form.cart .quantity:focus-within {
	border-color: var(--vm-navy);
	box-shadow: 0 0 0 3px rgba(15, 39, 73, 0.15);
}

.vm-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* alvo de toque mínimo — WCAG 2.5.5 / HIG */
	min-height: 56px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vm-navy);
	font-family: var(--vm-font);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--vm-transition), color var(--vm-transition);
}

.vm-qty__btn:hover:not(:disabled) {
	background: var(--vm-creme);
}

.vm-qty__btn:disabled {
	color: var(--vm-texto-suave);
	opacity: 0.45;
	cursor: not-allowed;
}

.vm-qty__btn:focus-visible {
	outline: 3px solid var(--vm-navy);
	outline-offset: -3px;
}

/* CTA principal — dourado, o elemento mais pesado do resumo.
   `flex: 1` para ocupar a sobra ao lado da quantidade. */
.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1 1 14rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 56px;
	padding: 0 var(--vm-s-32);
	float: none;
	background: var(--vm-amarelo);
	color: var(--vm-navy);
	border: 0;
	border-radius: 12px;
	font-family: var(--vm-font);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(248, 189, 23, 0.35);
	transition: background var(--vm-transition), transform var(--vm-transition), box-shadow var(--vm-transition);
}

.single-product div.product form.cart .single_add_to_cart_button:hover {
	background: var(--vm-amarelo-hover);
	color: var(--vm-navy);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(248, 189, 23, 0.45);
}

.single-product div.product form.cart .single_add_to_cart_button:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(248, 189, 23, 0.35);
}

.single-product div.product form.cart .single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--vm-navy);
	outline-offset: 3px;
}

.single-product div.product form.cart .single_add_to_cart_button.loading,
.single-product div.product form.cart .single_add_to_cart_button.disabled {
	opacity: 0.6;
	transform: none;
}

/* ── Metadados (SKU / categoria / tags) ───────────────────
   Rodapé do resumo: menor de todos, separado por um filete. */

.single-product div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: var(--vm-s-8);
	margin: 0;
	padding-top: var(--vm-s-16);
	font-size: var(--vm-p-meta);
	line-height: 1.6;
	color: var(--vm-texto-suave);
	border-top: 1px solid var(--vm-card-borda);
}

.single-product div.product .product_meta > span {
	display: block;
	font-weight: 600;
}

.single-product div.product .product_meta a {
	color: var(--vm-texto);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--vm-transition);
}

.single-product div.product .product_meta a:hover {
	color: var(--vm-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Abas ─────────────────────────────────────────────────
   O Storefront empilha a lista de abas como coluna flutuante (30% à
   esquerda) a partir de 768px. Aqui viram abas horizontais com
   sublinhado — padrão que o usuário já conhece de e-commerce grande. */

.single-product div.product .woocommerce-tabs {
	margin: 0;
	padding: var(--vm-s-40) 0 0;
	border-top: 1px solid var(--vm-card-borda);
}

.single-product div.product .woocommerce-tabs ul.tabs {
	position: relative;
	width: auto !important;
	float: none !important;
	display: flex;
	gap: var(--vm-s-24);
	margin: 0 0 var(--vm-s-32) !important;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--vm-card-borda);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.single-product div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}

/* O Woo/Storefront desenha "orelhas" de aba com ::before/::after e um
   filete em ::before da <ul>. Nada disso serve ao visual novo. */
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
	content: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 var(--vm-s-12);
	font-family: var(--vm-font);
	font-size: var(--vm-p-body);
	font-weight: 700;
	line-height: 1.4;
	color: var(--vm-texto-suave);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px; /* cobre o filete da <ul> */
	transition: color var(--vm-transition), border-color var(--vm-transition);
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--vm-navy);
	border-bottom-color: var(--vm-card-borda);
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--vm-navy);
	border-bottom-color: var(--vm-amarelo);
}

.single-product div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 3px solid var(--vm-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Painel — cartão claro, medida de leitura controlada. */
.single-product div.product .woocommerce-tabs .panel {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	background: transparent;
	font-size: var(--vm-p-lead);
	line-height: 1.75;
	color: var(--vm-texto);
	max-width: 72ch;
}

.single-product div.product .woocommerce-tabs .panel > *:first-child {
	margin-top: 0;
}

.single-product div.product .woocommerce-tabs .panel > *:last-child {
	margin-bottom: 0;
}

.single-product div.product .woocommerce-tabs .panel h2 {
	margin: 0 0 var(--vm-s-16);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--vm-navy);
}

.single-product div.product .woocommerce-tabs .panel p {
	margin: 0 0 var(--vm-s-16);
}

/* Tabela de atributos ("Informação adicional"). */
.single-product div.product .woocommerce-tabs .panel table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--vm-p-body);
}

.single-product div.product .woocommerce-tabs .panel table.shop_attributes th,
.single-product div.product .woocommerce-tabs .panel table.shop_attributes td {
	padding: var(--vm-s-12) 0;
	border: 0;
	border-bottom: 1px solid var(--vm-card-borda);
	text-align: left;
	line-height: 1.6;
	font-style: normal;
}

.single-product div.product .woocommerce-tabs .panel table.shop_attributes th {
	width: 32%;
	font-weight: 700;
	color: var(--vm-navy);
}

.single-product div.product .woocommerce-tabs .panel table.shop_attributes td {
	color: var(--vm-texto);
}

.single-product div.product .woocommerce-tabs .panel table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* ── Relacionados / upsells ──────────────────────────────── */

.single-product div.product .related,
.single-product div.product .upsells {
	margin: 0;
	padding: var(--vm-s-40) 0 0;
	border-top: 1px solid var(--vm-card-borda);
}

.single-product div.product .related > h2,
.single-product div.product .upsells > h2 {
	margin: 0 0 var(--vm-s-24);
	font-family: var(--vm-font);
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--vm-navy);
}

/* ── Movimento reduzido ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.single-product div.product .woocommerce-product-gallery__image img,
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img,
	.single-product div.product form.cart .single_add_to_cart_button,
	body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		transition: none !important;
	}

	.single-product div.product .woocommerce-product-gallery__image:hover img:not(.zoomImg),
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
	.single-product div.product form.cart .single_add_to_cart_button:hover {
		transform: none !important;
	}

	body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   Responsivo
   Breakpoints alinhados aos que o vm-theme.css já usa (1023 / 600).
   ========================================================= */

/* ── Tablet: uma coluna, resumo abaixo da galeria ────────── */

@media (max-width: 1023px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--vm-s-32);
		margin-top: var(--vm-s-24);
	}

	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .images,
	.single-product div.product > .summary {
		grid-column: 1;
		grid-row: auto;
		max-width: none;
	}

	/* Miniaturas viram faixa horizontal sob a imagem — nenhuma coluna
	   lateral roubando largura da foto. `column` (e não column-reverse)
	   porque aqui a ordem visual volta a ser a do DOM: imagem, miniaturas. */
	.single-product div.product .woocommerce-product-gallery {
		flex-direction: column;
		gap: var(--vm-s-12);
	}

	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
		flex: 0 0 auto;
		align-self: stretch;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .upsells {
		padding-top: var(--vm-s-32);
	}
}

/* ── Mobile ───────────────────────────────────────────────
   Meta: imagem, nome, preço, estoque e CTA visíveis com o mínimo de
   rolagem. A imagem sangra até as bordas do conteúdo e o CTA ocupa a
   largura toda. */

@media (max-width: 600px) {
	.single-product {
		--vm-p-thumbs: 64px;
	}

	.single-product .storefront-breadcrumb {
		padding-top: var(--vm-s-16);
	}

	.single-product div.product {
		margin-top: var(--vm-s-16);
		row-gap: var(--vm-s-24);
	}

	/* Título mais contido, mas ainda o maior da tela. */
	.single-product div.product .product_title {
		max-width: none;
		line-height: 1.2;
		margin-bottom: var(--vm-s-8);
	}

	.single-product div.product > .summary p.price,
	.single-product div.product > .summary span.price {
		margin-bottom: var(--vm-s-16);
	}

	.single-product div.product .woocommerce-product-details__short-description {
		max-width: none;
		margin-bottom: var(--vm-s-16);
	}

	/* Faixa de miniaturas rolável: 4 à mostra, sem espremer nem cortar. */
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
		grid-auto-columns: var(--vm-p-thumbs);
		gap: var(--vm-s-8);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: var(--vm-s-4);
	}

	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}

	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
		scroll-snap-align: start;
	}

	/* Quantidade numa linha, CTA de largura total na seguinte: lado a lado
	   o botão não caberia com folga, e a regra do brief é o CTA ocupar
	   quase toda a largura. */
	.single-product div.product form.cart {
		gap: var(--vm-s-8);
		margin-bottom: var(--vm-s-16);
	}

	.single-product div.product form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
		min-height: 56px;
		padding: 0 var(--vm-s-16);
	}

	.vm-trust-strip {
		padding: var(--vm-s-12);
		gap: var(--vm-s-8);
		margin-bottom: var(--vm-s-16);
	}

	.single-product div.product .woocommerce-tabs ul.tabs {
		gap: var(--vm-s-16);
		margin-bottom: var(--vm-s-24) !important;
	}

	.single-product div.product .woocommerce-tabs .panel table.shop_attributes th {
		width: 40%;
	}
}

/* ── Telas estreitas (320–360px) ─────────────────────────── */

@media (max-width: 360px) {
	.single-product {
		--vm-p-thumbs: 56px;
	}
}