/* ===========================================================================
   NR-1 Landing — OVERRIDES
   ---------------------------------------------------------------------------
   Carregado DEPOIS de nr1-landing.css. Tudo aqui é escopado em .nr1-lp para
   não vazar para o tema/admin/WooCommerce do resto do site.

   Responsabilidades:
     1. Garantia de visibilidade (fallback no-JS para .reveal-on-scroll).
     2. Variáveis e estilo dos botões/buybox (.nr1-btn, .nr1-buybox), que viviam
        no <style> inline do template antigo e foram removidos.
     3. Isolamento do checkout WooCommerce (#nr1-checkout-panel).
     4. Offset da admin bar do WordPress.
   =========================================================================== */

/* --- 2. Fallback no-JS: sem o IntersectionObserver, o conteúdo precisa
       permanecer visível. Sob <html class="no-js"> ou quando o JS não roda,
       neutralizamos o estado inicial opacity:0 das seções. --- */
.no-js .nr1-lp .reveal-on-scroll {
	opacity: 1 !important;
	transform: none !important;
}

/* --- 3. Variáveis usadas pela buybox WooCommerce.
       Sincronizadas com as cores extraídas dos assets do designer:
         --nr1-orange  : #F26522  (laranja primário)
         --nr1-cream   : #F4EEE7  (fundo claro)
         --nr1-dark    : #1F1F1F  (fundo escuro)
       --- */
.nr1-lp {
	--nr1-display: 'Anton', 'Arial Narrow', system-ui, sans-serif;
	--nr1-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--nr1-orange: #F26522;
	--nr1-orange-2: #d44e18;
	--nr1-cream: #F4EEE7;
	--nr1-dark: #1F1F1F;
	--nr1-amber: #F59E0B;
}

/* Botões (.nr1-btn) — novo visual Anton + Montserrat. Usados na LP inteira e
   na página de checkout dedicada (FASE 3c). */
.nr1-lp .nr1-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--nr1-body);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	padding: 16px 32px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nr1-lp .nr1-btn-primary,
.nr1-lp .nr1-buy-btn {
	background: var(--nr1-orange);
	color: #fff;
	box-shadow: 0 10px 28px rgba(242, 101, 34, 0.32);
}
.nr1-lp .nr1-btn-primary:hover,
.nr1-lp .nr1-buy-btn:hover {
	background: var(--nr1-orange-2);
	transform: translateY(-2px);
	color: #fff;
	text-decoration: none;
}
.nr1-lp .nr1-buy-btn.nr1-btn--loading {
	opacity: 0.7;
	pointer-events: none;
}
.nr1-lp .nr1-buy-btn.nr1-btn--success {
	background: hsl(150 60% 36%);
	box-shadow: none;
}
.nr1-lp .nr1-buy-btn.nr1-btn--error {
	background: hsl(0 70% 48%);
}

.nr1-lp .nr1-checkout-error-msg {
	margin-top: 12px;
	color: hsl(0 70% 42%);
	font-family: var(--nr1-body);
	font-size: 0.9rem;
}
.nr1-lp .nr1-checkout-error-msg[hidden] {
	display: none;
}

/* --- 5. Painel de checkout WooCommerce: isolado do sistema visual da LP.
       Começa oculto (a regra inline display:none já faz isso; reforçamos aqui).
       Quando o JS revela, restauramos a tipografia/contraste do checkout para
       evitar herança indesejada das fontes/cores da landing. --- */
.nr1-lp #nr1-checkout-panel {
	display: none;
}
.nr1-lp #nr1-checkout-panel.nr1-checkout-panel--visible {
	display: block;
	margin-top: 28px;
	background: #fff;
	border-radius: 24px;
	padding: 40px;
	color: #1f2937;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 24px 60px rgba(26, 18, 8, 0.10);
}
/* Reset de tipografia herdada do checkout WooCommerce — restrito a labels/textos
   internos do checkout (WC), sem clobber dos componentes de UI da FASE 3c-B
   (cabeçalho do card, stepper, card COMBO, textos de apoio). */
