/* DK Pneus · página do produto (#/pneu/:slug). Prefixo pd-.
   Base: css/app.css (cores, fontes, botões, preço, selos, .opcao, .qtd, bloco de animação). Nada de degradê em texto, vidro ou neon.
   Animação de entrada: só sob .pd-anim (a página acabou de entrar) e quando o bloco [data-pd-anima] ganha .is-vista.
   Sem .pd-anim (redesenho por estoque, "reduzir movimento") tudo aparece direto no estado final. */

.pd {
  --pd-topo: 78px;                 /* altura do topo fixo no computador (encolhe para 66 px ao rolar) */
  --pd-raio: 16px;
  /* escala da etiqueta Inmetro: tons sóbrios, do verde ao telha */
  --pd-esc-A: #2F7D4E; --pd-esc-B: #5C9844; --pd-esc-C: #98A83A; --pd-esc-D: #C9A23A;
  --pd-esc-E: #D08436; --pd-esc-F: #C5632F; --pd-esc-G: #AF432F;
  padding-bottom: 8px;
}
body.rolou .pd { --pd-topo: 66px; }
.pd .migalhas { padding: 18px 0 14px; }
.pd [tabindex="-1"]:focus { outline: none; }
.pd-link { color: var(--azul); font-weight: 700; }
.pd-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ================= topo: foto + compra ================= */
.pd-topo {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 44px; align-items: start;
  background: #fff; border-radius: var(--pd-raio); box-shadow: var(--sombra-1); padding: 28px;
}

/* galeria */
.pd-galeria { position: sticky; top: calc(var(--pd-topo) + 20px); transition: top .25s var(--ease, ease); }
.pd-foto { position: relative; aspect-ratio: 1 / .92; border-radius: 14px; background: #F3F4F7; overflow: hidden; }
.pd-foto > .selo { position: absolute; z-index: 2; top: 16px; left: 16px; height: 26px; padding: 0 10px; font-size: 12px; }
.pd-foto-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 7%; }
.pd-foto.tem-lupa .pd-foto-zoom { cursor: zoom-in; }
.pd-foto-zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: opacity .45s var(--ease, ease); }
.pd-foto-zoom img.is-espera { opacity: 0; }
.pd-foto.is-falta .pd-foto-zoom img { opacity: .5; }
.pd-foto-vazia { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #B7BCC8; font-size: 14px; font-weight: 600; cursor: default; }
.pd-foto-vazia .ic { stroke-width: 1.2; }

/* lupa: círculo que segue o mouse e amplia o ponto da foto (só com mouse; ver produto.js) */
.pd-lupa { position: absolute; z-index: 3; top: 0; left: 0; width: 196px; height: 196px; pointer-events: none; will-change: transform; }
.pd-lupa-in {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fff;
  background-color: #F3F4F7; background-repeat: no-repeat; background-blend-mode: multiply;
  box-shadow: 0 18px 36px -14px rgba(0, 2, 14, .5), 0 0 0 1px rgba(0, 2, 14, .08);
  opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .22s var(--ease, ease);
}
.pd-foto.is-lupa .pd-lupa-in { opacity: 1; transform: none; }
.pd-foto.is-lupa .pd-foto-zoom { cursor: none; }
.pd-foto-dica {
  position: absolute; z-index: 2; top: 16px; right: 16px; display: none; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px;
  border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 2, 14, .08), 0 0 0 1px rgba(0, 2, 14, .04);
  font-size: 12.5px; font-weight: 600; color: var(--texto); pointer-events: none; transition: opacity .2s ease;
}
.pd-foto-dica .ic { color: var(--suave); }
.pd-foto.tem-lupa .pd-foto-dica { display: inline-flex; }
.pd-foto.is-lupa .pd-foto-dica { opacity: 0; }

.pd-foto-eti { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; border-radius: 10px; }
.pd-foto-eti span {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 5px; border-radius: 9px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 2, 14, .08), 0 0 0 1px rgba(0, 2, 14, .04);
  font-size: 12.5px; font-weight: 600; color: var(--texto); transition: box-shadow .15s;
}
.pd-foto-eti span:has(> .ic) { padding-left: 10px; }
.pd-foto-eti i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--c, var(--suave)); color: #fff; font: 800 12.5px/1 var(--fonte); font-style: normal; }
.pd-foto-eti .ic { color: var(--suave); }
.pd-foto-eti:hover span { box-shadow: 0 1px 2px rgba(0, 2, 14, .08), 0 0 0 1.5px var(--azul); }

.pd-selos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.pd-selos li { display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-left: 1px solid var(--linha); }
.pd-selos li:first-child { border-left: 0; padding-left: 4px; }
.pd-selos .ic { color: var(--azul); stroke-width: 1.5; }
.pd-selos b { display: block; color: var(--tinta); font-size: 14px; font-weight: 700; line-height: 1.25; }
.pd-selos span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--suave); }

