/* ============================================================
   style.css — minimal functional layer
   Goal: keep the original site 1:1. Only patch broken behavior:
     1. Marquee animation (theme set --duration via JS we don't run)
     2. Carousel touch/drag fluidity (overlay arrows + dots)
     3. Image safety (loaded media never overflow viewport)
     4. PubMed list bullet shape fix
   No font overrides. No spacing overrides. No layout changes.
   ============================================================ */

/* Image safety: never let a media element break layout */
img, video, picture, source { max-width: 100%; }
img { height: auto; }

/* ============================================================
   Poppins font scoped to the testimonials sections:
   - .gps-599193700433658764 = "mulheres reais. resultados reais." (1st block)
   - .gps-599046354366366263 = "Mulheres Reais. Resultados Reais." (2nd block)
   Override the GemPages font CSS variables to swap the family inside
   these two sections only.
   ============================================================ */
.gps-599193700433658764,
.gps-599193700433658764 *,
.gps-599046354366366263,
.gps-599046354366366263 * {
  font-family: 'Poppins', var(--g-font-body, sans-serif), system-ui !important;
}
.gps-599193700433658764 [style*="--ff:"],
.gps-599046354366366263 [style*="--ff:"] {
  --ff: 'Poppins', sans-serif !important;
}

/* Extend PPMori @font-face to cover all weights (font-synthesis from the regular file).
   Without this, bold testimonial text falls back to Inter (which renders differently). */
