/* =========================================================
   Catálogo · página individual da peça
   Mobile-first. Reutiliza tokens/classes de catalog.css.
   ========================================================= */

.pp {
  background: var(--ed-bg);
  color: var(--ink);
}

/* ──────── v73.49 · Retorno contextual + Breadcrumbs ────────
   Voltar e localização pertencem à mesma camada de navegação. No desktop
   dividem uma única linha; no mobile o caminho é enxugado para preservar
   altura e deixar a peça começar mais cedo. */
.pp-nav-context {
  max-width: var(--ed-max);
  margin: 0 auto;
  padding: 14px var(--ed-gutter) 0;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}
.pp-context-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  flex: 0 0 auto;
  color: var(--ed-muted);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  transition: color .15s ease, transform .15s ease;
}
.pp-context-back svg { width: 16px; height: 16px; flex: 0 0 auto; }
.pp-context-back:hover { color: var(--ink); transform: translateX(-2px); }
.pp-context-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.pp-nav-context__divider {
  width: 1px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--ed-line);
}
.pp-crumbs {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-muted);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.pp-crumbs a {
  color: var(--ed-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.pp-crumbs a:hover { color: var(--ink); border-color: var(--ink); }
.pp-crumbs__sep { opacity: .5; flex: 0 0 auto; }
.pp-crumbs__current {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 899px) {
  .pp-nav-context {
    padding-top: 8px;
    gap: 9px;
  }
  .pp-context-back {
    min-height: 34px;
    font-size: 10px;
  }
  .pp-nav-context__divider { height: 12px; }
  .pp-crumbs {
    font-size: 9.5px;
    gap: 6px;
    letter-spacing: .09em;
  }
  /* No celular o nome já aparece logo abaixo como título da peça. Repeti-lo
     no breadcrumb consome largura sem acrescentar orientação. */
  .pp-crumbs__current,
  .pp-crumbs__sep--current { display: none; }
  .pp-cta__share { display: none; }
}

/* ──────── Layout principal ──────── */
.pp-grid {
  max-width: var(--ed-max);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px) var(--ed-gutter) clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 48px);
}

/* ──────── Galeria ──────── */
.pp-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-gallery__main {
  margin: 0;
  /* Moldura estável: fotos com proporções ligeiramente diferentes não
     alteram a geometria da página ao navegar pela galeria. */
  aspect-ratio: 3 / 4;
  background: var(--ed-media);
  overflow: hidden;
  border-radius: 2px;
}
.pp-gallery__main img {
  width: 100%; height: 100%;
  /* A foto preenche sempre a mesma moldura. Como as fotos da loja têm
     proporções muito próximas, o eventual recorte é mínimo e as bordas
     visíveis não mudam de posição ao navegar entre imagens. */
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: opacity .22s ease, transform .32s cubic-bezier(.2,.7,.2,1);
}
.pp-gallery__main img.is-photo-switching {
  opacity: 0;
  transform: scale(.992);
}
.pp-gallery__main--empty {
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(96px, 18vw, 220px);
  color: var(--ed-ph-ink);
  background: var(--ed-media-grad);
}

/* ──────── Carrossel da galeria ────────
   Em mobile: scroll horizontal com snap (swipe entre fotos).
   Em desktop: flex normal mostrando só o primeiro slide (override abaixo). */
.pp-gallery__carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pp-gallery__carousel::-webkit-scrollbar { display: none; }
.pp-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0;
  height: 100%;
}
.pp-gallery__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Indicador de slide ativo (dots) — só visível em mobile */
.pp-gallery__indicator {
  display: none;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
}
.pp-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ed-line);
  transition: background .15s ease, transform .15s ease;
}
.pp-gallery__dot.is-active {
  background: var(--coral-deep);
  transform: scale(1.3);
}

.pp-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.pp-gallery__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--ed-line);
  background: var(--ed-paper);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 2px;
  transition: border-color .15s, transform .15s;
}
.pp-gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pp-gallery__thumb:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.pp-gallery__thumb.is-active {
  border-color: var(--coral-deep);
  border-width: 2px;
}

/* Mobile: dots visíveis, thumbs viram secundários */
@media (max-width: 899px) {
  .pp-gallery__indicator { display: flex; }
}

/* Ação principal compacta no celular: abre a mesma gaveta de opções usada
   nos Destaques.

   Este bloco cuida apenas da APARÊNCIA. Quem posiciona é o contêiner
   .pp-mobile-purchase-actions — o botão nunca é renderizado fora dele.
   Antes o posicionamento fixo morava aqui e três camadas posteriores
   existiam só para desfazê-lo. */
