/* ==========================================================================
   Aletto - pagina de produto
   ========================================================================== */

/* --------------------------------------------------------------------------
   Galeria - a partir de 1000px (mesmo breakpoint da referencia Shopify),
   miniaturas em coluna vertical a esquerda da imagem principal.

   Estrutura real do WooCommerce (confirmada no DOM, nao presumida):

     .woocommerce-product-gallery                    <- position:relative (base do tema)
       .woocommerce-product-gallery__trigger          <- position:absolute (zoom/lightbox), ja fora do fluxo
       .flex-viewport                                 <- SO EXISTE com 2+ imagens (FlexSlider)
         .woocommerce-product-gallery__wrapper
           .woocommerce-product-gallery__image (x N)
       .woocommerce-product-gallery__wrapper           <- filho direto SO com 1 imagem (sem .flex-viewport)
         .woocommerce-product-gallery__image (x 1)
       ol.flex-control-nav.flex-control-thumbs         <- SO EXISTE com 2+ imagens (miniaturas geradas pelo FlexSlider)
         li > img (a miniatura ativa recebe a classe "flex-active")

   Como ".flex-control-nav" so existe quando ha mais de uma imagem, o
   layout de flex abaixo naturalmente vira "so a imagem, sem coluna vazia"
   em produtos com 1 imagem so - nao precisa de regra separada pra isso.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .woocommerce-product-gallery {
    display: flex;
    align-items: stretch;
    gap: 16px;
  }

  /* Area da imagem principal - ".flex-viewport" quando ha 2+ imagens,
     ".woocommerce-product-gallery__wrapper" (filho direto) quando so ha 1.
     "min-width:0" evita que a imagem empurre a coluna de miniaturas pra
     fora quando o conteudo tem largura intrinseca maior que o espaco. */
  .woocommerce-product-gallery > .flex-viewport,
  .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    flex: 1 1 0%;
    min-width: 0;
  }

  /* Coluna de miniaturas: "order:-1" move ela pra antes da imagem
     visualmente (no DOM ela vem depois, o FlexSlider so cria esse <ol>
     apos montar o restante da galeria - a ordem visual muda so por CSS,
     sem mexer na ordem real do DOM/foco por teclado).
     "align-items:stretch" (herdado do container) ja faz essa coluna
     esticar ate a mesma altura da imagem principal - a rolagem vertical
     (quando ha muitas miniaturas) acontece dentro desse espaco, sem
     esticar a pagina. */
  .woocommerce-product-gallery > .flex-control-nav.flex-control-thumbs {
    order: -1;
    display: flex;
    flex-direction: column;
    /* 72px = largura real da miniatura no desktop da referencia Shopify
       (".product-gallery__thumbnail" em "@media (min-width:641px)" - o
       valor de 60px so vale abaixo de 641px, nao no breakpoint que
       estamos replicando aqui). */
    flex: 0 0 72px;
    /* "min-height:0" e o que realmente permite a coluna ficar do tamanho
       da imagem principal (align-items:stretch, herdado do container) e
       rolar por dentro quando o conteudo e maior - por padrao um item
       flex tem "min-height:auto", que ignora o stretch e cresce pra
       caber todas as miniaturas, quebrando a rolagem interna. */
    min-height: 0;
    /* 8px = mesmo valor usado na margem vertical de cada miniatura na
       referencia Shopify ("margin: 8px 4px" em @media min-width:1000px). */
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /*
   * O proprio WooCommerce (woocommerce.css) define um layout de grade por
   * float pra essas miniaturas:
   *   .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4
   *     .flex-control-thumbs li { width: 14.2857%; float: left; margin-right: 14.2857%; }
   * "float" nao tem efeito num item flex, mas o "width:14.2857%" continua
   * valendo e, como e mais especifico que a regra simples usada acima,
   * ele vencia e encolhia o <li> pra uma fatia de 64px (a largura da
   * coluna) em vez de ocupar a coluna inteira. Repetir a classe/contexto
   * real do WooCommerce aqui (mesmo seletor, so acrescentando o nosso
   * escopo) e o jeito de vencer sem "!important".
   */
  .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 > .flex-control-nav.flex-control-thumbs li {
    width: auto;
    float: none;
    margin: 0;
    flex-shrink: 0;
  }

  .woocommerce-product-gallery > .flex-control-nav.flex-control-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: 0.7;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
  }

  .woocommerce-product-gallery > .flex-control-nav.flex-control-thumbs img:hover {
    opacity: 1;
  }

  /* Miniatura ativa: destaque visual (mesma cor de "ativo" usada em
     outros indicadores do tema, ver .aletto-banners__dot.is-active).
     O leve aumento de raio na ativa é o mesmo recurso usado na
     referência Shopify (".is-nav-selected" lá tem +2px de raio a mais
     que o estado normal). */
  .woocommerce-product-gallery > .flex-control-nav.flex-control-thumbs img.flex-active {
    border-color: var(--aletto-verde-agua, #24c7b8);
    border-radius: 10px;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Coluna de compra sticky - a partir de 1000px (mesmo breakpoint da galeria
   acima e da referencia Shopify, ".card--sticky").

   Elemento tornado sticky: ".summary.entry-summary" (confirmado no DOM real
   - e o wrapper que o WooCommerce gera pra tudo que sai de
   "woocommerce_single_product_summary": titulo, preco, form.cart com o
   botao, frete, selos etc). Nao existe um elemento "mais correto"; e
   literalmente o ".entry-summary" que a tarefa pediu pra confirmar.

   ANTES de sticky funcionar aqui, dois ancestrais precisaram ser
   destravados (testado empiricamente: sticky simplesmente nao pegava com
   eles como estavam, sem nenhuma outra mudanca):

   1) ".single-product div.product" - o WooCommerce/Storefront usa
      "overflow: hidden" nessa regra (woocommerce.css) como clearfix pros
      floats de ".images"/".summary" (que continuam floated - nao mexemos
      nisso, so a coluna de compra ganha "position:sticky" por cima do
      float, exatamente como "position:relative" tambem funcionaria).
      "overflow:hidden" tecnicamente cria um "scroll container" pro CSS,
      e um ancestral assim quebra sticky mesmo sem cortar nada
      visualmente. Trocado por um clearfix moderno (::after) que contem
      os floats sem usar overflow.
      Especificidade: "woocommerce.css" (Storefront) carrega DEPOIS deste
      arquivo no <head> desta instalacao (mesma particularidade ja
      documentada em aletto-carousel.css sobre o "style.css?ver=2.0.0"
      duplicado) - com a mesma especificidade ela venceria por ordem de
      carregamento. Por isso o seletor repete "body.single-product" na
      frente (especificidade a mais, sem usar "!important").

   2) "body"/".site" (o <div id="page" class="hfeed site">) - o Storefront
      usa "overflow-x: hidden" (nao mexe no eixo Y). Pela especificacao
      CSS, quando so um eixo e travado, o outro eixo passa a computar
      como "auto" (nunca fica "visible" de verdade) - e "auto" tambem
      quebra sticky, mesmo sem gerar barra de rolagem visivel (o
      conteudo nao excede a altura). So dava pra resolver liberando os
      dois eixos juntos. Restrito a "body.single-product" (classe real
      que o WooCommerce adiciona so na pagina de produto) pra nao afetar
      nenhuma outra pagina - a Home, por exemplo, depende desse mesmo
      "overflow-x:hidden" pro banner de sangria total (.aletto-banners).

   "top: 24px" - o header do Aletto foi medido ao vivo (1000/1024/1280/
   1440px): ele usa "position:relative" e rola junto com a pagina
   normalmente, sem nunca virar fixed/sticky. Como nao ha header fixo pra
   desviar, o "top" nao precisa ser igual a altura do header (~109px);
   ele so define um respiro confortavel a partir do topo real da
   viewport, ja que nada fica sobreposto ali quando a coluna gruda.
   -------------------------------------------------------------------------- */

