/* =========================================================
   07-pagina-produto-configuravel.css
   Estilos exclusivos das páginas de produto configurável
   (ex: produto-cartao-visita.html).
   Não afeta index.html nem produtos.html.
   Compartilha tokens e componentes dos arquivos 00 e 01.

   Esta é a folha de estilo PADRÃO para qualquer produto
   configurável novo. Ao replicar para outro produto, a
   mesma folha serve — não crie uma cópia por produto.
========================================================= */


/* ── ESTRUTURA DA PÁGINA ── */

.pc-pagina {
  max-width: 1280px;
  margin: 68px auto 0;
  padding: 32px 24px 100px;
}

/* ── BOTÃO DE RETORNAR ──
   Fica acima do breadcrumb, em todas as páginas de produto
   configurável. Sempre aponta para a categoria do produto (link
   fixo, igual ao breadcrumb) — não usa o histórico do navegador,
   porque o cliente pode ter chegado direto por um link externo
   (WhatsApp, busca do Google) sem ter passado pela tela de
   categorias antes. */

.pc-retornar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--m);
  text-decoration: none;
  margin-bottom: 18px;
  transition: color var(--tr);
}
.pc-retornar:hover { color: var(--p); }
.pc-retornar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--tr);
}
.pc-retornar:hover svg { transform: translateX(-2px); }


.pc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--m);
  margin-bottom: 32px;
}
.pc-breadcrumb a {
  color: var(--m);
  text-decoration: none;
  transition: color var(--tr);
}
.pc-breadcrumb a:hover { color: var(--p); }
.pc-breadcrumb span[aria-current] { color: var(--h); font-weight: 600; }

.pc-corpo {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start;
}


/* ── COLUNA ESQUERDA: GALERIA + INFORMAÇÕES ── */

.pc-coluna-esquerda {
  position: sticky;
  top: 88px;
}

.pc-galeria-principal {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r3);
  background: var(--bg2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
}
.pc-galeria-placeholder {
  color: var(--m);
  font-size: .9rem;
  font-style: italic;
}

.pc-galeria-miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.pc-miniatura {
  width: 64px;
  height: 64px;
  border-radius: var(--r1);
  border: 2px solid transparent;
  background: var(--bg2);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--tr);
}
.pc-miniatura.ativa { border-color: var(--p); }
.pc-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-info-produto {
  margin-top: 32px;
}

.pc-kicker {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 8px;
}

.pc-titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--h);
  margin-bottom: 16px;
}

.pc-descricao {
  font-size: .96rem;
  line-height: 1.65;
  color: var(--b);
  max-width: 480px;
  margin-bottom: 24px;
}

.pc-caracteristicas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-caracteristicas li {
  position: relative;
  padding-left: 22px;
  font-size: .88rem;
  color: var(--b);
}
.pc-caracteristicas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac);
}

/* ── AVISO DE APENAS RETIRADA ──
   Usado em produtos com estrutura rígida (ex: Placa em Metalon),
   onde a Artegraf não realiza entrega nem instalação. Destaque
   visual de atenção, reutilizável por qualquer outro produto com
   a mesma restrição — basta repetir o mesmo bloco no HTML. */

.pc-aviso-retirada {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--r2);
  background: rgba(217, 119, 6, .08);
  border: 1px solid rgba(217, 119, 6, .25);
}
.pc-aviso-retirada svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: #d97706;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-aviso-retirada span {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--b);
}
.pc-aviso-retirada strong {
  color: var(--h);
}


/* ── COLUNA DIREITA: CONFIGURADOR ── */

.pc-configurador {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: var(--r3);
  padding: 32px;
  box-shadow: var(--s2);
}

.pc-config-titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--h);
  margin-bottom: 24px;
}

.pc-grupo {
  margin-bottom: 24px;
}

.pc-grupo-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--m);
  margin-bottom: 10px;
}