.nr1-lp #nr1-checkout-panel.nr1-checkout-panel--visible .woocommerce h3,
.nr1-lp #nr1-checkout-panel.nr1-checkout-panel--visible .woocommerce label,
.nr1-lp #nr1-checkout-panel.nr1-checkout-panel--visible .woocommerce p {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

/* --- 6. Navegação mobile: estado aberto do menu hambúrguer. --- */
@media (max-width: 860px) {
	.nr1-lp .nr1-nav-links.is-open {
		display: flex;
	}
}

/* --- 7. Responsividade mobile.
       A referência dimensiona o H1 com clamp(4.5rem, 11vw, 14rem) e não traz
       um breakpoint que reduza esse piso. Em telas estreitas (~390px) isso
       estoura a largura. Reduzimos o piso e garantimos que o corpo da LP
       nunca gere rolagem horizontal. --- */
.nr1-lp {
	overflow-x: hidden;
}
@media (max-width: 860px) {
	.nr1-lp .nr1-h1 {
		font-size: clamp(2.4rem, 9vw, 4rem);
		word-break: break-word;
	}
	.nr1-lp .nr1-h2 {
		font-size: clamp(1.9rem, 7vw, 3rem);
	}
}
@media (max-width: 480px) {
	.nr1-lp .nr1-h1 {
		font-size: clamp(2rem, 9.5vw, 3rem);
	}
}

/* ============================================================
   STICKY BUYBOX — card flutuante lateral / bottom bar mobile
   ============================================================ */

/* Desktop: sidebar direita, centralizada verticalmente */
#nr1-sticky-buybox {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(120%);
  z-index: 900;
  width: 220px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

#nr1-sticky-buybox.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.nr1-sticky-buybox__inner {
  background: #fff;
  border: 1px solid rgba(232, 99, 42, 0.22);
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(26, 18, 8, 0.18), 0 4px 16px rgba(232, 99, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nr1-sticky-buybox__badge {
  display: inline-block;
  background: rgba(232, 99, 42, 0.12);
  color: var(--nr1-orange);
  font-family: var(--nr1-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}

.nr1-sticky-buybox__name {
  font-family: var(--nr1-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1208;
  line-height: 1.35;
}

.nr1-sticky-buybox__price {
  font-family: var(--nr1-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nr1-orange);
  line-height: 1;
}

.nr1-sticky-buybox__price .woocommerce-Price-amount {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.nr1-sticky-buybox__btn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.88rem;
  padding: 13px 16px;
  /* Garante laranja + cantos arredondados mesmo fora do escopo .nr1-lp */
  background: var(--nr1-orange, #e8632a) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(232, 99, 42, 0.28);
}

.nr1-sticky-buybox__btn:hover,
.nr1-sticky-buybox__btn:focus {
  background: var(--nr1-orange-2, #d44e18) !important;
  transform: translateY(-2px);
  color: #fff !important;
  text-decoration: none;
}

/* Mobile: barra fixada no bottom */
@media (max-width: 860px) {
  #nr1-sticky-buybox {
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    transform: translateY(100%);
    border-radius: 0;
  }

  #nr1-sticky-buybox.is-visible {
    transform: translateY(0);
  }

  .nr1-sticky-buybox__inner {
    flex-direction: row;
    align-items: center;
    border-radius: 16px 16px 0 0;
    padding: 14px 20px;
    gap: 12px;
  }

  .nr1-sticky-buybox__badge {
    display: none;
  }

  .nr1-sticky-buybox__name {
    display: none;
  }

  .nr1-sticky-buybox__price {
    flex: 1;
    white-space: nowrap;
  }

  .nr1-sticky-buybox__btn {
    width: auto;
    flex-shrink: 0;
    padding: 12px 20px;
  }
}

/* ============================================================
   MICROINTERACOES — Pulse ring, Shimmer, Idle breathe
   NOTE: nr1-pulse-ring already exists in nr1-landing.css for SVG diagram
   elements (.nr1-dark .nr1-pulse::after). The button pulse is defined here
   as nr1-pulse-ring-btn to avoid overriding that unrelated animation.
   ============================================================ */

@keyframes nr1-pulse-ring-btn {
  0%   { box-shadow: 0 10px 24px rgba(232, 99, 42, 0.28), 0 0 0 0 rgba(232, 99, 42, 0.55); }
  70%  { box-shadow: 0 10px 24px rgba(232, 99, 42, 0.28), 0 0 0 14px rgba(232, 99, 42, 0); }
  100% { box-shadow: 0 10px 24px rgba(232, 99, 42, 0.28), 0 0 0 0 rgba(232, 99, 42, 0); }
}

@keyframes nr1-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes nr1-idle-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.025) translateY(0); }
}

