/**
 * Identidade Vitta na LOJA INTEIRA.
 * ---------------------------------------------------------------------------
 * v1.17.0 — carrinho · checkout · pedido recebido.
 * v1.61.0 → v1.64.0 (11/09) — toda página que passa pelo header.php/footer.php:
 *   a moldura da home (pílula + rodapé), minha conta, busca, 404, página/post
 *   genéricos, carrinho vazio e a gaveta do carrinho.
 *
 * Escopo: `body.vitta-loja` (ver inc/vitta/vitta-loja.php) — toda página de
 * front que NÃO é um template próprio da Vitta. Essas páginas também carregam
 * `vitta-home` (o escopo do design system), e por isso a pílula e o rodapé da
 * home funcionam aqui sem cópia de CSS.
 *
 * A ESTRUTURA NÃO MUDA. Nenhum campo, nenhum passo, nenhuma classe nova no HTML:
 * o checkout e o carrinho do Noord já são escritos sobre os tokens do tema, então
 * repintar o fluxo é redefinir os tokens. O que sobra são poucas regras de
 * componente, para o que não vem de token.
 *
 * ESPECIFICIDADE — a razão de `body.skin-editorial.vitta-loja` (0,2,1):
 * a skin declara os tokens em `body.skin-editorial` (0,1,1) E o `Noord_Brand_Colors`
 * reemite os dele inline no `wp_head` (prioridade 100), no MESMO seletor. Inline no
 * head vem DEPOIS de qualquer folha enfileirada, então empate de especificidade eu
 * PERDERIA. Com as duas classes eu ganho por especificidade, independente da ordem.
 * Mesma conta vale para o `Noord_Typography` (prioridade 101), que injeta
 * `body.skin-editorial h1..h6` (0,1,2): como ele consome `--font-heading`, basta o
 * token estar redefinido num escopo mais forte.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */

body.skin-editorial.vitta-loja {
	/* Marca — valores MEDIDOS nos PNGs oficiais, iguais aos da home. Não aproximar. */
	--v-cream: #f6eee3;
	--v-wine: #820022;
	--v-page: #fcf7f0;
	--v-ink: #2a0e14; /* Vinho escurecido: é o preto desta marca. */
	--v-line: rgba(130, 0, 34, 0.14);
	--v-line-strong: rgba(130, 0, 34, 0.26);
	--v-field: #fffdfa;

	/* --- Os tokens do tema, repintados ------------------------------------ */

	--color-bg: var(--v-page);
	--color-bg-alt: var(--v-cream);
	--color-surface: var(--v-field);
	--color-body: var(--v-ink);

	--color-text: var(--v-ink);
	--color-text-muted: rgba(42, 14, 20, 0.62);
	--color-text-light: rgba(42, 14, 20, 0.4);

	--color-border: var(--v-line);
	--color-accent: var(--v-wine);
	--color-accent-text: var(--v-cream);
	--color-btn-bg: var(--v-wine);
	--color-btn-text: var(--v-cream);

	--font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Geometria da marca: botões pill, cartões 16. O tema vinha com 0 e 4 — canto
	   reto é do editorial de moda que originou o Noord, não desta marca. */
	--btn-radius: 999px;
	--input-radius: 12px;
	--v-r-card: 16px;

	/* A moldura (v1.61.0). `--vl-top` é o espaço que a pílula fixa ocupa no topo:
	   o recheio da barra dos dois lados + a pílula (64px). Tudo o que nasce no
	   alto da página, ou gruda nele (`sticky`), desconta isto. `--vl-max` é a
	   largura das páginas de conteúdo da loja — a mesma do carrinho. */
	--vl-top: calc(clamp(14px, 2.2svh, 26px) * 2 + 64px);
	--vl-max: 1280px;
	--vl-field-h: 50px;

	background: var(--v-page);
	color: var(--v-ink);
	font-family: var(--font-body);
}

/* O `<html>` também, senão a rolagem elástica descobre o branco do navegador
   embaixo da página. */
html:has(body.vitta-loja) {
	background: #fcf7f0;
}

/* ---------------------------------------------------------------------------
 * A MOLDURA — a pílula de navegação e o rodapé da HOME (v1.61.0)
 *
 * O cabeçalho e o rodapé do Noord saíram destas páginas (header.php/footer.php
 * imprimem os da home). O CSS deles é o de `vitta-home.css`, que carrega aqui
 * porque o body também tem `vitta-home` — sem cópia.
 *
 * O que NÃO vem de lá são os resets (`ul`, `a`, `img`, `*`, o body): em
 * `vitta-home.css` eles foram escritos com `:not(:where(.vitta-loja))` para não
 * desmontarem o markup do WooCommerce. Aqui eles voltam, mas SÓ para dentro da
 * moldura — e com `:where()` no meio para terem o MESMO peso que têm na home
 * (0,1,2): toda regra da pílula e do rodapé que foi escrita para vencê-los lá
 * vence aqui pelo mesmo motivo.
 * ------------------------------------------------------------------------- */

body.vitta-loja :where(.vh-bar, .vh-foot) {
	font-family: var(--v-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--v-wine);
	-webkit-font-smoothing: antialiased;
}

body.vitta-loja :where(.vh-bar, .vh-foot, .vh-skip),
body.vitta-loja :where(.vh-bar, .vh-foot) *,
body.vitta-loja :where(.vh-bar, .vh-foot) *::before,
body.vitta-loja :where(.vh-bar, .vh-foot) *::after {
	box-sizing: border-box;
}

body.vitta-loja :where(.vh-bar, .vh-foot) img {
	display: block;
	max-width: 100%;
}

body.vitta-loja :where(.vh-bar, .vh-foot) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vitta-loja :where(.vh-bar, .vh-foot) a {
	color: inherit;
	text-decoration: none;
}

body.vitta-loja :where(.vh-bar, .vh-foot) :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

/* O conteúdo nasce ABAIXO da pílula, que é fixa. A conta é a mesma do
   `scroll-margin-top` da home: o recheio da barra dos dois lados + a pílula
   (64px) + uma folga. */
body.vitta-loja .site-content {
	padding-top: var(--vl-top);
}

/* O rodapé da home abre um vão acima dele (`--v-gap`, até 128px) porque lá a
   seção de cima é um bloco que precisa se descolar. Aqui quem vem antes é o
   próprio conteúdo da página, que já termina com recheio. */
body.vitta-loja .vh-foot {
	margin-top: clamp(56px, 7vw, 96px);
}

/* --- As ações de loja na pílula: minha conta e a sacola ------------------- */

.vh-bar__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Botão e link com a MESMA pinta: o círculo acende em vinho a 9% no hover,
   exatamente como os links da pílula. `button` precisa perder tudo o que o
   tema base dá a ele (fundo cinza, recheio, caixa alta). */
body.vitta-home .vh-bar__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--v-wine);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.28s ease;
}

body.vitta-home .vh-bar__action:hover,
body.vitta-home .vh-bar__action:focus-visible {
	background: rgba(130, 0, 34, 0.09);
}

.vh-bar__glyph {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* O contador da sacola: vinho cheio, creme por dentro — a mesma pílula de
   quantidade do resumo do checkout. `display` fica com o JS (o side-cart.js
   esconde em zero); aqui só a forma. */
body.vitta-home .vh-bar__count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-cream);
	font-family: var(--v-body);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	/* Anel da cor da pílula: o número não encosta no traço da sacola. */
	box-shadow: 0 0 0 2px #f4ebdf;
}

/* No celular não há links na pílula (vão para o painel), então o segundo
   filete ficaria colado no primeiro. */