.pc-fixo {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--r1);
  background: var(--bg2);
  color: var(--b);
  font-size: .88rem;
  font-weight: 600;
}

.pc-grupo-sublabel {
  display: block;
  font-size: .78rem;
  color: var(--m);
  margin: -4px 0 12px;
}

/* ── CARDS DE FORMATO (com SVG ilustrando o corte) ──
   Padrão reutilizável: qualquer produto que precise mostrar a
   forma do corte (tags, adesivos com corte especial, etc.) usa
   a mesma estrutura .pc-formato-card, só troca o <svg> interno. */

.pc-formatos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Variante para grupos com muitas opções (ex: os 9 formatos de corte
   de Tag) — cards um pouco menores para caber mais por linha. */
/* ── CARD DE ACABAMENTO ÚNICO (não-clicável) ──
   Usado quando há só uma opção de acabamento, sem escolha (ex:
   Backdrop, que sempre vem com ilhós a cada 20cm). Reaproveita a
   aparência visual de .pc-formato-card, mas sem cursor de clique
   nem hover — é só ilustrativo, não interativo. */

.pc-formato-card-unico {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding: 14px 18px;
  border-radius: var(--r2);
  border: 1.5px solid var(--bd);
  background: var(--bg);
}
.pc-formato-card-unico .pc-formato-svg {
  width: 72px;
  height: 48px;
  flex-shrink: 0;
}
.pc-formato-card-unico span {
  font-size: .88rem;
  font-weight: 600;
  color: var(--b);
}

.pc-formatos-tag .pc-formato-card {
  width: 108px;
  padding: 12px 8px;
}
.pc-formatos-tag .pc-formato-svg {
  height: 70px;
}

.pc-formato-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 132px;
  padding: 16px 12px;
  border-radius: var(--r2);
  border: 1.5px solid var(--bd);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--tr), background var(--tr);
}
.pc-formato-card:hover { border-color: var(--p); }
.pc-formato-card.ativo {
  background: var(--pf);
  border-color: var(--p);
}

.pc-formato-svg {
  width: 100%;
  height: 56px;
}

/* Os SVGs reais (extraídos de arquivos CorelDRAW) usam path, line e
   circle — não só rect. Todos compartilham o mesmo tratamento visual. */
.pc-formato-svg rect,
.pc-formato-svg path,
.pc-formato-svg line,
.pc-formato-svg circle {
  fill: none;
  stroke: var(--m);
  stroke-width: var(--sw, 28);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--tr);
}
.pc-formato-card.ativo .pc-formato-svg rect,
.pc-formato-card.ativo .pc-formato-svg path,
.pc-formato-card.ativo .pc-formato-svg line,
.pc-formato-card.ativo .pc-formato-svg circle,
.pc-formato-card:hover .pc-formato-svg rect,
.pc-formato-card:hover .pc-formato-svg path,
.pc-formato-card:hover .pc-formato-svg line,
.pc-formato-card:hover .pc-formato-svg circle {
  stroke: var(--p);
}

/* SVGs de acabamento da Lona (ilhós) — os círculos representam os
   furos reforçados de fato, então ficam preenchidos (não vazados
   como o contorno genérico de .pc-formato-svg), só o retângulo da
   lona em si segue o padrão de contorno. */
.pc-formato-svg-lona circle {
  fill: var(--m);
  stroke: none;
}
.pc-formato-card.ativo .pc-formato-svg-lona circle,
.pc-formato-card:hover .pc-formato-svg-lona circle {
  fill: var(--p);
}

.pc-formato-card span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--b);
  text-align: center;
  line-height: 1.25;
}
.pc-formato-card.ativo span { color: var(--p); }

/* ── TRANSIÇÃO SUAVE AO TROCAR TAMANHO ──
   Quando o grupo "Tamanho" muda, o JS troca o conteúdo do grupo
   "Formato" (produto-tag.js, renderizarFormatos). As classes abaixo
   fazem essa troca com um fade + leve escala em vez de um corte seco.
   Reutilizável por qualquer grupo de formato dinâmico, não só Tag. */

