/*
 * Compre Junto (Partials/jv/pdp-upsell.template), entre as abas e o "Selecionados para você". Figma: computador 1483:5894,
 * celular 1887:5678. As joias passam com o dedo, com o "+" lilás entre elas, e o quadro "Leve os N" vem na mesma linha,
 * depois da última, também no celular (usuário, 16/10/2026; no Figma do celular ficava embaixo). O cartão de cada joia é o
 * de hoje (product.line.template, com o CSS antigo).
 * Quadro (PRODUCT-COMPRE JUNTO, 1483:5893): fundo cinza (BACKGROUND GRAY) com a faixa roxa da sacola, "Leve os N" e as
 * parcelas em roxo, o "De" riscado, o "Economize" em etiqueta lilás e o Comprar Junto verde saindo pela borda de baixo.
 * No Figma, "Leve os 3" e as parcelas têm 32px; aqui ficam no tamanho do preço da coluna (24 no celular, 28 no
 * computador), para os valores reais caberem nos 335px do quadro.
 */

/* A mesma largura e o mesmo respiro do "Selecionados" (pdp-related.css). */
.jv-pdp-upsell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-4);
  inline-size: 100%;
  max-inline-size: var(--jv-size-container);
  margin-inline: auto;
  margin-block-start: var(--jv-space-8);
  padding: 0 var(--jv-space-4) var(--jv-space-8);
}

/* Celular: título em cima e a frase embaixo, centralizados, como no "Selecionados" (usuário, 15/10/2026). */
.jv-pdp-upsell__head {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-2);
  text-align: center;
}

.jv-pdp-upsell__title {
  margin: 0;
  color: var(--jv-color-brand);
}

.jv-pdp-upsell__eyebrow {
  margin: 0;
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

.jv-pdp-upsell__eyebrow strong {
  color: var(--jv-color-brand);
  font-weight: var(--jv-weight-bold);
}

/* Joias lado a lado, passando com o dedo (scroll-snap), como no "Selecionados": no celular, até a borda da tela (a
   margem negativa desfaz o respiro da seção). */
.jv-pdp-upsell__list {
  display: flex;
  align-items: flex-start;
  gap: var(--jv-space-2);
  margin: 0 calc(-1 * var(--jv-space-4));
  padding: var(--jv-space-1) var(--jv-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--jv-space-4);
  scrollbar-width: none;
  list-style: none;
}

.jv-pdp-upsell__list::-webkit-scrollbar {
  display: none;
}

.jv-pdp-upsell__item {
  flex: 0 0 var(--jv-size-pdp-card);
  min-inline-size: 0;
  scroll-snap-align: start;
}

/* "+" na altura do meio da foto, que é quadrada e tem a largura do cartão. */
.jv-pdp-upsell__plus {
  display: flex;
  flex: none;
  margin-block-start: calc(var(--jv-size-pdp-card) / 2 - var(--jv-size-pdp-upsell-icon) / 2);
  color: var(--jv-color-accent);
}

.jv-pdp-upsell__plus-icon {
  inline-size: var(--jv-size-pdp-upsell-icon);
  block-size: var(--jv-size-pdp-upsell-icon);
}

.jv-pdp-upsell__offer[hidden],
.jv-pdp-upsell__save[hidden],
.jv-pdp-upsell__copy[hidden] {
  display: none;
}

/* O quadro é o último item da linha, na altura do meio das joias. position: relative segura dentro da linha (que rola)
   o que tem posição absoluta aqui dentro, como o aviso do "Cupom copiado" para o leitor de tela: sem isso, ele se
   posicionava pela página, esticava a largura dela e o Chrome do celular diminuía a página inteira (17/10/2026). */
.jv-pdp-upsell__offer {
  position: relative;
  display: flex;
  flex: 0 0 var(--jv-size-pdp-upsell-box);
  flex-direction: column;
  align-self: center;
  gap: var(--jv-space-3);
  scroll-snap-align: end;
}

/* O botão sai metade pela borda de baixo, como no Figma: a margem de baixo guarda o espaço dessa metade. */
.jv-pdp-upsell__box {
  position: relative;
  display: flex;
  margin-block-end: calc(var(--jv-touch-min) / 2);
  border-radius: var(--jv-radius-md);
  background-color: var(--jv-color-surface-alt);
}

.jv-pdp-upsell__strip {
  display: flex;
  flex: 0 0 var(--jv-size-pdp-upsell-strip);
  align-items: center;
  justify-content: center;
  border-start-start-radius: var(--jv-radius-md);
  border-end-start-radius: var(--jv-radius-md);
  background-color: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
}

.jv-pdp-upsell__bag {
  inline-size: var(--jv-size-pdp-upsell-icon);
  block-size: auto;
}

.jv-pdp-upsell__summary {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jv-space-1);
  min-inline-size: 0;
  padding: var(--jv-space-10) var(--jv-space-3) var(--jv-space-12);
}

.jv-pdp-upsell__summary p {
  margin: 0;
}

/* À vista em destaque e "ou 12x" embaixo (usuário, 17/10/2026). */
.jv-pdp-upsell__count,
.jv-pdp-upsell__price {
  color: var(--jv-color-brand);
  font-size: var(--jv-size-price);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-upsell__count {
  text-transform: uppercase;
}

.jv-pdp-upsell__price small {
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
}

.jv-pdp-upsell__installments {
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-upsell__old {
  color: var(--jv-color-text-muted-on-alt);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-upsell__save {
  margin-block-start: var(--jv-space-1);
  padding: var(--jv-space-1) var(--jv-space-2);
  border-radius: var(--jv-radius-sm);
  background-color: var(--jv-color-accent);
  color: var(--jv-color-on-accent);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
  text-transform: uppercase;
}

/* O Comprar Junto é o botão do Comprar (pdp-buy.css), centralizado na borda de baixo do quadro. */
.jv-pdp-upsell .jv-pdp-upsell__button {
  position: absolute;
  inset-block-end: calc(-1 * var(--jv-touch-min) / 2);
  inset-inline: var(--jv-space-10);
  inline-size: auto;
}

/* Computador: a frase volta para cima do título, à esquerda, e a linha deixa de ir até a borda da tela. */
/* "Copiar cupom" embaixo do Comprar Junto, na mesma largura: botão de contorno verde, sem fundo (BUTTON-STROKE do Figma,
   como o "Ver todos" do celular); lilás no hover, como os botões do site. Copiado: verde-claro, como o "Link copiado!" do
   Compartilhar. */
.jv-pdp-upsell__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  inline-size: calc(100% - 2 * var(--jv-space-10));
  min-block-size: var(--jv-touch-min);
  padding-inline: var(--jv-space-4);
  border: var(--jv-border-thick) solid var(--jv-color-action);
  border-radius: var(--jv-radius-pill);
  background: none;
  color: var(--jv-color-on-action);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-transform: uppercase;
  cursor: pointer;
}

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

.jv-pdp-upsell__copy[data-copiado] {
  border-color: var(--jv-color-success);
  background: var(--jv-color-success-bg);
  color: var(--jv-color-success-text);
}

@media (min-width: 1024px) {
  .jv-pdp-upsell__head {
    flex-direction: column-reverse;
    gap: var(--jv-space-1);
    text-align: start;
  }

  .jv-pdp-upsell__list {
    gap: var(--jv-space-3);
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .jv-pdp-upsell__offer {
    margin-inline-start: var(--jv-space-5);
  }
}