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

: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;
	grid-template-columns: 1fr auto 1fr; /* bloco central (busca+menu) centralizado no container */
	align-items: center;
	gap: 24px;
	min-height: 116px;
	padding-block: 10px;
}

/* Logo */
.site-branding { grid-column: 1; justify-self: start; line-height: 0; }
.site-branding img,
.custom-logo { width: auto; max-height: 90px; }

/* 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: 600px; }
.header-search .dgwt-wcas-search-wrapp { width: 100%; }
.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;
}
/* 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);
}
.main-nav__list a:hover { color: var(--brand-red); text-decoration: none; }
.main-nav__list .current-menu-item > a,
.main-nav__list .current-menu-ancestor > a { color: var(--brand-red); }

/* 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;
}
.header-cart__link { display: flex; align-items: center; gap: 8px; color: #fff; }
.header-cart__link:hover { text-decoration: none; color: var(--brand-red); }
.header-cart__icon { font-size: 22px; line-height: 1; }
.header-cart__meta { display: flex; flex-direction: column; line-height: 1.1; }
.header-cart__total { font-weight: 700; font-size: 14px; }
.header-cart__label { font-size: 12px; color: #cfcfcf; line-height: 1.1; }

/* Fly Cart no cabeçalho (fundo escuro) */
.header-cart .woofc-cart-link a {
	display: inline-flex; align-items: center; gap: 8px;
	color: #fff; font-weight: 700; font-size: 14px;
}
.header-cart .woofc-cart-link a:hover { color: var(--brand-red); text-decoration: none; }
.header-cart .woofc-cart-link i { font-size: 22px; line-height: 1; }
.header-cart .woofc-cart-link-inner-subtotal { font-size: 14px; }

/* 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. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	font-size: 13px; color: var(--text-muted); padding-block: 14px 0;
	margin-bottom: 8px; /* respiro pequeno e intencional — sem isso fica 0 (colado) ou ~15px (solto demais) */
}
.woocommerce-breadcrumb .sep { color: #bbb; }

.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" (cabe folgado:
	   botão ~122px + select ~180px < 370px disponíveis). Some do lugar original. */
	.edurad-ymm .block-content > .woocommerce-ordering {
		margin: 0 0 0 auto; /* empurra para a direita, encostado à margem */
		flex: 0 1 auto;
	}
	.edurad-ymm .block-content > .woocommerce-ordering select {
		height: 44px;
		font-size: 13px;
		padding: 0 10px;
	}
}

/* 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;
}

/* --------------------- 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;
}

/* 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; }
.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(--pag-red); border-radius: 6px;
	color: #fff; background: var(--pag-red);
	font-size: 16px; line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	background: transparent; border-color: transparent; color: var(--text);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: #b3141a; border-color: #b3141a; color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
	background: #b3141a; border-color: #b3141a; 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;
	gap: 30px;
	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: 15px;
	color: var(--heading);
	margin: 0 0 8px;
}

/* 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;
}

/* Estoque */
.woocommerce div.product p.stock {
	font-size: 15px;
	font-weight: 600;
	color: #0f834d;
	margin: 0 0 14px;
}
.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;
	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 {
	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: 10px;
	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;
	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. */
.edurad-ymm-compat {
	grid-column: 1 / -1;
	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; }
.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;
	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;
	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; }

	/* 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; }

/* ------------------------------ 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 WhatsApp ----------------------------- */
.wpp-float {
	position: fixed; right: 18px; bottom: 18px; z-index: 9999;
	display: inline-flex; align-items: center; gap: 8px;
	background: #25d366; color: #fff;
	padding: 12px 18px; border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
	font-weight: 600; font-size: 15px;
}
.wpp-float:hover { color: #fff; text-decoration: none; background: #1fb757; }
.wpp-float__icon { font-size: 20px; line-height: 1; }

/* --------------------------- 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; }

	/* 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; }
	.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 {
		padding-block: 8px 0;
		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; }

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

@media (max-width: 480px) {
	.wpp-float__text { display: none; }
	.wpp-float { padding: 14px; }
}