/*
 * Sizebay: botões "Descubra seu tamanho" e "Tabela de medidas", desenhados pelo módulo da Sizebay embaixo dos
 * tamanhos (.vfr__container > .szb-vfr-btns > button.vfr__button--clean).
 *
 * O tema ajusta pelas variáveis (num ancestral qualquer, como `.single-product`). Os seletores são mais fortes
 * que o normal do plugin porque precisam ganhar do CSS da loja na Sizebay (`<tenant>/styles/styles_v4.css`),
 * que entra depois e foi feito para o tema antigo. O padrão lê os tokens do tema de blocos e cai em neutros.
 */
.vfr__container {
  --rx-sizebay-text: var(--wp--preset--color--contrast, currentColor);
  --rx-sizebay-icon: var(--rx-sizebay-text);
  --rx-sizebay-font: inherit;
  --rx-sizebay-font-size: var(--wp--preset--font-size--small, 0.875rem);
  --rx-sizebay-font-weight: 500;
  --rx-sizebay-decoration: underline;
  --rx-sizebay-gap: 1.25em;
  --rx-sizebay-margin: 0.75em 0 0;
  --rx-sizebay-measurements-display: inline-flex;

  margin: var(--rx-sizebay-margin);
}

.vfr__container div.szb-vfr-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-sizebay-gap);
  margin: 0;
}

.szb-vfr-btns button.vfr__button--clean {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rx-sizebay-text);
  font-family: var(--rx-sizebay-font);
  font-size: var(--rx-sizebay-font-size);
  font-weight: var(--rx-sizebay-font-weight);
  text-decoration: var(--rx-sizebay-decoration);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.szb-vfr-btns button.vfr__button--clean::before {
  margin-right: 0.5em;
  color: var(--rx-sizebay-icon);
  font-size: 1.3em;
}

.szb-vfr-btns button#szb-measurements-button {
  display: var(--rx-sizebay-measurements-display);
}

.szb-vfr-btns button.vfr__button--clean:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px;
}