/*
 * Ilustração própria da peça (js/pecas/ilustracao-peca.js): desenho técnico em traço fino, tudo por
 * token (os dois temas trocam sozinhos), um acento só (LED e filete da tampa). Entra no cartão e na
 * PDP quando a peça não tem foto real, com o rótulo "Ilustração" ou "Ilustração fora de escala".
 * Sem movimento nenhum.
 */
@layer paginas {
  .il-peca {
    display: block;
    width: 100%;
    height: 100%;
  }

  .il-substrato,
  .il-corpo,
  .il-tapete {
    fill: var(--color-surface);
    stroke: var(--color-border-control);
    stroke-width: 2;
  }

  .il-tampa,
  .il-dissipador,
  .il-etiqueta {
    fill: var(--color-surface-2);
    stroke: var(--color-border-control);
    stroke-width: 1.5;
  }

  .il-tampa--intel-core-ultra {
    stroke: var(--color-accent);
  }

  .il-tampa--amd-ryzen {
    stroke: var(--color-fg-muted);
  }

  .il-chip {
    fill: var(--color-fg-muted);
    opacity: 0.55;
  }

  .il-contato,
  .il-conector {
    fill: var(--color-fg-muted);
    opacity: 0.7;
  }

  .il-suporte {
    fill: var(--color-surface-2);
    stroke: var(--color-border-control);
    stroke-width: 1.5;
  }

  .il-marca {
    fill: var(--color-fg-muted);
  }

  .il-traco,
  .il-ventoinha,
  .il-costura {
    fill: none;
    stroke: var(--color-border-control);
    stroke-linecap: round;
    stroke-width: 1.5;
  }

  .il-costura {
    stroke-dasharray: 4 4;
  }

  .il-tecla {
    fill: var(--color-surface-2);
    stroke: var(--color-border);
    stroke-width: 1;
  }

  .il-arco,
  .il-cabo {
    fill: none;
    stroke: var(--color-border-control);
    stroke-linecap: round;
    stroke-width: 5;
  }

  .il-cabo {
    stroke-width: 3.5;
  }

  .il-led {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
  }

  .il-texto {
    fill: var(--color-fg-muted);
    font-family: var(--font-mono);
  }

  /* Cartão: o quadro é o mesmo da foto, mas com fundo do tema (desenho, não foto). */
  .cartao-produto__foto--ilustracao {
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background-color: var(--color-bg-muted);
  }

  .cartao-produto__ilustracao {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-2);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  /* PDP. */
  .produto__visual--ilustracao .produto__ilustracao {
    height: 20rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-muted);
  }
}