/* Pulse ring nos botoes primarios e sticky */
.nr1-lp .nr1-btn-primary,
.nr1-lp .nr1-buy-btn,
#nr1-sticky-buybox .nr1-sticky-buybox__btn {
  position: relative;
  overflow: hidden;
  animation: nr1-pulse-ring-btn 2.8s ease-out infinite, nr1-idle-breathe 5s ease-in-out infinite;
}

/* Pausar idle breathe e pulse em hover/focus para nao conflitar com hover lift */
.nr1-lp .nr1-btn-primary:hover,
.nr1-lp .nr1-btn-primary:focus,
.nr1-lp .nr1-buy-btn:hover,
.nr1-lp .nr1-buy-btn:focus,
#nr1-sticky-buybox .nr1-sticky-buybox__btn:hover,
#nr1-sticky-buybox .nr1-sticky-buybox__btn:focus {
  animation-play-state: paused;
}

/* Shimmer via ::after */
.nr1-lp .nr1-btn-primary::after,
.nr1-lp .nr1-buy-btn::after,
#nr1-sticky-buybox .nr1-sticky-buybox__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: nr1-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Garantir que os estados de loading/success/error do botao de compra
   nao tenham o shimmer piscando (semanticamente errado) */
.nr1-lp .nr1-buy-btn.nr1-btn--loading::after,
.nr1-lp .nr1-buy-btn.nr1-btn--success::after,
.nr1-lp .nr1-buy-btn.nr1-btn--error::after {
  display: none;
}

.nr1-lp .nr1-buy-btn.nr1-btn--loading,
.nr1-lp .nr1-buy-btn.nr1-btn--success,
.nr1-lp .nr1-buy-btn.nr1-btn--error {
  animation: none;
}

/* Admin bar offset para o sticky no desktop */
body.admin-bar #nr1-sticky-buybox {
  top: calc(50% + 16px);
}

/* ============================================================
   WHATSAPP BUTTON — coexistência com sticky buybox
   ============================================================ */

/* Eleva o botão do WhatsApp acima da sticky buybox (z-index: 900) */
.whatsapp-button-section {
  z-index: 950;
}

/* Mobile: desloca o botão para cima da barra sticky (≈70-72px de altura) */
@media (max-width: 860px) {
  .whatsapp-button-section {
    bottom: 80px;
  }
}

/* ============================================================
   CLEAR CART — link discreto próximo ao resumo do pedido
   ============================================================ */

.nr1-lp .nr1-clear-cart-wrapper {
  text-align: right;
  padding: 4px 0 8px;
}

.nr1-lp .nr1-clear-cart {
  font-size: 0.78rem;
  color: #bbb;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nr1-lp .nr1-clear-cart:hover,
.nr1-lp .nr1-clear-cart:focus {
  color: hsl(0 70% 48%);
  text-decoration: underline;
}

/* ============================================================
   CHECKOUT PANEL — oculta o link "Ver carrinho" da notificação de
   "X foi adicionado ao seu carrinho". O WooCommerce passou a renderizar
   essa notice com o markup em bloco (.wc-block-components-notice-banner)
   em vez do antigo .woocommerce-message — mantemos os dois seletores por
   segurança, e miramos a classe .wc-forward (estável entre as duas
   versões de markup) em vez de .button genérico.
   ============================================================ */

.nr1-lp #nr1-checkout-panel .woocommerce-message a.wc-forward,
.nr1-lp #nr1-checkout-panel .wc-block-components-notice-banner a.wc-forward {
  display: none !important;
}

