/*
 * Seletor de aro (Partials/jv/pdp-aro.template), na coluna de compra da página de produto.
 * Figma: "SELECIONAR ARO" (1465:4179) e "NUMBER_SELECTION" (1421:9023), no celular (1886:5679) e no computador (1465:4749).
 * - Botão de aro: 31px no Figma, 32 aqui (régua de 4px), e até 28 no celular estreito para caberem numa linha;
 *   cinza, e lilás no hover e quando escolhido.
 *   O escolhido fica também em negrito: a informação nunca vai só pela cor (guia, 7.3).
 * - Área de toque: o quadrado fica com 32px, mas o rótulo inteiro, com 44px de altura, recebe o toque (guia, 7.3).
 * - "Outros" é um select nativo (10 a 13 e 20 a 25) com a cara do botão: no celular abre a lista do aparelho. Também tem 44px de
 *   toque, com 32px de botão.
 * - Título e números com 16px, como no Figma; o campo do select precisa de 16px para o iPhone não dar zoom.
 * - Contorno do teclado só com teclado, também no "Outros" (o pdp-aro.js marca o toque).
 */

.jv-pdp-aro {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.jv-pdp-aro__title {
  inline-size: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-tight);
}

/* Os seis botões e o "Outros" numa linha só: no celular estreito, os quadrados encolhem um pouco (até 28px) para caber. */
.jv-pdp-aro__options {
  display: flex;
  align-items: center;
  column-gap: var(--jv-space-1);
}

/* O rótulo é a área de toque: 44px de altura, com o quadrado no meio. */
.jv-pdp-aro__option {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-inline-size: var(--jv-size-pdp-aro-min);
  max-inline-size: var(--jv-size-pdp-aro);
  min-block-size: var(--jv-touch-min);
  margin: 0;
  cursor: pointer;
}

.jv-pdp-aro__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: var(--jv-size-pdp-aro);
  border-radius: var(--jv-radius-sm);
  background-color: var(--jv-color-surface-alt);
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-none);
  transition: background-color var(--jv-duration-fast) var(--jv-ease);
}

.jv-pdp-aro__input:checked + .jv-pdp-aro__chip {
  background-color: var(--jv-color-selected);
  font-weight: var(--jv-weight-bold);
}

/* O rádio fica escondido: o contorno do teclado vai para o quadrado. */
.jv-pdp-aro__input:focus-visible + .jv-pdp-aro__chip {
  outline: var(--jv-focus-width) solid var(--jv-color-focus);
  outline-offset: var(--jv-focus-offset);
}

/* "Outros": o select fica com o fundo e o tamanho do botão; a setinha é um ícone por cima, que deixa o toque passar. */
.jv-pdp-aro__more {
  --jv-pdp-aro-folga: calc((var(--jv-touch-min) - var(--jv-size-pdp-aro)) / 2);
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
}

/* 44px de toque com 32px de botão: a borda transparente, em cima e embaixo, recebe o toque, e o fundo para nela.
   O raio vertical soma a borda para o canto visível continuar com 4px. */
.jv-pdp-aro__select {
  -webkit-appearance: none;
  appearance: none;
  block-size: var(--jv-touch-min);
  margin: 0;
  padding: 0 calc(var(--jv-space-2) + var(--jv-space-4)) 0 var(--jv-space-2);
  border: 0;
  border-block: var(--jv-pdp-aro-folga) solid transparent;
  border-radius: var(--jv-radius-sm) / calc(var(--jv-radius-sm) + var(--jv-pdp-aro-folga));
  background-color: var(--jv-color-surface-alt);
  background-clip: padding-box;
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-none);
  cursor: pointer;
  transition: background-color var(--jv-duration-fast) var(--jv-ease);
}

/* Contorno do teclado no "Outros": em volta do botão de 32px, e não dos 44px do select (a borda transparente é só para o
   toque), e só com teclado. Depois de escolher pelo toque, o Chrome do celular deixa o foco no select e mostrava o
   contorno solto em volta dos 44px (usuário, 18/10/2026); o pdp-aro.js marca o toque com data-jv-toque. */
.jv-pdp-aro__select:focus-visible {
  outline: none;
}

.jv-pdp-aro__more:has(.jv-pdp-aro__select:focus-visible:not([data-jv-toque]))::after {
  content: "";
  position: absolute;
  inset: var(--jv-pdp-aro-folga) 0;
  border-radius: var(--jv-radius-sm);
  outline: var(--jv-focus-width) solid var(--jv-color-focus);
  outline-offset: var(--jv-focus-offset);
  pointer-events: none;
}

/* Aro do "Outros" escolhido (10 a 13 ou 20 a 25): o "Outros" mostra o número e fica como o botão escolhido. */
.jv-pdp-aro__select:has(option:checked:not([value=""])) {
  background-color: var(--jv-color-selected);
  font-weight: var(--jv-weight-bold);
}

/* O desenho da seta ocupa 10 dos 18px do ícone, como no Figma. */
.jv-pdp-aro__chevron {
  position: absolute;
  inset-inline-end: var(--jv-space-1);
  color: var(--jv-color-text);
  pointer-events: none;
}

@media (hover: hover) {
  .jv-pdp-aro__option:hover .jv-pdp-aro__chip,
  .jv-pdp-aro__select:hover {
    background-color: var(--jv-color-accent);
  }
}

/* Aviso de aro faltando (o Scripts/product.js mostra ao clicar em Comprar sem aro): informação no azul do Figma, com o
   "i", e não o vermelho de erro (usuário, 15/10/2026). O "i" na mesma linha do texto (um CSS do painel deixa todo svg em
   bloco, e o "i" ficava em cima) e espaço embaixo, antes do Guia de Medidas (usuário, 19/10/2026). O display só vale
   aberto: o [hidden] esconde. */
.jv-pdp-aro__alert {
  margin: 0 0 var(--jv-space-3);
  color: var(--jv-color-info);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-aro__alert:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--jv-space-1);
}

.jv-pdp-aro__alert-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Tela mais estreita que isso (ou zoom de 200%): a linha quebra, em vez de sair da tela. */
@media (max-width: 344px) {
  .jv-pdp-aro__options {
    flex-wrap: wrap;
  }
}