/**
 * Vita Supply — correções de mobile
 * Baseado na auditoria em viewport 390×844 (iPhone), 18/08/2026.
 *
 * Tudo aqui está dentro de @media (max-width: 991px), exceto os itens que
 * também valem no desktop (logo invisível e zoom de input no iOS).
 */

/* =======================================================================
 * LOGO — vale em toda largura
 * A palavra "Vita Supply" era invisível: arquivo branco sobre fundo branco.
 * ==================================================================== */

.vsfix-logo-placa {
	display: inline-block;
	background: #2f7d16;
	border-radius: 8px;
	padding: 6px 12px;
	line-height: 0;
}

.vsfix-logo-placa img {
	max-height: 42px;
	width: auto;
}

/* =======================================================================
 * INPUTS — 16px evita o zoom automático do Safari no iOS
 * Vale em toda largura porque o iPad também faz isso.
 * ==================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	font-size: 16px !important;
}

/* =======================================================================
 * COMPONENTES SÓ-MOBILE — ESCONDIDOS POR PADRÃO
 *
 * BUG CORRIGIDO EM 20/08: a <nav class="vsfix-mbar"> é impressa pelo PHP em
 * TODAS as larguras, mas todo o CSS que a posiciona vivia dentro do
 * @media (max-width: 991px). No desktop ela caía como um bloco cru no fim de
 * cada página — cinco itens empilhados com os SVGs soltos.
 *
 * A regra é: componente que só existe no mobile nasce display:none e só é
 * ligado dentro do media query. Nunca o contrário — esquecer de esconder
 * quebra o desktop inteiro em silêncio, e o desktop é onde ninguém olha
 * depois de trabalhar o mobile.
 * ==================================================================== */

.vsfix-mbar,
.vsfix-buybar {
	display: none;
}

/* =======================================================================
 * MOBILE
 * ==================================================================== */