/* identificação */
.pd-info { min-width: 0; padding-top: 2px; }
.pd-marca-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; margin-bottom: 14px; }
.pd-marca { display: inline-flex; align-items: center; min-height: 28px; border-radius: 6px; }
.pd-marca-logo { height: 28px; width: auto; max-width: 150px; object-fit: contain; object-position: left; }
.pd-marca-txt { font: 800 15px var(--fonte); letter-spacing: .8px; text-transform: uppercase; color: var(--tinta); }
.pd-comparar { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--texto); cursor: pointer; transition: background .15s, color .15s; }
.pd-comparar:hover { background: var(--fundo); color: var(--tinta); }
.pd-comparar input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul); }
.pd-comparar .ic { color: var(--suave); }
.pd-comparar:has(input:checked) { background: var(--azul-claro); color: var(--azul); }
.pd-comparar:has(input:checked) .ic { color: var(--azul); }

.pd-titulo { font-size: 38px; line-height: 1.05; letter-spacing: -.4px; }
.pd-modelo { margin-top: 6px; font: 600 20px/1.3 var(--fonte-tit); color: var(--texto); }

.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pd-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #F1F3F7; color: var(--texto); font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s; }
a.pd-chip:hover { background: var(--azul-claro); color: var(--azul); }
.pd-chip--forte { background: var(--noite); color: #fff; }

.pd-serve { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--texto); }
.pd-serve .ic { color: var(--suave); margin-top: 1px; }
.pd-serve b { color: var(--tinta); font-weight: 600; }

.pd-indices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 18px 0 0; border: 1px solid var(--linha); border-radius: 12px; }
.pd-indices > div { padding: 12px 16px; min-width: 0; }
.pd-indices > div + div { border-left: 1px solid var(--linha); }
.pd-indices dt { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pd-indices dd { margin: 3px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pd-indices b { font: 700 20px/1.1 var(--fonte-tit); color: var(--tinta); }
.pd-indices span { font-size: 14px; color: var(--texto); }

/* caixa de compra */
.pd-compra { margin-top: 22px; padding: 22px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.pd-preco-rot { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); margin-bottom: 4px; }
.pd-compra .preco--grande .preco-v { font-size: 44px; }
.pd-compra .preco--grande .preco-v sup { vertical-align: 18px; }
.pd-compra.is-falta .preco-v { color: var(--suave); }
.pd-compra.is-falta .preco-parc { display: none; }
.pd-ver-parc { margin-top: 10px; font-size: 14.5px; border-radius: 6px; }
.pd-ver-parc:hover { color: var(--azul-esc); text-decoration: underline; text-underline-offset: 3px; }
.pd-estoque { margin-top: 14px; }

.pd-bloco { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.pd-rot { font-size: 13.5px; font-weight: 700; color: var(--tinta); margin-bottom: 10px; }
.pd-qtd-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* atalhos 1/2/4: a pílula azul desliza entre eles */
.pd-atalhos { position: relative; display: flex; gap: 6px; }
.pd-atalho {
  position: relative; z-index: 1; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--linha); background: transparent;
  font: 700 16px var(--fonte); color: var(--tinta); transition: border-color .15s, color .2s, transform .1s;
}
.pd-atalho:hover { border-color: #C9CDD8; }
.pd-atalho:active:not(:disabled) { transform: scale(.95); }
.pd-atalho[aria-pressed="true"] { color: var(--azul); border-color: transparent; }
.pd-atalhos:not(.is-pronto) .pd-atalho[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); }
.pd-atalho:disabled { opacity: .38; cursor: not-allowed; border-color: var(--linha); }
.pd-atalho-ind {
  position: absolute; z-index: 0; top: 0; left: 0; width: 46px; height: 100%; border-radius: 10px;
  background: var(--azul-claro); box-shadow: inset 0 0 0 1.5px var(--azul); opacity: 0; pointer-events: none;
}
.pd-atalhos.is-pronto .pd-atalho-ind { transition: transform .28s var(--ease, ease), opacity .18s ease; }
.pd-stepper button:disabled { opacity: .3; cursor: not-allowed; background: none; }
.pd-stepper:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(4, 70, 230, .12); }
.pd-stepper input { font-variant-numeric: tabular-nums; }

.pd-kit { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--fundo); font-size: 15px; line-height: 1.4; color: var(--texto); }
.pd-kit-l { display: block; }
.pd-kit b { color: var(--tinta); font-weight: 600; }
.pd-kit strong { color: var(--tinta); font-weight: 800; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.pd-kit-parc { display: block; margin-top: 2px; font-size: 13.5px; color: var(--suave); }
.pd-max { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--alerta); }

