/*
 * Studio Hub: estilos que o theme.json não cobre.
 * Cores, fontes e espaços vêm das variáveis do theme.json, então
 * mudar a paleta no Editor do site muda tudo aqui junto.
 */

:root {
	--sh-raio: var(--wp--custom--raio--grande, 20px);
	--sh-raio-medio: var(--wp--custom--raio--medio, 14px);
	--sh-raio-pequeno: var(--wp--custom--raio--pequeno, 10px);
	--sh-linha: var(--wp--preset--color--linha, #dde1e7);
	--sh-suave: var(--wp--preset--color--suave, #4a5361);
}

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--acento);
	outline-offset: 3px;
}

/* Links de navegação e títulos de cartão sem sublinhado; links no meio do texto continuam sublinhados. */
.wp-block-navigation a,
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-button__link,
.sh-sem-sublinhado a {
	text-decoration: none;
}

/* Texto secundário. */
.has-suave-color a { color: inherit; }

/* Rótulo dentro de fundos escuros fica lima, para manter o contraste. */
.is-style-cartao-escuro .is-style-rotulo,
.is-style-secao-escura .is-style-rotulo,
.is-style-secao-acento .is-style-rotulo {
	color: var(--wp--preset--color--lima);
}

/* Selo: do tamanho do texto, não da coluna. */
p.is-style-selo {
	display: inline-block;
	width: fit-content;
	white-space: nowrap;
}

/* ---------- Listas ---------- */

ul.is-style-check,
ul.is-style-sem-marcador {
	list-style: none;
	padding-left: 0;
}

ul.is-style-check > li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.6rem;
}

ul.is-style-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--acento);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-style-cartao-escuro ul.is-style-check > li::before,
.is-style-secao-escura ul.is-style-check > li::before {
	background-color: var(--wp--preset--color--lima);
}

/* ---------- Seções e cartões ---------- */

.is-style-faixa-topo {
	border-top: 3px solid currentColor;
	padding-top: var(--wp--preset--spacing--50);
}

/* Cartões em linha ficam da mesma altura e o rodapé do cartão desce. */
.wp-block-columns.sh-cartoes > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.wp-block-columns.sh-cartoes > .wp-block-column > .wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.sh-empurra-baixo {
	margin-top: auto !important;
}

.wp-block-image.is-style-tela img {
	border-radius: var(--sh-raio-medio);
	border: 1px solid var(--sh-linha);
	box-shadow: var(--wp--preset--shadow--cartao);
}

/* ---------- Tabelas ---------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--sh-linha);
	padding: 0.85rem 1rem;
	text-align: left;
}
.wp-block-table thead {
	border-bottom: 0;
}
.wp-block-table th {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sh-suave);
	white-space: nowrap;
}
.wp-block-table.is-style-comparativo {
	background: var(--wp--preset--color--branco);
	border: 1px solid var(--sh-linha);
	border-radius: var(--sh-raio);
	overflow-x: auto;
}
.wp-block-table.is-style-comparativo td:not(:first-child),
.wp-block-table.is-style-comparativo th:not(:first-child) {
	text-align: center;
}

/* ---------- Perguntas (bloco Detalhes) ---------- */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
}
.wp-block-details > :not(summary) {
	color: var(--sh-suave);
	margin-top: 0.75rem;
}

/* ---------- Cabeçalho ---------- */

.sh-cabecalho .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60);
}
.sh-cabecalho .wp-block-navigation-item.sh-destaque > a {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--branco);
	border-radius: var(--sh-raio-pequeno);
	padding: 0.6rem 1.1rem;
	font-weight: 600;
}
.sh-cabecalho .wp-block-navigation-item.sh-destaque > a:hover {
	background: var(--wp--preset--color--acento);
}

/* ---------- WooCommerce: catálogo ---------- */

