/*
Theme Name:   NKR Tintas
Theme URI:    https://nkrtintas.com.br
Description:  Tema filho do Storefront para a loja NKR Tintas. Reproduz o layout do mockup: topo azul fixo com busca, barra lateral de categorias, cards de produto densos e rodapé laranja.
Author:       NKR Tintas
Template:     storefront
Version:      1.20.0
Text Domain:  nkr-tintas
Tags:         e-commerce, two-columns, custom-colors
*/

/* =========================================================================
   1. Tokens de design (extraídos do mockup)
   ========================================================================= */
:root {
	/* Cores da marca */
	--nkr-primary: #fd7713;
	--nkr-primary-hover: #9c4500;
	--nkr-primary-fixed: #ffdbca;
	--nkr-secondary: #1b4f91;
	--nkr-secondary-dark: #084586;

	/* Superfícies */
	--nkr-background: #ffffff;
	--nkr-surface-gray: #f8f9fa;
	--nkr-surface-container: #ffeae0;
	--nkr-surface-container-low: #fff1eb;
	/* Fundo das telas no padrão de "cartões": um azul bem lavado, da família do
	   azul da marca, para o branco dos blocos se destacar. */
	--nkr-page-bg: #eef1f6;
	--nkr-bloco-radius: 10px;
	--nkr-bloco-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);

	/* Texto */
	--nkr-text-main: #212529;
	--nkr-text-muted: #6c757d;
	--nkr-on-surface: #251912;

	/* Estado */
	--nkr-success: #28a745;
	--nkr-error: #ba1a1a;
	--nkr-border-subtle: #e9ecef;

	/* Raios */
	--nkr-radius: 0.125rem;
	--nkr-radius-lg: 0.25rem;
	--nkr-radius-xl: 0.5rem;

	/* Espaçamento */
	--nkr-margin-page: 24px;
	--nkr-gutter: 12px;
	--nkr-card-gap: 12px;
	--nkr-sidebar-width: 260px;
	--nkr-header-height: 81px;
	/* Altura da barra de navegação inferior do celular (§8b). É token porque
	   outras peças fixas precisam se afastar dela — o aviso de cookies, por
	   exemplo, cobriria os atalhos sem esta medida. */
	--nkr-bottomnav-height: 64px;
	/* Respiro entre o cabeçalho fixo e o conteúdo, fora da home. Eram 24px, que
	   em cima de um cabeçalho fixo lê como faixa vazia, não como respiro — o
	   cartão branco já se separa do fundo sozinho. Virou token porque a fila
	   "Ordenar | Filtrar" do celular precisa anulá-lo para encostar na barra do
	   topo (ver §7c2). */
	--nkr-content-top: 10px;

	/* Tipografia */
	--nkr-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================================
   2. Base
   ========================================================================= */
body {
	font-family: var(--nkr-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--nkr-text-main);
	background: var(--nkr-background);
	padding-top: var(--nkr-header-height);
}

/* `clip`, não `hidden`.

   Os dois cortam o transbordo horizontal do mesmo jeito, mas `overflow-x:
   hidden` transforma o elemento em contêiner de rolagem — e `position: sticky`
   passa a se orientar por ele, não pela janela. Era por isso que a fila
   "Ordenar | Filtrar" do celular nascia 73px abaixo do cabeçalho e ainda assim
   sumia ao rolar: ela grudava num contêiner que nunca rola.

   `clip` corta sem criar contêiner de rolagem, e o sticky volta a valer contra
   a janela. */
body,
.site {
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nkr-font);
	color: var(--nkr-on-surface);
}

h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.02em; font-weight: 700; }

/* DESIGN.md: "On mobile, headline-lg should scale down to 24px to ensure
   headers don't push content below the fold." */
@media (max-width: 767px) {
	h1, .nkr-hero__title { font-size: 24px; line-height: 32px; }
}
h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
h3 { font-size: 18px; line-height: 24px; font-weight: 600; }

a { color: var(--nkr-secondary); }
a:hover { color: var(--nkr-primary); }

.nkr-label {
	font-size: 11px;
	line-height: 12px;
	letter-spacing: 0.05em;
	font-weight: 700;
}

/* Ícones Material Symbols */
.material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	vertical-align: middle;
	user-select: none;
	/* Sem isto a fonte de ícones herda line-height maior e incha a altura de
	   tudo que a contém — era o que deixava o cabeçalho 21px mais alto. */
	line-height: 1;
}

/* Variante preenchida — a lupa da busca usa FILL 1 no mockup. */
.material-symbols-outlined.nkr-icon-filled {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Logo do cabeçalho: limita a altura venha de onde vier (custom logo do
   WordPress, Elementor ou markup próprio). */
.nkr-header__logo img,
.nkr-header__logo .custom-logo-link img {
	height: 40px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}

/* =========================================================================
   3. Cabeçalho fixo (azul)
   ========================================================================= */
.nkr-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
	background: var(--nkr-secondary);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease-in-out, background 0.3s ease;
}

.nkr-header.nkr-header--scrolled {
	background: rgba(27, 79, 145, 0.85);
	backdrop-filter: blur(12px);
}

.nkr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px var(--nkr-margin-page);
	max-width: 100%;
}

.nkr-header__logo img {
	height: 40px;
	width: auto;
	object-fit: contain;
	display: block;
}

.nkr-header__logo .nkr-logo-text {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

/* Busca */
.nkr-search {
	flex: 1;
	max-width: 48rem;
	margin: 0 32px;
	position: relative;
	display: none;
}

/* O Storefront dá margem inferior a todo <form>; dentro do cabeçalho isso
   inchava a barra de busca em 21px e empurrava a altura do header inteiro. */
.nkr-search form {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.nkr-search input[type="search"],
.nkr-search input[type="text"] {
	width: 100%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--nkr-radius);
	padding: 12px 48px 12px 16px;
	color: #fff;
	font-family: var(--nkr-font);
	font-size: 14px;
	transition: border-color 0.2s ease;
}

.nkr-search input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.nkr-search input:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 0 1px #fff;
}

.nkr-search button {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
}

.nkr-search button:hover { color: var(--nkr-primary-fixed); }

/* Navegação */
.nkr-header__nav {
	display: none;
	align-items: center;
	gap: 24px;
}

.nkr-header__nav ul {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nkr-header__nav a {
	position: relative;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	padding: 4px 8px;
	transition: color 0.3s ease;
}

.nkr-header__nav a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--nkr-primary-fixed);
	transition: width 0.3s ease;
}

.nkr-header__nav a:hover { color: var(--nkr-primary-fixed); }
.nkr-header__nav a:hover::after { width: 100%; }


/* Ações (conta / carrinho) */
.nkr-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nkr-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.1s ease;
}

.nkr-action:hover { color: var(--nkr-primary-fixed); }
.nkr-action:active { transform: scale(0.95); }

.nkr-action__label {
	font-size: 11px;
	line-height: 12px;
	letter-spacing: 0.05em;
	font-weight: 700;
	margin-top: 4px;
}

.nkr-action__badge-wrap { position: relative; }

.nkr-action__badge {
	position: absolute;
	top: -4px;
	right: -8px;
	background: var(--nkr-primary);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 0 4px;
	border-radius: 999px;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.nkr-search { display: block; }
}

@media (min-width: 1024px) {
	.nkr-header__nav { display: flex; }
}

/* =========================================================================
   4. Barra lateral de categorias
   ========================================================================= */
.nkr-sidebar {
	display: none;
	position: fixed;
	left: 0;
	/* Vai até o topo (atrás do cabeçalho, que tem z-index maior). Assim,
	   quando o header se esconde ao rolar, aparece azul e não um vão branco. */
	top: 0;
	height: 100vh;
	width: var(--nkr-sidebar-width);
	background: var(--nkr-secondary);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	overflow-y: auto;
	z-index: 400;
	flex-direction: column;
	/* O padding reserva a altura do cabeçalho + o respiro do título. */
	padding: calc(var(--nkr-header-height) + 28px) 0 16px;
}

/* Alinhado à esquerda, como a lista de categorias logo abaixo. Centralizado,
   o título ficava desencaixado dos itens. */
.nkr-sidebar__title {
	padding: 0 16px;
	margin-bottom: 20px;
}

.nkr-sidebar__title h2 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--nkr-primary-fixed);
	margin: 0;
}

.nkr-sidebar__title p {
	font-size: 12px;
	line-height: 16px;
	/* 0.6 sobre o azul escuro dava ~2.5:1 de contraste: ilegível. */
	color: rgba(255, 255, 255, 0.85);
	margin: 4px 0 0;
}

.nkr-sidebar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* O deslocamento do hover é feito por uma barra `::before` que só muda de
   largura dentro do padding já reservado. A versão anterior animava
   `padding-left` e a categoria ativa ganhava `border-left: 4px`: os dois
   empurravam o texto, e nomes longos ("Acessórios e Materiais para Pintura")
   estouravam a altura fixa de 32px. Agora nada reflui — só cor e largura. */
.nkr-sidebar__nav a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 6px 16px 6px 20px;
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.05em;
	font-weight: 700;
	transition: background 0.3s ease, color 0.3s ease;
}

.nkr-sidebar__nav a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--nkr-primary);
	transition: width 0.3s ease;
}

.nkr-sidebar__nav a:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.nkr-sidebar__nav a:hover::before { width: 4px; }

.nkr-sidebar__nav .current-menu-item > a,
.nkr-sidebar__nav .current-cat > a {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.nkr-sidebar__nav .current-menu-item > a::before,
.nkr-sidebar__nav .current-cat > a::before { width: 4px; }

.nkr-sidebar__nav a .material-symbols-outlined {
	font-size: 18px;
	margin-right: 12px;
	flex-shrink: 0;
}

.nkr-sidebar__cta {
	padding: 0 16px;
	margin-top: 24px;
}

.nkr-sidebar__cta a {
	display: block;
	width: 100%;
	text-align: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	text-decoration: none;
	padding: 8px;
	border-radius: var(--nkr-radius);
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
	transition: background 0.3s ease, transform 0.3s ease;
}

.nkr-sidebar__cta a:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.03);
}

/* Rodapé da lateral: Minha Conta / Sair, como no mockup. */
.nkr-sidebar__foot {
	margin-top: auto;
	padding: 24px 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nkr-sidebar__foot a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 12px;
	line-height: 16px;
	transition: color 0.2s ease;
}

.nkr-sidebar__foot a:hover { color: #fff; }
.nkr-sidebar__foot .material-symbols-outlined { font-size: 16px; }

/* A barra lateral só existe no desktop (1200px+). Entre 768 e 1199 o
   DESIGN.md pede que ela some e o conteúdo use a largura toda — era o que
   deixava os cards espremidos e cortava a fila de categorias. */
@media (min-width: 1200px) {
	.nkr-sidebar { display: flex; }

	/* Como no mockup: o wrapper tem max-width 1440px e fica CENTRALIZADO
	   (mx-auto); o espaço da barra lateral é reservado por padding DENTRO
	   dele. Usar "margin-left: 260px" pinava tudo à esquerda e sobrava um
	   vazio enorme à direita em telas largas. */
	.nkr-has-sidebar .site-content {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
		padding-left: calc(var(--nkr-sidebar-width) + var(--nkr-margin-page));
	}

	/* O Storefront centraliza .col-full com margem automática; anulamos
	   para o deslocamento não ser somado de novo mais adentro. */
	.nkr-has-sidebar .site-content .col-full {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
		width: 100%;
	}

	/* O rodapé segue a mesma lógica: barra laranja em largura total, conteúdo
	   centralizado em 1440px, com o espaço da lateral reservado por padding. */
	.nkr-has-sidebar .nkr-footer__inner,
	.nkr-has-sidebar .nkr-footer__bottom {
		padding-left: calc(var(--nkr-sidebar-width) + var(--nkr-margin-page));
	}

}

/* O Storefront reserva 74% para o conteúdo e 26% para a barra de widgets
   dele. Como este tema usa a lateral própria, o conteúdo toma a largura
   inteira em TODAS as telas — inclusive busca e resultados, onde a barra de
   widgets órfã aparecia como um bloco estranho à esquerda. */
/* O Storefront mira #primary (seletor de ID, especificidade 100). Uma regra
   só de classe perde a disputa e o conteúdo fica preso em 73.9% da largura. */
#primary,
#primary.content-area,
.content-area,
.woocommerce .content-area,
.woocommerce-page .content-area {
	width: 100%;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

#secondary,
.widget-area,
.storefront-sorting + #secondary {
	display: none !important;
}

/* =========================================================================
   5. Conteúdo / grade de produtos
   ========================================================================= */
.site-content {
	padding: var(--nkr-gutter);
	max-width: 1440px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.site-content { padding: var(--nkr-margin-page); }
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nkr-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Breakpoints conforme DESIGN.md:
   Mobile (<767px)  → 2 colunas compactas
   Tablet (768px+)  → 3 colunas, sem barra lateral
   Desktop (1200px+) → 5 colunas, com barra lateral persistente */
@media (min-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* O Storefront/WooCommerce usa ::before/::after como clearfix da grade em
   float. Em CSS Grid, pseudo-elementos viram CÉLULAS — eles ocupavam as duas
   primeiras posições e empurravam todos os produtos para o lado. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

/* Neutraliza a grade em float do Storefront */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* --- Card --- */
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius);
	padding: 12px;
	/* stretch (padrão do grid) iguala a altura na linha; "height:100%"
	   atrapalhava e deixava os cards com promoção mais altos que os demais. */
	align-self: stretch;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Botão sempre colado na base, para alinhar entre cards de alturas diferentes. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
}

.woocommerce ul.products li.product:hover {
	transform: scale(1.04);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	z-index: 2;
}

/* Imagem quadrada com fundo cinza */
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: var(--nkr-surface-gray);
	border-radius: var(--nkr-radius);
	margin-bottom: 12px;
	width: 100%;
}

/* --- Etiquetas sobre a foto ----------------------------------------------
   Desconto à esquerda, "Novidade" à direita, as duas ancoradas no `li.product`
   e por cima da foto — que agora é o primeiro elemento em fluxo do card (a
   marca desceu para depois dela; ver nkr_card_marca()).

   `max-width` é o que impede o encontro das duas no meio: em card de 150px,
   "-25%" e "Novidade" somados passavam da largura e a segunda subia por cima
   da primeira. Com metade da largura menos o vão, cada uma fica no seu lado e
   o texto que não couber é cortado com reticências. */
.nkr-badge-sale,
.nkr-badge-novo {
	max-width: calc(50% - 14px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nkr-badge-sale {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	background: var(--nkr-error);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--nkr-radius);
	line-height: 1.4;
}

/* Esconde o "Promoção!" padrão do Woo */
.woocommerce span.onsale { display: none; }

/* A marca vive entre a foto e o título. Ela era o primeiro elemento do card e
   ocupava exatamente a faixa de 8px do topo onde as etiquetas pousam — em card
   estreito, "Novidade" cobria "Suvinil". */
.nkr-card__brand {
	font-size: 12px;
	line-height: 16px;
	color: var(--nkr-text-muted);
	margin-bottom: 4px;
	display: block;
	/* Nome de marca longo em card de 150px empurrava o título para baixo e
	   desalinhava a linha inteira de produtos. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px !important;
	line-height: 1.25 !important;
	font-weight: 400;
	color: var(--nkr-text-main);
	padding: 0 0 8px !important;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Sem altura fixa a terceira linha "vaza" por cima do preço. */
	height: 2.5em;
}

/* Etiquetas de atributo (rendimento, volume) */
.nkr-card__attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;
	margin-bottom: 8px;
}

.nkr-card__attr {
	background: var(--nkr-surface-gray);
	border: 1px solid var(--nkr-border-subtle);
	color: var(--nkr-text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 1px 4px;
	border-radius: var(--nkr-radius);
}

/* Preço */
.woocommerce ul.products li.product .price {
	margin: 4px 0 0;
	color: var(--nkr-primary);
	display: block;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: -0.01em;
	font-weight: 800;
}

.woocommerce ul.products li.product .price del {
	display: block;
	color: var(--nkr-text-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	opacity: 1;
	margin-bottom: 4px;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	text-decoration: none;
	color: var(--nkr-primary);
	font-weight: 800;
}

/* Indicador de estoque */
.nkr-card__stock {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
}

.nkr-card__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--nkr-success);
	flex-shrink: 0;
}

.nkr-card__stock-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--nkr-success);
}

.nkr-card__stock--out .nkr-card__stock-dot { background: var(--nkr-text-muted); }
.nkr-card__stock--out .nkr-card__stock-label { color: var(--nkr-text-muted); }

/* Botão de compra: só aparece no hover, para manter o card denso */
.woocommerce ul.products li.product .button {
	background: var(--nkr-primary);
	color: #fff;
	border-radius: var(--nkr-radius);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 8px 12px;
	margin-top: 8px;
	width: 100%;
	text-align: center;
	transition: background 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--nkr-primary-hover);
	color: #fff;
}

/* =========================================================================
   6. Botões gerais
   ========================================================================= */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--nkr-primary);
	color: #fff;
	border-radius: var(--nkr-radius);
	font-family: var(--nkr-font);
	font-weight: 700;
	transition: background 0.2s ease, transform 0.1s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--nkr-primary-hover);
	color: #fff;
}

.woocommerce a.button:active,
.woocommerce button.button:active { transform: scale(0.97); }

.nkr-btn-secondary {
	display: inline-block;
	background: var(--nkr-secondary);
	color: #fff !important;
	padding: 12px 24px;
	border-radius: var(--nkr-radius);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease;
}

.nkr-btn-secondary:hover {
	background: var(--nkr-secondary-dark);
	transform: scale(1.04);
}

/* =========================================================================
   7. Blocos de conteúdo da home
   ========================================================================= */
/* Hero */
/* A moldura acompanha a PROPORÇÃO da arte, em vez de uma altura fixa.

   Com altura fixa (eram 300px no celular e 400px no desktop) e `cover`, a arte
   de 953x398 numa faixa de 1392x400 era ampliada até caber na largura e perdia
   ~180px de altura no corte — sumia justamente o rodapé da foto, onde estão o
   rolo e o balde. Em retrato, no celular, o corte era pior ainda.

   Com `aspect-ratio` a moldura tem a forma da arte e nada é cortado. As duas
   medidas saem dos arquivos entregues pelo design: 953x398 no desktop,
   700x900 (retrato) no celular. */
.nkr-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 700 / 900;
	height: auto;
	border-radius: var(--nkr-radius-lg);
	overflow: hidden;
	background: var(--nkr-surface-gray);
	border: 1px solid var(--nkr-border-subtle);
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.nkr-hero {
		aspect-ratio: 953 / 398;
		height: auto;
	}
}

/* --- Ambilight -----------------------------------------------------------
   A mesma arte do slide, borrada e transbordando a moldura, atrás do banner —
   como a luz de fundo de uma TV. Não é sombra colorida chapada: é a própria
   imagem, então o halo acompanha as cores de cada campanha sozinho.

   Mora fora do `.nkr-hero` porque a moldura tem `overflow: hidden` (o canto
   arredondado), que recortaria o brilho justamente onde ele precisa vazar.
   `isolation: isolate` prende o `z-index: -1` das camadas ao palco: assim elas
   ficam atrás do banner sem cair atrás do fundo da página. */
