/**
 * Vitrines de vendor (subdomínios). Uma base compartilhada + 6 "skins" (.vt-a … .vt-f).
 * A cor escolhida no cadastro do Projeto chega como --vendor-primary; o Template B usa
 * --riso-spot1/--riso-spot2/--riso-paper (par de tintas pré-combinado) em vez de cor livre.
 */

/* ===================== BASE COMPARTILHADA ===================== */
body.alumia-vendor{ margin:0; }
.vt *{ box-sizing:border-box; }
.vt img{ max-width:100%; display:block; }
.vt a{ text-decoration:none !important; color:inherit; }
.vt h1,.vt h2,.vt h3{ margin:0 !important; padding:0 !important; color:inherit !important; }
.vt-shell{ min-height:100vh; display:flex; flex-direction:column; }
.vt-main{ flex:1; }

.vt-nav{ display:flex; justify-content:space-between; align-items:center; gap:20px; }
.vt-nav__links{ display:flex; align-items:center; gap:26px; }
.vt-nav__count{ display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; text-align:center; font-size:10px; line-height:18px; }
/* O badge nasce vazio e [hidden]; o JS do nav tira o atributo quando o cookie tem contagem.
   Regra explicita porque o `display:inline-block` acima e de classe e ganha do [hidden] do navegador. */
.vt-nav__count[hidden]{ display:none; }

.vt-grid{ display:grid; }
.vt-card{ display:block; }
.vt-card__img{ position:relative; overflow:hidden; }
.vt-card__img img{ width:100%; height:100%; object-fit:cover; }
.vt-card__noimg{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.4;
}
.vt-card__name{ display:block; }
.vt-card__price{ display:block; }
.vt-card__price del{ opacity:.5; margin-right:6px; }
.vt-card__stock{
	position:absolute; top:10px; left:10px; z-index:2;
	font-family:'JetBrains Mono', ui-monospace, monospace;
	font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px;
}
/* "Esgotado" vale nos seis templates, então precisa de cor própria — antes só o Template C
   pintava o selo, e nos outros ele sairia como texto solto sobre a foto.
   A cor é fixa (tinta escura + texto branco) e NÃO a do parceiro: é aviso, não decoração,
   mesma regra do vermelho de erro. Cada pele ainda pode sobrescrever, por ter mais classes. */