/* serviços sugeridos: caixa com check desenhado */
.pd-serv { min-width: 0; margin: 18px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--linha); }
.pd-serv legend { float: left; width: 100%; padding: 0; font: 700 19px/1.2 var(--fonte-tit); color: var(--tinta); }
.pd-serv-sub { clear: both; margin: 0; padding-top: 4px; font-size: 14px; color: var(--suave); }
.pd-serv-lista { display: grid; gap: 8px; margin-top: 12px; }
.pd .pd-serv-op { position: relative; align-items: center; gap: 12px; padding: 12px 14px; }
.pd .pd-serv-op input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pd .pd-serv-op:has(input:focus-visible) { outline: 2.5px solid var(--azul); outline-offset: 2px; }
.pd .pd-check {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.5px solid #C3C8D2; background: #fff;
  transition: background-color .18s ease, border-color .18s ease, transform .18s var(--ease, ease);
}
.pd-check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 15; transition: stroke-dashoffset .28s var(--ease, ease) .06s; }
.pd .pd-serv-op:hover .pd-check { border-color: #A9AFBB; }
.pd .pd-serv-op.is-on .pd-check, .pd .pd-serv-op:has(input:checked) .pd-check { background: var(--azul); border-color: var(--azul); }
.pd .pd-serv-op.is-on .pd-check svg, .pd .pd-serv-op:has(input:checked) .pd-check svg { stroke-dashoffset: 0; }
.pd .pd-serv-op:active .pd-check { transform: scale(.9); }
.pd .pd-serv-op .pd-serv-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--fundo); color: var(--azul); transition: background .15s; }
.pd .pd-serv-op.is-on .pd-serv-ic, .pd .pd-serv-op:has(input:checked) .pd-serv-ic { background: #fff; }
.pd .pd-serv-op .pd-serv-txt { flex: 1; min-width: 0; font-size: 15px; color: var(--tinta); }
.pd .pd-serv-op .pd-serv-txt b { font-size: 15px; line-height: 1.3; }
.pd .pd-serv-op .pd-serv-det { display: block; margin-top: 1px; font-size: 13px; color: var(--suave); }
.pd .pd-serv-op .pd-serv-valor { flex: none; font-size: 15px; font-weight: 700; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pd-total { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--azul-claro); }
.pd-total-rot { font-size: 14.5px; font-weight: 700; color: #1D3A8A; padding-top: 3px; }
.pd-total-val { text-align: right; font-size: 13.5px; color: #1D3A8A; }
.pd-total-val b { font-size: 21px; font-weight: 800; color: var(--tinta); letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.pd-total-val em { font-style: normal; }
.pd-total-val small { display: block; font-size: 13px; color: #3E5596; }

.pd-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; margin-top: 18px; }
.pd-acoes .btn { width: 100%; padding: 0 18px; font-size: 16.5px; }
.pd-acoes .btn-claro .ic { color: var(--azul); }

.pd-ajuda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.pd-wa { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 700; font-size: 15px; color: var(--verde-wa-esc); border-radius: 6px; }
.pd-wa:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-ja { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ok); }
.pd-ja a { color: var(--azul); font-weight: 700; }
.pd-ja a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-nota { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 13.5px; line-height: 1.5; color: var(--suave); }
.pd-nota .ic { color: var(--ok); margin-top: 1px; }

/* em falta */
.pd-falta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.pd-falta-tit { font: 700 21px/1.2 var(--fonte-tit); color: var(--tinta); }
.pd-falta-txt { margin: 6px 0 16px; font-size: 15px; line-height: 1.5; }
.pd-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.pd-alt-tit { margin-bottom: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pd-alt-i { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 10px; border-radius: 12px; transition: background .15s; }
.pd-alt-i:hover { background: var(--fundo); }
.pd-alt-i img { width: 56px; height: 56px; flex: none; object-fit: contain; mix-blend-mode: multiply; }
.pd-alt-sem { display: grid; place-items: center; width: 56px; height: 56px; flex: none; color: #B7BCC8; }
.pd-alt-txt { flex: 1; min-width: 0; }
.pd-alt-txt b { display: block; font-size: 15px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-alt-txt span { display: block; font-size: 13px; color: var(--suave); }
.pd-alt-preco { font-weight: 800; font-size: 15.5px; color: var(--tinta); white-space: nowrap; }
.pd-alt-i > .ic { color: var(--suave); transition: transform .15s, color .15s; }
.pd-alt-i:hover > .ic { color: var(--azul); transform: translateX(2px); }

/* ================= navegação por âncoras (traço que desliza + compra rápida no computador) ================= */
.pd-nav {
  position: sticky; top: var(--pd-topo); z-index: 30; display: flex; align-items: center; margin: 24px 0 0;
  background: #fff; border-radius: 12px; box-shadow: var(--sombra-1), 0 12px 24px -22px rgba(0, 2, 14, .45);
  transition: top .25s var(--ease, ease);
}
.pd-nav-in { position: relative; flex: 1; min-width: 0; display: flex; gap: 2px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.pd-nav-in::-webkit-scrollbar { display: none; }
.pd-nav a {
  flex: none; display: inline-flex; align-items: center; height: 54px; padding: 0 13px;
  font-weight: 600; font-size: 15px; color: var(--suave); transition: color .15s;
}
.pd-nav a:hover, .pd-nav a.is-on { color: var(--tinta); }
.pd-nav a:focus-visible { outline-offset: -4px; }
.pd-nav-ind {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 2.5px; background: var(--azul);
  transform-origin: left center; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.pd-nav-ind.is-on { opacity: 1; transition: transform .32s var(--ease, ease), opacity .2s ease; }

.pd-nav-compra {
  flex: none; display: none; align-items: center; gap: 12px; height: 40px; margin-left: 4px; padding: 0 8px 0 16px; border-left: 1px solid var(--linha);
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity .2s ease, transform .25s var(--ease, ease), visibility 0s linear .25s;
}
.pd-nav.is-compra .pd-nav-compra { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .25s var(--ease, ease); }
.pd-nav-compra img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.pd-nav-compra-txt { display: flex; flex-direction: column; line-height: 1.2; }
.pd-nav-compra-txt small { font-size: 12px; color: var(--suave); white-space: nowrap; }
.pd-nav-compra-txt b { font-size: 17px; font-weight: 800; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-nav-compra .btn { height: 40px; }
@media (min-width: 1181px) { .pd-nav-compra { display: flex; } }

/* ================= seções ================= */
.pd-sec { margin-top: 16px; padding: 32px; background: #fff; border-radius: var(--pd-raio); box-shadow: var(--sombra-1); scroll-margin-top: calc(var(--pd-topo) + 72px); }
.pd-sec-cab { max-width: 780px; margin-bottom: 22px; }
.pd-sec-cab h2 { font-size: 27px; }
.pd-sec-cab p { margin-top: 6px; font-size: 15px; color: var(--suave); }

/* sobre */
.pd-sobre { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pd-sobre--so { grid-template-columns: minmax(0, 1fr); }
.pd-desc { max-width: 66ch; font-size: 17px; line-height: 1.65; color: var(--texto); }
.pd-dest { display: grid; gap: 12px; padding-left: 24px; border-left: 1px solid var(--linha); }
.pd-dest li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--tinta); }
.pd-dest .ic { color: var(--ok); margin-top: 1px; stroke-width: 2; }

/* ================= entenda este pneu ================= */
.pd-ent { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }

/* palco escuro com o pedaço do pneu */
.pd-ent-palco { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--noite); border-radius: 14px; overflow: hidden; }
.pd-ent-uso { position: absolute; z-index: 1; top: 15px; left: 18px; right: 18px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #7E8495; }
.pd-ent-uso .ic { color: #5D6374; }
.pd-so-toque { display: none; }
@media (hover: none) { .pd-so-mouse { display: none; } .pd-so-toque { display: inline; } }
.pd-ent-svg { display: block; flex: 1 1 auto; width: 100%; height: clamp(150px, 26vw, 300px); min-height: 0; margin-top: 34px; }
.pd-ent-roda { transform-box: fill-box; transform-origin: center; }
.pd-ent-marca { font: 700 26px var(--fonte-tit); letter-spacing: 7px; fill: #474C58; }
.pd-ent-baixo { font: 700 19px var(--fonte-tit); letter-spacing: 6px; fill: #363A44; }
.pd-ent-sombra, .pd-ent-medida { font-family: var(--fonte-tit); font-weight: 800; letter-spacing: 1px; }
.pd-ent-sombra { fill: #050608; pointer-events: none; }
.pd-ent-tk { fill: #6E7382; cursor: pointer; transition: fill .2s ease; }
@media (hover: hover) { .pd-ent-tk:hover { fill: #B8BDC9; } }
.pd-ent-tk.is-on { fill: #fff; }

/* abas: numa linha só até 6 partes; com 7 ou 8, duas linhas equilibradas (--cols vem do produto.js) */
.pd-ent-abas { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 6px; padding: 12px; background: #070914; border-top: 1px solid #141828; }
.pd-ent-aba {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 10px 9px;
  border: 0; border-radius: 10px; background: #111523; color: #8E94A6; text-align: left; transition: background .15s, color .15s;
}
.pd-ent-aba b { font: 700 20px/1.05 var(--fonte-tit); color: #fff; letter-spacing: -.1px; white-space: nowrap; transition: color .15s; }
.pd-ent-aba span { max-width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-ent-aba:hover { background: #1A2033; color: #C2C8D6; }
.pd-ent-aba[aria-selected="true"] { background: #fff; color: var(--texto); }
.pd-ent-aba[aria-selected="true"] b { color: var(--azul); }
.pd-ent-aba:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; }

/* painel com a explicação da parte escolhida */
.pd-ent-painel { display: flex; flex-direction: column; min-width: 0; min-height: 440px; padding: 24px 26px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.pd-ent-painel:focus-visible { outline-offset: 3px; border-radius: 14px; }
.pd-ent-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--azul); }
.pd-ent-valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.pd-ent-valor b { font: 800 56px/.95 var(--fonte-tit); letter-spacing: -.8px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pd-ent-valor span { font: 700 20px/1 var(--fonte-tit); color: var(--suave); }
.pd-ent-txt { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--texto); }
.pd-ent-txt b { color: var(--tinta); font-weight: 700; }
.pd-ent-vis { margin-top: 20px; }

.pd-perfil { display: block; width: 100%; max-width: 290px; height: auto; overflow: visible; }
.pd-pf-pneu { fill: #1D2027; }
.pd-pf-banda { fill: none; stroke: #2F333B; stroke-width: 5; stroke-dasharray: 5 3; }
.pd-pf-roda { fill: #E9EBEF; stroke: #C2C7D0; stroke-width: 1.5; }
.pd-pf-roda2 { fill: none; stroke: #D2D6DC; stroke-width: 1.2; }
.pd-pf-cubo { fill: #D2D6DC; }
.pd-pf-sulco { stroke: #343840; stroke-width: 2; stroke-linecap: round; }
.pd-pf-d line { stroke: #A3A9B5; stroke-width: 1.3; }
.pd-pf-d text { font: 700 12.5px var(--fonte); fill: #5F6472; font-variant-numeric: tabular-nums; }
.pd-pf-d .pd-pf-leg { font: 600 10.5px var(--fonte); fill: var(--suave); letter-spacing: .3px; }
.pd-pf-d--claro line { stroke: #7D8392; }
.pd-pf-d.is-on line { stroke: var(--azul); stroke-width: 1.8; }
.pd-pf-d--claro.is-on line { stroke: #8FB0FF; }
.pd-pf-d.is-on text, .pd-pf-d.is-on .pd-pf-leg { fill: var(--azul); }

.pd-ent-vel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pd-ent-vel li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; border-radius: 9px; background: var(--fundo); }
.pd-ent-vel b { font: 800 18px/1 var(--fonte-tit); color: var(--tinta); }
.pd-ent-vel span { font-size: 12px; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
.pd-ent-vel li.is-este { background: var(--noite); }
.pd-ent-vel li.is-este b { color: #fff; }
.pd-ent-vel li.is-este span { color: #B9C0D4; }
.pd-ent-vel-leg { margin-top: 8px; font-size: 12.5px; color: var(--suave); }

.pd-ent-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--linha); border-radius: 12px; }
.pd-ent-dados > div { min-width: 0; padding: 12px 16px; }
.pd-ent-dados > div + div { border-left: 1px solid var(--linha); }
.pd-ent-dados small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pd-ent-dados b { display: block; margin-top: 3px; font: 700 22px/1.1 var(--fonte-tit); color: var(--tinta); font-variant-numeric: tabular-nums; }

.pd-ent-rodape { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--suave); }
.pd-ent-rodape .ic { color: var(--azul); margin-top: 1px; }
.pd-ent-rodape .pd-link { margin-left: 2px; white-space: nowrap; }

/* entrada: o pneu "rola" até o lugar, a medida acende e as partes sobem em sequência */
.pd-anim .pd-ent-roda { transition: transform 1.4s var(--ease, ease); }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-ent-roda { transform: rotate(-18deg); }
.pd-anim .pd-ent-tk { transition: fill .2s ease, fill-opacity .5s ease calc(.75s + var(--n) * 70ms); }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-ent-tk { fill-opacity: .12; }
.pd-anim .pd-ent-aba {
  transition: background .15s, color .15s,
    opacity .45s var(--ease, ease) calc(.35s + var(--n) * 55ms), transform .45s var(--ease, ease) calc(.35s + var(--n) * 55ms);
}
.pd-anim [data-pd-anima]:not(.is-vista) .pd-ent-aba { opacity: 0; transform: translateY(10px); }

/* ================= etiqueta Inmetro ================= */
.pd-eti { display: grid; gap: 16px; }
.pd-eti--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .78fr); }
.pd-eti--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-eti--1 { grid-template-columns: minmax(0, 440px); }
.pd-eti-card { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 18px; border: 1px solid var(--linha); border-radius: 14px; }
.pd-eti-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pd-eti-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--fundo); color: var(--tinta); }
.pd-eti-cab h3 { font-size: 17.5px; }
.pd-eti-cab small { display: block; font-size: 13px; color: var(--suave); }

/* escala A–G: linhas de 28 px + 4 px de espaço; a seta "este pneu" fica numa coluna à direita e desce até a linha da classe */
.pd-esc { position: relative; display: grid; gap: 4px; padding-right: 108px; }
.pd-esc-i { display: flex; align-items: center; height: 28px; }
.pd-esc-bar {
  display: flex; align-items: center; width: var(--w); height: 22px; padding-left: 9px;
  font: 700 12px/1 var(--fonte); color: #5A5F6C;
  background: #ECEEF3; background: color-mix(in srgb, var(--c) 18%, #fff);
  border-radius: 5px 0 0 5px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  transform-origin: left center;
}
.pd-esc-i.is-este .pd-esc-bar { height: 28px; background: var(--c); color: #fff; font-size: 14px; }
.pd-esc-tag {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 11px;
  border-radius: 7px; background: var(--noite); color: #fff; font: 800 15px/1 var(--fonte);
  transform: translateY(calc(var(--pos, 0) * 32px));
}
.pd-esc-tag::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left: 0; border-right-color: var(--noite); }
.pd-esc-tag small { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #B9C0D4; }
.pd-eti-txt { margin-top: auto; padding-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--suave); }

/* entrada da etiqueta: barras crescem de A a G, a seta desce de A até a classe e só então a barra do pneu ganha a cor */
.pd-anim .pd-esc-bar { transition: transform .55s var(--ease, ease) calc(var(--n) * 55ms), background-color .4s ease 1.05s, color .4s ease 1.05s; }
.pd-anim .pd-esc-tag { transition: transform .85s var(--ease, ease) .5s, opacity .3s ease .45s; }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-esc-bar { transform: scaleX(0); }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-esc-i.is-este .pd-esc-bar { background: #ECEEF3; background: color-mix(in srgb, var(--c) 18%, #fff); color: #5A5F6C; }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-esc-tag { transform: translateY(0); opacity: 0; }

/* ruído: número, ondas que acendem e régua com os pneus da loja */
.pd-ruido { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.pd-ondas { flex: none; overflow: visible; }
.pd-ondas-alto { fill: var(--tinta); }
.pd-onda { fill: none; stroke: #DADDE4; stroke-width: 3.2; stroke-linecap: round; transition: stroke .25s ease; }
.pd-onda.is-acesa { stroke: var(--tinta); }
.pd-ruido-v { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; font: 800 56px/1 var(--fonte-tit); letter-spacing: -.5px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pd-ruido .pd-ruido-v { margin: 0; }
.pd-ruido-v small { font-size: 22px; font-weight: 700; color: var(--suave); letter-spacing: 0; }
.pd-regua { margin-top: 18px; }
.pd-regua-trilho { position: relative; height: 6px; border-radius: 3px; background: #ECEEF3; }
.pd-regua-cheio { position: absolute; inset: 0; border-radius: inherit; background: #C3C8D2; transform-origin: left center; transform: scaleX(var(--f, 0)); }
.pd-regua-marca-w { position: absolute; inset: 0; transform: translateX(var(--x, 0)); }
.pd-regua-marca { position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--noite); box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 2, 14, .35); }
.pd-regua-ext { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.pd-regua-leg { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--suave); }
.pd-anim .pd-regua-cheio, .pd-anim .pd-regua-marca-w { transition: transform 1s var(--ease, ease) .2s; }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-regua-cheio { transform: scaleX(0); }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-regua-marca-w { transform: translateX(0); }
.pd-anim [data-pd-anima]:not(.is-vista) .pd-onda { stroke: #DADDE4; }

.pd-utqg { display: grid; grid-template-columns: minmax(150px, auto) repeat(3, minmax(0, 1fr)); align-items: center; gap: 16px 24px; margin-top: 16px; padding: 18px 22px; border-radius: 14px; background: var(--fundo); }
.pd-utqg > div { min-width: 0; }
.pd-utqg-cab b { display: block; font: 700 18px var(--fonte-tit); color: var(--tinta); }
.pd-utqg-cab span { font-size: 13px; color: var(--suave); }
.pd-utqg small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pd-utqg > div > b { display: block; font: 800 26px/1.15 var(--fonte-tit); color: var(--tinta); }
.pd-utqg > div > span { font-size: 13px; color: var(--suave); }
.pd-utqg-cab { padding-right: 8px; }

/* especificações */
/* grade única: as duas colunas leem de cima para baixo e dividem as mesmas linhas (--pd-lin), então nada desalinha */
.pd-ficha { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--pd-lin, 1), auto); gap: 0 48px; margin: 0; font-size: 15px; }
.pd-fi { display: grid; grid-template-columns: minmax(104px, 46%) minmax(0, 1fr); align-items: baseline; border-bottom: 1px solid var(--linha); }
.pd-fi dt { padding: 13px 16px 13px 0; font-weight: 500; color: var(--suave); }
.pd-fi dd { margin: 0; padding: 13px 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }

/* veículos */
.pd-veic { columns: 4 210px; column-gap: 32px; }
.pd-veic li { break-inside: avoid; border-bottom: 1px solid var(--linha); }
.pd-veic a, .pd-veic-i { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
.pd-veic a { border-radius: 6px; transition: color .15s; }
.pd-veic a:hover { color: var(--azul); }
.pd-veic i { font-style: normal; font-weight: 500; color: var(--suave); }
.pd-veic .ic { color: var(--suave); }
.pd-veic span { flex: 1; min-width: 0; }
.pd-veic-seta { opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.pd-veic a:hover .pd-veic-seta, .pd-veic a:focus-visible .pd-veic-seta { opacity: 1; transform: none; color: var(--azul); }
.pd-veic-aviso { margin-top: 20px; }

/* perguntas frequentes */
.pd-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.pd-faq-lado h2 { font-size: 27px; }
.pd-faq-lado p { margin: 10px 0 18px; font-size: 15px; line-height: 1.5; color: var(--suave); max-width: 300px; }
.pd-faq-lista details { border-bottom: 1px solid var(--linha); }
.pd-faq-lista details:first-child { border-top: 1px solid var(--linha); }
.pd-faq-lista summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: 16.5px; line-height: 1.35; color: var(--tinta); border-radius: 6px; transition: color .15s;
}
.pd-faq-lista summary::-webkit-details-marker { display: none; }
.pd-faq-lista summary:hover { color: var(--azul); }
.pd-faq-lista summary .ic { color: var(--suave); transition: transform .2s var(--ease, ease), color .15s; }
.pd-faq-lista details[open] summary .ic { transform: rotate(180deg); color: var(--azul); }
.pd-faq-r { padding: 0 44px 20px 2px; font-size: 15.5px; line-height: 1.65; color: var(--texto); }
.pd-faq-r b { color: var(--tinta); }
.pd-faq-r a { color: var(--azul); font-weight: 700; }
.pd-faq-r a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-faq-lista details[open] .pd-faq-r { animation: pd-abrir .25s var(--ease, ease); }
@keyframes pd-abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* relacionados */
.pd-rel { margin-top: 44px; scroll-margin-top: calc(var(--pd-topo) + 72px); }
.pd-rel .secao-tit h2 { font-size: 27px; }
.pd-rel .grade-produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* barra fixa do celular (fica escondida no computador) */
.pd-barra { display: none; }

/* ================= modal de parcelas (fica fora da .pd) ================= */
.pd-parc-base { margin-bottom: 14px; color: var(--texto); }
.pd-parc-base b { color: var(--tinta); }
.pd-parc-tab { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pd-parc-tab th { padding: 0 0 8px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); border-bottom: 1px solid var(--linha); }
.pd-parc-tab td { padding: 10px 0; color: var(--tinta); border-bottom: 1px solid var(--linha); }
.pd-parc-tab th:last-child, .pd-parc-tab td:last-child { text-align: right; }
.pd-parc-tab td:first-child { font-weight: 700; }
.pd-parc-tab td:nth-child(2) { font-weight: 600; }
.pd-parc-tab td:last-child { color: var(--suave); }
.pd-parc-tab .selo { margin-left: 8px; height: 20px; font-size: 10.5px; }
.pd-parc-nota { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--suave); }

/* ================= responsivo ================= */
@media (max-width: 1180px) {
  .pd-topo { gap: 32px; padding: 24px; }
  .pd-titulo { font-size: 34px; }
  .pd-selos li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 12px; }
  .pd-selos li:first-child { padding-left: 2px; }
  .pd-eti--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-eti--3 .pd-eti-ruido { grid-column: 1 / -1; }
  .pd-rel .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-rel .grade-produtos > .cp:nth-child(4) { display: none; }
  .pd-utqg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-utqg-cab { grid-column: 1 / -1; }
  /* entenda: palco em cima, explicação embaixo (texto e desenho lado a lado quando cabe) */
  .pd-ent { grid-template-columns: minmax(0, 1fr); }
  .pd-ent-svg { height: clamp(150px, 30vw, 300px); }
  .pd-ent-abas { grid-template-columns: repeat(var(--cols-l, 6), minmax(0, 1fr)); }
  .pd-ent-painel { min-height: 0; }
  .pd-ent-c.tem-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: center; }
  .pd-ent-c.tem-vis .pd-ent-vis { margin-top: 0; }
}

@media (max-width: 900px) {
  .pd .migalhas { padding: 14px 0 10px; font-size: 13px; }
  .pd-topo { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; border-radius: 14px; }
  .pd-galeria { position: static; }
  .pd-foto { aspect-ratio: auto; height: 330px; }
  .pd-foto-zoom { padding: 6%; }
  .pd-selos li { flex-direction: row; align-items: center; gap: 12px; padding: 4px 16px; }
  .pd-selos li:first-child { padding-left: 4px; }
  .pd-titulo { font-size: 30px; }
  .pd-modelo { font-size: 18px; }
  .pd-nav { position: static; margin-top: 16px; }
  .pd-nav a { height: 50px; padding: 0 12px; font-size: 14.5px; }
  .pd-sec { margin-top: 12px; padding: 22px 18px; border-radius: 14px; scroll-margin-top: calc(var(--pd-topo-m, 112px) + 12px); }
  .pd-sec-cab { margin-bottom: 18px; }
  .pd-sec-cab h2, .pd-faq-lado h2, .pd-rel .secao-tit h2 { font-size: 23px; }
  .pd-sobre { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pd-desc { font-size: 16px; }
  .pd-dest { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--linha); }
  .pd-ent-svg { height: clamp(120px, 34vw, 280px); margin-top: 32px; }
  .pd-ent-uso { top: 12px; left: 14px; right: 14px; font-size: 12px; }
  .pd-ent-painel { padding: 20px; }
  .pd-ficha { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pd-faq { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pd-faq-lado p { max-width: none; margin-bottom: 16px; }
  .pd-faq-lado { padding-bottom: 14px; }
  .pd-faq-r { padding-right: 8px; }
  .pd-rel { margin-top: 32px; scroll-margin-top: calc(var(--pd-topo-m, 112px) + 12px); }
  .pd-rel .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-rel .grade-produtos > .cp:nth-child(4) { display: flex; }

  /* barra fixa com foto, preço e botão: aparece suave depois de passar dos botões de compra */
  .pd-barra {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--linha); box-shadow: 0 -12px 30px -18px rgba(0, 2, 14, .4);
    transform: translateY(110%); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease-saida, ease), opacity .2s ease, visibility 0s linear .3s;
  }
  .pd-barra.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .34s var(--ease, ease), opacity .2s ease; }
  .pd-barra-in { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
  .pd-barra-foto { width: 44px; height: 44px; flex: none; object-fit: contain; mix-blend-mode: multiply; }
  .pd-barra-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .pd-barra-txt span { font-size: 12.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-barra-txt b { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--tinta); letter-spacing: -.2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pd-barra .btn { flex: none; min-width: 128px; height: 48px; }
  body.pd-barra-on .wa-flutua { bottom: 90px; }
  body.pd-barra-on .rodape { padding-bottom: 76px; }
}

/* celular: as abas viram uma faixa que rola de lado (a escolhida rola para a vista sozinha) */
@media (max-width: 760px) {
  .pd-ent-abas { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .pd-ent-abas::-webkit-scrollbar { display: none; }
  .pd-ent-aba { flex: none; min-width: 88px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .pd-ent-c.tem-vis { display: block; }
  .pd-ent-c.tem-vis .pd-ent-vis { margin-top: 18px; }
}

@media (max-width: 520px) {
  .pd-topo { padding: 14px; gap: 18px; }
  .pd-foto { height: 270px; border-radius: 12px; }
  .pd-foto > .selo { top: 12px; left: 12px; }
  .pd-foto-eti { left: 10px; bottom: 10px; gap: 5px; }
  .pd-foto-eti span { height: 28px; font-size: 12px; }
  .pd-foto-eti i { width: 20px; height: 20px; font-size: 12px; }
  .pd-selos { margin-top: 14px; }
  .pd-selos li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 2px 10px; }
  .pd-selos li:first-child { padding-left: 2px; }
  .pd-selos .ic { width: 22px; height: 22px; }
  .pd-selos b { font-size: 12.5px; }
  .pd-selos span { display: none; }
  .pd-marca-linha { margin-bottom: 10px; }
  .pd-marca-logo { height: 24px; }
  .pd-titulo { font-size: 28px; }
  .pd-chips { margin-top: 14px; }
  .pd-chip { height: 28px; font-size: 13px; padding: 0 10px; }
  .pd-indices > div { padding: 10px 12px; }
  .pd-indices b { font-size: 18px; }
  .pd-indices span { font-size: 13px; }
  /* no celular a compra não fica numa caixa dentro da caixa: só linhas separando os blocos */
  .pd-compra { margin-top: 18px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--linha); border-radius: 0; }
  .pd-compra .preco--grande .preco-v { font-size: 40px; }
  .pd-qtd-linha { gap: 8px; }
  .pd-atalho { min-width: 44px; padding: 0 10px; }
  .pd .pd-serv-op { gap: 10px; padding: 12px; }
  .pd .pd-serv-op .pd-serv-ic { display: none; }
  .pd .pd-serv-op .pd-serv-txt b { font-size: 14.5px; }
  .pd-total { padding: 12px 14px; }
  .pd-total-val b { font-size: 19px; }
  .pd-acoes { grid-template-columns: minmax(0, 1fr); }
  .pd-ajuda { flex-direction: column; align-items: flex-start; }
  .pd-ent-aba { padding: 9px 10px 8px; }
  .pd-ent-aba b { font-size: 18px; }
  .pd-ent-painel { padding: 18px 16px; }
  .pd-ent-valor b { font-size: 46px; }
  .pd-ent-txt { font-size: 15px; }
  .pd-ent-vel { gap: 3px; }
  .pd-ent-vel b { font-size: 16px; }
  .pd-ent-vel span { font-size: 11px; }
  .pd-ent-dados > div { padding: 10px 12px; }
  .pd-ent-dados b { font-size: 19px; }
  .pd-ent-rodape { font-size: 13.5px; }
  .pd-eti { grid-template-columns: minmax(0, 1fr) !important; }
  .pd-eti--3 .pd-eti-ruido { grid-column: auto; }
  .pd-eti-card { padding: 16px; }
  .pd-esc { padding-right: 102px; }
  .pd-ruido-v { font-size: 48px; }
  .pd-utqg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
  .pd-utqg > div > b { font-size: 22px; }
  .pd-ficha { font-size: 14.5px; }
  .pd-fi { grid-template-columns: minmax(96px, 44%) minmax(0, 1fr); }
  .pd-fi dt { padding-right: 12px; }
  .pd-veic { columns: 2; column-gap: 18px; }
  .pd-veic a, .pd-veic-i { gap: 8px; font-size: 14px; }
  .pd-veic .ic:first-child { display: none; }
  .pd-faq-lista summary { font-size: 15.5px; padding: 16px 0; }
  .pd-faq-r { font-size: 15px; }
}

/* notebook com pouca altura: a foto fixa ao lado da compra cabe inteira com os selos */
@media (min-width: 901px) and (max-height: 760px) {
  .pd-foto { aspect-ratio: 1 / .78; }
}

/* "reduzir movimento": sem lupa animada, sem rolagem do número; o resto já vem no estado final (sem .pd-anim) */
@media (prefers-reduced-motion: reduce) {
  .pd-lupa-in { transform: none; }
}