/* =========================================================================
   Edu Radiadores — folha de estilo principal
   Tokens de design extraídos do site de referência (eduradiadores.com.br).
   ========================================================================= */

/* Roboto auto-hospedado (perf): elimina o request render-blocking pro
   fonts.googleapis.com + a conexão externa ao fonts.gstatic.com. É a fonte
   variável v51 do Google (um único woff2 cobre 400/500/700 — por isso só 2
   arquivos, latin + latin-ext, em vez de 6). font-display:swap = texto aparece
   na hora com a fonte de sistema e troca pro Roboto quando carrega. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--brand-red: #dd0000;
	--brand-red-dark: #b80000;
	--brand-yellow: #ffc400;
	--header-topbar: #111111;
	--header-main: #1c1c1c;
	--text: #333333;
	--text-muted: #69727d;
	--heading: #000000;
	--border: #dddddd;
	--bg: #ffffff;
	--page-bg: #ebedf0; /* fundo global sutil p/ contraste com o conteúdo branco */
	--bg-soft: #f5f6f7;
	--pag-red: #e31b23;
	--radius: 3px;
	--container: 1265px;
	--font-ui: "Roboto", Arial, "Helvetica Neue", sans-serif;
	--font-title: Arial, "Helvetica Neue", sans-serif;
}