.nkr-hero-palco {
	position: relative;
	isolation: isolate;
}

.nkr-hero__brilho {
	position: absolute;
	/* Vaza longe. Halo curto encosta na moldura e o olho lê retângulo; é a
	   distância que faz parecer luz. Mais embaixo do que em cima, porque luz de
	   TV cai no móvel e não no teto. */
	inset: -56px -72px -84px;
	z-index: -1;
	pointer-events: none;
}

.nkr-hero__brilho-camada {
	position: absolute;
	inset: 0;
	/* A arte vem em variável, não em `background-image` direto, porque a troca
	   desktop/celular acontece dentro da media query lá embaixo — o PHP imprime
	   as duas URLs e o CSS escolhe. Ver nkr_hero_slide_style(). */
	background-image: var(--nkr-hero-img);
	background-size: cover;
	background-position: center;
	/* Ordem importa. `brightness` primeiro: o fundo da página é claro, e a arte
	   escura do banner sem clarear vira um halo cinza que lê como sombra, não
	   como luz. `saturate` depois, para o azul sair azul e não lavado. `blur`
	   por último, sobre a cor já corrigida. */
	filter: brightness(1.9) saturate(2.8) blur(76px);
	transform: scale(1.12);
	opacity: 0;
	transition: opacity 0.7s ease;
	will-change: opacity;

	/* É esta máscara que tira o formato de caixa. Sem ela o brilho é um
	   retângulo de cor com a borda macia — que foi como ficou na primeira
	   tentativa. Com o degradê radial a intensidade cai do centro para fora, os
	   cantos somem primeiro, e o que sobra é um halo arredondado e irregular,
	   com a forma vindo da própria arte. */
	-webkit-mask-image: radial-gradient(farthest-side ellipse at 50% 50%, #000 36%, transparent 100%);
	mask-image: radial-gradient(farthest-side ellipse at 50% 50%, #000 36%, transparent 100%);
}

/* Intensidade do halo: é este número que se mexe se ficar forte ou fraco demais. */
.nkr-hero__brilho-camada.is-ativo { opacity: 0.85; }

/* A troca de slide apaga e acende: o JS põe `is-trocando` por 260ms (ver
   pintaBrilho() em nkr_inline_script), a luz cai quase a zero e volta sozinha
   quando a classe sai. Sem isso a transição seria só um cruzamento de fotos, e
   o pedido era o piscar suave. */
.nkr-hero__brilho.is-trocando .nkr-hero__brilho-camada.is-ativo { opacity: 0.1; }

/* Tela estreita: menos desfoque e menos vazamento. Blur grande em área grande
   é caro no celular, e a margem lateral da página não comporta o transbordo. */
@media (max-width: 640px) {
	/* A margem lateral da página não comporta 72px de vazamento, e desfoque
	   grande em área grande é caro na GPU do celular. */
	.nkr-hero__brilho {
		inset: -24px -16px -34px;
	}

	.nkr-hero__brilho-camada {
		filter: brightness(1.8) saturate(2.6) blur(38px);
		transform: scale(1.1);
	}

	.nkr-hero__brilho-camada.is-ativo { opacity: 0.8; }
}

/* Quem pediu menos movimento fica com o halo, mas sem o piscar. */
@media (prefers-reduced-motion: reduce) {
	.nkr-hero__brilho-camada { transition: none; }
	.nkr-hero__brilho.is-trocando .nkr-hero__brilho-camada.is-ativo { opacity: 0.85; }
}

/* A trilha é a mesma receita do carrossel de lojas: rolagem horizontal com
   `scroll-snap`, sem biblioteca e sem `transform`. Com uma imagem só ela não
   rola — o banner fica idêntico ao que sempre foi. */
.nkr-hero__trilha {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.nkr-hero__trilha::-webkit-scrollbar { display: none; }

/* Cada slide é uma página da trilha e leva DENTRO dele a arte e o texto. Antes
   o texto era um overlay único por cima da trilha inteira: a arte girava e a
   chamada ficava parada, anunciando a campanha errada em dois dos três slides.
   Com o conteúdo dentro do slide, tudo anda junto sem nenhuma linha de JS. */
.nkr-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	width: 100%;
	height: 100%;
}

.nkr-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--nkr-hero-img);
	background-size: cover;
	background-position: center;
	/* Cor de reserva: sem imagem definida, o hero fica azul da marca
	   em vez de parecer um bloco quebrado. */
	background-color: var(--nkr-secondary);
}

/* Arte própria de celular. A regra vale para o slide e para a camada do
   ambilight; sem `--nkr-hero-img-mob` definida, o `var()` cai na de desktop e
   o comportamento é o de sempre. Recorte vertical importa: banner panorâmico
   reduzido a 360px de largura vira uma tira em que não se lê nada. */
@media (max-width: 767px) {
	.nkr-hero__bg,
	.nkr-hero__brilho-camada {
		background-image: var(--nkr-hero-img-mob, var(--nkr-hero-img));
	}
}

.nkr-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px;
	/* O overlay cobre o banner inteiro. Sem isto ele engoliria o clique das
	   setas e das bolinhas, que ficam por baixo dele. */
	pointer-events: none;
}

.nkr-hero__overlay > * { pointer-events: auto; }

/* Do segundo slide em diante o título é <p> (só o primeiro leva <h1>, ver
   front-page.php). Sem isto ele herdaria o corpo de parágrafo e o carrossel
   teria um slide com chamada grande e os outros com chamada pequena. */
p.nkr-hero__title {
	font-size: clamp(24px, 3.4vw, 36px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* --- Setas e bolinhas do banner ------------------------------------------
   Ficam DENTRO do hero (que tem `overflow: hidden`), então encostam na borda
   em vez de flutuar para fora como as do carrossel de lojas. */
.nkr-hero__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: 999px;
	background: var(--nkr-background);
	color: var(--nkr-secondary);
	box-shadow: 0 4px 12px rgba(16, 32, 43, 0.16);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Só aparecem quando o JS confirma que há o que rolar (ver nkr_inline_script). */
.nkr-hero--carrossel.is-rolavel .nkr-hero__seta { display: flex; }

.nkr-hero__seta:hover {
	background: var(--nkr-primary);
	border-color: var(--nkr-primary);
	color: #fff;
}

.nkr-hero__seta[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

.nkr-hero__seta[disabled]:hover {
	background: var(--nkr-background);
	border-color: var(--nkr-border-subtle);
	color: var(--nkr-secondary);
}

.nkr-hero__seta--antes  { left: 12px; }
.nkr-hero__seta--depois { right: 12px; }

.nkr-hero__pontos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.nkr-hero__ponto {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 999px;
	/* Sobre foto, cinza claro some. Branco translúcido lê em qualquer arte. */
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.nkr-hero__ponto.is-ativo {
	width: 24px;
	background: var(--nkr-primary);
}

/* Em tela estreita a arte é menor e as setas cobririam o texto do overlay.
   Sobram as bolinhas, que também deslizam com o dedo. */
@media (max-width: 640px) {
	.nkr-hero--carrossel.is-rolavel .nkr-hero__seta { display: none; }
}

@media (min-width: 768px) { .nkr-hero__overlay { padding: 48px; } }

/* A seta "anterior" fica DENTRO da moldura, colada na borda esquerda (12px de
   margem, 44px de diâmetro): ela termina em 56px, e o texto do slide começava
   em 48px — a bolinha branca pousava por cima da primeira letra de cada linha.
   O recuo abre espaço para ela passar.

   Só onde a seta existe: com uma imagem só não há carrossel, e indentar o
   texto sem motivo desalinharia o banner do resto da página. Abaixo de 640px
   as setas somem (ver mais acima), e o recuo sai junto. */
@media (min-width: 641px) {
	.nkr-hero--carrossel.is-rolavel .nkr-hero__overlay {
		padding-left: 76px;
	}
}

.nkr-hero__tag {
	display: inline-block;
	width: fit-content;
	background: var(--nkr-primary);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: var(--nkr-radius);
	margin-bottom: 16px;
}

.nkr-hero__title {
	color: #fff;
	max-width: 28rem;
	margin: 0 0 8px;
}

.nkr-hero__text {
	color: var(--nkr-surface-gray);
	font-size: 16px;
	line-height: 24px;
	max-width: 28rem;
	margin: 0 0 24px;
}

.nkr-hero__cta {
	display: inline-block;
	width: fit-content;
	background: var(--nkr-primary);
	color: #fff;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: var(--nkr-radius);
	font-size: 18px;
	line-height: 24px; /* 12 + 24 + 12 = 48px, igual ao mockup */
	font-weight: 600;
	transition: background 0.3s ease, transform 0.3s ease;
}

.nkr-hero__cta:hover {
	background: var(--nkr-primary-hover);
	color: #fff;
	transform: scale(1.04);
}

/* --- Overlay no celular --------------------------------------------------
   A arte de celular é retrato e a área livre fica no TERÇO DE CIMA, não à
   esquerda (é assim que o design entregou os dois formatos). O texto sobe para
   lá e o véu passa a descer de cima para baixo — curto, para não escurecer a
   foto que ocupa o resto do quadro.

   Só título e botão. O parágrafo de apoio some: em 375px ele tomava mais três
   linhas e, somado ao véu, cobria metade da arte — que é o assunto do banner.
   O título já diz a oferta e o botão já diz o próximo passo. Ele continua no
   desktop, onde a faixa livre da esquerda comporta os três sem disputar espaço
   com a foto.

   Este bloco precisa vir DEPOIS das regras base de `.nkr-hero__title/__text/
   __cta` — estava antes, e o empate de especificidade ia para a regra base por
   ela aparecer mais adiante na folha: o botão continuava com o corpo e o
   recheio do desktop. */
@media (max-width: 767px) {
	.nkr-hero__overlay {
		justify-content: flex-start;
		padding: 24px 20px;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 38%, transparent 62%);
	}

	.nkr-hero__title {
		max-width: 15ch;
		margin-bottom: 16px;
	}

	.nkr-hero__text { display: none; }

	.nkr-hero__cta {
		font-size: 14px;
		line-height: 20px;
		padding: 8px 16px;
	}
}

/* =========================================================================
   7a2. Cartões brancos sobre fundo claro — o site inteiro

   Padrão de marketplace: a página tem fundo levemente azulado e cada seção
   vira um cartão branco com canto arredondado e sombra leve. Assim cada bloco
   tem começo e fim visíveis, em vez de tudo correr sobre o mesmo branco.

   Começou como teste só na home (v1.14.0) e foi estendido a todas as telas.
   Na home, cada seção do `front-page.php` carrega a classe `.nkr-bloco`; nas
   demais telas, quem vira cartão é o `.site-main` (e alguns blocos próprios do
   WooCommerce, tratados logo abaixo).
   ========================================================================= */
body {
	background: var(--nkr-page-bg);
}

.nkr-bloco {
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-bloco-radius);
	box-shadow: var(--nkr-bloco-shadow);
	padding: 24px;
	margin: 0 0 20px;
}

/* --- Telas que não são a home ------------------------------------------
   O conteúdo principal vira o cartão. Carrinho, checkout e minha conta têm
   blocos próprios e recebem tratamento separado mais abaixo. */
body:not(.home) .site-main {
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-bloco-radius);
	box-shadow: var(--nkr-bloco-shadow);
	padding: 24px;
	margin-bottom: 24px;
}

/* A margem do conteúdo já vem do #page; sem isto o cartão encostaria no topo
   logo abaixo do cabeçalho fixo. */
body:not(.home) .site-content {
	padding-top: var(--nkr-content-top, 24px);
}

/* Página de produto: o miolo é um cartão e a recomendação é outro, para os
   dois não virarem um bloco branco só, comprido demais. */
body.single-product .nkr-recomendados {
	margin: 24px -24px -24px;
	padding: 24px;
	border-top: 1px solid var(--nkr-border-subtle);
	background: var(--nkr-surface-gray);
	border-radius: 0 0 var(--nkr-bloco-radius) var(--nkr-bloco-radius);
	max-width: none;
}

/* Carrinho e checkout: o bloco do WooCommerce já é a "folha" da tela, então
   ele mesmo vira o cartão e o `.site-main` fica transparente, para não
   empilhar duas molduras. */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* Nada de `.cross-sells` / `.wp-block-woocommerce-product-collection` nesta
   lista: os sugeridos ficam DENTRO do bloco do carrinho, então virariam cartão
   branco dentro de cartão branco — a mesma sobreposição que já apertava a
   vitrine no celular. Lá dentro, quem tem cara de cartão é cada produto. */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
body.woocommerce-checkout .woocommerce > form.checkout,
body.woocommerce-cart .cart-collaterals,
/* Checkout em blocos: dados de entrega/pagamento num cartão, resumo do
   pedido noutro — as duas colunas que o cliente lê em paralelo. */
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-components-sidebar {
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-bloco-radius);
	box-shadow: var(--nkr-bloco-shadow);
	padding: 24px;
	margin-bottom: 20px;
}

/* Minha conta: menu lateral e conteúdo viram dois cartões. */
body.woocommerce-account .site-main {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce > .woocommerce-form-login,
body.woocommerce-account .woocommerce > .woocommerce-form-register,
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-bloco-radius);
	box-shadow: var(--nkr-bloco-shadow);
	padding: 24px;
	margin-bottom: 20px;
}

/* No celular a loja e a busca soltam a grade, como na home: cartão branco
   dentro de cartão branco espremia os dois produtos da linha. */
@media (max-width: 767px) {
	body.woocommerce-shop .site-main,
	body.tax-product_cat .site-main,
	body.tax-product_tag .site-main,
	body.search-results .site-main {
		background: none;
		border: none;
		box-shadow: none;
		padding: 0;
	}

	body:not(.home) ul.products li.product {
		border-radius: var(--nkr-bloco-radius);
		box-shadow: var(--nkr-bloco-shadow);
	}
}

/* A barra de selos tinha fundo cinza e filetes em cima e embaixo — dentro de
   um cartão branco os dois viram sujeira visual. */
body.home .nkr-trust.nkr-bloco {
	background: var(--nkr-background);
	border-top: 1px solid var(--nkr-border-subtle);
	border-bottom: 1px solid var(--nkr-border-subtle);
}

/* Os blocos já dão o respiro entre si; as margens antigas de cada seção
   somariam e dobrariam o espaçamento. */
body.home .nkr-quick-cats.nkr-bloco,
body.home .nkr-dual-cta.nkr-bloco {
	margin-bottom: 20px;
}

body.home .nkr-lojas {
	margin-top: 0;
}

/* O hero não vira cartão branco (a arte é o próprio fundo), mas acompanha o
   arredondamento e a sombra para não destoar da fila. */
body.home .nkr-hero {
	margin-bottom: 20px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);
}

/* Banner B2B: os estilos vinham em `style=` no template. Agora moram aqui,
   onde dá para ajustar sem mexer no PHP. */
.nkr-b2b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 32px 0;
	padding: 24px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	background: var(--nkr-surface-container-low);
}

.nkr-b2b__texto {
	flex: 1;
	min-width: 260px;
}

.nkr-b2b__tag {
	display: block;
	margin-bottom: 8px;
	color: var(--nkr-secondary);
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.nkr-b2b h3 { margin: 0 0 8px; }
.nkr-b2b p { margin: 0; color: var(--nkr-text-muted); }

/* Dentro da home o banner é um cartão como os outros, então troca o fundo
   creme pelo branco e não repete margem. */
body.home .nkr-b2b.nkr-bloco {
	background: var(--nkr-background);
	margin: 0 0 20px;
}

/* No celular, cartão branco dentro de cartão branco espremia a vitrine: o
   bloco comia 24px de cada lado e sobrava pouco para os dois produtos da
   linha. Aqui a vitrine perde a moldura e cada produto vira o próprio cartão
   sobre o fundo claro — é o arranjo do Mercado Livre. O título da seção fica
   direto sobre o fundo, como lá. */
@media (max-width: 767px) {
	body.home .nkr-bloco--vitrine {
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}

	body.home .nkr-bloco--vitrine .woocommerce ul.products li.product,
	body.home .nkr-bloco--vitrine ul.products li.product {
		border-radius: 10px;
		box-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);
	}

	/* Sem a moldura, o cabeçalho da seção precisa do próprio respiro lateral
	   para não encostar na borda da tela. */
	body.home .nkr-bloco--vitrine .nkr-section-head {
		padding: 0 4px;
	}
}

/* Categorias rápidas.

   A barra tinha itens de 80px em linha simples: com 4 ou 5 categorias reais,
   sobrava metade da largura vazia à direita. Agora cada atalho é um cartão que
   estica (`flex: 1 1 0`) e o conjunto fica centralizado, então a fila preenche
   a faixa toda em qualquer quantidade. O `max-width` evita o extremo oposto —
   dois cartões gigantescos ocupando 700px cada. */
/* Grade de 4 que dobra direto para 2x2 — nunca 3.

   `auto-fit` + `minmax()` parecia resolver, mas ele desce de 4 para 3 e depois
   para 2: na faixa do meio sobrava uma linha de 3 e outra com 1 cartão
   esticado, que é justamente o desalinhamento que se queria evitar. Com duas
   contagens fixas e um único ponto de troca, ou são 4 por linha ou são 2x2.

   O ponto de troca é 1060px porque é onde a coluna de conteúdo (a página tem
   1440px de teto e 24px de margem de cada lado) ainda comporta 4 cartões de
   240px com os 16px de vão entre eles. */
.nkr-quick-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding-bottom: 8px;
	margin-bottom: 32px;
	scrollbar-width: none;
}

