/* =====================================================================
   SKYTEC Experiência — camada de design (carrega depois do tema)
   Regras únicas: preto + azul da marca, verde só para WhatsApp,
   mesmos cantos, mesmos tamanhos de título e botão, efeitos leves.
   ===================================================================== */

:root {
	--sx-blue: #0a70d0;
	--sx-blue-2: #1e84e4;
	--sx-blue-lt: #4aa3ff;
	--sx-blue-tx: #7cc0ff;
	--sx-blue-soft: rgba(10, 112, 208, .12);
	--sx-blue-line: rgba(74, 163, 255, .35);
	--sx-ink: #fff;
	--sx-ink-2: #a9b4c2;
	--sx-ink-3: #d9e2ec;
	--sx-line: rgb(31, 42, 55);
	--sx-field: rgba(5, 8, 12, .85);
	--sx-wa: rgb(13, 122, 66);
	--sx-r-sm: 0.75rem;
	--sx-r: 0.875rem;
	--sx-r-lg: 1.25rem;
	--sx-r-xl: 1.75rem;
	--sx-ease: cubic-bezier(.2, .7, .2, 1);
	--sx-h1: clamp(1.75rem, 2.4vw + .75rem, 2.375rem);
	--sx-h2: clamp(1.625rem, 1.9vw + .625rem, 2.25rem);
	--sx-h2s: clamp(1.375rem, 1.2vw + .625rem, 1.75rem);
	--sx-title-font: "Sora", "Atkinson Hyperlegible Next", system-ui, sans-serif;
}

/* ---------------------------------------------------------------------
   1. Paleta: verde fica só no que é WhatsApp. O resto vira azul da marca.
   --------------------------------------------------------------------- */
body .sk-buysafe {
	background: linear-gradient(180deg, rgba(10, 112, 208, .10), rgba(10, 112, 208, .03)) !important;
	border-color: var(--sx-blue-line) !important;
}
body .sk-buysafe-t, body .sk-buysafe-t * { color: var(--sx-blue-tx) !important; }
body .sk-buysafe li::before { color: var(--sx-blue-lt) !important; }
body .sk-buysafe svg { color: var(--sx-blue-lt) !important; }

body .sk-desc-feats .fx2::after { background: var(--sx-blue) !important; }
body .sk-ico, body .sk-ico svg { color: var(--sx-blue-lt) !important; }

body .sk-safe { background-image: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(10, 112, 208, .16), transparent 70%) !important; }
body .sk-safe .sk-kicker,
body section:has(.sk-safe-ico) .sk-kicker {
	background: rgba(10, 112, 208, .14) !important;
	border-color: var(--sx-blue-line) !important;
	color: #9fd0ff !important;
}
body .sk-safe-ico {
	background: var(--sx-blue-soft) !important;
	border-color: var(--sx-blue-line) !important;
	color: var(--sx-blue-lt) !important;
	box-shadow: 0 0 24px -6px rgba(10, 112, 208, .55) !important;
}
body .sk-safe-ico svg { color: var(--sx-blue-lt) !important; }

body .sk-acc-ico { background: var(--sx-blue-soft) !important; color: var(--sx-blue-lt) !important; }
body .sk-hc-art, body .sk-hc-ring { border-color: var(--sx-blue-line) !important; }
body .sk-hc-art svg { color: var(--sx-blue-lt) !important; }
body .sk-ab-band { border-color: var(--sx-blue-line) !important; }
body .sk-ab-ico { background: var(--sx-blue-soft) !important; border-color: var(--sx-blue-line) !important; color: var(--sx-blue-lt) !important; }
body .sk-ab-ico svg { color: var(--sx-blue-lt) !important; }

