/*
 * Coluna de compra da página de produto (módulo 5 do redesenho, etapa 1: título, preço e códigos).
 * Template: Partials/pdp.details.template. Figma: computador 1418:8337 (coluna ao lado da foto); celular 1886:5558.
 * O preço é o HTML que a Linx monta no painel (Product.PriceDescription): .list-price, .discount, .condition e
 * .sale-price são classes dela. O CSS antigo (.priceContainer, no styles.css) esconde os rótulos e o "à vista … de
 * desconto" (com !important); aqui entra só o visual do Figma por cima, com os textos de hoje:
 * linha 1, o "De" riscado e o desconto em etiqueta lilás ("10% OFF", pelo Scripts/jv/pdp-preco.js); linha 2, as parcelas
 * em roxo; linha 3, "Ou R$ X à vista", sem o ícone do PIX (usuário, 16/10/2026).
 * Etapa 2 (15/10/2026): Guia de Medidas, gravação do par de alianças e o botão Comprar.
 * O seletor de aro e o cartão de aviso (joia indisponível e sob consulta) têm CSS próprio (pdp-aro.css e pdp-notice.css).
 */

.jv-pdp-buy__title {
  color: var(--jv-color-text);
}

.jv-pdp-price .priceContainer {
  flex-flow: row wrap;
  align-items: center;
  gap: var(--jv-space-2) var(--jv-space-3);
}

.jv-pdp-price .list-price {
  order: 1;
  color: var(--jv-color-price-old);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
}

.jv-pdp-price .discount {
  order: 2;
  padding: var(--jv-space-1) var(--jv-space-2);
  border-radius: var(--jv-radius-sm);
  background: var(--jv-color-accent);
  color: var(--jv-color-on-accent);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
}

.jv-pdp-price .condition {
  order: 3;
  flex-basis: 100%;
  color: var(--jv-color-price);
  font-size: var(--jv-size-price);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-price .sale-price {
  order: 4;
  flex-basis: 100%;
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-tight);
}

/* "Ou R$ X à vista" no lugar do ícone do PIX (usuário, 16/10/2026: no cartão à vista o desconto é menor, e o usuário
   aceitou o risco). Até o Scripts/jv/pdp-preco.js rodar, o "Ou " vem do CSS antigo (::before) e o " à vista" entra aqui
   (::after). O script escreve os dois como texto e põe as parcelas antes do à vista no HTML, para a seleção de texto
   seguir a tela (usuário, 18/10/2026); depois marca o bloco com data-jv-preco-texto, e o texto do CSS sai. Os order
   acima ficam para a primeira pintura. */
.jv-pdp-price .sale-price svg {
  display: none;
}

.jv-pdp-price:not([data-jv-preco-texto]) .sale-price > span::after {
  content: " à vista";
}

.jv-pdp-price[data-jv-preco-texto] .sale-price span::before {
  content: none;
}

/* Códigos no fim da coluna, como no Figma: rótulos curtos em cinza. */
.jv-pdp-buy__codes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jv-space-2) var(--jv-space-6);
  color: var(--jv-color-text-muted);
  font-size: var(--jv-size-label);
}

/* Aro e Guia de Medidas. O rótulo do aro já sobra 6px embaixo do botão (área de toque), então o espaço aqui é pequeno. */
.jv-pdp-buy__options {
  display: flex;
  flex-direction: column;
}

/* Par de alianças: cada aliança com o aro e a gravação. Entre o aro e a gravação, 18px visíveis (12 + os 6 da área de
   toque do aro; o usuário achou colado, 15/10/2026); entre uma aliança e outra, mais, para os pares não se misturarem. */
.jv-pdp-buy__ring + .jv-pdp-buy__ring {
  margin-block-start: var(--jv-space-6);
}

.jv-pdp-aro + .jv-pdp-buy__engraving {
  margin-block-start: var(--jv-space-3);
}

.jv-pdp-buy__engraving {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-2);
  margin: 0;
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-tight);
}

/* "Aliança A" e "Aliança B" no roxo de hoje. */
.jv-pdp-buy__engraving strong {
  color: var(--jv-color-brand);
  font-weight: var(--jv-weight-bold);
}

/* As duas classes porque o input[type="text"] do CSS antigo pesa mais que uma. 16px: com menos, o iPhone dá zoom. */
.jv-pdp-buy__engraving .jv-pdp-buy__input {
  inline-size: 100%;
  max-inline-size: var(--jv-size-button-max);
  min-block-size: var(--jv-touch-min);
  margin: 0;
  padding: 0 var(--jv-space-3);
  border: var(--jv-border-thin) solid var(--jv-color-border);
  border-radius: var(--jv-radius-sm);
  background: var(--jv-color-surface);
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
}

/* Guia de Medidas no azul informativo do Figma. O Figma usa 12px; aqui 14, a legenda curta da regra de 15/10.
   24px de altura: a área de toque mínima de um link solto (WCAG 2.5.8). */
.jv-pdp-buy__guide {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  column-gap: 0.25em;
  min-block-size: var(--jv-space-6);
  color: var(--jv-color-info);
  font-size: var(--jv-size-label);
  line-height: var(--jv-leading-tight);
  text-decoration: none;
}

.jv-pdp-buy__ring + .jv-pdp-buy__guide {
  margin-block-start: var(--jv-space-2);
}

.jv-pdp-buy__guide:hover {
  color: var(--jv-color-info);
  text-decoration: underline;
}

/* Botões de compra (Figma "BUTTON-ICON_LEFT"): verde com texto escuro e o ícone de carrinho; lilás no hover.
   Na largura toda no celular; no computador, até 345px, como o componente do Figma. */
.jv-pdp-buy__actions {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-3);
}

.jv-pdp-buy__button {
  position: relative; /* a rodinha de carregamento do CSS antigo (body.adding) fica por cima do botão */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jv-space-1);
  inline-size: 100%;
  min-block-size: var(--jv-touch-min);
  margin: 0;
  padding: var(--jv-space-3) var(--jv-space-6);
  border: 0;
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  text-align: center;
  transition: background-color var(--jv-duration-fast) var(--jv-ease), color var(--jv-duration-fast) var(--jv-ease);
}

.jv-pdp-buy__button-icon {
  flex: none;
}

@media (hover: hover) {
  .jv-pdp-buy__button:hover {
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

/* Variação esgotada: o product.js põe .unavailable no body; saem preço, aro e Comprar, e entra o cartão do Avise-me
   (Partials/jv/pdp-notify). Na joia toda esgotada, o próprio template já não mostra nada disso. */
body.unavailable .jv-pdp-price,
body.unavailable .jv-pdp-buy__options,
body.unavailable .jv-pdp-buy__button.add-to-cart {
  display: none;
}

@media (min-width: 1024px) {
  .jv-pdp-buy__actions {
    margin-block-start: var(--jv-space-4);
  }

  .jv-pdp-buy__button {
    max-inline-size: var(--jv-size-button-max);
  }
}