/* Card lateral: foto quadrada à esquerda | código, tipo e dados elétricos à direita. */
.catalog-grid--lateral {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* O card se ajusta à própria largura (container query), não à da tela. */
.pcard--lateral {
  display: block;
  container-type: inline-size;
}

.pcard--lateral .pcard-product-link {
  /* Altura do card; a foto usa a mesma medida na largura (área quadrada). */
  --lateral-h: 184px;
  --lateral-pad: 16px;
  --pcard-info-pad-l: var(--lateral-pad);
  --pcard-info-pad-r: var(--lateral-pad);
  display: grid;
  grid-template-columns: var(--lateral-photo, var(--lateral-h)) minmax(0, 1fr);
  height: var(--lateral-h);
}

/* ---------- Foto: encostada à esquerda, preenchendo toda a área ---------- */
.pcard--lateral .pcard-img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-right: 1px solid var(--color-border);
}

/* O 1% a mais evita frestas do fundo durante o hover (mesmo ajuste dos outros cards). */
.pcard--lateral .pcard-img img {
  padding: 0;
  object-fit: cover;
  transform: translate(var(--product-image-x, 0), var(--product-image-y, 0)) scale(calc(var(--product-image-scale, 1) * 1.01));
}

@media (hover: hover) {
  .pcard--lateral:hover .pcard-img img {
    transform: translate(var(--product-image-x, 0), var(--product-image-y, 0)) scale(calc(var(--product-image-scale, 1) * 1.035));
  }
}

/* ---------- Informações: código, tarja e dados elétricos centralizados,
   com o mesmo espaço entre eles (mesma leitura do card vertical) ---------- */
.pcard--lateral .pcard-info {
  justify-content: space-evenly;
  align-items: center;
  padding: 0 var(--lateral-pad);
  text-align: center;
}

.pcard--lateral .pcard-code {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.pcard--lateral .pcard-type {
  margin-top: 0;
}

/* Tensão e corrente/dentes lado a lado, divisor no centro. */
.pcard--lateral .pcard-colors-section.pcard-spec-section {
  --spec-gap: 10px;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.pcard--lateral .pcard-spec-chip {
  gap: 7px;
}

.pcard--lateral .pcard-spec-icon {
  width: 22px;
  height: 22px;
}

.pcard--lateral .pcard-spec-icon svg {
  width: 11px;
  height: 11px;
}

.pcard--lateral .pcard-spec-label {
  font-size: 8.5px;
  letter-spacing: .04em;
}

.pcard--lateral .pcard-spec-value {
  font-size: 13.5px;
}

/* ---------- Favorito no canto superior direito; vídeo logo abaixo ---------- */
.pcard--lateral .pcard-fav {
  top: 12px;
  right: 12px;
  left: auto;
}

/* ---------- Card estreito: foto até 40% da largura, informações alinhadas à
   esquerda (longe do favorito) e dados elétricos no tamanho do conteúdo ---------- */
@container (max-width: 429px) {
  .pcard--lateral .pcard-product-link {
    --lateral-h: 150px;
    --lateral-pad: 14px;
    --lateral-photo: min(var(--lateral-h), 40cqi);
  }

  .pcard--lateral .pcard-info {
    align-items: stretch;
    text-align: left;
  }

  .pcard--lateral .pcard-code {
    align-self: flex-start;
    font-size: 23px;
  }

  .pcard--lateral .pcard-type {
    min-height: 32px;
    padding-block: 6px;
  }

  /* Duas metades iguais, divisor no centro e cada dado centralizado na sua metade. */
  .pcard--lateral .pcard-colors-section.pcard-spec-section {
    --spec-gap: 4px;
  }

  .pcard--lateral .pcard-spec-chip {
    gap: 6px;
  }
}

/* ---------- Card bem estreito (celular): tensão e corrente/dentes empilhadas ---------- */
@container (max-width: 339px) {
  .pcard--lateral .pcard-code {
    font-size: clamp(18px, 6.6cqi, 21px);
  }

  .pcard--lateral .pcard-colors-section.pcard-spec-section {
    grid-auto-flow: row;
    justify-content: stretch;
    row-gap: 6px;
  }

  .pcard--lateral .pcard-spec-chip,
  .pcard--lateral .pcard-spec-chip:first-child,
  .pcard--lateral .pcard-spec-chip:last-child {
    justify-content: center;
    padding-inline: 0;
  }

  .pcard--lateral .pcard-spec-chip + .pcard-spec-chip {
    padding-top: 6px;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .pcard--lateral .pcard-spec-text {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
}

@media (max-width: 1280px) {
  .catalog-grid--lateral {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}