@media (max-width: 899px) {
	.vh-bar__rule--actions {
		display: none;
	}

	.vh-bar--loja .vh-bar__actions {
		margin-left: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Botões — pill, vinho, caixa natural
 * ------------------------------------------------------------------------- */

/* O botão do checkout usa `--color-text` como FUNDO (não `--color-accent`), então
   ele não vinha junto com os tokens: com o texto em tinta, o botão ficaria
   ameixa-escuro em vez de vinho. Daí a regra explícita. */

/* ===========================================================================
   ALTO-RELEVO NOS BOTOES — 09/09/2026
   ===========================================================================

   Pedido dele para o SITE INTEIRO: *"quero todos os botoes do site tbm com esse
   efeito de parecendo estar em alto relevo (...) nao e pra alterar cor dos
   botoes, apenas o estilo."*

   O degrau e um `inset` preto com alfa na aresta de baixo: nasce como uma versao
   mais escura da PROPRIA cor do botao, entao vale para qualquer cor e nao
   introduz cor nova nenhuma no projeto. `:active` afunda e encolhe o degrau.

   O mesmo bloco existe em vitta-kids.css, vitta-home.css, vitta-diario.css e
   vitta-loja.css — as quatro paginas nao compartilham folha de estilo. Mexer no
   efeito e mexer nos quatro.
   =========================================================================== */
/* Na loja os botoes vem do WooCommerce alem dos nossos, entao a lista e maior:
   os dois pares proprios (checkout/thankyou) mais os `.button` do Woo que esta
   pagina repinta. */
body.vitta-loja .checkout-btn,
body.vitta-loja .thankyou-btn,
body.vitta-loja .wc-proceed-to-checkout a.button,
body.vitta-loja .woocommerce button.button,
body.vitta-loja .woocommerce a.button,
body.vitta-loja .woocommerce input.button,
body.vitta-loja .woocommerce #place_order,
/* O chrome de loja do Noord entra junto: sao os botoes que aparecem quando o
   carrinho esta VAZIO e no side cart, e sem eles a pagina teria botao com
   degrau ao lado de botao sem. So aqui, porque `vitta-loja.css` so carrega nas
   paginas de loja. */
body.vitta-loja .cart-empty__btn,
body.vitta-loja .side-cart__continue-btn,
body.vitta-loja .side-cart__checkout-btn,
body.vitta-loja .noord-drawer-account-card__btn {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(130, 0, 34, .12);
}
body.vitta-loja .checkout-btn:active,
body.vitta-loja .thankyou-btn:active,
body.vitta-loja .wc-proceed-to-checkout a.button:active,
body.vitta-loja .woocommerce button.button:active,
body.vitta-loja .woocommerce a.button:active,
body.vitta-loja .woocommerce input.button:active,
body.vitta-loja .woocommerce #place_order:active,
body.vitta-loja .cart-empty__btn:active,
body.vitta-loja .side-cart__continue-btn:active,
body.vitta-loja .side-cart__checkout-btn:active,
body.vitta-loja .noord-drawer-account-card__btn:active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(130, 0, 34, .12);
}

body.vitta-loja .checkout-btn--primary,
body.vitta-loja .thankyou-btn--primary,
body.vitta-loja .checkout-step #payment #place_order,
body.vitta-loja .wc-proceed-to-checkout .checkout-button {
	background: var(--v-wine);
	color: var(--v-cream);
	border: 1px solid var(--v-wine);
}

body.vitta-loja .checkout-btn--primary:hover,
body.vitta-loja .thankyou-btn--primary:hover,
body.vitta-loja .checkout-step #payment #place_order:hover,
body.vitta-loja .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--v-ink);
	border-color: var(--v-ink);
	opacity: 1;
}

/* CAIXA NATURAL, e isto NÃO muda uma letra de copy: o HTML já diz "Finalizar
   compra" e "Ir para a Entrega" — quem estava gritando era o `text-transform`.
   Botão em caixa alta é a assinatura do editorial de moda que originou o Noord;
   nesta marca tudo é caixa baixa, inclusive nome de produto. */
body.vitta-loja .checkout-btn,
body.vitta-loja .thankyou-btn,
body.vitta-loja .checkout-step #payment #place_order,
body.vitta-loja .wc-proceed-to-checkout .checkout-button {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	border-radius: 999px;
}

body.vitta-loja .checkout-btn--outline,
body.vitta-loja .thankyou-btn--outline {
	background: transparent;
	color: var(--v-wine);
	border: 1px solid var(--v-line-strong);
}

body.vitta-loja .checkout-btn--outline:hover,
body.vitta-loja .thankyou-btn--outline:hover {
	background: var(--v-cream);
	border-color: var(--v-wine);
}

/* ---------------------------------------------------------------------------
 * Tipografia dos títulos
 * ------------------------------------------------------------------------- */

/* A LÍNGUA DOS TÍTULOS DA HOME (v1.61.0). Até a v1.60.0 a loja tinha títulos
   próprios (Fraunces 400, caixa normal, tinta). O pedido de 11/09 foi a loja
   "no layout do vitta materna (home)", e lá todo título é o `.vh-h2`: Fraunces
   700, CAIXA BAIXA — como o próprio logo —, SOFT/WONK ligados, tracking
   apertado, vinho. Os grandes seguem a métrica dele; os pequenos (passos do
   checkout, cabeçalhos de bloco) descem o peso para 600.

   (0,2,0)+ — precisa vencer o `body.skin-editorial h1..h6` (0,1,2) que o
   `Noord_Typography` injeta inline. */
body.vitta-loja :is(
	.checkout-email-gate__title,
	.checkout-step__title,
	.checkout-summary__title,
	.thankyou-header__title,
	.thankyou-section__title,
	.thankyou-failed__title,
	.cart-page__title,
	.login-page__editorial-title,
	.login-page__form-title,
	.myaccount-header__title,
	.myaccount-dash-recent__title,
	.vl-title
) {
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
	text-wrap: balance;
}

body.vitta-loja :is(
	.checkout-email-gate__title,
	.login-page__editorial-title,
	.myaccount-header__title,
	.vl-title
) {
	font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
	line-height: 1;
}

body.vitta-loja :is(
	.checkout-step__title,
	.checkout-summary__title,
	.thankyou-section__title,
	.login-page__form-title,
	.myaccount-dash-recent__title
) {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

body.vitta-loja .checkout-step--locked .checkout-step__title {
	color: rgba(42, 14, 20, 0.38);
}

/* Rótulo curto: a mesma métrica da `.vh-eyebrow` da home. */
body.vitta-loja .checkout-step .form-row label,
body.vitta-loja .checkout-email-gate__label {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(42, 14, 20, 0.55);
}

/* ---------------------------------------------------------------------------
 * Campos
 * ------------------------------------------------------------------------- */

/* O campo era do MESMO tom do chão (os dois liam `--color-bg`), então só a borda
   dizia onde escrever. Um passo mais claro que o creme resolve sem inventar cor:
   é a regra da marca — blocos claros flutuando sobre a base. */
body.vitta-loja .checkout-step .form-row input[type="text"],
body.vitta-loja .checkout-step .form-row input[type="email"],
body.vitta-loja .checkout-step .form-row input[type="tel"],
body.vitta-loja .checkout-step .form-row input[type="number"],
body.vitta-loja .checkout-step .form-row input[type="password"],
body.vitta-loja .checkout-step .form-row select,
body.vitta-loja .checkout-step .form-row textarea,
body.vitta-loja .checkout-email-gate__input,
body.vitta-loja .checkout-coupon__input,
body.vitta-loja .cart-frete__input,
body.vitta-loja .cart-coupon__input {
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: var(--input-radius);
	color: var(--v-ink);
	font-family: var(--font-body);
}

body.vitta-loja .checkout-step .form-row input:focus,
body.vitta-loja .checkout-step .form-row select:focus,
body.vitta-loja .checkout-step .form-row textarea:focus,
body.vitta-loja .checkout-email-gate__input:focus,
body.vitta-loja .checkout-coupon__input:focus,
body.vitta-loja .cart-frete__input:focus,
body.vitta-loja .cart-coupon__input:focus {
	border-color: var(--v-wine);
	box-shadow: 0 0 0 3px rgba(130, 0, 34, 0.1);
}

body.vitta-loja .checkout-step .form-row input::placeholder,
body.vitta-loja .checkout-email-gate__input::placeholder {
	color: rgba(42, 14, 20, 0.34);
}

/* ---------------------------------------------------------------------------
 * O resumo do pedido vira um BLOCO DE CREME FLUTUANDO
 * ------------------------------------------------------------------------- */

/* É o movimento que mais carrega a identidade: o princípio da home é "base clara
   com blocos de cor flutuando", e o filete vertical de borda a borda que separava
   as colunas é o oposto disso. O filete sai, o resumo vira cartão. */
body.vitta-loja .checkout-layout__steps {
	border-right: none;
}

body.vitta-loja .checkout-summary {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	padding: 28px;
}

body.vitta-loja .checkout-summary__row--total {
	border-top: 1px solid var(--v-line);
	color: var(--v-ink);
}

body.vitta-loja .checkout-summary__img-wrap,
body.vitta-loja .thankyou-item__img-wrap {
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: 10px;
	overflow: hidden;
}

/* A pílula de quantidade em cima da miniatura: vinho cheio, creme por dentro. */
body.vitta-loja .checkout-summary__qty,
body.vitta-loja .thankyou-item__qty {
	background: var(--v-wine);
	color: var(--v-cream);
	border: none;
	border-radius: 999px;
}

/* Portão de e-mail com conta existente (v1.68.0): texto em tinta, links em
   vinho, o campo do código na mesma pele dos outros campos. */
body.vitta-loja .checkout-email-gate__conta-titulo {
	color: var(--v-ink);
}

body.vitta-loja .checkout-email-gate__conta-texto {
	color: rgba(42, 14, 20, 0.66);
}

body.vitta-loja .checkout-email-gate__conta-texto strong {
	color: var(--v-ink);
}

body.vitta-loja .checkout-email-gate__link {
	color: var(--v-wine);
}

/* Remover e quantidade no resumo (v1.67.0): a MESMA pele da gaveta do
   carrinho — × com alvo de toque e fundo vinho a 8% no hover, e a pílula
   − N + com os dois filetes internos como divisores. */
body.vitta-loja .checkout-summary__remove {
	width: 32px;
	height: 32px;
	margin: -7px -8px 0 0;
	border-radius: 999px;
	color: rgba(42, 14, 20, 0.45);
}

body.vitta-loja .checkout-summary__remove:hover {
	background: rgba(130, 0, 34, 0.08);
	color: var(--v-wine);
}

body.vitta-loja .checkout-summary__stepper {
	height: 32px;
	overflow: hidden;
	border-color: var(--v-line);
	border-radius: 999px;
	background: var(--v-field);
}

body.vitta-loja .checkout-summary__step {
	width: 32px;
	color: var(--v-wine);
}

body.vitta-loja .checkout-summary__step:hover:not(:disabled) {
	background: var(--v-cream);
}

body.vitta-loja .checkout-summary__count {
	min-width: 30px;
	border-color: var(--v-line);
	color: var(--v-ink);
}

body.vitta-loja .checkout-summary__cart-link,
body.vitta-loja .checkout-coupon__toggle,
body.vitta-loja .checkout-step__edit,
body.vitta-loja .cart-item__remove {
	color: var(--v-wine);
}

body.vitta-loja .checkout-coupon__tag {
	background: var(--v-wine);
	color: var(--v-cream);
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------
 * Entrega e pagamento — a opção escolhida acende em vinho
 * ------------------------------------------------------------------------- */

body.vitta-loja .checkout-shipping .woocommerce-shipping-methods li,
body.vitta-loja .checkout-step #payment .wc_payment_method {
	border-color: var(--v-line);
}

body.vitta-loja .checkout-step #payment .wc_payment_method.payment_method_selected > label,
body.vitta-loja .checkout-step #payment .payment_method_selected {
	color: var(--v-wine);
}