/* ------------------------------- Base ---------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	background: var(--page-bg);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-title); color: var(--heading); line-height: 1.25; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 16px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: #fff; color: #000; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------ Topbar --------------------------------- */
.topbar {
	background: var(--header-topbar);
	color: #cfcfcf;
	font-size: 13px;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center; /* login/cadastre centralizados, como no site de referência */
	gap: 6px;
	min-height: 26px;
}
.topbar__text a { color: #fff; font-weight: 700; text-decoration: underline; }
.topbar__text a:hover { color: var(--brand-red); text-decoration: underline; }
.topbar__text--greeting strong { color: #fff; }
.topbar__sep { color: #777; margin-inline: 2px; }
.topbar__sair { color: #aaa !important; font-weight: 400 !important; }
.topbar__sair:hover { color: #fff !important; }

/* --------------------------- Barra principal ---------------------------
   Layout de 3 colunas (como no site de referência):
   [ logo ] [ busca em cima + menu embaixo ] [ ações + carrinho ]
   ----------------------------------------------------------------------- */
.header-main {
	background: var(--header-main);
	position: relative;
	border-bottom: 2px solid var(--brand-yellow); /* detalhe âmbar do site de referência */
}
.header-main__inner {
	display: grid;
	/* bloco central (busca+menu) centralizado no container; minmax (não "auto" puro) dá
	   mais espaço pra busca crescer em telas largas, mas encolhe sozinho em desktop
	   estreito (768-1024px) sem estourar. As colunas das pontas (logo/carrinho) também
	   levam minmax com um piso protegido — sem isso, em larguras intermediárias (~900-
	   1100px) o logo (coluna 1fr sem mínimo) era espremido quase a sumir pela busca
	   disputando espaço; min 150px garante a logomarca sempre legível. Testado sem
	   overflow em 768/900/1000/1100/1280px. */
	grid-template-columns: minmax(150px, 1fr) minmax(auto, 760px) minmax(60px, 1fr);
	align-items: center;
	gap: 24px;
	min-height: 116px;
	padding-block: 10px;
}

/* Logo */
/* min-height trava a altura da CÉLULA do grid (não só da imagem) — reforço extra contra
   CLS: mesmo que algo mude o tamanho do conteúdo interno, a célula em si não se move. */
.site-branding { grid-column: 1; justify-self: start; line-height: 0; min-height: 90px; display: flex; align-items: center; }
.site-branding img,
.custom-logo {
	width: auto; max-height: 90px;
	/* aspect-ratio explícito (proporção real do arquivo, 347x141) — sem isso o navegador
	   só sabe calcular a largura final (width:auto a partir de max-height) depois de
	   decodificar a imagem, causando CLS (o Lighthouse aponta esta logo como a causa
	   do shift, mesmo com width/height no HTML: o <picture>/<source> do WebP Express
	   parece impedir o fallback padrão de aspect-ratio-via-atributos). */
	aspect-ratio: 347 / 141;
}

/* Coluna central: busca (topo) + menu (base), empilhados e centralizados */
.header-middle {
	grid-column: 2;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Busca */
.header-search { width: 100%; max-width: 750px; }
.header-search .dgwt-wcas-search-wrapp { width: 100%; }
/* Reserva a altura final da barra (40px) já no CSS crítico do tema. Sem isso, os
   contêineres do FiboSearch (.dgwt-wcas-search-wrapp/-form/-sf-wrapp) nascem com 66px e
   só encolhem pra 40px quando o CSS do PRÓPRIO plugin (dgwt-wcas-style) aplica — que é
   assíncrono (pra não bloquear a renderização e melhorar o Speed Index no mobile). Fixar
   aqui elimina esse encolhimento tardio → sem CLS no desktop (onde a barra é visível),
   sem sacrificar o SI. Resolve o trade-off SI-mobile × CLS-desktop. */
.header-search .dgwt-wcas-search-wrapp,
.header-search .dgwt-wcas-search-form,
.header-search .dgwt-wcas-sf-wrapp { height: 40px; }
.header-search .woocommerce-product-search,
.header-search form { display: flex; width: 100%; }
.header-search input[type="search"],
.header-search .dgwt-wcas-search-input {
	flex: 1 1 auto;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0 14px;
	font-size: 15px;
	color: var(--text);
	background: #fff;
	min-width: 0;
}
/* GOTCHA do FiboSearch: o botão "X" de limpar busca (.dgwt-wcas-preloader, que também
   vira .dgwt-wcas-close quando há texto) é posicionado por JS 1x no carregamento da
   página (positionPreloaderAndMic, em search.js) — ele mede a largura do botão de
   busca ao lado (.dgwt-wcas-search-submit) e usa isso como offset (right:Npx). No
   nosso mobile, o painel de busca nasce com display:none (só aparece ao tocar na lupa
   do tema — ver .is-search-open) — nesse momento o botão de busca mede largura 0, o
   JS grava right:0px inline, e os dois ícones ficam sobrepostos quando o painel abre
   depois (confirmado via getComputedStyle: preloader com right:0 sobre o submit).
   Esse right:0 é inline (JS), então só um !important em CSS o vence. O botão de busca
   tem min-width:50px fixo no CSS do próprio plugin (dgwt-wcas-style) — replicar o
   mesmo valor aqui resolve sem precisar re-disparar o JS do plugin a cada abertura do
   painel. */
.header-search .dgwt-wcas-preloader { right: 50px !important; }
/* fallback nativo do WooCommerce: junta input + botão */
.header-search .woocommerce-product-search input[type="search"] { border-radius: var(--radius) 0 0 var(--radius); }
.header-search .woocommerce-product-search button[type="submit"] {
	height: 40px; border: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--header-topbar); color: #fff;
	padding: 0 18px; cursor: pointer; font-size: 15px;
}

/* Menu horizontal (desktop) — centralizado sob a busca, como na referência */
.main-nav { width: 100%; max-width: 600px; }
.main-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0;
	justify-content: center;
}
.main-nav__list a {
	display: block;
	padding: 0 20px;
	line-height: 1.6;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	font-family: var(--font-ui);
}
/* Hover/ativo em amarelo (não vermelho): vermelho #dd0000 sobre o header escuro
   #1c1c1c dá contraste 3.3 (reprova no WCAG AA). O amarelo da marca sobre o escuro
   passa com folga (~11:1) e é a cor de destaque do site. Inclui [aria-current] pro
   item marcado como página atual. */
.main-nav__list a:hover,
.main-nav__list a:focus-visible { color: var(--brand-yellow); text-decoration: none; }
.main-nav__list .current-menu-item > a,
.main-nav__list .current-menu-ancestor > a,
.main-nav__list a[aria-current="page"] { color: var(--brand-yellow); }

/* Ações mobile (lupa + hambúrguer) — escondidas no desktop */
.header-actions { display: none; align-items: center; gap: 4px; flex: 0 0 auto; }
.search-toggle,
.menu-toggle {
	width: 44px; height: 44px;
	background: transparent; border: 0; cursor: pointer; padding: 0;
	color: #fff; border-radius: var(--radius);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease;
}
.search-toggle:hover,
.menu-toggle:hover { background: rgba(255,255,255,.08); }

/* Hambúrguer: ícone limpo de 3 linhas (formato universal de menu, igual à referência) */
.menu-toggle__icon { display: block; }
.menu-toggle__icon--close { display: none; }
/* estado aberto: hambúrguer vira "X" */
.site-header.is-menu-open .menu-toggle__icon--open { display: none; }
.site-header.is-menu-open .menu-toggle__icon--close { display: block; }
.site-header.is-menu-open .menu-toggle { background: rgba(255,255,255,.12); }

/* Carrinho — extremidade direita */
.header-cart {
	grid-column: 3; justify-self: end;
	display: flex; align-items: center; gap: 8px;
}
/* Gatilho do carrinho: botão só-ícone com bolha de contagem (mini-carrinho lateral) */
button.header-cart__link {
	position: relative; background: none; border: 0; padding: 4px; cursor: pointer;
	display: flex; align-items: center; color: #fff;
}
.header-cart__link:hover { text-decoration: none; color: var(--brand-yellow); }
.header-cart__link:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; border-radius: var(--radius); }
.header-cart__icon { line-height: 0; }
.header-cart__icon svg { display: block; }
.edurad-cart-count {
	position: absolute; top: -4px; right: -6px;
	min-width: 18px; height: 18px; padding: 0 5px;
	display: none; align-items: center; justify-content: center;
	background: var(--brand-red); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 18px;
	border-radius: 9px; box-sizing: border-box;
}
.edurad-cart-count.has-items { display: inline-flex; }

/* FiboSearch: sugestões com imagens maiores/centralizadas (Snippet 07 do site antigo) */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si {
	width: 70px; height: 70px;
	display: flex; align-items: center; justify-content: center;
}
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si img {
	max-width: 100%; max-height: 100%; object-fit: contain;
}

/* --------------------------- Loja / arquivo ---------------------------- */
.site-content { min-height: 40vh; }

/*
 * Painel de conteúdo: fundo branco (contraste forte com o cinza do body) para o
 * conteúdo ler como uma área própria, não flutuando solto na página. Como o
 * painel agora é branco igual aos cards de produto, os cards ganham uma borda
 * sutil (ver ul.products li.product) para não se fundirem com o painel.
 */
.edurad-shop,
.edurad-content {
	background: var(--bg);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.edurad-shop { max-width: 1010px; margin-block: 20px; padding-block: 28px 48px; } /* largura da loja ~igual à produção (grid ~980) */

/* especificidade igual à regra nativa ".woocommerce .woocommerce-breadcrumb" (2 classes) —
   só ".woocommerce-breadcrumb" (1 classe) perde e o margin-bottom:1em (~15px) do
   woocommerce.css vaza, sobrando espaço "fantasma" antes do próximo elemento.
   Sem padding-top próprio: o painel branco (.edurad-shop/.edurad-content) já dá 28px de
   respiro no topo — somar mais 14px aqui só empilhava espaço em branco em cima de um
   texto pequeno/discreto, ficando desproporcional (~42px de vazio antes de 13px de texto). */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	font-size: 13px; color: var(--text-muted);
	margin-bottom: 8px; /* respiro pequeno e intencional — sem isso fica 0 (colado) ou ~15px (solto demais) */
}
.woocommerce-breadcrumb .sep { color: #bbb; }
/* Links do breadcrumb sublinhados: eles têm a mesma cor cinza do texto ao redor
   (separadores + item atual), então sem o sublinhado não dá pra distinguir link de
   texto só pela cor (reprova no WCAG — precisa 3:1 entre link e texto, OU distinção
   não-cromática). O sublinhado resolve. O item atual (último, sem <a>) fica sem. */
.woocommerce-breadcrumb a { color: var(--text-muted); text-decoration: underline; }
.woocommerce-breadcrumb a:hover { color: var(--brand-red); }

/* Página de produto único: produção prioriza o preço visível o mais cedo possível —
   não tem breadcrumb nem a legenda "imagem meramente ilustrativa" ali. Mantidos aqui,
   só que bem mais compactos, pra chegar perto disso sem tirar os dois do ar. */
body.single-product .edurad-shop { margin-block: 12px 20px; padding-block: 10px 48px; }
body.single-product .woocommerce-breadcrumb { margin-bottom: 2px; }

.woocommerce-products-header__title,
.page-title { font-size: 26px; margin: 0 0 16px; }

.woocommerce-result-count { color: var(--text-muted); font-size: 14px; margin: 0; }
.woocommerce-ordering { margin: 0 0 16px; }
.woocommerce-ordering select {
	height: 40px; border: 1px solid var(--border); border-radius: var(--radius);
	padding: 0 10px; background: #fff; color: var(--text);
}

/* Filtro de veículo YMM (Marca → Modelo → Ano) acima da listagem */
.edurad-ymm { margin: 0 0 18px; }
.edurad-ymm .block-content {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.edurad-ymm .ymm-extra { display: none !important; } /* esconde a busca textual "Or search" */
.edurad-ymm select,
/* especificidade igual/maior que ".ymm-selector.ymm-box select.ymm-select" do próprio plugin
   (que aplica margin-bottom:8px e soma ao gap do flex) — sem isso o espaçamento real dobra. */
.edurad-ymm .ymm-selector.ymm-box select.ymm-select {
	flex: 1 1 200px; min-width: 0;
	height: 44px; padding: 8px 14px;
	margin: 0;
	border: 1px solid #666; border-radius: var(--radius);
	background: #fff; color: #575757; font-size: 15px;
}
.woocommerce .edurad-ymm .block-content button.ymm-submit-any-selection,
.edurad-ymm .block-content button.ymm-submit-any-selection {
	flex: 0 0 auto; width: auto;
	height: 44px; padding: 10px 25px;
	background: var(--brand-red); color: #fff;
	border: 0; border-radius: 4px;
	font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
}
.edurad-ymm .block-content button.ymm-submit-any-selection:hover { background: var(--brand-red-dark); }
@media (max-width: 767px) {
	/* Como na produção: Marca/Modelo/Ano lado a lado numa linha só, botão compacto
	   (não full-width) na linha de baixo — bem mais compacto que empilhar tudo.
	   flex-basis/min-width com piso realista (não 0) é o que força o botão a
	   estourar a linha e quebrar sozinho — com basis 0 ele cabia espremido junto. */
	.edurad-ymm .block-content { gap: 6px; }
	.edurad-ymm select,
	.edurad-ymm .ymm-selector.ymm-box select.ymm-select {
		flex: 1 1 100px;
		min-width: 90px;
		padding: 8px 6px;
		font-size: 13px;
	}

	/* Ordenação: shop-toolbar.js move este elemento p/ dentro de .block-content,
	   aproveitando o espaço vago ao lado do botão "Pesquisar". Na prática o <select>
	   sem flex-basis próprio usa a largura do texto da opção selecionada (~258px,
	   ex: "Ordenar por preço: maior para menor") — mais largo que o espaço que sobra
	   ao lado do botão (~340px de container - ~122px do botão - gap), então SEMPRE
	   quebrava pra linha própria em vez de ocupar o vão. flex-basis pequeno + grow:1
	   faz ele entrar na mesma linha do botão e esticar só até o que sobrar.
	   ".ymm-filter-links" (link "Pesquisar todos" do próprio plugin) fica ENTRE o botão
	   e a ordenação na ordem do DOM — sem mexer nisso ele ocupa o resto da linha do
	   botão sozinho e empurra a ordenação pra própria linha de novo. "order" reposiciona
	   ele pro final do flex (visual, não mexe no DOM) sem precisar tocar no JS do plugin. */
	.edurad-ymm .ymm-filter-links { order: 3; flex: 1 1 100%; margin-top: 4px; }
	.edurad-ymm .block-content > .woocommerce-ordering {
		order: 2;
		margin: 0 0 0 auto; /* empurra para a direita, encostado à margem */
		flex: 1 1 100px;
		min-width: 0;
	}
	.edurad-ymm .block-content > .woocommerce-ordering select {
		width: 100%;
		height: 44px;
		font-size: 13px;
		padding: 0 8px;
	}
}

/* Grid de produtos — replica a produção (float do WooCommerce removido em inc/woocommerce.php) */

/*
 * O woocommerce.css "general" (mantido carregado; só o -layout.css foi desenfileirado)
 * ainda define ::before/::after com content:" " em ul.products — um clearfix para o
 * layout antigo por float. Num grid, pseudo-elemento com content vira item do grid e
 * ocupa uma célula (fica um "buraco" onde deveria estar um produto). Sem float, o
 * clearfix é inútil — neutraliza.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products,
ul.products {
	list-style: none; margin: 18px 0 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 7px;
	row-gap: 10px;
}
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	background: #fff;
	border: 1px solid var(--border); /* painel agora é branco — a borda evita o card se fundir com ele */
	border-radius: var(--radius);
	padding: 9px;
	display: flex;
	flex-direction: column;
	text-align: center;
	position: relative; /* âncora para as labels do Advanced Woo Labels (position:absolute) */
}
.woocommerce ul.products li.product a img,
ul.products li.product a img {
	width: 100%;
	margin: 0 auto 10px;
	aspect-ratio: 300 / 260;
	object-fit: contain;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-title);
	font-size: 17px;
	font-weight: 500;
	color: var(--heading);
	line-height: 1.2;
	min-height: 2.4em;
	margin: 0 0 4px;
	padding: 0;
}
.edurad-loop-sku {
	display: block;
	font-size: 17px;
	font-weight: 500;
	color: var(--heading);
	margin: 0 0 6px;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
	color: var(--heading);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 18px;
	margin: 2px 0 0;
	display: block;
}
.woocommerce ul.products li.product .price del { color: #999; font-weight: 400; font-size: .8em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.edurad-parcelamento {
	font-size: 13px;
	color: var(--text-muted);
	margin: 2px 0 10px;
}
.edurad-parcelamento__valor { font-weight: 700; color: var(--text); }

/* Parcelamento do plugin "Simulador de Parcelas" — em linha própria abaixo do preço (como na produção) */
.woocommerce ul.products li.product .wc-simulador-parcelas-parcelamento-info-container,
ul.products li.product .wc-simulador-parcelas-parcelamento-info-container { display: block; margin-bottom: 6px; }
.woocommerce ul.products li.product .wc-simulador-parcelas-parcelamento-info,
ul.products li.product .wc-simulador-parcelas-parcelamento-info {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: var(--heading);
	line-height: 1.4;
}
.wc-simulador-parcelas-parcelamento-info .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

/* Botão "Comprar!" — quadrado, largura automática e centralizado, colado à base (como na produção) */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
	width: auto;
	align-self: center;
	margin-top: auto;
	border-radius: 0;
	padding: 10px 20px;
	font-size: 16px;
}

/* Página "Categorias" (page-categorias.php) — shortcode nativo [product_categories],
   reaproveita o grid de ul.products (mesma classe usada pelo shortcode) e o mesmo
   design de card dos produtos (fundo branco, borda, radius) pra consistência visual.
   Produção não configura imagem própria pra nenhuma categoria — placeholder padrão
   do WooCommerce em todas, replicado aqui sem tratamento especial. */
.woocommerce ul.products li.product-category,
ul.products li.product-category {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px;
	text-align: center;
	transition: border-color .15s, box-shadow .15s;
}
.woocommerce ul.products li.product-category:hover,
ul.products li.product-category:hover {
	border-color: var(--brand-red);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.woocommerce ul.products li.product-category a,
ul.products li.product-category a { display: block; text-decoration: none; }
/* A <li> do WooCommerce tem as duas classes ("product-category product") — sem o "a" aqui
   pra igualar o número de elementos da regra genérica de imagem (li.product a img, mais
   acima), esta regra perde por especificidade mesmo declarada depois. */
.woocommerce ul.products li.product-category a img,
ul.products li.product-category a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto 10px;
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title,
ul.products li.product-category h2.woocommerce-loop-category__title {
	font-family: var(--font-title);
	font-size: 17px;
	font-weight: 600;
	color: var(--heading);
	line-height: 1.3;
	margin: 0;
}
.woocommerce ul.products li.product-category mark.count,
ul.products li.product-category mark.count {
	background: none;
	color: var(--brand-red);
	font-weight: 600;
	padding: 0;
}

/* --------------------- Advanced Woo Labels (marca/estoque) --------------------
   Etiquetas posicionam via position:absolute — dependem de o card ter
   position:relative (setado acima em li.product) e a imagem do produto único
   (abaixo) para ancorar corretamente. Fundo transparente como no Snippet 23
   do site em produção (a caixa em si não deve ter fundo/borda própria). */
.awl-label-wrap,
.awl-product-label,
.awl-label-image,
.awl-label-image img,
.awl-label-image svg {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
.awl-label-image::before,
.awl-label-image::after {
	display: none !important;
	content: none !important;
}
/* Etiquetas de TEXTO (ex.: "AUDI", "ESGOTADO"): o padrão do AWL é azul (#3986c6),
   que com texto branco dá contraste 3.88 — reprova no WCAG AA (precisa 4.5). Vira
   pílula escura semi-opaca: passa contraste com folga (~14:1) e lê bem sobre
   qualquer foto do produto. */
.awl-type-label .awl-label-text,
.awl-type-label .awl-inner-text {
	background-color: rgba(20, 20, 20, .82) !important;
	color: #fff !important;
}
.awl-type-label .awl-label-text {
	padding: 3px 9px !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
}

/* Ancora a galeria do produto único (mesmo raciocínio do card do grid). */
.woocommerce div.product div.images { position: relative; }

/* Defesa: no ambiente de teste o hook às vezes registra duas vezes (possível
   artefato do activate_plugin() programático do Playground) — mantém só a
   primeira ocorrência visível. !important necessário: o elemento duplicado
   tem display:flex no atributo style inline, que vence CSS comum. Sem efeito
   quando não há duplicação real. */
.advanced-woo-labels ~ .advanced-woo-labels { display: none !important; }

/* Paginação — botões vermelhos preenchidos, compacta (como na produção) */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 34px 0 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li { margin: 0; border: 0; overflow: visible; }
/* Paginação: padrão NEUTRO (branco + borda cinza), o vermelho fica reservado só
   pra página atual e pro hover — todos vermelhos "de cara" pesava demais. Toque de
   44px (acessível) e flex-wrap centralizado aguentam catálogos grandes (46+ páginas)
   sem estourar no mobile. */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 10px;
	border: 1px solid var(--border); border-radius: 6px;
	color: var(--text); background: #fff;
	font-size: 16px; line-height: 1;
	transition: background .15s, border-color .15s, color .15s;
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	background: transparent; border-color: transparent; color: var(--text-muted); min-width: 24px;
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: var(--pag-red); border-color: var(--pag-red); color: #fff; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
	background: var(--pag-red); border-color: var(--pag-red); color: #fff; text-decoration: none;
}

/* --------------------------- Produto único ------------------------------
   Layout 2 colunas (galeria | resumo) — o float do WooCommerce que fazia
   isso foi removido junto com woocommerce-layout.css; grid próprio aqui. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 30px;
	row-gap: 8px; /* menor que o column-gap: só separa a legenda da galeria/resumo, não precisa do respiro de 30px de uma coluna pra outra */
	align-items: start;
}
.woocommerce div.product div.images { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images img { border-radius: 0; }
/* "div.summary" (com o elemento) — especificidade igual à regra nativa do woocommerce.css
   (.woocommerce div.product div.summary { margin-bottom: 2em }), que senão vence e sobra
   32px de margem "fantasma" empilhando com o margin-top da próxima seção + gap do grid. */
.woocommerce div.product .summary,
.woocommerce div.product div.summary { width: auto; float: none; margin: 0; }

/* A legenda "imagem meramente ilustrativa" fica no hook woocommerce_before_single_product_summary
   (antes da galeria, como na produção) — mas isso a torna filha direta de div.product junto com
   .images/.summary, então o grid de 2 colunas a colocaria como 3º item (quebrando o layout: galeria
   pula pra coluna 2, resumo desce pra linha 2). Fixamos a posição de cada um explicitamente: legenda
   ocupa a linha 1 nas DUAS colunas (full-width, centralizada), galeria e resumo começam juntos na
   linha 2 — se o resumo ocupasse a linha 1 também (span 1/-1), o título ficava ~60px mais alto que
   a própria imagem, um desalinhamento feio entre as colunas. */
.woocommerce div.product .edurad-imagem-ilustrativa { grid-column: 1 / -1; grid-row: 1; }
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 2; }
.woocommerce div.product .summary { grid-column: 2; grid-row: 2; }

.edurad-imagem-ilustrativa {
	text-align: center;
	font-size: 13px; /* discreta, não compete com o preço logo abaixo — não existe como texto solto na produção */
	color: var(--text-muted);
	margin: 0 0 4px;
}

/* Título */
.woocommerce div.product .product_title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 8px;
}

/* Preço principal + parcelamento + oferta pix */
.woocommerce div.product .summary > .price,
.woocommerce div.product .summary .price {
	display: block;
	color: var(--text);
	font-size: 35px;
	font-weight: 600;
	margin: 5px 0 12px;
}
.woocommerce div.product .summary .price > .woocommerce-Price-amount { font-size: 35px; font-weight: 600; color: var(--text); }

.woocommerce div.product .wc-simulador-parcelas-parcelamento-info-container {
	display: block;
	margin: 4px 0;
}
.woocommerce div.product .wc-simulador-parcelas-parcelamento-info {
	display: block;
	font-size: 21px;
	font-weight: 400;
	color: var(--text);
}
.woocommerce div.product .wc-simulador-parcelas-offer {
	display: block;
	margin: 5px 0 20px;
}
.woocommerce div.product .wc-simulador-parcelas-offer .woocommerce-Price-amount,
.woocommerce div.product .wc-simulador-parcelas-offer .wc-simulador-parcelas-detalhes-valor {
	font-size: 21px;
	font-weight: 600;
	color: var(--text);
}
.woocommerce div.product .wc-simulador-parcelas-offer .wc-simulador-parcelas-detalhes-valor {
	font-weight: 400;
	/* o CSS do plugin (.woocommerce .wc-simulador-parcelas-detalhes-valor) usa display:block,
	   jogando o "no pix" pra uma linha abaixo do valor em vez de ficar ao lado — esse seletor
	   é mais profundo (inclui .wc-simulador-parcelas-offer) então vence sem precisar de !important. */
	display: inline;
}
/* Ícone do Pix (plugin, default-pix.css): a regra que troca a altura do ícone genérico (sprite,
   22px) pelo pix.png (30px) não reajusta o "top" — fica herdado em 0px da regra base, então o
   ícone maior fica "colado" no topo da linha em vez de centralizado como o do cartão (que tem
   top:3px numa linha de 34px). 4 classes pra vencer o ".woocommerce .entry-summary .../:before"
   do plugin por especificidade, sem precisar de !important. */
.woocommerce div.product .entry-summary .wc-simulador-parcelas-offer::before { top: 13px; }

/* Estoque */
.woocommerce div.product p.stock {
	font-size: 15px;
	font-weight: 600;
	color: #0f834d;
	margin: 10px 0 14px; /* margin-top pra separar do bloco de preço/PIX logo acima (vinha 0 = colado) */
}
.woocommerce div.product p.stock.out-of-stock { color: var(--brand-red); }

/* Quantidade + botão comprar */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.woocommerce div.product .quantity { margin: 0; }
.woocommerce div.product .quantity .qty {
	height: 44px; width: 70px;
	border: 1px solid var(--border); border-radius: var(--radius);
	text-align: center; font-size: 16px;
}
.woocommerce div.product .single_add_to_cart_button {
	width: auto;
	padding: 12px 22px;
	font-size: 16px;
}
/* O WooCommerce tem uma regra .button.alt (roxo #7f54b3) mais específica que .button
   sozinho — precisa igualar/vencer a especificidade para manter o vermelho da marca. */
.woocommerce div.product .single_add_to_cart_button.button.alt {
	background: var(--brand-red);
	color: #fff;
}
.woocommerce div.product .single_add_to_cart_button.button.alt:hover {
	background: var(--brand-red-dark);
}

/* Meta: SKU / categoria / tags */
.woocommerce div.product .product_meta {
	font-size: 16px;
	color: var(--text);
	line-height: 1.9;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a { color: var(--text); }
.woocommerce div.product .product_meta a:hover { color: var(--brand-red); }

/* Compartilhar produto */
.edurad-share { margin: 18px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.edurad-share__title { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.edurad-share__buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.edurad-share__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 16px; border-radius: 4px;
	color: #fff; font-weight: 700; font-size: 13px;
	text-decoration: none;
}
.edurad-share__btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.edurad-share__btn svg { width: 16px; height: 16px; fill: currentColor; }
.edurad-share__btn--whatsapp { background: #075e54; }
.edurad-share__btn--admin { background: var(--brand-red); }
.edurad-share__btn--grupo { background: #2563eb; }

/* Descrição curta — seção full-width abaixo do resumo (carrinho/compartilhar/frete/meta),
   logo antes da descrição longa. Não fica dentro do resumo perto do preço: a produção
   posiciona o excerpt lá embaixo, junto do resto do conteúdo informativo (ver
   edurad_the_short_description_section, hook woocommerce_after_single_product_summary
   prioridade 1 — antes da descrição longa, prioridade 5). */
.edurad-short-description {
	grid-column: 1 / -1;
	min-width: 0; /* item de grid full-width: sem isso, conteúdo largo (texto sem quebra, tabela) força a página inteira a vazar horizontalmente — grid item tem min-width:auto por padrão, que respeita o min-content dos filhos mesmo com overflow-x:auto neles */
	max-width: 1010px;
	margin: 30px auto 0;
	padding: 0 16px;
}
.woocommerce-product-details__short-description {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}
.woocommerce-product-details__short-description p { margin: 0 0 8px; }
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Simulador de Frete (plugin wc-simulador-frete, template "truck1" — CEP + ícone de caminhão).
   Fica dentro de .product_meta (hook woocommerce_product_meta_start); ganha caixa própria
   pra não se misturar visualmente com a lista de SKU/categoria/marca abaixo.
   O CSS do próprio plugin usa seletor com #id (#wc-shipping-simulator ...) — especificidade
   maior que qualquer combinação só de classes — por isso as regras abaixo também usam o id.
   O plugin ainda esconde o texto do título (font-size:0) e injeta "FRETE:" fixo via
   ::before — desfazemos isso pra usar o texto real (nosso filtro em inc/single-product.php). */
#wc-shipping-simulator {
	max-width: none;
	/* topo: mesmo ritmo do resto (compartilhar, carrinho), senão fica colado embaixo do
	   compartilhar. Sem margem embaixo: é o último item do resumo — o gap do grid (16px)
	   + a margem de topo da próxima seção já dão o respiro, margem própria só inflaria à toa. */
	margin: 18px 0 0;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
#wc-shipping-simulator .shipping-simulator-wrapper {
	display: flex;
	align-items: center; /* centraliza label(ícone+texto+input) e botão na mesma linha */
	margin-bottom: 0;
}
#wc-shipping-simulator .shipping-simulator-wrapper label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	border: 0;
	padding: 0;
}
/* mesma profundidade do seletor do plugin (#id .classe label .classe) — necessário
   pra vencer, já que empatando em profundidade o id conta igual dos dois lados. */
#wc-shipping-simulator .shipping-simulator-wrapper label .icon,
#wc-shipping-simulator .icon { width: 20px; height: 20px; fill: var(--text-muted); flex-shrink: 0; margin: 0; }
#wc-shipping-simulator .shipping-simulator-wrapper label .text,
#wc-shipping-simulator .text {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}
/* especificidade igual à regra do plugin dentro de @media(max-width:600px) (#id .classe label
   .classe:before) — essa é MAIS profunda que só "#id .classe::before", perde o empate e o
   "FRETE:" fixo reaparece no celular junto com o texto real ("FRETE:Simulador de Frete"). */
#wc-shipping-simulator .shipping-simulator-wrapper label .text::before,
#wc-shipping-simulator .text::before { content: none; } /* remove o "FRETE:" fixo do CSS do plugin */
#wc-shipping-simulator .shipping-simulator-wrapper label input,
#wc-shipping-simulator input.cep-number {
	height: 40px;
	flex: 1 1 140px;
	width: auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0 12px;
	font-size: 15px;
}
#wc-shipping-simulator .shipping-simulator-wrapper .calculate,
#wc-shipping-simulator button.calculate {
	margin-top: 0; /* sem empurrão pra baixo — o align-items:center do wrapper alinha com o input */
	height: 40px;
	width: auto;
	padding: 0 20px;
	background: var(--header-main);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 14px;
	text-transform: none;
	cursor: pointer;
}
#wc-shipping-simulator .shipping-simulator-wrapper .calculate:hover,
#wc-shipping-simulator button.calculate:hover { background: #000; color: #fff; }
#wc-shipping-simulator #fshipping-results { margin-top: 10px; font-size: 14px; }
#wc-shipping-simulator .loading-icon { display: none; }

/* Descrição/ATENÇÃO/Informação adicional são as 3 últimas filhas diretas de div.product
   (grid 2 colunas) — sem "grid-column: 1/-1" explícito elas competem pelo auto-placement
   do grid junto com a 4ª linha criada pra elas (a .summary tem grid-row:1/-1, mas "-1" só
   conta as linhas EXPLÍCITAS de grid-template-rows, não as implícitas destas 3 seções —
   então o grid tenta encaixá-las nas 2 colunas em vez de dar full-width). Produção confirma:
   essas 3 seções ocupam a largura toda (930px, mesma borda esquerda da galeria até a direita
   do resumo), não só a coluna da galeria.
   Descrição longa — seção própria fora do sistema de abas, abaixo do resumo */
.edurad-description {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 1010px;
	margin: 30px auto 0;
	padding: 24px 16px 0;
	border-top: 1px solid var(--border);
}
.edurad-description__title { font-size: 20px; font-weight: 600; margin: 0 0 14px; }
.edurad-description__content { font-size: 15px; line-height: 1.7; color: var(--text); }
.edurad-description__content p { margin: 0 0 12px; }
.edurad-description__content ul,
.edurad-description__content ol { margin: 0 0 12px; padding-left: 20px; }
.edurad-description__content li { margin-bottom: 4px; }

/* Compatibilidade de veículos (plugin ymm-search, shortcode [ymm_restriction]) — o
   plugin só estiliza "td { padding-right: 10px }", o resto é nosso. Container com
   overflow-x pro mobile: 4 colunas (Marca/Modelo/Ano/Observações) não cabem empilhadas
   sem ficar gigante, e "Observações" costuma ter texto longo.
   O template do plugin (restriction.php) já renderiza TODAS as linhas no servidor e só
   esconde via jQuery .hide() (mostra 10 por vez, botões #seeMoreRecords/#seeLessRecords) —
   produção força a tabela inteira sempre visível (sem paginação). "!important" aqui vence
   o inline style que o .hide() do plugin aplica.
   min-width:0 é essencial aqui: a tabela tem min-width:480px, e item de grid tem
   min-width:auto por padrão (respeita o min-content dos filhos) — sem zerar isso, o
   overflow-x:auto do .ymm-vehicle-fitment não adianta, porque quem vaza não é a tabela
   em si, é ESTE elemento (grid-column:1/-1) sendo esticado pelo grid pra caber a tabela,
   levando a página inteira (viewport) junto. Confirmado: sem o min-width:0, no mobile
   real esse elemento media ~540px de largura dentro de uma tela de 360px. */
.edurad-ymm-compat {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 1010px;
	margin: 24px auto 0;
	padding: 20px 16px 0;
	border-top: 1px solid var(--border);
}
.edurad-ymm-compat__title { font-size: 20px; font-weight: 600; margin: 0 0 14px; }
/* Desktop: tabela de 4 colunas (Marca/Modelo/Ano/Observações). No mobile vira grade de
   cards (ver @media max-width:767px). tr { display:table-row !important } vence o
   style="display:none" que o JS do plugin põe inline nas linhas além da 10ª (paginação),
   forçando a tabela inteira sempre visível — igual à produção. */
.edurad-ymm-compat .ymm-vehicle-fitment { overflow-x: auto; }
.edurad-ymm-compat table#ymm_applicable_list {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 14px;
}
.edurad-ymm-compat table#ymm_applicable_list tr:first-child {
	font-weight: 700;
	background: rgba(0, 0, 0, .04);
}
.edurad-ymm-compat table#ymm_applicable_list th,
.edurad-ymm-compat table#ymm_applicable_list td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.edurad-ymm-compat table#ymm_applicable_list td:last-child { white-space: normal; min-width: 220px; }
.edurad-ymm-compat table#ymm_applicable_list tr { display: table-row !important; }
.edurad-ymm-compat #seeMoreRecords,
.edurad-ymm-compat #seeLessRecords { display: none !important; }