.pp-mobile-bag-shortcut { display: none; }
@media (max-width: 899px) {
  .pp-mobile-bag-shortcut {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    pointer-events: auto;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(52,53,54,.96);
    color: #fff;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 0 10px 24px rgba(0,0,0,.20);
    font-family: var(--f-sans, Helvetica, Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
  }
  .pp-mobile-bag-shortcut svg { width: 21px; height: 21px; flex: 0 0 auto; }
  .pp-mobile-bag-shortcut .pp-cart__add-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pp-mobile-bag-shortcut.is-waiting {
    background: #343536;
    border-color: rgba(255,255,255,.14);
  }
  .pp-mobile-bag-shortcut.is-added {
    background: #2e7d4f;
    border-color: #2e7d4f;
    color: #fff;
  }

  /* O botão interno permanece como fallback no desktop. No celular, a ação
     compacta abre a gaveta e depois adiciona a combinação escolhida. */
  #pp-cart-add { display: none; }

  /* O seletor de variantes é movido para a gaveta no celular. A caixa
     original não pode continuar ocupando espaço quando fica sem conteúdo. */
  .pp-cart.is-mobile-sheet-source {
    display: contents;
  }
  .pp-cart.is-mobile-sheet-source .pp-cart__msg:empty {
    display: none;
  }

  /* A pilha conserva sua posição natural: WhatsApp e ação de compra ficam
     lado a lado, sem criar uma faixa fixa na parte inferior. */
  body.is-public-product .fab-stack {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* ──────── Info / ficha ──────── */
.pp-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pp-info__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0;
}
.pp-info__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.pp-info__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pp-price__old {
  color: var(--ed-muted);
  text-decoration: line-through;
  font-size: 16px;
}
.pp-price__new {
  color: var(--coral-deep);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
}
.pp-price__discount {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.pp-price__prefix {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

/* ──────── Variantes ──────── */
.pp-variants {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--ed-line);
}
.pp-variants__label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-muted);
  margin: 0;
}
.pp-sizes,
.pp-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pp-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;          /* touch target */
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ed-line);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--ed-paper);
}
.pp-color {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  background: var(--ed-paper);
}
.pp-color__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch, #d8ccc2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  display: inline-block;
}
.pp-color__name {
  font-size: 13px;
  color: var(--ink);
}

/* ──────── Seções de texto ──────── */
.pp-section {
  padding: 14px 0;
  border-top: 1px solid var(--ed-line);
}
.pp-section__h {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 10px;
}
.pp-section__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.pp-section__hint {
  font-size: 12.5px;
  color: var(--ed-muted);
  font-style: italic;
  margin: 10px 0 0;
}
.pp-meta {
  display: grid;
  grid-template-columns: minmax(112px, 150px) minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 8px;
  margin: 0;
}
.pp-meta dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ed-muted);
  align-self: center;
}
.pp-meta dd {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

/* ──────── CTAs ──────── */
.pp-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--ed-line);
}
.pp-cta__main {
  background: var(--ink);
  color: var(--ed-bg);
  border: 0;
  padding: 18px 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
  border-radius: 2px;
  min-height: 56px;          /* touch friendly */
}
.pp-cta__main:hover { background: var(--coral-deep); }
.pp-cta__share {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ed-line);
  padding: 0;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  border-radius: 50%;
  overflow: hidden;
}
.pp-cta__share svg {
  width: 18px;
  height: 18px;
  display: block;
}
.pp-cta__share:hover {
  border-color: var(--ink);
  color: var(--coral-deep);
}

/* ──────── Peças relacionadas ──────── */
.pp-related {
  max-width: var(--ed-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--ed-gutter);
  border-top: 1px solid var(--ed-line);
}
.pp-related__h {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 0 0 24px;
  color: var(--ink);
}
.pp-related__h em { color: var(--coral-deep); }
.pp-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* v36 fix: mesma guarda anti-overflow do manifesto (min-content do grid) */
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 28px 20px;
}
.pp-related__card { display: block; }
.pp-related__card figure {
  margin: 0 0 12px;
  aspect-ratio: 3 / 4;
  background: var(--ed-media);
  overflow: hidden;
  border-radius: 2px;
}
.pp-related__card figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.pp-related__card:hover figure img { transform: scale(1.04); }
.pp-related__placeholder {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 56px;
  color: var(--ed-ph-ink);
  background: var(--ed-media-grad);
}
.pp-related__name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 4px;
}
.pp-related__price {
  font-size: 13px;
  color: var(--coral-deep);
  font-feature-settings: "tnum" 1;
  margin: 0;
}