body.vitta-loja .checkout-step #payment .payment_box {
	background: var(--v-cream);
	border-radius: 12px;
}

body.vitta-loja input[type="radio"],
body.vitta-loja input[type="checkbox"] {
	accent-color: var(--v-wine);
}

/* ---------------------------------------------------------------------------
 * Pedido recebido
 * ------------------------------------------------------------------------- */

body.vitta-loja .thankyou-header {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	/* Sem esta folga o bloco nasce colado no cabeçalho e o canto arredondado de
	   cima fica sem para onde respirar — o oposto de "bloco flutuando". */
	margin-top: 32px;
}

/* O ✓ é um SVG de TRAÇO dentro de um wrapper `display: flex` que ocupa a largura
   inteira. Pintar o fundo do wrapper (primeira tentativa) desenhava uma FAIXA de
   vinho de ponta a ponta com a bolinha no meio. Aqui só a tinta do traço muda. */
body.vitta-loja .thankyou-header__icon {
	background: none;
	border: none;
	color: var(--v-wine);
}

/* `__inner` é só o invólucro `sticky` — não tem recheio próprio. Virando cartão,
   ele precisa do recheio, senão as linhas encostam na borda e o botão vaza pelo
   canto arredondado. */
body.vitta-loja .thankyou-totals__inner {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	padding: 24px;
}

/* O filete de topo das linhas duplicava a borda do cartão. */
body.vitta-loja .thankyou-totals__rows {
	border-top: none;
	margin-bottom: 20px;
}

body.vitta-loja .thankyou-meta,
body.vitta-loja .thankyou-section,
body.vitta-loja .thankyou-item,
body.vitta-loja .thankyou-totals__row,
body.vitta-loja .thankyou-meta__item {
	border-color: var(--v-line);
}

/* ---------------------------------------------------------------------------
 * Carrinho
 * ------------------------------------------------------------------------- */

body.vitta-loja .cart_totals {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
}

body.vitta-loja .cart-item__thumb {
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: 10px;
	overflow: hidden;
}

/* Miniatura de produto no fluxo (carrinho, resumo do checkout, pedido
   recebido): o mesmo fundo creme dos cartões da busca e da gaveta, com a imagem
   em `multiply` — o placeholder cinza do WooCommerce entra na temperatura da
   página enquanto a foto do produto não existe (v1.64.0). */
body.vitta-loja :is(.cart-item__thumb, .checkout-summary__img-wrap, .thankyou-item__img-wrap) {
	background: var(--v-cream);
}

body.vitta-loja :is(.cart-item__thumb, .checkout-summary__img-wrap, .thankyou-item__img-wrap) img {
	mix-blend-mode: multiply;
}

body.vitta-loja .cart-item__qty-wrap {
	border-color: var(--v-line);
	border-radius: 999px;
	overflow: hidden;
}

body.vitta-loja .cart-item__qty-btn:hover {
	background: var(--v-cream);
}

body.vitta-loja .cart-item__qty-input {
	background: transparent;
	border-left-color: var(--v-line);
	border-right-color: var(--v-line);
	color: var(--v-ink);
}

body.vitta-loja .cart-frete__none {
	color: rgba(42, 14, 20, 0.5);
}

/* O título do resumo do carrinho fica em RÓTULO, não em display: a string vem
   MAIÚSCULA do próprio HTML (`>RESUMO DO PEDIDO<`), então `text-transform` não
   desfaz — e Fraunces em caixa alta miúda é o pior dos dois mundos. Vira a mesma
   `.vh-eyebrow` da home, que é exatamente para isso. */
body.vitta-loja .cart-sum__title {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--v-wine);
}

/* `!important` COMBATE `!important`: a regra de origem
   (`.wc-proceed-to-checkout .checkout-button`, cart.css) marca fundo, cor, borda
   e caixa como importantes. Entre duas declarações importantes quem decide é a
   especificidade, e `body.vitta-loja ...` (0,3,1) vence (0,2,0). Sem isto o botão
   principal do carrinho ficava preto e retangular, sozinho na página inteira. */
body.vitta-loja .wc-proceed-to-checkout .checkout-button,
body.vitta-loja .wc-proceed-to-checkout a.button {
	background: var(--v-wine) !important;
	color: var(--v-cream) !important;
	border: 1px solid var(--v-wine) !important;
	border-radius: 999px !important;
	padding: 16px 24px !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
}

body.vitta-loja .wc-proceed-to-checkout .checkout-button:hover,
body.vitta-loja .wc-proceed-to-checkout a.button:hover {
	background: var(--v-ink) !important;
	border-color: var(--v-ink) !important;
	opacity: 1;
}

/* A seta (`.wc-forward::after`) caía SOZINHA na segunda linha a 390px: o botão
   era `block` e a quebra acontecia antes dela. Texto e seta numa linha só, e o
   recheio lateral encolhe no estreito para caber (medido). */
body.vitta-loja .wc-proceed-to-checkout .checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	body.vitta-loja .wc-proceed-to-checkout .checkout-button {
		padding: 16px 14px !important;
		font-size: 14px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Avisos
 * ------------------------------------------------------------------------- */

/* O erro FICA vermelho e o sucesso FICA verde: são sinal, não decoração, e não
   podem virar variação do vinho — a leitora precisa distinguir "deu certo" de
   "deu errado" sem ler. O que muda é só a temperatura, para não estalarem sobre
   o creme. */
body.vitta-loja .checkout-coupon__msg.is-success,
body.vitta-loja .checkout-summary__row--discount,
body.vitta-loja .noord-cart-notice--success {
	color: #2f6b4a;
}

body.vitta-loja .checkout-coupon__msg.is-error,
body.vitta-loja .noord-cart-notice--error {
	color: #b3271c;
}

/* NADA DE BORDA DE UM LADO SÓ (regra permanente do projeto, 04/09: *"marca
   registrada de site feito com IA"*). As tarjas de aviso do tema base tinham um
   filete de 2–3px na esquerda; aqui viram CAIXA — contorno fino nos quatro
   lados, na cor do sinal, sobre um véu da mesma cor. A cor continua dizendo
   "deu certo" / "deu errado"; o filete lateral é que sai. */
body.vitta-loja .noord-cart-notice {
	border: 1px solid var(--v-line);
	border-radius: 12px;
	background: var(--v-field);
}

body.vitta-loja .noord-cart-notice--success {
	border-color: rgba(47, 107, 74, 0.32);
	background: rgba(47, 107, 74, 0.06);
}

body.vitta-loja .noord-cart-notice--error {
	border-color: rgba(179, 39, 28, 0.3);
	background: rgba(179, 39, 28, 0.05);
}

body.vitta-loja .checkout-page .woocommerce-error {
	background: rgba(179, 39, 28, 0.05);
	border: 1px solid rgba(179, 39, 28, 0.3);
	color: #b3271c;
	border-radius: 12px;
}

body.vitta-loja .checkout-step .form-row.woocommerce-invalid input,
body.vitta-loja .checkout-step .form-row.woocommerce-invalid select {
	border-color: #b3271c;
}

/* A FRASE do erro embaixo do campo (v1.80.0) — antes o erro era só a borda
   vermelha. `.checkout-field-erro` é a do tema (checkout.js);
   `.checkout-inline-error-message` é a que o WooCommerce escreve quando o
   erro volta do servidor. As duas com a mesma cara. */
body.vitta-loja .checkout-page :is(.checkout-field-erro, .checkout-inline-error-message) {
	margin: 8px 0 0;
	padding: 0;
	font-family: var(--v-body);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: #b3271c;
	text-align: left;
}

body.vitta-loja .checkout-page .checkout-field-erro[hidden] {
	display: none;
}

/* A lista de erros do topo (WooCommerce): cada erro numa linha, e o link que
   ele põe em volta da frase leva ao campo — sem cara de link azul. */
body.vitta-loja .checkout-page .woocommerce-NoticeGroup-checkout {
	scroll-margin-top: 120px;
}

body.vitta-loja .checkout-page .woocommerce-error li + li {
	margin-top: 4px;
}

body.vitta-loja .checkout-page .woocommerce-error a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.vitta-loja .checkout-page .woocommerce-error:focus {
	outline: none;
}

body.vitta-loja .checkout-page .woocommerce-message,
body.vitta-loja .checkout-page .woocommerce-info {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	color: var(--v-ink);
	border-radius: 12px;
}

/* ===========================================================================
 * MINHA CONTA (v1.62.0)
 *
 * O Noord desenhou a conta como um APP de borda a borda: barra lateral colada na
 * esquerda da janela, filete vertical separando, item ativo marcado por uma
 * borda de 3px SÓ na esquerda. É o oposto da home ("blocos flutuando sobre base
 * clara, nenhuma seção sangra de borda a borda") e a borda lateral é proibida no
 * projeto. Aqui a conta vira página de conteúdo: container de 1280, a barra
 * lateral é um CARTÃO creme com os itens em pílula — a mesma pílula dos links da
 * navegação — e o conteúdo são cartões.
 *
 * Nenhum template foi tocado: todo o markup é o do tema; só a pinta muda.
 * =========================================================================== */

/* O `myaccount.css` zera o recheio do conteúdo com `!important` (1,1,1) para o
   app encostar no cabeçalho do Noord. Aqui o conteúdo precisa nascer ABAIXO da
   pílula fixa — e `!important` só perde para `!important` mais específico. */
body.vitta-loja.woocommerce-account #content.site-content {
	padding-top: var(--vl-top) !important;
}

