/* Ajustes de marca da Trol Pharma sobre o template Medixal (Envato).
   O tema inteiro é orientado a custom properties, então só precisamos
   sobrescrever a cor de destaque padrão (--accent-color: #132573). */
:root {
  --accent-color: #126787;
}

.cs_color_settings {
  display: none !important;
}

/* Preloader: riscos (losangos) da logo Trol pulsando em sequência */
.cs_preloader .trol_loader {
  width: 140px;
  height: 90px;
}

.trol_loader_shape {
  stroke: var(--accent-color);
  stroke-width: 2.5;
  fill: none;
  opacity: .25;
  transform-origin: center;
  animation: trol_loader_pulse 1.2s ease-in-out infinite;
}

.trol_loader_shape:nth-child(2) { animation-delay: .15s; }
.trol_loader_shape:nth-child(3) { animation-delay: .3s; }
.trol_loader_shape:nth-child(4) { animation-delay: .45s; }

@keyframes trol_loader_pulse {
  0%, 100% { opacity: .2; }
  40% { opacity: 1; }
}

.whatsapp_float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  background: #25d366;
  color: #fff;
  border-radius: 50px;
  padding: .65rem 1.1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.whatsapp_float:hover {
  color: #fff;
  filter: brightness(1.05);
}

.cs_footer_newsletter_form {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}

.cs_footer_newsletter_form input[type="email"] {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: .6rem .9rem;
}

.cs_product_card .cs_product_price {
  min-height: 1px;
}

/* As fotos reais da Trol têm proporção diferente das imagens de demonstração
   do template (todas quadradas 700x700) — sem isso o bloco "Sobre" estica
   demais na vertical, já que a imagem não é contida pela caixa de proporção
   fixa do template. */
.cs_about_thumbnail_1 > img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
.cs_about_thumbnail_2 > img {
  width: 220px;
  height: 220px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .cs_about_thumbnail_1 > img {
    height: 320px;
  }
  .cs_about_thumbnail_2 > img {
    width: 160px;
    height: 160px;
  }
}