/* ──────── Toast ──────── */
.pp-toast {
  position: fixed;
  bottom: calc(24px + var(--ed-lgpd-h, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  background: var(--ink);
  color: var(--ed-bg);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 1100;
  box-shadow: 0 12px 32px rgba(var(--ed-shade), .2);
}
.pp-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────────
   Desktop: layout 2 colunas (galeria | ficha)
   ───────────────────────────────────────────── */
@media (min-width: 900px) {
  .pp-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    padding-top: clamp(28px, 4vw, 48px);
  }
  .pp-gallery {
    position: relative;
    top: auto;
    align-self: start;
  }
  /* Em desktop, carrossel não rola: imagem grande fixa, troca via thumbs.
     Os outros slides ficam ocultos para não criar barra de scroll. */
  .pp-gallery__carousel {
    overflow: hidden;
  }
  .pp-gallery__slide:not(:first-child) {
    display: none;
  }
  .pp-info {
    padding-top: 12px;
  }
  .pp-cta {
    flex-direction: row;
    align-items: stretch;
  }
  .pp-cta__main {
    flex: 1;
  }
  .pp-cta__share {
    flex: 0 0 auto;
  }
  .pp-related__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─────────────────────────────────────────────
   Mobile: CTA fixo no rodapé sempre visível
   Padrão usado por Aritzia, Mango, Nike, Magazine Luiza.
   ───────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Respiro apenas para os controles flutuantes compactos. Não existe mais
     uma faixa fixa ocupando a largura inteira da tela. */
  .pp-cta { display: none; }
}

/* ──────── Seletor de variantes (cor/tamanho) ────────
   O picker agora fica logo abaixo do preço (era o último bloco da ficha,
   depois de descrição/composição — ninguém achava). Botões de cor ganham
   a bolinha de amostra da cor. */
.pp-cart { margin-top: 4px; }
.pp-cart__opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;          /* alvo de toque confortável */
}
.pp-cart__opt .pp-cart__swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--swatch, #d8ccc2);
  border: 1px solid rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.pp-cart__opt.is-sel .pp-cart__swatch { border-color: rgba(255,255,255,.6); }
.pp-cart__selected {
  font-size: 12.5px;
  color: var(--ed-muted, #8a7e6e);
  margin: 2px 0 10px;
  min-height: 16px;
}
.pp-cart__selected strong { color: var(--ink); font-weight: 600; }

/* Gaveta de cor/tamanho da página individual. O conteúdo real do seletor
   é movido para cá apenas no mobile, portanto não há controles duplicados. */
.pp-option-sheet { z-index: 1060; }
.pp-option-sheet__panel { max-height: min(78vh, 620px); }
.pp-option-sheet__body {
  max-height: min(52vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}
.pp-option-sheet .pp-cart__choice-intro { margin-bottom: 14px; }
.pp-option-sheet .pp-cart__selected { margin-bottom: 4px; }
.pp-option-sheet .pp-cart__row { margin-bottom: 10px; }
.pp-option-sheet .px-sheet__confirm { width: 100%; margin-top: 12px; }
.pp-option-sheet .px-sheet__scrim {
  width: 100%;
  border: 0;
  padding: 0;
  cursor: default;
}
.pp-option-sheet .pp-cart__add.is-attention {
  animation: pp-option-nudge .26s ease 2;
}
@keyframes pp-option-nudge {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (min-width: 900px) {
  .pp-option-sheet { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-related__card figure img,
  .pp-toast,
  .pp-gallery__main img,
  .pp-gallery__thumb { transition: none; }
  .pp-gallery__main img.is-photo-switching { opacity: 1; transform: none; }
}

/* ─── Etiqueta de roupa: ficha técnica como a etiqueta costurada de
   uma peça. Borda dupla — sólida fina por fora, TRACEJADA por dentro
   (a costura) — e tipografia mono. Temático, informativo, atelier. ─── */
.pp-etiqueta {
  border: 1px solid var(--ed-line);
  padding: 18px 20px 16px;
  position: relative;
  background: var(--ed-paper);
}
.pp-etiqueta::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--ed-muted);
  border: 1px dashed color-mix(in srgb, var(--ed-muted) 55%, transparent);
  pointer-events: none;
}
.pp-etiqueta + .pp-etiqueta { margin-top: 14px; }
.pp-etiqueta__h {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ed-muted);
}
.pp-etiqueta .pp-meta dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pp-etiqueta .pp-meta dd,
.pp-etiqueta .pp-section__text {
  font-family: var(--f-mono);
  font-size: 12.5px;
}
.pp-etiqueta .pp-section__hint {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ed-muted);
}

/* ─── Guia de medidas (configurável): <details> discreto no padrão da
   etiqueta — reduz troca, nº 1 do vestuário. Some quando desligado ou
   sem conteúdo. ─── */