body.vitta-loja .myaccount-page {
	min-height: 0;
}

body.vitta-loja .myaccount-layout {
	max-width: var(--vl-max);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 48px) var(--v-pad) 0;
	gap: clamp(20px, 2.6vw, 44px);
	min-height: 0;
	border-top: 0;
}

/* --- A barra lateral: um cartão creme ------------------------------------ */

body.vitta-loja .myaccount-sidebar {
	width: 292px;
	height: auto;
	top: calc(var(--vl-top) + 16px);
	overflow: visible;
	padding: 10px;
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: 24px;
}

body.vitta-loja .myaccount-nav__user {
	padding: 14px 12px 18px;
	border-bottom: 0;
}

body.vitta-loja .myaccount-nav__avatar-img {
	box-shadow: 0 0 0 2px var(--v-page), 0 0 0 3px var(--v-line-strong);
}

body.vitta-loja .myaccount-nav__greeting {
	font-family: var(--v-display);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--v-wine);
}

body.vitta-loja .myaccount-nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* A pílula dos links da navegação da home: sem filete, sem a borda lateral do
   ativo — o estado é a própria pílula, que no ativo PREENCHE em vinho. */
body.vitta-loja .myaccount-nav__link {
	padding: 12px 14px;
	border: 0;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--v-wine);
	transition: background-color 0.28s ease, color 0.28s ease;
}

body.vitta-loja .myaccount-nav__link:hover {
	background: rgba(130, 0, 34, 0.08);
	color: var(--v-wine);
}

body.vitta-loja .myaccount-nav__link.is-active {
	background: var(--v-wine);
	color: var(--v-cream);
	font-weight: 600;
}

body.vitta-loja .myaccount-nav__icon {
	color: rgba(130, 0, 34, 0.55);
}

body.vitta-loja .myaccount-nav__link:hover .myaccount-nav__icon {
	color: var(--v-wine);
}

body.vitta-loja .myaccount-nav__link.is-active .myaccount-nav__icon,
body.vitta-loja .myaccount-nav__link.is-active .myaccount-nav__arrow {
	color: var(--v-cream);
}

body.vitta-loja .myaccount-nav__arrow {
	color: var(--v-wine);
}

/* "Sair" desce e fica mais baixo de voz, separado por um filete HORIZONTAL
   (divisor pode; tarja lateral não). */
body.vitta-loja .myaccount-nav__item:last-child {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--v-line);
}

body.vitta-loja .myaccount-nav__link.is-logout {
	color: rgba(42, 14, 20, 0.6);
}

body.vitta-loja .myaccount-nav__link.is-logout .myaccount-nav__icon {
	color: inherit;
}

/* --- O conteúdo ----------------------------------------------------------- */

body.vitta-loja .myaccount-content {
	padding: 6px 0 0;
	align-items: stretch;
}

body.vitta-loja .myaccount-section {
	max-width: 900px;
}

body.vitta-loja .myaccount-header {
	margin-bottom: clamp(28px, 3vw, 40px);
	padding-bottom: 0;
	border-bottom: 0;
}

body.vitta-loja .myaccount-header__title {
	margin: 0 0 12px;
}

body.vitta-loja .myaccount-header__sub {
	font-size: 1rem;
	color: rgba(42, 14, 20, 0.62);
}

body.vitta-loja .myaccount-back-link {
	color: var(--v-wine);
	font-weight: 500;
}

/* Os três cartões do painel: blocos creme, o número em display. */
body.vitta-loja .myaccount-dash-card {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	color: var(--v-ink);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

body.vitta-loja .myaccount-dash-card:hover {
	background: var(--v-cream);
	border-color: var(--v-line-strong);
	transform: translateY(-2px);
}

body.vitta-loja .myaccount-dash-card__icon {
	color: rgba(130, 0, 34, 0.6);
}

body.vitta-loja .myaccount-dash-card__num {
	font-family: var(--v-display);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--v-wine);
}

body.vitta-loja :is(
	.myaccount-dash-card__label,
	.myaccount-orders__head,
	.myaccount-vo-section__title,
	.myaccount-address-card__title,
	.myaccount-form__section-title,
	.myaccount-order-meta__item dt,
	.myaccount-order-notes__title
) {
	font-family: var(--v-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v-wine);
}

body.vitta-loja .myaccount-dash-recent__header {
	border-bottom-color: var(--v-line);
}

body.vitta-loja .myaccount-dash-recent__all {
	color: var(--v-wine);
	font-weight: 500;
}

/* --- Pedidos -------------------------------------------------------------- */

body.vitta-loja .myaccount-orders {
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	overflow: hidden;
	background: var(--v-field);
}

body.vitta-loja .myaccount-orders__head {
	background: var(--v-cream);
	border-bottom-color: var(--v-line);
}

body.vitta-loja .myaccount-order-row {
	border-bottom-color: var(--v-line);
}

body.vitta-loja .myaccount-order-row:hover {
	background: rgba(246, 238, 227, 0.6);
}

body.vitta-loja .myaccount-order-row__link {
	color: var(--v-wine);
}

/* Situação do pedido: pílula, e cada cor continua dizendo o que diz — só a
   temperatura desce para o creme. Concluído deixa de ser cinza: é o estado bom
   final, e ganha o vinho da marca. */
body.vitta-loja .myaccount-order-status {
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 10.5px;
	letter-spacing: 0.08em;
}

body.vitta-loja .myaccount-order-status--processing {
	background: rgba(47, 107, 74, 0.1);
	color: #2f6b4a;
}

body.vitta-loja .myaccount-order-status--on-hold {
	background: rgba(166, 115, 14, 0.12);
	color: #7a5409;
}

body.vitta-loja .myaccount-order-status--completed {
	background: rgba(130, 0, 34, 0.08);
	color: var(--v-wine);
}

body.vitta-loja .myaccount-order-status--cancelled,
body.vitta-loja .myaccount-order-status--refunded,
body.vitta-loja .myaccount-order-status--failed {
	background: rgba(179, 39, 28, 0.08);
	color: #b3271c;
}

body.vitta-loja .myaccount-order-status--pending {
	background: rgba(42, 14, 20, 0.06);
	color: rgba(42, 14, 20, 0.66);
}

/* --- Downloads (14/09/2026) ----------------------------------------------
   A mesma pele da lista de pedidos: bloco de campo, cabeçalho creme em caixa
   alta miúda, uma linha por arquivo com filete horizontal. O botão "Baixar" é
   o primário da conta (vinho). No celular cada arquivo vira um cartão e cada
   dado leva o próprio rótulo, porque o cabeçalho some. */

body.vitta-loja .myaccount-downloads {
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	overflow: hidden;
	background: var(--v-field);
}

body.vitta-loja .myaccount-downloads__head,
body.vitta-loja .myaccount-download {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
}

body.vitta-loja .myaccount-downloads__head {
	padding: 12px 20px;
	background: var(--v-cream);
	border-bottom: 1px solid var(--v-line);
	font-family: var(--v-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v-wine);
}

body.vitta-loja .myaccount-downloads__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.vitta-loja .myaccount-download {
	padding: 16px 20px;
	border-bottom: 1px solid var(--v-line);
	transition: background-color 0.2s ease;
}

body.vitta-loja .myaccount-download:last-child {
	border-bottom: 0;
}

body.vitta-loja .myaccount-download:hover {
	background: rgba(246, 238, 227, 0.6);
}

body.vitta-loja .myaccount-download__produto {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

body.vitta-loja .myaccount-download__capa {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--v-cream);
	color: rgba(130, 0, 34, 0.6);
}