@media (min-width: 1060px) {
	.nkr-quick-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.nkr-quick-cats::-webkit-scrollbar { display: none; }

/* Cartão deitado: ícone à esquerda, título e legenda à direita — e um fio
   laranja na base, que é a assinatura da marca no bloco.
   Sem `max-width`: o cartão preenche a coluna da grade. Com o teto de 320px
   sobrava vão morto à direita de cada um, e o recheio ficava colado numa borda
   e longe da outra — exatamente a diferença entre respiro lateral e vertical
   que incomodava. `min-height` completa: o cartão fica alto o bastante para os
   18px de cima e de baixo lerem como o mesmo respiro dos 20px das laterais. */
.nkr-quick-cat {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	min-width: 0;
	min-height: 92px;
	padding: 18px 20px;
	border: 1px solid var(--nkr-border-subtle);
	border-bottom: 3px solid var(--nkr-primary);
	border-radius: var(--nkr-radius-lg);
	background: var(--nkr-background);
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nkr-quick-cat:hover {
	background: var(--nkr-surface-gray);
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.nkr-quick-cat__icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	/* O mockup NÃO usa círculo: o Tailwind dele redefine rounded-full como
	   0.75rem, então são quadrados de cantos arredondados (12px). */
	border-radius: 12px;
	background: var(--nkr-surface-container);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nkr-primary);
	transition: background 0.3s ease, color 0.3s ease;
}

.nkr-quick-cat__icon .material-symbols-outlined { font-size: 30px; }

.nkr-quick-cat:hover .nkr-quick-cat__icon {
	background: var(--nkr-primary);
	color: #fff;
}

.nkr-quick-cat__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nkr-quick-cat__label {
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: var(--nkr-text-main);
}

.nkr-quick-cat__sub {
	font-size: 12px;
	line-height: 16px;
	color: var(--nkr-text-muted);
}

/* No celular continua 2x2 (era rolagem horizontal, que escondia metade das
   categorias atrás de um gesto que ninguém adivinha). O cartão é que muda de
   forma: com 160px de largura o ícone ao lado do texto espremia o rótulo em
   três linhas, então ele sobe para cima. */
@media (max-width: 599px) {
	.nkr-quick-cats {
		gap: 10px;
		margin-bottom: 24px;
	}

	.nkr-quick-cat {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		min-height: 0;
		padding: 14px;
	}

	.nkr-quick-cat__icon { width: 44px; height: 44px; }
	.nkr-quick-cat__icon .material-symbols-outlined { font-size: 24px; }
	.nkr-quick-cat__label { font-size: 14px; }
}

/* =========================================================================
   7d. Ordem dos blocos da home no celular

   No desktop os atalhos de categoria abrem a página: são a régua do catálogo,
   e a tela comporta ver a fila inteira antes da primeira vitrine. No celular
   cada cartão ocupa meia largura, os atalhos viram duas ou três telas de
   rolagem e empurram os produtos para baixo da dobra — quem entra pela home
   não vê produto nenhum sem rolar.

   Aqui eles descem para depois das vitrines: o produto aparece primeiro, e a
   navegação por categoria fica logo abaixo, para quem não achou o que queria.
   `order` só existe em contexto flex/grid, daí o `display:flex` no <main>. */
@media (max-width: 767px) {
	body.home .site-main {
		display: flex;
		flex-direction: column;
	}

	body.home .site-main .nkr-hero-palco     { order: 1; }
	body.home .site-main .nkr-trust--topo    { order: 2; }
	body.home .site-main .nkr-bloco--vitrine { order: 3; }
	body.home .site-main .nkr-quick-cats     { order: 4; }
	body.home .site-main .nkr-dual-cta       { order: 5; }
	body.home .site-main .nkr-b2b            { order: 6; }
	body.home .site-main .nkr-bloco--lojas   { order: 7; }
}

/* Cabeçalho de seção */
.nkr-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 16px;
}

.nkr-section-head h2 { margin: 0; }

.nkr-section-head a {
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: var(--nkr-secondary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.nkr-section-head a:hover { text-decoration: underline; }

/* CTA duplo */
.nkr-dual-cta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 32px 0;
}

@media (min-width: 768px) { .nkr-dual-cta { grid-template-columns: repeat(2, 1fr); } }

.nkr-cta-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
	border-radius: var(--nkr-radius-lg);
	background: var(--nkr-surface-gray);
	border: 1px solid var(--nkr-border-subtle);
	text-decoration: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nkr-cta-card:hover {
	border-color: var(--nkr-secondary);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nkr-cta-card h3 { margin: 0 0 4px; }

.nkr-cta-card p {
	font-size: 12px;
	line-height: 16px;
	color: var(--nkr-text-muted);
	max-width: 200px;
	margin: 0;
}

.nkr-cta-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(27, 79, 145, 0.1);
	color: var(--nkr-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.3s ease, color 0.3s ease;
}

.nkr-cta-card:hover .nkr-cta-card__icon {
	background: var(--nkr-secondary);
	color: #fff;
}

/* Variante WhatsApp */
.nkr-cta-card--whatsapp {
	background: #e8f5e9;
	border-color: #a5d6a7;
}

.nkr-cta-card--whatsapp:hover { border-color: #4caf50; }
.nkr-cta-card--whatsapp h3 { color: #1b5e20; }
.nkr-cta-card--whatsapp p { color: #2e7d32; }

.nkr-cta-card--whatsapp .nkr-cta-card__icon {
	background: rgba(76, 175, 80, 0.2);
	color: #2e7d32;
}

.nkr-cta-card--whatsapp:hover .nkr-cta-card__icon {
	background: #4caf50;
	color: #fff;
}

/* Selos de confiança */
.nkr-trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding: 24px 0;
	margin: 32px 0;
	border-top: 1px solid var(--nkr-border-subtle);
	border-bottom: 1px solid var(--nkr-border-subtle);
	background: var(--nkr-surface-gray);
}

@media (min-width: 768px) { .nkr-trust { grid-template-columns: repeat(4, 1fr); } }

.nkr-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 0 16px;
}

@media (min-width: 768px) {
	.nkr-trust__item {
		flex-direction: row;
		text-align: left;
	}
	.nkr-trust__item + .nkr-trust__item {
		border-left: 1px solid var(--nkr-border-subtle);
	}
}

.nkr-trust__item .material-symbols-outlined {
	font-size: 30px;
	color: var(--nkr-secondary);
}

.nkr-trust__item h4 {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	white-space: nowrap;
}

/* Em telas estreitas o "nowrap" atrapalha mais do que ajuda. */
@media (max-width: 900px) {
	.nkr-trust__item h4 { white-space: normal; }
}

.nkr-trust__item p {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--nkr-text-muted);
}

/* =========================================================================
   8. Botão flutuante do WhatsApp
   ========================================================================= */
.nkr-whatsapp {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
	z-index: 600;
	text-decoration: none;
	transition: transform 0.3s ease;
	animation: nkr-pulse 2s ease-in-out infinite;
}

.nkr-whatsapp:hover {
	transform: scale(1.1);
	color: #fff;
}

/* Marca oficial do WhatsApp (SVG inline), no lugar do balão genérico. */
.nkr-whatsapp__logo {
	width: 30px;
	height: 30px;
	display: block;
}

@keyframes nkr-pulse {
	0%, 100% { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0.5); }
	50% { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* =========================================================================
   7a3. Respiro da barra de ordenação de baixo

   O Storefront repete a barra de ordenação depois da lista e dá margem só
   embaixo dela. Resultado: a barra de cima fica a 32px da grade e a de baixo
   encosta na última linha de produtos (vão de 0px). Com os cartões brancos
   isso ficou evidente — dois blocos brancos colados. Aqui a margem de cima da
   segunda barra iguala a de baixo da primeira.
   ========================================================================= */
ul.products + .storefront-sorting {
	margin-top: 32px;
}

/* =========================================================================
   7b1. Sugeridos dentro do carrinho

   Depois de adicionar um item sugerido, o WooCommerce pendura um link
   "Ver carrinho" embaixo do botão. Na página do carrinho isso é um botão para
   onde a pessoa já está — ocupa espaço e confunde. O contador do topo e o
   próprio carrinho já dão o retorno de que entrou.
   ========================================================================= */
.woocommerce-cart .added_to_cart,
.woocommerce-cart .wc-block-components-product-button .added_to_cart {
	display: none !important;
}

/* Alinhamento dos cartões sugeridos.

   O bloco do WooCommerce empilha imagem, título, preço e botão sem altura em
   comum: título de três linhas empurrava o preço do vizinho para baixo e cada
   cartão terminava numa altura. Aqui os itens viram colunas de mesma altura,
   a imagem ganha proporção fixa e o botão é empurrado para a base — então
   preço e botão ficam na mesma linha em todos. */
.woocommerce-cart .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.woocommerce-cart .wc-block-product-template { grid-template-columns: repeat(3, 1fr); }
}

.woocommerce-cart .wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-bloco-radius);
	background: var(--nkr-background);
	text-align: center;
}

.woocommerce-cart .wc-block-product-template .wc-block-components-product-image,
.woocommerce-cart .wc-block-product-template .wc-block-components-product-image__inner-container {
	display: block;
	margin: 0 0 12px;
}

/* A lata é alta e a foto vem quadrada: com `cover` (que é o padrão do bloco do
   WooCommerce e vinha vencendo esta regra) o topo e a base da embalagem eram
   cortados. `contain` mostra o produto inteiro dentro da altura fixa — o
   `!important` é para vencer o CSS do próprio bloco. */
.woocommerce-cart .wc-block-product-template img {
	width: 100%;
	height: 160px;
	object-fit: contain !important;
	object-position: center;
}

/* Título: sem sublinhado, na cor do texto, e limitado a duas linhas para o
   preço começar sempre na mesma altura. */
/* O `!important` aqui não é preguiça: o WordPress emite as classes de tamanho
   de fonte dos blocos (`.has-medium-font-size`) já com `!important`, e o
   layout de bloco fixa o `display`. Sem forçar, o título sai com 23px e
   ignora o corte de duas linhas. */
.woocommerce-cart .wc-block-product-template .wp-block-post-title {
	margin: 0 0 8px;
	font-size: 14px !important;
	line-height: 19px !important;
	font-weight: 600;
	min-height: 38px;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce-cart .wc-block-product-template .wp-block-post-title a {
	color: var(--nkr-text-main);
	text-decoration: none;
}

.woocommerce-cart .wc-block-product-template .wp-block-post-title a:hover {
	color: var(--nkr-primary-hover);
	text-decoration: underline;
}

.woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-price {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--nkr-text-main);
}

/* `margin-top: auto` cola o botão na base do cartão. */
.woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-button {
	margin-top: auto;
	margin-bottom: 0;
}

.woocommerce-cart .wc-block-product-template .wc-block-components-product-button__button {
	width: 100%;
	background: var(--nkr-primary);
	border-color: var(--nkr-primary);
	color: #fff;
	font-weight: 700;
}

.woocommerce-cart .wc-block-product-template .wc-block-components-product-button__button:hover {
	background: var(--nkr-primary-hover);
	border-color: var(--nkr-primary-hover);
	color: #fff;
}

/* =========================================================================
   7b2. Selos de formas de pagamento
   ========================================================================= */
.nkr-pagamentos__titulo {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nkr-text-muted);
}

.nkr-pagamentos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nkr-pagamento {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	background: var(--nkr-background);
	color: var(--nkr-text-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
}

.nkr-pagamento .material-symbols-outlined {
	font-size: 20px;
	color: var(--nkr-secondary);
}

/* No rodapé laranja o selo vira contorno claro sobre o fundo da marca. */
.nkr-footer .nkr-pagamento {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.nkr-footer .nkr-pagamento .material-symbols-outlined { color: #fff; }

/* =========================================================================
   7c. Barra de filtros da loja (chips de tipo + painel de marca/preço)
   ========================================================================= */
.nkr-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	position: relative;
}

.nkr-filtros__tipos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.nkr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: 999px;
	background: var(--nkr-background);
	color: var(--nkr-text-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nkr-chip:hover {
	border-color: var(--nkr-primary);
	color: var(--nkr-primary-hover);
}

.nkr-chip.is-ativo {
	background: var(--nkr-secondary);
	border-color: var(--nkr-secondary);
	color: #fff;
}

.nkr-chip__n {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.65;
}

.nkr-filtros__botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: 999px;
	background: var(--nkr-background);
	color: var(--nkr-text-main);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.nkr-filtros__botao:hover {
	border-color: var(--nkr-primary);
	color: var(--nkr-primary-hover);
}

.nkr-filtros__botao .material-symbols-outlined { font-size: 18px; }

/* Pontinho laranja: há filtro aplicado mesmo com o painel fechado. */
.nkr-filtros__marcador {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--nkr-primary);
}

.nkr-filtros__painel {
	width: 100%;
	display: grid;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	background: var(--nkr-surface-gray);
}

.nkr-filtros__painel[hidden] { display: none; }

@media (min-width: 768px) {
	.nkr-filtros__painel { grid-template-columns: 2fr 1fr auto; align-items: end; }
}

.nkr-filtros__grupo {
	margin: 0;
	padding: 0;
	border: none;
}

.nkr-filtros__grupo legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nkr-text-muted);
}

.nkr-filtros__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.nkr-filtros__marca {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}

.nkr-filtros__preco {
	display: flex;
	gap: 10px;
}

.nkr-filtros__preco label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--nkr-text-muted);
}

.nkr-filtros__preco input {
	width: 110px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius);
	background: var(--nkr-background);
	font-family: inherit;
	font-size: 14px;
}

.nkr-filtros__acoes {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nkr-filtros__limpar {
	color: var(--nkr-text-muted);
	font-size: 13px;
	text-decoration: underline;
}

/* --- Lista de ordenação (painel do botão "Ordenar") ---------------------- */
.nkr-filtros__painel--lista {
	display: block;
	padding: 6px;
	background: var(--nkr-background);
}

.nkr-filtros__opcao {
	display: block;
	padding: 12px 14px;
	border-radius: var(--nkr-radius-lg);
	color: var(--nkr-text-main);
	font-size: 15px;
	text-decoration: none;
}

.nkr-filtros__opcao:hover,
.nkr-filtros__opcao:focus {
	background: var(--nkr-surface-gray);
	color: var(--nkr-primary-hover);
}

.nkr-filtros__opcao.is-ativo {
	font-weight: 700;
	color: var(--nkr-secondary);
}

/* Marca o critério em vigor sem depender de cor — quem enxerga pouco contraste
   continua sabendo onde está. */
.nkr-filtros__opcao.is-ativo::after {
	content: "check";
	font-family: "Material Symbols Outlined";
	float: right;
	font-size: 18px;
	color: var(--nkr-primary);
}

/* O grupo "Tipo de produto" dentro do painel é a versão de celular dos chips.
   No desktop a fila de chips já está à vista logo acima — repetir seria dizer
   a mesma coisa duas vezes na mesma tela. */
.nkr-filtros__grupo--tipos { display: none; }

.nkr-filtros__tipos-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* =========================================================================
   7c1. Barra de controles do desktop — uma linha só

   Como estava: `.storefront-sorting` é um bloco com FLOATS. O `<select>` de
   ordenação flutuava à esquerda com 284px de largura, os chips de categoria
   vinham como um bloco flex logo depois e quebravam em duas linhas, o botão
   "Filtros" ficava perdido na ponta direita e a contagem de resultados caía
   numa terceira linha. Resultado: 136px de altura, vãos enormes no meio e
   nenhuma relação visível entre os controles.

   O arranjo novo é o dos marketplaces: filtros de categoria à esquerda,
   controles (ordenar + filtros) à direita, contagem numa linha discreta
   embaixo. Tudo na mesma faixa branca.

   `display: contents` no wrapper dos filtros é o que torna isso possível sem
   mexer no PHP: ele deixa de gerar caixa e seus filhos — chips, botão e painel
   — viram itens diretos do flex da barra, podendo ser reordenados junto com o
   `<select>` e a contagem, que são irmãos dele no HTML.
   ========================================================================= */
@media (min-width: 768px) {
	.storefront-sorting {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 16px;
	}

	.storefront-sorting > .woocommerce-notices-wrapper { flex: 0 0 100%; }

	.storefront-sorting .nkr-filtros--desktop { display: contents; }

	/* Duas linhas, e não uma: os nomes de categoria daqui são longos
	   ("Esmaltes para Madeira e Metal"), e disputar a linha com o `<select>`
	   deixava os chips em duas fileiras espremidas de qualquer jeito. Com a
	   linha inteira à disposição eles cabem numa fileira só.

	   Linha 1: contagem à esquerda, ordenação e filtros à direita.
	   Linha 2: chips de categoria. */
	.storefront-sorting .woocommerce-result-count {
		order: 1;
		flex: 1 1 auto;
		float: none;
		margin: 0;
		font-size: 13px;
		color: var(--nkr-text-muted);
	}

	.storefront-sorting .woocommerce-ordering {
		order: 2;
		float: none;
		margin: 0;
		flex: 0 0 auto;
	}

	/* 284px de largura e 50px de altura para um `<select>` de duas palavras era
	   metade da barra e a linha mais alta dela. O campo de formulário do tema
	   é dimensionado para digitação; aqui ele é um controle de listagem. */
	.storefront-sorting .woocommerce-ordering select {
		max-width: 220px;
		height: auto;
		padding: 8px 12px;
		font-size: 14px;
		line-height: 20px;
	}

	.storefront-sorting .nkr-filtros__botao {
		order: 3;
		flex: 0 0 auto;
		margin: 0;
	}

	.storefront-sorting .nkr-filtros__tipos {
		order: 4;
		flex: 0 0 100%;
		min-width: 0;
		margin: 0;
		padding-top: 12px;
		border-top: 1px solid var(--nkr-border-subtle);
	}

	/* O painel abre embaixo, ocupando a barra inteira. */
	.storefront-sorting .nkr-filtros__painel {
		order: 5;
		flex: 0 0 100%;
		margin-top: 4px;
	}
}

/* =========================================================================
   7c2. Fila "Ordenar | Filtrar" do celular (arranjo de marketplace)

   Dois botões de largura igual cobrindo a linha inteira, grudados na barra
   azul do topo e acompanhando a rolagem, com o título da listagem logo abaixo.
   No desktop a peça não existe: lá cabem os chips de categoria e o <select> de
   ordenação do Storefront, que dizem mais do que dois botões genéricos.
   ========================================================================= */
.nkr-filtros--mobile { display: none; }

@media (max-width: 767px) {
	/* O cabeçalho do celular não tem a busca (ela só aparece a partir de
	   768px), então mede 73px — logotipo de 40 mais 16 de recheio de cada lado
	   mais a borda. O token global dizia 81px, medida do desktop: sobrava uma
	   faixa morta de 8px abaixo da barra azul, e a fila grudava 8px baixo
	   demais ao rolar. */
	:root {
		--nkr-header-height: 73px;
	}

	/* Na home o primeiro bloco é o banner, e banner encosta na barra do topo:
	   a faixa clara entre os dois só separava a marca dela mesma. */
	body.home .site-content {
		padding-top: 0;
	}

	.nkr-filtros--mobile {
		display: block;
		position: sticky;
		/* Encosta na barra do topo, que é fixa e tem esta altura. */
		top: var(--nkr-header-height);
		z-index: 60;
		/* Sangra até as bordas da tela: barra de marketplace vai de ponta a
		   ponta, e a margem lateral da página a deixaria com jeito de cartão.
		   O `margin-top` negativo anula o respiro do conteúdo: sem ele a fila
		   nascia 24px abaixo do cabeçalho e só encostava depois de rolar. */
		margin: calc(var(--nkr-content-top, 24px) * -1) calc(var(--nkr-gutter) * -1) 20px;
		/* Mesma curva do cabeçalho, para as duas peças andarem em sincronia. */
		transition: transform 0.3s ease-in-out;
	}

	@media (prefers-reduced-motion: reduce) {
		.nkr-filtros--mobile { transition: none; }
	}

	/* Campo de busca colado na fila, dentro da mesma barra: mesma sombra, mesma
	   sangria, e o sumiço com o cabeçalho vem de graça por ser filho dela. */
	.nkr-filtros__busca {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 8px 12px;
		background: var(--nkr-background);
		border-top: 1px solid var(--nkr-border-subtle);
	}

	.nkr-filtros__busca input[type="search"] {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 9px 12px;
		border: 1px solid var(--nkr-border-subtle);
		border-radius: 999px;
		background: var(--nkr-surface-gray);
		font-family: inherit;
		font-size: 14px;
		line-height: 20px;
		color: var(--nkr-text-main);
	}

	.nkr-filtros__busca input[type="search"]:focus {
		outline: none;
		border-color: var(--nkr-secondary);
		background: var(--nkr-background);
	}

	.nkr-filtros__busca button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--nkr-secondary);
		color: #fff;
		cursor: pointer;
	}

	.nkr-filtros__busca button:active { transform: scale(0.95); }
	.nkr-filtros__busca .material-symbols-outlined { font-size: 20px; }

	.nkr-filtros__fila {
		display: grid;
		grid-template-columns: 1fr 1fr;
		background: var(--nkr-background);
		border-top: 1px solid var(--nkr-border-subtle);
		border-bottom: 1px solid var(--nkr-border-subtle);
		box-shadow: 0 2px 6px rgba(16, 32, 43, 0.06);
	}

	.nkr-filtros__acao {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 10px;
		border: 0;
		background: none;
		color: var(--nkr-text-main);
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
	}

	/* Fio entre os dois, como no app do Mercado Livre. */
	.nkr-filtros__acao + .nkr-filtros__acao {
		border-left: 1px solid var(--nkr-border-subtle);
	}

	.nkr-filtros__acao .material-symbols-outlined { font-size: 20px; }

	.nkr-filtros__acao.is-aberto {
		color: var(--nkr-secondary);
		background: var(--nkr-surface-gray);
	}

	/* O painel vira uma folha que desce por cima da listagem, ancorada na
	   fila. `position: absolute` dentro da barra sticky mantém os dois juntos
	   quando a página rola. */
	.nkr-filtros--mobile .nkr-filtros__painel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 2;
		max-height: 70vh;
		overflow-y: auto;
		margin: 0;
		border: 0;
		border-bottom: 1px solid var(--nkr-border-subtle);
		border-radius: 0;
		background: var(--nkr-background);
		box-shadow: 0 12px 24px -12px rgba(16, 32, 43, 0.35);
	}

	.nkr-filtros--mobile .nkr-filtros__painel[hidden] { display: none; }

	/* No celular o painel de filtros mostra o tipo de produto: a fila de chips
	   não cabe na tela e some (ver abaixo). */
	.nkr-filtros__grupo--tipos { display: block; }

	/* Fila de chips e botão "Filtros" do desktop somem — quem faz o papel
	   deles no celular é a fila de ações. */
	.nkr-filtros--desktop { display: none; }

	/* O <select> de ordenação do Storefront também: virou o botão "Ordenar". */
	.woocommerce-ordering { display: none; }

	/* Sem os chips e sem o <select>, sobra a contagem de resultados sozinha no
	   painel branco. Ela carrega uma margem inferior de 17px do Storefront que,
	   com 16px de recheio em cima e embaixo, deixava o texto colado no topo de
	   uma caixa de 69px. Zerando a margem, os 16px valem dos dois lados e a
	   linha fica no meio. */
	.storefront-sorting .woocommerce-result-count {
		margin-bottom: 0;
	}

	/* Título da listagem com respiro em relação à fila logo acima — o pedido
	   era exatamente este: barra colada no topo, margem antes do título. */
	.nkr-filtros--mobile + .woocommerce-products-header,
	.nkr-filtros--mobile + .storefront-breadcrumb {
		margin-top: 12px;
	}
}