.pp-guide { margin: 18px 0 6px; }
.pp-guide__summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-muted);
  border-bottom: 1px dashed var(--ed-muted);
  border-bottom: 1px dashed color-mix(in srgb, var(--ed-muted) 55%, transparent);
  padding-bottom: 2px;
  min-height: 40px;              /* alvo de toque confortável */
  display: inline-flex; align-items: center;
}
.pp-guide__summary::-webkit-details-marker { display: none; }
.pp-guide__summary:hover { color: var(--ink); }
.pp-guide__body {
  margin-top: 12px;
  border: 1px solid var(--ed-line);
  background: var(--ed-paper);
  padding: 16px 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-line;   /* respeita as quebras digitadas nas Settings */
  position: relative;
}
.pp-guide__body::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px dashed var(--ed-muted);
  border: 1px dashed color-mix(in srgb, var(--ed-muted) 55%, transparent);
  pointer-events: none;
}

/* "à vista" — o preço grande é o preço à vista; o parcelado (com a taxa
   do PSP embutida via Tabela Price) vem depois, no mesmo registro mono. */
.pp-installments__avista {
  color: var(--ink);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════
   v74.0.107 · Mobile — galeria não pode alargar a página
   -------------------------------------------------------------------
   A faixa de miniaturas é horizontal e rolável. Como .pp-gallery era um
   item de CSS Grid com min-width:auto, o min-content das várias miniaturas
   podia aumentar a largura mínima do item e, em celulares estreitos,
   aumentar o scrollWidth do documento inteiro.

   Resultado: um gesto horizontal podia deslocar a PÁGINA, cortando logo,
   cabeçalho e imagem — exatamente o efeito visto em produção.

   A correção deixa os itens do grid encolherem até a largura da coluna e
   mantém o excedente rolável somente dentro dos carrosséis da galeria.
   Não escondemos overflow no body: corrigimos a causa na origem.
   ═══════════════════════════════════════════════════════════════════ */
.pp-grid > * {
  min-width: 0;
}

.pp-gallery,
.pp-gallery__main,
.pp-gallery__carousel,
.pp-gallery__thumbs {
  min-width: 0;
  max-width: 100%;
}

/* ═══════════════ v72.71 · Galeria com acabamento do catálogo ═══════════════ */
.pp-gallery__main,
.pp-gallery__carousel,
.pp-gallery__slide,
.pp-gallery__main img,
.pp-gallery__slide img {
  border-radius: 14px;
}

/* A moldura simples recorta seus limites. O carrossel mantém o overflow-x
   definido na regra-base para que o swipe mobile continue navegável. */
.pp-gallery__main:not(.pp-gallery__carousel) {
  overflow: hidden;
}

@media (max-width: 720px) {
  .pp-gallery__main,
  .pp-gallery__carousel,
  .pp-gallery__slide,
  .pp-gallery__main img,
  .pp-gallery__slide img {
    border-radius: 12px;
  }
}

/* v72.77 · WhatsApp flutuante não compete com a ação de compra na página da
   peça. O contato permanece no conteúdo/rodapé e no menu da loja.
   (O reposicionamento do CTA que vivia aqui foi absorvido pelo contêiner
   .pp-mobile-purchase-actions — ver o bloco v73.52 ao final do arquivo.) */
@media (max-width: 899px) {
  body.is-public-product .wa-fab {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v73.15 · Página da peça — refinamento desktop
   A foto continua protagonista, mas a ficha ganha largura controlada,
   sticky confortável e hierarquia de compra mais próxima de uma boutique.
   Mobile (<900px) permanece intocado.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .pp-nav-context,
  .pp-crumbs,
  .pp-grid,
  .pp-related { max-width: 1440px; }

  .pp-nav-context { padding-top: 16px; }
  .pp-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
    gap: clamp(54px, 6vw, 96px);
    padding-top: 28px;
    padding-bottom: 96px;
    align-items: start;
  }
  .pp-gallery { min-width: 0; gap: 14px; }
  .pp-gallery__main,
  .pp-gallery__carousel {
    max-height: min(76vh, 900px);
  }
  .pp-gallery__main img,
  .pp-gallery__slide img { object-position: center center; }
  .pp-gallery__thumbs { gap: 10px; padding-top: 2px; }
  .pp-gallery__thumb { width: 72px; height: 92px; border-radius: 3px; }

  .pp-info {
    position: sticky;
    top: 126px;
    max-width: 520px;
    gap: 18px;
    padding: 18px 0 0;
  }
  .pp-info__eyebrow { font-size: 10px; letter-spacing: .24em; }
  .pp-info__title {
    font-size: clamp(42px, 4.2vw, 64px);
    line-height: .98;
    max-width: 12ch;
  }
  .pp-price__new { font-size: clamp(24px, 2vw, 30px); }
  .pp-cart { margin-top: 8px; }
  .pp-cart__opt { min-height: 42px; }
  .pp-section { padding: 16px 0; }
  .pp-section__text { max-width: 58ch; }
  .pp-cta { margin-top: 18px; gap: 12px; }
  .pp-cta__main { min-height: 60px; border-radius: 4px; }
  .pp-cta__share { width: 48px; min-width: 48px; height: 48px; border-radius: 50%; }
  .pp-related { padding-top: 64px; padding-bottom: 96px; }
  /* v73.47 · As colunas da faixa são decididas pelo bloco v73.46/47, no
     fim do arquivo. A declaração de 4 colunas que morava aqui já não
     valia nada e sobrevivia só como ruído de leitura. */
  .pp-related__list { gap: 34px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v73.17 · Página da peça — acabamento desktop final
   -------------------------------------------------------------------
   Preserva integralmente o fluxo mobile. No desktop, evita que a galeria
   cresça/corte demais em 1920+, melhora a leitura da ficha sticky e deixa
   relacionados no mesmo trilho do catálogo principal.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .pp-nav-context,
  .pp-grid,
  .pp-related { max-width: 1560px; }

  .pp-grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(400px, .78fr);
    gap: clamp(58px, 5.6vw, 92px);
    padding-top: 30px;
    padding-bottom: 104px;
  }
  .pp-gallery {
    width: 100%;
    /* v73.35 · Foto protagonista sem ultrapassar a janela.
       75vh - 145px equivale à largura de uma moldura 3:4 cuja altura cabe
       na viewport descontando navegação/breadcrumb/respiro. Em telas altas
       ela ainda pode chegar aos 820px pedidos; em notebooks reduz sozinha. */
    max-width: min(820px, calc(75vh - 145px));
    justify-self: center;
  }
  /* A geometria vem exclusivamente da moldura, nunca da dimensão intrínseca
     do arquivo carregado. Isso elimina reflow/salto ao trocar a foto. */
  .pp-gallery__main,
  .pp-gallery__carousel {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
  .pp-gallery__carousel {
    position: relative;
    display: block;
    overflow: hidden;
  }
  .pp-gallery__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .pp-gallery__main img,
  .pp-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .pp-info {
    top: 132px;
    max-width: 540px;
    gap: 17px;
    padding-top: 10px;
  }
  .pp-info__title {
    max-width: 14ch;
    font-size: clamp(40px, 3.65vw, 58px);
    line-height: 1.01;
  }
  .pp-info__price { gap: 9px; }
  .pp-cart { margin-top: 5px; }
  .pp-section { padding: 15px 0; }
  .pp-section__text { line-height: 1.65; }
  .pp-cta { margin-top: 14px; }
  .pp-cta__main { min-height: 58px; }

  .pp-related {
    padding-top: 68px;
    padding-bottom: 104px;
  }
  .pp-related__list { gap: 38px 28px; }
}

/* Relacionados seguem a mesma densidade do catálogo principal. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .pp-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Galeria mobile consolidada: swipe é parte da regra-base, não um hotfix.
   `overflow-x:auto` permanece ativo até o breakpoint desktop (900px). */
@media (max-width: 899px) {
  .pp-gallery__carousel {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
  .pp-gallery__slide { width: 100%; }
}


/* v73.41 · Campos livres da ficha técnica precisam crescer e quebrar linha
   dentro da etiqueta, nunca atravessar sua moldura. */
.pp-meta__long,
.pp-meta__measurements {
  min-width: 0;
  max-width: 100%;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: normal;
}
.pp-etiqueta {
  overflow: hidden;
  padding: 20px 24px 18px;
}
.pp-etiqueta .pp-meta {
  width: 100%;
  min-width: 0;
}
@media (max-width: 520px) {
  .pp-meta { grid-template-columns: 1fr; row-gap: 4px; }
  .pp-meta dd { margin-bottom: 8px; }
}

/* v73.48 · O bloco de espaçamento v73.41 e a tentativa v73.42 de colocar
   relacionados dentro da coluna direita foram removidos. Ambos estavam
   integralmente aposentados pela v73.43+, mas ainda alteravam a cascata
   (inclusive anulando o sticky da ficha com `position: static`). */

/* ═══════════════════════════════════════════════════════════════════
   v73.43 · Ficha primeiro, compra depois + relacionados editoriais
   -------------------------------------------------------------------
   A cliente abriu os detalhes para conhecer a peça. Em desktop, Sobre a
   peça e Guia de medidas aparecem antes da escolha. O picker perde a caixa
   pesada e vira duas linhas compactas. Relacionados voltam a ocupar a largura
   editorial da página — não ficam comprimidos na coluna direita.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Relacionados permanecem no trilho editorial em largura total. */
  .pp-related--full {
    display: block !important;
    max-width: 1560px;
    padding-top: 28px;
    padding-bottom: 92px;
  }
  .pp-related--full .pp-related__h {
    font-size: clamp(26px, 2.2vw, 34px);
    margin-bottom: 24px;
  }
  .pp-related--full .pp-related__list {
    gap: 34px 26px;
  }
  .pp-related--full .pp-related__name { font-size: 18px; }

  /* Evita somar dois grandes respiros entre a ficha e os relacionados. */
  .pp-grid { padding-bottom: 18px; }

  /* Escolha compacta: sem “cartão dentro de cartão”. */
  .pp-info .pp-cart {
    margin-top: 2px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--ed-line);
    border-radius: 0;
  }
  .pp-info .pp-cart__choice-intro {
    display: none;
  }
  .pp-info .pp-cart__options {
    display: grid;
    gap: 8px;
  }
  .pp-info .pp-cart__row {
    display: grid;
    grid-template-columns: minmax(88px, 112px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .pp-info .pp-cart__row.is-missing {
    border: 0;
    background: transparent;
  }
  .pp-info .pp-cart__label {
    margin: 0;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .pp-info .pp-cart__required { display: none; }
  .pp-info .pp-cart__step {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }
  .pp-info .pp-cart__opts {
    min-width: 0;
    gap: 6px;
  }
  .pp-info .pp-cart__opt {
    min-height: 36px;
    padding: 6px 12px;
  }
  .pp-info .pp-cart__selected {
    margin: 6px 0 4px;
    min-height: 0;
  }
  .pp-info #pp-cart-add {
    margin-top: 8px;
  }

  /* Sobre a peça assume papel de abertura editorial da ficha. */
  .pp-info > .pp-section:first-of-type {
    padding-top: 18px;
  }
  .pp-info > .pp-section:first-of-type .pp-section__text {
    font-size: 15.5px;
    line-height: 1.68;
  }
  .pp-info > .pp-guide {
    margin-top: -2px;
    margin-bottom: 2px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .pp-related--full .pp-related__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* @bloco: cta-mobile-e-pilha
   ═══════════════════════════════════════════════════════════════════
   v73.57 · Mobile — dock flutuante: compartilhar | comprar | sacola
   -------------------------------------------------------------------
   As três ações deixam de disputar superfícies diferentes. O dock é uma
   única faixa geométrica: utilidade à esquerda, CTA principal no centro e
   sacola à direita. O rodapé da página reserva a altura do dock, portanto o
   último conteúdo continua totalmente alcançável e legível.
   ═══════════════════════════════════════════════════════════════════ */
.pp-mobile-purchase-actions { display: none; }

@media (max-width: 899px) {
  body.is-public-product .pp-mobile-purchase-actions {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom) + var(--ed-lgpd-h, 0px));
    z-index: 260;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 430px;
    margin-inline: auto;
    padding: 0;
    pointer-events: none;
  }

  /* O FAB global é substituído pelo atalho dedicado no próprio dock. */
  body.is-public-product .fab-stack { display: none; }

  body.is-public-product .pp-mobile-bag-shortcut {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    pointer-events: auto;
  }
  .pp-mobile-bag-shortcut:active { transform: translateY(1px); }

  body.is-public-product .pp-mobile-action-icon {
    position: relative;
    width: 54px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ed-line);
    border: 1px solid color-mix(in srgb, var(--ed-line) 86%, transparent);
    border-radius: 50%;
    background: var(--ed-paper);
    background: color-mix(in srgb, var(--ed-paper) 96%, transparent);
    color: var(--ink);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    cursor: pointer;
    pointer-events: auto;
  }
  body.is-public-product .pp-mobile-action-share { grid-column: 1; }
  body.is-public-product .pp-mobile-action-cart { grid-column: 3; }
  body.is-public-product .pp-mobile-action-icon svg { width: 20px; height: 20px; display: block; }
  body.is-public-product .pp-mobile-action-icon:active { transform: translateY(1px); }
  body.is-public-product .pp-mobile-action-icon:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

  .pp-mobile-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--ed-bg);
    border-radius: 11px;
    background: var(--coral-deep);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .pp-mobile-cart-count[hidden] { display: none; }

  /* Reserva física: o dock é fixed, mas o final da página nunca fica por
     trás dele. A altura do LGPD entra na conta enquanto o aviso existe. */
  body.is-public-product .pp {
    padding-bottom: calc(96px + env(safe-area-inset-bottom) + var(--ed-lgpd-h, 0px));
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom) + var(--ed-lgpd-h, 0px));
  }
}