body .sk-desc-note {
	background: rgba(10, 112, 208, .08) !important;
	border-color: var(--sx-blue-line) !important;
}
body .sk-pay-hint {
	background: rgba(10, 112, 208, .08) !important;
	border-color: var(--sx-blue-line) !important;
	color: #cfe6ff !important;
}
body .sk-pay-hint strong { color: #fff !important; }

/* Carrinho: selos, frete e nota de confiança no azul da marca. */
body .sk-oi-seals span {
	background: rgba(10, 112, 208, .12) !important;
	border-color: var(--sx-blue-line) !important;
	color: #9fd0ff !important;
}
body .sk-ship-ico, body .sk-trustnote-ico {
	background: var(--sx-blue-soft) !important;
	border-color: var(--sx-blue-line) !important;
	color: var(--sx-blue-lt) !important;
}
body .sk-ship-ico svg, body .sk-trustnote-ico svg { color: var(--sx-blue-lt) !important; }
body .sk-ship-price { color: #9fd0ff !important; }

/* ---------------------------------------------------------------------
   2. Títulos: um tamanho para título de página, um para seção e um para subseção.
   --------------------------------------------------------------------- */
body .page-hero .entry-title,
body h1.entry-title,
body .sk-pd-head .product_title {
	font-size: var(--sx-h1) !important;
	line-height: 1.15 !important;
	letter-spacing: -.01em;
}
body .section-head h2,
body .skr-card h2,
body main .wrap > h2.sk-soft,
body .woocommerce-Tabs-panel > h2.skx-ol-a:first-of-type {
	font-size: var(--sx-h2) !important;
	line-height: 1.18 !important;
}
body .sk-desc h2,
body .sk-desc h2.skx-ol-a,
body .woocommerce-Reviews-title,
body .page-body h2.wp-block-heading,
body .sx-tut-head h2 {
	font-size: var(--sx-h2s) !important;
	line-height: 1.2 !important;
}

/* ---------------------------------------------------------------------
   3. Botões: mesmos cantos e letra legível (mínimo 15 px).
   --------------------------------------------------------------------- */
body ul.products li.product .button,
body ul.products li.product .add_to_cart_button {
	font-size: 0.9375rem !important;
	min-height: 3rem !important;
	border-radius: var(--sx-r) !important;
}
body .cat-card .btn,
body .cat-card a.btn,
body [class*="cat-"] .btn-sm {
	font-size: 0.875rem !important;
}
body main .btn,
body .page-body .btn,
body .single_add_to_cart_button,
body .wc-proceed-to-checkout .checkout-button,
body #place_order {
	border-radius: var(--sx-r) !important;
}

/* ---------------------------------------------------------------------
   4. Mesmas medidas e simetria
   --------------------------------------------------------------------- */
/* Grades de máquinas: a última linha sempre centralizada. */
body ul.products { justify-content: center !important; }

/* Contato: duas colunas iguais. */
@media (min-width: 53.8125rem) {
	body .sk-ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body .sk-ct-grid > * { width: auto !important; max-width: none !important; }
}

/* Produto: o cartão "Compra protegida" distribui o conteúdo, sem buraco embaixo. */
body .sk-buysafe { display: flex !important; flex-direction: column; justify-content: center; }

/* Produto: chamada final na mesma largura dos outros blocos. */
body .sk-desc-cta { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }

/* Calculadora de frete: não vaza no celular. */
body .sk-facts-box li > span:last-child,
body .sk-facts-box li > div:last-child { min-width: 0 !important; flex: 1 1 auto; }
body .sk-cep, body .sk-cep-res { max-width: 100% !important; }
body .sk-cep-form { flex-wrap: wrap !important; max-width: 100% !important; }
body .sk-cep-form input { flex: 1 1 9.375rem !important; min-width: 0 !important; width: auto !important; }
body .sk-cep-form button { flex: 1 0 auto !important; }
@media (max-width: 30rem) { body .sk-cep-form button { flex-basis: 100% !important; } }

/* Pagamento: os "clearfix" do WooCommerce viravam 6 linhas vazias na grade
   (um buraco de ~86px acima das opções Cartão e Pix). */
body #payment.sk-pay ul.payment_methods::before,
body #payment.sk-pay ul.payment_methods::after,
body #payment.sk-pay ul.payment_methods > li::before,
body #payment.sk-pay ul.payment_methods > li::after { content: none !important; display: none !important; }
/* Título da opção (ex.: "Cartão de crédito") sem espaço exagerado entre as linhas. */
body #payment.sk-pay .sk-pay-txt b { line-height: 1.25 !important; }
/* Cartões de texto: o mesmo tamanho de título em todos (antes, os que tinham botão ficavam menores). */
body .entry-content ul.sk-points > li > h3 { font-size: 1.3rem !important; }
/* "7 dias para mudar de ideia": mesmo respiro e mesmo título dos cartões vizinhos. */
body .sk-trustnote-card { padding: 1.6rem 1.5rem 1.5rem !important; }
body .sk-trustnote-card strong { font-family: var(--sx-title-font); font-size: 1.3rem !important; line-height: 1.3; }

/* As duas opções de pagamento sempre com a mesma altura (no celular elas ficam uma embaixo da outra;
   no computador já ficam lado a lado, na mesma linha). */
@media (max-width: 420px) {
	body #payment.sk-pay ul.payment_methods:has(> li:nth-child(2):last-child) { grid-template-rows: 1fr 1fr; grid-auto-rows: auto; }
}

/* ---------------------------------------------------------------------
   5. "Comprar agora" (página da máquina)
   --------------------------------------------------------------------- */
body.single-product .summary .sk-pricebox,
body.single-product .summary .sk-bn-box { order: 0; }
body.single-product .summary .sx-buynow-wrap {
	order: 1;
	grid-column: 1 / -1;
	flex: 1 0 100%;
	width: 100%;
	min-width: 0;
}
body.single-product .summary form.cart,
body.single-product .summary .skytec-ask { order: 2; }
body.single-product .summary .product_meta { order: 3; }

.sx-buynow {
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	width: 100%;
	min-height: 4.25rem;
	box-sizing: border-box;
	border: 0 !important;
	border-radius: var(--sx-r) !important;
	background: linear-gradient(135deg, var(--sx-blue-2), var(--sx-blue) 55%, #075aab) !important;
	color: #fff !important;
	text-align: center !important;
	text-decoration: none !important;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 14px 34px -16px rgba(10, 112, 208, .85), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
	transition: translate .3s var(--sx-ease), box-shadow .3s var(--sx-ease), filter .3s;
}
.sx-buynow::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
	transform: translateX(-110%);
	transition: transform .8s var(--sx-ease);
}
body .sx-buynow .sx-buynow-t { font-family: var(--sx-title-font) !important; font-weight: 800 !important; font-size: 1.25rem !important; line-height: 1.15 !important; letter-spacing: .01em; color: #fff !important; }
body .sx-buynow .sx-buynow-s { font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.3 !important; color: rgba(255, 255, 255, .85) !important; }
.sx-buynow-i { position: absolute; right: 1.375rem; top: 50%; width: 1.625rem; height: 1.625rem; margin-top: -0.8125rem; transition: translate .3s var(--sx-ease); }
@media (hover: hover) {
	.sx-buynow:hover { translate: 0 -2px; filter: brightness(1.06); box-shadow: 0 20px 40px -16px rgba(10, 112, 208, .95), inset 0 1px 0 rgba(255, 255, 255, .22) !important; }
	.sx-buynow:hover::after { transform: translateX(110%); }
	.sx-buynow:hover .sx-buynow-i { translate: 4px 0; }
}
.sx-buynow:active { scale: .985; }
@media (max-width: 37.5rem) { .sx-buynow { min-height: 4.125rem; } body .sx-buynow .sx-buynow-t { font-size: 1.1875rem !important; } .sx-buynow-i { right: 1rem; } }

/* "Adicionar ao carrinho" vira o botão secundário (contorno azul). */
body.single-product .summary form.cart .single_add_to_cart_button {
	background: transparent !important;
	border: 2px solid rgba(74, 163, 255, .6) !important;
	color: #fff !important;
	box-shadow: none !important;
}
@media (hover: hover) {
	body.single-product .summary form.cart .single_add_to_cart_button:hover { background: rgba(10, 112, 208, .18) !important; border-color: var(--sx-blue-lt) !important; }
}

/* Link "passo a passo completo" no cartão "Como comprar". */
.sx-howto-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
	font-weight: 700;
	color: var(--sx-blue-tx) !important;
	text-decoration: none !important;
}
.sx-howto-more svg { width: 1.125rem; height: 1.125rem; transition: translate .3s var(--sx-ease); }
.sx-howto-more:hover svg { translate: 4px 0; }

/* ---------------------------------------------------------------------
   6. Barra de ajuda (carrinho e pagamento)
   --------------------------------------------------------------------- */
.sx-helpbar {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.375rem;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--sx-blue-line);
	border-radius: var(--sx-r);
	background: linear-gradient(180deg, rgba(10, 112, 208, .10), rgba(10, 112, 208, .04));
	color: var(--sx-ink-3);
	font-size: 1rem;
	line-height: 1.4;
	box-sizing: border-box;
}
.sx-helpbar-ico { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: var(--sx-r-sm); background: var(--sx-blue-soft); color: var(--sx-blue-lt); }
.sx-helpbar-ico svg { width: 1.375rem; height: 1.375rem; }
.sx-helpbar-t { flex: 1 1 auto; min-width: 0; }
.sx-helpbar-a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 2.75rem;
	padding: 0 1rem;
	border: 2px solid rgba(74, 163, 255, .55);
	border-radius: var(--sx-r-sm);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .25s, border-color .25s;
}
.sx-helpbar-a:hover { background: rgba(10, 112, 208, .2); border-color: var(--sx-blue-lt); }
/* No carrinho o tema troca o display das caixas; aqui fica igual ao pagamento. */
body .woocommerce .sx-helpbar,
body.woocommerce-cart .entry-content > .woocommerce > .sx-helpbar { display: flex !important; }
/* Carrinho: o aviso "Digite o seu CEP" some quando o frete já está calculado. */
body.woocommerce-cart .woocommerce:has(#shipping_method li) .sk-ship-note { display: none !important; }
@media (max-width: 37.5rem) {
	.sx-helpbar { flex-wrap: wrap; }
	.sx-helpbar-t { flex: 1 1 0; min-width: 0; text-align: left; }
	body a.sx-helpbar-a { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------
   7. Central de Ajuda
   --------------------------------------------------------------------- */
.sx-help { max-width: none; margin: 0; display: grid; gap: 1.75rem; }
.sx-help-top { display: grid; justify-items: center; gap: 0.875rem; text-align: center; }
.sx-help-top > * { box-sizing: border-box; }
.sx-help-lead { margin: 0; max-width: 40rem; font-size: clamp(1.0625rem, .5vw + 0.875rem, 1.1875rem); line-height: 1.55; color: var(--sx-ink-2); }
.sx-help-search {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	height: 3.75rem;
	box-sizing: border-box;
	padding: 0 1.125rem;
	border: 2px solid rgb(38, 49, 64);
	border-radius: var(--sx-r);
	background: var(--sx-field);
	transition: border-color .25s, box-shadow .25s;
	cursor: text;
}
.sx-help-search:focus-within { border-color: var(--sx-blue); box-shadow: 0 0 0 4px rgba(10, 112, 208, .2); }
.sx-help-search-ico { display: grid; color: var(--sx-blue-tx); }
.sx-help-search svg { width: 1.375rem; height: 1.375rem; }
.sx-help-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; color: #fff; font: inherit; font-size: 1.0625rem; outline: none; box-shadow: none !important; padding: 0 !important; }
.sx-help-none { margin: 0; color: var(--sx-ink-2); }
.sx-help-none a { color: var(--sx-blue-tx); }

.sx-topics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
/* 10 assuntos: 5 x 2 no computador, 2 x 5 no celular (sempre linhas completas). */
@media (max-width: 56.25rem) { .sx-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
.sx-topic {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.5rem;
	min-height: 9.75rem;
	box-sizing: border-box;
	padding: 1.25rem 0.875rem;
	border: 1px solid var(--sx-line);
	border-radius: var(--sx-r-lg);
	background: linear-gradient(180deg, rgba(14, 22, 34, .92), rgba(8, 12, 18, .92));
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	transition: translate .35s var(--sx-ease), border-color .35s, box-shadow .35s;
}
@media (hover: hover) {
	.sx-topic:hover { translate: 0 -4px; border-color: rgba(74, 163, 255, .55); box-shadow: 0 18px 40px -22px rgba(10, 112, 208, .8); }
	.sx-topic:hover .sx-topic-ico { scale: 1.06; }
}
.sx-topic-ico, .sx-tut-ico {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	flex: 0 0 3.5rem;
	border-radius: 1rem;
	background: var(--sx-blue-soft);
	border: 1px solid var(--sx-blue-line);
	color: var(--sx-blue-tx);
	transition: scale .35s var(--sx-ease);
}
.sx-topic-ico svg, .sx-tut-ico svg { width: 1.75rem; height: 1.75rem; }
.sx-topic-t { font-family: var(--sx-title-font); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.sx-topic-d { font-size: 0.875rem; color: var(--sx-ink-2); }
.sx-topic.is-hidden, .sx-tut.is-hidden { display: none !important; }

.sx-tut {
	display: grid;
	gap: 1.375rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid var(--sx-line);
	border-radius: var(--sx-r-xl);
	background: linear-gradient(180deg, rgba(12, 19, 30, .94), rgba(6, 9, 14, .94));
	scroll-margin-top: 9.375rem;
}
.sx-tut.is-flash { animation: sx-flash 1.8s var(--sx-ease); }
@keyframes sx-flash {
	0% { box-shadow: 0 0 0 0 rgba(74, 163, 255, 0); }
	25% { box-shadow: 0 0 0 4px rgba(74, 163, 255, .55), 0 0 60px -10px rgba(10, 112, 208, .7); }
	100% { box-shadow: 0 0 0 0 rgba(74, 163, 255, 0); }
}
.sx-tut-head { display: flex; align-items: center; gap: 1rem; }
.sx-tut-head h2 { margin: 0 !important; font-family: var(--sx-title-font); color: #fff; }
.sx-tut-head p { margin: 0.25rem 0 0; color: var(--sx-ink-2); font-size: 1rem; }

.sx-steps { position: relative; display: grid; gap: 1.125rem; }
.sx-bar { height: 0.375rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sx-bar span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(.2); background: linear-gradient(90deg, var(--sx-blue), var(--sx-blue-lt)); transition: transform .55s var(--sx-ease); }
.sx-track { display: grid; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sx-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "ill n" "ill h" "ill p" "ill a";
	align-content: center;
	column-gap: 1.5rem;
	margin: 0 !important;
	padding: 1.625rem !important;
	border: 1px solid rgba(74, 163, 255, .22);
	border-radius: var(--sx-r-lg);
	background: linear-gradient(135deg, rgba(10, 112, 208, .10), rgba(10, 112, 208, .03));
	list-style: none !important;
}
.sx-step::before, .sx-step::marker { content: none !important; }
.sx-js .sx-step {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	translate: 32px 0;
	transition: opacity .45s var(--sx-ease), translate .5s var(--sx-ease), visibility 0s linear .5s;
}
.sx-js .sx-step.is-before { translate: -32px 0; }
.sx-js .sx-step.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
html:not(.sx-js) .sx-track { gap: 0.875rem; }
html:not(.sx-js) .sx-nav, html:not(.sx-js) .sx-bar { display: none; }
.sx-step-ill {
	grid-area: ill;
	align-self: center;
	display: grid;
	place-items: center;
	width: 6.5rem;
	height: 6.5rem;
	border-radius: 1.625rem;
	background: radial-gradient(circle at 30% 25%, rgba(74, 163, 255, .28), rgba(10, 112, 208, .08) 70%);
	border: 1px solid var(--sx-blue-line);
	color: var(--sx-blue-tx);
	box-shadow: 0 0 40px -12px rgba(10, 112, 208, .7);
}
.sx-step-ill svg { width: 3.125rem; height: 3.125rem; }
.sx-js .sx-step.is-on .sx-step-ill svg { animation: sx-ill-in .7s var(--sx-ease) both; }
@keyframes sx-ill-in { from { opacity: 0; scale: .8; } }
.sx-step-n { grid-area: n; font-size: 0.875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-blue-tx); }
.sx-step h3 { grid-area: h; margin: 0.375rem 0 0.5rem !important; font-family: var(--sx-title-font); font-size: clamp(1.25rem, .8vw + 0.875rem, 1.5rem) !important; line-height: 1.25; color: #fff; outline: none; }
.sx-step p { grid-area: p; margin: 0 !important; font-size: 1.125rem; line-height: 1.6; color: var(--sx-ink-3); }
.sx-step-link { grid-area: a; justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font-weight: 700; color: var(--sx-blue-tx) !important; text-decoration: none !important; }
.sx-step-link svg { width: 1.125rem; height: 1.125rem; transition: translate .3s var(--sx-ease); }
.sx-step-link:hover svg { translate: 4px 0; }
@media (max-width: 40rem) {
	.sx-step { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ill" "n" "h" "p" "a"; justify-items: center; text-align: center; padding: 1.375rem 1.125rem !important; }
	.sx-step-ill { width: 5.5rem; height: 5.5rem; margin-bottom: 0.75rem; }
	.sx-step-ill svg { width: 2.75rem; height: 2.75rem; }
	.sx-step-link { justify-self: center; }
}

.sx-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; }
.sx-prev, .sx-next {
	height: 3.375rem;
	min-width: 8.125rem;
	padding: 0 1.375rem;
	border-radius: var(--sx-r);
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background .25s, border-color .25s, opacity .25s, scale .15s;
}
.sx-prev { justify-self: start; background: transparent; border: 2px solid rgb(38, 49, 64); color: #fff; }
.sx-prev:hover:not(:disabled) { border-color: var(--sx-blue-lt); }
.sx-prev:disabled { opacity: .35; cursor: default; }
.sx-next { justify-self: end; background: var(--sx-blue); border: 2px solid var(--sx-blue); color: #fff; box-shadow: 0 10px 26px -14px rgba(10, 112, 208, .9); }
.sx-next:hover { background: var(--sx-blue-2); border-color: var(--sx-blue-2); }
.sx-prev:active:not(:disabled), .sx-next:active { scale: .97; }
.sx-dots { display: flex; justify-content: center; }
.sx-dot { position: relative; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.sx-dot::before { content: ""; position: absolute; inset: 0.5625rem; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .3s, scale .3s var(--sx-ease); }
.sx-dot.is-done::before { background: rgba(74, 163, 255, .55); }
.sx-dot.is-on::before { background: var(--sx-blue-lt); scale: 1.35; box-shadow: 0 0 12px rgba(74, 163, 255, .8); }
@media (max-width: 30rem) {
	.sx-nav { grid-template-columns: 1fr 1fr; }
	.sx-dots { grid-column: 1 / -1; order: -1; }
	.sx-prev, .sx-next { min-width: 0; width: 100%; }
}
.sx-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-tut-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin: 0 !important; color: var(--sx-ink-2); }
.sx-tut-wa {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 3rem;
	padding: 0 1.125rem;
	border-radius: var(--sx-r);
	background: var(--sx-wa);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: filter .25s, translate .25s var(--sx-ease);
}
.sx-tut-wa:hover { filter: brightness(1.1); translate: 0 -1px; }
.sx-tut-wa svg { width: 1.25rem; height: 1.25rem; }

/* ---------------------------------------------------------------------
   8. Movimento: transição entre páginas, barra de progresso, foco visível
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* Cabeçalho e barra de baixo ficam parados; o conteúdo troca com suavidade. */
	body .site-header { view-transition-name: sk-header; }
	body .bottom-nav { view-transition-name: sk-bottomnav; }
	#wpadminbar { view-transition-name: sk-adminbar; }
	/* A foto da máquina "voa" do cartão para a página dela. */
	body.single-product .woocommerce-product-gallery__image img.wp-post-image { view-transition-name: sk-prod; }

	::view-transition-old(root) { animation: .24s ease both sx-vt-out; }
	::view-transition-new(root) { animation: .42s cubic-bezier(.2, .7, .2, 1) both sx-vt-in; }
	::view-transition-group(sk-prod) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
	::view-transition-group(sk-header),
	::view-transition-group(sk-bottomnav),
	::view-transition-group(sk-adminbar) { animation: none; }
	::view-transition-old(sk-header), ::view-transition-new(sk-header),
	::view-transition-old(sk-bottomnav), ::view-transition-new(sk-bottomnav) { animation-duration: .2s; }
}
@keyframes sx-vt-out { to { opacity: 0; translate: 0 -8px; } }
@keyframes sx-vt-in { from { opacity: 0; translate: 0 12px; } }

/* Barra fina de progresso da leitura, no topo (o navegador faz sozinho, sem pesar). */
.sx-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100001;
	width: 100%;
	height: 3px;
	pointer-events: none;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--sx-blue), var(--sx-blue-lt));
	box-shadow: 0 0 10px rgba(74, 163, 255, .7);
}
@supports (animation-timeline: scroll()) {
	.sx-progress { animation: sx-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes sx-progress { to { transform: scaleX(1); } }
body.admin-bar .sx-progress { top: 2rem; }
@media (max-width: 48.875rem) { body.admin-bar .sx-progress { top: 2.875rem; } }

/* Animações infinitas pausam quando o bloco está fora da tela. */
.sx-off, .sx-off *, .sx-off *::before, .sx-off *::after { animation-play-state: paused !important; }

/* Foco visível e igual em tudo (teclado e leitores de tela). */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body .button:focus-visible,
body summary:focus-visible,
body #payment.sk-pay ul.payment_methods li > input:focus-visible + label,
body ul.sk-ship li > input:focus-visible + label,
body .sk-amanda-btn:focus-visible,
body #payment .payment_box .sk-save:has(input:focus-visible) {
	outline: 3px solid rgba(124, 192, 255, .9) !important;
	outline-offset: 3px !important;
}

/* Modo leve do tema e quem pede menos movimento: sem deslocamentos. */
html.sk-lite .sx-buynow::after { display: none; }
@media (prefers-reduced-motion: reduce) {
	.sx-js .sx-step { transition: opacity .2s linear, visibility 0s linear .2s; translate: 0 0 !important; }
	.sx-buynow, .sx-topic, .sx-tut-wa { transition: none; }
	.sx-tut.is-flash { animation: none; }
}

/* ---------------------------------------------------------------------
   9. Links da camada: o sublinhado animado do tema não se aplica aqui.
   --------------------------------------------------------------------- */
body .sx-help a.sx-tut-wa {
	background: var(--sx-wa) !important;
	padding: 0 1.125rem !important;
	border: 0 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
}
body .sx-help a.sx-step-link,
body .sx-help .sx-help-none a,
body a.sx-helpbar-a,
body a.sx-howto-more {
	background-image: none !important;
	padding-bottom: 0 !important;
	font-size: 1rem !important;
}
body a.sx-helpbar-a { padding: 0 1rem !important; }
body .sx-help a.sx-topic { background-image: linear-gradient(180deg, rgba(14, 22, 34, .92), rgba(8, 12, 18, .92)) !important; padding: 1.25rem 0.875rem !important; }
body a.sx-buynow { padding: 0.75rem 3.5rem !important; }

/* Linha "quantidade + Adicionar ao carrinho" ocupa a coluna inteira, igual ao botão do WhatsApp ao lado. */
body.single-product .summary form.cart { justify-content: stretch !important; }
body.single-product .summary form.cart .single_add_to_cart_button { flex: 1 1 0 !important; max-width: none !important; width: auto !important; }

/* Minha conta > Endereço: um cartão só ocupa a largura toda (sem sobra à direita). */
body .woocommerce-MyAccount-content .woocommerce-Addresses { justify-content: center !important; }
body .woocommerce-MyAccount-content .woocommerce-Addresses:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }

/* Central de Ajuda: ícones e textos alinhados na mesma altura em todos os cartões. */
body .sx-help a.sx-topic { align-content: start !important; }
.sx-topic-t { display: flex; align-items: center; justify-content: center; min-height: 2.5em; }
@media (max-width: 40rem) {
	.sx-tut-head { flex-direction: column; text-align: center; }
	.sx-tut-head p { margin-top: 0.375rem; }
}

/* ---------------------------------------------------------------------
   10. Largura padrão do conteúdo (junto com medidas.css)
   Tudo começa e termina nas mesmas linhas da coluna do site.
   --------------------------------------------------------------------- */
/* Minha conta: as abas ocupam a largura toda, todas do mesmo tamanho. */
@media (min-width: 961px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-columns: none !important;
		justify-content: stretch !important;
		gap: 0.625rem !important;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation ul > li { min-width: 0; width: auto !important; margin: 0 !important; }
	body.woocommerce-account .woocommerce-MyAccount-navigation ul > li > a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		box-sizing: border-box;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		white-space: nowrap;
	}
}

/* Pagamento (computador): "Ambiente seguro" e "Cupom" lado a lado, com a mesma altura;
   o aviso "Já é cliente?" fica embaixo, na largura toda. */
@media (min-width: 1000px) {
	html body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content > .woocommerce:has(> form.checkout_coupon) > .sk-secure-bar { grid-row: 1; grid-column: 1; }
	html body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content > .woocommerce:has(> .sk-secure-bar) > form.checkout_coupon { grid-row: 1; grid-column: 2; }
}

/* Teste e calculadora (SKYTEC Recursos): não passam da coluna no celular. */
html .skr-card { margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }

/* Seções dentro da coluna (ex.: perguntas frequentes da máquina): sem margem dupla dos lados. */
html body:not(#sk-w) main .page-body .wrap .wrap,
html body:not(#sk-w) main .wrap .wrap { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Carrinho (computador): a ajuda "Primeira compra?" fica em cima, na largura toda, como no celular.
   (O tema fixa as colunas na linha 2 com !important; aqui elas descem para a linha 3.) */
@media (min-width: 1000px) {
	html body.woocommerce-cart .entry-content div.woocommerce:has(> .sx-helpbar):has(> .woocommerce-cart-form) > .sx-helpbar { grid-area: 2 / 1 / 3 / -1 !important; align-self: start !important; }
	html body.woocommerce-cart .entry-content div.woocommerce:has(> .sx-helpbar):has(> .woocommerce-cart-form) > .woocommerce-cart-form { grid-area: 3 / 1 / 4 / 2 !important; }
	html body.woocommerce-cart .entry-content div.woocommerce:has(> .sx-helpbar):has(> .woocommerce-cart-form) > .cart-collaterals { grid-area: 3 / 2 / 4 / 3 !important; }
}
/* Carrinho: o cartão "Compra protegida" termina na mesma linha do cartão do total. */
body.woocommerce-cart .woocommerce:has(#shipping_method li) .sk-cart-extra { grid-template-rows: minmax(0, 1fr) !important; row-gap: 0 !important; }

/* Fim do carrinho, do pagamento e da conta: uma divisória só (a linha fina da seção de baixo),
   sem as linhas animadas repetidas. */
body .entry-content > .sk-stitch--in:has(+ .sk-help),
body.woocommerce-cart .entry-content > .woocommerce > .sk-stitch--in { display: none !important; }

/* Minha conta: cabeçalho dos cartões sempre igual (ícone à esquerda, texto ao lado), no celular também. */
body.woocommerce-account .sk-address .sk-addr-head { flex-wrap: nowrap !important; }
body.woocommerce-account .sk-address .sk-addr-htxt { flex: 1 1 0% !important; min-width: 0; }
/* Minha conta: o botão de cada cartão fica no pé do cartão, na largura toda e com a mesma altura
   (os cartões lado a lado ficam com os botões alinhados). */
body.woocommerce-account .sk-acc-card > .sk-acc-btn:not(.sk-acc-btn--wa),
body.woocommerce-account .sk-acc-card > .sk-acc-link {
	margin-top: auto !important;
	align-self: stretch !important;
	width: 100% !important;
	min-height: 3rem;
	justify-content: center !important;
	box-sizing: border-box;
}
@media (max-width: 37.5rem) {
	body.woocommerce-account .sk-acc-btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; }
}

/* A barra de leitura própria saiu (o tema já tem a dele no pé do menu). */
.sx-progress { display: none !important; }

/* ---------------------------------------------------------------------
   11. Formulários de endereço em passos (Minha conta e pagamento)
   Os campos aparecem conforme a pessoa preenche. Sem JavaScript, tudo aparece normal.
   --------------------------------------------------------------------- */
html.sx-form-pre :is(.woocommerce-address-fields__field-wrapper, .woocommerce-billing-fields__field-wrapper) { opacity: 0; }
.sx-passos { animation: sx-form-in .45s var(--sx-ease) both; }
@keyframes sx-form-in { from { opacity: 0; } to { opacity: 1; } }

.sx-passos > .form-row.sx-depois,
.sx-passos > .form-row.sx-oculto,
.sx-depois-btn { display: none !important; }

/* Rótulos sempre à esquerda, como em todo formulário do site. */
.sx-passos > .form-row > label { text-align: left !important; justify-content: flex-start !important; }

/* Títulos dos passos ("1. Seus dados", "2. Documento"...). */
.sx-passos > .form-row::before { content: none !important; display: none !important; }
.sx-passos > .form-row[data-sx-titulo]::before,
.sx-passos > .form-row[data-sx-fantasma]::before {
	content: attr(data-sx-n) ". " attr(data-sx-titulo) !important;
	display: block !important;
	height: auto !important;
	margin: 0 0 1rem !important;
	padding: 0 0 0.625rem !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(124, 192, 255, .18) !important;
	background: none !important;
	color: var(--sx-blue-tx) !important;
	font-family: var(--sx-title-font) !important;
	font-size: 0.8125rem !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	text-align: left !important;
	visibility: visible !important;
	position: static !important;
	width: auto !important;
	opacity: 1 !important;
}
.sx-passos > .form-row[data-sx-fantasma]:not([data-sx-titulo])::before { content: attr(data-sx-fantasma) !important; color: transparent !important; }
.sx-passos > .form-row[data-sx-titulo]:not(:first-child),
.sx-passos > .form-row[data-sx-titulo]:not(:first-child) + .form-row[data-sx-fantasma] { margin-top: 1.75rem !important; }

/* Campo entrando: sobe e aparece, um depois do outro. */
@keyframes sx-campo-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sx-passos > .form-row.sx-entra,
.sx-entra.form-row,
p.sx-entra,
div.sx-entra { animation: sx-campo-in .55s var(--sx-ease) both; animation-delay: calc(var(--sx-i, 0) * 80ms); }

/* Endereço preenchido pelo CEP: um brilho rápido mostra o que entrou sozinho. */
@keyframes sx-auto-brilho {
	0% { box-shadow: 0 0 0 0 rgba(74, 163, 255, 0); }
	30% { box-shadow: 0 0 0 4px rgba(74, 163, 255, .35); }
	100% { box-shadow: 0 0 0 0 rgba(74, 163, 255, 0); }
}
.sx-passos > .form-row.sx-auto :is(input.input-text, .select2-selection) { animation: sx-auto-brilho 1.4s var(--sx-ease); }

/* Campo certo: borda azul e um "certo" à direita. */
.sx-passos > .form-row.sx-ok input.input-text { border-color: rgba(124, 192, 255, .55) !important; padding-right: 2.75rem !important; }
.sx-passos > .form-row .woocommerce-input-wrapper { position: relative; display: block; }
.sx-passos > .form-row.sx-ok:not(:has(select)) .woocommerce-input-wrapper::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.625rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cc0ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	animation: sx-ok-in .35s var(--sx-ease) both;
}
@keyframes sx-ok-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Listas com select2: largura certa mesmo quando aparecem depois. */
.sx-passos .select2-container { width: 100% !important; }
.sx-passos .select2-selection__arrow {
	top: 50% !important;
	transform: translateY(-50%);
	right: 1rem !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cc0ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 1.1rem no-repeat !important;
	transition: transform .25s var(--sx-ease);
}
.sx-passos .select2-container--open .select2-selection__arrow { transform: translateY(-50%) rotate(180deg); }
.sx-passos .select2-selection__arrow b { display: none !important; }

/* Cabeçalho do formulário: passo atual + barra de progresso. */
.sx-form-head { display: grid; gap: 0.625rem; margin: 0 0 1.5rem; }
.sx-form-head-t { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sx-form-step { font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-blue-tx); }
.sx-form-title { font-family: var(--sx-title-font); font-size: 1.125rem; font-weight: 700; color: #fff; }
.sx-form-title.is-novo { animation: sx-titulo-in .45s var(--sx-ease) both; }
@keyframes sx-titulo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sx-form-bar { height: 0.375rem; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sx-form-bar span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(.04); background: linear-gradient(90deg, var(--sx-blue), var(--sx-blue-lt)); transition: transform .6s var(--sx-ease); }
.sx-form-head.is-pronto .sx-form-bar span { box-shadow: 0 0 12px rgba(74, 163, 255, .6); }

@media (prefers-reduced-motion: reduce) {
	.sx-passos, .sx-passos > .form-row.sx-entra, p.sx-entra, .sx-form-title.is-novo { animation: none !important; }
}

/* ---------------------------------------------------------------------
   12. Leitura fácil: nada de letra pequena demais no celular
   --------------------------------------------------------------------- */
/* Botão dos cards de máquina: o "CSS adicional" do WordPress deixava em 12px.
   Fica em 15px e não cresce em telas gigantes (lá o card não cresce junto e o texto era cortado).
   Se um dia faltar espaço, quebra em 2 linhas dentro do botão em vez de cortar. */
html .woocommerce ul.products li.product a.button,
html .woocommerce ul.products li.product a.button.add_to_cart_button,
html .woocommerce ul.products li.product a.button.product_type_simple,
html .woocommerce ul.products li.product a.button.product_type_variable,
html ul.products li.product a.button.button.add_to_cart_button,
html ul.products li.product a.button.button {
	font-size: min(0.9375rem, 15px) !important;
	white-space: normal !important;
	text-align: center !important;
	line-height: 1.2 !important;
}
html body .sk-oi-seals span { font-size: 0.8125rem !important; }
/* Selos do rodapé: o número do CNPJ ficava menor que os outros textos no celular. */
@media (max-width: 640px) {
	html body footer ul.sk-seals li:nth-child(3) > span { font-size: 1em; }
}
/* "(opcional)" mais leve que o nome do campo e nunca junto com o asterisco de obrigatório. */
.woocommerce form .form-row label .optional { font-weight: 400; opacity: .7; }
.woocommerce form .form-row label:has(abbr.required) .optional { display: none !important; }
html body .footer-legal .sk-nw { font-size: 0.8125rem !important; }
html body a.sk-cep-nao { font-size: 0.875rem !important; }
.sx-form-step { font-size: 0.875rem; }

/* ---------------------------------------------------------------------
   13. Não achou? (404 e busca sem resultado)
   --------------------------------------------------------------------- */
.sx-atalhos { display: grid; gap: 1rem; margin: 2rem 0 0; }
.sx-atalhos-t { margin: 0; text-align: center; font-weight: 700; color: var(--sx-ink-3); }
.sx-atalhos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 56.25rem) { .sx-atalhos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
body a.sx-atalho {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.625rem;
	min-height: 8.5rem;
	box-sizing: border-box;
	padding: 1.25rem 0.875rem;
	border: 1px solid var(--sx-line);
	border-radius: var(--sx-r-lg);
	background: linear-gradient(180deg, rgba(14, 22, 34, .92), rgba(8, 12, 18, .92)) !important;
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	transition: translate .35s var(--sx-ease), border-color .35s, box-shadow .35s;
}
@media (hover: hover) {
	body a.sx-atalho:hover { translate: 0 -4px; border-color: rgba(74, 163, 255, .55); box-shadow: 0 18px 40px -22px rgba(10, 112, 208, .8); }
}
.sx-atalho-ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--sx-blue-soft); border: 1px solid var(--sx-blue-line); color: var(--sx-blue-tx); }
.sx-atalho-ico svg { width: 1.625rem; height: 1.625rem; }
.sx-atalho.is-wa .sx-atalho-ico { background: rgba(13, 122, 66, .18); border-color: rgba(37, 180, 95, .55); color: #7ee0a8; }
.sx-atalho-t { font-family: var(--sx-title-font); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.woocommerce-no-products-found + .sx-atalhos, .woocommerce-info + .sx-atalhos { margin-top: 1.5rem; }