body.vitta-loja .myaccount-download__capa img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

body.vitta-loja .myaccount-download__nomes {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

body.vitta-loja .myaccount-download__nome {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v-wine);
	text-decoration: none;
}

body.vitta-loja a.myaccount-download__nome:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.vitta-loja .myaccount-download__arquivo {
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(42, 14, 20, 0.6);
	overflow-wrap: anywhere;
}

body.vitta-loja .myaccount-download__dado {
	margin: 0;
	font-size: 14px;
	color: var(--v-ink);
}

/* O rótulo por dado só existe no celular (no largo quem rotula é o cabeçalho). */
body.vitta-loja .myaccount-download__rot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.vitta-loja .myaccount-download__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 18px;
	font-size: 14px !important;
	text-decoration: none;
	white-space: nowrap;
}

body.vitta-loja .myaccount-download__btn svg {
	flex: none;
	width: 16px;
	height: 16px;
}

@media (max-width: 768px) {
	body.vitta-loja .myaccount-downloads__head {
		display: none;
	}

	/* Cartão: produto na largura toda, os dois dados lado a lado, botão cheio. */
	body.vitta-loja .myaccount-download {
		grid-template-columns: 1fr 1fr;
		gap: 14px 16px;
		padding: 18px 16px;
	}

	body.vitta-loja .myaccount-download__produto,
	body.vitta-loja .myaccount-download__acao {
		grid-column: 1 / -1;
	}

	body.vitta-loja .myaccount-download__dado {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	body.vitta-loja .myaccount-download__rot {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--v-wine);
	}

	body.vitta-loja .myaccount-download__btn {
		width: 100%;
		min-height: 44px;
	}
}

/* --- Ver pedido: dois blocos flutuando, sem filete entre colunas ---------- */

body.vitta-loja .myaccount-view-order {
	gap: clamp(16px, 2vw, 24px);
	border: 0;
	align-items: start;
}

body.vitta-loja .myaccount-vo-details {
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
}

body.vitta-loja .myaccount-vo-section {
	border-bottom-color: var(--v-line);
}

body.vitta-loja .myaccount-vo-totals {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
	padding: 28px 24px;
}

body.vitta-loja .myaccount-vo-totals__inner {
	top: calc(var(--vl-top) + 24px);
}

body.vitta-loja .myaccount-vo-totals__rows,
body.vitta-loja .myaccount-vo-row {
	border-color: var(--v-line);
}

body.vitta-loja .myaccount-vo-row--discount {
	color: #2f6b4a;
}

body.vitta-loja .myaccount-vo-row--total {
	color: var(--v-ink);
}

body.vitta-loja .myaccount-vo-item__img {
	border-radius: 10px;
	background: var(--v-cream);
}

body.vitta-loja .myaccount-vo-item__qty {
	background: var(--v-wine);
	color: var(--v-cream);
}

body.vitta-loja .myaccount-order-notes {
	background: var(--v-cream);
	border-color: var(--v-line);
	border-radius: var(--v-r-card);
}

/* --- Endereços ------------------------------------------------------------ */

body.vitta-loja .myaccount-address-card {
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
}

body.vitta-loja .myaccount-address-card__header {
	border-bottom-color: var(--v-line);
}

body.vitta-loja .myaccount-address-card__edit {
	color: var(--v-wine);
	font-weight: 500;
}

/* --- Formulários (dados da conta, endereço, senha perdida) --------------- */

body.vitta-loja .myaccount-form__section {
	border-bottom-color: var(--v-line);
}

body.vitta-loja :is(.myaccount-form, .myaccount-address-fields, .woocommerce-ResetPassword) label {
	font-family: var(--v-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(42, 14, 20, 0.58);
}

/* Os campos: um passo mais claro que o creme, raio 12, anel vinho no foco — o
   mesmo campo do checkout. Três fontes de campo diferentes no tema (formulário
   da conta, campos de endereço do WooCommerce, e o login), uma pinta só. */
body.vitta-loja :is(
	.myaccount-form .input-text,
	.myaccount-form .woocommerce-Input,
	.myaccount-address-fields .form-row input.input-text,
	.myaccount-address-fields .form-row select,
	.woocommerce-ResetPassword .input-text,
	.login-form__input
) {
	min-height: var(--vl-field-h);
	background: var(--v-field) !important;
	border: 1px solid var(--v-line) !important;
	border-radius: var(--input-radius) !important;
	color: var(--v-ink) !important;
	font-family: var(--v-body) !important;
	font-size: 0.9375rem !important;
	box-shadow: none !important;
}

body.vitta-loja :is(
	.myaccount-form .input-text,
	.myaccount-form .woocommerce-Input,
	.myaccount-address-fields .form-row input.input-text,
	.myaccount-address-fields .form-row select,
	.woocommerce-ResetPassword .input-text,
	.login-form__input
):focus {
	border-color: var(--v-wine) !important;
	box-shadow: 0 0 0 3px rgba(130, 0, 34, 0.1) !important;
	outline: none;
}

body.vitta-loja .login-form__input::placeholder,
body.vitta-loja .myaccount-form .input-text::placeholder {
	color: rgba(42, 14, 20, 0.34);
}

/* --- Botões da conta: os três tipos da home, nenhum com contorno --------- */

/* O "secundário com contorno" não existe no sistema da home (só três tipos de
   botão). O botão neutro vira pílula creme; o principal, pílula vinho com o
   alto-relevo do site. */
body.vitta-loja .myaccount-btn {
	min-height: 44px;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	font-weight: 600;
	letter-spacing: -0.005em;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

body.vitta-loja .myaccount-btn:hover {
	background: #efe2d0;
	color: var(--v-wine);
	border: 0;
}

body.vitta-loja .myaccount-btn--sm {
	min-height: 36px;
	padding: 8px 16px;
	font-size: 12.5px;
}

body.vitta-loja :is(
	.myaccount-btn--primary,
	.myaccount-form button[type="submit"],
	.woocommerce-ResetPassword button[type="submit"],
	.login-form__submit
) {
	background: var(--v-wine) !important;
	color: var(--v-cream) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--v-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	opacity: 1 !important;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(130, 0, 34, .12);
	transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

body.vitta-loja :is(
	.myaccount-btn--primary,
	.myaccount-form button[type="submit"],
	.woocommerce-ResetPassword button[type="submit"],
	.login-form__submit
):hover {
	background: var(--v-ink) !important;
}

body.vitta-loja :is(
	.myaccount-btn--primary,
	.myaccount-form button[type="submit"],
	.woocommerce-ResetPassword button[type="submit"],
	.login-form__submit
):active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(130, 0, 34, .12);
}

body.vitta-loja .myaccount-empty {
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
}

body.vitta-loja .myaccount-empty__icon {
	color: rgba(130, 0, 34, 0.55);
}

/* Avisos da conta: caixa inteira, nunca tarja lateral. */
body.vitta-loja :is(.myaccount-content, .login-page) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	padding: 14px 18px;
	border: 1px solid var(--v-line);
	border-radius: 12px;
	background: var(--v-cream);
	color: var(--v-ink);
}

body.vitta-loja :is(.myaccount-content, .login-page, .woocommerce) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) a {
	color: var(--v-wine);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(130, 0, 34, 0.35);
	text-underline-offset: 3px;
}

body.vitta-loja :is(.myaccount-content, .login-page) .woocommerce-error {
	border-color: rgba(179, 39, 28, 0.3);
	background: rgba(179, 39, 28, 0.05);
	color: #b3271c;
}

/* --- O seletor de estado (select2 do WooCommerce) ------------------------- */

/* O WooCommerce troca o `<select>` do estado por um widget select2, que não
   herda nada: saía com a borda cinza de 1px e canto reto no meio dos campos
   arredondados. Mesma pinta do campo, e a lista que abre também. A lista é
   anexada ao FIM do body, fora do formulário — por isso os seletores dela não
   podem depender do form. */
body.vitta-loja .myaccount-address-fields .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: var(--vl-field-h);
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: var(--input-radius);
}

body.vitta-loja .myaccount-address-fields .select2-container .select2-selection__rendered {
	padding-left: 16px;
	padding-right: 36px;
	color: var(--v-ink);
	font-family: var(--v-body);
	font-size: 0.9375rem;
	line-height: 1.4;
}

body.vitta-loja .myaccount-address-fields .select2-container .select2-selection__arrow {
	top: 0;
	right: 10px;
	height: 100%;
}

body.vitta-loja .myaccount-address-fields .select2-container--open .select2-selection--single,
body.vitta-loja .myaccount-address-fields .select2-container--focus .select2-selection--single {
	border-color: var(--v-wine);
	box-shadow: 0 0 0 3px rgba(130, 0, 34, 0.1);
}

body.vitta-loja .select2-dropdown {
	overflow: hidden;
	background: var(--v-field);
	border: 1px solid var(--v-line-strong);
	border-radius: 12px;
	font-family: var(--v-body);
	color: var(--v-ink);
	box-shadow: 0 18px 40px -16px rgba(42, 14, 20, 0.28);
}

body.vitta-loja .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--v-line);
	border-radius: 8px;
	background: var(--v-page);
}