@media (max-width: 360px) {
  body.is-public-product .pp-mobile-purchase-actions {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 6px;
  }
  body.is-public-product .pp-mobile-bag-shortcut {
    min-height: 48px;
    height: 48px;
    padding-inline: 10px;
    font-size: 12px;
  }
  body.is-public-product .pp-mobile-action-icon {
    width: 46px;
    height: 46px;
  }
}
/* @fim-bloco: cta-mobile-e-pilha */

/* ═══════════════════════════════════════════════════════════════════
   v73.44 · Galeria empilhada no desktop largo + relacionados sem órfão
   -------------------------------------------------------------------
   O carrossel de foto única deixava a coluna esquerda mais curta que a
   ficha sticky à direita — a origem do vazio que a v73.42 tentou tapar
   com relacionados inline e a v73.43 desfez. Acima de 1280px a galeria
   passa a EMPILHAR: foto 1 em largura cheia, as duas seguintes em par,
   e assim por diante (1 · 2+3 · 4 · 5+6 …). A coluna esquerda ganha
   altura real, o sticky da ficha passa a ter para onde correr e todas
   as fotos cadastradas ficam visíveis sem exigir clique.

   O ritmo `3n+1` nunca deixa órfão: toda peça em posição de par tem
   companheira, e a última sozinha volta a ocupar a linha inteira.

   Abaixo de 1280px nada muda — carrossel + thumbs no desktop estreito,
   swipe no celular.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .pp-gallery {
    /* A moldura única deixa de ditar a largura: quem manda agora é a
       coluna do grid. Sem isto a pilha herdaria o teto de 820px. */
    max-width: none;
    justify-self: stretch;
    gap: 12px;
  }

  .pp-gallery__carousel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    position: static;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Reverte o slide absoluto (v73.35) e a ocultação dos irmãos (≥900px). */
  .pp-gallery__carousel .pp-gallery__slide,
  .pp-gallery__carousel .pp-gallery__slide:not(:first-child) {
    display: block;
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    aspect-ratio: 3 / 4;
    scroll-snap-align: none;
  }

  /* Ritmo editorial: cheia, par, cheia, par… */
  .pp-gallery__carousel .pp-gallery__slide:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  /* Última foto sozinha na linha de par volta à largura cheia. */
  .pp-gallery__carousel .pp-gallery__slide:last-child:nth-child(3n + 2) {
    grid-column: 1 / -1;
  }

  /* Com todas as fotos à vista, thumbs e dots viram ruído. Continuam no
     DOM porque o seletor de cor ainda os usa como índice. */
  .pp-gallery__carousel ~ .pp-gallery__thumbs,
  .pp-gallery__carousel ~ .pp-gallery__indicator {
    display: none;
  }
}