@font-face {
  font-family: 'PPMori';
  src: url('../assets/fonts/591795648274105174-74c195ce-a3c0-4396-9218-dddc34618188_0a149e.otf') format('opentype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'PPMori';
  src: url('../assets/fonts/591795648274105174-74c195ce-a3c0-4396-9218-dddc34618188_0a149e.otf') format('opentype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* =============================================================================
   AS SEEN IN — custom marquee, pure CSS hardware-accelerated.
   Track contains logos duplicated 2x; animation moves -50% so the second
   half lands exactly where the first started — seamless infinite loop.
   ============================================================================= */
.as-seen-marquee {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  padding: 28px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.as-seen-track {
  display: flex;
  align-items: center;
  gap: 72px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: as-seen-scroll 32s linear infinite;
  will-change: transform;
}
.as-seen-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
}
.as-seen-item img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes as-seen-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
  .as-seen-marquee:hover .as-seen-track { animation-play-state: paused; }
}
@media (max-width: 767px) {
  .as-seen-marquee { padding: 20px 0; }
  .as-seen-track { gap: 48px; animation-duration: 24s; }
  .as-seen-item { height: 80px; }
}

/* =============================================================================
   FLUID CAROUSEL TOUCH/DRAG — preserve original .gem-slider-item widths
   We DO NOT change slide widths or layout. We only:
     - replace the GemPages JS-driven scrolling with native scroll-snap
     - hide its arrow buttons (often broken) and inject our own overlay arrows + dots
   ============================================================================= */
.gem-slider {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.gem-slider::-webkit-scrollbar { display: none; }

/* Each slide snaps; preserve original width/min-width/max-width set inline */
.gem-slider > .gem-slider-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-tap-highlight-color: transparent;
}

/* Hide GemPages' own arrow buttons and dot container (we render reliable ones via JS).
   GemPages' .gp-carousel-dot-container is empty in the static export — its dots
   are normally rendered by gp-carousel JS at runtime, but they don't sync with
   our scroll-snap-driven slider. Hiding it prevents an empty/non-syncing dot
   strip from showing alongside our injected .fc-dots. */
gp-carousel .gp-carousel-action-back,
gp-carousel .gp-carousel-action-next,
gp-carousel .gem-slider-previous,
gp-carousel .gem-slider-next,
gp-carousel .gp-carousel-dot-container { display: none !important; }

/* Custom arrow buttons (injected by main.js) */
.fc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fc-arrow:hover { background: #fff; }
.fc-arrow:active { transform: translateY(-50%) scale(0.96); }
.fc-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.fc-arrow--prev { left: 8px; }
.fc-arrow--next { right: 8px; }
.fc-arrow svg { width: 18px; height: 18px; display: block; pointer-events: none; }
@media (max-width: 480px) {
  .fc-arrow { width: 34px; height: 34px; }
  .fc-arrow svg { width: 15px; height: 15px; }
}

/* Pagination dots (injected by main.js) */
.fc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.fc-dots > li { list-style: none; display: contents; }
.fc-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: background-color .2s ease, width .25s ease;
  flex: 0 0 8px;
}
.fc-dot:hover { background: rgba(0, 0, 0, 0.4); }
.fc-dot--active {
  background: #7B133B;
  width: 22px;
  flex: 0 0 22px;
}

/* =============================================================================
   PubMed citation bullets — list dots get stretched by parent flex
   ============================================================================= */
ul.list-unstyled li::marker,
.gp-icon-list-icon svg,
.gp-icon-list-icon img {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
}
/* Round dot before each citation entry — prevent stretching by flex parent */
[class*="bullet"], [class*="dot"]:not(.fc-dot) {
  flex-shrink: 0;
}
/* Common pattern: small circular bullet inside a flex row */
.gp-icon-list-wrapper > * > [class*="icon"],
.gp-icon-list-icon {
  flex: 0 0 auto !important;
  align-self: flex-start;
}
.gp-icon-list-icon svg { aspect-ratio: 1 / 1; }

/* =============================================================================
   PMC · Centro PubMed source badge — substitui a logo PNG branca-sobre-branca
   por marca legível em qualquer fundo. Cor herdada do contexto (currentColor).
   ============================================================================= */
.pmc-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  color: #ffffff;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}
.pmc-source-badge__icon {
  width: 28px;
  height: auto;
  flex: 0 0 28px;
  color: inherit;
}
.pmc-source-badge__text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.pmc-source-badge__text strong {
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 1.05em;
}
.pmc-source-badge__text sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 1px;
  opacity: 0.85;
}
@media (max-width: 480px) {
  .pmc-source-badge { font-size: 13px; gap: 8px; }
  .pmc-source-badge__icon { width: 22px; flex: 0 0 22px; }
}

/* ============================================================
   CLS prevention (PageSpeed):
   - Força aspect-ratio em TODAS as imagens que tem --aspect inline
   - Reserva altura mínima em marquee/carrossel/sliders antes do JS rodar
   ============================================================ */
img[style*="--aspect"] {
  aspect-ratio: var(--aspect, 1 / 1) !important;
  height: auto;
}
@media (max-width: 1024px) {
  img[style*="--aspect-tablet"] { aspect-ratio: var(--aspect-tablet) !important; }
}
@media (max-width: 767px) {
  img[style*="--aspect-mobile"] { aspect-ratio: var(--aspect-mobile) !important; }
}

/* Reserva espaço pros widgets antes do JS terminar de renderizar */
@media (max-width: 767px) {
}


/* Imagens sem dimensão declarada ganham aspect-ratio neutro */
img:not([width]):not([height]):not([style*="--aspect"]) {
  aspect-ratio: 1 / 1;
}

/* Sections lazy do GemPages: reserva altura pra evitar pulo quando inicializam */

/* Mantém aspect-ratio mas SEM min-height fixo nos containers GemPages
   pra não criar banner branco quando section ainda nao renderizou */

/* HIDE empty announcement bar e elementos vazios no topo
   (após strip de trackers, ficaram só estruturas sem conteúdo) */

/* HIDE TUDO acima do conteudo (announcement bar + header + menu drawer vazio) */
.shopify-section-group-header-group,
#shopify-section-sections--29181277897043__announcement-bar,
#shopify-section-sections--29181277897043__header { display: none !important; }
body > div:not(.cart-drawer):not(.modal):not(.gradient) { margin-top: 0 !important; }

/* NUCLEAR FIX: remove TUDO no topo da página */
body { padding: 0 !important; margin: 0 !important; }
.shopify-section-group-header-group { display: none !important; }
.shopify-section--announcement-bar { display: none !important; }
.utility-bar, .announcement-bar { display: none !important; }
header.header { display: none !important; }
.menu-drawer { display: none !important; }
.skip-to-content-link { display: none !important; }

/* Garante que primeira section content não tenha padding-top extra */
#MainContent { padding-top: 0 !important; margin-top: 0 !important; }
main { padding-top: 0 !important; margin-top: 0 !important; }

/* CRITICAL: hide Shopify cart-drawer custom element — it renders as 665px block at top
   creating a giant white square above hero. Cart isn't used in this single-product flow. */
cart-drawer,
cart-drawer.drawer,
.cart-drawer,
#CarrinhoDrawer { display: none !important; }