.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wc-block-product {
	background: var(--wp--preset--color--branco);
	border: 1px solid var(--sh-linha);
	border-radius: var(--sh-raio);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.wc-block-product .wp-block-woocommerce-product-image img {
	border-radius: var(--sh-raio-medio);
}
.wc-block-product .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0.25rem 0 0;
}
.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* Botões do WooCommerce com o mesmo visual dos botões do site. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--branco);
	border-radius: var(--sh-raio-pequeno);
	font-weight: 600;
	border: 0;
	min-height: 44px;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--branco);
}

/* Preço */
.wp-block-woocommerce-product-price,
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* ---------- WooCommerce: página do produto ---------- */

.sh-produto-compra .variations select,
.sh-produto-compra .quantity input {
	min-height: 44px;
	border-radius: var(--sh-raio-pequeno);
	border: 1px solid #9aa3b0;
	padding: 0 0.75rem;
	font: inherit;
}
.sh-produto-compra table.variations {
	width: 100%;
	border: 0;
	margin-bottom: 1rem;
}
.sh-produto-compra table.variations th,
.sh-produto-compra table.variations td {
	border: 0;
	padding: 0.25rem 0;
	display: block;
	text-align: left;
}

/* ---------- WooCommerce: formulários ---------- */

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-page form .input-text {
	min-height: 44px;
	border-radius: var(--sh-raio-pequeno);
	border: 1px solid #9aa3b0;
	padding: 0.5rem 0.75rem;
	font: inherit;
	background: var(--wp--preset--color--branco);
}
.woocommerce form .form-row label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--sh-raio-medio);
	border-top-width: 0;
	border-left: 4px solid var(--wp--preset--color--acento);
	background: var(--wp--preset--color--lavanda);
}

/* ---------- WooCommerce: Minha conta ---------- */

.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .u-columns {
	grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0.75rem;
	background: var(--wp--preset--color--branco);
	border: 1px solid var(--sh-linha);
	border-radius: var(--sh-raio);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-MyAccount-navigation li {
	padding: 0;
	margin: 0;
}
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border-radius: var(--sh-raio-pequeno);
	text-decoration: none;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--fundo);
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--branco);
}
.woocommerce-MyAccount-content {
	background: var(--wp--preset--color--branco);
	border: 1px solid var(--sh-linha);
	border-radius: var(--sh-raio);
	padding: var(--wp--preset--spacing--60);
	min-width: 0;
}
.woocommerce-MyAccount-content table.shop_table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
	display: block;
	overflow-x: auto;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--sh-linha);
	padding: 0.85rem 0.75rem;
}

/* Formulários de entrar e cadastrar lado a lado, em cartões. */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
	float: none;
	width: auto;
	background: var(--wp--preset--color--branco);
	border: 1px solid var(--sh-linha);
	border-radius: var(--sh-raio);
	padding: var(--wp--preset--spacing--60);
}
.woocommerce form.login,
.woocommerce form.register {
	border: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 781px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
	}
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---------- Telas sem cabeçalho (AI HTML Builder, Elementor) ---------- */

.sh-tela-em-branco .wp-block-post-content > .alignfull {
	margin-left: 0;
	margin-right: 0;
}

/* Chave de licença e links de exemplo em fonte monoespaçada. */
.sh-chave {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

/* Rodapé: links da navegação vertical com a cor do texto secundário. */
footer .wp-block-navigation a {
	color: var(--wp--preset--color--suave-claro);
}
footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--branco);
}

/* Comparativo: primeira coluna mais larga, as demais do tamanho do conteúdo. */
.wp-block-table.is-style-comparativo table {
	table-layout: auto;
	min-width: 720px;
}
.wp-block-table.is-style-comparativo td:first-child {
	min-width: 260px;
}

/* Minha conta ocupa a largura larga, não a de texto. */
.woocommerce-account main.is-layout-constrained > .wp-block-post-content,
.woocommerce-account main.is-layout-constrained > .wp-block-post-title,
.woocommerce-account main .wp-block-post-content.is-layout-constrained > .woocommerce {
	max-width: var(--wp--style--global--wide-size);
}

/* O WooCommerce põe um "clearfix" (::before/::after) que vira célula da grade; desliga. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	display: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	padding: 0;
	margin: 0;
	border: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	text-decoration: none;
}