/* =========================================================================
   8a0. Bloco de recomendação abaixo do produto ("Costuma levar junto")
   ========================================================================= */
.nkr-recomendados {
	margin: 40px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--nkr-border-subtle);
	max-width: 1100px;
}

.nkr-recomendados .up-sells h2,
.nkr-recomendados .related h2 {
	text-align: center;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	margin: 0 0 20px;
}

/* =========================================================================
   8a1. Página do produto — as duas formas de comprar
   ========================================================================= */
.nkr-pdp-opcoes {
	margin: 16px 0 4px;
}

/* Linha "ou" entre o botão do carrinho e o do WhatsApp: deixa explícito que
   são dois caminhos, não um passo depois do outro. */
.nkr-pdp-opcoes__ou {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--nkr-text-muted);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nkr-pdp-opcoes__ou::before,
.nkr-pdp-opcoes__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--nkr-border-subtle);
}

.nkr-pdp-whats {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 2px solid #25d366;
	border-radius: var(--nkr-radius-lg);
	background: #fff;
	color: #075e54;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.nkr-pdp-whats:hover {
	background: #25d366;
	color: #fff;
	transform: translateY(-2px);
}

.nkr-pdp-whats .nkr-whatsapp__logo {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

.nkr-pdp-whats strong {
	display: block;
	font-size: 15px;
	line-height: 20px;
}

.nkr-pdp-whats small {
	display: block;
	font-size: 12px;
	line-height: 16px;
	opacity: 0.8;
}

/* =========================================================================
   8a2. Janela de captura antes do WhatsApp

   Imita a conversa do WhatsApp de propósito: topo verde com o contato, fundo
   bege da conversa e um balão recebido. O formulário fica dentro da conversa,
   como se fosse a próxima mensagem — quem chega entende em um segundo o que
   vai acontecer ao preencher.
   ========================================================================= */
.nkr-zap {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 24px;
}

.nkr-zap[hidden] { display: none; }

.nkr-zap__fundo {
	position: absolute;
	inset: 0;
	background: rgba(16, 32, 43, 0.45);
}

.nkr-zap__janela {
	position: relative;
	width: 100%;
	max-width: 380px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: #ece5dd;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
	animation: nkr-zap-entra 220ms ease-out;
}

@keyframes nkr-zap-entra {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nkr-zap__janela { animation: none; }
}

.nkr-zap__topo {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #075e54;
	color: #fff;
}

.nkr-zap__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	flex-shrink: 0;
}

.nkr-zap__avatar .nkr-whatsapp__logo { width: 22px; height: 22px; }

.nkr-zap__quem { flex: 1; min-width: 0; }
.nkr-zap__quem strong { display: block; font-size: 15px; line-height: 20px; }
.nkr-zap__quem span { font-size: 12px; opacity: 0.85; }

.nkr-zap__fechar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.nkr-zap__fechar:hover { background: rgba(255, 255, 255, 0.18); }

.nkr-zap__conversa {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px 18px;
	/* Trama discreta do papel de parede da conversa, sem imagem externa. */
	background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
	background-size: 16px 16px;
}

.nkr-zap__balao {
	position: relative;
	max-width: 88%;
	margin-bottom: 14px;
	padding: 10px 12px 18px;
	border-radius: 0 8px 8px 8px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
	font-size: 14px;
	line-height: 20px;
	color: #111b21;
}

/* Rabinho do balão recebido. */
.nkr-zap__balao::before {
	content: "";
	position: absolute;
	top: 0;
	left: -8px;
	border: 8px solid transparent;
	border-top-color: #fff;
	border-right-color: #fff;
}

.nkr-zap__balao p { margin: 0 0 6px; }
.nkr-zap__balao p:last-of-type { margin-bottom: 0; }

.nkr-zap__hora {
	position: absolute;
	right: 10px;
	bottom: 4px;
	font-size: 11px;
	color: #667781;
}

.nkr-zap__form {
	padding: 14px;
	border-radius: 8px 0 8px 8px;
	background: #dcf8c6;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
	margin-left: auto;
	max-width: 96%;
}

.nkr-zap__campo { margin-bottom: 10px; }

.nkr-zap__campo label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #075e54;
}

.nkr-zap__campo input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(7, 94, 84, 0.25);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #111b21;
}

.nkr-zap__campo input:focus {
	outline: 2px solid #25d366;
	outline-offset: 1px;
	border-color: #25d366;
}

.nkr-zap__campo.is-erro input {
	border: 2px solid var(--nkr-error);
	background: #fff5f5;
}

.nkr-zap__erro {
	display: block;
	margin-top: 4px;
	color: var(--nkr-error);
	font-size: 12px;
	font-weight: 600;
}

.nkr-zap__erro[hidden] { display: none; }

.nkr-zap__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nkr-zap__enviar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border: none;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}

.nkr-zap__enviar:hover { background: #1ebe5b; }
.nkr-zap__enviar[disabled] { opacity: 0.7; cursor: default; }
.nkr-zap__enviar .nkr-whatsapp__logo { width: 20px; height: 20px; }

.nkr-zap__aviso {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: #075e54;
}

.nkr-zap__aviso[hidden] { display: none; }
.nkr-zap__aviso.is-erro { color: var(--nkr-error); }

.nkr-zap__legal {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 15px;
	color: #4a635d;
}

.nkr-zap__legal a { color: #075e54; }

/* No celular a janela ocupa a tela toda: 380px numa tela de 360 sobraria
   metade da conversa fora do enquadramento. */
@media (max-width: 480px) {
	.nkr-zap { padding: 0; align-items: stretch; }

	.nkr-zap__janela {
		max-width: none;
		max-height: none;
		border-radius: 0;
	}
}

/* =========================================================================
   8a3. Rodapé colado na base quando a página é curta

   Categoria vazia, busca sem resultado, 404: o conteúdo tem poucas linhas e o
   rodapé subia para o meio da tela, deixando uma faixa branca embaixo dele —
   parecia página quebrada.

   O `body` vira coluna flexível de altura mínima igual à da janela e o `#page`
   é quem estica. Cabeçalho, barra lateral, botão do WhatsApp e a janela de
   captura são `position: fixed`, então não entram no fluxo flexível e nada
   disso muda de lugar.
   ========================================================================= */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > #page {
	flex: 1 0 auto;
}

body > .nkr-footer {
	flex-shrink: 0;
	margin-top: auto;
}

/* =========================================================================
   8b. Barra de navegação inferior (só mobile — ver mobile/mobile.html)
   ========================================================================= */
.nkr-bottomnav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--nkr-bottomnav-height, 64px);
	background: #fff;
	border-top: 1px solid var(--nkr-border-subtle);
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 8px calc(env(safe-area-inset-bottom, 0px) / 2);
	z-index: 550;
}

.nkr-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: var(--nkr-text-muted);
	transition: color 0.2s ease;
}

.nkr-bottomnav__item.is-active,
.nkr-bottomnav__item:hover { color: var(--nkr-secondary); }

.nkr-bottomnav__icon {
	width: 56px;
	height: 32px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	transition: background 0.2s ease;
}

.nkr-bottomnav__item.is-active .nkr-bottomnav__icon {
	background: rgba(27, 79, 145, 0.1);
}

.nkr-bottomnav__icon .material-symbols-outlined { font-size: 24px; }

.nkr-bottomnav__label {
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 0.05em;
	font-weight: 700;
}

/* Só existe no mobile. */
@media (min-width: 768px) {
	.nkr-bottomnav { display: none; }
}

/* Espaço para o conteúdo não ficar sob a barra, e o WhatsApp acima dela. */
@media (max-width: 767px) {
	body { padding-bottom: 64px; }

	.nkr-whatsapp {
		bottom: 80px;
		right: 16px;
		width: 48px;
		height: 48px;
	}

	.nkr-whatsapp__logo { width: 28px; height: 28px; }
}

/* =========================================================================
   8c. Formulários (WooCommerce, comentários e widget do Elementor)
   ========================================================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .woocommerce-form-login input.input-text,
.wc-block-components-text-input input,
.elementor-field-textual,
input[type="text"]:not(.nkr-search input),
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"]:not(.nkr-search input),
textarea,
select {
	background: #fff;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius);
	padding: 10px 12px;
	font-family: var(--nkr-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--nkr-text-main);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus,
.elementor-field-textual:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--nkr-primary);
	box-shadow: 0 0 0 3px rgba(253, 119, 19, 0.15);
}

.woocommerce form .form-row label,
.wc-block-components-text-input label,
.elementor-field-label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--nkr-on-surface);
	margin-bottom: 4px;
}

.woocommerce form .form-row .required,
.woocommerce .required { color: var(--nkr-error); }

/* Avisos e mensagens. O Storefront deixa o texto branco (fundo escuro dele);
   como trocamos o fundo por claro, é obrigatório fixar a cor do texto —
   senão fica branco no branco e some. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	border-top-color: var(--nkr-primary);
	border-radius: var(--nkr-radius);
	background: var(--nkr-surface-gray);
	color: var(--nkr-text-main);
	font-size: 14px;
}

/* Links dentro dos avisos (ex.: "Ver carrinho") também precisam de contraste. */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: var(--nkr-secondary); }

.woocommerce-message::before,
.woocommerce-info::before { color: var(--nkr-primary); }
.woocommerce-error { border-top-color: var(--nkr-error); }
.woocommerce-error::before { color: var(--nkr-error); }

/* =========================================================================
   8d. Checkout enxuto (briefing: "visual limpo, reduzir distrações")
   ========================================================================= */
.woocommerce-checkout .nkr-bottomnav,
.woocommerce-cart .nkr-bottomnav { display: none; }

@media (max-width: 767px) {
	.woocommerce-checkout body,
	body.woocommerce-checkout { padding-bottom: 0; }
}

/* Resumo do pedido em destaque */
.woocommerce-checkout #order_review,
.wc-block-components-sidebar {
	background: var(--nkr-surface-gray);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	padding: 20px;
}

.woocommerce-checkout #order_review .order-total .amount,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--nkr-primary);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.woocommerce-checkout #place_order,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	background: var(--nkr-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 24px;
	border-radius: var(--nkr-radius);
}

.woocommerce-checkout #place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--nkr-primary-hover);
}

/* Selos de segurança abaixo do botão */
.nkr-checkout-selos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--nkr-border-subtle);
}

.nkr-checkout-selos span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--nkr-text-muted);
}

.nkr-checkout-selos .material-symbols-outlined {
	font-size: 18px;
	color: var(--nkr-success);
}

/* --- Endereço: CEP e Bairro na mesma linha ------------------------------
   O `nkr_locale_endereco_br()` já reordena pelo lado do servidor. Estas regras
   garantem a ordem visual mesmo que uma versão do bloco de checkout ignore o
   `priority` do locale — o contêiner é flex-wrap, então `order` resolve. */
.wc-block-components-address-form__country    { order: 1; }
.wc-block-components-address-form__first_name { order: 2; }
.wc-block-components-address-form__last_name  { order: 3; }
.wc-block-components-address-form__postcode   { order: 4; }
.wc-block-components-address-form__address_1  { order: 5; }
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__address_2-hidden-input { order: 6; }
.wc-block-components-address-form__city       { order: 7; }
.wc-block-components-address-form__state      { order: 8; }
.wc-block-components-address-form__phone      { order: 9; }

/* Campos adicionais do tema (ver nkr_registrar_campo_bairro / _cpf).
   A API de campos adicionais do WooCommerce não aceita posição: o campo entra
   como último filho e sem `order`, o que no flex vale 0 — por isso o CPF
   aparecia ANTES do País.

   Bairro com o MESMO `order` do CEP: empatados, o navegador desempata pela
   ordem do HTML, e o campo adicional é o último filho — então cai à direita do
   CEP, no lugar que o Sobrenome ocupa na linha do Nome. A largura vem do
   próprio bloco (`flex: 1 0 calc(50% - 12px)` em todos), que divide a linha
   entre os dois sem precisar de regra aqui. */
.wc-block-components-address-form__nkr-bairro { order: 4; }
.wc-block-components-address-form__nkr-cpf    { order: 10; }

@media (max-width: 600px) {
	.wc-block-components-address-form__postcode,
	.wc-block-components-address-form__nkr-bairro { flex: 0 0 100%; }
}

/* No checkout clássico e em "Minha conta → Endereços" o próprio WooCommerce
   ordena pelo `priority`, então não precisa de CSS. */

/* O CPF não é opcional: o "Brazilian Market on WooCommerce" registra o campo
   com `required => false` porque quem decide é o "Tipo de Pessoa" — e é o
   JavaScript dele que acrescenta o `*` ao rótulo quando Pessoa Física está
   selecionada. Só que ele não tira o "(opcional)" que o WooCommerce já tinha
   escrito ali (para o `billing_company` ele tira; para o CPF, esqueceu). O
   rótulo saía "CPF (opcional) *" — e quem lê só o começo deixa em branco e
   esbarra em "CPF é um campo obrigatório" no fim da compra.

   Por que CSS e não `required => true` no filtro do tema: o campo é escondido
   para Pessoa Jurídica, e um campo obrigatório escondido faz o WooCommerce
   barrar a compra do CNPJ pedindo um CPF que não está na tela. A validação de
   verdade continua sendo a do plugin, que já olha o tipo de pessoa. */
#billing_cpf_field label .optional {
	display: none;
}

/* A dica do campo de número. O rótulo dele é `screen-reader-text` (padrão do
   WooCommerce para o `address_2`), então quem enxerga a tela só tem o
   placeholder — e o placeholder some assim que a pessoa começa a digitar.
   Esta linha é o que continua dizendo que o complemento cabe no mesmo campo. */
.woocommerce form .form-row#billing_address_2_field .description,
.woocommerce form .form-row#shipping_address_2_field .description {
	display: block;
	margin: 4px 0 0;
	color: var(--nkr-on-surface-variant, #5b6b7a);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* =========================================================================
   8g. Formulário de orçamento B2B
   ========================================================================= */
/* Mesma linguagem dos cartões de vantagem logo acima — fio laranja no topo,
   sombra elevada e borda mais quente —, só que **fixa**, sem depender de hover.
   Nos cartões o efeito é convite para explorar; aqui o formulário é o objetivo
   da página, então ele já chega em destaque em vez de ter que ser descoberto.
   Também resolve o toque: em celular não existe hover, e é lá que a maioria vai
   preencher. */
.nkr-orcamento {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 24px;
	background: var(--nkr-background);
	border: 1px solid var(--nkr-outline-variant, #e0c0b0);
	border-radius: var(--nkr-radius-lg);
	box-shadow: 0 12px 24px -12px rgba(16, 32, 43, 0.18);
	transition: box-shadow 0.2s ease;
}

/* O fio laranja já entra inteiro, sem o scaleX(0) dos cartões. */
.nkr-orcamento::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--nkr-primary);
}

/* Enquanto alguém preenche, sobe mais um pouco — o formulário responde a quem
   está nele sem que nada mude de lugar. */
.nkr-orcamento:focus-within {
	box-shadow: 0 18px 32px -14px rgba(16, 32, 43, 0.24);
}

@media (prefers-reduced-motion: reduce) {
	.nkr-orcamento { transition: none; }
}

/* Duas colunas no desktop; o campo longo ocupa a linha inteira. */
.nkr-orcamento__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 720px) {
	.nkr-orcamento__grade { grid-template-columns: repeat(2, 1fr); }
	.nkr-orcamento__campo.is-largo { grid-column: 1 / -1; }
}