body.vitta-loja .select2-results__option--highlighted[aria-selected],
body.vitta-loja .select2-results__option--highlighted[data-selected] {
	background: var(--v-wine);
	color: var(--v-cream);
}

body.vitta-loja .select2-results__option[aria-selected="true"],
body.vitta-loja .select2-results__option[data-selected="true"] {
	background: var(--v-cream);
	color: var(--v-wine);
}

/* O país é fixo (Brasil) e o campo é OCULTO — mas o WooCommerce imprime o
   rótulo mesmo assim, e sobrava "PAÍS (OPCIONAL)" solto sobre nada. */
body.vitta-loja :is(#billing_country_field, #shipping_country_field):has(input[type="hidden"]) {
	display: none;
}

/* --- Senha perdida / nova senha ------------------------------------------ */

/* As telas vêm do WooCommerce sem moldura nenhuma, e o `myaccount.css` ainda
   zera o container com `!important` — o parágrafo encostava na borda esquerda
   da janela. Aqui viram uma coluna estreita e centrada, como a porta de e-mail
   do checkout. */
body.vitta-loja:is(.woocommerce-lost-password, .woocommerce-reset-password) .woocommerce {
	max-width: calc(460px + var(--v-pad) * 2) !important;
	margin: 0 auto !important;
	padding: clamp(32px, 5vw, 72px) var(--v-pad) 0 !important;
}

body.vitta-loja .vl-title--form {
	margin: 0 0 16px;
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
}

body.vitta-loja .woocommerce-ResetPassword > p:first-child,
body.vitta-loja.woocommerce-lost-password .woocommerce > p {
	margin: 0 0 28px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(42, 14, 20, 0.66);
}

body.vitta-loja .woocommerce-ResetPassword .form-row {
	float: none;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
}

body.vitta-loja .woocommerce-ResetPassword label {
	display: block;
	margin-bottom: 8px;
}

body.vitta-loja .woocommerce-ResetPassword .input-text {
	width: 100%;
	padding: 0 16px;
}

body.vitta-loja .woocommerce-ResetPassword button[type="submit"] {
	width: 100%;
	min-height: 52px;
	margin-top: 6px;
}

/* --- Celular: a barra lateral vira uma fita de pílulas -------------------- */

@media (max-width: 900px) {
	body.vitta-loja .myaccount-layout {
		padding-top: 16px;
	}

	body.vitta-loja .myaccount-sidebar {
		width: 100%;
		border-bottom: 1px solid var(--v-line);
		padding: 8px;
	}

	body.vitta-loja .myaccount-nav__user {
		padding: 10px 10px 12px;
	}

	/* Seis itens empilhados empurrariam o conteúdo para fora da tela: a lista
	   corre na horizontal, e a máscara à direita diz que ela continua. */
	body.vitta-loja .myaccount-nav__list {
		flex-direction: row;
		/* 4px entre as pílulas (era 2px, herdado da coluna do desktop): colado, o
		   ativo em vinho parecia montar em cima do vizinho. */
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
		mask-image: linear-gradient(90deg, #000 86%, transparent);
	}

	body.vitta-loja .myaccount-nav__list::-webkit-scrollbar {
		display: none;
	}

	/* 13/09/2026 — AS PÍLULAS SE SOBREPUNHAM (print dele). Na fita horizontal os
	   itens tinham `flex-shrink: 1` (padrão) e o texto é `nowrap`: medido a 390px,
	   cada item encolhia 4px abaixo do próprio conteúdo e a pílula ativa cobria o
	   fim da anterior ("Início" sob "Meus pedidos"). Numa fita que ROLA, item
	   nenhum encolhe — quem absorve a sobra é a rolagem. */
	body.vitta-loja .myaccount-nav__item {
		flex: none;
	}

	body.vitta-loja .myaccount-nav__link {
		white-space: nowrap;
		padding: 10px 14px;
	}

	body.vitta-loja .myaccount-nav__arrow {
		display: none;
	}

	body.vitta-loja .myaccount-nav__item:last-child {
		margin: 0;
		padding: 0 24px 0 0;
		border-top: 0;
	}

	body.vitta-loja .myaccount-content {
		padding: 28px 0 0;
	}
}

/* ===========================================================================
 * ENTRAR / CRIAR CONTA (v1.62.0)
 *
 * Dois painéis colados, com filete vertical de borda a borda entre eles, em 100%
 * da altura da janela — era a tela de login de um app. Aqui: o painel da
 * esquerda vira um BLOCO creme flutuando (com o padrão da marca, como a banda
 * do rodapé), o formulário fica sobre a base clara, e o filete sai.
 * =========================================================================== */

body.vitta-loja .login-page {
	max-width: var(--vl-max);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 48px) var(--v-pad) 0;
	min-height: 0;
	gap: clamp(16px, 3vw, 56px);
	align-items: stretch;
}

body.vitta-loja .login-page__panel--editorial {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(40px, 5vw, 72px);
	background: var(--v-cream);
	border: 0;
	border-radius: var(--v-r-block);
	justify-content: flex-start;
}

/* O padrão da marca, a mesma máscara do rodapé — mais apagado, porque aqui ele
   fica atrás de texto corrido. */
body.vitta-loja .login-page__panel--editorial::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--v-blush);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: 520px auto;
	mask-size: 520px auto;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.45;
}

body.vitta-loja .login-page__editorial-inner {
	position: relative;
	max-width: 440px;
	padding: 4px;
}

body.vitta-loja .login-page__editorial-overline {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: rgba(130, 0, 34, 0.55);
	margin: 0 0 16px;
}

body.vitta-loja .login-page__editorial-title {
	margin: 0 0 20px;
}

body.vitta-loja .login-page__editorial-body {
	font-size: 1rem;
	color: rgba(42, 14, 20, 0.66);
}

body.vitta-loja .login-page__editorial-perks li {
	font-size: 0.9375rem;
	color: var(--v-ink);
}

body.vitta-loja .login-page__editorial-perks li::before {
	background: var(--v-wine);
	opacity: 0.45;
}

body.vitta-loja .login-page__panel--forms {
	padding: clamp(32px, 4vw, 64px) clamp(8px, 3vw, 48px);
	background: transparent;
}

body.vitta-loja .login-page__forms-inner {
	max-width: 400px;
}

body.vitta-loja .login-page__form-title {
	margin: 0 0 28px;
}

body.vitta-loja .login-form__label {
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: rgba(42, 14, 20, 0.58);
}

body.vitta-loja :is(.pwl__hint, .login-form__notice, .login-form__privacy, .pwl__sent-info) {
	color: rgba(42, 14, 20, 0.6);
}

body.vitta-loja .pwl__sent-info strong {
	color: var(--v-ink);
}

body.vitta-loja .login-form__submit {
	height: 52px;
}

body.vitta-loja :is(.pwl__link, .login-pw-back, .login-form__forgot, .login-form__privacy a) {
	color: var(--v-wine);
}

body.vitta-loja .pwl__msg--error {
	color: #b3271c;
}

body.vitta-loja .pwl__divider {
	color: rgba(42, 14, 20, 0.45);
}

body.vitta-loja .pwl__divider::before,
body.vitta-loja .pwl__divider::after {
	background: var(--v-line);
}

/* "Prefiro entrar com senha": era o secundário com contorno. Vira a pílula
   creme — o botão neutro da home. */
body.vitta-loja .login-pw-toggle {
	height: 52px;
	border: 0;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	transition: background-color 0.2s ease;
}

body.vitta-loja .login-pw-toggle:hover {
	background: #efe2d0;
	color: var(--v-wine);
}

body.vitta-loja .login-form__remember input[type="checkbox"] {
	border-color: var(--v-line-strong);
	border-radius: 5px;
	background: var(--v-field);
}

body.vitta-loja .login-form__remember input[type="checkbox"]:checked {
	background: var(--v-wine);
	border-color: var(--v-wine);
}

body.vitta-loja .login-form__explainer {
	background: var(--v-cream);
	border-radius: 12px;
}

/* As abas Entrar / Criar conta: pílula segmentada, sem o sublinhado de 2px. */
body.vitta-loja .login-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--v-cream);
}

body.vitta-loja .login-tab {
	margin: 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	color: var(--v-wine);
}

body.vitta-loja .login-tab.is-active {
	background: var(--v-wine);
	color: var(--v-cream);
}

@media (max-width: 768px) {
	body.vitta-loja .login-page {
		padding-top: 16px;
	}

	body.vitta-loja .login-page__panel--editorial {
		padding: 32px 26px;
		border-bottom: 0;
	}

	body.vitta-loja .login-page__panel--forms {
		padding: 32px 4px 8px;
	}
}

/* ===========================================================================
 * A GAVETA DO CARRINHO (v1.64.0)
 *
 * A do Noord era uma folha branca colada na borda direita, com cabeçalho em
 * caixa alta espaçada, botões pretos retos e um par "DESCONTO | GIFT CARD 🎁"
 * separado por filete vertical. Aqui ela vira um BLOCO flutuando — afastada
 * das bordas, cantos de 24, sobre a base clara da marca —, com o título da
 * home e as pílulas do site. No celular ela ocupa a tela, como antes.
 *
 * O botão "GIFT CARD" SAI: não há cartão-presente nesta loja e ele não tem
 * nenhuma ação no `side-cart.js` — era um botão morto. "Desconto" fica: abre o
 * campo de cupom.
 * =========================================================================== */

