/* ═══════════════════════════════════════════════════════════════════════════════════════
   CONFIGURADOR UNIFICADO — o que o componente precisa ALÉM do que product.css já dá ao cartão do
   perfil (Fase 3, docs/PLANO-CONFIGURADOR-UNIFICADO.md §5.3). Carrega só com a chave ark_cfg=2.
   Fica FORA do product.css de propósito: os PDFs (Dompdf) inlinam product.css, e nada daqui vai
   para o papel. Regra: o cartão do perfil é a referência de design — aqui só entram (1) o que o
   inline da PDP fazia por style="" e (2) o ajuste da gaveta estreita, que agora usa o MESMO cartão.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* 1) Linha quantidade + comprar — era style="" inline em single-product-perfil-led.php:483-490 */
.ark-config .cart-row.ark-config-acoes { display: flex; gap: 8px; align-items: stretch; margin-top: 16px; }
.ark-config .ark-perfil-qty {
  display: grid; grid-template-columns: 32px 44px 32px; height: 48px;
  border: 1px solid #ddd; background: #fff; flex: 0 0 auto;
}
.ark-config .ark-perfil-qty .qty-btn { border: 0; background: transparent; cursor: pointer; line-height: 1; }
.ark-config .ark-perfil-qty .qty-input {
  width: 100%; height: 100%; border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd;
  text-align: center; background: transparent; outline: none; -moz-appearance: textfield; font: inherit;
}
.ark-config .ark-perfil-qty .qty-input::-webkit-outer-spin-button,
.ark-config .ark-perfil-qty .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ark-config .ark-config-acoes .single_add_to_cart_button { flex: 1 1 auto; }
.ark-config .ark-var-hint[hidden] { display: none; }
.ark-config .ark-aviso-falta { margin-top: 8px; }

/* Ambiente (variável e simples): mesmo campo do cartão (rc773) */
.ark-config .ark-ambiente-input {
  width: 100%; border: 1px solid var(--border-default, #E2E0DB); border-radius: 0;
  padding: 7px 11px; font-size: 14px; font-family: inherit; background: #fff; margin-bottom: 6px;
}
.ark-config .ark-ambiente-input:focus { outline: none; border-color: var(--cor-preto, #1a1a1a); }
.ark-config .ark-ambiente-input::placeholder { color: #B8B8B8; }

/* Indisponível: o botão Consulte-nos ocupa a linha inteira */
.ark-config-indisponivel { display: flex; flex-direction: column; gap: 8px; }

/* 2) Gaveta: o mesmo cartão, num painel de ~360px. Sem borda dupla (o painel já emoldura),
   grades de 2 colunas (medido em 2026-09-05: em 3 o rótulo quebrava e o chip crescia) e o preço
   fixo no topo enquanto rola (rc887/rc888). */
.ark-drawer-config .ark-config--drawer { display: flex; flex-direction: column; gap: 14px; }
.ark-drawer-config .ark-config .perfil-config-block { border: 0; padding: 0; }
.ark-drawer-config .ark-config .chip-group[data-attr="cor"],
.ark-drawer-config .ark-config .chip-group[data-attr="cct"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ark-drawer-config .ark-config .chip-tam-grupo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ark-drawer-config .ark-config .price-block--drawer {
  position: sticky; top: -16px; z-index: 2;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.18);
}
.ark-drawer-config .ark-config .price-block--drawer.flash { animation: arkFlash 0.3s ease; }
.ark-drawer-config .ark-config .ark-prod-drawer-specs { margin: 0; }
.ark-drawer-config .ark-config .cart-row.ark-config-acoes { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--cor-cinza-100, #eee); }