.nkr-orcamento__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nkr-orcamento__campo label {
	font-size: 13px;
	font-weight: 700;
	color: var(--nkr-text-main);
}

.nkr-orcamento__req { color: var(--nkr-primary); }

.nkr-orcamento__campo input,
.nkr-orcamento__campo select,
.nkr-orcamento__campo textarea {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--nkr-text-main);
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius);
}
.nkr-orcamento__campo textarea { min-height: 110px; resize: vertical; }

.nkr-orcamento__campo input:focus,
.nkr-orcamento__campo select:focus,
.nkr-orcamento__campo textarea:focus {
	border-color: var(--nkr-secondary);
	outline: 2px solid var(--nkr-secondary);
	outline-offset: -2px;
}

.nkr-orcamento__campo small {
	font-size: 12px;
	line-height: 17px;
	color: var(--nkr-text-muted);
}

/* Campo que voltou em branco do servidor. Antes era só `border-color` em cima
   de uma borda de 1px cinza-claro: na prática ninguém enxergava qual campo
   tinha errado. Agora são três sinais somados — borda de 2px, fundo lavado e
   a mensagem embaixo (impressa pelo PHP). */
.nkr-orcamento__campo.is-erro input,
.nkr-orcamento__campo.is-erro select,
.nkr-orcamento__campo.is-erro textarea {
	border: 2px solid var(--nkr-error);
	background: #fff5f5;
}

.nkr-orcamento__campo.is-erro label { color: var(--nkr-error); }

.nkr-orcamento__campo.is-erro input:focus,
.nkr-orcamento__campo.is-erro select:focus,
.nkr-orcamento__campo.is-erro textarea:focus {
	outline: 2px solid var(--nkr-error);
	outline-offset: 1px;
}

.nkr-orcamento__erro {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--nkr-error);
	font-weight: 600;
}

.nkr-orcamento__erro .material-symbols-outlined { font-size: 16px; }

/* Aviso de spam depois do envio. */
.nkr-orcamento__spam {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 8px;
	color: var(--nkr-text-muted);
	font-size: 13px;
	line-height: 19px;
}

.nkr-orcamento__spam .material-symbols-outlined {
	font-size: 18px;
	flex-shrink: 0;
	color: var(--nkr-secondary);
}

/* Isca de robô: fora da tela, sem display:none — robô ignora o que está oculto. */
.nkr-orcamento__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nkr-orcamento__consentimento {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--nkr-border-subtle);
}
.nkr-orcamento__consentimento label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 19px;
	color: var(--nkr-text-muted);
}
.nkr-orcamento__consentimento input { margin-top: 2px; flex-shrink: 0; }
.nkr-orcamento__consentimento a { color: var(--nkr-secondary); text-decoration: underline; }
.nkr-orcamento__consentimento.is-erro { color: var(--nkr-error); }

.nkr-orcamento__enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	min-height: 48px;
	padding: 0 28px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--nkr-primary);
	border: 0;
	border-radius: var(--nkr-radius);
	cursor: pointer;
}
.nkr-orcamento__enviar:hover { background: var(--nkr-primary-hover); }

/* Avisos de retorno */
.nkr-orcamento__aviso {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 20px;
	padding: 16px 18px;
	border-radius: var(--nkr-radius-lg);
	font-size: 14px;
	line-height: 20px;
}
.nkr-orcamento__aviso p { margin: 4px 0 0; }
.nkr-orcamento__aviso .material-symbols-outlined { flex-shrink: 0; }

.nkr-orcamento__aviso.is-ok {
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	color: #1b5e20;
}
.nkr-orcamento__aviso.is-ok .material-symbols-outlined { color: var(--nkr-success); }

.nkr-orcamento__aviso.is-erro {
	background: #fdecea;
	border: 1px solid #f5c2be;
	color: var(--nkr-error);
}
.nkr-orcamento__aviso.is-erro .material-symbols-outlined { color: var(--nkr-error); }

/* =========================================================================
   8f. Lojas da rede — grade de cards com gaveta "Ver no mapa"
   ========================================================================= */
.nkr-lojas {
	margin: 48px 0 0;
}

.nkr-lojas__titulo {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.nkr-lojas__intro {
	margin: 0 0 24px;
	color: var(--nkr-text-muted);
	font-size: 15px;
	line-height: 22px;
}

.nkr-lojas__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px)  { .nkr-lojas__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nkr-lojas__grade { grid-template-columns: repeat(3, 1fr); } }

/* --- Modo carrossel: 3 lojas por vez, setas nas laterais ------------------
   A faixa é uma rolagem horizontal com `scroll-snap`; as setas só chamam
   `scrollBy()`. Sem biblioteca e sem `transform` na trilha, então a sombra do
   hover do card não é recortada e o teclado navega na ordem natural. */
.nkr-lojas--carrossel .nkr-lojas__palco {
	position: relative;
}

.nkr-lojas--carrossel .nkr-lojas__grade {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Respiro para a sombra e o translateY(-6px) do hover não serem cortados. */
	padding: 8px 4px 16px;
	margin: 0 -4px;
}

.nkr-lojas--carrossel .nkr-lojas__grade::-webkit-scrollbar { display: none; }

.nkr-lojas--carrossel .nkr-loja {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.nkr-lojas--carrossel .nkr-loja { flex-basis: calc((100% - 20px) / 2); }
}

@media (min-width: 1024px) {
	.nkr-lojas--carrossel .nkr-loja { flex-basis: calc((100% - 40px) / 3); }
}

/* Fontes maiores no carrossel: o pedido era justamente facilitar a leitura. */
.nkr-lojas--carrossel .nkr-loja__nome { font-size: 22px; }

.nkr-lojas--carrossel .nkr-loja__endereco,
.nkr-lojas--carrossel .nkr-loja__horario,
.nkr-lojas--carrossel .nkr-loja__telefone {
	font-size: 15px;
	line-height: 22px;
}

.nkr-lojas--carrossel .nkr-loja__corpo .material-symbols-outlined {
	font-size: 20px;
	line-height: 22px;
}

.nkr-lojas__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: 999px;
	background: var(--nkr-background);
	color: var(--nkr-secondary);
	box-shadow: 0 4px 12px rgba(16, 32, 43, 0.16);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Só aparecem quando o JS confirma que há o que rolar (ver nkr_inline_script). */
.nkr-lojas--carrossel.is-rolavel .nkr-lojas__seta { display: flex; }

.nkr-lojas__seta:hover {
	background: var(--nkr-primary);
	border-color: var(--nkr-primary);
	color: #fff;
}

.nkr-lojas__seta[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

.nkr-lojas__seta[disabled]:hover {
	background: var(--nkr-background);
	border-color: var(--nkr-border-subtle);
	color: var(--nkr-secondary);
}

.nkr-lojas__seta--antes  { left: -20px; }
.nkr-lojas__seta--depois { right: -20px; }

/* Em tela estreita não há margem externa para a seta flutuar: ela encosta na
   borda do palco, sobre a foto do card. */
@media (max-width: 1099px) {
	.nkr-lojas__seta--antes  { left: 2px; }
	.nkr-lojas__seta--depois { right: 2px; }
}

.nkr-lojas__pontos {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
}

.nkr-lojas__ponto {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--nkr-border-subtle);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.nkr-lojas__ponto.is-ativo {
	width: 24px;
	background: var(--nkr-primary);
}

/* O card recorta a gaveta e é o contexto de posicionamento dela. */
.nkr-loja {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	box-shadow: 0 1px 2px rgba(16, 32, 43, 0.04);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.nkr-loja:hover,
.nkr-loja:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(16, 32, 43, 0.14);
}

/* Foto em faixa 4:3 — as imagens do site antigo têm 269×203, então elas ficam
   contidas na largura do card sem ampliação agressiva. Quando chegarem fotos
   melhores, é só trocar na biblioteca de mídia: o layout não muda. */
.nkr-loja__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--nkr-surface-container-low);
	overflow: hidden;
}

.nkr-loja__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sem foto: bloco na cor da marca com o ícone de loja. */
.nkr-loja__foto .material-symbols-outlined {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	color: var(--nkr-primary);
	opacity: 0.5;
}

/* A faixa de 52px no rodapé fica sempre reservada: é onde a gaveta entra.
   Como ela já existe (vazia) antes do hover, nenhum texto é coberto e a
   grade não muda de altura quando a aba aparece. */
.nkr-loja__corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 52px;
}

.nkr-loja__nome {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--nkr-secondary);
}

.nkr-loja__endereco,
.nkr-loja__horario,
.nkr-loja__telefone {
	display: flex;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--nkr-text-muted);
}

.nkr-loja__corpo .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 18px;
	line-height: 19px;
	color: var(--nkr-primary);
}

.nkr-loja__horario-linha { display: block; }

.nkr-loja__telefone a {
	color: var(--nkr-secondary);
	font-weight: 600;
	text-decoration: none;
}
.nkr-loja__telefone a:hover { text-decoration: underline; }

/* A gaveta: escondida abaixo da borda, sobe no hover ou no foco do teclado. */
.nkr-loja__mapa {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	background: var(--nkr-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(100%);
	transition: transform 220ms ease, background-color 160ms ease;
}

.nkr-loja:hover .nkr-loja__mapa,
.nkr-loja:focus-within .nkr-loja__mapa {
	transform: translateY(0);
}

.nkr-loja__mapa:hover,
.nkr-loja__mapa:focus {
	background: var(--nkr-primary-hover);
	color: #fff;
}

.nkr-loja__mapa .material-symbols-outlined {
	font-size: 18px;
	color: #fff;
}

/* Em tela de toque não existe hover: a aba fica sempre visível, senão ninguém
   consegue chegar no mapa. A faixa reservada já garante que nada é coberto. */
@media (hover: none) {
	.nkr-loja__mapa { transform: translateY(0); }
	.nkr-loja:hover { transform: none; box-shadow: 0 1px 2px rgba(16, 32, 43, 0.04); }
}

@media (prefers-reduced-motion: reduce) {
	.nkr-loja,
	.nkr-loja__mapa { transition: none; }
	.nkr-loja:hover,
	.nkr-loja:focus-within { transform: none; }
}

/* =========================================================================
   8e. Página de agradecimento
   ========================================================================= */
.nkr-obrigado {
	max-width: 720px;
	margin: 0 auto 32px;
	text-align: center;
}

.nkr-obrigado__icone {
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	border-radius: 999px;
	background: rgba(40, 167, 69, 0.12);
	color: var(--nkr-success);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nkr-obrigado__icone .material-symbols-outlined { font-size: 40px; }

.nkr-obrigado h2 {
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 8px;
}

.nkr-obrigado p {
	font-size: 16px;
	line-height: 24px;
	color: var(--nkr-text-muted);
	margin: 0;
}

.nkr-passos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 900px;
	margin: 32px auto;
}

@media (min-width: 768px) { .nkr-passos { grid-template-columns: repeat(3, 1fr); } }

.nkr-passo {
	background: var(--nkr-surface-gray);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	padding: 20px;
	text-align: center;
}

.nkr-passo__num {
	width: 32px;
	height: 32px;
	margin: 0 auto 12px;
	border-radius: 999px;
	background: var(--nkr-primary);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nkr-passo h3 {
	font-size: 16px;
	line-height: 22px;
	margin: 0 0 6px;
}

.nkr-passo p {
	font-size: 13px;
	line-height: 19px;
	color: var(--nkr-text-muted);
	margin: 0;
}

.nkr-obrigado-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 32px 0;
}

/* O Storefront sublinha links dentro do conteúdo com um seletor mais
   específico que uma regra de classe simples. Compomos com .woocommerce e
   com a classe do próprio botão para vencer a disputa sem !important. */
.woocommerce .nkr-obrigado-cta a.is-whats,
.woocommerce .nkr-obrigado-cta a.is-loja,
.nkr-obrigado-cta a.is-whats,
.nkr-obrigado-cta a.is-loja,
.nkr-obrigado-cta a.is-whats:hover,
.nkr-obrigado-cta a.is-loja:hover,
.nkr-obrigado-cta a.is-whats:focus,
.nkr-obrigado-cta a.is-loja:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--nkr-radius);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 0;
	transition: transform 0.2s ease, background 0.2s ease;
}

/* A mensagem padrão "Obrigado. Seu pedido foi recebido." duplica o nosso
   cabeçalho — e o título da página repete a mesma informação. */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order-received .entry-title,
.woocommerce-order-received .page-title { display: none; }

.nkr-obrigado-cta a:active { transform: scale(0.97); }

.nkr-obrigado-cta .is-whats {
	background: #25d366;
	color: #fff;
}

.nkr-obrigado-cta .is-whats:hover { background: #1da851; color: #fff; }

.nkr-obrigado-cta .is-loja {
	background: var(--nkr-secondary);
	color: #fff;
}

.nkr-obrigado-cta .is-loja:hover { background: var(--nkr-secondary-dark); color: #fff; }

/* =========================================================================
   8f. Páginas institucionais (Sobre, Marcas, Contato, B2B e políticas)
   Ativado pelo wrapper .nkr-pagina no conteúdo — não afeta as telas do
   WooCommerce, que têm estilo próprio.
   ========================================================================= */
.nkr-pagina {
	max-width: 940px;
	margin: 0 auto;
	padding-bottom: 32px;
}

/* Documento longo (políticas): medida mais estreita, melhor para leitura. */
.nkr-pagina--doc { max-width: 760px; }

.nkr-pagina > *:first-child { margin-top: 0; }

.nkr-pagina h2 {
	font-size: 26px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 48px 0 14px;
}

/* Marca de destaque nos subtítulos: um traço laranja curto, em vez de linha
   cinza corrida. Dá caráter sem pesar. */
.nkr-pagina h3 {
	font-size: 19px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 40px 0 14px;
	padding-top: 14px;
	position: relative;
}

.nkr-pagina h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 3px;
	border-radius: 3px;
	background: var(--nkr-primary);
}

.nkr-pagina p { margin: 0 0 15px; }
.nkr-pagina > ul,
.nkr-pagina > ol { margin: 0 0 18px; padding-left: 22px; }
.nkr-pagina li { margin-bottom: 8px; }
.nkr-pagina a { color: var(--nkr-secondary); font-weight: 600; }
.nkr-pagina a:hover { color: var(--nkr-primary); }

/* --- Hero da página: faixa branca com barra lateral azul e lead grande --- */
.nkr-pg-hero {
	position: relative;
	padding: 4px 0 4px 22px;
	margin-bottom: 36px;
	border-left: 4px solid var(--nkr-secondary);
}

.nkr-pg-hero .nkr-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nkr-primary);
	margin-bottom: 8px;
}

.nkr-lead {
	font-size: 20px;
	line-height: 30px;
	color: var(--nkr-text-muted);
	margin: 0;
	max-width: 40em;
}

/* --- Grade de cartões (com profundidade e hover) --- */
.nkr-cards {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 24px 0 32px;
}

/* Bloco de quatro (as "Nossas linhas de produtos" da /sobre): mesma regra dos
   atalhos da home — 4 por linha enquanto couber, 2x2 quando não couber, nunca
   3. Com `auto-fit` sozinho, os quatro cartões caíam 3 em cima e 1 esticado
   embaixo, que é o desalinhamento que o cliente apontou.

   `:has()` aplica a troca só onde há um quarto filho: os blocos de três
   (Contato, Política de Entrega) continuam 3 por linha, como devem. */