/* Aviso "ATENÇÃO" — texto fixo do tema, mesma largura/ritmo da seção de descrição */
.edurad-atencao {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 1010px;
	margin: 24px auto 0;
	padding: 20px 16px 0;
	border-top: 1px solid var(--border);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
}
.edurad-atencao p { margin: 0 0 8px; }
.edurad-atencao ul { margin: 0; padding-left: 20px; }
.edurad-atencao li { margin-bottom: 4px; }

/* Informação adicional — tabela de atributos (Marca do fabricante, Garantia, N° Montadora...).
   A tabela em si (bordas pontilhadas, fundo do cabeçalho) já vem do woocommerce.css nativo —
   só ajustamos largura/espaçamento pra bater com o ritmo das outras seções. */
.edurad-additional-info {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 1010px;
	margin: 24px auto 0;
	padding: 20px 16px 0;
	border-top: 1px solid var(--border);
}
.edurad-additional-info__title { font-size: 20px; font-weight: 600; margin: 0 0 14px; }
.edurad-additional-info table.woocommerce-product-attributes { width: 100%; margin: 0; }
/* especificidade igual à regra ".woocommerce table.shop_attributes th/td" do woocommerce.css
   nativo (2 classes + 2 elementos) — com só ".edurad-additional-info .classe" (2 classes,
   0 elementos) a regra do core vence e o th fica travado em 150px mesmo no mobile. */