/* ============================================================
   CHECKOUT PANEL — layout 2 colunas (billing | order review)
   ============================================================ */

/* Força float layout no painel, sobrescrevendo qualquer regra do WooCommerce
   que colapse para single-column (breakpoints, resets, etc.). */
@media (min-width: 600px) {
  .nr1-lp #nr1-checkout-panel #customer_details {
    float: left !important;
    width: 47% !important;
    margin-right: 0 !important;
  }

  .nr1-lp #nr1-checkout-panel .nr1-clear-cart-wrapper {
    float: right !important;
    width: 47% !important;
    clear: right;
    margin-left: 6%;
  }

  .nr1-lp #nr1-checkout-panel #order_review_heading {
    float: right !important;
    width: 47% !important;
    clear: right;
    margin-left: 6% !important;
  }

  .nr1-lp #nr1-checkout-panel #order_review {
    float: right !important;
    width: 47% !important;
    clear: right;
    margin-left: 6%;
  }

  /* Limpa o float após o form para evitar colapso do container pai */
  .nr1-lp #nr1-checkout-panel form.woocommerce-checkout::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* Etapa 2: as colunas INTERNAS do WooCommerce (.col-1 cobrança / .col-2
   adicionais) ficam empilhadas — o split visual da página é
   dados de cobrança | resumo do pedido, não três colunas. */
.nr1-lp #nr1-checkout-panel #customer_details .col-1,
.nr1-lp #nr1-checkout-panel #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
}

/* Mobile: single column */
@media (max-width: 599px) {
  .nr1-lp #nr1-checkout-panel #customer_details,
  .nr1-lp #nr1-checkout-panel .nr1-clear-cart-wrapper,
  .nr1-lp #nr1-checkout-panel #order_review_heading,
  .nr1-lp #nr1-checkout-panel #order_review {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    clear: none;
  }
}

/* ============================================================
   CHECKOUT PANEL — "Seu pedido" heading com destaque visual
   ============================================================ */

.nr1-lp #nr1-checkout-panel #order_review_heading {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, var(--nr1-orange, #e8632a) 0%, var(--nr1-orange-2, #d44e18) 100%) !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ============================================================
   FASE 3c — PÁGINA DE CHECKOUT DEDICADA
   Estilização funcional/estrutural (a fina vem na 3c-B).
   ============================================================ */

/* Header enxuto da página de checkout: logo + voltar aos planos. */
.nr1-lp .nr1-checkout-header .nr1-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nr1-lp .nr1-checkout-header__back {
  font-family: var(--nr1-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nr1-white);
  text-decoration: none;
}

.nr1-lp .nr1-checkout-header__back:hover,
.nr1-lp .nr1-checkout-header__back:focus {
  color: var(--nr1-orange);
  text-decoration: underline;
}

/* Espaço para o conteúdo não colar no header fixo. */
.nr1-lp .nr1-checkout-main {
  padding-top: 40px;
}

/* Na página dedicada o painel já nasce visível; garante o layout de card
   mesmo sem a animação de reveal do fluxo inline. */
.nr1-lp.nr1-checkout-page #nr1-checkout-panel,
.nr1-lp .nr1-checkout-wrapper #nr1-checkout-panel.nr1-checkout-panel--visible {
  display: block;
}

/* ============================================================
   FASE 3c-B — ESTILIZAÇÃO FINA (casar com Figma 02/03)
   ============================================================ */

/* Largura do card e centralização na página dedicada. */
.nr1-lp .nr1-checkout-wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