.nkr-cards:has(> :nth-child(4)) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 920px é onde a coluna de leitura (940px de teto) ainda comporta os quatro. */
@media (min-width: 920px) {
	.nkr-cards:has(> :nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Em coluna estreita o recheio de 24px come metade do cartão. */
@media (max-width: 599px) {
	.nkr-cards {
		gap: 10px;
	}

	.nkr-cards:has(> :nth-child(4)) .nkr-card {
		padding: 16px 14px;
	}

	.nkr-cards:has(> :nth-child(4)) .nkr-card__icone {
		width: 40px;
		height: 40px;
		margin-bottom: 12px;
	}

	.nkr-cards:has(> :nth-child(4)) .nkr-card__icone .material-symbols-outlined { font-size: 22px; }
	.nkr-cards:has(> :nth-child(4)) .nkr-card h3 { font-size: 15px; line-height: 20px; }
	.nkr-cards:has(> :nth-child(4)) .nkr-card p { font-size: 13px; line-height: 19px; }
}

.nkr-card {
	position: relative;
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	padding: 24px 22px;
	box-shadow: 0 1px 2px rgba(16, 32, 43, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
}

/* Fio laranja no topo, revelado no hover */
.nkr-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--nkr-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.nkr-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -12px rgba(16, 32, 43, 0.18);
	border-color: var(--nkr-outline-variant, #e0c0b0);
}

.nkr-card:hover::after { transform: scaleX(1); }

.nkr-card__icone {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--nkr-surface-container);
	color: var(--nkr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.nkr-card__icone .material-symbols-outlined { font-size: 26px; }

.nkr-card h3 {
	font-size: 17px;
	line-height: 23px;
	margin: 0 0 8px;
	padding: 0;
}

.nkr-card h3::before { display: none; }

.nkr-card p { font-size: 14px; line-height: 21px; color: var(--nkr-text-muted); margin: 0; }
.nkr-card strong { color: var(--nkr-text-main); }

/* --- Faixa de números: painel azul da marca, número em laranja --- */
.nkr-numeros {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	background: var(--nkr-secondary);
	background-image: linear-gradient(135deg, var(--nkr-secondary) 0%, var(--nkr-secondary-dark) 100%);
	border-radius: var(--nkr-radius-lg);
	padding: 30px 24px;
	margin: 28px 0 36px;
}

.nkr-numero { text-align: center; padding: 6px 8px; }

/* Três números em duas colunas deixam o terceiro sozinho na linha de baixo,
   ocupando metade da largura e desalinhado do bloco — foi o "Campinas" torto.
   Sobrando ímpar, o último toma a linha inteira e volta ao centro. */
@media (max-width: 599px) {
	.nkr-numeros {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nkr-numeros > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.nkr-numero b {
	display: block;
	font-size: 34px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--nkr-primary-fixed-dim, #ffb68e);
}

.nkr-numero span {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.82);
	display: block;
	margin-top: 6px;
}

/* --- Bloco de destaque --- */
.nkr-destaque {
	background: var(--nkr-surface-container-low);
	border: 1px solid var(--nkr-outline-variant, #e0c0b0);
	border-left: 4px solid var(--nkr-primary);
	border-radius: var(--nkr-radius-lg);
	padding: 22px 24px;
	margin: 28px 0;
}

.nkr-destaque h3 { margin-top: 0; padding-top: 0; }
.nkr-destaque h3::before { display: none; }
.nkr-destaque :last-child { margin-bottom: 0; }

/* --- Passos numerados (herda .nkr-passo da pág. de agradecimento) --- */
.nkr-pagina .nkr-passos { margin: 24px 0 32px; }

/* --- Lista de marcas --- */
.nkr-marcas {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	list-style: none;
	margin: 24px 0 32px;
	padding: 0;
}

/* Duas camadas. O <li> é a parede: fica parado e só aparece quando a placa
   levanta, como a marca que sobra ao descolar um adesivo. O <span> é a placa,
   que gira. Precisam ser elementos separados — se o contorno fosse pseudo do
   próprio <li>, giraria junto com a placa e o efeito se perderia. */
.nkr-marcas li {
	position: relative;
	min-height: 66px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Laranja claro da marca. Tom baixo de propósito: cor saturada por baixo
	   competiria com o logotipo em vez de parecer resíduo de adesivo. */
	background: var(--nkr-surface-container);
	border: 1px solid #f3c9b2;
	border-radius: var(--nkr-radius-lg);
}

/* Placa levantada passa por cima da vizinha. */
.nkr-marcas li:hover,
.nkr-marcas li:focus-within { z-index: 2; }

.nkr-marcas__placa {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	box-shadow: 0 1px 2px rgba(16, 32, 43, 0.04);
	/* O pino: meio da lateral esquerda. É em torno dele que a placa gira. */
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease;
}

/* Altura fixa alinha logotipos de proporções diferentes na mesma linha óptica;
   a largura acompanha para não distorcer nenhuma marca. */
.nkr-marcas__placa img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 42px;
	object-fit: contain;
}

/* A placa levanta pivotando: direita sobe, esquerda fica presa no pino.
   A sombra é deslocada 16px para a direita com espalhamento -16px: assim ela
   só existe do lado que descolou. Sombra simétrica faria a placa inteira
   flutuar, e a esquerda tem que continuar parecendo grudada na parede. */
.nkr-marcas li:hover .nkr-marcas__placa,
.nkr-marcas li:focus-within .nkr-marcas__placa {
	transform: translateY(-6px) rotate(-7deg);
	box-shadow: 16px 10px 22px -16px rgba(16, 32, 43, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.nkr-marcas__placa { transition: none; }
	.nkr-marcas li:hover .nkr-marcas__placa,
	.nkr-marcas li:focus-within .nkr-marcas__placa { transform: none; }
}

/* --- Faixa de CTA (painel de largura total, como no home) --- */
.nkr-cta-faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--nkr-surface-gray);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	padding: 28px 30px;
	margin: 36px 0;
}

.nkr-cta-faixa__texto { flex: 1; min-width: 240px; }
.nkr-cta-faixa__texto strong {
	display: block;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.01em;
	color: var(--nkr-on-surface);
	margin-bottom: 4px;
}
.nkr-cta-faixa__texto span { color: var(--nkr-text-muted); font-size: 14px; }

/* Variante WhatsApp (verde suave) */
.nkr-cta-faixa--whats {
	background: #e8f5e9;
	border-color: #a5d6a7;
}
.nkr-cta-faixa--whats .nkr-cta-faixa__texto strong { color: #1b5e20; }
.nkr-cta-faixa--whats .nkr-cta-faixa__texto span { color: #2e7d32; }

/* --- Botões dentro do conteúdo --- */
.nkr-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }

/* O Storefront sublinha links do conteúdo com seletor mais específico que
   duas classes — por isso o elemento e o modificador entram no seletor. */
.nkr-pagina a.nkr-btn,
.nkr-pagina a.nkr-btn:hover,
.nkr-pagina a.nkr-btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: var(--nkr-radius);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 0;
	color: #fff;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.nkr-pagina a.nkr-btn:active { transform: scale(0.97); }
.nkr-pagina a.nkr-btn--whats { background: #25d366; }
.nkr-pagina a.nkr-btn--whats:hover { background: #1da851; box-shadow: 0 8px 18px -8px rgba(37, 211, 102, 0.6); }
.nkr-pagina a.nkr-btn--primaria { background: var(--nkr-primary); }
.nkr-pagina a.nkr-btn--primaria:hover { background: var(--nkr-primary-hover); box-shadow: 0 8px 18px -8px rgba(253, 119, 19, 0.5); }
.nkr-pagina a.nkr-btn--secundaria { background: var(--nkr-secondary); }
.nkr-pagina a.nkr-btn--secundaria:hover { background: var(--nkr-secondary-dark); }

/* --- Marcador de conteúdo a chegar (voltado ao cliente final, sem
   linguagem de processo interno) --- */
.nkr-embreve {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--nkr-surface-gray);
	border: 1px dashed var(--nkr-outline-variant, #e0c0b0);
	border-radius: var(--nkr-radius-lg);
	color: var(--nkr-text-muted);
	font-size: 14px;
	padding: 16px 18px;
	margin: 8px 0 20px;
}

.nkr-embreve::before {
	content: "schedule";
	font-family: "Material Symbols Outlined";
	font-size: 20px;
	color: var(--nkr-primary);
	flex-shrink: 0;
}

/* --- Documento: chip de última atualização --- */
.nkr-doc-nota {
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--nkr-border-subtle);
	font-size: 13px;
	color: var(--nkr-text-muted);
}

/* Título da página com respiro */
.page .entry-title,
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout) .entry-title {
	font-size: clamp(30px, 4vw, 38px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 24px;
}

/* =========================================================================
   8f2. Banner atrás do título da página (hoje: /sobre)

   O título saía solto no branco, sem nada que dissesse "aqui começa a página".
   Agora o próprio `.entry-header` vira a faixa: arte de fundo, degradê escuro
   por cima para o texto ficar legível em qualquer imagem, e o título em branco.

   A faixa sangra para fora da coluna de conteúdo com margem negativa — banner
   preso ao miolo de 940px parece um cartão, não um topo de página. As margens
   acompanham o `padding` de `.site-content` (12px no celular, 24px daí para
   cima), que é o que existe de cada lado.

   A arte chega em `--nkr-pagina-banner` / `--nkr-pagina-banner-mob`, impressas
   pelo PHP (ver nkr_pagina_banner_css()). Sem imagem, sobra o azul da marca. */
body.nkr-tem-banner {
	/* Proporção da ARTE (hoje 1916x860 ≈ 2,23:1, ou seja 44.9vw de altura para
	   100vw de largura), medida na largura da JANELA e não na coluna de
	   conteúdo — o banner sangra de ponta a ponta. Casar a faixa com a arte é o
	   que evita corte: em 16:9 o `cover` comia as laterais, e é do lado
	   esquerdo que fica a frase. Trocou a arte por outra proporção? Acerte este
	   número (altura ÷ largura × 100). O teto em `vh` existe para telas largas
	   e baixas, onde a faixa cheia jogaria o conteúdo para fora da primeira
	   dobra; ali o `cover` corta por baixo, que é só chão de loja. */
	--nkr-banner-arte: 44.9vw;
	--nkr-banner-altura: min(var(--nkr-banner-arte), 68vh);
	/* Quanto do banner fica descoberto acima do cartão. O resto ele cobre.
	   A conta parte da altura da ARTE, não da faixa: quando o teto de `vh`
	   entra, a arte continua escalada pela largura e medir pela faixa deixaria
	   o cartão cortando a frase. A frase desta arte termina a 58% da altura
	   dela; 0,68 cobre com folga. O `min` segura o valor dentro da faixa. */
	--nkr-banner-visivel: min(calc(var(--nkr-banner-arte) * 0.68), var(--nkr-banner-altura));
}

/* O banner é pseudo-elemento do `.site-content`, e não uma faixa no fluxo:
   assim ele fica ATRÁS do cartão branco, que sobe por cima dele, em vez de
   empurrá-lo para baixo. `left: 50%` + `width: 100vw` tira ele da coluna de
   conteúdo e o leva às bordas da tela. */
body.nkr-tem-banner .site-content {
	position: relative;
	padding-top: 0;
	/* Sem isto a margem de `.site-main` colapsa para fora do `.site-content` no
	   celular: em vez de descer o cartão dentro do bloco, ela desce o bloco
	   inteiro — e o banner, que começa no topo dele, fica atrás do cartão, sem
	   aparecer nada. `flow-root` cria o contexto que segura a margem dentro. */
	display: flow-root;
}

body.nkr-tem-banner .site-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: var(--nkr-banner-altura);
	z-index: 0;
	background-color: var(--nkr-secondary);
	background-image: var(--nkr-pagina-banner);
	background-size: cover;
	background-position: center top;
	pointer-events: none;

	/* O degradê é MÁSCARA, não uma cor por cima. Cor chapada só funciona se
	   combinar com o fundo do site e com a arte ao mesmo tempo; a máscara
	   dissolve a própria imagem, então a transição sai limpa seja qual for a
	   arte que o marketing colocar ali. */
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
}

/* No celular a arte de desktop corta o assunto no meio; quando houver arte
   própria, é ela que entra. */
@media (max-width: 767px) {
	body.nkr-tem-banner .site-content::before {
		background-image: var(--nkr-pagina-banner-mob, var(--nkr-pagina-banner));
	}
}

/* O conteúdo sobe por cima do banner. O `z-index` tira o cartão de baixo do
   pseudo-elemento; a margem é o quanto do banner fica à mostra. */
body.nkr-tem-banner .site-content > * {
	position: relative;
	z-index: 1;
}

body.nkr-tem-banner .site-main {
	margin-top: var(--nkr-banner-visivel);
}

/* Com o banner atrás, o título volta a ser o título da página: dentro do
   cartão, na cor do texto, sem véu nem faixa própria. */
body.nkr-tem-banner .entry-title {
	color: var(--nkr-on-surface);
}

/* Fio laranja curto sob o título — a mesma assinatura dos subtítulos. */
body.nkr-tem-banner .entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 4px;
	margin-top: 14px;
	background: var(--nkr-primary);
}

/* =========================================================================
   8g. Correções de página de produto e menu do topo
   ========================================================================= */

/* O Storefront colore o menu com `ul.menu li a` (especificidade 0,1,3), que
   vence `.nkr-header__nav a` (0,1,1) — o menu do topo saía cinza. Subimos a
   especificidade prefixando com .nkr-header (0,2,1) para o branco vencer. */
.nkr-header .nkr-header__nav a {
	color: #fff;
}
.nkr-header .nkr-header__nav a:hover {
	color: var(--nkr-primary-fixed);
}

/* Item da página aberta. O Storefront pinta o item atual com um tom escuro que
   praticamente some no azul do topo. Aqui ele fica branco e recebe o mesmo
   traço embaixo que o hover desenha — só que fixo. Precisa estar neste bloco
   (e não lá na seção 3) para vencer o `.nkr-header .nkr-header__nav a`, que
   tem a mesma especificidade e vem depois no arquivo. */
.nkr-header .nkr-header__nav .current-menu-item > a,
.nkr-header .nkr-header__nav .current_page_item > a,
.nkr-header .nkr-header__nav .current-menu-ancestor > a,
.nkr-header .nkr-header__nav .current-menu-parent > a {
	color: #fff;
	font-weight: 700;
}

.nkr-header .nkr-header__nav .current-menu-item > a::after,
.nkr-header .nkr-header__nav .current_page_item > a::after,
.nkr-header .nkr-header__nav .current-menu-ancestor > a::after,
.nkr-header .nkr-header__nav .current-menu-parent > a::after {
	width: 100%;
}

/* Paginação "produto anterior / próximo" do Storefront: um card flutuante que
   sobrepunha a barra lateral. O cliente não pediu essa navegação. */
.storefront-product-pagination,
.single-product .product-pagination {
	display: none !important;
}

/* --- Botão único do card: "Comprar" / "Ver produto" (alinhados) --- */
.woocommerce ul.products li.product a.nkr-card-cta,
.woocommerce ul.products li.product a.nkr-card-cta:hover {
	display: block;
	width: 100%;
	margin-top: auto;      /* cola na base — alinha entre cards de alturas diferentes */
	text-align: center;
	padding: 10px 12px;
	border-radius: var(--nkr-radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Especificidade casada com a regra .button do Storefront para vencer o fundo
   padrão. Com preço: cheio laranja (ação principal). */
.woocommerce ul.products li.product a.nkr-card-cta--comprar,
.woocommerce ul.products li.product a.nkr-card-cta--comprar:hover {
	background: var(--nkr-primary);
	color: #fff;
	border: 1px solid var(--nkr-primary);
}
.woocommerce ul.products li.product a.nkr-card-cta--comprar:hover {
	background: var(--nkr-primary-hover);
	border-color: var(--nkr-primary-hover);
}

/* Sem preço: contornado (ação secundária, catálogo). */
.woocommerce ul.products li.product a.nkr-card-cta--ver,
.woocommerce ul.products li.product a.nkr-card-cta--ver:hover {
	background: transparent;
	color: var(--nkr-primary);
	border: 1px solid var(--nkr-primary);
}
.woocommerce ul.products li.product a.nkr-card-cta--ver:hover {
	background: var(--nkr-surface-container);
	color: var(--nkr-primary-hover);
}

/* --- Preço "A partir de" (produtos com variação de volume) --- */
.woocommerce ul.products li.product .price .nkr-price-from {
	display: block;
	line-height: 1.2;
}
.nkr-price-from__label {
	display: block;
	color: var(--nkr-text-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	margin-bottom: 2px;
}
.nkr-price-from__unit {
	color: var(--nkr-text-muted);
	font-size: 12px;
	font-weight: 400;
	margin-left: 4px;
}

/* --- Compra direta do card: só o botão "Adicionar" ---
   Havia aqui um seletor de quantidade que subia sobre o botão depois de
   adicionar. Saiu: em card estreito ele pousava por cima do "Pronta Entrega",
   e ajustar quantidade na vitrine competia com a gaveta do Mini-Cart, que faz
   o mesmo com mais contexto. Um clique = uma unidade. */
.nkr-card-buy {
	margin-top: auto;   /* mesma âncora do botão sozinho: alinha entre cards */
	position: relative;
	width: 100%;
}

.woocommerce ul.products li.product .nkr-card-buy a.nkr-card-cta {
	margin-top: 0;
	width: 100%;
}

/* Estado "adicionando" e "adicionado" do próprio WooCommerce. */
.woocommerce ul.products li.product a.nkr-card-cta.loading {
	opacity: 0.7;
	pointer-events: none;
}
/* O wc-add-to-cart.js injeta "Ver carrinho" logo após o botão. Ele entra em
   fluxo e cresce o card ~80px; como a grade iguala as alturas da linha, os
   produtos vizinhos pulam junto. É injetado por JS, então filtro PHP não
   alcança — some por CSS. A gaveta do Mini-Cart abre no mesmo clique e leva
   ao carrinho, então o link não informa nada novo. */
.woocommerce ul.products li.product a.added_to_cart {
	display: none;
}

/* --- Chips de atributo como pílula (estilo da referência Suvinil) --- */
.nkr-card__attrs { gap: 6px; }
.nkr-card__attr {
	background: transparent;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: 999px;
	color: var(--nkr-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 3px 10px;
}

/* --- Selo "Novidade" na imagem (canto superior direito) --- */
.nkr-badge-novo {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	background: var(--nkr-secondary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 3px 9px;
	border-radius: 999px;
}

/* Celular: dois produtos por linha, card na casa dos 160px. As etiquetas
   encolhem junto, senão ocupam a foto inteira. */
@media (max-width: 599px) {
	.nkr-badge-novo {
		font-size: 9px;
		letter-spacing: 0;
		padding: 2px 7px;
	}

	.nkr-badge-sale {
		font-size: 9px;
		padding: 2px 5px;
	}
}

/* =========================================================================
   8g2. Página de produto (PDP) — foto em caixa de tamanho fixo

   O catálogo veio da migração com fotos de resolução e proporção livres: há
   460x460, 800x700, 1920x1680 e até 166x163. Na vitrine isso já era resolvido
   (ver "Imagem quadrada com fundo cinza"), mas na página do produto a foto
   entrava no tamanho natural — daí o "Efeito Brilho" aparecer grande e o
   "Sempre Branco Fosco" aparecer minúsculo.

   A caixa agora é sempre um quadrado cinza e a foto se encaixa dentro dela.
   `width: auto` com `max-*: 100%` em vez de `width: 100%`: as fotos pequenas
   ficam centralizadas no tamanho real em vez de esticadas e borradas. Elas
   continuam pedindo arquivo novo, mas o layout para de dançar por causa delas.
   ========================================================================= */
.single-product div.product .woocommerce-product-gallery__image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--nkr-surface-gray);
	border-radius: var(--nkr-radius);
}

/* O link do zoom é quem envolve a foto; sem esticá-lo, a foto encosta no topo. */
.single-product div.product .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* `!important` porque o flexslider da galeria escreve width/height em `style=`
   no próprio elemento assim que inicializa.

   O `:not(.zoomImg)` não é detalhe: o jquery.zoom insere um segundo `<img>`,
   irmão deste, com a foto em tamanho natural. Ele é o elemento da ampliação. */
.single-product div.product .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* Mesmo tratamento da vitrine: recorta o branco chapado do fundo das
	   fotos de catálogo contra o cinza da caixa. */
	mix-blend-mode: multiply;
}

/* Ampliação do hover (jquery.zoom).

   A `.zoomImg` é `position: absolute` em tamanho natural, e o próprio plugin
   escreve width/height/max-* em `style=`. Ela ficava herdando as regras acima e
   dava duas latas sobrepostas: com `mix-blend-mode: multiply` a foto de baixo
   aparecia através das áreas BRANCAS da ampliação (multiply por branco devolve
   o que está atrás). Aqui a mistura volta ao normal e o dimensionamento é
   devolvido ao plugin. */
.single-product div.product .woocommerce-product-gallery__image img.zoomImg {
	max-width: none;
	max-height: none;
	object-fit: none;
	mix-blend-mode: normal;
	/* A ampliação é sempre maior que a caixa, então cobre tudo sozinha. O branco
	   é garantia para o dia em que entrar foto menor que a caixa. */
	background: #fff;
}

/* =========================================================================
   8h. Página de produto (PDP) — caixa de compra agrupada
   ========================================================================= */

/* O título e a descrição curta ficam acima; o resto (preço, estoque, compra,
   frete, meta) entra numa caixa delimitada — o "buy box" do marketplace. */
.single-product div.product .entry-summary .product_title {
	margin-bottom: 6px;
}

.single-product div.product .entry-summary .woocommerce-product-details__short-description {
	color: var(--nkr-text-muted);
	font-size: 15px;
	line-height: 22px;
	margin: 0 0 20px;
}

.nkr-buybox {
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-lg);
	padding: 22px 24px;
	background: var(--nkr-background);
	box-shadow: 0 1px 2px rgba(16, 32, 43, 0.04);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Preço em destaque, como no marketplace. */
.nkr-buybox .price {
	margin: 0;
	color: var(--nkr-primary);
	font-size: 30px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.nkr-buybox .price del {
	display: block;
	color: var(--nkr-text-muted);
	font-size: 15px;
	font-weight: 400;
	opacity: 1;
	margin-bottom: 2px;
}
.nkr-buybox .price ins { background: none; text-decoration: none; color: var(--nkr-primary); }

/* Estoque */
.nkr-buybox .stock {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
}
.nkr-buybox .stock.in-stock { color: var(--nkr-success); }

/* Bloco de compra: quantidade + botão em largura total */
.nkr-buybox form.cart {
	margin: 0;
	display: flex;
	gap: 10px;
	align-items: stretch;
}

/* O Storefront/WooCommerce aplica um clearfix no form.cart. Num contêiner
   flex, esses pseudo-elementos viram itens de verdade e consomem dois `gap`,
   recuando a linha de compra em 10px de cada lado — ela ficava desalinhada do
   preço, do frete e do meta. O `padding` e a `margin-bottom` do tema pai também
   somavam em cima do `gap: 18px` da caixa. Zerar os três deixa todas as linhas
   do buy box no mesmo eixo, com um respiro só. */
.woocommerce div.product .nkr-buybox form.cart::before,
.woocommerce div.product .nkr-buybox form.cart::after {
	content: none;
	display: none;
}
.single-product div.product .nkr-buybox form.cart { padding: 0; margin: 0; }

.nkr-buybox form.cart .quantity { flex-shrink: 0; }
.woocommerce div.product .nkr-buybox form.cart .quantity { margin: 0; }
.nkr-buybox form.cart .quantity input.qty {
	height: 100%;
	min-height: 48px;
	width: 68px;
	text-align: center;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius);
}
.single-product .nkr-buybox form.cart button.single_add_to_cart_button {
	flex: 1;
	min-height: 48px;
	background: var(--nkr-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-radius: var(--nkr-radius);
	border: 0;
}
.single-product .nkr-buybox form.cart button.single_add_to_cart_button:hover {
	background: var(--nkr-primary-hover);
}

/* --- Cálculo de frete dentro da caixa de compra -------------------------
   A calculadora nativa do Melhor Envio é injetada DENTRO do <form class="cart">,
   onde vira um item flex ao lado da quantidade e do botão — daí a linha
   desalinhada e o segundo campo de CEP na tela. O simulador abaixo mostra
   todas as opções de uma vez (PAC, SEDEX, taxa fixa, retirada), então a
   duplicata sai. Para trazê-la de volta, apague esta regra. */
.nkr-buybox #woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
	display: none !important;
}

/* Bloco de frete: mesma divisória e mesmo respiro do resto do buy box. */
.nkr-buybox #wc-shipping-sim {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--nkr-border-subtle);
}

.nkr-buybox #wc-shipping-sim-form { margin: 0; }

.nkr-buybox #wc-shipping-sim-form-title {
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 18px;
	color: var(--nkr-text-main);
}

/* Campo e botão dividem uma linha só, na mesma altura do "Adicionar ao carrinho". */
.nkr-buybox #wc-shipping-sim-form-fields {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.nkr-buybox #wc-shipping-sim-form-fields .input-postcode {
	flex: 1 1 auto;
	min-width: 0;
	/* O plugin trava o campo em 180px; aqui ele ocupa a linha toda. */
	max-width: none;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	font-size: 15px;
	color: var(--nkr-text-main);
	background: var(--nkr-background);
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius);
}
.nkr-buybox #wc-shipping-sim-form-fields .input-postcode:focus {
	border-color: var(--nkr-secondary);
	outline: 2px solid var(--nkr-secondary);
	outline-offset: -2px;
}

/* Botão de contorno azul: ação secundária, não briga com o laranja da compra. */
.nkr-buybox #wc-shipping-sim-form-fields button.submit {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--nkr-secondary);
	background: transparent;
	border: 1px solid var(--nkr-secondary);
	border-radius: var(--nkr-radius);
}
.nkr-buybox #wc-shipping-sim-form-fields button.submit:hover,
.nkr-buybox #wc-shipping-sim-form-fields button.submit:focus {
	color: #fff;
	background: var(--nkr-secondary);
	border-color: var(--nkr-secondary);
}