.edurad-additional-info table.shop_attributes th { width: 150px; font-size: 14px; }
.edurad-additional-info table.shop_attributes td { font-size: 14px; color: var(--text); }
.edurad-additional-info .woocommerce-product-attributes-item__value p { margin: 0; }

@media (max-width: 860px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* 1 coluna só — solta o posicionamento explícito do grid desktop e volta pra ordem
	   natural do DOM (legenda, galeria, resumo), que já é a ordem certa. */
	.woocommerce div.product .edurad-imagem-ilustrativa,
	.woocommerce div.product div.images,
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary { grid-column: 1; grid-row: auto; }
	.woocommerce div.product .product_title { font-size: 18px; }

	/* SKU/Categoria/Tags ocultos no mobile, igual à produção (widget "elementor-hidden-mobile").
	   O simulador de frete já não mora mais aqui dentro (movido pro hook
	   woocommerce_after_add_to_cart_form em single-product.php), então esconder o
	   .product_meta inteiro não afeta ele. */
	.woocommerce div.product .product_meta { display: none; }
	.woocommerce div.product .summary > .price,
	.woocommerce div.product .summary .price,
	.woocommerce div.product .summary .price > .woocommerce-Price-amount { font-size: 28px; }
	.woocommerce div.product .wc-simulador-parcelas-parcelamento-info,
	.woocommerce div.product .wc-simulador-parcelas-offer .woocommerce-Price-amount,
	.woocommerce div.product .wc-simulador-parcelas-offer .wc-simulador-parcelas-detalhes-valor { font-size: 17px; }
	.woocommerce div.product .entry-summary .wc-simulador-parcelas-offer::before { top: 8px; } /* linha mais baixa no mobile (fonte menor) — recentraliza */

	/* compartilhar: botões ocupam a largura toda, um por linha — mais fácil de tocar */
	.edurad-share__buttons { flex-direction: column; }
	.edurad-share__btn { width: 100%; }

	/* simulador de frete: ícone+texto+campo empilham, botão full-width.
	   O wrapper (não só o label) precisa virar coluna — senão o botão fica como
	   item flex na mesma linha do label e disputa espaço com ele (encolhe em vez
	   de ocupar 100%), já que o wrapper do plugin é flex-direction:row nowrap. */
	#wc-shipping-simulator .shipping-simulator-wrapper { flex-direction: column; align-items: stretch; gap: 6px; }
	#wc-shipping-simulator .shipping-simulator-wrapper label { flex-direction: column; align-items: stretch; gap: 6px; }
	/* especificidade igual à regra base (#id .classe label input) — senão o "flex: 1 1 140px"
	   base vence e, em flex-direction:column, os 140px viram ALTURA (não largura) do campo. */
	#wc-shipping-simulator .shipping-simulator-wrapper label input,
	#wc-shipping-simulator input.cep-number { flex-basis: auto; height: 40px; }
	/* !important: empate de especificidade com a regra do próprio plugin (mesmo peso,
	   ordem de carregamento decide) — garante 100% independente de quem carrega depois. */
	#wc-shipping-simulator .shipping-simulator-wrapper .calculate,
	#wc-shipping-simulator button.calculate { width: 100% !important; margin-top: 4px; }

	/* informação adicional: label acima do valor em vez de coluna fixa de 150px
	   (que sobra pouco espaço pro valor em telas pequenas) — mesmo comportamento da produção. */
	.edurad-additional-info table.shop_attributes th,
	.edurad-additional-info table.shop_attributes td { display: block; width: 100%; }
	.edurad-additional-info table.shop_attributes td { padding-top: 0; }

	.edurad-description { padding-inline: 10px; margin-top: 20px; }
}