body.vitta-loja .side-cart-overlay {
	background: rgba(42, 14, 20, 0.32);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

body.vitta-loja .side-cart {
	top: 12px;
	right: 12px;
	width: min(420px, calc(100vw - 24px));
	height: calc(100dvh - 24px);
	overflow: hidden;
	background: var(--v-page);
	border: 1px solid var(--v-line);
	border-radius: 24px;
	box-shadow: 0 30px 60px -24px rgba(42, 14, 20, 0.4);
	color: var(--v-ink);
	font-family: var(--v-body);
	/* Fechada, ela sai inteira pela direita — inclusive a folga de 12px. */
	transform: translateX(calc(100% + 24px));
}

body.vitta-loja .side-cart.is-open {
	transform: translateX(0);
}

body.vitta-loja .side-cart__header {
	height: 68px;
	padding: 0 14px 0 24px;
	border-bottom-color: var(--v-line);
}

body.vitta-loja .side-cart__title {
	font-family: var(--v-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
}

body.vitta-loja .side-cart__count {
	font-family: var(--v-body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	color: rgba(130, 0, 34, 0.55);
}

/* Fechar: o mesmo círculo das ações da pílula, e alvo de 44px (tinha 36). */
body.vitta-loja .side-cart__close {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	color: var(--v-wine);
	transition: background-color 0.28s ease;
}

body.vitta-loja .side-cart__close:hover {
	background: rgba(130, 0, 34, 0.09);
	opacity: 1;
}

body.vitta-loja .side-cart__item {
	padding: 20px 24px;
	border-bottom-color: var(--v-line);
}

body.vitta-loja .side-cart__item-image {
	width: 76px;
	height: 92px;
	background: var(--v-cream);
	border-radius: 12px;
}

body.vitta-loja .side-cart__item-image img {
	mix-blend-mode: multiply;
}

body.vitta-loja .side-cart__item-name {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--v-ink);
}

/* Remover: alvo de toque de verdade (era um "×" de 16px sem recheio). */
body.vitta-loja .side-cart__item-remove {
	width: 32px;
	height: 32px;
	margin: -6px -8px 0 0;
	border-radius: 999px;
	font-size: 18px;
	color: rgba(42, 14, 20, 0.45);
}

body.vitta-loja .side-cart__item-remove:hover {
	background: rgba(130, 0, 34, 0.08);
	color: var(--v-wine);
}

/* A quantidade: a pílula do carrinho da página. Os dois filetes internos são
   DIVISORES entre − / valor / +, não tarja lateral. */
body.vitta-loja .side-cart__qty {
	height: 34px;
	overflow: hidden;
	border-color: var(--v-line);
	border-radius: 999px;
	background: var(--v-field);
}

body.vitta-loja .side-cart__qty-btn {
	color: var(--v-wine);
}

body.vitta-loja .side-cart__qty-btn:hover:not(:disabled) {
	background: var(--v-cream);
}

body.vitta-loja .side-cart__qty-value {
	border-color: var(--v-line);
	color: var(--v-ink);
}

body.vitta-loja .side-cart__item-price {
	color: var(--v-ink);
}

body.vitta-loja .side-cart__empty {
	gap: 4px;
	color: rgba(42, 14, 20, 0.62);
	font-size: 0.9375rem;
}

body.vitta-loja .side-cart__upsell {
	padding: 18px 24px;
	border-bottom-color: var(--v-line);
}

body.vitta-loja .side-cart__upsell-title {
	letter-spacing: 0.14em;
	color: var(--v-wine);
}

body.vitta-loja .side-cart__upsell-image {
	background: var(--v-cream);
	border-radius: 12px;
}

body.vitta-loja .side-cart__upsell-name {
	color: var(--v-ink);
}

body.vitta-loja :is(.side-cart__upsell-btn, .side-cart__coupon-apply) {
	border: 0;
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-cream);
	letter-spacing: 0.06em;
}

body.vitta-loja :is(.side-cart__upsell-btn, .side-cart__coupon-apply):hover {
	background: var(--v-ink);
	color: var(--v-cream);
}

body.vitta-loja .side-cart__upsell-btn--options {
	background: var(--v-cream);
	color: var(--v-wine);
}

body.vitta-loja .side-cart__footer {
	background: var(--v-page);
	border-top-color: var(--v-line);
}

/* O par de ações vira UMA pílula creme, sem o filete vertical do meio. */
body.vitta-loja .side-cart__action-btn--gift {
	display: none;
}

body.vitta-loja .side-cart__actions {
	display: flex;
	padding: 14px 24px 0;
	border-bottom: 0;
}

body.vitta-loja .side-cart__action-btn {
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
}

body.vitta-loja .side-cart__action-btn:first-child {
	border-right: 0;
}

body.vitta-loja .side-cart__action-btn:hover {
	background: #efe2d0;
}

/* "DESCONTO" vem em caixa alta do próprio template; aqui ele fala baixo. */
body.vitta-loja .side-cart__action-btn span:last-child {
	display: inline-block;
	text-transform: lowercase;
}

body.vitta-loja .side-cart__action-btn span:last-child::first-letter {
	text-transform: uppercase;
}

body.vitta-loja .side-cart__coupon-wrap {
	padding: 12px 24px 0;
	border-bottom: 0;
}

body.vitta-loja .side-cart__coupon-input {
	height: 42px;
	padding: 0 16px;
	background: var(--v-field);
	border-color: var(--v-line);
	border-radius: 999px;
	color: var(--v-ink);
}

body.vitta-loja .side-cart__coupon-input:focus {
	border-color: var(--v-wine);
	box-shadow: 0 0 0 3px rgba(130, 0, 34, 0.1);
}

body.vitta-loja .side-cart__coupon-apply {
	height: 42px;
	padding: 0 18px;
}

body.vitta-loja .side-cart__totals {
	padding: 16px 24px 14px;
}

body.vitta-loja .side-cart__total-row {
	font-size: 1rem;
	font-weight: 600;
	color: var(--v-ink);
}

body.vitta-loja .side-cart__shipping-row {
	color: rgba(42, 14, 20, 0.6);
}

body.vitta-loja .side-cart__shipping-row.is-free {
	color: #2f6b4a;
}

/* O botão principal da gaveta: a pílula vinho do checkout, caixa natural. O
   rótulo padrão vinha em CAIXA ALTA do próprio PHP ("FINALIZAR COMPRA"); ele é
   normalizado na origem, em `noord_vitta_rotulo_finalizar()`. */
body.vitta-loja .side-cart__checkout-btn,
body.vitta-loja .side-cart__continue-btn {
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-cream);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

body.vitta-loja .side-cart__checkout-btn {
	width: calc(100% - 48px);
	margin: 0 24px;
}

body.vitta-loja .side-cart__checkout-btn:hover,
body.vitta-loja .side-cart__continue-btn:hover {
	background: var(--v-ink);
	color: var(--v-cream);
}

body.vitta-loja .side-cart__continue-btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 12px 26px;
}

body.vitta-loja .side-cart__view-cart {
	padding: 14px 24px 18px;
	color: var(--v-wine);
	font-weight: 500;
	text-decoration-color: rgba(130, 0, 34, 0.35);
}

body.vitta-loja .side-cart__view-cart:hover {
	color: var(--v-wine);
	text-decoration-color: var(--v-wine);
}

/* Celular: a tela inteira, como no Noord — gaveta flutuando num telefone
   seria uma gaveta mais estreita e só. */
@media (max-width: 480px) {
	body.vitta-loja .side-cart {
		top: 0;
		right: 0;
		width: 100vw;
		height: 100dvh;
		border: 0;
		border-radius: 0;
		transform: translateX(100%);
	}

	body.vitta-loja .side-cart.is-open {
		transform: translateX(0);
	}
}

/* ---------------------------------------------------------------------------
 * Carrinho vazio (v1.63.0) — bloco creme, título da home, pílula vinho
 * ------------------------------------------------------------------------- */

body.vitta-loja .cart-empty-page {
	max-width: var(--vl-max);
	padding: clamp(32px, 5vw, 72px) var(--v-pad) 0;
}

body.vitta-loja .cart-empty__inner {
	max-width: 560px;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-block);
}

body.vitta-loja .cart-empty__title {
	margin: 0 0 28px;
	font-family: var(--v-display);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
}

body.vitta-loja .cart-empty__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 13px 30px;
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-cream) !important;
	font-family: var(--v-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

body.vitta-loja .cart-empty__btn:hover {
	background: var(--v-ink);
	opacity: 1;
}

/* ===========================================================================
 * BUSCA (v1.63.0)
 *
 * A busca era a vitrine de moda do Noord: barra fixa de borda a borda com
 * alternador de 2/3/4 colunas, painel de filtro por preço/atributo e de
 * ordenação — para uma loja de DOIS produtos. Aqui ela vira uma página de
 * conteúdo: o resultado em título, os cartões de produto na identidade, e o
 * ferramental de catálogo fora (as funções continuam no template).
 * =========================================================================== */

/* O `shop-archive.css` zera o recheio do conteúdo com `!important` para a
   vitrine encostar no cabeçalho do Noord. */
body.vitta-loja.shop-archive-page #content.site-content {
	padding-top: var(--vl-top) !important;
}