/* Fundo creme da página (Figma 02/03). */
.nr1-lp.nr1-checkout-page .nr1-checkout-main {
  background: var(--nr1-cream);
}

/* Card COMBO (etapa 1): sangra até as bordas do card branco (padding 40px),
   ficando flush no topo/direita/baixo como no Figma 02. */
.nr1-lp.nr1-checkout-page #nr1-checkout-panel .nr1-combo-card {
  margin: -40px -40px -40px 0;
  border-radius: 0 24px 24px 0;
}

/* ------------------------------------------------------------
   ETAPA 2 — RESUMO DO PEDIDO (box claro) via #order_review do WooCommerce.
   O split interno #customer_details | #order_review já é flutuado pelas regras
   de layout 2 colunas acima; aqui damos ao #order_review o visual do Figma 03.
   ------------------------------------------------------------ */

/* Contêiner da etapa 2 usa a largura toda do card. */
.nr1-lp #nr1-checkout-panel .nr1-checkout-step2 {
  width: 100%;
}

/* Seções do checkout WooCommerce com títulos em caixa alta (Figma 03). */
.nr1-lp #nr1-checkout-panel .woocommerce-billing-fields > h3,
.nr1-lp #nr1-checkout-panel .woocommerce-additional-fields > h3,
.nr1-lp #nr1-checkout-panel #payment .payment_methods + * h3,
.nr1-lp #nr1-checkout-panel .woocommerce-account-fields > h3 {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  color: #8a8a8a !important;
  margin: 8px 0 14px !important;
}

/* Inputs do checkout WooCommerce no estilo do Figma (borda + foco laranja). */
.nr1-lp #nr1-checkout-panel .woocommerce form .form-row input.input-text,
.nr1-lp #nr1-checkout-panel .woocommerce form .form-row textarea,
.nr1-lp #nr1-checkout-panel .woocommerce form .form-row select,
.nr1-lp #nr1-checkout-panel .woocommerce .select2-selection {
  border: 1.5px solid rgba(26, 18, 8, 0.18) !important;
  border-radius: var(--nr1-radius, 12px) !important;
  padding: 12px 14px !important;
  font-family: var(--nr1-body) !important;
  font-size: 0.95rem !important;
  color: var(--nr1-dark) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nr1-lp #nr1-checkout-panel .woocommerce form .form-row input.input-text:focus,
.nr1-lp #nr1-checkout-panel .woocommerce form .form-row textarea:focus,
.nr1-lp #nr1-checkout-panel .woocommerce form .form-row select:focus {
  border-color: var(--nr1-orange) !important;
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.14) !important;
}

.nr1-lp #nr1-checkout-panel .woocommerce form .form-row label {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--nr1-dark) !important;
  margin-bottom: 6px;
}

/* Caixa RESUMO DO PEDIDO clara. */
.nr1-lp #nr1-checkout-panel #order_review {
  background: #fff;
  border: 1.5px solid rgba(26, 18, 8, 0.10);
  border-radius: 16px;
  padding: 22px 24px !important;
  box-shadow: 0 10px 30px rgba(26, 18, 8, 0.06);
}

/* Título "RESUMO DO PEDIDO" (reaproveita #order_review_heading; sobrescreve o
   gradiente laranja aplicado no fluxo inline legado). */
.nr1-lp.nr1-checkout-page #nr1-checkout-panel #order_review_heading {
  background: none !important;
  color: #8a8a8a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  padding: 0 0 12px !important;
  border-radius: 0 !important;
}

/* Tabela do pedido: linhas discretas, total em laranja (Figma 03). */
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nr1-body);
  font-size: 0.9rem;
  color: var(--nr1-dark);
}
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table th,
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table td {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(26, 18, 8, 0.08);
  text-align: left;
}
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table td {
  text-align: right;
}
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table .order-total th,
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0;
  padding-top: 14px !important;
  font-size: 1rem;
  font-weight: 700;
}
.nr1-lp #nr1-checkout-panel .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  color: var(--nr1-orange);
  font-family: var(--nr1-display);
  font-size: 1.35rem;
}