/* ------------------------------ Botões --------------------------------- */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-block;
	background: var(--brand-red);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	padding: 11px 18px;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background .15s ease;
	width: 100%;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--brand-red-dark);
	color: #fff;
	text-decoration: none;
}
.woocommerce a.added_to_cart { display: block; margin-top: 8px; font-size: 13px; }

/* ---------------------- Minha Conta (WooCommerce) -----------------------
   Antes era o <ul><li> cru do WooCommerce, sem estilo nenhum (título em inglês,
   lista de bullets vermelhos). Vira um dashboard de verdade: menu lateral fixo +
   painel de conteúdo. Escopado por ".woocommerce-account" (classe automática do
   WP no <body> nas páginas da conta) pra não vazar pro resto do site — o título
   "post-card__title"/"post-card" é o wrapper genérico do blog (inc/index.php),
   reaproveitado aqui, então preciso neutralizar o visual de "post de blog" só
   neste contexto. */
.woocommerce-account .post-card { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
/* Título "Minha Conta" escondido: o item ativo no menu lateral já indica onde o
   cliente está, então o H1 grande era redundante. Fica no DOM (acessibilidade/SEO),
   só não é exibido. */
.woocommerce-account .post-card__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	list-style: none; margin: 0 0 24px; padding: 14px 18px;
	border-radius: var(--radius); font-size: 14px; line-height: 1.5;
	background: #eef7ff; border-left: 4px solid #2b7de9; color: var(--text);
}
/* Ícones dos avisos em SVG inline (não emoji): ao desativar o script de emoji do
   WordPress (otimização de performance), o "ℹ️" passou a renderizar como quadrado
   quebrado no Windows — é um símbolo "text-default" que dependia daquele fallback.
   SVG data-URI não depende de fonte nenhuma: renderiza igual em qualquer aparelho. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before {
	content: ''; flex-shrink: 0; width: 20px; height: 20px;
	background-repeat: no-repeat; background-position: center; background-size: contain;
	/* o WooCommerce põe position:absolute nesses ::before (pro ícone da fonte dele
	   ficar no canto). Nossa regra é mais específica só nas props que declara — sem
	   forçar position:static aqui, o absolute do WC continua valendo e o ícone fica
	   POR CIMA do texto em vez de reservar espaço como item flex. */
	position: static;
}
.woocommerce-account .woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%232b7de9'/%3E%3Ccircle cx='10' cy='6' r='1.3' fill='%23fff'/%3E%3Crect x='8.7' y='8.6' width='2.6' height='6' rx='.6' fill='%23fff'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%230f834d'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-error { background: #fdeceb; border-left-color: var(--brand-red); }
.woocommerce-account .woocommerce-error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23dd0000'/%3E%3Crect x='8.8' y='4.8' width='2.4' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='10' cy='14.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-info li { list-style: none; }
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-error a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Só vira grid (menu + painel) quando existe menu — na tela de login/cadastro
   o mesmo ".woocommerce" embrulha o #customer_login (abas), que tem o próprio
   layout controlado por mu-plugins/edurad-conta-login-cadastro.php. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 230px 1fr;
	grid-template-rows: auto 1fr;
	gap: 28px;
	align-items: start;
}
.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
/* Posição explícita em vez de confiar no auto-placement do grid — sem isso, o menu
   e o painel ficavam trocados de coluna e em linhas diferentes (bug real, visto ao
   vivo: nav caindo na coluna larga, conteúdo na estreita, cada um numa altura). */
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }

