/*
 * vitrine.css — o pouco de CSS próprio da vitrine.
 *
 * Tudo que é aparência do site vem do tema Focal (theme.css) e do Trustoo
 * (assets/css/trustoo/). Aqui só entra o que não existe no original: a lightbox
 * das fotos de avis, que no site de referência é aberta por um script do app
 * que não roda fora do domínio da loja.
 */

/*
 * A seção de avis não recebe o respiro vertical do tema no site de referência:
 * lá o .container.vertical-breather computa padding-block 0, aqui computa 80px
 * (--vertical-breather). São 160px a mais na PDP. Escopado só ao bloco de app do
 * Trustoo pra não mexer nas outras seções de app.
 */
.shopify-section--apps > .container.vertical-breather:has(.shopify-app-block [data-app='trustoo']) {
  padding-block: 0;
  /*
   * O gutter lateral também não existe lá: medido no live, o container do widget
   * ocupa a largura cheia (1280 no desktop, 375 no mobile) e quem dá o respiro é
   * o padding de 20px do próprio #vstar-reviews. Com o gutter do tema por cima o
   * card ficava 48px mais estreito no mobile, e as 3 fotos de um avis quebravam
   * pra segunda linha (+108px por card).
   */
  padding-inline: 0;
  max-width: none;
}

/*
 * No mobile o Trustoo limita o texto do avis por LINHA, não por caractere:
 * medido no site de referência a 375px, os cards param em 7 linhas (137px a
 * 19.6px de line-height). O corte por caractere (479, medido no desktop) gera
 * mais linhas nessa largura e deixava os cards ~780px mais altos no total.
 */
@media (max-width: 749px) {
  #seal-review-widget .reviews-text {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.vitrine-review-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
  animation: vrl-in 160ms ease-out;
}

@keyframes vrl-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vitrine-review-lightbox img {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}

.vitrine-review-lightbox .vrl-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.85;
}

.vitrine-review-lightbox .vrl-close:hover {
  opacity: 1;
}

/* fotos de avis clicáveis */
#seal-review-widget .resource-item img,
#seal-review-widget .tt-reviews-album img {
  cursor: zoom-in;
}

/* o menu de ordenação do Trustoo abre por classe do JS deles; aqui é a nossa */
#seal-review-widget .sort-popup {
  display: none;
}

#seal-review-widget .sort-popup.is-open {
  display: block;
}