/* Página de cada modelo (/catalogo/<slug>/). Usa os tokens, o cabeçalho, o rodapé e a Moove Box de catalog.css. */
.product-page { --wrap: min(calc(100% - 48px), 1320px); overflow: visible; }
.pp-breadcrumb, .product-page main, .product-page .catalog-disclaimer { width: var(--wrap); margin-inline: auto; }
.product-page .catalog-header, .product-page .catalog-footer { width: var(--wrap); }
.catalog-header__nav > a:first-child:hover { color: var(--lime); }

/* Trilha */
.pp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.pp-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; transition: color .18s ease; }
.pp-breadcrumb a:hover { color: var(--lime); }
.pp-breadcrumb span[aria-current] { color: var(--text); }
.pp-breadcrumb svg { width: 15px; height: 15px; }

/* Topo: fotos + informações */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: start; padding: 22px 0 72px; }
.pp-gallery { position: sticky; top: 104px; align-self: start; display: grid; gap: 14px; }
.pp-stage { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid #e7e7e3; border-radius: 32px; background: #fff; }
.pp-stage__image { position: absolute; inset: 8%; display: block; width: 84%; height: 84%; object-fit: contain; object-position: center; transition: opacity .22s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.pp-stage__image.is-swapping { opacity: 0; transform: scale(.97); }
.pp-views { display: flex; gap: 10px; }
.pp-views[hidden] { display: none; }
.pp-view { display: grid; width: 116px; aspect-ratio: 4 / 3; place-items: center; padding: 4px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; transition: border-color .18s ease; }
.pp-view:hover { border-color: var(--lime-line); }
.pp-view.is-active { border-color: var(--lime); }
.pp-view img { width: 100%; height: 100%; object-fit: contain; }

.pp-info { display: flex; flex-direction: column; align-items: flex-start; padding-top: 12px; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-meta > * { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pp-meta a { border-color: var(--lime-line); color: var(--lime); }
.pp-info h1 { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(44px, 5.4vw, 76px); font-weight: 800; letter-spacing: -.06em; line-height: .95; }
.pp-lead { max-width: 520px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.pp-stock { width: 100%; margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(255, 138, 76, .4); border-radius: 14px; background: rgba(255, 138, 76, .08); color: #ff9b6b; font-size: 13px; }

.pp-colors { width: 100%; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.pp-colors__label { margin: 0 0 12px; color: var(--muted); font-size: 13px; font-weight: 600; }
.pp-colors__label strong { color: var(--text); font-family: var(--font-display); font-size: 15px; }
.pp-colors__list { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-swatch { display: grid; width: 44px; height: 44px; place-items: center; padding: 4px; border: 2px solid transparent; border-radius: 50%; transition: border-color .18s ease, transform .18s ease; }
.pp-swatch:hover { transform: scale(1.08); }
.pp-swatch span { width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: var(--swatch); }
.pp-swatch.is-selected { border-color: var(--lime); }

.pp-quick { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 24px 0 0; }
.pp-quick div { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.pp-quick dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pp-quick dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
[data-delivery] { width: 100%; }

/* Pedido em dois passos: como receber e como pagar. Cada opção mostra o preço da combinação. */
.order { display: grid; gap: 18px; margin-top: 24px; }
.order__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.order__step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.order__step legend span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 800; }
.order__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.order__option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--card-2); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.order__option:hover { border-color: var(--lime-line); }
.order__option:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); }
.order__option:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.order__option input { position: absolute; opacity: 0; pointer-events: none; }
.order__option.is-featured::after { position: absolute; top: -9px; right: 12px; padding: 3px 8px; border-radius: 6px; background: var(--lime); color: var(--ink); content: "2X GARANTIA"; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.order__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--ink); color: var(--lime); }
.order__icon svg { width: 19px; height: 19px; }
.order__copy { display: grid; min-width: 0; gap: 2px; }
.order__copy strong { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.order__copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.order__foot { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11px; font-weight: 600; }
.order__foot b { color: var(--lime); font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.order__foot em { color: var(--text); font-family: var(--font-display); font-size: 15px; font-style: normal; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.order__option:has(input:checked) .order__foot em { color: var(--lime); }
.order__conditions { display: grid; gap: 6px; margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 16px; list-style: none; }
.order__conditions li { position: relative; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.45; }
.order__conditions li::before { position: absolute; top: .5em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); content: ""; }
.order__note { margin: -8px 0 0; color: var(--muted); font-size: 11px; }
@media (max-width: 420px) {
  .order__options { grid-template-columns: 1fr; }
  .order__option.is-featured { margin-top: 4px; }
}

.pp-buy { width: 100%; margin-top: 26px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.pp-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pp-price span { color: var(--muted); font-size: 13px; }
.pp-price strong { color: var(--lime); font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.04em; }
.pp-price__detail { margin: 6px 0 0; color: var(--muted); font-size: 13px; text-align: right; }
.pp-price__detail[hidden] { display: none; }
.delivery__warranty { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.delivery__cost { display: grid; justify-items: end; color: var(--text); font-family: var(--font-display); font-size: 13px; font-style: normal; font-weight: 700; white-space: nowrap; }
.delivery__cost small { color: var(--muted); font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 600; }
.pp-cta { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 0 22px; border-radius: 99px; background: var(--lime); color: var(--ink); font-size: 15px; font-weight: 800; transition: background .18s ease, transform .18s ease; }
a.pp-cta:hover { transform: translateY(-2px); background: var(--lime-hover); }
.pp-cta svg { width: 18px; height: 18px; }
.pp-cta svg:last-child { margin-left: auto; }
.pp-cta.is-disabled { border: 1px dashed var(--line); background: transparent; color: var(--muted); }
.pp-cta--line { width: auto; margin-top: 18px; border: 1.5px solid var(--lime-line); background: transparent; color: var(--lime); }
a.pp-cta--line:hover { background: var(--lime); color: var(--ink); }
.pp-cta--line svg:last-child { margin-left: 0; }
.pp-marketplace { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 700; transition: border-color .18s ease, color .18s ease; }
.pp-marketplace:hover { border-color: var(--lime-line); color: var(--lime); }

.pp-store { display: flex; width: 100%; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 20px; transition: border-color .18s ease; }
.pp-store:hover { border-color: var(--lime-line); }
.pp-store > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.pp-store strong { font-size: 14px; }
.pp-store small { color: var(--muted); font-size: 12px; }
.pp-store > svg { width: 15px; height: 15px; color: var(--muted); }
.pp-store__icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; background: var(--lime-soft); color: var(--lime); }
.pp-store__icon svg { width: 19px; height: 19px; }

/* Seções */
.pp-section { padding: 72px 0; border-top: 1px solid var(--line); }
.pp-section__head { max-width: 720px; margin-bottom: 32px; }
.pp-section__head h2 { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
.pp-section__head p { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.pp-section#ficha .pp-section__head { margin-inline: auto; text-align: center; }
.pp-section__head--row { display: flex; max-width: none; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pp-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--lime); font-size: 14px; font-weight: 800; }

/* Detalhes */
.pp-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pp-detail { position: relative; display: block; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: #eef0ea; cursor: zoom-in; aspect-ratio: 350 / 420; }
.pp-detail img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pp-detail:hover img { transform: scale(1.06); }
.pp-detail__zoom { position: absolute; right: 12px; bottom: 12px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); opacity: 0; translate: 0 6px; transition: opacity .2s ease, translate .2s ease; }
.pp-detail:hover .pp-detail__zoom, .pp-detail:focus-visible .pp-detail__zoom { opacity: 1; translate: 0 0; }
.pp-detail__zoom svg { width: 18px; height: 18px; }
/* A primeira foto só ocupa dois espaços quando tem resolução para isso (o gerador decide). */
.pp-detail--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Foto pequena não é esticada além do tamanho real, para não borrar. */
.pp-detail { display: grid; place-items: center; }
.pp-detail img { max-width: var(--natural-w, 100%); max-height: var(--natural-h, 100%); }

/* Ficha técnica */
.pp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; }
.pp-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pp-specs dt { color: var(--muted); font-size: 14px; }
.pp-specs dd { margin: 0; font-weight: 700; text-align: right; }
.pp-note { margin: 16px 0 0; color: #6f7666; font-size: 12px; }
.pp-specs-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.pp-specs-grid .pp-specs { grid-template-columns: 1fr; }
.pp-specs-grid--solo { width: min(100%, 980px); grid-template-columns: 1fr; margin-inline: auto; }
.pp-specs-grid--solo .pp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.pp-section#ficha .pp-note { width: min(100%, 980px); margin-inline: auto; }
.pp-features { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.pp-features h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.pp-features ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14px; line-height: 1.45; }
.pp-features svg { width: 18px; height: 18px; flex: 0 0 18px; padding: 3px; border-radius: 50%; background: var(--lime); color: var(--ink); stroke-width: 2.6; }
.pp-specs-empty { max-width: 640px; padding: 28px; border: 1px dashed var(--lime-line); border-radius: 24px; }
.pp-specs-empty p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* Onde comprar */
.pp-local__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pp-local__card { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.pp-local__card strong { font-family: var(--font-display); font-size: 18px; }
.pp-local__card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.pp-local__card > a { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-size: 14px; font-weight: 800; }
.pp-local__card dl { display: grid; margin: 0; }
.pp-local__card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pp-local__card dt { color: var(--muted); }
.pp-local__card dd { margin: 0; font-weight: 700; }

/* Veja também */
.pp-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.pp-card { display: grid; min-width: 0; height: 100%; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 6px; overflow: hidden; padding: 8px 8px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); transition: border-color .2s ease, transform .2s ease; }
.pp-card:hover { transform: translateY(-4px); border-color: var(--lime-line); }
.pp-card__image { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; margin-bottom: 8px; border-radius: 18px; background: #fff; }
.pp-card__image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 8%; object-fit: contain; object-position: center; }
.pp-card__meta { padding: 0 8px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pp-card strong { padding: 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.pp-card small { display: -webkit-box; overflow: hidden; padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Tela cheia dos detalhes */
.pp-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 6, 4, .94); color: var(--text); }
.pp-lightbox[open] { display: grid; place-items: center; }
.pp-lightbox::backdrop { background: transparent; }
.pp-lightbox figure { display: grid; justify-items: center; gap: 14px; margin: 0; }
.pp-lightbox img { max-width: min(92vw, 720px); max-height: calc(100dvh - 120px); border-radius: 22px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pp-lightbox figcaption { color: var(--muted); font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.pp-lightbox__close, .pp-lightbox__nav { position: fixed; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.pp-lightbox__close:hover, .pp-lightbox__nav:hover { border-color: var(--lime); color: var(--lime); }
.pp-lightbox__close { top: 20px; right: 20px; }
.pp-lightbox__nav { top: 50%; translate: 0 -50%; }
.pp-lightbox__nav--prev { left: 20px; }
.pp-lightbox__nav--next { right: 20px; }
.pp-lightbox svg { width: 22px; height: 22px; }

@media (max-width: 1020px) {
  .pp-hero { grid-template-columns: 1fr; gap: 28px; }
  .pp-gallery { position: static; }
  .pp-details, .pp-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .product-page { --wrap: calc(100% - 28px); }
  .pp-breadcrumb { padding-top: 16px; font-size: 12px; }
  .pp-hero { padding-bottom: 48px; }
  .pp-stage { border-radius: 24px; }
  .pp-view { width: 92px; }
  .pp-info h1 { font-size: clamp(40px, 12vw, 56px); }
  .pp-section { padding: 52px 0; }
  .pp-section__head--row { flex-direction: column; align-items: flex-start; }
  .pp-details, .pp-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pp-detail { border-radius: 16px; }
  .pp-detail__zoom { opacity: 1; translate: 0 0; width: 34px; height: 34px; }
  .pp-specs, .pp-specs-grid, .pp-specs-grid--solo .pp-specs { grid-template-columns: 1fr; }
  .pp-lightbox__nav { top: auto; bottom: 20px; translate: none; }
  .pp-lightbox__nav--prev { left: calc(50% - 64px); }
  .pp-lightbox__nav--next { right: calc(50% - 64px); }
  .pp-lightbox img { max-height: calc(100dvh - 190px); }
}
@media (hover: none) {
  .pp-detail:hover img, .pp-card:hover, a.pp-cta:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-stage__image, .pp-detail img, .pp-card { transition: none; }
}

.pp-info, .pp-features, .pp-specs div, .pp-specs dt, .pp-specs dd { min-width: 0; }
.pp-info h1, .pp-specs dd { overflow-wrap: anywhere; }
.pp-specs-empty { margin-inline: auto; }
.pp-price { flex-wrap: wrap; }
.pp-views { flex-wrap: wrap; }
@media (max-width: 360px) {
  .pp-related { grid-template-columns: 1fr; }
}

/* Catálogo da loja: link para a mesma bike na Moove Box. Moove Box: selo no topo das informações. */
.pp-boxlink { border-style: dashed; border-color: var(--lime-line); }
.pp-boxlink:hover { border-color: var(--lime); }
.pp-boxlink > svg { color: var(--lime); }
.pp-meta > .pp-meta__box { display: inline-flex; align-items: center; gap: 6px; border-color: var(--lime); background: var(--lime); color: var(--ink); }
.pp-meta__box svg { width: 13px; height: 13px; }

/* Uma coluna (celular e tablet): nome, foto e logo abaixo as cores, para trocar a cor vendo a bike.
   As informações viram itens da própria grade do topo (display: contents) e são reordenadas. */
@media (max-width: 1020px) {
  .pp-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .pp-info { display: contents; }
  .pp-info > * { order: 6; }
  .pp-info > .pp-meta { order: 1; align-self: flex-start; }
  .pp-info > h1 { order: 2; }
  .pp-info > .pp-stock { order: 3; }
  .pp-gallery { order: 4; align-self: stretch; margin-top: 22px; }
  .pp-info > .pp-colors { order: 5; margin-top: 18px; padding-top: 0; border-top: 0; }
  .pp-info > .pp-lead { max-width: none; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
}