/*
 * Informações da joia: Descrição, Garantia, Trocas e Devoluções e Personal Shopper (módulo 2 do redesenho).
 * Partial: Partials/jv/pdp-info.template, o mesmo na página de produto, na de produto temporária e no detalhe do leilão.
 * Celular: sanfonas (Figma 1887:5641); a aberta vira cartão roxo. Computador: abas (componente PRODUCT_DESCRIPTION,
 * 1483:5620), montadas pelo Scripts/jv/pdp-info.js; sem JavaScript, ficam as sanfonas.
 * Do Figma para os tokens: raio 21 → --jv-radius-lg (24); raio 2 da aba → --jv-radius-sm (4); texto do celular com
 * altura de linha 100% → --jv-leading-normal (142%, a do computador), para o parágrafo não ficar espremido.
 * Texto e títulos das sanfonas com 16px (no Figma, 14): regra do site para texto corrido (usuário, 15/10/2026);
 * os botões, rótulos curtos, ficam com 14px.
 */

.jv-pdp-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-1);
}

.jv-pdp-info__item {
  border: var(--jv-border-thin) solid var(--jv-color-border);
  border-radius: var(--jv-radius-lg);
}

/* Aberta: cartão roxo com o texto branco. */
.jv-pdp-info__item[open] {
  border-color: var(--jv-color-brand);
  background: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
}

/* O raio acompanha o do cartão para o contorno do foco seguir o formato. */
.jv-pdp-info__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jv-space-4);
  min-block-size: var(--jv-touch-min);
  padding-inline: var(--jv-space-4);
  border-radius: var(--jv-radius-lg);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  list-style: none;
  cursor: pointer;
}

/* Sem o triângulo do navegador: a seta é a do Figma. */
.jv-pdp-info__summary::-webkit-details-marker {
  display: none;
}

/* No cartão roxo, o contorno roxo do foco sumiria: fica branco. Nas abas do computador o fundo é claro e o foco fica roxo. */
.jv-pdp-info:not([data-modo="abas"]) .jv-pdp-info__item[open] :focus-visible {
  outline-color: var(--jv-color-on-brand);
}

.jv-pdp-info__icon {
  flex: none;
  transition: transform var(--jv-duration-fast) var(--jv-ease);
}

.jv-pdp-info__item[open] > .jv-pdp-info__summary .jv-pdp-info__icon {
  transform: rotate(180deg);
}

.jv-pdp-info__panel {
  padding: 0 var(--jv-space-4) var(--jv-space-4);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

/* Espaço entre os blocos: parágrafos, títulos e o texto que vem do cadastro. */
.jv-pdp-info__panel > * + * {
  margin-block-start: var(--jv-space-3);
}

.jv-pdp-info__subtitle {
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-heading);
}

/* O texto do cadastro chega em HTML: o link herda a cor (branco no roxo) e fica sublinhado.
   :where() deixa a regra sem peso, para o botão abaixo mandar no próprio estilo. */
.jv-pdp-info__panel :where(a) {
  color: inherit;
  text-decoration: underline;
}

/* O CSS antigo pinta todo link no hover; aqui ele continua na cor do texto. */
.jv-pdp-info__panel a:hover {
  color: inherit;
}

.jv-pdp-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jv-space-2);
}

/* Botões do Personal Shopper no padrão do site (componente BUTTON do Figma, usuário 15/10/2026):
   verde com texto escuro; ao passar o mouse, lilás com texto escuro. */
.jv-pdp-info__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--jv-touch-min);
  padding-inline: var(--jv-space-6);
  border: var(--jv-border-thick) solid var(--jv-color-action);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-decoration: none;
  text-transform: uppercase;
}

/* Saiba Mais: só a borda verde (BUTTON-STROKE). O texto acompanha o fundo: branco no cartão roxo do celular
   (o escuro do Figma não teria contraste no roxo) e escuro nas abas do computador. */
.jv-pdp-info__button--outline {
  background: transparent;
  color: inherit;
}

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

/* Descrição longa: o pdp-info.js só limita quando o texto passa de --jv-pdp-info-lines linhas, e põe o "Ver mais".
   Sem JavaScript, o texto aparece inteiro. */
.jv-pdp-info__rich[data-jv-ver-mais="fechado"] {
  max-block-size: calc(1em * var(--jv-leading-normal) * var(--jv-pdp-info-lines));
  overflow: hidden;
}

/* "Ver mais" como link: sublinhado, na cor do texto (branco no cartão roxo). */
.jv-pdp-info__more {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--jv-touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: var(--jv-weight-bold);
  text-decoration: underline;
}

/* As abas do computador são criadas pelo pdp-info.js; sem ele, ficam as sanfonas. */
.jv-pdp-info__tabs {
  display: none;
}

@media (min-width: 1024px) {
  .jv-pdp-info {
    max-inline-size: var(--jv-size-pdp-info);
  }

  .jv-pdp-info[data-modo="abas"] .jv-pdp-info__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jv-space-6);
    margin-block-end: var(--jv-space-4);
  }

  /* Rótulo roxo sublinhado. */
  .jv-pdp-info__tab {
    position: relative;
    padding: var(--jv-space-1);
    border: 0;
    border-block-end: var(--jv-border-thin) solid currentColor;
    background: none;
    color: var(--jv-color-brand);
    font-size: var(--jv-size-body);
    font-weight: var(--jv-weight-bold);
    line-height: var(--jv-leading-none);
  }

  /* Área de clique com a altura mínima de toque, sem mudar o desenho. */
  .jv-pdp-info__tab::after {
    content: "";
    position: absolute;
    inset: calc((var(--jv-touch-min) - 100%) / -2) 0;
  }

  /* Aba ativa: fundo lilás com o texto escuro (contraste 7,1), como no Figma. */
  .jv-pdp-info__tab[aria-selected="true"] {
    border-block-end-color: transparent;
    border-radius: var(--jv-radius-sm);
    background: var(--jv-color-selected);
    color: var(--jv-color-on-accent);
  }

  /* No modo abas, a sanfona some: sem contorno, sem o roxo e sem o título, que virou aba. */
  .jv-pdp-info[data-modo="abas"] .jv-pdp-info__list {
    gap: 0;
  }

  .jv-pdp-info[data-modo="abas"] .jv-pdp-info__item {
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
  }

  .jv-pdp-info[data-modo="abas"] .jv-pdp-info__summary {
    display: none;
  }

  .jv-pdp-info[data-modo="abas"] .jv-pdp-info__panel {
    padding: 0;
  }

  /* Nas abas, o "Ver mais" fica roxo, como os rótulos das abas. */
  .jv-pdp-info[data-modo="abas"] .jv-pdp-info__more {
    color: var(--jv-color-brand);
  }
}