.vt-card__stock.is-out{ background:rgba(11,11,13,.85); color:#fff; border:0; }
/* "Em breve" = publicado sem preço. Fundo claro de propósito: a peça está a caminho, não acabou —
   apagá-la como esgotada afastaria o comprador de algo que ele ainda vai poder comprar. */
.vt-card__stock.is-soon{ background:rgba(255,255,255,.92); color:#0b0b0d; border:0; }
/* A foto apagada faz a peça esgotada se distinguir de relance, sem ler o selo.
   Não vale para "Em breve" — ali o produto tem de continuar convidativo. */
.vt-card--esgotado .vt-card__img img{ filter:grayscale(1); opacity:.5; }
.vt-card--esgotado .vt-card__name,
.vt-card--esgotado .vt-card__price{ opacity:.6; }
/* No Template E o canto esquerdo já é do selo NEW. */
.vt-e .vt-card__stock.is-out,
.vt-e .vt-card__stock.is-soon{ left:auto; right:10px; }
/* Selo "Combo": o produto é simples como qualquer outro no catálogo, então nada no card
   contava que ali vão duas peças. Cor do parceiro, e não uma tinta de sistema como o verde
   do NEW ou o escuro do "Esgotado": não é aviso nem prazo de validade — é o nome do que a
   peça é, e vive na mesma família dos rótulos da loja. Canto INFERIOR esquerdo porque os
   dois cantos de cima já estão ocupados (NEW à direita no E, estoque à esquerda nos outros),
   e nos seis templates o rodapé da foto só é usado no hover do Template E. */
.vt-card__combo{
	position:absolute; left:10px; bottom:10px; z-index:2;
	background:var(--vendor-primary); color:#fff;
	font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px;
}
/* O Template E cobre a foto inteira com o CTA "Ver produto" no hover; o selo sai de cena
   junto, senão os dois se sobrepõem no rodapé do card. */
.vt-e .vt-card__combo{ font-size:11px; letter-spacing:.14em; padding:4px 10px; left:14px; bottom:14px;
	transition:opacity .3s ease; }
.vt-e .vt-card:hover .vt-card__combo{ opacity:0; }
/* Vitrine em grupos: peça avulsa primeiro, combo depois sob um título próprio
   (pedido em 2026-09-10). A base fica aqui, e não no bloco do Template E que é quem
   agrupa hoje, porque `is-hidden` no grupo é a contrapartida direta do `is-hidden` do
   card: quando o filtro de categoria não deixa nenhum card do grupo em pé, o título
   sairia anunciando uma lista vazia. A pele (fonte e tamanho) é de cada template. */
.vt-grupo.is-hidden{ display:none; }
.vt-grupo__titulo{ text-transform:uppercase; }

.vt-empty{ padding:64px 32px; opacity:.6; font-size:15px; }

/* Página de produto (estrutura; a pele vem de cada template) */
.vt-product{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.vt-product__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.vt-product__media img{ width:100%; height:100%; object-fit:cover; }
/* Tira de miniaturas. A moldura de cada template continua valendo só pra foto
   grande (.vt-product__media), por isso a tira mora num wrapper à parte. */
.vt-product__gal{ display:flex; flex-direction:column; gap:12px; }
.vt-product__thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:10px; }
.vt-product__thumb{
	appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0;
	padding:0; margin:0; cursor:pointer; display:block; width:100%; aspect-ratio:1/1;
	overflow:hidden; opacity:.62; transition:opacity .2s ease, outline-color .2s ease;
	outline:2px solid transparent; outline-offset:-2px;
}
.vt-product__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vt-product__thumb:hover,.vt-product__thumb:focus-visible{ opacity:1; }
.vt-product__thumb.is-ativa{ opacity:1; outline-color:var(--vendor-primary); }
/* A miniatura acompanha a moldura que cada template já dá à foto grande. */
.vt-c .vt-product__thumb,.vt-d .vt-product__thumb,.vt-e .vt-product__thumb{ border:1px solid var(--line); }
.vt-b .vt-product__thumb,.vt-f .vt-product__thumb{ border:2px solid var(--ink); }
.vt-product__back{ display:inline-block; font-size:12px; opacity:.65; margin-bottom:20px; }
.vt-product__back:hover{ opacity:1; }
.vt-product__title{ margin-bottom:14px; }
.vt-product__price{ margin-bottom:26px; }
.vt-product__desc{ margin-top:28px; font-size:14.5px; line-height:1.7; opacity:.8; }
/* Simulação de frete quando ela é movida pra baixo da descrição (ver o `frete_apos_desc` de
   alumia_vendor_single_product). Dentro do formulário ela herdava o espaçamento do bloco de
   compra; solta aqui, precisa da própria folga e de um fio que a separe do texto. */
.vt-product__frete{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.vt-product__frete .containerCalculator{ margin:0; }
.vt-product__soldout{ font-size:14px; opacity:.7; }

/* ---- Tabela dentro da descricao do produto (grade de medidas) ---------------
   A descricao e conteudo do cadastro e pode trazer <table>; sem regra nenhuma ela sai como
   texto corrido colado. Escrita em currentColor para servir as seis peles sem declarar cor
   propria (mesma razao da caixa de combo, logo abaixo). Largura limitada em vez de rolagem
   horizontal: uma grade de medidas tem 3 colunas curtas e cabe inteira em 375px. */
.vt-product__desc table{
	width:100%;
	max-width:420px;
	margin:16px 0;
	border-collapse:collapse;
	font-size:13.5px;
}
.vt-product__desc table th,
.vt-product__desc table td{
	padding:8px 12px;
	text-align:left;
	border:1px solid rgba(128,128,128,.35);
	border:1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.vt-product__desc table th{
	font-weight:600;
	background:rgba(128,128,128,.1);
	background:color-mix(in srgb, currentColor 8%, transparent);
}

/* ---- Combo: pacote de peças ("shape + lixa por R$ 330") ----------------------
   Duas peças de interface: `.vt-promo`, a caixa que aparece na página de UMA peça avisando que
   existe combo com ela, e `.vt-combo`, o formulário de compra na página do combo.

   ⚠️ Nenhuma das duas declara `color` nem `opacity` no texto. `--muted` é tinta ESCURA no
   Template F e sumiria sobre fundo escuro (pegadinha já paga nas placas da agenda e no rodapé),
   e opacidade derruba o contraste de um texto que já é secundário. Herdar a cor do contexto é o
   único jeito que funciona nas seis peles. A superfície sai de `currentColor`, então ela clareia
   sozinha em template escuro e escurece em template claro. */
.vt-promo,.vt-combo__item{
	background:rgba(128,128,128,.07);
	background:color-mix(in srgb, currentColor 6%, transparent);
	border:1px solid rgba(128,128,128,.3);
}
/* A caixa acompanha a moldura que cada template dá aos seus blocos, igual às miniaturas. */
.vt-c .vt-promo,.vt-c .vt-combo__item,.vt-d .vt-promo,.vt-d .vt-combo__item,
.vt-e .vt-promo,.vt-e .vt-combo__item{ border:1px solid var(--line); }
.vt-b .vt-promo,.vt-b .vt-combo__item,.vt-f .vt-promo,.vt-f .vt-combo__item{ border:2px solid var(--ink); }

/* --- "Leve junto", na página da peça --- */
.vt-promo{ display:block; margin-top:24px; padding:16px 18px; }
.vt-promo:hover{ border-color:var(--vendor-primary); }
.vt-promo__label{
	display:block; margin-bottom:6px; font-size:10px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--vendor-primary);
}
.vt-promo__txt{ display:block; font-size:14px; line-height:1.55; }
.vt-promo__cta{ display:block; margin-top:8px; font-size:12.5px; font-weight:600; }

/* --- Formulário de compra do combo --- */
.vt-combo{ margin:0; }
.vt-combo__label{
	margin:0 0 12px; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.vt-combo__itens{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.vt-combo__item{ display:flex; align-items:center; gap:14px; padding:12px; }
.vt-combo__foto{ flex:0 0 62px; width:62px; aspect-ratio:1/1; overflow:hidden; }
.vt-combo__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.vt-combo__dados{ flex:1 1 140px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.vt-combo__nome{ font-weight:600; font-size:14.5px; line-height:1.3; }
.vt-combo__qtd,.vt-combo__var{ font-size:12.5px; }
/* Largura de conteúdo, não do bloco: esticado até a borda o seletor competia com o botão de
   comprar, e nome de tamanho é curto ("M", "8.0\""). */
.vt-combo__select{
	width:auto; min-width:150px; max-width:100%; padding:8px 10px; border:1px solid currentColor;
	background:transparent; color:inherit; font:inherit; font-size:13px; border-radius:0;
}
.vt-combo__preco{ flex:0 0 auto; white-space:nowrap; font-size:14px; }
.vt-combo__resumo{
	display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; margin:0 0 18px; font-size:13.5px;
}
.vt-combo__economia{ font-weight:600; color:var(--vendor-primary); }
.vt-combo__btn{ width:100%; }

/* --- Selo do combo no carrinho e no checkout --- */
.vt-cart-combo{
	display:block; margin-top:4px; font-size:11px; letter-spacing:.08em;
	text-transform:uppercase; color:var(--vendor-primary);
}
/* Peça de combo não tem quantidade editável: ela só existe ali porque o combo existe. */
.vt-cart-qtd-fixa{ display:inline-block; font-size:14px; }


/* Formulário de compra do WooCommerce, normalizado pros 4 templates */
.vt .quantity input[type="number"]{
	width:70px; padding:11px 10px; border:1px solid currentColor; background:transparent;
	color:inherit; font:inherit; border-radius:0;
}
.vt form.cart{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0; }
.vt button.single_add_to_cart_button,
.vt .vt-combo__btn,
.vt .vt-btn{
	display:inline-block; padding:14px 30px; border:none; cursor:pointer;
	font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
	transition:opacity .2s ease;
}
.vt button.single_add_to_cart_button:hover,.vt .vt-combo__btn:hover,.vt .vt-btn:hover{ opacity:.82; }
.vt .woocommerce-variation-add-to-cart{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Carrinho / checkout: WooCommerce gera o markup, aqui só damos respiro e tipografia */
.vt-cart{ padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px); }
.vt-cart__title{ margin-bottom:28px; }
.vt-cart table{ width:100%; border-collapse:collapse; font-size:14px; }
.vt-cart table th,.vt-cart table td{ padding:14px 10px; text-align:left; border-bottom:1px solid rgba(128,128,128,.25); }
.vt-cart .quantity input{ width:70px; }
.vt-cart .button,.vt-cart button{
	padding:13px 26px; border:none; cursor:pointer; font-size:12px;
	letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
/* `password` entra na lista junto com os outros: é o campo de entrar/criar conta e também o
   de criar conta no checkout — sem ele o campo sai com a cara crua do navegador no meio de um
   formulário estilizado. */
.vt-cart input[type="text"],.vt-cart input[type="email"],.vt-cart input[type="tel"],
.vt-cart input[type="password"],
.vt-cart select,.vt-cart textarea{
	width:100%; padding:11px 12px; border:1px solid rgba(128,128,128,.4);
	background:transparent; color:inherit; font:inherit; border-radius:0;
}
.vt-cart .woocommerce-message,.vt-cart .woocommerce-info,.vt-cart .woocommerce-error{
	padding:14px 18px; margin-bottom:22px; font-size:14px; list-style:none;
	border:0; border-left:3px solid var(--vendor-primary);
	background:rgba(128,128,128,.08);
}
/* Erro continua vermelho: cor de aviso não é lugar pra cor de marca. */
.vt-cart .woocommerce-error{ border-left-color:#b81c23; }
/* O ícone dessas mensagens vem de FONTE DE ÍCONE: o Astra pede o codepoint \e028 da família
   WooCommerce esperando o "i" de informação, mas na fonte do WooCommerce 11 esse codepoint é
   um quadrado — daí o quadradinho azul no começo da linha. Além disso o Astra posiciona o
   ícone com `position:absolute; left:1.5em` contando com o padding dele (3.5em); o nosso é
   menor, então o quadrado ainda caía por cima do texto. Desenhamos o ícone aqui, em SVG
   mascarado: não depende de versão de fonte nem de posicionamento absoluto. Se aparecer
   caractere estranho em qualquer aviso novo do WooCommerce, é desta mesma família de erro. */
.vt .woocommerce-message::before,.vt .woocommerce-info::before,.vt .woocommerce-error::before{
	content:''; position:static; display:inline-block; vertical-align:-.18em;
	width:1.05em; height:1.05em; margin-right:.5em; font-family:inherit;
	color:var(--vendor-primary); background-color:currentColor;
	-webkit-mask:var(--nota-icone) no-repeat center/contain;
	mask:var(--nota-icone) no-repeat center/contain;
}
/* O erro é um <ul>: sem o float o ícone ficaria numa linha e o texto do <li> na de baixo. */
.vt .woocommerce-error::before{ float:left; margin-top:.15em; color:#b81c23; }
.vt .woocommerce-info{
	--nota-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5' stroke-linecap='round'/%3E%3Cpath d='M12 7.6v.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.vt .woocommerce-message{
	--nota-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vt .woocommerce-error{
	--nota-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13' stroke-linecap='round'/%3E%3Cpath d='M12 16.4v.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Cupom no checkout: um link miúdo, não uma faixa de aviso (ver o override
   woocommerce/checkout/form-coupon.php). O formulário NÃO usa flex de propósito: o
   `slideToggle` do WooCommerce grava `display:block` inline ao abrir e derrubaria o flex —
   com os campos em inline-block o layout aguenta qualquer display que ele escreva. */
.vt-cart .alumia-cupom{ margin:0 0 16px; font-size:13px; }
/* O `!important` é pra vencer o `.vt a{text-decoration:none !important}` lá de cima — sem
   sublinhado esse link vira uma linha de texto solta que ninguém percebe que clica. */
.vt-cart .alumia-cupom__abrir{ opacity:.7; text-decoration:underline !important; text-underline-offset:3px; }
.vt-cart .alumia-cupom__abrir:hover{ opacity:1; }
.vt-cart .alumia-cupom__form{ margin:0 0 26px; max-width:100%; }
.vt-cart .alumia-cupom__form .form-row{ display:inline-block; vertical-align:top; float:none; width:auto; margin:0 8px 8px 0; }
.vt-cart .alumia-cupom__form input[type="text"]{ width:230px; max-width:100%; }
.vt-cart .alumia-cupom__form button{ padding:11px 20px; }
/* Resposta da busca de CEP, embaixo do campo. */
.vt-cart .alumia-cep-aviso{ display:block; margin-top:6px; font-size:12.5px; opacity:.75; }
.vt-cart .alumia-cep-aviso.is-erro{ opacity:1; color:#b81c23; }

/* Barra "faltam R$ X pro frete grátis", no topo da tabela do carrinho (woocommerce_before_cart_table). */
.vt-cart .alumia-frete-gratis{ margin:0 0 22px; padding:14px 16px; border:1px solid rgba(128,128,128,.28); border-radius:4px; }
.vt-cart .alumia-frete-gratis__msg{ margin:0 0 9px; font-size:13.5px; }
.vt-cart .alumia-frete-gratis__msg strong{ color:var(--vendor-primary); }
.vt-cart .alumia-frete-gratis__msg--ok{ color:var(--vendor-primary); font-weight:600; }
.vt-cart .alumia-frete-gratis__barra{ height:6px; border-radius:3px; background:rgba(128,128,128,.18); overflow:hidden; }
.vt-cart .alumia-frete-gratis__barra span{ display:block; height:100%; background:var(--vendor-primary); transition:width .3s ease; }

/* Aviso "Frete grátis a partir de R$ X" — vitrine (faixa fina sob a nav) e produto (linha
   abaixo do preço). Texto puro, sem cor de fundo: é informação, não propaganda gritada. */
.vt-frete-gratis{ margin:0; }
.vt-frete-gratis strong{ color:var(--vendor-primary); font-weight:600; }
.vt-frete-gratis--vitrine{
	padding:9px clamp(20px,4vw,48px); text-align:center;
	border-top:1px solid rgba(128,128,128,.25); border-bottom:1px solid rgba(128,128,128,.25);
	text-transform:uppercase; letter-spacing:.08em; font-size:11px;
}
.vt-product__frete-gratis{ margin:2px 0 20px; font-size:12.5px; opacity:.85; }

/* ---- Minha conta do comprador ----
   O WooCommerce gera todo o markup (shortcode [woocommerce_my_account]): entrar, criar conta,
   pedidos, endereços, dados da conta. A pele de formulário/tabela/botão vem da classe .vt-cart,
   aplicada junto no template; aqui só o que é próprio da conta.
   O wrapper .woocommerce NÃO virou grid de propósito: deslogado ele tem um filho (as duas
   colunas de entrar/criar conta) e logado tem dois (menu + conteúdo) — uma grade fixa
   esmagaria um dos dois casos. Menu em abas horizontais serve aos dois. */
/* `.vt h1,h2,h3{margin:0 !important}` (base) come o espaço abaixo do .vt-cart__title, então o
   respiro depois do título vem daqui — senão o "Entrar" da coluna nasce colado no h1. */
.vt-account .woocommerce{ margin-top:clamp(22px,3vw,34px); }
/* O WooCommerce/Astra empilham a conta com float (menu 30% à esquerda, conteúdo 68% à direita).
   Anulamos: aqui o menu é uma fileira de abas em cima e o conteúdo ocupa a largura toda — senão
   as abas ficam espremidas numa coluna de 30%. Os !important são pra vencer o CSS do plugin. */
.vt-account .woocommerce-MyAccount-navigation,
.vt-account .woocommerce-MyAccount-content{ float:none !important; width:auto !important; margin:0; }
.vt-account .woocommerce-MyAccount-navigation ul{
	display:flex; flex-wrap:wrap; gap:4px 22px; list-style:none; font-size:13px;
	margin:0 0 30px; padding:0 0 12px; border-bottom:1px solid rgba(128,128,128,.3);
}
/* Cada item vem com caixa/borda do tema; aqui é só o rótulo. */
.vt-account .woocommerce-MyAccount-navigation li{
	border:0 !important; background:none !important; padding:0 !important; margin:0 !important;
}
.vt-account .woocommerce-MyAccount-navigation a{ display:inline-block; padding:4px 0; opacity:.7; background:none !important; }
.vt-account .woocommerce-MyAccount-navigation a:hover{ opacity:1; }
.vt-account .woocommerce-MyAccount-navigation-link.is-active a{
	opacity:1; color:var(--vendor-primary); box-shadow:0 2px 0 0 var(--vendor-primary);
}
.vt-account .woocommerce-MyAccount-content{ font-size:15px; line-height:1.7; }
.vt-account .woocommerce-MyAccount-content p{ margin:0 0 16px; }
/* Entrar e criar conta lado a lado; uma coluna só quando não couber.
   Flex com `flex-wrap`, não grid: o WooCommerce/Astra põem `float` e `width:48%` nas duas
   colunas (layout de 2009), e num grid isso jogava a segunda coluna pra linha de baixo com
   metade da largura. Aqui a gente anula os dois — daí os !important, que são pra vencer o CSS
   do plugin, não o nosso. O `flex-wrap` sozinho já cuida do celular, sem media query. */
.vt-account #customer_login{ display:flex; flex-wrap:wrap; gap:clamp(26px,4vw,56px); align-items:flex-start; }
.vt-account #customer_login > div{
	flex:1 1 280px; min-width:0;
	width:auto !important; float:none !important; margin:0 !important;
}
/* Empilhado, a base de 280px deixa cada bloco 26px (o gap) mais estreito que o container e a
   primeira coluna nasce deslocada pra direita. Com base 100% cada uma ocupa a linha inteira. */
@media (max-width: 700px){
	.vt-account #customer_login > div{ flex-basis:100%; }
}
.vt-account #customer_login h2{ font-size:19px; margin-bottom:18px !important; }
.vt-account form.woocommerce-form{ margin:0; }
.vt-account .woocommerce-form-row{ margin:0 0 16px; }
.vt-account label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; opacity:.75; }
/* Rótulo de caixa de seleção é frase, não etiqueta: volta ao texto corrido. */
.vt-account .woocommerce-form-login__rememberme,
.vt-account .woocommerce-form__label-for-checkbox{
	display:block; font-size:13px; text-transform:none; letter-spacing:0; opacity:1;
}
.vt-account .woocommerce-form-login__rememberme input,
.vt-account .woocommerce-form__label-for-checkbox input{ margin-right:7px; }
/* Botão de mostrar a senha: o WooCommerce desenha um glifo da fonte de ícones dele, que numa
   loja em subdomínio é requisição cross-origin e falha (mesmo motivo já documentado pras fontes
   do tema — o servidor não manda Access-Control-Allow-Origin). Sobrava um quadradinho vazio
   dentro do campo de senha. Trocamos o glifo por palavra, que não depende de fonte de ícone.
   O seletor leva `.vt` na frente só pra ganhar do `.woocommerce form .show-password-input` do
   plugin, que tem uma classe a mais que o nosso `.vt-account .show-password-input`. */
.vt-account .password-input{ position:relative; display:block; }
/* Nas versões novas do WooCommerce esse controle é um <button>, então ele caía na regra de
   botão da pele (fundo na cor do parceiro, borda de 3px e sombra dura) e virava um retângulo
   pesado dentro do campo. Aqui ele volta a ser só texto. */
.vt .vt-account form .show-password-input{
	/* O centramento usa a propriedade `translate`, não `transform`: o WooCommerce já aplica
	   `translate:0 -50%` nele, e as duas se somam — com um transform próprio o botão subia
	   uma altura inteira e ficava por cima da borda do campo. */
	position:absolute; right:0; top:50%; translate:0 -50%; transform:none;
	width:auto; height:auto; background:none; border:0; box-shadow:none; color:inherit;
	padding:10px 12px; cursor:pointer;
}
.vt .vt-account form .show-password-input::after{
	content:'mostrar'; font-family:inherit; font-size:10.5px; letter-spacing:.08em;
	text-transform:uppercase; opacity:.65; color:inherit;
}
.vt .vt-account form .show-password-input:hover::after{ opacity:1; }
.vt .vt-account form .show-password-input.display-password::after{ content:'esconder'; }
.vt-account .woocommerce-privacy-policy-text{ font-size:12.5px; line-height:1.6; opacity:.7; }
.vt-account .woocommerce-LostPassword{ font-size:13px; margin:0; }
.vt-account .woocommerce-LostPassword a{ border-bottom:1px solid currentColor; }
.vt-account fieldset{ border:1px solid rgba(128,128,128,.3); padding:18px; margin:0 0 22px; }
.vt-account fieldset legend{ padding:0 8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.vt-account .woocommerce-Address{ margin-bottom:26px; }
.vt-account__voltar{ margin:40px 0 0; font-size:13px; opacity:.7; }
.vt-account__voltar a:hover{ opacity:1; }

.vt-footer{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }

/* Redes sociais do parceiro: valem pra todos os templates, cada pele só ajusta cor/tamanho. */
/* Linha de baixo do rodape da loja: flex-basis 100% forca linha propria sem
   reestruturar o .vt-footer, que as 6 peles ja esperam como fileira. */
.vt-footer__base{
	flex:0 0 100%;
	display:flex; flex-wrap:wrap; align-items:baseline;
	justify-content:space-between; gap:8px 24px;
	margin-top:6px; padding-top:14px;
	/* Template B nao define --line; fallback neutro serve em fundo claro e escuro. */
	border-top:1px solid var(--line, rgba(128,128,128,.3));
	/* Nem opacity nem cor propria, de proposito. Com opacity .72 o contraste no
	   Template E caia a 3,65:1 (minimo AA e 4,5:1). E com color:var(--muted) o
	   Template F ficava INVISIVEL (1,00:1): ali --muted e tinta escura, feita pro
	   papel kraft, e o rodape tem fundo escuro. Herdar a cor do rodape de cada
	   pele e o unico jeito que funciona nas seis. */
	font-size:12.5px; line-height:1.55;
}
.vt-footer__contato{ display:flex; flex-wrap:wrap; gap:12px; }
.vt-footer__contato a{ color:inherit; border-bottom:1px solid currentColor; }
.vt-footer__contato a:hover{ color:var(--vendor-primary); }
.vt-footer__id{ max-width:56ch; }

.vt-footer__legal{ display:flex; gap:14px; flex-wrap:wrap; }
.vt-footer__legal a{ color:inherit; opacity:.75; }
.vt-footer__legal a:hover{ opacity:1; color:var(--vendor-primary); }

.vt-redes{ display:flex; align-items:center; gap:14px; }
.vt-redes a{ display:block; opacity:.7; transition:opacity .2s ease, color .2s ease; }
.vt-redes a:hover{ opacity:1; color:var(--vendor-primary); }
.vt-redes svg{ width:18px; height:18px; display:block; }

/* ===================== A — MINIMAL ===================== */
.vt-a{
	--ink:#0a0a0a; --paper:#fff; --muted:#707070; --line:rgba(10,10,10,.13);
	background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif;
}
.vt-a .vt-nav{ padding:28px clamp(20px,4vw,32px); border-bottom:1px solid var(--line); }
.vt-a .vt-nav__logo{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.vt-a .vt-nav__links{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.vt-a .vt-nav__links a:hover{ color:var(--ink); }
.vt-a .vt-nav__count{ background:var(--vendor-primary); color:#fff; }
.vt-a .vt-hero{ padding:clamp(44px,6vw,64px) clamp(20px,4vw,32px) 40px; }
.vt-a .vt-hero__eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.vt-a .vt-hero__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(26px,4vw,38px); max-width:16ch; text-wrap:balance; }
.vt-a .vt-grid{ grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vt-a .vt-card{ background:var(--paper); }
.vt-a .vt-card__img{ aspect-ratio:4/5; background:#f0f0f0; }
.vt-a .vt-card__body{ padding:16px 14px 22px; }
.vt-a .vt-card__name{ font-size:14px; font-weight:500; margin-bottom:6px; }
.vt-a .vt-card__price{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--vendor-primary); }
.vt-a .vt-main{ padding:clamp(32px,5vw,56px) clamp(20px,4vw,32px); }
.vt-a .vt-product__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(22px,3vw,30px); }
.vt-a .vt-product__price{ font-family:'JetBrains Mono',monospace; font-size:17px; color:var(--vendor-primary); }
.vt-a button.single_add_to_cart_button,.vt-a .vt-combo__btn,.vt-a .vt-cart .button,.vt-a .vt-cart button{ background:var(--ink); color:#fff; }
.vt-a .vt-cart__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:26px; }
.vt-a .vt-footer{ padding:32px clamp(20px,4vw,32px); border-top:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ===================== B — RISO / CARTAZ ===================== */
.vt-b{
	--ink:#181614;
	background:var(--riso-paper,#efe9df); color:var(--ink);
	font-family:'Space Mono', ui-monospace, monospace;
	background-image:radial-gradient(circle, rgba(24,22,20,.055) 1px, transparent 1px);
	background-size:7px 7px;
}
.vt-b .vt-nav{ padding:22px clamp(18px,4vw,28px); border-bottom:3px solid var(--ink); }
.vt-b .vt-nav__logo{ font-family:'Anton',sans-serif; font-size:21px; letter-spacing:.02em; text-transform:uppercase; }
.vt-b .vt-nav__links{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.vt-b .vt-nav__count{ background:var(--riso-spot1); color:#fff; }
.vt-b .vt-hero{ padding:clamp(36px,5vw,48px) clamp(18px,4vw,28px) 34px; }
.vt-b .vt-hero__tag{ display:inline-block; background:var(--riso-spot1); color:#fff; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; transform:rotate(-2deg); margin-bottom:20px; }
.vt-b .vt-hero__title{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(38px,8vw,68px); line-height:.92; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; }
.vt-b .vt-hero__sub{ margin-top:14px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--riso-spot1); }
.vt-b .vt-grid{ grid-template-columns:repeat(4,1fr); gap:20px; padding:8px clamp(18px,4vw,28px) 48px; }
.vt-b .vt-card:nth-child(3n+2){ transform:rotate(1.2deg); }
.vt-b .vt-card:nth-child(3n){ transform:rotate(-1deg); }
.vt-b .vt-card__img{ aspect-ratio:4/5; border:2px solid var(--ink); background:#2a2622; }
.vt-b .vt-card__img::after{ content:''; position:absolute; inset:0; background:var(--riso-spot2); mix-blend-mode:color-burn; opacity:.32; pointer-events:none; }
.vt-b .vt-card__body{ padding:12px 2px; }
.vt-b .vt-card__name{ font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px; line-height:1.35; }
.vt-b .vt-card__price{ font-weight:700; font-size:13px; }
.vt-b .vt-main{ padding:clamp(28px,5vw,48px) clamp(18px,4vw,28px); }
.vt-b .vt-product__media{ border:2px solid var(--ink); }
.vt-b .vt-product__media::after{ content:''; position:absolute; inset:0; background:var(--riso-spot2); mix-blend-mode:color-burn; opacity:.28; pointer-events:none; }
.vt-b .vt-product__title{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(28px,4.5vw,44px); text-transform:uppercase; line-height:1; }
.vt-b .vt-product__price{ font-size:18px; font-weight:700; color:var(--riso-spot1); }
.vt-b button.single_add_to_cart_button,.vt-b .vt-combo__btn,.vt-b .vt-cart .button,.vt-b .vt-cart button{ background:var(--riso-spot1); color:#fff; }
.vt-b .vt-cart__title{ font-family:'Anton',sans-serif; font-weight:400; font-size:32px; text-transform:uppercase; }
.vt-b .vt-footer{ padding:26px clamp(18px,4vw,28px); border-top:3px solid var(--ink); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }

/* ===================== C — GRID HYPE ===================== */
.vt-c{
	--ink:#f4f4f1; --paper:#0b0b0d; --muted:#8b8b90; --line:#232326; --alert:#ff2d78;
	background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif;
}
.vt-c .vt-nav{ padding:22px clamp(18px,4vw,28px); border-bottom:1px solid var(--line); }
.vt-c .vt-nav__logo{ font-family:'Archivo Black',sans-serif; font-size:17px; letter-spacing:-.01em; text-transform:uppercase; }
.vt-c .vt-nav__links{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.vt-c .vt-nav__links a:hover{ color:var(--ink); }
.vt-c .vt-nav__count{ background:var(--vendor-primary); color:#fff; }
.vt-c .vt-hero{ padding:clamp(40px,5vw,52px) clamp(18px,4vw,28px) 32px; border-bottom:1px solid var(--line); }
.vt-c .vt-hero__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.vt-c .vt-hero__tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:14px; }
.vt-c .vt-hero__title{ font-family:'Archivo Black',sans-serif; font-size:clamp(30px,6vw,52px); line-height:.98; text-transform:uppercase; text-wrap:balance; }
.vt-c .vt-hero__meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); text-align:right; line-height:1.7; font-variant-numeric:tabular-nums; }
.vt-c .vt-hero__meta b{ color:var(--alert); }
.vt-c .vt-grid{ grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.vt-c .vt-card{ background:var(--paper); }
.vt-c .vt-card__img{ aspect-ratio:1/1; background:#17171a; }
.vt-c .vt-card__img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%, rgba(0,0,0,.5)); pointer-events:none; }
.vt-c .vt-card__stock{ background:rgba(11,11,13,.78); border:1px solid var(--line); color:var(--ink); }
.vt-c .vt-card__stock.is-low{ color:var(--alert); border-color:var(--alert); }
.vt-c .vt-card__stock.is-out{ color:var(--muted); }
.vt-c .vt-card__body{ padding:14px; }
.vt-c .vt-card__name{ font-size:12.5px; font-weight:500; margin-bottom:8px; text-transform:uppercase; letter-spacing:.01em; }
.vt-c .vt-card__price{ font-family:'JetBrains Mono',monospace; font-size:12px; font-variant-numeric:tabular-nums; color:var(--vendor-primary); }
.vt-c .vt-main{ padding:clamp(28px,5vw,52px) clamp(18px,4vw,28px); }
.vt-c .vt-product__title{ font-family:'Archivo Black',sans-serif; font-size:clamp(24px,3.4vw,36px); text-transform:uppercase; line-height:1.02; }
.vt-c .vt-product__price{ font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--vendor-primary); font-variant-numeric:tabular-nums; }
.vt-c button.single_add_to_cart_button,.vt-c .vt-combo__btn,.vt-c .vt-cart .button,.vt-c .vt-cart button{ background:var(--vendor-primary); color:#fff; }
.vt-c .vt-cart__title{ font-family:'Archivo Black',sans-serif; font-size:28px; text-transform:uppercase; }
.vt-c .vt-footer{ padding:30px clamp(18px,4vw,28px); border-top:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ===================== D — CATÁLOGO ===================== */
.vt-d{
	--ink:#221f18; --paper:#ede8de; --card:#f7f3ea; --muted:#726c5c; --line:#c9bfa8;
	background:var(--paper); color:var(--ink); font-family:'Work Sans', sans-serif;
}
.vt-d .vt-nav{ padding:26px clamp(20px,4vw,32px); border-bottom:1px solid var(--line); }
.vt-d .vt-nav__logo{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-style:italic; font-size:20px; }
.vt-d .vt-nav__links{ font-size:12.5px; letter-spacing:.03em; color:var(--muted); }
.vt-d .vt-nav__links a:hover{ color:var(--ink); }
.vt-d .vt-nav__count{ background:var(--vendor-primary); color:#fff; }
.vt-d .vt-hero{ padding:clamp(40px,5vw,56px) clamp(20px,4vw,32px) 40px; text-align:center; }
.vt-d .vt-hero__label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:14px; }
.vt-d .vt-hero__title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(26px,4.4vw,40px); margin:0 auto; max-width:18ch; text-wrap:balance; }
.vt-d .vt-hero__sub{ margin-top:12px; font-size:13.5px; color:var(--muted); }
.vt-d .vt-grid{ grid-template-columns:repeat(4,1fr); gap:20px; padding:8px clamp(20px,4vw,32px) 48px; }
.vt-d .vt-card{ background:var(--card); border:1px solid var(--line); }
.vt-d .vt-card__img{ aspect-ratio:4/5; border-bottom:1px dashed var(--line); background:#e3ddcf; }
.vt-d .vt-card__body{ padding:16px; text-align:center; }
.vt-d .vt-card__name{ font-family:'Fraunces',Georgia,serif; font-size:15px; margin-bottom:8px; }
.vt-d .vt-card__price{ font-size:13px; color:var(--vendor-primary); font-weight:600; }
.vt-d .vt-main{ padding:clamp(28px,5vw,52px) clamp(20px,4vw,32px); }
.vt-d .vt-product__media{ border:1px solid var(--line); background:var(--card); }
.vt-d .vt-product__title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(24px,3.2vw,34px); }
.vt-d .vt-product__price{ font-size:18px; color:var(--vendor-primary); font-weight:600; }
.vt-d button.single_add_to_cart_button,.vt-d .vt-combo__btn,.vt-d .vt-cart .button,.vt-d .vt-cart button{ background:var(--vendor-primary); color:#fff; }
.vt-d .vt-cart__title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; font-size:28px; }
.vt-d .vt-footer{ padding:30px clamp(20px,4vw,32px); border-top:1px solid var(--line); font-size:12px; color:var(--muted); }

/* ===================== E — STREET / MONO =====================
   Portado do /shop/ do sktbr.com.br. As fontes (Bebas Neue + Share Tech Mono) são
   identidade fixa do template; só o acento vem de --vendor-primary. */
.vt-e{
	--ink:#e2e2e2; --paper:#0a0a0a; --card:#0d0d0d; --muted:#8f8f8f; --line:rgba(255,255,255,.12);
	background:var(--paper); color:var(--ink); font-family:'Share Tech Mono', ui-monospace, monospace;
}
.vt-e .vt-nav{ padding:20px clamp(18px,4vw,40px); border-bottom:1px solid var(--line); }
.vt-e .vt-nav__logo{ font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:.06em; line-height:1; color:#fff; }
.vt-e .vt-nav__links{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cfcfcf; }
.vt-e .vt-nav__links a::before{ content:'['; opacity:.45; }
.vt-e .vt-nav__links a::after{ content:']'; opacity:.45; }
.vt-e .vt-nav__links a:hover{ color:var(--vendor-primary); }
.vt-e .vt-nav__count{ background:var(--vendor-primary); color:#fff; }

.vt-e .vt-hero{ padding:clamp(40px,6vw,56px) clamp(18px,4vw,40px) 0; }
.vt-e .vt-hero__label{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:10px; }
.vt-e .vt-hero__title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(64px,10vw,150px); line-height:.9; color:#e2e2e2; }

/* Filtros por categoria — só este template tem */
.vt-filtros{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.vt-filtro{ font:inherit; background:transparent; border:1px solid var(--line); border-radius:0; cursor:pointer;
	font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cfcfcf; padding:10px 22px; transition:all .25s ease; }
.vt-filtro:hover{ border-color:var(--vendor-primary); color:var(--vendor-primary); }
.vt-filtro.is-active{ background:var(--vendor-primary); border-color:var(--vendor-primary); color:#fff; }
.vt-filtros__contagem{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-left:6px; }
.vt-e .vt-filtros{ padding:36px clamp(18px,4vw,40px); }

.vt-e .vt-grid{ grid-template-columns:repeat(4,1fr); gap:0 2px; border-top:1px solid var(--line); }
.vt-e .vt-card.is-hidden{ display:none; }
/* ⚠️ O espaçamento vai no WRAPPER, nunca no <h2>: a linha 12 deste arquivo é
   `.vt h1,.vt h2,.vt h3{ margin:0 !important; padding:0 !important; color:inherit !important; }`
   e nenhuma especificidade vence um `!important`. Foi por isso que o título nasceu
   colado na borda esquerda enquanto o `font-size` da mesma regra pegava normalmente —
   sintoma enganoso, porque parece a regra inteira não ter sido aplicada.
   Mesmo arranjo que o `.vt-hero__title`, que também recebe o padding do pai (`.vt-hero`).
   O `color` segue a mesma sorte: o reset força `inherit`, que aqui já resolve pro
   `var(--ink)` do `.vt-e` — declarar cor no <h2> seria letra morta.
   O padding lateral repete o do .vt-hero e o do .vt-filtros pro título nascer na mesma
   coluna do resto da página; o grid é full-bleed e não tem padding nenhum.
   Sem border-top: o próprio .vt-e .vt-grid logo abaixo já desenha a linha. */
.vt-e .vt-grupo__head{ padding:clamp(40px,5vw,64px) clamp(18px,4vw,40px) clamp(20px,2.6vw,28px); }
.vt-e .vt-grupo__titulo{ font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4.4vw,56px);
	line-height:1; letter-spacing:.02em; }
.vt-e .vt-card__img{ aspect-ratio:4/5; background:var(--card); }
.vt-e .vt-card__img img{ transition:transform .5s ease, filter .5s ease; }
.vt-e .vt-card:hover .vt-card__img img{ transform:scale(1.07) rotate(1.5deg); filter:brightness(.82); }
.vt-e .vt-card__novo{ position:absolute; top:14px; right:14px; z-index:2; background:#45f542; color:#000;
	font-size:11px; letter-spacing:.14em; padding:4px 10px; }
/* Verde de sistema, igual ao magenta do Template C: marca "chegou agora" e não muda por
   parceiro — se virasse a cor da marca, deixaria de ser um sinal e viraria decoração. */
.vt-e .vt-card__cta{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; text-align:center;
	font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
	background:rgba(8,8,8,.55); border:1px solid rgba(255,255,255,.4); padding:13px 10px;
	opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease;
	-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.vt-e .vt-card:hover .vt-card__cta{ opacity:1; transform:translateY(0); }
.vt-e .vt-card__body{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
	padding:22px 18px 30px; border-right:1px solid rgba(255,255,255,.08); }
.vt-e .vt-card__name{ font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
.vt-e .vt-card__price{ font-size:15px; font-weight:700; color:var(--vendor-primary); white-space:nowrap; }
.vt-e .vt-empty{ padding:64px clamp(18px,4vw,40px); letter-spacing:.06em; }

/* Faixa correndo, assinatura da marca no rodapé da vitrine */
.vt-ticker{ width:100%; overflow:hidden; background:#050505; border-top:1px solid var(--line); padding:10px 0; margin-top:40px; }
.vt-ticker__track{ display:flex; width:max-content; animation:vt-marquee 30s linear infinite; }
.vt-ticker__track span{ flex:0 0 auto; margin-right:48px; color:#fff; font-size:13px; letter-spacing:.2em; white-space:nowrap; }
@keyframes vt-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.vt-e .vt-main{ padding:clamp(28px,5vw,52px) clamp(18px,4vw,40px); }
.vt-e .vt-product__back{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--vendor-primary); }
.vt-e .vt-product__media{ background:var(--card); border:1px solid var(--line); }
.vt-e .vt-product__title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(38px,6vw,72px); line-height:.92; color:#fff; }
.vt-e .vt-product__price{ font-size:20px; font-weight:700; color:var(--vendor-primary); }
.vt-e .vt-product__desc{ color:#b0b0b0; font-size:13px; line-height:1.8; }
.vt-e button.single_add_to_cart_button,.vt-e .vt-combo__btn,.vt-e .vt-cart .button,.vt-e .vt-cart button{
	background:var(--vendor-primary); color:#fff; font-family:'Share Tech Mono',monospace;
	letter-spacing:.16em; text-transform:uppercase; border-radius:0; }
.vt-e .vt-cart__label{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:8px; }
.vt-e .vt-cart__title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,6vw,64px); line-height:.92; color:#fff; }
.vt-e .vt-footer{ padding:26px clamp(18px,4vw,40px); border-top:1px solid var(--line);
	font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }


/* --- Galeria em carrossel (pedido do parceiro, 2026-09-03) --------------------
   Quem liga é o `template.json` ("galeria": "carrossel"), não uma classe cravada.
   Arrastar pro lado é comportamento nativo do navegador — um trilho com scroll-snap;
   o JS só mantém o indicador em dia, move pelas setas/pontos e segue a variação. */
/* A moldura é mais larga que a foto quando ela é retrato — e a coluna inteira deixaria
   uma tarja de papel larga dos dois lados. O teto aproxima a moldura da foto sem travar
   o carrossel numa proporção fixa (cada peça tem a sua). */
.vt-e .vt-product__gal--carrossel{ width:100%; max-width:520px; margin:0 auto; }
.vt-e .vt-product__palco{
	position:relative; overflow:hidden;
	background:var(--card); border:1px solid var(--line);
}
.vt-e .vt-product__trilho{
	display:flex; align-items:center;
	overflow-x:auto; overflow-y:hidden;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.vt-e .vt-product__trilho::-webkit-scrollbar{ display:none; }
.vt-e .vt-product__slide{
	position:relative; flex:0 0 100%; height:600px;
	display:flex; align-items:center; justify-content:center;
	scroll-snap-align:center; scroll-snap-stop:always;
}
/* A foto deixou de ser cortada em 4/5: cabe inteira em 600px de altura, com a largura
   saindo da proporção dela. O que sobrar na caixa é o papel da moldura. */
.vt-e .vt-product__slide img{ width:auto; height:auto; max-width:100%; max-height:600px; }

/* Setas pra quem está no mouse, que não arrasta. */
.vt-e .vt-product__seta{
	position:absolute; top:50%; transform:translateY(-50%); z-index:2;
	width:40px; height:40px; padding:0; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	font:inherit; font-size:26px; line-height:1;
	background:rgba(255,255,255,.88); color:#0f0f0f;
	border:1px solid var(--line); border-radius:0;
	opacity:.85; transition:opacity .2s ease;
}
.vt-e .vt-product__seta:hover,.vt-e .vt-product__seta:focus-visible{ opacity:1; }
.vt-e .vt-product__seta--ant{ left:12px; }
.vt-e .vt-product__seta--prox{ right:12px; }

/* Pontos e miniaturas fazem o mesmo papel de indicador — mostrar os dois juntos seria
   repetição. No celular ficam os pontos (lá se passa arrastando e a tira só roubaria
   altura); no desktop, as miniaturas, que também servem de atalho pro mouse. */
.vt-e .vt-product__pontos{ display:none; justify-content:center; gap:9px; }
.vt-e .vt-product__ponto{
	appearance:none; -webkit-appearance:none; padding:0; margin:0; border:0; cursor:pointer;
	width:8px; height:8px; min-width:0; min-height:0; border-radius:50%;
	background:var(--ink); opacity:.45; transition:opacity .2s ease, background-color .2s ease;
}
.vt-e .vt-product__ponto.is-ativa{ opacity:1; background:var(--vendor-primary); }

@media (max-width:640px){
	/* 600px fixos aqui deixariam tarja de papel em cima e embaixo: nesta largura a foto
	   é limitada pela tela muito antes de chegar nessa altura. */
	/* O min-height é pro produto SEM foto: ali o slide não tem conteúdo em fluxo (o
	   "Sem foto" é absoluto) e a moldura colapsava pra 2px, virando um risco na tela. */
	.vt-e .vt-product__slide{ height:auto; min-height:300px; }
	.vt-e .vt-product__slide img{ max-height:70vh; }
	.vt-e .vt-product__seta{ display:none; }
	.vt-e .vt-product__pontos{ display:flex; }
	.vt-e .vt-product__gal--carrossel .vt-product__thumbs{ display:none; }
}

/* --- Página de produto no claro (pedido do parceiro, 2026-09-03) ---------------
   Vale SÓ na página de produto (`is-product`): vitrine, carrinho, conta e painel
   seguem pretos. Redefinir as variáveis na raiz cobre tudo que herda por var()
   — fundo, foto, molduras, rodapé; sobram as poucas regras da pele que cravam
   branco, que precisam de par próprio aqui embaixo. */
.vt-e.is-product{
	--ink:#0f0f0f; --paper:#ffffff; --card:#f3f3f3; --muted:#5a5a5a; --line:rgba(0,0,0,.14);
}
.vt-e.is-product .vt-nav{ border-bottom-color:var(--line); }
.vt-e.is-product .vt-nav__logo{ color:var(--ink); }
.vt-e.is-product .vt-nav__links{ color:#3d3d3d; }
.vt-e.is-product .vt-product__title{ color:var(--ink); }
.vt-e.is-product .vt-product__desc{ color:#4a4a4a; }
/* O azul da marca tem 6,1:1 sobre o preto e cai pra 3,4:1 sobre o branco — o que
   passava a AA deixa de passar só por ter virado o fundo. Escurecido 22% aqui, e
   só aqui, pra continuar sendo o azul do SKTBR e voltar a ser legível. A primeira
   declaração é o plano B pra navegador sem color-mix (volta ao azul puro). */
.vt-e.is-product .vt-product__back,
.vt-e.is-product .vt-product__price{ color:var(--vendor-primary); }
.vt-e.is-product .vt-product__back,
.vt-e.is-product .vt-product__price{ color:color-mix(in srgb, var(--vendor-primary) 78%, #000); }

/* ===================== F — CORDEL / SERTÃO =====================
   Portado do protótipo Base44 do Dominguinho. Papel kraft com textura, tinta grossa e sombra
   dura (nada de sombra suave: a linguagem é de xilogravura impressa, não de interface).
   As fontes são identidade fixa do template; só a tinta terracota vem de --vendor-primary. */
.vt-f{
	--ink:#1a1a1a; --cal:#f4f1ea; --kraft:#d2b48c; --mostarda:#cc9521;
	--muted:rgba(26,26,26,.68); --line:var(--ink);
	--sombra:6px 6px 0 0 var(--ink);

	/* A NEW SPIRIT É A FONTE PRINCIPAL: corpo, títulos de seção, nome de produto, cidade,
	   nav e botões. Ela desenha os acentos de verdade (conferidos glifo a glifo), então é ela
	   que pode carregar texto em português sem erro de grafia.

	   A Hello-Mixed é SECUNDÁRIA, e só entra em quatro lugares que por natureza não levam
	   acento: nome da marca no topo, número do card, preço e data de show. Isso é obrigação,
	   não estilo — no arquivo dela todo codepoint acentuado aponta pra letra sem acento
	   (ó→O, ã→A, ç→C), e usá-la em texto de verdade escreveria "FORRO", "SAO PAULO".
	   Chegando uma Hello-Mixed com acentuação completa, dá pra ampliar o uso.
	   A Playfair fica só como plano B da pilha. */
	--f-marca:'Hello-Mixed','New Spirit',Georgia,serif;        /* secundária, sem acento */
	--f-titulo:'New Spirit','Playfair Display',Georgia,serif;  /* principal — títulos */
	--f-label:'Special Elite',ui-monospace,monospace;          /* carimbos e eyebrows */
	--f-corpo:'New Spirit','Lora',Georgia,serif;               /* principal — texto */

	background:var(--cal); color:var(--ink); font-family:var(--f-corpo);
}
/* A barra do menu usa a MESMA tinta do botão principal (--vendor-primary, a cor do parceiro),
   e não mais o papel kraft: a marca fica assentada na cor dela desde a primeira dobra. Como o
   fundo passou a ser escuro, o texto da nav vira `--cal` e o hover vai pra mostarda — sobre a
   própria cor, um hover em --vendor-primary sumiria. */
.vt-f .vt-nav{ padding:18px clamp(18px,4vw,40px); background:var(--vendor-primary); color:var(--cal);
	border-bottom:3px solid var(--ink); }
.vt-f .vt-nav__logo{ font-family:var(--f-marca); font-weight:400; font-size:24px; letter-spacing:-.02em; }
/* O wordmark do parceiro no lugar do nome em texto. Um pouco maior que nos outros templates
   (base: 30px): aqui ele é a identidade da página inteira, e a nav dá espaço. */
.vt-f .vt-nav__logo--img img{ height:38px; max-height:none; max-width:240px; width:auto; }
.vt-f .vt-nav__links{ font-family:var(--f-corpo); font-weight:600; font-size:14px; letter-spacing:.04em; }
.vt-f .vt-nav__links a:hover{ color:var(--mostarda); }
.vt-f .vt-nav__count{ background:var(--mostarda); color:var(--ink); }

.vt-f .vt-hero{ padding:clamp(44px,6vw,72px) clamp(18px,4vw,40px) 0; text-align:center; }
.vt-f .vt-hero__label{ font-family:var(--f-label); font-size:16px; color:var(--vendor-primary); margin-bottom:12px; text-transform:uppercase; }
.vt-f .vt-hero__title{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(44px,8vw,92px); line-height:.95; }

/* Seções em "capítulos", no papel kraft do folheto */
.vt-f-secao{ position:relative; overflow:hidden; padding:clamp(48px,7vw,96px) clamp(18px,4vw,40px); }
.vt-f-secao--loja,.vt-f-secao--agenda{ background:var(--kraft); border-top:3px solid var(--ink); }
.vt-f-secao > *{ position:relative; z-index:1; }
.vt-f-secao::before{
	content:''; position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:multiply; z-index:0;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Seção com ilustração de fundo (hoje a agenda do Dominguinho). Duas camadas na MESMA
   propriedade `background-image`, em vez de um pseudo-elemento novo pro véu: assim o ruído de
   papel do `::before` continua por cima de tudo e a seção segue parecendo impressa no mesmo
   kraft das outras. Com o véu num `::after` ele cobriria o ruído e a textura sumiria.
   `background-attachment:fixed` é o paralaxe: a ilustração fica presa à janela e o conteúdo
   corre por cima. Sem JS — o custo é o recorte ser pela altura da janela, não pela da seção.
   O seletor tem duas classes de propósito, pra ganhar do `background:var(--kraft)` (shorthand,
   que zera a imagem) independente da ordem das regras no arquivo. */
.vt-f .vt-f-secao--fundo{
	--agenda-veu:rgba(166,132,84,.88); /* o bege escuro que segura a leitura; ajuste o alfa aqui */
	/* Força do paralaxe: quanto a arte anda pra cada lado. É o ÚNICO número a mexer — o JS lê
	   esta variável e a folga abaixo sai dela. */
	--parallax-amplitude:300px;
	/* Sobra da camada de arte além da seção, em cima e embaixo, pro deslocamento não descobrir
	   a borda. Sempre maior que a amplitude, por isso o fator — nunca fixar em px. */
	--parallax-folga:calc(var(--parallax-amplitude) * 1.3);
}
/* A arte mora numa camada própria porque o paralaxe a move com `transform` (ver
   alumia_secao_arte() em parts.php). O véu bege vem junto, como primeira camada do
   `background-image` da própria arte: assim ele acompanha o movimento e cobre a imagem inteira. */
.vt-f-secao > .vt-secao-arte{
	position:absolute; left:0; right:0; z-index:0; pointer-events:none;
	top:calc(var(--parallax-folga) * -1); bottom:calc(var(--parallax-folga) * -1);
	background-image:linear-gradient(var(--agenda-veu), var(--agenda-veu)), var(--secao-fundo);
	background-size:auto, cover;
	background-position:center, center;
	background-repeat:no-repeat, no-repeat;
	will-change:transform;
}
/* O ruído de papel sobe pra cima da arte — senão a seção perde a textura que faz ela parecer
   impressa no mesmo kraft das outras. Continua embaixo do conteúdo, que vem depois dele no DOM. */
.vt-f .vt-f-secao--fundo::before{ z-index:1; }
.vt-f-cabeca{ max-width:60ch; margin:0 auto clamp(32px,4vw,56px); text-align:center; }
.vt-f-capitulo{ display:block; font-family:var(--f-label); font-size:17px; color:var(--vendor-primary); margin-bottom:10px; text-transform:uppercase; }
/* Peso 600, não 900: a New Spirit tem só os cortes 400 e 600, e pedir 900 faria o navegador
   engrossar o desenho à força. Vale pra todo título deste template. */
.vt-f-titulo{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(34px,5.5vw,60px);
	line-height:1; letter-spacing:-.01em; text-wrap:balance;
	text-shadow:1px 1px 0 rgba(26,26,26,.28); }
.vt-f-intro{ margin:18px 0 0; font-size:16px; line-height:1.7; color:var(--muted); }

/* Cards de produto: cartão de papel calico pregado no kraft, com a numeração do cordel */
.vt-f .vt-grid{ grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); max-width:1180px; margin:0 auto; }
.vt-f .vt-card{ position:relative; display:flex; flex-direction:column; background:var(--cal);
	border:3px solid var(--ink); box-shadow:var(--sombra); transition:transform .18s ease, box-shadow .18s ease; }
.vt-f .vt-card:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 0 var(--ink); }
.vt-f .vt-card__num{ position:absolute; left:8px; top:8px; z-index:2; background:var(--ink); color:var(--cal);
	font-family:var(--f-marca); font-size:12px; letter-spacing:.08em; padding:2px 8px; }
.vt-f .vt-card__img{ aspect-ratio:4/3; border-bottom:3px solid var(--ink); background:var(--kraft); }
.vt-f .vt-card__body{ display:flex; flex-direction:column; flex:1; gap:8px; padding:18px 18px 16px; }
.vt-f .vt-card__name{ font-family:var(--f-titulo); font-weight:600; font-size:21px; line-height:1.15; }
.vt-f .vt-card__desc{ font-size:14px; line-height:1.6; color:var(--muted); }
.vt-f .vt-card__rodape{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; }
.vt-f .vt-card__price{ font-family:var(--f-marca); font-weight:400; font-size:22px; }
.vt-f .vt-card__cta{ font-family:var(--f-corpo); font-weight:600; font-size:12px; letter-spacing:.08em;
	background:var(--vendor-primary); color:var(--cal); border:2px solid var(--ink); padding:7px 14px; transition:background .2s ease; }
.vt-f .vt-card:hover .vt-card__cta{ background:var(--mostarda); color:var(--ink); }
.vt-f .vt-empty{ text-align:center; }

/* Agenda de shows: uma grade de duas colunas, um cartão por data — data em destaque à esquerda,
   cidade e local à direita. Substituiu (2026-08-04) o desenho de cacto que ficava aqui: com dez
   datas ele esticava a seção e obrigava o olho a ziguezaguear entre os dois lados do tronco.

   A placa é o MARROM DO CABEÇALHO escurecido: `color-mix` puxa 42% da cor do parceiro contra
   preto. A cor pura do parceiro deixaria o dia em mostarda com 2,3:1 de contraste (ilegível);
   escurecida assim ele fica em 4,6:1 e o texto creme em 10,7:1. Como a mistura é derivada de
   --vendor-primary, cada loja ganha o próprio marrom sem cadastrar nada.
   A primeira declaração é o plano B pra navegador sem `color-mix`; a segunda vence onde há. */
.vt-f-agenda{
	--placa:#3a1f18;
	--placa:color-mix(in srgb, var(--vendor-primary) 42%, #101010);
	list-style:none; margin:0 auto; padding:0; max-width:1180px;
	display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.5vw,18px);
}
.vt-f-show{
	display:flex; align-items:center; gap:clamp(14px,1.6vw,20px);
	padding:15px clamp(15px,1.7vw,20px);
	background:var(--placa); color:var(--cal);
	border:3px solid var(--ink); box-shadow:var(--sombra);
	transition:box-shadow .18s ease;
}
/* Traço de mostarda na base ao passar o mouse, como no protótipo. Não usa `transform` como os
   cards de produto: aqui o cartão só é clicável quando tem link de ingresso. */
.vt-f-show:hover{ box-shadow:var(--sombra), inset 0 -4px 0 0 var(--mostarda); }

/* Data: dia/mês grande na mostarda, ano miúdo embaixo. Segue na Hello-Mixed — é justamente um
   dos lugares onde ela pode ficar, porque data não tem acento. A largura mínima é fixa pra as
   datas alinharem em coluna de um cartão pro outro. */
.vt-f-show__quando{ flex:0 0 auto; min-width:72px; text-align:center; }
.vt-f-show__dia{ display:block; font-family:var(--f-marca); font-size:clamp(19px,2vw,23px);
	line-height:1; color:var(--mostarda); }
.vt-f-show__ano{ display:block; margin-top:5px; font-family:var(--f-marca); font-size:12px;
	line-height:1; color:rgba(244,241,234,.55); }

.vt-f-show__onde{ min-width:0; }
.vt-f-show__cidade{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(17px,1.9vw,21px); line-height:1.15; }
/* O texto de apoio é rgba do creme, e não `--muted`: aquela variável é tinta escura, feita pro
   papel kraft, e sumiria sobre a placa. */
.vt-f-show__local{ margin:3px 0 0; font-size:13px; line-height:1.4; color:rgba(244,241,234,.6); }

.vt-f-show__acao{ flex:0 0 auto; margin-left:auto; padding-left:8px; }
.vt-f-show__btn{ display:inline-block; font-family:var(--f-corpo); font-weight:600; font-size:12px;
	letter-spacing:.06em; white-space:nowrap; text-transform:uppercase;
	background:var(--mostarda); color:var(--ink); border:2px solid var(--ink); padding:7px 13px;
	transition:background .2s ease; }
.vt-f-show__btn:hover{ background:var(--cal); }
/* Show realizado continua na lista como memória da turnê, mas apagado e sem chamada de ação. */
.vt-f-show.is-passou{ box-shadow:none; opacity:.6; }
.vt-f-show.is-passou:hover{ box-shadow:none; }
.vt-f-show__carimbo{ display:inline-block; font-family:var(--f-label); font-size:11px;
	letter-spacing:.1em; white-space:nowrap; border:2px solid currentColor; padding:5px 9px;
	color:rgba(244,241,234,.6); transform:rotate(-3deg); text-transform:uppercase; }


/* Patrocínio */
.vt-f-patro{ padding:clamp(36px,5vw,64px) clamp(18px,4vw,40px); background:var(--ink); color:var(--cal); text-align:center; }
.vt-f-patro__label{ display:block; font-family:var(--f-label); font-size:13px; letter-spacing:.16em;
	 opacity:.65; margin-bottom:24px; text-transform:uppercase; }
.vt-f-patro__logos{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(24px,4vw,52px); }
.vt-f-patro__logos img{ max-height:52px; width:auto; opacity:.85; filter:brightness(0) invert(1); transition:opacity .2s ease; }
.vt-f-patro__logos a:hover img{ opacity:1; }

/* Hero do Template F: cartaz de página inteira, texto sobre a mídia */
.vt-f .vt-vhero{ background:var(--ink); }
.vt-f .vt-vhero__media{ aspect-ratio:16/9; min-height:min(78vh,640px); }
.vt-f .vt-vhero__media img{ opacity:.55; }
.vt-f .vt-vhero__media::after{ content:''; position:absolute; inset:0; z-index:2;
	background:linear-gradient(to bottom, rgba(26,26,26,.55), rgba(26,26,26,.35) 45%, rgba(26,26,26,.85)); }
.vt-f .vt-vhero__body{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center; padding:clamp(24px,5vw,56px); color:var(--cal); }
.vt-f .vt-vhero__eyebrow{ font-family:var(--f-label); font-size:15px; letter-spacing:.34em;
	 margin-bottom:14px; text-transform:uppercase; }
/* Corpo menor que na versão anterior: a Hello-Mixed é fonte de cartaz e aguentava 150px; a
   New Spirit é serifada e no mesmo tamanho estouraria a dobra. */
.vt-f .vt-vhero__title{ font-family:var(--f-titulo); font-weight:600;
	font-size:clamp(44px,8.5vw,112px); line-height:.95; letter-spacing:-.02em; }
.vt-f .vt-vhero__title--logo img{ margin:0 auto; max-width:min(88vw,760px); max-height:34vh; }
.vt-f .vt-vhero__text{ margin-top:18px; font-size:clamp(16px,2vw,22px); line-height:1.55; max-width:34ch; }
/* O CTA "Comprar ingresso" saiu da hero (2026-08-04) — mora agora em `.vt-cta-final`, depois da
   agenda. `.vt-vhero__acoes` na hero só sobra pro botão de som, então virou o próprio âncora de
   canto: `position:absolute` no canto inferior direito. O ancestral posicionado mais próximo é
   `.vt-vhero__body` (que tem `inset:0` — cobre a hero inteira), então `right`/`bottom` aqui
   valem como se fossem relativos à própria seção `.vt-vhero`. Como `som` só existe com vídeo (e
   vídeo sempre implica `.vt-vhero__body` posicionado, nunca o caso "--sem-foto"), não há
   ancestral errado pra se preocupar. */
.vt-f .vt-vhero__acoes{ position:absolute; right:clamp(18px,4vw,40px); bottom:clamp(18px,4vw,40px); z-index:4; }
.vt-f .vt-vhero__cta{ display:inline-block; font-family:var(--f-corpo); font-weight:600; font-size:16px; letter-spacing:.06em;
	background:var(--vendor-primary); color:var(--cal); border:3px solid var(--ink); border-radius:999px;
	padding:15px 34px; box-shadow:var(--sombra); transition:background .2s ease, color .2s ease; }
.vt-f .vt-vhero__cta:hover{ background:var(--mostarda); color:var(--ink); }
.vt-f .vt-vhero__som{ font-family:var(--f-corpo); font-weight:600; font-size:14px; letter-spacing:.08em;
	 color:var(--cal); border:2px solid rgba(244,241,234,.6); border-radius:999px;
	padding:13px 24px; transition:border-color .2s ease, color .2s ease; }
.vt-f .vt-vhero__som:hover{ border-color:var(--cal); }
.vt-f .vt-vhero__som[aria-pressed="true"]{ border-color:var(--mostarda); color:var(--mostarda); }
/* Sem foto nem vídeo a hero vira um cartaz de tinta chapada, sem altura de tela cheia. */
.vt-f .vt-vhero--sem-foto{ padding:clamp(48px,8vw,104px) clamp(18px,4vw,40px); }
.vt-f .vt-vhero--sem-foto .vt-vhero__body{ position:static; padding:0; }

/* CTA final: o botão que antes ficava na hero, agora depois da agenda — mesma pele do
   `.vt-vhero__cta`, só que numa faixa própria pra fechar a página com peso visual. */
.vt-f .vt-cta-final{ padding:clamp(48px,7vw,88px) clamp(18px,4vw,40px); background:var(--ink); text-align:center; }

/* Produto e carrinho */
.vt-f .vt-main{ padding:clamp(32px,5vw,64px) clamp(18px,4vw,40px); max-width:1180px; margin:0 auto; }
.vt-f .vt-product__back{ font-family:var(--f-label); font-size:14px; color:var(--vendor-primary); opacity:1; text-transform:uppercase; }
.vt-f .vt-product__media{ border:3px solid var(--ink); box-shadow:var(--sombra); background:var(--kraft); }
.vt-f .vt-product__title{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(30px,4.6vw,52px); line-height:1.05; }
.vt-f .vt-product__price{ font-family:var(--f-marca); font-weight:400; font-size:26px; color:var(--vendor-primary); }
.vt-f .vt-product__desc{ font-size:15.5px; line-height:1.75; opacity:1; color:var(--muted); }
.vt-f button.single_add_to_cart_button,.vt-f .vt-combo__btn,.vt-f .vt-cart .button,.vt-f .vt-cart button{
	font-family:var(--f-corpo); font-weight:600; letter-spacing:.06em; border-radius:0;
	background:var(--vendor-primary); color:var(--cal); border:3px solid var(--ink); box-shadow:4px 4px 0 0 var(--ink); }
.vt-f .vt-cart__label{ font-family:var(--f-label); font-size:15px; color:var(--vendor-primary); margin-bottom:8px; text-transform:uppercase; }
.vt-f .vt-cart__title{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(32px,5vw,52px); }

/* Conta do comprador no papel do cordel: abas com a mesma tinta grossa das outras bordas. */
.vt-f .vt-account .woocommerce-MyAccount-navigation ul{
	font-family:var(--f-corpo); font-weight:600; font-size:15px; border-bottom:3px solid var(--ink); gap:4px 26px;
}
.vt-f .vt-account .woocommerce-MyAccount-navigation-link.is-active a{ box-shadow:0 3px 0 0 var(--vendor-primary); }
.vt-f .vt-account label{ font-family:var(--f-label); }
.vt-f .vt-account #customer_login h2{ font-family:var(--f-titulo); font-weight:600; font-size:24px; }
.vt-f .vt-account fieldset{ border:3px solid var(--ink); background:var(--cal); }
.vt-f .vt-account__voltar{ font-family:var(--f-label); text-transform:uppercase; }

.vt-f .vt-footer{ padding:26px clamp(18px,4vw,40px); background:var(--ink); color:var(--cal);
	font-family:var(--f-label); font-size:13px; text-transform:uppercase; }
.vt-f .vt-footer a:hover{ color:var(--mostarda); }
.vt-f .vt-redes a:hover{ color:var(--mostarda); }

/* ===================== HERO OPCIONAL (.vt-vhero) =====================
   Markup igual pros 4 templates (alumia_vendor_hero() em parts.php); cada pele
   reinterpreta. Só sai quando projeto_hero_ativa está marcado — e nesse caso substitui
   o bloco .vt-hero padrão, pra o nome da loja não aparecer duas vezes. */
.vt-vhero{ position:relative; }
.vt-vhero__media{ position:relative; overflow:hidden; }
.vt-vhero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vt-vhero__eyebrow{ display:block; }
.vt-vhero__title{ margin:0 !important; text-wrap:balance; }
.vt-vhero__text{ margin:0; }
.vt-vhero__cta{ display:inline-block; }
/* Wrapper dos botões deixado como bloco de propósito: os filhos ficam inline-block e herdam
   o text-align de cada pele (o Template D centraliza a hero), o que um flex container quebraria.
   Cada .vt-* já dá o margin-top no próprio .vt-vhero__cta, então nada muda pra quem já existia. */
.vt-vhero__acoes{ display:block; }
.vt-vhero__som{ display:inline-block; cursor:pointer; font:inherit; color:inherit; background:none; border:0; padding:0; }
.vt-vhero__title--logo img{ width:auto; max-width:min(100%,520px); height:auto; }

/* --- A — Minimal: split, muito ar, sem texto sobre imagem --- */
.vt-a .vt-vhero{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,4vw,56px);
	padding:clamp(36px,5vw,64px) clamp(20px,4vw,32px); border-bottom:1px solid var(--line); }
.vt-a .vt-vhero__media{ aspect-ratio:4/3; order:2; }
.vt-a .vt-vhero__eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.vt-a .vt-vhero__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(30px,4.4vw,46px); line-height:1.06; max-width:15ch; }
.vt-a .vt-vhero__text{ margin-top:18px; font-size:15px; line-height:1.65; color:var(--muted); max-width:42ch; }
.vt-a .vt-vhero__cta{ margin-top:28px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
	border:1px solid var(--ink); padding:13px 22px; transition:background .2s, color .2s; }
.vt-a .vt-vhero__cta:hover{ background:var(--ink); color:var(--paper); }

/* --- B — Riso / Cartaz: imagem vira pôster, título por cima --- */
.vt-b .vt-vhero{ padding:clamp(20px,3vw,30px) clamp(18px,4vw,28px) clamp(28px,4vw,40px); }
.vt-b .vt-vhero__media{ aspect-ratio:16/10; border:3px solid var(--ink); }
.vt-b .vt-vhero__media::after{ content:''; position:absolute; inset:0; background:var(--riso-spot2); mix-blend-mode:color-burn; opacity:.42; }
/* O bloco de texto invade a foto sobre um retângulo de papel: sem ele, um título de duas
   linhas começa em cima da imagem e some no meio da fotografia. Com o papel, a leitura
   fica garantida independente do tamanho do título — e o efeito de cartaz colado continua. */
.vt-b .vt-vhero__body{ position:relative; margin:-58px 14px 0; padding:16px 18px 6px; background:var(--riso-paper); }
.vt-b .vt-vhero__eyebrow{ display:inline-block; background:var(--riso-spot1); color:#fff; font-size:11px; letter-spacing:.1em;
	text-transform:uppercase; padding:5px 12px; transform:rotate(-2deg); margin-bottom:12px; }
.vt-b .vt-vhero__title{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(44px,9vw,86px); line-height:.88;
	text-transform:uppercase; letter-spacing:.01em; }
.vt-b .vt-vhero__text{ margin-top:16px; font-size:13px; line-height:1.6; max-width:46ch; }
.vt-b .vt-vhero__cta{ margin-top:22px; background:var(--riso-spot1); color:#fff; font-size:12px; letter-spacing:.1em;
	text-transform:uppercase; padding:12px 20px; transform:rotate(-1deg); }

/* --- C — Grid Hype: full-bleed escuro, título gigante no rodapé da imagem --- */
.vt-c .vt-vhero__media{ aspect-ratio:21/9; }
/* O escurecimento sobe forte antes de chegar no texto: com um degradê suave, o eyebrow na
   cor do parceiro (que pode ser escura) fica ilegível sobre a parte clara da foto. */
.vt-c .vt-vhero__media::after{ content:''; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 38%, rgba(10,10,10,.90) 76%, var(--paper) 100%); }
.vt-c .vt-vhero__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 clamp(18px,4vw,28px) clamp(22px,3vw,34px); }
/* Chip sólido em vez de texto colorido solto: a cor do parceiro pode ser escura, e sobre
   foto ela sumiria mesmo com o degradê. Mesmo recurso que o template já usa nos selos de
   estoque. */
.vt-c .vt-vhero__eyebrow{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
	text-transform:uppercase; background:var(--vendor-primary); color:#fff; padding:5px 10px; margin-bottom:14px; }
.vt-c .vt-vhero__title{ font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(38px,7.5vw,76px); line-height:.92; text-transform:uppercase; }
.vt-c .vt-vhero__text{ margin-top:14px; font-size:14px; line-height:1.6; max-width:48ch; opacity:.82; }
.vt-c .vt-vhero__cta{ margin-top:22px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
	border:1px solid var(--vendor-primary); color:var(--vendor-primary); padding:12px 20px; transition:background .2s, color .2s; }
.vt-c .vt-vhero__cta:hover{ background:var(--vendor-primary); color:#0a0a0a; }

/* --- D — Catálogo: faixa larga + bloco de texto centrado embaixo --- */
.vt-d .vt-vhero{ padding:0 0 clamp(28px,4vw,44px); border-bottom:1px solid var(--line); }
.vt-d .vt-vhero__media{ aspect-ratio:21/8; }
.vt-d .vt-vhero__body{ max-width:60ch; margin:0 auto; padding:clamp(26px,3.5vw,40px) clamp(20px,4vw,32px) 0; text-align:center; }
.vt-d .vt-vhero__eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:14px; }
.vt-d .vt-vhero__title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(28px,4.4vw,44px); line-height:1.12; }
.vt-d .vt-vhero__text{ margin-top:16px; font-size:15px; line-height:1.7; color:var(--muted); }
.vt-d .vt-vhero__cta{ margin-top:26px; background:var(--vendor-primary); color:#fff; font-size:13px; letter-spacing:.04em; padding:13px 26px; }

/* --- E — Street/Mono: mesma lógica do C (texto sobre a foto), com a tipografia da rua --- */
.vt-e .vt-vhero__media{ aspect-ratio:21/9; }
.vt-e .vt-vhero__media::after{ content:''; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 38%, rgba(10,10,10,.92) 78%, var(--paper) 100%); }
.vt-e .vt-vhero__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 clamp(18px,4vw,40px) clamp(24px,3vw,36px); }
.vt-e .vt-vhero__eyebrow{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:8px; }
.vt-e .vt-vhero__eyebrow::before{ content:'/// '; }
.vt-e .vt-vhero__title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,9vw,124px); line-height:.88; color:#fff; }
.vt-e .vt-vhero__text{ margin-top:12px; font-size:13.5px; line-height:1.75; color:#b0b0b0; max-width:52ch; }
.vt-e .vt-vhero__cta{ margin-top:22px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
	border:1px solid var(--vendor-primary); color:var(--vendor-primary); padding:13px 22px; transition:background .25s, color .25s; }
.vt-e .vt-vhero__cta:hover{ background:var(--vendor-primary); color:#fff; }

/* Vídeo de fundo do YouTube na hero. O iframe não aceita object-fit, então o corte
   "cover" é feito dimensionando o player pelas unidades de container: o que for maior
   entre a largura cheia e a altura cheia na proporção 16:9. */
.vt-vhero__media--video{ background:#000; }
.vt-vhero__video{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.vt-vhero__video iframe{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:100%; height:100%; border:0;
	/* O `iframe{max-width:100%}` que vem do tema/WooCommerce trava a largura no tamanho do
	   container e impede o corte "cover" — sem isto, o player fica exatamente do tamanho da
	   caixa e a interface do YouTube volta a aparecer. */
	max-width:none; max-height:none;
}
@supports (width: 1cqw){
	.vt-vhero__media--video{ container-type:size; }
	/* O 1.4 é o que esconde a interface do YouTube: `controls=0` tira a barra de controles,
	   mas o título/canal no topo e o "Mais vídeos" + logo no rodapé continuam aparecendo
	   antes de tocar e ao pausar. Ampliando o player além do "cover", essas faixas caem
	   fora da área visível. Custo: o enquadramento fica ~20% mais fechado que o original. */
	.vt-vhero__video iframe{
		width:calc(max(100cqw, 177.78cqh) * 1.4);
		height:calc(max(56.25cqw, 100cqh) * 1.4);
	}
}
/* O scrim dos templates escuros precisa continuar por cima do vídeo. */
.vt-c .vt-vhero__media::after,
.vt-e .vt-vhero__media::after,
.vt-b .vt-vhero__media::after{ z-index:2; }
/* Quem pediu menos animação no sistema fica com a foto parada — e se não houver foto,
   com o fundo preto do bloco em vez de um vídeo rodando sem ter sido pedido. */
@media (prefers-reduced-motion: reduce){
	.vt-vhero__video{ display:none; }
}

/* Sem imagem a hero vira só o bloco de texto — cada pele para de depender da foto pra
   não abrir um buraco vazio na página. */
.vt-vhero--sem-foto .vt-vhero__body{ position:static; margin:0; }
.vt-a .vt-vhero--sem-foto{ grid-template-columns:1fr; }
.vt-b .vt-vhero--sem-foto .vt-vhero__body{ padding:0; }
.vt-c .vt-vhero--sem-foto{ padding:clamp(40px,6vw,72px) clamp(18px,4vw,28px); border-bottom:1px solid var(--line); }
.vt-d .vt-vhero--sem-foto{ padding-top:clamp(20px,3vw,32px); }

/* --- Logo do parceiro no nav (quando cadastrado) --- */
.vt-nav__logo--img{ display:flex; align-items:center; }
.vt-nav__logo--img img{ height:30px; width:auto; max-width:190px; object-fit:contain; }
/* No Template C o fundo é preto: logo escuro sumiria. Forçar branco é mais previsível do
   que depender de o parceiro mandar uma segunda versão do arquivo. */
.vt-c .vt-nav__logo--img img{ filter:brightness(0) invert(1); }

/* ===================== "EM BREVE" (loja não pública) =====================
   Serve todos os templates: o <body> herda a classe raiz do template escolhido, então as
   variáveis de cor e a fonte de cada pele já valem aqui. */
.vt-soon{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.vt-soon__inner{ max-width:46ch; text-align:center; }
.vt-soon__eyebrow{
	display:block; font-family:'JetBrains Mono', ui-monospace, monospace;
	font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--vendor-primary); margin-bottom:18px;
}
.vt-soon__title{ font-size:clamp(30px,6vw,52px); line-height:1.05; text-wrap:balance; }
.vt-soon__msg{ margin:20px 0 28px; font-size:15px; line-height:1.6; color:var(--muted); }
.vt-soon__link{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:2px; }

.vt-a .vt-soon__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; }
.vt-b .vt-soon__eyebrow{ color:var(--riso-spot1); }
.vt-b .vt-soon__title{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; }
.vt-c .vt-soon__title{ font-family:'Archivo Black',sans-serif; font-weight:400; text-transform:uppercase; }
.vt-d .vt-soon__title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; }

/* Tarja que só admin/parceiro enxergam: sem ela é fácil olhar a loja logado, achar que está
   no ar, e ela estar invisível pro público. */
.alumia-preview-bar{
	position:relative; z-index:99; background:#bd8600; color:#fff;
	font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.04em;
	text-align:center; padding:8px 14px;
}
.alumia-preview-bar a{ color:#fff !important; text-decoration:underline !important; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 900px){
	.vt-a .vt-grid,.vt-b .vt-grid,.vt-c .vt-grid,.vt-d .vt-grid,.vt-e .vt-grid,.vt-f .vt-grid{ grid-template-columns:repeat(2,1fr); }
	.vt-product{ grid-template-columns:1fr; }
	.vt-c .vt-hero__meta{ text-align:left; }
	.vt-a .vt-vhero{ grid-template-columns:1fr; }
	.vt-a .vt-vhero__media{ order:0; aspect-ratio:16/10; }
	.vt-c .vt-vhero__media{ aspect-ratio:4/3; }
	.vt-d .vt-vhero__media{ aspect-ratio:16/9; }
	.vt-e .vt-vhero__media{ aspect-ratio:4/3; }
	.vt-f .vt-vhero__media{ aspect-ratio:3/4; min-height:0; }
}
@media (max-width: 560px){
	/* Com "Minha conta" no menu (e a logo do parceiro no lugar do nome), os links não cabem
	   mais na mesma linha da marca em tela de celular — o último item saía pra fora da tela.
	   A nav passa a ter duas linhas: marca em cima, links centralizados embaixo. */
	.vt-nav{ flex-wrap:wrap; justify-content:center; row-gap:12px; }
	.vt-nav__links{ width:100%; justify-content:center; }
}
@media (max-width: 520px){
	.vt-nav__links{ gap:16px; font-size:10px; }
	.vt-a .vt-grid,.vt-b .vt-grid,.vt-c .vt-grid,.vt-d .vt-grid,.vt-e .vt-grid,.vt-f .vt-grid{ grid-template-columns:1fr; }
	.vt-e .vt-card__body{ border-right:none; }
}
/* Uma coluna quando não cabem duas placas lado a lado. Abaixo de 860px cada cartão teria menos
   de 400px e o nome do local começaria a quebrar em duas linhas. */
@media (max-width: 860px){
	.vt-f-agenda{ grid-template-columns:1fr; }
}
/* ---- Painel do parceiro (Dokan) ----
   Markup todo gerado pelo shortcode [dokan-dashboard]: menu lateral, cartões de resumo,
   tabela de pedidos, formulários de produto e de saque.

   Decisão de desenho: o CONTEÚDO do painel sai numa área clara nos 6 templates, e não na pele
   do parceiro. É ferramenta de trabalho, não vitrine — nos templates de fundo preto (C e E) as
   tabelas e formulários do plugin ficariam ilegíveis, e reescrever o CSS do Dokan seis vezes
   pra pintar o mesmo formulário não se paga. A moldura (nav e rodapé) segue com a marca e a
   cor do parceiro entra nos links e no item ativo do menu, então ele nunca perde de vista
   em qual loja está. */
.vt-painel{
	--painel-tinta:#1f2430;
	--painel-papel:#ffffff;
	--painel-linha:rgba(31,36,48,.14);
	/* O Dokan pinta a coluna do menu de roxo escuro (#322067) e o item ativo de #7047EB — cores
	   da marca DELES, que não têm nada a ver com a do parceiro. O fundo é lido de variável, então
	   basta redefini-la aqui em vez de caçar seletor: */
	--dokan-sidebar-background-color:transparent;
	/* `width:100%` não é redundante. A `.vt-main` de alguns templates usa `margin:0 auto` pra
	   centralizar, e margem automática no eixo transversal de um container flex em coluna
	   (a `.vt-shell`) DESLIGA o stretch: o elemento passa a ter a largura do conteúdo. Numa
	   vitrine isso não aparece (o conteúdo é largo), mas no painel a caixa encolhia pra ~785px
	   de 1280 e a linha flex do menu + conteúdo quebrava, jogando o conteúdo pra debaixo do
	   menu. Com largura explícita ela volta a ocupar o disponível até o `max-width` da pele. */
	width:100%;
}
.vt-painel .dokan-dashboard-wrap{
	display:flex; flex-wrap:wrap; gap:clamp(18px,2.5vw,32px);
	align-items:flex-start;
	margin-top:clamp(22px,3vw,34px);
	background:var(--painel-papel); color:var(--painel-tinta);
	padding:clamp(16px,2.5vw,28px);
	font-size:14.5px; line-height:1.6;
}
/* Cor de link e de texto declaradas no elemento, não só no ancestral: `.vt a{color:inherit}`
   da base tem a mesma especificidade que herança nenhuma resolve — é a pegadinha de sempre. */
.vt-painel .dokan-dashboard-wrap a{ color:var(--vendor-primary); }
.vt-painel .dokan-dashboard-wrap a:hover{ opacity:.75; }

/* Dokan empilha o painel com float (sidebar + conteúdo). Anulamos e usamos flex: o float
   deixava o conteúdo escapar pra fora da nossa `.vt-main` em telas estreitas. */
.vt-painel .dokan-dash-sidebar,
.vt-painel .dokan-dashboard-content{ float:none !important; width:auto !important; margin:0; }
.vt-painel .dokan-dash-sidebar{ flex:0 0 210px; }
/* `flex-basis` pequeno de propósito: com um valor grande (420px) a soma menu + base + gap
   passava do disponível em telas médias e a linha quebrava, empilhando conteúdo embaixo do
   menu. Crescendo a partir de 300px ele ocupa tudo o que sobra sem nunca forçar a quebra. */
.vt-painel .dokan-dashboard-content{ flex:1 1 300px; min-width:0; }

/* Os seletores abaixo repetem a cadeia do Dokan (`.dokan-dash-sidebar ul.dokan-dashboard-menu
   li a`) de propósito: as regras dele têm 3 classes + 3 elementos, e um seletor mais curto
   nosso perde por especificidade mesmo carregando depois. Empatando, o nosso vence por vir
   por último — e o `!important` fica só no punhado de propriedades que ele também força. */
.vt-painel .dokan-dash-sidebar{ background:transparent !important; }
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu{
	list-style:none; margin:0; padding:0; font-size:13.5px;
	background:transparent !important;
	border-right:1px solid var(--painel-linha);
}
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li{
	margin:0; padding:0; border:0; list-style:none; float:none; width:auto;
	background:transparent !important;
}
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li a{
	display:block; padding:11px 14px 11px 4px; color:var(--painel-tinta) !important; opacity:.72;
	font-weight:400;
}
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover{ background:rgba(31,36,48,.05) !important; }
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li a:hover{ opacity:1; }
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li.active{ background:transparent !important; }
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a{
	opacity:1; color:var(--vendor-primary) !important; font-weight:700;
	box-shadow:inset -2px 0 0 0 var(--vendor-primary);
}
/* A seta branca que o Dokan desenha no item ativo aponta pra fora da coluna roxa; sem a coluna
   ela fica um triângulo solto no meio do nada. */
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li.active:after{ content:none !important; display:none !important; }
/* Os ícones do menu são Font Awesome, que só carrega porque os assets passaram a sair do host
   da loja (ver `style_loader_src` no roteador). Se um dia voltarem a ficar quadradinhos vazios,
   é CORS de fonte outra vez — não é o CSS daqui. */
.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li a i{ width:20px; padding-right:8px; opacity:.6; font-size:14px; }

/* Cartões de resumo: o Dokan usa uma grade própria de 12 colunas em float. */
.vt-painel .dokan-w6,
.vt-painel .dokan-w4,
.vt-painel .dokan-w8,
.vt-painel .dokan-w3{ float:none !important; width:auto !important; }
.vt-painel .dokan-dash-left,
.vt-painel .dokan-dash-right{ margin:0 0 clamp(16px,2vw,24px); }
.vt-painel .dashboard-widget,
.vt-painel .dokan-panel{
	border:1px solid var(--painel-linha); background:var(--painel-papel);
	padding:16px 18px; margin:0 0 16px; box-shadow:none;
}
.vt-painel .dashboard-widget h2,
.vt-painel .dokan-panel-heading{
	font-size:13px !important; letter-spacing:.06em; text-transform:uppercase;
	opacity:.65; margin:0 0 12px !important; padding:0 0 10px !important;
	border-bottom:1px solid var(--painel-linha);
}

/* Tabelas: herdam a pele de `.vt-cart` (aplicada junto no template), aqui só o que o painel
   pede a mais. Tabela larga rola dentro da própria caixa — o corpo da página nunca rola
   na horizontal. */
.vt-painel .dokan-table-responsive,
.vt-painel .dokan-orders-content{ overflow-x:auto; }
.vt-painel table{ font-size:13.5px; }
.vt-painel table th{
	font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; opacity:.6;
	white-space:nowrap;
}
.vt-painel table th,.vt-painel table td{ border-bottom:1px solid var(--painel-linha); }

/* Botões do Dokan: a pele de `.vt-cart` os deixa em caixa alta e com a cor do parceiro, o que
   funciona pro botão principal e some com os secundários. Aqui o secundário volta a ser
   discreto, sem virar seis regras por template.
   `.dokan-btn-theme` é o roxo da marca do Dokan (#7047EB) — nos botões de exportar, que são
   ação secundária, ele virava a coisa mais chamativa da tela, ao lado do "Filtrar" que já
   está na cor do parceiro. */
.vt-painel .dokan-btn-default,
.vt-painel .dokan-btn-theme,
.vt-painel input.dokan-btn-theme,
.vt-painel a.dokan-btn-theme,
.vt-painel button.dokan-btn-theme{
	background:transparent !important; color:var(--painel-tinta) !important;
	border:1px solid var(--painel-linha) !important; box-shadow:none !important;
	text-shadow:none !important; font-weight:500;
}
.vt-painel .dokan-btn-default:hover,
.vt-painel .dokan-btn-theme:hover{ background:rgba(31,36,48,.05) !important; }

/* Fileira de filtros (pedidos, produtos): o Dokan a monta como flex, e o `width:100%` que os
   campos herdam da pele de carrinho fazia os quatro brigarem pela mesma largura e encolherem
   até cortar o texto do placeholder — "Buscar pedidos" aparecia como "Buscar pedi". */
.vt-painel .dokan-form-group{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vt-painel .dokan-form-group input[type="text"],
.vt-painel .dokan-form-group input[type="search"],
.vt-painel .dokan-form-group select,
.vt-painel .dokan-form-group .select2-container{
	width:auto !important; min-width:190px; flex:0 1 auto;
}
.vt-painel input[type="text"],.vt-painel input[type="email"],.vt-painel input[type="tel"],
.vt-painel input[type="number"],.vt-painel input[type="password"],
.vt-painel select,.vt-painel textarea{
	border-color:var(--painel-linha); color:var(--painel-tinta); background:var(--painel-papel);
}
.vt-painel label{ color:var(--painel-tinta); }

/* ---- Seção "Acertos" (nossa, não do Dokan) ----
   Vive na mesma área clara do painel. O valor a receber é a única coisa em corpo grande: é a
   resposta à pergunta que trouxe o parceiro até aqui. */
.vt-painel .al-acertos__titulo{
	font-size:20px !important; margin:0 0 10px !important; color:var(--painel-tinta) !important;
}
.vt-painel .al-acertos__intro{ margin:0 0 22px; font-size:13.5px; opacity:.7; max-width:56ch; }
.vt-painel .al-acerto__sub{
	font-size:12px !important; letter-spacing:.06em; text-transform:uppercase;
	opacity:.6; margin:26px 0 10px !important; color:var(--painel-tinta) !important;
}
.vt-painel .al-acertos__tabela{ width:100%; border-collapse:collapse; }
.vt-painel .al-acertos__num{ text-align:right; white-space:nowrap; }
.vt-painel .al-acerto__linha-total th,
.vt-painel .al-acerto__linha-total td{
	border-top:2px solid var(--painel-linha); border-bottom:0;
	font-size:15px; text-transform:none; letter-spacing:0; opacity:1;
}

/* O bloco do valor: fundo na cor do parceiro a 8% em vez de sólido — sólido brigaria com a
   legibilidade em paletas claras (a mostarda do Template B, por exemplo) e obrigaria a calcular
   contraste de texto por template. */
.vt-painel .al-acerto__total{
	display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px;
	margin:0 0 8px; padding:18px 20px;
	background:rgba(31,36,48,.05); /* plano B onde color-mix não existir */
	background:color-mix(in srgb, var(--vendor-primary) 8%, transparent);
	border-left:3px solid var(--vendor-primary);
}
.vt-painel .al-acerto__total-rotulo{
	font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.7;
}
.vt-painel .al-acerto__total-valor{
	font-size:clamp(26px,4vw,34px); line-height:1; color:var(--vendor-primary);
}
.vt-painel .al-acertos__voltar{ margin:0 0 14px; font-size:13px; }
.vt-painel .al-acertos__nota{ margin:22px 0 0; font-size:12.5px; opacity:.65; }
.vt-painel .al-acertos__vazio{
	padding:26px 22px; border:1px dashed var(--painel-linha); font-size:14px;
}
.vt-painel .al-acertos__vazio p{ margin:0 0 8px; }
.vt-painel .al-acertos__vazio p:last-child{ margin:0; opacity:.75; }


/* Previsão do próximo acerto: o mesmo bloco de valor, com a barra TRACEJADA e o número na tinta
   do painel em vez da cor do parceiro. O acerto fechado é o único com a barra sólida e o valor
   colorido — a diferença entre "estimado" e "definitivo" fica visível antes de ler a legenda. */
.vt-painel .al-acerto__total--previsao{
	background:rgba(31,36,48,.035); /* plano B onde color-mix não existir */
	background:color-mix(in srgb, var(--vendor-primary) 4%, transparent);
	border-left:3px dashed var(--vendor-primary);
}
.vt-painel .al-acerto__total--previsao .al-acerto__total-valor{ color:var(--painel-tinta); }

.vt-painel .al-acertos__aviso{
	margin:0 0 6px; padding:10px 0 0;
	font-size:13px; line-height:1.55; opacity:.78; max-width:62ch;
}
.vt-painel .al-acertos__cta{ margin:0 0 26px; font-size:13px; }
.vt-painel .al-acertos__ver{ white-space:nowrap; }
/* A linha inteira do histórico se acende no mouse. O alvo de clique continua sendo os links
   (data, valor e "ver detalhe"), mas sem o realce da linha só a data parecia clicável. */
.vt-painel .al-acertos__tabela--historico tbody tr:hover{ background:rgba(31,36,48,.04); }
.vt-painel .al-acertos__link{ display:inline-block; }

/* Rodapé de links do próprio Dokan ("Visit your store", nota de avaliação do plugin). */
.vt-painel .dokan-common-links{
	flex:1 1 100%; margin:clamp(14px,2vw,22px) 0 0; padding-top:14px;
	border-top:1px solid var(--painel-linha); font-size:12.5px; opacity:.7;
}
.vt-painel .dokan-common-links ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap; }

@media (max-width:760px){
	.vt-painel .dokan-dash-sidebar{ flex-basis:100%; padding:0 !important; }
	/* No celular o Dokan troca a coluna por um botão ☰ próprio — só CSS, com um checkbox
	   escondido. Mantemos o dele em vez de forçar abas horizontais: a regra que esconde a lista
	   usa `#dokan-navigation` (id), e nenhum seletor de classe nosso ganharia dela.
	   O que faltava era ENXERGAR o botão: ele vem com `color:#fff`, branco sobre o painel
	   branco — na tela aparecia como um quadradinho vazio. */
	.vt-painel #mobile-menu-icon{
		color:var(--painel-tinta) !important; font-size:22px; line-height:1;
		background:none !important; border:0 !important; box-shadow:none !important;
		width:auto; padding:2px 4px; cursor:pointer;
	}
	/* O Dokan fixa `height:33px` neste container e a lista aberta vaza por cima do conteúdo de
	   baixo. Com altura automática ela empurra o conteúdo, como deve. */
	.vt-painel #dokan-navigation{ height:auto !important; }
	.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu{
		border-right:0; border-bottom:1px solid var(--painel-linha);
	}
	/* Aberta, a lista é vertical (o Dokan força `display:block`). Os itens ocupam a linha toda,
	   e a marca do item ativo passa pra esquerda — à direita não há mais divisória onde encostar.
	   O `border-right:1px solid #454545` que o Dokan põe entre itens no celular é uma linha
	   escura solta no meio de um painel claro. */
	.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li{
		display:block; width:100%; border-right:0 !important;
	}
	.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li a{ padding:10px 4px !important; }
	.vt-painel .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a{
		box-shadow:inset 3px 0 0 0 var(--vendor-primary); padding-left:12px !important;
	}
	/* A coluna "ver detalhe" sai: a data já é o link, e cinco colunas em 375px cortariam o
	   valor, que é justamente o que o parceiro veio ver. */
	.vt-painel .al-acertos__acao{ display:none; }
	.vt-painel .al-acertos__tabela{ font-size:13px; }
	.vt-painel .al-acertos__tabela th,
	.vt-painel .al-acertos__tabela td{ padding:10px 6px; }
}

@media (prefers-reduced-motion: reduce){
	.vt *{ transition:none !important; animation:none !important; }
	.vt-b .vt-card{ transform:none !important; }
}

/* O parceiro é somente leitura: sem ações em massa na listagem de produtos.
   A trava de verdade é a capability (mu-plugin alumia-painel-parceiro.php); isto só evita
   desenhar um controle que nunca vai funcionar. */
.vt-painel #dokan-bulk-action-selector,
.vt-painel #dokan-bulk-action-submit { display: none !important; }

/* Cartões de resumo na home do painel do parceiro (inc/painel-resumo.php).
   Substituem os contadores do Dokan, que somavam pedido do WooCommerce e davam zero. */
.vt-painel .al-resumo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 0 0 26px;
}
.vt-painel .al-resumo__card {
	display: block;
	padding: 18px 18px 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	background: #fff;
	text-decoration: none !important;
	color: var(--painel-tinta, #1a1a1a) !important;
	transition: border-color .18s ease, transform .18s ease;
}
a.al-resumo__card:hover {
	border-color: var(--vendor-primary, #1a1a1a);
	transform: translateY(-2px);
}
.vt-painel .al-resumo__card--destaque { border-left: 4px solid var(--vendor-primary, #1a1a1a); }
.vt-painel .al-resumo__card--vazio { opacity: .72; }
.vt-painel .al-resumo__rotulo {
	display: block;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .62;
	margin-bottom: 6px;
}
.vt-painel .al-resumo__valor {
	display: block;
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.1;
	font-weight: 600;
}
.vt-painel .al-resumo__nota {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	opacity: .6;
}
/* Nota de estimativa da aba Vendas. */
.vt-painel .al-vendas__nota {
	margin: -6px 0 26px;
	font-size: 12.5px;
	line-height: 1.5;
	opacity: .68;
}