.nkr-buybox #wc-shipping-sim-br-cep-finder { margin-top: 8px; }
.nkr-buybox #wc-shipping-sim-br-cep-finder a {
	font-size: 12px;
	color: var(--nkr-text-muted);
	text-decoration: underline;
}

/* Resultados: tabela vira lista clara, preço alinhado à direita. */
.nkr-buybox #wc-shipping-sim-results { margin-top: 14px; }
.nkr-buybox #wc-shipping-sim-results:empty { margin-top: 0; }
.nkr-buybox #wc-shipping-sim-results[aria-busy="true"] { opacity: 0.5; }

.nkr-buybox #wc-shipping-sim-results-title {
	margin-bottom: 8px;
	font-size: 12px;
	line-height: 17px;
	color: var(--nkr-text-muted);
}
.nkr-buybox #wc-shipping-sim-results-title strong {
	font-weight: 600;
	color: var(--nkr-text-main);
}

.nkr-buybox #wc-shipping-sim-results table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: var(--nkr-surface-gray);
	border-radius: var(--nkr-radius-lg);
	overflow: hidden;
}
.nkr-buybox #wc-shipping-sim-results table th,
.nkr-buybox #wc-shipping-sim-results table td {
	padding: 10px 14px;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
}
.nkr-buybox #wc-shipping-sim-results table tr + tr th,
.nkr-buybox #wc-shipping-sim-results table tr + tr td {
	border-top: 1px solid var(--nkr-border-subtle);
}
.nkr-buybox #wc-shipping-sim-results .col-label {
	text-align: left;
	font-weight: 600;
	color: var(--nkr-text-main);
}
/* Prazo de entrega, quando a transportadora manda. */
.nkr-buybox #wc-shipping-sim-results .col-label span:not(.shipping-rate-label) {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--nkr-text-muted);
}
.nkr-buybox #wc-shipping-sim-results .col-cost {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--nkr-primary);
}
.nkr-buybox #wc-shipping-sim-results-after {
	margin-top: 8px;
	font-size: 12px;
	line-height: 17px;
	color: var(--nkr-text-muted);
}

/* Celular estreito: campo e botão empilham em vez de espremer. */
@media (max-width: 420px) {
	.nkr-buybox #wc-shipping-sim-form-fields { flex-wrap: wrap; }
	.nkr-buybox #wc-shipping-sim-form-fields .input-postcode,
	.nkr-buybox #wc-shipping-sim-form-fields button.submit { flex: 1 1 100%; }
}

/* Meta (SKU / categoria): discreto, ao pé da caixa */
.nkr-buybox .product_meta {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--nkr-border-subtle);
	font-size: 13px;
	color: var(--nkr-text-muted);
}
.nkr-buybox .product_meta a { color: var(--nkr-secondary); }

/* =========================================================================
   9. Rodapé (laranja)
   ========================================================================= */
.nkr-footer {
	background: var(--nkr-primary);
	color: #fff;
	margin-top: auto;
}

.nkr-footer__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nkr-gutter);
	padding: 48px var(--nkr-margin-page);
	max-width: 1440px;
	margin: 0 auto;
}

@media (min-width: 768px) { .nkr-footer__inner { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .nkr-footer__inner { grid-template-columns: repeat(6, 1fr); } }

/* Celular: uma coluna, tudo centralizado.

   Eram duas colunas, e "Institucional" ficava ao lado de "Ajuda e Suporte" —
   dois blocos de links de 150px, títulos de 18px quebrando em duas linhas e as
   listas desalinhadas entre si. Em coluna única cada seção ocupa a largura
   inteira, "Ajuda e Suporte" cai naturalmente abaixo de "Institucional" (é a
   ordem do HTML) e o conjunto fica centrado, como o `__bottom` já era. */
@media (max-width: 767px) {
	.nkr-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
		padding-top: 36px;
		padding-bottom: 36px;
	}

	/* `.nkr-footer__brand { grid-column: span 2 }` está declarado mais abaixo
	   nesta folha; com o mesmo peso, ele venceria e o "span 2" criaria uma
	   segunda coluna implícita — a grade voltaria a ter duas, e "Ajuda e
	   Suporte" continuaria ao lado de "Institucional". Daí o ancestral no
	   seletor: sobe a especificidade e desfaz o span. */
	.nkr-footer .nkr-footer__brand {
		grid-column: auto;
		align-items: center;
	}

	.nkr-footer__inner > div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* O `wp_nav_menu` da coluna Institucional embrulha os links num <ul>
	   próprio, que sem isto ficaria alinhado à esquerda dentro do bloco
	   centralizado. */
	.nkr-footer__inner ul {
		align-items: center;
		width: 100%;
	}

	.nkr-footer__inner p { max-width: 34ch; }
}

.nkr-footer__brand {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 768px) { .nkr-footer__brand { grid-column: span 4; } }
@media (min-width: 1024px) { .nkr-footer__brand { grid-column: span 2; } }

.nkr-footer__brand-name {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
}

.nkr-footer p,
.nkr-footer li {
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.8);
}

.nkr-footer h4 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
}

.nkr-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nkr-footer a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.nkr-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

/* A coluna "Institucional" sai de `wp_nav_menu`, então vem com `ul.menu li a`
   — o mesmo seletor do Storefront (0,1,3) que já tinha atropelado o menu do
   topo. Contra `.nkr-footer a` (0,1,1) ele vencia, e os links saíam escuros
   ao lado dos claros da coluna vizinha. Aqui a especificidade sobe para
   (0,3,3) e as duas colunas ficam iguais. */
.nkr-footer .nkr-footer__inner ul li a,
.nkr-footer .nkr-footer__inner ul.menu li a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
}

.nkr-footer .nkr-footer__inner ul li a:hover,
.nkr-footer .nkr-footer__inner ul.menu li a:hover {
	color: #fff;
	text-decoration: underline;
}

.nkr-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 24px var(--nkr-margin-page);
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: center;
}

/* Antes era `space-between`: o © colava na borda esquerda e o CNPJ na direita,
   com um vão enorme no meio. Agora as três linhas ficam juntas no centro, o
   que também põe o crédito da agência ao lado do © da loja. */
@media (min-width: 768px) {
	.nkr-footer__bottom {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 24px;
		text-align: center;
	}
}

.nkr-footer__bottom p {
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

.nkr-footer__credito a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-weight: 600;
}

.nkr-footer__credito a:hover,
.nkr-footer__credito a:focus {
	color: #fff;
	text-decoration: underline;
}

/* Neutraliza o rodapé padrão do Storefront */
.site-footer { display: none; }

/* =========================================================================
   10. Animação de entrada
   ========================================================================= */
.nkr-reveal {
	opacity: 0;
	transform: translateY(20px);
}

.nkr-reveal.nkr-reveal--visible {
	animation: nkr-fade-in-up 0.6s ease-out forwards;
}

@keyframes nkr-fade-in-up {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.nkr-reveal,
	.nkr-reveal.nkr-reveal--visible {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.nkr-whatsapp { animation: none; }
	* { transition-duration: 0.01ms !important; }
}

/* =========================================================================
   11. Ajustes finos no Storefront
   ========================================================================= */
.storefront-breadcrumb,
.site-header,
.storefront-handheld-footer-bar { display: none; }

.woocommerce-products-header__title,
.page-title {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
}
/* =========================================================================
   12. Carrinho vazio — sugestões separadas no padrão da home
   As "Novidades na loja" ficam numa faixa da cor de fundo da home
   (--nkr-home-bg) com os itens dentro de um cartão branco, igual às seções
   da home. A faixa e o cartão vêm de dois Group blocks no conteúdo da página
   (editáveis no Gutenberg); aqui só reforçamos o acabamento e, principalmente,
   alinhamos os produtos para que imagem, título, preço e botão fiquem na mesma
   linha em todos os cards — o que a grade crua não garante.
   ========================================================================= */

/* A página do carrinho inteira recebe o fundo cinza-azulado da home; só as
   "Novidades" ficam num cartão branco (o Group block .nkr-sugestoes__card).
   Assim título e mensagem de carrinho vazio deixam de flutuar num branco solto. */
body.woocommerce-cart,
body.page-id-12 {
	background: var(--nkr-home-bg, #eef1f6);
}

/* Ícone: troca a carinha triste (mask default do cart.css) por um carrinho de
   linha da mesma família de ícones do site (Material Symbols), em laranja.
   Empty state deve convidar, não lamentar. Reseta mask/background do default. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: 'shopping_cart';
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	font-size: 72px;
	line-height: 1;
	width: auto;
	height: auto;
	margin: 0 auto 16px;
	-webkit-mask: none;
	mask: none;
	background: none;
	color: var(--nkr-primary);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin: 0 0 8px;
	color: var(--nkr-on-surface);
	font-size: 24px;
	font-weight: 600;
}

/* Subtítulo de apoio abaixo do título. */
.wp-block-woocommerce-empty-cart-block .nkr-cart-sub {
	margin: 0 auto 20px;
	max-width: 420px;
	color: var(--nkr-text-muted);
	font-size: 15px;
	line-height: 22px;
}

/* CTA primário "Explorar a loja": laranja cheio, o caminho óbvio de saída do
   estado vazio. */
.wp-block-woocommerce-empty-cart-block .nkr-cart-cta .wp-block-button__link {
	display: inline-block;
	padding: 14px 32px;
	background: var(--nkr-primary);
	color: #fff;
	border: 1px solid var(--nkr-primary);
	border-radius: var(--nkr-radius);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.wp-block-woocommerce-empty-cart-block .nkr-cart-cta .wp-block-button__link:hover {
	background: var(--nkr-primary-hover);
	border-color: var(--nkr-primary-hover);
	color: #fff;
}

/* Separador pontilhado (caso ainda exista em algum conteúdo antigo). */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	display: none;
}

/* Cartão branco das sugestões: a sombra leve das seções da home (o radius e o
   fundo já vêm inline do Group block). */
.nkr-sugestoes__card {
	box-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);
}

/* "Novidade na loja" no mesmo tom dos títulos de seção do site. */
.nkr-sugestoes__card > .wp-block-heading {
	margin: 0 0 20px;
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--nkr-on-surface);
}

/* Os itens já são coluna flex (wc-blocks); os cards da mesma linha esticam para
   a altura do mais alto (align-items:stretch), então basta o que vem abaixo
   para deixar imagem, título, preço e botão na mesma linha em todos. */

/* Imagem com altura fixa. Cans e baldes têm proporções diferentes e
   desalinhavam a linha inteira. Especificidade extra (.wc-block-grid__products)
   para vencer a regra height:auto/width:100% do wc-blocks, de mesma força. */
.nkr-sugestoes__card .wc-block-grid__products .wc-block-grid__product-image {
	margin: 0 0 10px;
}
.nkr-sugestoes__card .wc-block-grid__products .wc-block-grid__product-image img {
	width: 100%;
	height: 150px;
	object-fit: contain;
	object-position: center;
}

.nkr-sugestoes__card .wc-block-grid__product-link {
	text-decoration: none;
}

/* Título com altura reservada de duas linhas: nomes de 1 e de 2 linhas passam a
   empurrar preço e botão para a mesma altura. */
.nkr-sugestoes__card .wc-block-grid__product-title {
	min-height: 36px;
	color: var(--nkr-on-surface);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
}

.nkr-sugestoes__card .wc-block-grid__product-price {
	margin: 4px 0 10px;
	color: var(--nkr-primary);
	font-size: 18px;
	font-weight: 800;
}

/* Botão "Adicionar ao carrinho": laranja cheio, colado na base do card. */
.nkr-sugestoes__card .wc-block-grid__product-add-to-cart {
	margin-top: auto;
}
.nkr-sugestoes__card .wc-block-grid__product-add-to-cart a.wp-block-button__link {
	display: block;
	width: 100%;
	padding: 10px 12px;
	background: var(--nkr-primary);
	color: #fff;
	border: 1px solid var(--nkr-primary);
	border-radius: var(--nkr-radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nkr-sugestoes__card .wc-block-grid__product-add-to-cart a.wp-block-button__link:hover,
.nkr-sugestoes__card .wc-block-grid__product-add-to-cart a.wp-block-button__link.added {
	background: var(--nkr-primary-hover);
	border-color: var(--nkr-primary-hover);
	color: #fff;
}

/* =========================================================================
   13. Loja e categorias no padrão da home — canvas colorido, itens em tiles
   brancos. É o padrão "card / surface on canvas": um fundo neutro e cada
   conteúdo numa superfície branca elevada. Mercado Livre e Amazon usam o mesmo.
   ========================================================================= */

/* Canvas cinza-azulado da home nas listagens de produto (loja e categorias). */
body.post-type-archive-product,
body.tax-product_cat {
	background: var(--nkr-home-bg, #eef1f6);
}

/* Barra de controles (ordenação + filtros) vira um painel branco — agrupa os
   controles e os separa do canvas, como a barra de filtros dos marketplaces. */
body.post-type-archive-product .storefront-sorting,
body.tax-product_cat .storefront-sorting {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);
	padding: 16px;
	margin-bottom: 16px;
}
/* Dentro do painel, os filtros dispensam a margem inferior antiga. */
body.post-type-archive-product .storefront-sorting .nkr-filtros,
body.tax-product_cat .storefront-sorting .nkr-filtros {
	margin-bottom: 0;
}

/* O Storefront dá ao cabeçalho da listagem um `padding-bottom` de 5.99em —
   ~84px, mais que o dobro da altura do próprio título. Numa página em que o
   passo seguinte é a barra de filtros, isso é uma tela de nada entre o "Loja" e
   o primeiro controle. Fica o respiro de um bloco para o outro, e só.

   O seletor precisa repetir o `.storefront-full-width-content` do Storefront
   (que fica no próprio <body>) mais o `body`: a regra dele é
   `.storefront-full-width-content .woocommerce-products-header`, com duas
   classes, e a folha dele carrega depois da nossa. */
body.storefront-full-width-content .woocommerce-products-header,
.woocommerce-products-header {
	padding-bottom: 0;
	margin-bottom: 16px;
}

/* Contagem de resultados discreta sobre o canvas. */
body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count {
	color: var(--nkr-text-muted);
}

/* Cada produto é um tile branco elevado: sem a borda fina, com sombra suave e
   canto arredondado, destacando do canvas. O hover (scale + sombra maior) já
   existe e continua valendo. */
body.post-type-archive-product .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product {
	border: 0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);
}

/* Respiro entre a grade e a barra de ordenação de baixo — sem isso a última
   linha de tiles encostava no painel inferior. */
body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products {
	margin-bottom: 28px;
}

/* =========================================================================
   14. Campo CPF no checkout em blocos — mesma margem dos demais campos
   O campo adicional (nkr/cpf) renderiza fora da grade do endereço e não herda
   o gap dela, encostando no campo seguinte. Repõe a margem inferior. */
.wc-block-components-text-input:has(input[id*="nkr"]) {
	margin-bottom: 16px;
}

/* --- Rótulo flutuante x placeholder --------------------------------------
   O campo do checkout em blocos usa rótulo flutuante: o texto começa DENTRO da
   caixa e só sobe quando o campo tem valor (a classe `is-active` entra no
   valor, não no foco). Ou seja, aquele espaço pertence ao rótulo.

   Os campos nativos do WooCommerce não declaram `placeholder` justamente por
   isso. Os do tema declaram — e ali o placeholder é útil, porque no formulário
   CLÁSSICO ("Minha conta → Endereços") não existe rótulo flutuante e a máscara
   do CPF é uma dica de verdade. O resultado era "CPF" e "000.000.000-00"
   impressos um sobre o outro.

   A regra apaga o placeholder só onde o rótulo flutuante existe. Quando o
   campo ganha valor, o rótulo sobe e o placeholder já não teria vez de
   qualquer forma. */
.wc-block-components-text-input input::placeholder {
	color: transparent;
}

/* =========================================================================
   15. Busca sem resultado — "Você quis dizer…"
   Bloco de sugestões que entra depois do aviso do WooCommerce quando a busca
   não achou nada. Cartão branco sobre o canvas da loja, no mesmo padrão
   card/surface da §13; a grade de produtos é a da loja e não precisa de regra
   própria. */
.nkr-sugestoes-busca {
	margin: 24px 0 8px;
	padding: 20px 20px 4px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 32, 43, 0.08);
}