body.vitta-loja .shop-archive {
	max-width: var(--vl-max);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 48px) var(--v-pad) 0;
}

body.vitta-loja .shop-archive__sticky-bar {
	position: static;
	background: transparent;
}

body.vitta-loja .shop-archive__bar {
	height: auto;
	padding: 0;
	border-bottom: 0;
	background: transparent;
}

/* O resultado vira o TÍTULO da página, na língua dos títulos da home. É um
   `<span>` no template — só a pinta muda. */
body.vitta-loja .search-results__heading {
	display: block;
	font-family: var(--v-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
	white-space: normal;
}

/* Colunas, filtro e ordenação: ferramenta de catálogo grande. Com dois
   produtos não há o que filtrar. */
body.vitta-loja .shop-archive__actions,
body.vitta-loja .shop-archive__panel {
	display: none !important;
}

body.vitta-loja .shop-archive__loop {
	padding: clamp(24px, 3vw, 40px) 0 0;
}

body.vitta-loja .shop-archive__loop ul.products {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
	gap: clamp(16px, 2vw, 28px) !important;
}

body.vitta-loja .shop-archive__loop .search-no-results {
	min-height: 0;
	margin-top: 8px;
	padding: clamp(40px, 5vw, 64px) 24px;
	background: var(--v-cream);
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-card);
}

body.vitta-loja .search-no-results__message {
	color: rgba(42, 14, 20, 0.66);
}

/* O "ver todos os produtos" era o secundário com contorno do Noord. */
body.vitta-loja .search-no-results__link {
	padding: 13px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-cream);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(130, 0, 34, .12);
}

/* ---------------------------------------------------------------------------
 * O CARTÃO DE PRODUTO da loja (busca e "talvez você goste" da 404)
 *
 * O do Noord era de moda: foto 5:8 colada na vizinha (gap de 1px), nome em
 * caixa alta espaçada, preço em cinza, botão escondido até o hover. Aqui é o
 * cartão da home — mídia num bloco creme arredondado, nome em display caixa
 * baixa, preço em tinta, e a ação à vista (não existe hover no toque).
 * ------------------------------------------------------------------------- */

body.vitta-loja ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: transparent;
	text-align: left;
}

body.vitta-loja ul.products li.product .noord-product-image-wrapper {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin: 0 0 16px;
	background: var(--v-cream);
	border-radius: var(--v-r-card);
}

body.vitta-loja ul.products li.product .noord-product-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	/* O placeholder do WooCommerce é cinza: sobre o creme, `multiply` o deixa
	   na temperatura da página enquanto a foto do produto não existe. */
	mix-blend-mode: multiply;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.vitta-loja ul.products li.product:hover .noord-product-image-wrapper img {
	transform: scale(1.03);
}

body.vitta-loja ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 6px;
	padding: 0 !important;
	font-family: var(--v-display) !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	line-height: 1.1;
	letter-spacing: -0.02em !important;
	text-transform: lowercase !important;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine) !important;
}

body.vitta-loja ul.products li.product .price {
	padding: 0 !important;
	margin: 0 0 14px;
	font-family: var(--v-body);
	font-size: 1rem !important;
	font-weight: 500;
	color: var(--v-ink) !important;
}

/* A ação fica À VISTA. O Noord escondia o botão até o hover do cartão — no
   celular isso é um botão que não existe. */
body.vitta-loja ul.products li.product > .button,
body.vitta-loja ul.products li.product > a.add_to_cart_button {
	position: static;
	display: inline-flex !important;
	align-items: center;
	align-self: flex-start;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	min-height: 44px;
	margin: auto 0 0;
	padding: 11px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--v-wine) !important;
	color: var(--v-cream) !important;
	font-family: var(--v-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(130, 0, 34, .12);
}

body.vitta-loja ul.products li.product > .button:hover {
	background: var(--v-ink) !important;
}

body.vitta-loja ul.products li.product .noord-card-hover-panel {
	display: none !important;
}

body.vitta-loja ul.products li.product .added_to_cart {
	margin-top: 8px;
	color: var(--v-wine);
	font-weight: 600;
}

/* ===========================================================================
 * 404 (v1.63.0)
 * =========================================================================== */

body.vitta-loja .noord-404 {
	background: transparent;
	color: var(--v-ink);
}

body.vitta-loja .noord-404__hero {
	max-width: var(--vl-max);
	padding: clamp(40px, 6vw, 88px) var(--v-pad) clamp(40px, 5vw, 72px);
}

body.vitta-loja .noord-404__eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: rgba(130, 0, 34, 0.55);
	opacity: 1;
}

/* O "404" é o único algarismo gigante da página: display vinho, com os eixos
   SOFT/WONK do logo. */
body.vitta-loja .noord-404__code {
	font-family: var(--v-display);
	font-weight: 700;
	font-size: clamp(96px, 16vw, 208px);
	line-height: 0.86;
	letter-spacing: -0.04em;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
}

body.vitta-loja .noord-404__title {
	margin-top: 20px;
	font-family: var(--v-display);
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
}

body.vitta-loja .noord-404__text {
	font-size: 1rem;
	color: rgba(42, 14, 20, 0.66);
	opacity: 1;
}

/* A busca: um campo-pílula com o botão dentro, como uma peça só. */
body.vitta-loja .noord-404__search-field {
	display: flex;
	gap: 6px;
	padding: 6px;
	background: var(--v-field);
	border: 1px solid var(--v-line);
	border-radius: 999px;
}

body.vitta-loja .noord-404__search-field:focus-within {
	border-color: var(--v-wine);
	box-shadow: 0 0 0 3px rgba(130, 0, 34, 0.1);
}

body.vitta-loja .noord-404__search-input {
	flex: 1;
	min-width: 0;
	padding: 0 16px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	color: var(--v-ink);
	font-family: var(--v-body);
	font-size: 0.9375rem;
}

body.vitta-loja .noord-404__search-btn {
	min-height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-cream);
	font-family: var(--v-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(130, 0, 34, .12);
}

body.vitta-loja .noord-404__search-btn:hover {
	background: var(--v-ink);
	color: var(--v-cream);
}

/* "Voltar ao início" é o neutro: pílula creme (a home não tem contorno). */
body.vitta-loja .noord-404__btn {
	min-height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	font-family: var(--v-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

body.vitta-loja .noord-404__btn:hover {
	background: #efe2d0;
	color: var(--v-wine);
}

body.vitta-loja .noord-404__suggestions {
	max-width: var(--vl-max);
	padding: 0 var(--v-pad);
}

body.vitta-loja .noord-404__suggestions-title {
	font-family: var(--v-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: rgba(130, 0, 34, 0.55);
	opacity: 1;
}

body.vitta-loja .noord-404__suggestions ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 320px));
	justify-content: center;
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
}

body.vitta-loja .noord-404__suggestions ul.products::before,
body.vitta-loja .noord-404__suggestions ul.products::after {
	content: none;
}

body.vitta-loja .noord-404__suggestions ul.products li.product {
	width: auto;
	float: none;
}

/* ===========================================================================
 * PÁGINA E POST GENÉRICOS (v1.63.0)
 *
 * Hoje nenhuma está publicada — o conteúdo de exemplo foi para a lixeira. É
 * o molde das páginas LEGAIS que a loja precisa ter (política de privacidade,
 * termos, trocas): coluna de leitura, título da home, texto corrido.
 * =========================================================================== */

body.vitta-loja:not(.woocommerce-page) .hentry:is(.type-page, .type-post) {
	max-width: calc(760px + var(--v-pad) * 2);
	margin: 0 auto;
	padding: clamp(32px, 5vw, 72px) var(--v-pad) 0;
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-header {
	margin: 0 0 clamp(24px, 3vw, 40px);
	padding: 0;
	border: 0;
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-title {
	margin: 0;
	font-family: var(--v-display);
	font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(42, 14, 20, 0.86);
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-content :is(h2, h3, h4) {
	margin: 2em 0 0.6em;
	font-family: var(--v-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--v-wine);
}

/* Página legal é feita de listas (prazos, condições, exceções) — e o tema base
   zera o marcador. */
body.vitta-loja:not(.woocommerce-page) .hentry .entry-content :is(ul, ol) {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-content ul {
	list-style: disc;
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-content ol {
	list-style: decimal;
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-content li::marker {
	color: var(--v-wine);
}

body.vitta-loja:not(.woocommerce-page) .hentry .entry-content a {
	color: var(--v-wine);
	text-decoration: underline;
	text-decoration-color: rgba(130, 0, 34, 0.35);
	text-underline-offset: 3px;
}

/* Meta do post (data, autor, "Posted on…") e navegação entre posts são do
   blog do Storefront, que esta marca não tem. */
body.vitta-loja:not(.woocommerce-page) .hentry .entry-meta,
body.vitta-loja .post-navigation,
body.vitta-loja:not(.woocommerce-page) .hentry .edit-link {
	display: none;
}