/* ============================================================
   TIKTOK SHOP PAGE
   Carregado DEPOIS de styles.css.
   Figma: 89:996 (desktop) / 89:1015 (mobile).
   Tema da pagina: Brand/Tertiary #89E4F5.
   O hero reusa as classes da home (.hero__title / .hero__line /
   .hero__imgs) — assim o swap de imagem do script.js funciona
   aqui sem alteracao nenhuma no JS.
   ============================================================ */

/* ============ TEMA AZUL ============ */
.ts-page { background: var(--color-tertiary); }
.ts-page .header { background: var(--color-tertiary); }

.ts-page .footer { color: var(--color-tertiary); }
.ts-page .footer__top { border-bottom-color: var(--color-tertiary); }
.ts-page .footer__up { border-color: var(--color-tertiary); }
.ts-page .footer__up:hover { background: rgba(137, 228, 245, 0.1); }

/* ============ HERO ============ */
/* Figma 116:1368 — pt 48 / px 48 ; a imghero fecha com py 48 */
.ts-hero {
  background: var(--color-tertiary);
  color: var(--color-black);
  padding: 168px 48px 0;            /* 120 navbar + 48 */
}
.ts-hero .hero__line { background: var(--color-tertiary); }

/* H1: 155px @1280 = 12.109375vw. Sem teto em px, cresce com a tela.
   O 2o termo so entra quando a linha mais longa ("escale como" = 6.36x
   o font-size) nao caberia mais — assim nunca quebra. */
.ts-hero .hero__line-text {
  --hero-fs-scale: 12.109375vw;
  --hero-fs-max: calc((100vw - 112px) / 6.4); /* 96 padding + 16 padding-right */
}

/* ============ FAIXA DE RECORTES (Figma 557:2057) ============
   Tres larguras diferentes, sem gap, alinhadas ao centro.
   % sobre os 1184 do frame: 350.9 / 387.3 / 434.6 */
.ts-hero .hero__imgs {
  padding: 48px 0;
  justify-content: space-between;
}
.ts-hero .hero__img { flex: 0 0 auto; min-width: 0; }
.ts-hero .hero__img:nth-child(1) { width: 29.635%; }  /* camera */
.ts-hero .hero__img:nth-child(2) { width: 32.713%; }  /* sacolas */
.ts-hero .hero__img:nth-child(3) { width: 36.707%; }  /* telefone */

/* ============ BLOCOS DE CONTEUDO ============ */
.ts-block {
  background: var(--color-tertiary);
  padding: 0 48px 96px;             /* Figma: sem padding-top, o hero ja fecha */
}
.ts-block__inner {
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.ts-block__intro { display: flex; align-items: flex-end; }
.ts-block__intro-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  flex: 1 0 0;
}
.ts-block__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.03em;   /* -2.28px @76 */
  text-transform: uppercase;
  color: var(--color-black);
  max-width: 1012px;
  overflow-wrap: anywhere;   /* entra no min-content; break-word nao entra */
}
.ts-block__title--wide { max-width: none; }
.ts-block__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -1.52px;
  color: var(--color-black);
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ts-card {
  background: var(--color-black);
  color: var(--color-tertiary);
  padding: 32px;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ts-card__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ts-card__icon { width: 32px; height: 32px; display: inline-flex; color: var(--color-tertiary); }
.ts-card__icon svg { display: block; }
.ts-card__title-wrap {
  padding-bottom: 32px;
  border-bottom: 3px solid var(--color-tertiary);
}
.ts-card__title-wrap h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -1.52px;
}
.ts-card__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.63px;
}

/* ============ MOBILE ============ */
@media (max-width: 900px) {
  /* Figma 554:1990 — pt 32 / px 24 / pb 64, gap 48 */
  .ts-hero {
    padding: 152px 24px 64px;       /* 120 navbar + 32 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  /* 68px @402 = 16.9154vw. Teto pela linha mais longa ("e escale" = 4.13x) */
  .ts-hero .hero__line-text {
    --hero-fs-scale: 16.9154vw;
    --hero-fs-max: calc((100vw - 64px) / 4.18);
  }

  /* slot unico: uma imagem por vez, trocada pelo scroll.
     A visibilidade (.is-live / .is-active) vem do styles.css. */
  .ts-hero .hero__imgs {
    padding: 0;
    aspect-ratio: 347 / 340;        /* slot do Figma 554:2004 */
  }
  .ts-hero .hero__img,
  .ts-hero .hero__img:nth-child(1),
  .ts-hero .hero__img:nth-child(2),
  .ts-hero .hero__img:nth-child(3) { width: 100%; }

  .ts-block { padding: 48px 24px; }
  .ts-hero + .ts-block { padding-top: 0; }   /* o hero ja fecha com pb 64 */
  .ts-block__inner { gap: 64px; }
  /* align-items: flex-start faria a caixa virar fit-content — e fit-content
     nunca fica abaixo do min-content (a palavra mais longa do H2), inflando
     a caixa para alem do bloco. Stretch + width 100% prendem na largura certa. */
  .ts-block__intro { flex-direction: column; align-items: stretch; }
  .ts-block__intro-content { gap: 24px; width: 100%; }

  /* 46px nao cabe: "TRANSFORMAMOS" mede ~8.2x o font-size e os 354px do frame
     dao para 7.7x. Encolhe pela palavra mais longa (8.4 = ~2% de folga). */
  .ts-block__title,
  .ts-block__title--wide {
    font-size: min(46px, calc((100vw - 48px) / 8.4));
    max-width: 100%;
  }
  .ts-block__text {
    font-size: 28px;
    letter-spacing: -0.04em;     /* -1.12px @28 */
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ts-grid { grid-template-columns: 1fr; gap: 24px; }
  .ts-card { padding: 32px; gap: 24px; border-radius: 24px; }
  .ts-card__title-wrap { padding-bottom: 32px; }
  .ts-card__title-wrap h3 { font-size: 28px; letter-spacing: -1.12px; }
  .ts-card__text { font-size: 21px; letter-spacing: -0.63px; }
}