@media (max-width: 991px) {

	/* --- 1. Barra falsa do tema: 146px de tela com telefone americano --- */

	.handheld-footer-bar,
	.electro-handheld-footer-bar,
	body .handheld-footer-bar {
		display: none !important;
	}

	/* --- 2. Flutuantes que cobriam o botão de compra ------------------- */

	/* O selo "Ofertas até 68% OFF" ficava exatamente sobre o
	   "Adicionar ao carrinho" do segundo card da listagem. */
	#vs-float-badge,
	.vs-float-badge {
		display: none !important;
	}

	/* O botão de voltar ao topo é redundante com a barra de ação. */
	#scrollUp,
	.scroll-to-top,
	#scroll-to-top {
		display: none !important;
	}

	/* WhatsApp acima da barra de ação, não em cima dela. */
	.wpt-whatsapp-button,
	.wpt_whatsapp_button,
	a[href*="wa.me"].floating,
	.whatsapp-float {
		bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 9997 !important;
	}

	/* --- 3. Barra de ação -------------------------------------------- */

	.vsfix-mbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		align-items: stretch;
		background: #fff;
		border-top: 1px solid #e3e6e8;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, .07);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.vsfix-mbar-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* 44px é o mínimo das diretrizes de acessibilidade para alvo de
		   toque. Abaixo disso o usuário erra e culpa a loja. */
		min-height: 56px;
		padding: 7px 2px;
		border: 0;
		background: none;
		color: #1d2b16;
		font: 600 10.5px/1.2 inherit;
		text-decoration: none;
		position: relative;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
	}

	.vsfix-mbar-item svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.vsfix-mbar-item:active {
		background: #f2f6ef;
	}

	/* Badge ancorado ao ícone, não à célula: com 5 itens numa tela de 390px
	   cada célula tem ~78px, e um badge posicionado pela borda da célula
	   descolaria do carrinho. */
	.vsfix-mbar-count {
		position: absolute;
		top: 5px;
		left: 50%;
		transform: translateX(6px);
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border-radius: 9px;
		background: #d8232a;
		color: #fff;
		font: 700 10px/17px inherit;
		font-style: normal;
		text-align: center;
	}

	/* Espaço para a barra não cobrir o fim do conteúdo.
	   Regra única: antes havia duas declarações de padding-bottom no body
	   (uma zerando, outra somando), e a que vencia dependia da ordem. */
	body,
	body.woocommerce-page {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Na página de produto a barra de ação sai de cena para a barra de
	   compra ficar sozinha — o CTA principal não divide espaço. */
	body.single-product .vsfix-mbar {
		display: none;
	}

	/* --- 4. Barra de compra na PDP ----------------------------------- */

	.vsfix-buybar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		align-items: center;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid #e3e6e8;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, .1);
	}

	.vsfix-buybar[hidden] {
		display: none;
	}

	.vsfix-buybar-info {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.25;
	}

	.vsfix-buybar-preco {
		display: block;
		font-size: 17px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.vsfix-buybar-preco del {
		display: none; /* preço antigo não cabe aqui */
	}

	.vsfix-buybar-pix {
		display: block;
		font-size: 11.5px;
		color: #2f7d16;
		font-weight: 600;
	}

	.vsfix-buybar-btn {
		flex: 0 0 auto;
		min-height: 46px;
		padding: 0 22px;
		font-size: 15px;
		font-weight: 700;
		border-radius: 8px;
	}

	/* --- 5. Trilhas roláveis ------------------------------------------
	   Menu e breadcrumb tinham 462px de conteúdo em 386px de tela, com o
	   texto cortado na borda ("Whey Prote…"). Rolagem horizontal com
	   máscara de esmaecimento resolve sem esconder nada. */

	.vsfix-scroller,
	ul.vs-nav,
	.woocommerce-breadcrumb,
	.electro-breadcrumb .breadcrumb,
	nav.woocommerce-breadcrumb {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		white-space: nowrap;
		gap: 6px;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	}

	.vsfix-scroller::-webkit-scrollbar,
	ul.vs-nav::-webkit-scrollbar,
	.woocommerce-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	ul.vs-nav > li {
		flex: 0 0 auto;
	}

	/* --- 6. Galeria do produto ---------------------------------------
	   O tema força display:flex !important em .flex-control-thumbs e as 6
	   miniaturas ficavam uma por linha, ~700px de rolagem morta. */

	.woocommerce-product-gallery .flex-control-thumbs,
	.flex-control-nav.flex-control-thumbs {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 7px !important;
		margin-top: 10px !important;
		padding: 0 !important;
		list-style: none;
	}

	.flex-control-thumbs li {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}

	.flex-control-thumbs img {
		width: 100% !important;
		height: auto !important;
		border-radius: 6px;
	}

	/* --- 7. Título do produto -----------------------------------------
	   229 caracteres do feed da Amazon empurravam o preço para fora da
	   primeira dobra, e a hifenização quebrava em "Diu-rético". */

	.single-product .product_title,
	.single-product h1.entry-title {
		font-size: 19px !important;
		line-height: 1.32 !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
		word-break: normal !important;
		overflow-wrap: break-word;
		margin-bottom: 10px;
	}

	/* --- 8. Cards da listagem -----------------------------------------
	   Nomes cortados no meio da palavra e botões desalinhados porque cada
	   card tinha altura diferente. */

	ul.products li.product,
	.products .product {
		display: flex !important;
		flex-direction: column;
	}

	ul.products li.product .woocommerce-loop-product__title,
	.products .product h2,
	.products .product h3 {
		font-size: 13.5px !important;
		line-height: 1.35 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 2.7em;
		hyphens: none;
		margin-bottom: 6px;
	}

	/* Categoria em uma linha só, com reticências. Cada produto está em até
	   5 categorias — a lista inteira tomava 3 linhas do card. */
	ul.products li.product .loop-product__category,
	.products .product .posted_in,
	.products .product .product-category-list {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 11px;
		opacity: .7;
	}

	/* Botão sempre no rodapé do card, alinhado entre todos. */
	ul.products li.product .button,
	.products .product .add_to_cart_button {
		margin-top: auto !important;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		font-size: 13px;
	}

	/* Faixa cinza atrás das fotos parecia placeholder quebrado. */
	.product-loop-header,
	ul.products li.product .product-thumbnail {
		background: #fff !important;
	}

	/* --- 9. Cabeçalho -------------------------------------------------- */

	/* O total do carrinho aparecia truncado ("R$211,2") com o badge por cima. */
	.header-cart .cart-total,
	.cart-contents .amount {
		font-size: 12.5px !important;
		white-space: nowrap;
	}

	/* Este bloco estourava ~100px para fora da tela. */
	.display-name,
	.header-support-inner .display-name {
		display: none !important;
	}

	/* --- 10. Alvos de toque -------------------------------------------- */

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-proceed-to-checkout a,
	.single_add_to_cart_button {
		min-height: 46px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Quantidade: os botões de +/- eram pequenos demais para o polegar. */
	.quantity input.qty {
		min-height: 44px;
		min-width: 56px;
		text-align: center;
	}

	/* --- 11. Tabelas que estouram a tela ------------------------------- */

	.woocommerce table.shop_table,
	.vsfix-ficha table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- 12. Componentes do kit no mobile ------------------------------ */

	.vsfix-frete-form {
		gap: 8px;
	}

	.vsfix-frete-cep {
		flex: 1 1 auto;
		max-width: none;
	}

	.vsfix-frete-btn {
		flex: 0 0 auto;
		min-height: 46px;
	}

	.vsfix-pix-badge {
		width: 100%;
	}

	.vsfix-resumo li {
		font-size: 12px;
	}
}

/* =======================================================================
 * Telas muito estreitas (iPhone SE e similares)
 * ==================================================================== */

@media (max-width: 380px) {

	.vsfix-mbar-item {
		font-size: 9.5px;
	}

	.vsfix-mbar-item svg {
		width: 20px;
		height: 20px;
	}

	ul.products li.product .woocommerce-loop-product__title {
		font-size: 12.5px !important;
	}

	.vsfix-buybar-btn {
		padding: 0 16px;
		font-size: 14px;
	}
}

/* =======================================================================
 * Acessibilidade
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
	.vsfix-buybar,
	.vsfix-mbar,
	.vsfix-frete-bar-track span {
		transition: none !important;
	}
}

.vsfix-mbar-item:focus-visible,
.vsfix-buybar-btn:focus-visible {
	outline: 3px solid #2f7d16;
	outline-offset: -3px;
}