/* A quarta sugestão só existe onde há quatro colunas. Fora do trilho de
   1280px+ ela ficaria sozinha numa segunda linha — o buraco que o
   `LIMIT 3` original evitava às custas de uma coluna vazia. */
.pp-related__list > li:nth-child(n + 4) { display: none; }
/* v73.47 · A v73.44 liberava a quarta sugestão acima de 1280px porque a
   faixa tinha 4 colunas. A v73.46 fixou 3 cards grandes; liberar a quarta
   passou a criar uma segunda linha com um item só. Segue oculta em todo
   lugar, e o servidor voltou a pedir apenas 3. */

/* ═══════════════════════════════════════════════════════════════════
   v73.46 · Galeria híbrida: protagonista + 4 secundárias
   -------------------------------------------------------------------
   A pilha ilimitada da v73.44 criava uma página muito longa quando o
   produto tinha 8–12 fotos. No desktop largo, a abertura passa a mostrar
   apenas cinco: principal em largura total e quatro secundárias em 2x2.
   As demais permanecem acessíveis via “Ver todas”, sem perder variantes.
   ═══════════════════════════════════════════════════════════════════ */
.pp-gallery__show-all { display: none; }

@media (min-width: 1280px) {
  .pp-gallery__carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* A principal continua protagonista. */
  .pp-gallery__carousel .pp-gallery__slide:nth-child(1) {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 4;
  }

  /* Secundárias: grade 2x2 mais compacta que a pilha editorial antiga. */
  .pp-gallery__carousel .pp-gallery__slide:nth-child(n + 2):nth-child(-n + 5) {
    grid-column: auto;
    aspect-ratio: 4 / 5;
  }

  /* Recolhe a sexta em diante na abertura. */
  .pp-gallery__carousel .pp-gallery__slide:nth-child(n + 6) {
    display: none;
    grid-column: auto;
    aspect-ratio: 4 / 5;
  }

  /* Expansão intencional: só então o restante entra no fluxo em pares. */
  .pp-gallery__carousel.is-expanded .pp-gallery__slide:nth-child(n + 6) {
    display: block;
  }

  /* Neutraliza o ritmo 3n+1 da v73.44 para a nova grade. */
  .pp-gallery__carousel .pp-gallery__slide:nth-child(3n + 1),
  .pp-gallery__carousel .pp-gallery__slide:last-child:nth-child(3n + 2) {
    grid-column: auto;
  }
  .pp-gallery__carousel .pp-gallery__slide:nth-child(1) {
    grid-column: 1 / -1;
  }

  .pp-gallery__show-all {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--ed-line);
    background: transparent;
    color: var(--ink);
    font: 500 12px/1.2 var(--f-sans, Helvetica, Arial, sans-serif);
    letter-spacing: .02em;
    cursor: pointer;
    border-radius: 999px;
    transition: border-color .15s ease, background .15s ease;
  }
  .pp-gallery__show-all:hover { border-color: var(--ink); background: rgba(0,0,0,.025); }
  .pp-gallery__show-all svg { width: 17px; height: 17px; transition: transform .2s ease; }
  .pp-gallery__show-all.is-expanded svg { transform: rotate(180deg); }

  /* Fecha a apresentação principal sem um corredor branco até as sugestões. */
  .pp-grid { padding-bottom: clamp(44px, 4vw, 64px); }

  /* Recomendações voltam a ser um capítulo editorial forte: 3 cards grandes. */
  .pp-related--full {
    padding-top: clamp(42px, 4.5vw, 64px);
    padding-bottom: clamp(72px, 7vw, 104px);
  }
  .pp-related--full .pp-related__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 30px;
  }
  .pp-related__list > li:nth-child(n + 4) { display: none !important; }
  .pp-related--full .pp-related__h {
    font-size: clamp(28px, 2.4vw, 38px);
    margin-bottom: 28px;
  }
  .pp-related--full .pp-related__name { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v73.47 · Fecha os buracos abertos pela grade 2x2
   -------------------------------------------------------------------
   1. A grade da v73.46 volta a produzir órfão quando o total de fotos é
      PAR: a última secundária fica sozinha em meia largura e abre um
      vazio à direita. Foi exatamente isso que o ritmo `3n+1` da v73.44
      evitava. A regra abaixo devolve a linha inteira a essa foto.

      Posição par + última = índice ímpar entre as secundárias, portanto
      sem companheira. Com a galeria recolhida a última do DOM está
      oculta e a regra não tem efeito — e não precisa ter, porque cinco
      fotos formam um 2x2 completo.

   2. Categoria com menos peças que colunas deixava a faixa de sugestões
      com um terço vazio. O número de colunas passa a vir da contagem
      real, publicada pelo template.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .pp-gallery__carousel .pp-gallery__slide:nth-child(2n):last-child {
    grid-column: 1 / -1;
  }

  .pp-related--full .pp-related__list {
    grid-template-columns: repeat(var(--pp-related-cols, 3), minmax(0, 1fr));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v73.48 · Auditoria visual: sticky adaptativo + relacionados calibrados
   -------------------------------------------------------------------
   - a ficha só fica sticky quando cabe inteira na altura útil da janela;
     isso evita uma coluna "presa" cujo rodapé não pode ser alcançado;
   - 1/2 relacionados mantêm presença editorial sem virar pôsteres enormes;
   - fotos relacionadas recebem espaço estável e boa densidade visual;
   - slides têm margem de rolagem para não pararem sob a navegação.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* O JS adiciona is-sticky-fit apenas quando a ficha cabe na viewport. */
  .pp-info { position: static; }
  .pp-info.is-sticky-fit {
    position: sticky;
    top: 112px;
    align-self: start;
  }
}

@media (min-width: 1280px) {
  .pp-gallery__slide { scroll-margin-top: 104px; }

  .pp-related--full .pp-related__list {
    width: 100%;
    margin-right: auto;
  }
  .pp-related--full .pp-related__list--1 { max-width: 430px; }
  .pp-related--full .pp-related__list--2 { max-width: 890px; }
  .pp-related--full .pp-related__list--3 { max-width: 1320px; }
}

.pp-related__card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* v74.0.69 · descrição é livre; URLs/palavras muito longas não podem gerar overflow. */
.pp-section__text,
.pp-title {
  overflow-wrap: anywhere;
  word-break: normal;
}
.pp-section__text { text-wrap: pretty; }