/* Wrapper novo em volta de ".images" + ".summary" (ver
   inc/aletto-produto.php > aletto_produto_abrir_coluna_topo). Os dois
   continuam floated (float vem do proprio WooCommerce/Storefront, nao
   mexido aqui) - sem limpar o float DENTRO deste wrapper especifico, ele
   colapsaria pra altura zero (filho floated nao conta pra altura do pai
   sem isso), e o sticky perderia o limite certo que este wrapper existe
   pra dar. Fora de qualquer media query: floated ou nao (empilhado abaixo
   de 1000px), limpar um float que nao existe nao tem efeito nenhum. */
body.single-product .aletto-produto-topo::after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 1000px) {
  body.single-product div.product {
    overflow: visible;
  }

  body.single-product div.product::after {
    content: "";
    display: table;
    clear: both;
  }

  body.single-product,
  body.single-product .site {
    overflow: visible;
  }

  .single-product .summary.entry-summary {
    position: sticky;
    top: 24px;
  }

  /* A barra nativa do Storefront (topo, aparece so depois que a coluna
     inteira sai da tela) fica redundante com a coluna sticky - a partir
     daqui a propria coluna nunca sai de vista, entao a barra e desligada
     so nesse breakpoint. Abaixo de 1000px ela continua exatamente como
     estava (nao e o escopo desta mudanca). Mesma questao de ordem de
     carregamento do item 1 acima: "body.single-product" na frente pra
     vencer por especificidade, sem "!important". */
  body.single-product .storefront-sticky-add-to-cart {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Navegacao nativa "produto anterior/proximo" do Storefront
   (".storefront-product-pagination", ver storefront/assets/css/woocommerce/
   woocommerce.css). E uma aba fixa (position:fixed; top:50%) que fica
   colada nas bordas esquerda/direita da TELA (nao do cartao/coluna),
   mostrando so uma fatia de ~45px com a miniatura do produto vizinho;
   ao passar o mouse ela desliza pra dentro. Nao tem nenhum estilo do
   Aletto (cor/fonte/raio genericos do Storefront) e, por ficar fixa a
   meio da viewport, sobrepoe qualquer secao que esteja nessa altura
   quando a pagina rola (testado: hoje sobrepoe a caixa de
   Descricao/Avaliacoes assim que a pagina carrega). "Anterior/proximo"
   aqui tambem nao segue nenhuma ordem curada (e so a ordem de ID do
   catalogo) - sem valor real de navegacao pra decidir manter e retrabalhar
   o visual. Desligada pelo mesmo motivo/padrao ja usado acima pra
   ".storefront-sticky-add-to-cart" (nativo, redundante, sem marca).
   -------------------------------------------------------------------------- */
body.single-product .storefront-product-pagination {
  display: none;
}

/* --------------------------------------------------------------------------
   Stepper de quantidade (mesmos valores do stepper do carrinho, ver
   assets/aletto-carrinho.css > .wc-block-components-quantity-selector)
   -------------------------------------------------------------------------- */

.quantity.aletto-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: 8px;
  overflow: hidden;
  /* Respiro antes do botao "Adicionar ao carrinho" (que vem logo depois,
     como irmao direto dentro de "form.cart" - nao ha nenhum outro
     elemento entre os dois). So essa area de compra usa a classe
     ".aletto-qty-stepper" (adicionada via JS so na pagina de produto,
     ver assets/aletto-produto.js > iniciarStepperQuantidade), entao esse
     espacamento nao afeta nenhum outro stepper do site (carrinho, mini
     carrinho). */
  margin-bottom: 1.4em;
}

.aletto-qty-stepper .qty {
  width: 48px;
  border: none;
  border-left: 1px solid var(--aletto-borda, #e7e7e7);
  border-right: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: 0;
  text-align: center;
  -moz-appearance: textfield;
}

.aletto-qty-stepper .qty::-webkit-inner-spin-button,
.aletto-qty-stepper .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.aletto-qty-botao {
  border: none;
  background-color: var(--aletto-branco, #fff);
  color: var(--aletto-texto, #000);
  width: 36px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.aletto-qty-botao:hover {
  background-color: var(--aletto-verde-agua, #24c7b8);
  color: var(--aletto-branco, #fff);
}

@media (max-width: 768px) {
  .aletto-qty-botao {
    min-width: 40px;
    min-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Resumo curto de avaliacoes
   -------------------------------------------------------------------------- */

.aletto-resumo-curto {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.3em 0 1em;
  color: var(--aletto-verde-agua, #24c7b8);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.aletto-resumo-curto:hover {
  color: var(--aletto-verde-agua-hover, #18867c);
  text-decoration: underline;
}

.aletto-resumo-curto .star-rating {
  color: var(--aletto-estrela, #ffce00);
}

/* --------------------------------------------------------------------------
   Calculadora de frete
   -------------------------------------------------------------------------- */

.aletto-frete {
  border: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: var(--aletto-raio, 12px);
  padding: 1.1em 1.2em;
  margin: 0;
  background-color: #fafefd;
}

.aletto-frete__titulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--aletto-heading, #737b97);
  margin-bottom: 0.9em;
}

.aletto-frete__titulo svg {
  width: 19px;
  height: 19px;
  color: var(--aletto-verde-agua, #24c7b8);
  flex-shrink: 0;
}

.aletto-frete__form {
  display: flex;
  gap: 0.6em;
}

.aletto-frete__cep {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--aletto-borda-form, #dadada);
  border-radius: var(--aletto-raio, 12px);
  padding: 0.8em 1em;
  font-family: inherit;
  font-size: 15px;
  background-color: #fff;
  letter-spacing: 0.04em;
}

.aletto-frete__cep:focus {
  border-color: var(--aletto-verde-agua, #24c7b8);
  outline: none;
}

.aletto-frete__botao {
  flex: 0 0 auto;
  background-color: var(--aletto-verde-agua, #24c7b8);
  color: #fff;
  border: none;
  border-radius: var(--aletto-raio, 12px);
  padding: 0.8em 1.4em;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.aletto-frete__botao:hover {
  background-color: var(--aletto-verde-agua-hover, #18867c);
  color: #fff;
}

.aletto-frete__botao[disabled] {
  opacity: 0.6;
  cursor: default;
}

.aletto-frete__link {
  display: inline-block;
  margin-top: 0.7em;
  font-size: 12.5px;
  color: var(--aletto-verde-agua, #24c7b8);
}

.aletto-frete__resultado:empty {
  display: none;
}

.aletto-frete__resultado {
  margin-top: 1em;
  border-top: 1px solid var(--aletto-borda, #e7e7e7);
  padding-top: 0.9em;
}

.aletto-frete__opcao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 0.6em 0;
  border-bottom: 1px dashed var(--aletto-borda, #e7e7e7);
  font-size: 14px;
}

.aletto-frete__opcao:last-child {
  border-bottom: none;
}

.aletto-frete__opcao-nome {
  color: var(--aletto-texto, #000);
  font-weight: 500;
}

.aletto-frete__opcao-prazo {
  display: block;
  color: var(--aletto-heading, #737b97);
  font-size: 12.5px;
  font-weight: 400;
  margin-top: 2px;
}

.aletto-frete__opcao-valor {
  color: var(--aletto-preco-promo, #0fb930);
  font-weight: 700;
  white-space: nowrap;
}

.aletto-frete__erro {
  color: var(--aletto-erro, #f71b1b);
  font-size: 13.5px;
  margin: 0;
}

.aletto-frete__carregando {
  color: var(--aletto-heading, #737b97);
  font-size: 13.5px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Secao de entrega (ver inc/aletto-produto.php >
   aletto_produto_abrir_secao_frete). Une barra de frete gratis +
   calculadora de CEP + aviso de entrega - antes espalhados em prioridades
   diferentes (12/25/26), competindo com preco/disponibilidade no topo da
   coluna. Agora ficam juntos, depois do botao de compra: so um respiro
   antes do primeiro item: cada peca de dentro (barra, caixa, aviso) ja
   tem a propria margem.
   -------------------------------------------------------------------------- */

.aletto-produto-frete-secao {
  margin-top: 1.7em;
}

/* --------------------------------------------------------------------------
   Barra de frete gratis
   -------------------------------------------------------------------------- */

.aletto-frete-gratis-barra {
  margin: 0 0 1.1em;
}

.aletto-frete-gratis-barra__texto {
  margin: 0 0 0.6em;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
}

.aletto-frete-gratis-barra__texto .woocommerce-Price-amount {
  font-weight: 700;
}

.aletto-frete-gratis-barra__trilho {
  height: 8px;
  border-radius: 999px;
  background-color: var(--aletto-borda, #e7e7e7);
  overflow: hidden;
}

.aletto-frete-gratis-barra__preenchida {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: var(--aletto-verde-agua, #24c7b8);
  transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Pagamento
   -------------------------------------------------------------------------- */

.aletto-pagto {
  margin: 1.2em 0;
}

.aletto-pagto__texto {
  display: block;
  font-size: 13.5px;
  color: var(--aletto-heading, #737b97);
  margin-bottom: 0.6em;
}

.aletto-pagto__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}

.aletto-pagto__item {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: 6px;
  padding: 0.4em 0.65em;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
  line-height: 1;
  background-color: #fff;
}

/* Pix/Visa/Mastercard: logo oficial completo (ver fontes em
   inc/aletto-produto.php > aletto_produto_formas_pagamento). Os tres
   arquivos ja vem com a propria "moldura" desenhada neles (fundo/cores
   proprias) - por isso essa variante nao repete borda/padding por cima,
   so mantem a mesma altura visual dos badges de texto ao lado. Cada
   logo mantem sua propria proporcao (so a altura e fixada, a largura
   fica automatica) para nao distorcer nenhum dos tres. */
.aletto-pagto__item--icone {
  border: none;
  padding: 0;
  background-color: transparent;
}

.aletto-pagto__item--icone img {
  display: block;
  height: 24px;
  width: auto;
}

/* Boleto: nao existe uma marca oficial de "Boleto Bancario" pra usar
   sozinha (ver comentario em inc/aletto-produto.php) - usa um
   pictograma generico de documento/codigo de barras ao lado do texto,
   dentro do mesmo badge com borda dos itens que nao tem logo (Elo). */
.aletto-pagto__item--generico {
  gap: 0.4em;
}

.aletto-pagto__item--generico img {
  display: block;
  height: 16px;
  width: auto;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Selos de confianca
   -------------------------------------------------------------------------- */

/* Sem borda superior de proposito: junto com ".aletto-pagto" logo acima
   (mesmo bloco "pagamento + confianca" da hierarquia da pagina), os dois
   agora leem como uma unica secao de confianca, nao duas caixas
   separadas por uma linha. */
.aletto-selos {
  list-style: none;
  margin: 0.9em 0 0;
  padding: 0;
  display: grid;
  /* 2 itens hoje (Enviamos para todo o Brasil / Suporte por WhatsApp) -
     "repeat(2, 1fr)" preenche a linha inteira sem sobrar coluna vazia. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9em 1.2em;
}

.aletto-selos__item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  font-size: 13px;
  color: var(--aletto-texto, #000);
  line-height: 1.35;
}

.aletto-selos__icone {
  display: inline-flex;
  color: var(--aletto-verde-agua, #24c7b8);
  flex-shrink: 0;
}

.aletto-selos__icone svg {
  width: 21px;
  height: 21px;
}

/* Estoque baixo */
.aletto-estoque-baixo {
  color: #e8590c !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Barra de compra fixa no celular
   -------------------------------------------------------------------------- */

.aletto-barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.7em 1em;
  background-color: #fff;
  box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.14);
}

.aletto-barra-compra[hidden] {
  display: none;
}

.aletto-barra-compra__info {
  min-width: 0;
  line-height: 1.3;
}

.aletto-barra-compra__nome {
  display: block;
  font-size: 12.5px;
  color: var(--aletto-heading, #737b97);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aletto-barra-compra__preco {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--aletto-preco-normal, #606781);
}

.aletto-barra-compra__preco ins {
  text-decoration: none;
  color: var(--aletto-preco-promo, #0fb930);
}

.aletto-barra-compra__preco del {
  display: none;
}

.aletto-barra-compra__botao {
  flex-shrink: 0;
  background-color: var(--aletto-verde-compra, #0fb930);
  color: #fff;
  border: none;
  border-radius: var(--aletto-raio, 12px);
  padding: 0.9em 1.6em;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 768px) {
  .aletto-barra-compra:not([hidden]) {
    display: flex;
  }

  /* Espaco para a barra nao cobrir o conteudo. */
  body.single-product {
    padding-bottom: 74px;
  }

  /* O botao flutuante do WhatsApp sobe. */
  body.single-product .aletto-whatsapp {
    bottom: 88px;
  }
}

/* --------------------------------------------------------------------------
   Avaliacoes
   -------------------------------------------------------------------------- */

.aletto-avaliacoes__resumo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5em;
  align-items: center;
  border: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: var(--aletto-raio, 12px);
  padding: 1.5em 1.8em;
  margin-bottom: 2em;
}

.aletto-avaliacoes__nota {
  text-align: center;
}

.aletto-avaliacoes__media {
  display: block;
  font-size: 44px;
  font-weight: 700;
  color: var(--aletto-heading, #737b97);
  line-height: 1;
  margin-bottom: 0.15em;
}

.aletto-avaliacoes__estrelas .star-rating {
  margin: 0 auto 0.4em;
  float: none;
}

.aletto-avaliacoes__total {
  display: block;
  font-size: 13px;
  color: var(--aletto-preco-riscado, #a4a9be);
}

.aletto-avaliacoes__barras {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.aletto-avaliacoes__linha {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 12.5px;
  color: var(--aletto-heading, #737b97);
}

.aletto-avaliacoes__rotulo {
  width: 12px;
  text-align: right;
  flex-shrink: 0;
}

.aletto-avaliacoes__trilha {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background-color: #eef0f5;
  overflow: hidden;
}

.aletto-avaliacoes__preenchida {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: var(--aletto-estrela, #ffce00);
}

.aletto-avaliacoes__qtd {
  width: 24px;
  flex-shrink: 0;
  text-align: right;
}

.aletto-avaliacoes__vazio {
  border: 1px dashed var(--aletto-borda, #e7e7e7);
  border-radius: var(--aletto-raio, 12px);
  padding: 1.4em;
  margin-bottom: 1.8em;
  text-align: center;
}

.aletto-avaliacoes__vazio p {
  margin: 0 0 0.4em;
  color: var(--aletto-heading, #737b97);
}

.aletto-avaliacoes__convite {
  font-size: 13.5px;
  color: var(--aletto-preco-riscado, #a4a9be) !important;
  margin: 0 !important;
}

.aletto-verificado {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background-color: rgba(15, 185, 48, 0.1);
  color: var(--aletto-preco-promo, #0fb930);
  border-radius: 999px;
  padding: 0.3em 0.7em;
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 0.7em;
}

.aletto-verificado svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 640px) {
  .aletto-avaliacoes__resumo {
    grid-template-columns: 1fr;
    gap: 1.4em;
    padding: 1.2em;
  }

  .aletto-selos {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Abas (Descricao / Avaliacoes) - refinamento visual apenas.

   A troca de painel continua 100% nativa do WooCommerce/Storefront (clique
   em "Descricao"/"Avaliacoes" ainda alterna display:block/none via o JS
   que ja vem no tema - nenhuma linha de JS foi criada ou tocada aqui).

   Estrutura real confirmada no DOM (templates/single-product/tabs/tabs.php
   do WooCommerce, nao presumida):
     .woocommerce-tabs.wc-tabs-wrapper
       ul.tabs.wc-tabs                    <- rotulos, coluna esquerda no desktop
         li.description_tab(.active) > a
         li.reviews_tab(.active) > a
       .woocommerce-Tabs-panel--description  <- painel a direita no desktop
         h2 "Descricao"                        <- duplicado (ja tem o rotulo
                                                   da aba do lado) - escondido
                                                   abaixo, so este h2
         conteudo da descricao
       .woocommerce-Tabs-panel--reviews
         (resumo do Aletto, lista de avaliacoes, formulario nativo)

   Especificidade: "aletto-produto.css" carrega ANTES de "woocommerce.css"
   (Storefront) nesta instalacao - o oposto da ordem encontrada na secao
   de compra sticky. Mesmo assim os seletores abaixo repetem
   ".single-product" na frente (mesmo padrao ja usado no resto do arquivo)
   para nao depender de ordem de carregamento, sem usar "!important".
   -------------------------------------------------------------------------- */

/* O <h2>Descricao</h2> vem de dentro do template nativo do WooCommerce
   (single-product/tabs/description.php sempre imprime esse heading) - o
   rotulo da propria aba, do lado esquerdo, ja diz "Descricao". Esconde
   SO esse heading especifico (filho direto do painel de descricao);
   nenhum outro h2 do site e afetado, e o conteudo da descricao continua
   intacto logo abaixo dele. */
.woocommerce-Tabs-panel--description > h2 {
  display: none;
}

/* Moldura unica para o bloco inteiro (lista + painel) - aproxima do
   cartao do Shopify por fora, sem separar cada aba em cartoes
   independentes (a estrutura de troca de aba continua a mesma). */
.single-product .woocommerce-tabs {
  background-color: var(--aletto-branco, #fff);
  border-radius: var(--aletto-raio, 12px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.04);
  padding: 1.6em 1.8em;
}

.single-product .woocommerce-tabs ul.tabs {
  border-top: none;
}

.single-product .woocommerce-tabs ul.tabs li {
  border-bottom: 1px solid var(--aletto-borda, #e7e7e7);
}

.single-product .woocommerce-tabs ul.tabs li:last-child {
  border-bottom: none;
}

.single-product .woocommerce-tabs ul.tabs li a {
  padding: 1.05em 0.2em;
  font-family: var(--aletto-fonte, 'Poppins', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
  transition: color 0.15s ease;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--aletto-verde-agua, #24c7b8);
}

.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--aletto-verde-agua, #24c7b8);
  font-weight: 700;
}

/* Substitui o triangulo nativo do Storefront (sem cor definida, ficava
   preto e sem refinamento nenhum) - o proprio texto verde-agua + negrito
   acima ja marca o estado ativo com clareza, sem exagerar num indicador
   extra. */
.single-product .woocommerce-tabs ul.tabs li.active::after {
  content: none;
}

.single-product .woocommerce-tabs .panel {
  margin-top: 0;
  margin-bottom: 0;
}

.single-product .woocommerce-tabs .panel p {
  line-height: 1.7;
}

@media (min-width: 768px) {
  .single-product .woocommerce-tabs ul.tabs {
    border-right: 1px solid var(--aletto-borda, #e7e7e7);
    padding-right: 1.6em;
  }
}

@media (max-width: 767px) {
  .single-product .woocommerce-tabs {
    padding: 1.3em 1.4em;
  }

  .single-product .woocommerce-tabs ul.tabs li a {
    padding: 0.9em 0.1em;
    font-size: 14px;
  }
}