/* Evolury Variation Grid — estilos próprios, independentes do tema.
   Cores via custom properties com fallback (o tema PODE sobrescrever
   --evg-accent, mas não é obrigatório). */
.evg {
  --evg-accent: var(--evo-accent, var(--evolury-accent, #013f6e));
  --evg-border: #e9edf2;
  --evg-header-bg: #f8fafc;
  --evg-zebra: #f9fafb;
  --evg-muted: #64748b;
  margin: 1.5rem 0;
}
/* Card único "MONTE SUA GRADE": título + matriz, calmo e neutro (acento fica
   só no rodapé/preço). Inspirado no padrão de grade de atacado do mercado. */
.evg__panel {
  border: 1px solid var(--evg-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 36px -20px rgba(15, 23, 42, .16);
  /* Query container: o rodapé adapta-se à largura da COLUNA (não da viewport),
     que é o que de fato condiciona o layout total+CTA. Ver .evg__foot. */
  container-type: inline-size;
}
.evg__title {
  margin: 0;
  padding: .95rem 1.25rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #334155;
  border-bottom: 1px solid var(--evg-border);
}
.evg__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Região rolável focável (rolagem por teclado); outline só via teclado. */
.evg__scroll:focus-visible { outline: 2px solid var(--evg-accent, #2271b1); outline-offset: -2px; }

/* Affordance de rolagem (issue #35): fade sutil na(s) lateral(is) que ainda têm
   colunas. Os offsets são medidos pelo JS (initScrollAffordance) e chegam por
   CSS vars: o fade esquerdo começa DEPOIS da coluna fixa (.evg-rowhead sticky)
   e ambos começam ABAIXO do cabeçalho (e param antes do padding inferior da
   grade fechada). pointer-events:none — puro indício visual. */
.evg__scrollwrap { position: relative; }
.evg__scrollwrap::before,
.evg__scrollwrap::after {
  content: "";
  position: absolute;
  top: var(--evg-fade-top, 0px);
  bottom: var(--evg-fade-bottom, 0px);
  width: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 3;
}
.evg__scrollwrap::before {
  left: var(--evg-fade-left, 0px);
  background: linear-gradient(90deg, rgba(15, 23, 42, .09), rgba(15, 23, 42, 0));
}
.evg__scrollwrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(15, 23, 42, .09), rgba(15, 23, 42, 0));
}
.evg__scrollwrap.has-left::before { opacity: 1; }
.evg__scrollwrap.has-right::after { opacity: 1; }

.evg-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
  border: 0;
}
.evg-grid th,
.evg-grid td {
  border: 1px solid var(--evg-border);
  padding: .8rem .7rem;
  text-align: center;
  vertical-align: middle;
}
/* Sem borda externa — o card emoldura. */
.evg-grid tr > *:first-child { border-left: 0; }
.evg-grid tr > *:last-child { border-right: 0; }
.evg-grid thead th { border-top: 0; }
.evg-grid tbody tr:last-child > * { border-bottom: 0; }

.evg-grid thead th {
  background: var(--evg-header-bg);
  color: #1d2327;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
}
/* Zebra: linhas pares em cinza muito claro (escaneabilidade). */
.evg-grid tbody tr:nth-child(even) > th,
.evg-grid tbody tr:nth-child(even) > td { background: var(--evg-zebra); }
.evg-rowhead {
  background: #fff;
  font-weight: 700;
  color: #1d2327;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
}
.evg-grid tbody tr:nth-child(even) > .evg-rowhead { background: var(--evg-zebra); }
/* Canto vazio (sem rótulos Cor/Tamanho — confundiam). */
.evg-corner { background: var(--evg-header-bg); }

/* Foto da variação no cabeçalho do eixo de cor (com fallback pro nome).

   A PROPORÇÃO vem da loja, não daqui: `--evo-img-aspect` é o token único do tema
   para o formato das imagens de produto (1:1 / 3:4 / 2:3 / 4:3, responsivo por
   device) — o mesmo que rege o card do loop e a galeria da PDP. Antes eram
   52×52 fixos: numa loja em 3:4 a foto aparecia quadrada, contrariando a própria
   configuração.

   Soft-couple com fallback, igual ao `--evo-accent`: sem o tema definir, cai
   em 1/1 e segue funcionando em qualquer tema.

   `object-fit: cover` é deliberado e espelha o card do tema ("corte visual via
   object-fit, sem regenerar thumbnails"): com a caixa na proporção da loja não há
   corte perceptível, e quando a loja escolhe formato diferente do da foto, o corte
   é a decisão dela. O `gallery_fit` (contain/cover) NÃO se aplica aqui — é
   escopado à galeria da PDP. */
.evg-axis-photo {
  display: block;
  width: var(--evg-axis-photo-w, 52px);
  /* PISO DE LARGURA (#317) — sem ele a foto colapsa para 4px.

     Medido no produto SKU 25040: as fotos renderizavam como pontos de 4x6px,
     presentes e com HTTP 200, visualmente indistinguíveis de erro. O `width` acima
     não bastava porque a página tem uma regra global de imagem responsiva
     (`img { max-width: 100% }`) que VENCE — em CSS o `max-width` sempre limita o
     `width`. Sem piso, a foto aceita o que a célula der, e a tabela é
     `table-layout: auto` com `min-width: 90px` nas colunas de tamanho: 6 delas
     tomavam 540 dos 567px, sobravam 27px para a coluna da cor.

     Pior no desktop (4px) que no mobile (18px): com mais espaço a tabela distribui
     mais para as colunas de tamanho, e a da cor não tinha piso.

     `min-width` e NÃO `max-width: none`: medido que `max-width: none` sem
     `!important` não resolve, a regra global continua vencendo. Já o mínimo é
     aplicado DEPOIS do máximo na cascata, então vence qualquer `max-width` sem
     precisar de `!important` e sem depender de ordem de carregamento.

     Verificado a 390px e 1440px: 4px -> 52px; a grade segue rolando na horizontal
     e a PÁGINA não passa a rolar. */
  min-width: var(--evg-axis-photo-w, 52px);
  height: auto;
  aspect-ratio: var(--evo-img-aspect, 1 / 1);
  margin: 0 auto;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
}
/* No cabeçalho de LINHA (cor como eixo de linha) a foto também centraliza:
   margens laterais auto centram o bloco mesmo com a célula em text-align:left,
   sem afetar o fallback de nome (texto), que segue à esquerda. */
.evg-rowhead .evg-axis-photo { margin: 0 auto; }

/* SWATCH DO ATRIBUTO no cabeçalho (mu#572) — a amostra cadastrada UMA vez por
   valor, em Produtos → Atributos, e reusada pela loja inteira.

   Ocupa o MESMO slot da foto (`--evg-axis-photo-w`, 52px), com o mesmo piso de
   largura pelo mesmo motivo (#317): a regra global `img { max-width: 100% }`
   venceria o `width` e a coluna colapsaria. Acima dos 24×24px que a WCAG 2.5.8
   pede como alvo mínimo — aqui não é alvo (o cabeçalho não é controle), mas o
   tamanho também é o que torna a amostra legível.

   FORMA POR TIPO: círculo para COR (é uma amostra de tinta, como no seletor de
   variações e na previsibilidade) e quadrado arredondado para IMAGEM (é um
   recorte de estampa/tecido, e o quadrado mostra mais do padrão). */
.evg-axis-swatch {
  display: block;
  width: var(--evg-axis-photo-w, 52px);
  min-width: var(--evg-axis-photo-w, 52px);
  height: var(--evg-axis-photo-w, 52px);
  margin: 0 auto;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
}
.evg-axis-swatch--color { border-radius: 999px; }
.evg-axis-swatch--image {
  height: auto;
  aspect-ratio: var(--evo-img-aspect, 1 / 1);
  object-fit: cover;
  border-radius: 10px;
}

.evg-cell { min-width: 90px; transition: background .12s ease; }
/* Preenchida (qty>0, classe via grid.js) / em foco: realce SUTIL (calmo). A
   especificidade `.evg-grid td.evg-cell--filled` vence a zebra das linhas pares. */
.evg-grid td.evg-cell--filled { background: color-mix(in srgb, var(--evg-accent) 5%, #fff); }
.evg-grid td.evg-cell:focus-within { background: color-mix(in srgb, var(--evg-accent) 5%, #fff); }
.evg-cell .evg-qty {
  width: 100%;
  max-width: 76px;
  padding: .45rem .35rem;
  text-align: center;
  border: 1.5px solid #dfe5ec;
  border-radius: 8px;
  background: #fff;
  font-size: .92rem;
  font-weight: 600;
  color: #1d2327;
  transition: border-color .12s ease, box-shadow .12s ease;
  /* Setas (spinner) sempre visíveis — antes ficava `textfield`, que as escondia. */
  appearance: auto;
  -moz-appearance: number-input;
}
.evg-cell .evg-qty:hover { border-color: #c2ccd8; }
.evg-cell--filled .evg-qty { border-color: var(--evg-accent); }
/* Chrome/WebKit: o spinner some fora do hover por padrão — força sempre visível. */
.evg-cell .evg-qty::-webkit-outer-spin-button,
.evg-cell .evg-qty::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  appearance: inner-spin-button;
  opacity: 1;
}
.evg-cell .evg-qty:focus {
  outline: none;
  border-color: var(--evg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--evg-accent) 22%, transparent);
}
.evg-cell__price { display: block; font-size: .75rem; color: var(--evg-muted); margin-top: .25rem; }
.evg-cell__stock { display: block; font-size: .68rem; color: var(--evg-muted); }
.evg-cell__pricecol { white-space: nowrap; }
.evg-cell--empty { color: var(--evg-muted); background: rgba(0, 0, 0, .02); }
.evg-cell--out { color: var(--evg-muted); background: rgba(0, 0, 0, .04); font-size: .75rem; }

.evg-grid--list .evg-rowhead,
.evg-grid--flat .evg-rowhead { width: auto; }
.evg-grid--flat td { text-align: left; }

/* Rodapé da compra. EMPILHADO por padrão (resumo em cima, CTA full-width
   embaixo) — layout à prova de quebra, independe da largura. Quando a COLUNA é
   larga o bastante (container query abaixo), vira lado a lado (total à esquerda,
   CTA à direita). Antes era flex-wrap gateado por @media de VIEWPORT: numa coluna
   estreita de desktop (PDP/quick view), o total grande empurrava o botão pra 2ª
   linha — a viewport "larga" não enxergava a coluna estreita. */
.evg__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .9rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.evg__totals { font-size: .95rem; font-weight: 500; color: var(--evg-muted, #555); }
.evg__totals [data-evg-units] { color: #1d2327; font-weight: 700; }
.evg__totals [data-evg-price] {
  color: var(--evg-accent);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.evg__add {
  appearance: none;
  width: 100%;
  background: var(--evg-accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .85rem 1.8rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--evg-accent) 32%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}
.evg__add:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--evg-accent) 42%, transparent);
}
.evg__add:active:not(:disabled) { transform: translateY(0); box-shadow: 0 3px 10px color-mix(in srgb, var(--evg-accent) 32%, transparent); }
.evg__add:focus-visible { outline: 2px solid var(--evg-accent); outline-offset: 3px; }
.evg__add:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.evg__add.is-loading { opacity: .7; pointer-events: none; }
.evg__msg {
  /* order:-1 + flex-basis:100% → a mensagem ocupa uma linha própria no TOPO do
     rodapé, ACIMA da linha de total+botão. Avisos de estoque ("você já tem N no
     carrinho") e o sucesso aparecem em contexto, junto da ação de compra. */
  order: -1;
  flex-basis: 100%;
  font-size: .9rem;
  padding: .6rem .8rem;
  border-radius: 6px;
  background: rgba(4, 120, 87, .1);
  color: #047857;
}
.evg__msg.is-error { background: rgba(185, 28, 28, .1); color: #b91c1c; }
.evg__msg a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Coluna larga o bastante → total e CTA LADO A LADO. Sem quebra possível: o
   total ocupa o espaço livre e, no pior caso, quebra internamente em 2 linhas;
   o botão tem largura natural, nunca encolhe (flex:0 0 auto) nem pula de linha
   (nowrap). Threshold ~34rem comporta "Total: 999 unidades · R$ 99.999,99" + CTA
   com folga; abaixo disso segue empilhado (CTA full-width). */
@container (min-width: 34rem) {
  .evg__foot {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }
  .evg__totals { flex: 1 1 auto; min-width: 0; }
  .evg__add { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 600px) {
  .evg-cell { min-width: 64px; }
  /* font-size >= 16px evita o autozoom do iOS Safari ao focar o input. */
  .evg-cell .evg-qty { max-width: 60px; font-size: 16px; }
}

/* ============================================================================
 * Modo "grade fechada" (kit pré-montado).
 * Reaproveita o esqueleto da grade aberta (.evg-grid, .evg-cell, .evg__foot).
 * Diferenças visuais: célula travada com badge "N un", picker de "quantidade de
 * grades" acima da matriz, estado indisponível quando estoque insuficiente.
 * ============================================================================ */
.evg--closed .evg-closed-picker {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.2rem;
  /* Inset dentro do painel: respiro do título (topo), das bordas laterais e da
     grade (embaixo). A folga inferior é PRÓPRIA — antes era delegada ao
     `padding-top` do `.evg__scroll`, que só existe no modo MATRIZ; nos modos
     lista/flat o picker encostava na grade (#205). Folga própria = qualquer
     layout futuro sem aquele wrapper não reintroduz o bug. */
  margin: 1.25rem 1.25rem 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--evg-accent) 8%, #fff), color-mix(in srgb, var(--evg-accent) 4%, #fff));
  border: 1px solid color-mix(in srgb, var(--evg-accent) 22%, transparent);
  border-radius: 14px;
}
/* Grade (matriz travada) inset, alinhada ao picker — fecha o "card dentro do
   card" com respiro uniforme nas laterais e embaixo. */
.evg--closed .evg__scroll {
  padding: 1rem 1.25rem 1.25rem;
}
/* Modos LISTA e FLAT não têm o wrapper `.evg__scroll` (ele existe só na matriz 2D,
   onde há rolagem horizontal), então o inset vem direto na tabela — senão a grade
   vai de borda a borda enquanto o picker fica inset (#205).
   Optamos por CSS em vez de envolver essas tabelas no wrapper porque o
   `.evg__scroll` carrega `tabindex="0" role="region" aria-label="…rolagem
   horizontal"`: numa lista sem overflow isso criaria uma região focável com
   rótulo enganoso (regressão de acessibilidade). */
.evg--closed .evg-grid--list,
.evg--closed .evg-grid--flat {
  width: calc(100% - 2.5rem);
  margin: 0 1.25rem 1.25rem;
}
.evg-closed-picker__label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--evg-accent);
}
.evg-closed-picker__input {
  width: 88px;
  padding: .55rem .7rem;
  border: 1.5px solid color-mix(in srgb, var(--evg-accent) 25%, var(--evg-border));
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: #fff;
}
.evg-closed-picker__input:focus {
  outline: none;
  border-color: var(--evg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--evg-accent) 22%, transparent);
}
.evg-closed-picker__input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: #f4f4f5;
}
.evg-closed-picker__hint {
  font-size: .85rem;
  color: #71717a;
  margin-left: auto;
}

/* Célula travada — sem input, com badge */
.evg-grid--locked .evg-cell--locked {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: .7rem .5rem;
  background: color-mix(in srgb, var(--evg-accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--evg-accent) 16%, transparent);
  min-width: 76px;
}
.evg-grid--locked .evg-cell--locked .evg-cell__badge {
  display: inline-block;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--evg-accent);
  line-height: 1;
  letter-spacing: -.02em;
}
.evg-grid--locked .evg-cell--locked .evg-cell__price {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: #3f3f46;
}
.evg-grid--locked .evg-cell--locked .evg-cell__hint {
  display: block;
  margin-top: .25rem;
  font-size: .7rem;
  font-weight: 600;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.evg-grid--locked .evg-cell--locked.evg-cell--out {
  background: rgba(185, 28, 28, .06);
  border-color: rgba(185, 28, 28, .25);
}
.evg-grid--locked .evg-cell--locked.evg-cell--out .evg-cell__badge {
  color: #b91c1c;
  text-decoration: line-through;
}

/* Mensagem de indisponível (substitui o botão quando sem estoque) */
.evg__msg--unavailable {
  background: rgba(185, 28, 28, .08);
  color: #b91c1c;
  border-radius: 6px;
  padding: .6rem .8rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  /* Folga inferior própria também aqui (mesma razão do desktop — #205). */
  .evg--closed .evg-closed-picker { padding: .85rem 1rem; margin: 1rem 1rem .85rem; }
  .evg--closed .evg__scroll { padding: .85rem 1rem 1rem; }
  .evg--closed .evg-grid--list,
  .evg--closed .evg-grid--flat { width: calc(100% - 2rem); margin: 0 1rem 1rem; }
  .evg-closed-picker__hint { width: 100%; margin-left: 0; }
}


/* ── Previsão de cores (mu#544): o atributo que o cliente NÃO escolhe ───────
 * Vive dentro do card da grade, entre a matriz e o rodapé. Os swatches são
 * INERTES de propósito (span, sem cursor, sem hover de seleção): aqui não há
 * escolha, e um controle que parece clicável e não é seria pior que texto. */
.evg-forecast-box {
	/* INSET igual ao da matriz (1.25rem no desktop, 1rem no mobile — ver a regra
	 * da grade fechada acima): o `.evg__panel` tem padding 0 e cada peça traz o
	 * seu respiro. Sem isto o bloco ia de borda a borda enquanto a tabela ficava
	 * inset, e o card ficava com duas margens diferentes (o mesmo defeito da
	 * #205, agora na previsão). */
	margin: 1rem 1.25rem 1.25rem;
	padding: .9rem 0 0;
	border-top: 1px solid var(--evg-border, rgba(0, 0, 0, .08));
}
.evg-forecast-box__block + .evg-forecast-box__block { margin-top: .9rem; }
.evg-forecast-box__title {
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--evg-muted, #52525b);
}
.evg-forecast-box__items {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}
.evg-forecast-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: default;
}
/* Cor: círculo, mesma medida do seletor de variações do tema. */
.evg-forecast-box__items--color .evg-forecast-swatch {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .15);
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
/* Botão/texto: chip com o nome. */
.evg-forecast-swatch--label,
.evg-forecast-swatch--text {
	padding: .25rem .6rem;
	border: 1px solid var(--evg-border, rgba(0, 0, 0, .15));
	border-radius: .35rem;
	font-size: .82rem;
	line-height: 1.3;
	color: var(--evg-text, #27272a);
	background: var(--evg-surface, #fff);
}
.evg-forecast-box__items--pill .evg-forecast-swatch--label { border-radius: 999px; }
/* Em falta agora: continua na lista (o cliente vê que existe), riscado. */
.evg-forecast-swatch.is-unavailable { opacity: .45; }
.evg-forecast-swatch--label.is-unavailable,
.evg-forecast-swatch--text.is-unavailable { text-decoration: line-through; }
.evg-forecast-box__items--color .evg-forecast-swatch.is-unavailable {
	position: relative;
	overflow: hidden;
}
.evg-forecast-box__items--color .evg-forecast-swatch.is-unavailable::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(0, 0, 0, .55) 50%, transparent calc(50% + 1px));
}
/* O aviso: cinza, pequeno, sem competir com o preço/CTA. */
.evg-forecast-box__note {
	margin: .5rem 0 0;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--evg-muted, #71717a);
}
.evg-forecast-box__note a { color: inherit; text-decoration: underline; }
.evg-forecast-box__note a:hover { color: var(--evg-accent, #0c91eb); }
/* ⓘ no cabeçalho do eixo, quando o atributo previsto também é eixo. */
.evg-forecast-hint {
	display: inline-flex;
	vertical-align: middle;
	margin-left: .2rem;
	color: var(--evg-muted, #71717a);
	text-decoration: none;
}
.evg-forecast-hint:hover { color: var(--evg-accent, #0c91eb); }
@media (max-width: 600px) {
	.evg-forecast-box { margin: .85rem 1rem 1rem; }
}