.woocommerce-MyAccount-navigation {
	background: #fff; border: 1px solid var(--border); border-radius: 14px;
	padding: 10px; position: sticky; top: 20px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation-link { margin-bottom: 2px; }
.woocommerce-MyAccount-navigation-link a {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border-radius: 9px;
	color: #444; text-decoration: none; font-size: 15px; font-weight: 500;
	transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation-link a:hover { background: #f7f7f7; color: var(--heading); text-decoration: none; }
.woocommerce-MyAccount-navigation-link.is-active a { background: #fdf0f0; color: var(--brand-red); font-weight: 700; }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.woocommerce-MyAccount-content > p:first-of-type { color: var(--text); }
/* Links no texto corrido da conta (ex.: "ver suas compras recentes") têm a mesma
   cor do texto ao redor — sublinha pra distinguir (WCAG: link precisa de 3:1 com o
   texto OU distinção não-cromática). Não pega botões. */
.woocommerce-MyAccount-content p a:not(.button) { text-decoration: underline; color: inherit; }
.woocommerce-MyAccount-content p a:not(.button):hover { color: var(--brand-red); }
.woocommerce-MyAccount-content mark.count { background: none; color: var(--brand-red); font-weight: 700; }
/* Link da política de privacidade (cadastro + checkout): mesma cor do texto de aviso
   ao redor — sublinha pra distinguir (WCAG link-in-text-block). */
.woocommerce-privacy-policy-text a { text-decoration: underline; }
.woocommerce-privacy-policy-text a:hover { color: var(--brand-red); }

/* Tabela de pedidos */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%; border-collapse: collapse; background: #fff;
	border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.woocommerce-account table.woocommerce-orders-table thead th {
	background: #fafafa; text-align: left; font-size: 12px; text-transform: uppercase;
	letter-spacing: .3px; color: #6a6a6a; padding: 12px 16px; font-weight: 700;
}
.woocommerce-account table.woocommerce-orders-table tbody td {
	padding: 14px 16px; border-top: 1px solid #f0f0f0; font-size: 14px; color: var(--text);
}
.woocommerce-account table.woocommerce-orders-table .button,
.woocommerce-account table.woocommerce-orders-table .woocommerce-button {
	width: auto; padding: 8px 14px; font-size: 13px; display: inline-block; margin: 2px 4px 2px 0;
}
.woocommerce-account table.woocommerce-orders-table .order-status { font-weight: 600; }

/* Nº do pedido no mobile (Snippet 13 portado). O PHP em inc/conta-dashboard.php
   (edurad_conta_numero_pedido_mobile) injeta o número + data na célula de data. No
   desktop a coluna "Pedido" já mostra o número, então o resgate fica escondido; no
   mobile essa coluna some e o número reaparece como link dentro da data. */
.numero-pedido-resgate-php { display: none; }
.data-padrao-php { display: inline; }
@media (max-width: 767px) {
	.woocommerce-account table.woocommerce-orders-table thead th.woocommerce-orders-table__header-order-number,
	.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-number { display: none; }
	.woocommerce-account table.woocommerce-orders-table thead th,
	.woocommerce-account table.woocommerce-orders-table tbody td { padding: 10px; font-size: 13px; }
	.numero-pedido-resgate-php { display: block; font-weight: 700; color: var(--brand-red); text-decoration: none; margin-bottom: 3px; }
	.numero-pedido-resgate-php:hover { text-decoration: underline; }
	.data-padrao-php { display: block; font-size: 12px; color: var(--text-muted); }
}

/* Página unificada "Dados Cadastrais": o formulário de detalhes da conta
   (nome/e-mail/senha) é renderizado abaixo do de endereço (inc/conta-dashboard.php,
   edurad_conta_form_detalhes_na_pagina). Este bloco separa visualmente as duas
   seções com uma linha e um respiro. */
.edurad-conta-detalhes { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.edurad-conta-secao-titulo { font-size: 20px; font-weight: 700; color: var(--heading); margin: 0 0 4px; }
.edurad-conta-secao-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 22px; }

/* Formulários (Detalhes da conta, Endereço) — complementa o CSS de endereço
   já existente em inc/conta-dashboard.php (layout flex dos campos). */
.woocommerce-account form .form-row { margin-bottom: 16px; }
.woocommerce-account form input.input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px;
	font-size: 15px; font-family: inherit; color: var(--text);
}
.woocommerce-account form .button { width: auto; min-width: 160px; }
.woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin: 24px 0 0;
}
.woocommerce-EditAccountForm legend { padding: 0 8px; font-weight: 700; color: #444; font-size: 15px; }

/* Botão "mostrar/ocultar senha" (WooCommerce): nesse contexto o CSS do WooCommerce
   não posicionava o botão nem carregava o ícone de olho (fonte de ícones do plugin
   não aplicada) — ele aparecia como um quadradinho cinza solto abaixo do campo.
   Reestilizamos: wrapper vira âncora relativa, botão vira o olho em SVG dentro do
   campo à direita. O clique (trocar type password↔text) é do JS do WooCommerce. */
.woocommerce-account form .password-input { position: relative; display: block; }
.woocommerce-account form .password-input .input-text { padding-right: 44px; }
.woocommerce-account form .show-password-input {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	width: 24px; height: 24px; padding: 0; border: 0; background-color: transparent;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 22px;
}
/* estado "senha visível" — o WooCommerce marca com .display-password; troca pro olho cortado */
.woocommerce-account form .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.4 10.4 0 0 1 12 19c-7 0-11-7-11-7a18.4 18.4 0 0 1 5.1-5.9m3.9-1A10.4 10.4 0 0 1 12 5c7 0 11 7 11 7a18.5 18.5 0 0 1-2.2 3.2m-4.7-1.4A3 3 0 1 1 9.9 9.9'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: 18px; }
	/* só 1 coluna explícita no mobile — sem isso "grid-column:2" (setado acima pro
	   desktop) pedia uma coluna que não existe, o grid criava uma implícita do lado
	   e voltava a ficar 2 colunas em vez de empilhar. */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
	.woocommerce-MyAccount-navigation { position: static; }
	/* lista vertical simples em vez de flex-wrap horizontal — o wrap ficava com
	   espaçamento estranho (3 itens numa linha, 1 sozinho, "Sair" jogado lá longe
	   à direita por causa do margin-left:auto). Empilhado é mais previsível. */
	.woocommerce-MyAccount-navigation-link a { padding: 11px 12px; font-size: 15px; }
	.woocommerce-MyAccount-navigation-link--customer-logout { margin-left: 0; }
	.woocommerce-account .post-card__title { font-size: 24px; }
}

/* ------------------------------ Rodapé ---------------------------------
   Idêntico à produção: bloco único centralizado, fundo escuro, texto branco. */
.site-footer {
	background: var(--header-main);
	color: #fff;
	text-align: center;
	padding: 34px 0;
	/* sem margin-top: o conteúdo (.edurad-shop / .edurad-content) já tem padding-bottom próprio;
	   somar margem aqui duplicava o respiro antes do rodapé. */
	border-top: 2px solid var(--brand-yellow); /* detalhe âmbar, igual à produção (simétrico ao header) */
}
.site-footer__inner { max-width: 1000px; }
.site-footer__line {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.5;
	color: #fff;
}
.site-footer__line strong { font-weight: 700; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer__legal { margin-top: 22px; margin-bottom: 0; } /* espaço antes do CNPJ, como na produção */

/* Botão flutuante de WhatsApp: CSS foi pra mu-plugins/edurad-whatsapp-float.php
   (inline, cores fixas em vez de var() do tema) — é lógica de negócio/marketing,
   não apresentação; sobrevive a uma troca de tema. */

/* --------------------------- Blog genérico ----------------------------- */
.edurad-content { margin-block: 20px; padding-block: 30px 50px; }
.post-card { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.post-card__title { font-size: 22px; margin: 0 0 10px; }

/* ---------------------------- Responsivo ------------------------------- */

/* Grid de produtos em telas médias — especificidade igual à regra base (".woocommerce
   ul.products, ul.products", 2 classes+1 elemento) — só "ul.products" (1 classe+1 elemento)
   nunca vencia o empate, então essa regra nunca chegou a aplicar e o grid ficava em 4
   colunas até a tela estreitar pra ≤767px, pulando direto pra 2. */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Cabeçalho mobile (≤767px — mesmo breakpoint do site de referência) ===== */
@media (max-width: 767px) {
	/* logo centralizada, ações à esquerda, carrinho à direita (tudo na mesma linha) */
	.header-main__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		min-height: 60px; gap: 8px; padding-block: 6px;
	}
	.site-branding img,
	.custom-logo { max-height: 40px; aspect-ratio: 347 / 141; }

	/* a coluna central some do fluxo; busca e menu viram painéis sobrepostos */
	.header-middle { display: contents; }
	.header-search,
	.main-nav { display: none; }

	.header-actions { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; }
	.site-branding { grid-column: 2; grid-row: 1; justify-self: center; min-height: 40px; }
	.header-cart { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }

	/* painel de busca revelado pela lupa */
	.site-header.is-search-open .header-search {
		display: block;
		position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
		max-width: none;
		background: var(--header-main);
		padding: 12px 16px;
		box-shadow: 0 8px 16px rgba(0,0,0,.25);
	}

	/* drawer do menu revelado pelo hambúrguer */
	.site-header.is-menu-open .main-nav {
		display: block;
		position: absolute; left: 0; right: 0; top: 100%; z-index: 55;
		max-width: none;
		background: var(--header-main);
		border-top: 1px solid rgba(255,255,255,.08);
		box-shadow: 0 8px 16px rgba(0,0,0,.25);
	}
	.main-nav__list { flex-direction: column; gap: 0; }
	.main-nav__list a { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.06); }

	/* Loja: paddings reduzidos no mobile para caber mais conteúdo na tela sem apertar demais. */
	/* No mobile o painel vai de ponta a ponta (sem margem lateral) — cantos
	   arredondados encostados na borda da tela pareceriam cortados, não intencionais. */
	.edurad-shop,
	.edurad-content { border-radius: 0; box-shadow: none; }
	.edurad-shop { margin-block: 10px; padding-inline: 10px; padding-block: 14px 26px; }
	.edurad-content { margin-block: 10px; }
	/* trilha completa (Home / Categoria / Nome do produto, às vezes bem longo) quebra em
	   3-4 linhas no mobile e empurra o conteúdo real pra baixo da dobra. Trunca em 1 linha
	   só com ellipsis — o HTML/links/breadcrumb schema continuam intactos no DOM pro SEO,
	   é só o CSS que corta visualmente. */
	.woocommerce-breadcrumb {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.woocommerce-products-header__title,
	.page-title { margin: 0 0 10px; }
	.woocommerce-result-count { font-size: 13px; }
	.woocommerce-ordering { margin: 8px 0 12px; }

	.edurad-ymm { margin: 0 0 12px; }
	.edurad-ymm .block-content { gap: 8px; }

	/* grid 2 colunas no mobile, com gap e respiro interno mais enxutos */
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 14px; margin-top: 12px; }
	.woocommerce ul.products li.product,
	ul.products li.product { padding: 6px; } /* respiro perceptível sem comer espaço relevante do card */
	.woocommerce ul.products li.product a img,
	ul.products li.product a img { margin-bottom: 6px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product .woocommerce-loop-product__title { font-size: 15px; margin-bottom: 2px; }
	.edurad-loop-sku { font-size: 15px; margin-bottom: 3px; }
	.wc-simulador-parcelas-parcelamento-info-container { margin-bottom: 4px; }
	.woocommerce ul.products li.product .button,
	ul.products li.product .button { padding: 10px 14px; font-size: 15px; }

	/* Paginação no mobile: botões um pouco menores pra caberem mais por linha (com
	   46+ páginas o WooCommerce mostra "1 … 24 25 26 … 47 →"); flex-wrap já quebra
	   em mais linhas centralizadas se precisar. 40px ainda é um alvo de toque ok. */
	.woocommerce nav.woocommerce-pagination ul { gap: 6px; }
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
		min-width: 40px; height: 40px; padding: 0 8px; font-size: 15px;
	}

	/* rodapé: fonte menor no mobile, como na produção */
	.site-footer { padding: 26px 0; }
	.site-footer__line { font-size: 16px; }

	/* Compatibilidade de veículos no MOBILE: a tabela de 4 colunas não cabe legível numa
	   tela estreita, então vira uma grade de cards (1 por veículo) que se ajusta sozinha à
	   largura via auto-fit — 1 coluna no celular, 2 em telas um pouco maiores. Cada campo
	   ganha o rótulo (Marca/Modelo/Ano/Obs.) via ::before; o cabeçalho (tr:first-child)
	   some. !important vence o style="display:table-row/none" inline do JS do plugin. */
	.edurad-ymm-compat .ymm-vehicle-fitment { overflow-x: visible; }
	.edurad-ymm-compat table#ymm_applicable_list { display: block; width: 100%; min-width: 0; }
	.edurad-ymm-compat table#ymm_applicable_list tbody {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
		gap: 10px;
	}
	.edurad-ymm-compat table#ymm_applicable_list tr:first-child { display: none !important; }
	.edurad-ymm-compat table#ymm_applicable_list tr {
		display: block !important;
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 10px 12px;
		margin: 0;
		background: #fff;
	}
	.edurad-ymm-compat table#ymm_applicable_list td {
		display: flex; gap: 6px; align-items: baseline;
		padding: 2px 0; border: 0; white-space: normal;
		font-size: 12px; overflow-wrap: anywhere;
	}
	.edurad-ymm-compat table#ymm_applicable_list td:last-child { min-width: 0; }
	.edurad-ymm-compat table#ymm_applicable_list td::before {
		flex: 0 0 50px; font-weight: 700; color: var(--heading);
	}
	.edurad-ymm-compat table#ymm_applicable_list td:nth-child(1)::before { content: "Marca"; }
	.edurad-ymm-compat table#ymm_applicable_list td:nth-child(2)::before { content: "Modelo"; }
	.edurad-ymm-compat table#ymm_applicable_list td:nth-child(3)::before { content: "Ano"; }
	.edurad-ymm-compat table#ymm_applicable_list td:nth-child(4)::before { content: "Obs."; }

	/* Tabela de parcelamento no mobile: fonte e paddings enxutos + largura cheia, pra a
	   linha "Nx de R$ Y sem juros" caber numa linha só em qualquer tela (inclusive preços
	   grandes / telas de 360px), sem estourar. Seletores com especificidade extra
	   (.edurad-parcelas-sec ...) porque a regra-padrão da tabela vem DEPOIS deste media
	   query no arquivo — sem isso ela venceria por ordem de cascata. */
	.edurad-parcelas-sec.container { padding: 16px 12px 0; }
	.edurad-parcelas-sec .edurad-parcelas-tabela { max-width: none; font-size: 12px; }
	.edurad-parcelas-sec .edurad-parcelas-tabela th,
	.edurad-parcelas-sec .edurad-parcelas-tabela td { padding: 6px 8px; }
}