.nkr-sugestoes-busca__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 1.15em;
	color: var(--nkr-secondary, #1b4f91);
}

.nkr-sugestoes-busca__titulo .material-symbols-outlined {
	color: var(--nkr-primary, #fd7713);
	font-size: 1.4em;
}

.nkr-sugestoes-busca__termo {
	margin: 0 0 18px;
	color: #4a5568;
}

.nkr-sugestoes-busca__termo a {
	font-weight: 700;
	color: var(--nkr-secondary, #1b4f91);
	text-decoration: underline;
}

.nkr-sugestoes-busca__termo a:hover,
.nkr-sugestoes-busca__termo a:focus {
	color: var(--nkr-primary, #fd7713);
}

/* A grade herda o card da loja, mas dentro do cartão branco a sombra de tile
   sobre branco não tem o que destacar — vira contorno leve. */
.nkr-sugestoes-busca ul.products li.product {
	box-shadow: none;
	border: 1px solid rgba(16, 32, 43, 0.08);
	border-radius: 10px;
}

@media (max-width: 600px) {
	.nkr-sugestoes-busca {
		padding: 16px 14px 4px;
	}
}

/* =========================================================================
   16. CPF em Minha conta → Detalhes da conta
   O campo é um form-row comum do WooCommerce; só a linha de ajuda é nova. */
.woocommerce-EditAccountForm .nkr-conta__ajuda {
	display: block;
	margin-top: 4px;
	font-size: 0.82em;
	line-height: 1.4;
	color: #6b7280;
}

.woocommerce-EditAccountForm #nkr_billing_cpf {
	max-width: 260px;
}

/* =========================================================================
   17. Aviso de cookies

   Faixa presa ao pé da tela — não é modal: bloquear a loja inteira para pedir
   consentimento afasta mais gente do que informa. As duas escolhas têm o mesmo
   peso visual de propósito; botão de recusar escondido num link cinza é o
   padrão escuro que a LGPD justamente desencoraja.

   Nasce com `hidden`; quem decide se aparece é o JS lendo o cookie (ver
   nkr_render_cookies()), porque o HTML é o mesmo para todo mundo quando a
   página está em cache. */
.nkr-cookies {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 900;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 18px 20px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: var(--nkr-radius-xl);
	background: var(--nkr-background);
	box-shadow: 0 12px 32px -12px rgba(16, 32, 43, 0.4);
	/* Entra deslizando de baixo; o estado final é `is-visivel`. */
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.26s ease, opacity 0.26s ease;
}

.nkr-cookies.is-visivel {
	transform: none;
	opacity: 1;
}

.nkr-cookies[hidden] { display: none; }

.nkr-cookies__texto {
	flex: 1 1 380px;
	min-width: 0;
}

.nkr-cookies__texto strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	color: var(--nkr-text-main);
}

.nkr-cookies__texto p {
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--nkr-text-muted);
}

.nkr-cookies__texto a {
	color: var(--nkr-secondary);
	font-weight: 600;
}

.nkr-cookies__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nkr-cookies__btn {
	flex: 1 1 auto;
	padding: 11px 18px;
	border-radius: var(--nkr-radius);
	border: 1px solid var(--nkr-border-subtle);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nkr-cookies__btn--secundario {
	background: var(--nkr-background);
	color: var(--nkr-text-main);
}

.nkr-cookies__btn--secundario:hover {
	border-color: var(--nkr-secondary);
	color: var(--nkr-secondary);
}

.nkr-cookies__btn--primario {
	background: var(--nkr-primary);
	border-color: var(--nkr-primary);
	color: #fff;
}

.nkr-cookies__btn--primario:hover {
	background: var(--nkr-primary-hover);
	border-color: var(--nkr-primary-hover);
}

@media (max-width: 767px) {
	.nkr-cookies {
		/* A barra inferior de navegação do celular ocupa o rodapé da tela; sem
		   esta folga o aviso cobriria os atalhos de carrinho e busca. */
		bottom: calc(var(--nkr-bottomnav-height, 64px) + 10px);
		padding: 16px;
		gap: 14px;
	}

	.nkr-cookies__acoes { width: 100%; }
	.nkr-cookies__btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nkr-cookies { transition: none; }
}

/* =========================================================================
   18. Checkout em blocos — endereço salvo e aviso de login

   Duas correções na mesma tela: a barra "Outro Endereço" abaixo do cartão de
   resumo (ver nkr_checkout_outro_endereco()) e o respiro do link "Acessar",
   que no celular subia por cima do título do passo. */

/* O cabeçalho de cada passo é um bloco com o <h2> do título e um <span>
   flutuando à direita ("Acessar"). Float não reserva espaço no fluxo: o <h2>
   ocupa a linha inteira por baixo, e em tela estreita — onde o título quebra —
   o link passa por cima das palavras.

   Vira flex. Em contexto flex o `float` é ignorado, então os dois passam a
   dividir a linha de verdade, e o `flex-wrap` deixa o link cair para a linha
   de baixo quando não couber ao lado. */
.wc-block-components-checkout-step__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
}

.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title {
	flex: 1 1 auto;
	min-width: 0;
}

.wc-block-components-checkout-step__heading-content {
	flex: 0 0 auto;
}

/* Aqui está o miolo do defeito. O WooCommerce aplica, em
   `.wp-block-woocommerce-checkout .wc-block-checkout__login-prompt`,
   `float: right` **e** `margin-top: -24px` — é a margem negativa que sobe o
   link para a altura do título. O float mora no <a>, não no <span> que o
   embrulha: transformar o cabeçalho em flex não basta, porque o <a> continua
   flutuando dentro do <span>, que colapsa para altura zero.
   O seletor precisa de três classes para vencer as duas do WooCommerce, que
   carrega depois de nós. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading .wc-block-checkout__login-prompt {
	float: none;
	margin-top: 0;
	white-space: nowrap;
}

/* Em 360px "Informações de contato" já toma a linha sozinho. Aqui o título
   assume a largura inteira e o link desce, em vez de os dois se espremerem. */
@media (max-width: 480px) {
	.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title {
		flex: 1 1 100%;
	}
}

/* Barra "Outro Endereço": ocupa a largura do cartão de resumo, logo abaixo
   dele, com a cara de uma linha de ação — é o segundo caminho para o mesmo
   formulário, agora com nome de tarefa em vez de "Editar". */
.nkr-endereco-outro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: -1px 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--nkr-border-subtle);
	border-radius: 0 0 var(--nkr-radius-lg) var(--nkr-radius-lg);
	background: var(--nkr-surface-gray);
	color: var(--nkr-secondary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.nkr-endereco-outro:hover,
.nkr-endereco-outro:focus {
	background: var(--nkr-surface-container-low);
	color: var(--nkr-primary-hover);
}

.nkr-endereco-outro .material-symbols-outlined { font-size: 18px; }

/* O cartão de resumo perde o canto de baixo para a barra encaixar nele. */
.wc-block-components-address-card:has(+ .nkr-endereco-outro) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* =========================================================================
   19. Minha conta → Endereços: CPF e complemento

   O CPF é campo adicional do WooCommerce; a caixa de texto vem dele, e aqui só
   se acerta a medida — documento de 14 caracteres num campo de largura total
   parece que espera mais do que espera. */
.woocommerce-address-fields .nkr-conta-endereco__cpf input {
	max-width: 260px;
}

@media (max-width: 599px) {
	.woocommerce-address-fields .nkr-conta-endereco__cpf input {
		max-width: none;
	}
}

/* =========================================================================
   20. Telas estreitas (≤425px): o cartão branco encosta nas bordas

   Em 375px sobravam 56px de margem de cada lado antes do conteúdo começar:
   12px do `.site-content`, 20px do `.col-full` do Storefront e 24px de recheio
   do próprio cartão. Restavam 261px úteis de 375 — foto de produto pequena,
   título quebrando em três linhas e duas faixas de fundo azulado sem função.

   Abaixo de 425px a moldura sai de cena: o cartão vai de ponta a ponta, sem
   canto arredondado (canto redondo encostado na borda da tela lê como defeito)
   e com o recheio reduzido. O fundo azulado continua existindo entre um bloco
   e outro, que é o que separa as seções. */
@media (max-width: 425px) {
	/* O maior culpado é o `.col-full` do Storefront, que separa o conteúdo das
	   bordas com MARGEM (não com recheio) — quase 20px de cada lado. Zerar só o
	   recheio, como se tentou primeiro, não move nada. */
	.site-content .col-full {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* Fora da home o cartão vai de ponta a ponta. */
	body:not(.home) .site-content {
		padding-left: 0;
		padding-right: 0;
	}

	body:not(.home) .site-main {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Na home, não: ali o afastamento das bordas passa a ser o MESMO vão que
	   separa dois produtos na vitrine (`--nkr-card-gap`). Encostar os cartões
	   na borda e manter 12px entre eles daria dois espaçamentos diferentes na
	   mesma tela; com a medida única, a coluna de blocos fica alinhada com a
	   grade de produtos que corre dentro dela. */
	body.home .site-content {
		padding-left: var(--nkr-card-gap);
		padding-right: var(--nkr-card-gap);
	}

	/* Fora da home o cartão passou a ter 16px de recheio lateral; a fila
	   continua de ponta a ponta, então sangra exatamente essa medida. */
	.nkr-filtros--mobile {
		margin-left: -16px;
		margin-right: -16px;
	}

	/* O aviso de cookies é fixo e não segue o `.site-content`; encostar nas
	   bordas aqui é o mesmo gesto do resto. */
	.nkr-cookies {
		left: 0;
		right: 0;
		border-left: 0;
		border-right: 0;
		border-radius: var(--nkr-radius-lg) var(--nkr-radius-lg) 0 0;
	}
}

/* =========================================================================
   21. Carrinho em blocos no celular

   Duas correções na mesma tela, as duas de espaço horizontal. */

/* --- Caixa de totais ------------------------------------------------------
   `.wc-block-cart__sidebar` é o painel cinza dos cupons, do frete e do total.
   Ele tem fundo e borda, mas recheio ZERO: em tela estreita o "Adicionar
   cupons", o "Retirada em loja" e o "Total estimado" nasciam colados na borda
   esquerda e o valor colado na direita, sem nenhuma margem de leitura. */
@media (max-width: 767px) {
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar.wc-block-cart__sidebar {
		padding: 4px 16px;
	}

	/* O botão "Ir para o Checkout" mora dentro do painel e deve ocupar a
	   largura útil dele, não colar nas bordas junto com o resto. */
	.wp-block-woocommerce-cart .wc-block-cart__submit {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --- Linha do produto -----------------------------------------------------
   A grade do WooCommerce reserva uma coluna final estreita para o subtotal —
   em 375px sobravam 43px, e "R$ 239,80" precisa de uns 70px: o valor
   transbordava para fora do cartão.

   Abaixo de 480px a linha vira duas colunas (foto + conteúdo) e o subtotal
   desce para baixo do nome do produto, alinhado com ele. É a mesma solução dos
   aplicativos de marketplace, e ganha largura para o nome do produto de quebra.

   O seletor leva o bloco do carrinho como ancestral porque o CSS do
   WooCommerce carrega depois do nosso e empataria em especificidade. */
@media (max-width: 480px) {
	/* O seletor precisa das quatro classes mais o `table` porque é assim que o
	   WooCommerce escreve o dele (`.wc-block-cart table.wc-block-cart-items
	   .wc-block-cart-items__row`) — e ele carrega depois de nós. Com menos que
	   isso, o empate vai para o plugin. Pelo mesmo motivo, as propriedades são
	   as longas (`grid-column-start`), que é a forma usada lá. */
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 2px;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: span 2;
		padding-right: 0;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		text-align: left;
		padding-left: 0;
		padding-right: 0;
	}

	/* Sem o alinhamento à direita, o preço e o "de/por" do desconto ficam na
	   mesma leitura do nome do produto, de cima para baixo. */
	.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0 8px;
	}
}

/* =========================================================================
   22. Mini-Cart (gaveta do carrinho) no cabeçalho

   O bloco `woocommerce/mini-cart` substituiu o link simples do carrinho: o
   ícone abre uma gaveta lateral com os itens, o subtotal e o caminho para o
   checkout, e ela abre sozinha quando o cliente adiciona algo pela vitrine.

   O que este bloco de CSS faz é encaixar o botão do WooCommerce no gabarito
   das outras ações do topo (Conta, Carrinho): mesma coluna ícone-sobre-rótulo,
   mesma medida. Sem isso o botão vinha com recheio próprio e crescia o
   cabeçalho de 73px para 84px — e tudo que se ancora nessa altura (a fila
   "Ordenar | Filtrar", o `padding-top` do body) saía do lugar. */
.nkr-action--carrinho {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.nkr-action--carrinho .wc-block-mini-cart {
	display: block;
	line-height: 0;
}

.nkr-action--carrinho .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	color: inherit;
	line-height: 0;
	cursor: pointer;
}

/* O ícone do bloco é um SVG sem medida própria: sem estas duas linhas ele
   nasce 0x0 e o botão inteiro some. O seletor inclui o elemento `svg` para
   não depender do nome da classe, que já mudou entre versões do bloco. */
.nkr-action--carrinho .wc-block-mini-cart__button svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* O contador vira a mesma bolinha laranja das outras ações. */
.nkr-action--carrinho .wc-block-mini-cart__badge {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 999px;
	background: var(--nkr-primary);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.4;
}

.nkr-action--carrinho .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: block;
	line-height: 0;
}

/* O preço fica escondido pelo atributo do bloco; a regra é a rede de baixo
   para o caso de alguém religá-lo pelo editor e desalinhar o cabeçalho. */
.nkr-action--carrinho .wc-block-mini-cart__amount {
	display: none;
}

.nkr-action--carrinho:hover { color: var(--nkr-primary-fixed); }

/* A gaveta em si é do WooCommerce e abre por cima de tudo; só o botão de
   fechar precisa vencer o cabeçalho fixo, que tem z-index 500. */
.wc-block-components-drawer__screen-overlay,
.wc-block-mini-cart__drawer {
	z-index: 600;
}

/* =========================================================================
   23. Retirada em loja — endereço e comprovante no checkout
   ========================================================================= */

/* O rótulo do frete diz só "Retirada em loja". Quem escolhe retirar precisa
   saber em qual loja e o que levar — o aviso nasce colado no método. */
.nkr-retirada {
	margin: 8px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--nkr-primary, #fd7713);
	border-radius: 4px;
	background: #fff6ef;
	text-align: left;
}

.nkr-retirada p {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.45;
	color: #333;
}

.nkr-retirada__titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--nkr-secondary, #1b4f91);
}

.nkr-retirada__titulo .material-symbols-outlined {
	font-size: 18px;
}

.nkr-retirada__endereco {
	margin-top: 2px;
	font-weight: 600;
}

.nkr-retirada__aviso {
	margin-top: 4px;
}

/* =========================================================================
   24. Checkout mais largo no desktop
   ========================================================================= */

/* O `.col-full` do Storefront prende o conteúdo em 66.5em (~1064px), largura
   pensada para texto corrido. No checkout são duas colunas de formulário lado
   a lado: os rótulos e o resumo do pedido quebram em duas ou três linhas e a
   tela fica mais alta do que precisa. Daí em diante o limite sobe para 1200px,
   ainda centralizado — e como é `max-width`, telas menores continuam iguais.
   Só no checkout: nas páginas de texto a linha longa demais atrapalha a leitura. */
@media (min-width: 1024px) {
	body.woocommerce-checkout .site-content .col-full {
		max-width: 1200px;
	}
}

/* =========================================================================
   25. Logotipo maior no desktop e a gaveta do carrinho sob o cabeçalho
   ========================================================================= */

/* O logotipo nasce com 40px de altura, medida pensada para caber junto com a
   busca no celular. No desktop sobra espaço, e numa barra que agora fica à
   vista o tempo todo ele é a âncora da marca. */
@media (min-width: 992px) {
	.nkr-header__logo img,
	.nkr-header__logo .custom-logo-link img {
		height: 52px;
		max-width: 260px;
	}
}

/* A gaveta do Mini-Cart é do WooCommerce e nasce como painel de altura cheia
   entrando pela direita, por cima de tudo — inclusive do cabeçalho fixo. Agora
   ela desce colada nele, do lado do botão em que o cliente clicou. Muda a
   posição e a medida; conteúdo, botões e comportamento continuam sendo os do
   bloco. */
.wc-block-components-drawer__screen-overlay {
	top: var(--nkr-header-height, 81px);
}

.wc-block-mini-cart__drawer.wc-block-components-drawer {
	top: var(--nkr-header-height, 81px);
	right: var(--nkr-margin-page);
	left: auto;
	width: min(420px, calc(100% - var(--nkr-margin-page) * 2));
	height: auto;
	max-height: calc(100dvh - var(--nkr-header-height, 81px) - 16px);
	transform: none;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

/* A cadeia de blocos do WooCommerce é `height: 100%` de ponta a ponta, feita
   para o painel de altura cheia. Num painel que cresce com o conteúdo, 100%
   de altura automática vira altura automática — e a lista de itens perderia
   o próprio scroll. Com flex e `min-height: 0`, o limite do painel desce até
   a lista, que volta a rolar sozinha. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents,
.wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block,
.wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block {
	height: auto;
	min-height: 0;
	max-height: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	min-height: 0;
}

/* O título vem com 2em, medida de painel inteiro. Aqui ele dividiria a dobra
   com os produtos. */
.wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
	font-size: 1.25em;
	margin-bottom: -24px;
	padding-bottom: 24px;
}

/* Entrada e saída passam a ser verticais — o painel desce de baixo da barra.
   O `slidein` do bloco é horizontal e continuaria empurrando pelo lado. */
@keyframes nkr-mini-cart-desce {
	from { transform: translateY(-12px); }
	to   { transform: translateY(0); }
}

.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-mini-cart__drawer.wc-block-components-drawer {
	animation-name: nkr-mini-cart-desce;
}

.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-mini-cart__drawer.wc-block-components-drawer {
	transform: translateY(-12px);
}