/* Botão FINALIZAR PEDIDO em largura total, laranja (Figma 03). */
.nr1-lp #nr1-checkout-panel #payment #place_order,
.nr1-lp #nr1-checkout-panel .woocommerce #place_order {
  width: 100%;
  background: var(--nr1-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--nr1-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 16px 24px !important;
  box-shadow: 0 10px 28px rgba(242, 101, 34, 0.32);
  transition: background 0.18s ease, transform 0.18s ease;
}
.nr1-lp #nr1-checkout-panel #payment #place_order:hover,
.nr1-lp #nr1-checkout-panel .woocommerce #place_order:hover {
  background: var(--nr1-orange-2) !important;
  transform: translateY(-2px);
}

/* Bandeiras de cartão (fallback textual — assets ausentes no repo, ver relato). */
.nr1-lp #nr1-checkout-panel .nr1-card-flags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.nr1-lp #nr1-checkout-panel .nr1-card-flags span {
  font-family: var(--nr1-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #555;
  background: #f2f2f2;
  border: 1px solid rgba(26, 18, 8, 0.12);
  border-radius: 5px;
  padding: 4px 8px;
  line-height: 1;
}

/* ------------------------------------------------------------
   BLOCO "DÚVIDAS OU DIFICULDADES?" (rodapé de atendimento — Figma 02/03).
   ------------------------------------------------------------ */
.nr1-lp .nr1-checkout-help {
  background: var(--nr1-dark);
  color: #fff;
  padding: 64px 0;
}

.nr1-lp .nr1-checkout-help__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.nr1-lp .nr1-checkout-help__copy {
  max-width: 560px;
}

.nr1-lp .nr1-checkout-help__title {
  font-family: var(--nr1-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

.nr1-lp .nr1-checkout-help__title-accent {
  color: var(--nr1-orange);
}

.nr1-lp .nr1-checkout-help__text {
  font-family: var(--nr1-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.6;
}

.nr1-lp .nr1-checkout-help__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--nr1-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 18px 36px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nr1-lp .nr1-checkout-help__btn:hover,
.nr1-lp .nr1-checkout-help__btn:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.nr1-lp .nr1-checkout-help__btn-icon {
  color: #25d366;
}

@media (max-width: 780px) {
  .nr1-lp .nr1-checkout-help {
    padding: 44px 0;
  }
  .nr1-lp .nr1-checkout-help__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .nr1-lp .nr1-checkout-help__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Estado de carrinho vazio. */
.nr1-lp .nr1-checkout-empty {
  max-width: 560px;
  margin: 24px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Sticky buybox — "A partir de" prefixo/sufixo (FASE 3c). */
.nr1-sticky-buybox__price-prefix {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6b6b;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.2;
}

.nr1-sticky-buybox__price-suffix {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b6b6b;
}

/* Linha auxiliar sob o preço ("por colaborador") — esclarece que o valor é por
   colaborador/mês sem alongar a linha do preço. display:block garante quebra
   vertical mesmo com o white-space:nowrap herdado no mobile (sem overflow
   horizontal em viewports estreitos). */
.nr1-sticky-buybox__price-per {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6b6b;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.2;
  margin-top: 3px;
}

@media (max-width: 860px) {
  /* No mobile a barra é horizontal; o prefixo vira inline para poupar altura. */
  .nr1-sticky-buybox__price-prefix {
    display: inline;
    font-size: 0.68rem;
  }

  .nr1-sticky-buybox__price-per {
    font-size: 0.65rem;
    margin-top: 2px;
  }
}

/* ==========================================================================
   Iceberg section: force first heading line to pure white, keep accent
   orange untouched. Scoped by #iceberg so no other .nr1-h2 is affected.
   ========================================================================== */
#iceberg .nr1-iceberg-lead-white {
  color: #FFFFFF;
}