/* ==========================================================================
   FiboSearch — sugestões da busca (Snippet 07 portado)
   Imagens maiores/centralizadas nas sugestões e parcelamento no mesmo tamanho
   do preço. Os seletores são do plugin (.dgwt-wcas-*); o !important vence o CSS
   do próprio FiboSearch. Se o plugin estiver inativo, nada casa (inofensivo).
   ========================================================================== */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si {
	width: 100px !important;
	min-width: 100px !important;
	max-width: 100px !important;
	height: 100px !important;
	margin-right: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product {
	min-height: 130px !important;
	padding: 10px !important;
}
/* Parcelamento (simulador) na mesma fonte do preço dentro da sugestão. */
body .woocommerce .dgwt-wcas-suggestion .wc-simulador-parcelas-parcelamento-info,
body .woocommerce .dgwt-wcas-suggestion .wc-simulador-parcelas-parcelamento-info.no-fee,
body .woocommerce .dgwt-wcas-suggestion .wc-simulador-parcelas-parcelamento-info.fee-included {
	display: block !important;
	margin-top: 5px !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	font-weight: normal !important;
	font-style: normal !important;
}
body .woocommerce .dgwt-wcas-suggestion .wc-simulador-parcelas-parcelamento-info * { font-size: 16px !important; }
body .woocommerce .dgwt-wcas-suggestion .wc-simulador-parcelas-parcelamento-info .amount,
body .woocommerce .dgwt-wcas-suggestion .wc-simulador-parcelas-parcelamento-info bdi { font-weight: 700 !important; }

/* ---------------------- Galeria estática do produto --------------------
   Substitui o flexslider do WooCommerce (que causava CLS ~0.7 pela montagem
   tardia). Imagem principal com aspect-ratio reservado (via style inline no
   template, por-produto) + miniaturas clicáveis (assets/js/galeria.js troca o
   src). Sem JS pesado, sem reorganização tardia = sem salto de layout. */
.edurad-galeria__principal { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.edurad-galeria__principal img, .edurad-galeria__principal .wp-post-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.edurad-galeria__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.edurad-galeria__thumb { width: 66px; height: 66px; padding: 2px; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s; }
.edurad-galeria__thumb:hover { border-color: #bbb; }
.edurad-galeria__thumb.is-active { border-color: var(--brand-red); }
.edurad-galeria__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ============================ Mini-carrinho lateral (drawer) ============================ */
/* Trava o scroll do fundo com o drawer aberto. */
html.edurad-cart-lock, html.edurad-cart-lock body { overflow: hidden; }

.edurad-cart { position: fixed; inset: 0; z-index: 100000; visibility: hidden; }
.edurad-cart.is-open { visibility: visible; }

.edurad-cart__overlay {
	position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
	opacity: 0; transition: opacity .25s ease; cursor: pointer;
}
.edurad-cart.is-open .edurad-cart__overlay { opacity: 1; }

.edurad-cart__panel {
	position: absolute; top: 0; right: 0; height: 100%;
	width: 400px; max-width: 92vw;
	background: #fff; box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform .28s ease;
}
.edurad-cart.is-open .edurad-cart__panel { transform: translateX(0); }
.edurad-cart.is-loading .edurad-cart__body { opacity: .55; pointer-events: none; }

.edurad-cart__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px; border-bottom: 1px solid var(--border);
	background: var(--header-main);
}
.edurad-cart__title { margin: 0; font-size: 17px; color: #fff; }
.edurad-cart__close {
	background: none; border: 0; color: #fff; font-size: 30px; line-height: 1;
	cursor: pointer; padding: 0 4px;
}
.edurad-cart__close:hover { color: var(--brand-yellow); }
.edurad-cart__close:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }

.edurad-cart__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; transition: opacity .15s; }

.edurad-cart__itens {
	list-style: none; margin: 0; padding: 6px 0; flex: 1; overflow-y: auto;
}
.edurad-cart__item {
	position: relative; display: grid;
	grid-template-columns: 64px 1fr 24px; gap: 12px; align-items: center;
	padding: 14px 18px; border-bottom: 1px solid var(--bg-soft);
}
.edurad-cart__thumb { display: block; width: 64px; height: 64px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.edurad-cart__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.edurad-cart__info { min-width: 0; }
.edurad-cart__nome { display: block; font-size: 13px; font-weight: 600; color: var(--heading); line-height: 1.3; margin-bottom: 8px; }
a.edurad-cart__nome:hover { color: var(--brand-red); }
.edurad-cart__linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.edurad-cart__qtd { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.edurad-cart__qtd-btn {
	width: 26px; height: 28px; border: 0; background: var(--bg-soft);
	font-size: 16px; line-height: 1; color: var(--text); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.edurad-cart__qtd-btn:hover { background: #e7e9ec; color: var(--brand-red); }
.edurad-cart__qtd-input {
	width: 34px; height: 28px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
	text-align: center; font-size: 13px; padding: 0; color: var(--text); background: #fff;
	-moz-appearance: textfield;
}
.edurad-cart__qtd-input::-webkit-outer-spin-button,
.edurad-cart__qtd-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.edurad-cart__preco { font-size: 13px; font-weight: 700; color: var(--heading); white-space: nowrap; }

a.edurad-cart__remover {
	align-self: start; width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--text-muted); font-size: 18px; line-height: 1; text-decoration: none;
}
a.edurad-cart__remover:hover { background: var(--brand-red); color: #fff; }

.edurad-cart__rodape { border-top: 1px solid var(--border); padding: 16px 18px; background: var(--bg-soft); }
.edurad-cart__subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
.edurad-cart__subtotal strong { font-size: 18px; color: var(--brand-red); }
.edurad-cart__checkout {
	display: block; width: 100%; box-sizing: border-box;
	padding: 13px 16px; text-align: center;
	background: var(--brand-red); color: #fff;
	font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	border: 0; border-radius: var(--radius); cursor: pointer;
	transition: background .15s;
}
.edurad-cart__checkout:hover { background: var(--brand-red-dark); color: #fff; text-decoration: none; }
.edurad-cart__checkout:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
.edurad-cart__continuar {
	padding: 11px 20px; background: #fff; color: var(--brand-red);
	border: 2px solid var(--brand-red); border-radius: var(--radius);
	font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s;
}
.edurad-cart__continuar:hover { background: var(--brand-red); color: #fff; }
.edurad-cart__continuar-link {
	display: block; width: 100%; margin-top: 10px; background: none; border: 0;
	font-size: 13px; color: var(--text-muted); cursor: pointer; text-decoration: underline;
}
.edurad-cart__continuar-link:hover { color: var(--brand-red); }

.edurad-cart__vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 24px; text-align: center; }
.edurad-cart__vazio-txt { margin: 0; font-size: 15px; color: var(--text-muted); }

@media (max-width: 480px) {
	.edurad-cart__panel { width: 100%; max-width: 100%; }
}

/* ===================== Parcelamento + PIX (próprio do tema) ===================== */
/*
 * Apresentação discreta, com ícones. Parcelamento em texto suave (cartão + cinza);
 * PIX com o ícone da marca em verde e o valor em destaque moderado — sem competir com
 * o preço cheio. Substitui o visual "gritante" (preço grande preto) do 1º corte.
 */
.edurad-parcelamento {
	display: flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 400; color: var(--text-muted);
	line-height: 1.3; margin-top: 4px;
}
.edurad-parcelamento__icone { flex: 0 0 auto; opacity: .8; }
.edurad-parcelamento__valor { color: var(--text); font-weight: 600; }

/* Grid da loja: centraliza no card. */
ul.products li.product .edurad-parcelamento { justify-content: center; }

/* Página do produto: um tico maior + "sem juros"; e a linha do PIX com ícone verde. */
.edurad-parcelamento--single { font-size: 15px; margin-top: 8px; }
.edurad-parcelamento--single .edurad-parcelamento__icone { width: 18px; height: 18px; }
.edurad-parcelamento--single .edurad-parcelamento__juros { color: var(--text-muted); }

.edurad-pix {
	display: flex; align-items: center; gap: 8px;
	margin-top: 8px; line-height: 1.15;
}
.edurad-pix__icone { flex: 0 0 auto; }
.edurad-pix__valor { font-size: 20px; font-weight: 700; color: #00a884; }
.edurad-pix__label { font-size: 13px; font-weight: 400; color: var(--text-muted); }

/* Tabela "Parcelamento" (valor de cada parcela) — replica a wcsp-table da produção.
   Fica depois da compatibilidade, na área full-width; a seção alinha com a compatibilidade
   (máx 1010, centralizada) e a tabela em si fica compacta (não estica pela largura toda). */
.edurad-parcelas-sec {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 1010px;
	margin: 24px auto 0;
	padding: 20px 16px 0;
	border-top: 1px solid var(--border);
}
.edurad-parcelas-tabela {
	width: 100%; max-width: 460px; border-collapse: collapse; margin: 0 auto;
	font-size: 13px; color: var(--text);
}
.edurad-parcelas-tabela th,
.edurad-parcelas-tabela td {
	border: 1px solid rgba(128, 128, 128, .35);
	padding: 7px 10px; text-align: center;
}
.edurad-parcelas-tabela thead th {
	font-size: 15px; font-weight: 700; color: var(--heading);
	background: var(--bg-soft);
}
.edurad-parcelas-tabela tbody td { font-weight: 400; }
.edurad-parcelas-tabela__total { color: var(--text-muted); white-space: nowrap; }

/* ------------------------------- Página 404 ------------------------------ */
.edurad-404 {
	max-width: 560px;
	margin: 0 auto;
	padding: 56px 16px 72px;
	text-align: center;
}
.edurad-404__codigo {
	margin: 0;
	font-family: var(--font-title);
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	color: var(--border);
}
.edurad-404__titulo {
	margin: 8px 0 12px;
	font-size: 26px;
}
.edurad-404__texto {
	margin: 0 0 28px;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
}
.edurad-404__busca { margin: 0 0 32px; }
.edurad-404__busca .dgwt-wcas-search-wrapp,
.edurad-404__busca form { max-width: 420px; margin: 0 auto; }
.edurad-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.edurad-404__links a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
}
.edurad-404__links a:hover {
	border-color: var(--brand-red);
	color: var(--brand-red);
	text-decoration: none;
}
.edurad-404__links li:first-child a {
	background: var(--brand-red);
	border-color: var(--brand-red);
	color: #fff;
}
.edurad-404__links li:first-child a:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); color: #fff; }

/* ---------------------- Checkout — aviso de 3D Secure ------------------- */
/* Mesma linguagem visual (caixa cinza neutra) da tela de "obrigado" quando o
   3DS está pendente (edurad-antifraude-3ds.php) — o cliente já reconhece o
   padrão quando chega lá. Fica acima do botão "Finalizar Compra"; JS mostra
   só quando o método selecionado é cartão (ver checkout-3ds-aviso.js). */
.edurad-aviso-3ds {
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 14px 16px;
	margin: 0 0 16px;
}
.edurad-aviso-3ds-titulo {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
}
.edurad-aviso-3ds-texto {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
}