.pc-formatos {
  transition: opacity .18s ease, transform .18s ease;
  opacity: 1;
  transform: scale(1);
}
.pc-formatos.saindo {
  opacity: 0;
  transform: scale(.97);
}
.pc-formatos.entrando {
  opacity: 0;
  transform: scale(.97);
}

/* ── PILLS (botões de seleção arredondados) ── */

.pc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center; /* impede que um pill mais alto estique os vizinhos */
}

.pc-pill {
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--b);
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color var(--tr), color var(--tr), background var(--tr);
}
.pc-pill:hover {
  border-color: var(--p);
  color: var(--p);
}
.pc-pill.ativo {
  background: var(--pf);
  border-color: var(--p);
  color: var(--p);
}

/* ── TAMANHO EM DESTAQUE: Padrão Acadêmico ABNT ──
   Pílula um pouco diferente das demais para se destacar de leve:
   formato mais "card" (cantos menos arredondados), borda na cor
   primária mesmo quando não selecionada, e o nome em cima da medida.
   O destaque vem da BORDA colorida — o fundo só é preenchido quando
   selecionada (regra .ativo acima), para não parecer já escolhida. */
.pc-pill-abnt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 16px;
  border-radius: 14px;
  border-color: var(--p);
  line-height: 1.15;
}
.pc-pill-abnt-nome {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p);
}
.pc-pill-abnt-med {
  font-size: .9rem;
  font-weight: 700;
  color: var(--h);
  transition: color var(--tr);
}
.pc-pill-abnt:hover .pc-pill-abnt-med,
.pc-pill-abnt.ativo .pc-pill-abnt-med {
  color: var(--p);
}

/* Pills de opcionais têm uma marca de "check" à esquerda */
.pc-pill-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pc-pill-check-marca {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--bd);
  flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr);
}
.pc-pill-check.ativo .pc-pill-check-marca {
  background: var(--p);
  border-color: var(--p);
}


/* ── RESUMO DO PEDIDO ── */

.pc-resumo {
  background: var(--bg2);
  border-radius: var(--r2);
  padding: 18px 20px;
  margin: 28px 0 20px;
}
.pc-resumo-titulo {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--m);
  margin-bottom: 10px;
}
.pc-resumo-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-resumo-lista li {
  font-size: .86rem;
  color: var(--h);
}


/* ── BOTÃO FINAL ── */

.pc-btn-finalizar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--r1);
  background: var(--wg);
  color: #fff;
  font-size: .96rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--tr);
}
.pc-btn-finalizar:hover { background: var(--wgh); }
.pc-btn-finalizar svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  flex-shrink: 0;
}

.pc-aviso {
  font-size: .76rem;
  color: var(--m);
  text-align: center;
  margin-top: 12px;
}


/* ── CAMPOS DE MEDIDA (largura × altura) ──
   Usado pela página de Lona (produto-lona.html), onde não há
   tamanho fixo em pills — o cliente digita a medida que precisa.
   Reutilizável por qualquer outro produto vendido por m². */

.pc-medidas {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.pc-medida-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pc-medida-campo span:first-child {
  font-size: .82rem;
  font-weight: 600;
  color: var(--b);
}

.pc-medida-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--bd);
  border-radius: var(--r1);
  background: var(--bg);
  padding: 0 14px;
  transition: border-color var(--tr);
}
.pc-medida-input:focus-within {
  border-color: var(--p);
}
.pc-medida-input input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 600;
  color: var(--h);
  padding: 11px 0;
  outline: none;
}
.pc-medida-unidade {
  font-size: .86rem;
  font-weight: 600;
  color: var(--m);
  padding-left: 8px;
}

.pc-medida-x {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--m);
  padding-bottom: 13px;
}

/* ── BOTÃO FINAL DESABILITADO ──
   Estado usado enquanto as medidas (largura/altura) não estão
   completas — o pedido não pode ser enviado sem essa informação. */

.pc-btn-finalizar.desabilitado {
  background: var(--bd);
  color: var(--m);
  cursor: not-allowed;
  pointer-events: none;
}
.pc-btn-finalizar.desabilitado svg {
  fill: var(--m);
}


/* ── CARDS DE ACABAMENTO COM FOTO REAL (.avif) ──
   Usado pelo Banner — em vez de SVG ilustrativo, mostra a foto
   real do tipo de fixação. Reutiliza a estrutura de .pc-formato-card,
   só troca o conteúdo interno (img em vez de svg). */

.pc-formatos-foto {
  gap: 16px;
}
.pc-formato-card-foto {
  width: 152px;
  padding: 10px;
  gap: 8px;
}
.pc-formato-card-foto img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--r1);
  background: #f4f4f5;
}

/* ── MEDIDA PERSONALIZADA (Banner) ──
   Bloco escondido por padrão (atributo "hidden" no HTML), revelado
   com uma transição suave quando "Personalizado" é selecionado no
   grupo Tamanho. Reaproveita .pc-medidas / .pc-medida-campo, já
   estilizados para produto-lona.html. */

.pc-grupo-personalizado {
  animation: pc-revelar .25s ease;
}
@keyframes pc-revelar {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ── GALERIA COMO RÉGUA (Tapete Capacho) ──
   Quando a "foto" do produto é, na verdade, a régua de medidas SVG
   (ainda não há fotos reais do capacho). Fundo levemente diferente
   do placeholder padrão, para não parecer um espaço vazio — aqui
   sempre tem o desenho da régua. */

.pc-galeria-principal-regua {
  padding: 24px;
}
.pc-medida-svg {
  width: 100%;
  height: 100%;
  color: var(--p);
}
.pc-medida-retangulo {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.pc-medida-linha {
  stroke: currentColor;
  stroke-width: 1.3;
}
.pc-medida-texto {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  fill: var(--h);
}

/* ── SELETOR DE COR EM BOLINHAS (Tapete Capacho) ──
   Cada bolinha usa a variável --cor-bolinha (definida inline no
   HTML via JS, uma por cor da paleta) como o próprio preenchimento
   — mais direto que criar uma classe CSS para cada uma das 13 cores. */

.pc-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pc-cor {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cor-bolinha);
  border: 2px solid var(--bd);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform var(--tr), border-color var(--tr);
}
.pc-cor:hover {
  transform: scale(1.1);
}
.pc-cor.ativo {
  border-color: var(--p);
  box-shadow: 0 0 0 2px var(--bg3), 0 0 0 4px var(--p);
}
/* Marca de check sobre a bolinha selecionada — cor do check se
   adapta ao brilho da bolinha (escura sobre cores claras, branca
   sobre cores escuras), via duas variantes e luminosidade aproximada
   calculada no JS (ver classe .pc-cor-clara). */
.pc-cor.ativo::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.pc-cor.ativo.pc-cor-clara::after {
  color: #1c1c1c;
  text-shadow: none;
}


/* ── RESPONSIVO: TABLET ── */

@media (max-width: 980px) {
  .pc-corpo {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pc-coluna-esquerda {
    position: static;
  }
}


/* ── RESPONSIVO: MOBILE ──
   Prioridade máxima — maioria dos clientes acessa via WhatsApp no celular. */

@media (max-width: 640px) {
  .pc-pagina {
    padding: 20px 16px 32px;
  }
  .pc-titulo {
    font-size: 1.9rem;
  }
  .pc-configurador {
    padding: 22px;
  }
  .pc-galeria-principal {
    aspect-ratio: 1/1;
    border-radius: var(--r2);
  }

  /* Botão final fica fixo no rodapé da tela no mobile,
     sempre acessível sem precisar rolar até o fim do formulário. */
  .pc-btn-finalizar {
    position: sticky;
    bottom: 12px;
    box-shadow: var(--s3);
  }
}