/* DK Pneus · catálogo (busca, categoria, marca, medida, veículo) e comparar. Prefixos bs- e cmp-.
   Usa os tokens de app.css. Sem degradê em texto, sem vidro, cantos 8–14 px, sombras discretas. */

/* ================= listagem ================= */
.bs { padding-bottom: 8px; }
.bs-topo { padding-bottom: 4px; }

/* ---------- cabeçalho: título + contagem + buscador ---------- */
.bs-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding: 8px 0 26px; }
.bs-cab-txt { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 360px; }
.bs-cab-tit { min-width: 0; }
.bs-cab h1 { font-size: 38px; font-weight: 800; line-height: 1.06; letter-spacing: -.6px; overflow-wrap: anywhere; }
.bs-sub { margin-top: 8px; font-size: 15.5px; color: var(--suave); }
.bs-sub b { color: var(--tinta); font-weight: 700; }
.bs-cab-logo { flex: none; display: grid; place-items: center; width: 116px; height: 64px; padding: 10px 14px; background: #fff; border-radius: 12px; box-shadow: var(--sombra-1), 0 10px 24px -20px rgba(0, 2, 14, .4); }
.bs-cab-logo img { max-height: 30px; max-width: 100%; object-fit: contain; }

/* buscador compacto (medida / veículo) */
.bs-busca { position: relative; flex: 0 1 548px; min-width: 0; padding: 8px 10px 10px; background: #fff; border-radius: 14px; box-shadow: 0 1px 0 var(--linha), 0 18px 36px -30px rgba(0, 2, 14, .5); transition: box-shadow .2s; }
.bs-busca.is-erro { box-shadow: 0 0 0 1.5px var(--falta), 0 18px 36px -30px rgba(0, 2, 14, .5); }
.bs-abas { display: flex; gap: 4px; padding: 0 0 8px; }
.bs-aba { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-weight: 700; font-size: 14px; color: var(--suave); transition: color .15s, background .15s; }
.bs-aba:hover { color: var(--tinta); background: var(--fundo); }
.bs-aba[aria-selected="true"] { color: var(--azul); background: var(--azul-claro); }
.bs-busca-tit { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px 8px; font-weight: 700; font-size: 14px; color: var(--tinta); }
.bs-busca-tit .ic { color: var(--azul); }
.bs-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
.bs-campos--veic { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.bs-sel { position: relative; display: block; height: 54px; min-width: 0; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); transition: border-color .15s, box-shadow .15s, background .15s; }
.bs-sel:hover { border-color: #CDD1DB; }
.bs-sel:focus-within { background: #fff; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(4, 70, 230, .12); }
.bs-sel small { position: absolute; left: 13px; top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); pointer-events: none; }
.bs-sel select { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 100%; padding: 20px 30px 0 12px; border: 0; border-radius: 10px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23868B98' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; font: 600 16px var(--fonte); color: var(--tinta); text-overflow: ellipsis; cursor: pointer; outline: none; }
.bs-sel.is-off { opacity: .55; }
.bs-sel.is-off select { cursor: not-allowed; }
.bs-ir { height: 54px; padding: 0 20px; }
.bs-busca-erro { position: absolute; left: 12px; bottom: -24px; font-size: 13px; font-weight: 600; color: var(--falta); }

/* ---------- página do veículo: o carro + medidas de fábrica ---------- */
.bs-veic { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 0 24px; flex: 1 1 440px; min-width: 0; }
.bs-veic-carro { position: relative; width: 112px; height: 112px; overflow: hidden; border-radius: 18px; background: var(--noite); color: #fff; box-shadow: 0 22px 38px -26px rgba(0, 2, 14, .8); }
.bs-veic-carro::before { content: ""; position: absolute; left: 0; right: 0; top: 62%; bottom: 0; background: var(--noite-2); }
.bs-veic-pista { position: absolute; left: 14px; right: 14px; top: 62%; height: 1.5px; margin-top: -1px; border-radius: 1px; background: rgba(255, 255, 255, .2); transform-origin: center; }
.bs-veic-ic { position: absolute; left: 50%; top: 20px; width: 58px; height: 58px; margin-left: -29px; }
.bs-veic-ic .ic { width: 100%; height: 100%; stroke-width: 1.35; }
.bs-veic-txt { min-width: 0; }
.bs-cab .bs-veic h1 { font-size: 42px; font-weight: 800; line-height: 1.02; letter-spacing: -.7px; }
.bs-veic-rot { display: block; margin-bottom: 7px; font: 700 12.5px/1 var(--fonte); letter-spacing: 1.3px; text-transform: uppercase; color: var(--azul); }
.bs-veic-meds { grid-column: 2; margin-top: 18px; }
.bs-veic-meds-rot { margin-bottom: 9px; font: 700 12px var(--fonte); letter-spacing: .8px; text-transform: uppercase; color: var(--suave); }
.bs-veic-dica { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--suave); }
.bs-veic-dica .ic { color: #A9AFBC; }
.bs-fab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-fab-chips--anos { flex-direction: column; align-items: flex-start; }
.bs-fab-ano { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bs-fab-ano-rot { min-width: 96px; font-size: 13px; font-weight: 600; color: var(--suave); }
/* chips das medidas de fábrica: acendem ao passar o mouse (e destacam os pneus daquela medida na lista) */
.bs-veic-meds .bs-tag { position: relative; overflow: hidden; height: 40px; transition: border-color .2s, background .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.bs-veic-meds .bs-tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(4, 70, 230, .1) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none; }
.bs-veic-meds button.bs-tag:hover, .bs-veic-meds button.bs-tag:focus-visible { border-color: var(--azul); color: var(--azul); box-shadow: 0 10px 22px -14px rgba(4, 70, 230, .55); transform: translateY(-1px); }
.bs-veic-meds button.bs-tag:hover::after { transform: translateX(120%); }
.bs-veic-meds button.bs-tag:hover span, .bs-veic-meds button.bs-tag:focus-visible span { background: var(--azul); color: #fff; }
.bs-veic-meds .bs-tag[aria-pressed="true"] { box-shadow: inset 0 0 0 .5px var(--azul); }
/* chegada (só ao entrar na página, nunca no filtro) */
.bs-cab--veic.is-entra .bs-veic-ic { animation: bs-carro .65s cubic-bezier(.16, 1, .3, 1) .15s both; }
.bs-cab--veic.is-entra .bs-veic-pista { animation: bs-pista .6s var(--ease) .1s both; }
.bs-cab--veic.is-entra .bs-veic-meds .bs-tag { animation: bs-surge .42s var(--ease) both; animation-delay: calc(.32s + var(--i, 0) * 45ms); }
@keyframes bs-carro { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.84); } }
@keyframes bs-pista { from { transform: scaleX(0); } }
@keyframes bs-surge { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* prévia na lista ao passar numa medida de fábrica */
.bs-grade .cp { transition: box-shadow .2s, transform .2s, opacity .22s var(--ease); }
.bs-grade.is-previa .cp:not(.is-casa) { opacity: .34; }
.bs-grade.is-previa .cp.is-casa { box-shadow: 0 0 0 1.5px var(--azul), var(--sombra-2); }

/* etiqueta clicável (medidas de fábrica, atalhos de medida, sugestões) */
.bs-tag { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 14px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font: 700 14.5px var(--fonte); color: var(--tinta); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.bs-tag span { min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--fundo); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; color: var(--suave); transition: background .15s, color .15s; }
.bs-tag:hover { border-color: #C4C9D4; }
.bs-tag[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.bs-tag[aria-pressed="true"] span { background: #fff; color: var(--azul); }
.bs-tag.is-zero { color: var(--suave); }
.bs-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- escolher o carro (aba veículo) ---------- */
.bs-veics { margin-bottom: 22px; padding: 22px 24px 18px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); }
.bs-veics-cab h2 { font-size: 22px; }
.bs-veics-cab p { margin-top: 2px; font-size: 14.5px; color: var(--suave); }
.bs-veics-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 28px; margin-top: 18px; }
.bs-veics-marca h3 { margin-bottom: 4px; font: 700 12.5px var(--fonte); letter-spacing: .8px; text-transform: uppercase; color: var(--suave); }
.bs-veics-marca a { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-weight: 600; color: var(--tinta); transition: color .15s; }
.bs-veics-marca a span { flex: 1; }
.bs-veics-marca a small { font-size: 12.5px; font-weight: 500; color: var(--suave); }
.bs-veics-marca a .ic { align-self: center; color: #B9BFCC; transition: transform .15s, color .15s; }
.bs-veics-marca a:hover { color: var(--azul); }
.bs-veics-marca a:hover .ic { color: var(--azul); transform: translateX(2px); }

/* sugestão quando a busca parece um carro */
.bs-sugere { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px 16px; border-radius: 12px; background: var(--azul-claro); color: #1D3A8A; font-size: 15px; transition: background .15s; }
.bs-sugere > .ic:first-child { color: var(--azul); }
.bs-sugere span { flex: 1; }
.bs-sugere b { color: var(--azul); }
.bs-sugere small { display: block; margin-top: 3px; font-size: 13px; color: #4C5E92; }
.bs-sugere:hover { background: #E3EBFF; }

/* ---------- corpo: filtros + resultados ---------- */
.bs-corpo { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 28px; align-items: start; }
.bs-corpo--cheio { grid-template-columns: minmax(0, 1fr); }
.bs-res { min-width: 0; }
.bs-res-tit { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 22px; }
.bs-res-tit span { height: 24px; padding: 0 8px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); font: 700 13px/24px var(--fonte); color: var(--suave); }

/* coluna de filtros */
.bs-filtros { background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); }
.bs-gav-topo, .bs-gav-pe, .bs-gav-fundo { display: none; }
.bs-gav-corpo { padding: 0 18px 8px; }
.bs-f-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; border-bottom: 1px solid var(--linha); }
.bs-f-cab h2 { font-size: 19px; }
.bs-f-limpar { font-size: 14px; }
.bs-f-est { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); cursor: pointer; }
.bs-f-est-txt { display: flex; flex-direction: column; line-height: 1.3; }
.bs-f-est b { font-size: 15px; color: var(--tinta); }
.bs-f-est small { font-size: 13px; color: var(--suave); }

.bs-g { border-bottom: 1px solid var(--linha); }
.bs-g:last-child { border-bottom: 0; }
.bs-g > summary { display: flex; align-items: center; gap: 8px; padding: 15px 0; list-style: none; cursor: pointer; font-weight: 700; font-size: 15.5px; color: var(--tinta); border-radius: 6px; }
.bs-g > summary::-webkit-details-marker { display: none; }
.bs-g-tit { flex: 1; }
.bs-g > summary > .ic { color: var(--suave); transition: transform .2s var(--ease, ease); }
.bs-g[open] > summary > .ic { transform: rotate(180deg); }
.bs-g > summary:hover > .ic { color: var(--tinta); }
.bs-g-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--azul); color: #fff; font: 700 11.5px/20px var(--fonte); text-align: center; font-style: normal; }
.bs-g-corpo { padding: 0 0 16px; }
.bs-sub-g + .bs-sub-g { margin-top: 16px; }
.bs-sub-tit { margin-bottom: 8px; font: 700 12px var(--fonte); letter-spacing: .7px; text-transform: uppercase; color: var(--suave); }

/* pílulas de medida */
.bs-pilulas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bs-pil { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 6px; border: 1px solid var(--linha); border-radius: 9px; background: #fff; font-weight: 700; font-size: 14.5px; color: var(--tinta); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.bs-pil input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.bs-pil small { font-size: 11.5px; font-weight: 600; color: var(--suave); }
.bs-pil:hover { border-color: #C4C9D4; }
.bs-pil.is-on { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.bs-pil.is-on small { color: var(--azul); opacity: .7; }
.bs-pil:has(input:focus-visible) { outline: 2.5px solid var(--azul); outline-offset: 2px; }

/* lista de opções com caixinha */
.bs-opcs { display: flex; flex-direction: column; gap: 1px; }
.bs-opc { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; margin: 0 -8px; padding: 5px 8px; border-radius: 8px; font-size: 14.5px; color: var(--texto); cursor: pointer; transition: background .15s; }
.bs-opc:hover { background: var(--fundo); }
.bs-opc input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.bs-caixinha { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #C5CAD5; border-radius: 5px; background: #fff; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.bs-caixinha .ic { stroke-width: 2.8; }
.bs-opc:hover .bs-caixinha { border-color: #9AA1B0; }
.bs-opc input:checked + .bs-caixinha { border-color: var(--azul); background: var(--azul); color: #fff; }
.bs-opc input:focus-visible + .bs-caixinha { outline: 2.5px solid var(--azul); outline-offset: 2px; }
.bs-opc-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bs-opc-nome small { margin-top: 1px; font-size: 12.5px; color: var(--suave); }
.bs-opc input:checked ~ .bs-opc-nome { color: var(--tinta); font-weight: 600; }
.bs-opc-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bs-opc-logo { flex: none; width: 56px; height: 24px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.bs-opc-marca .bs-opc-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-opc-n { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.bs-extra { display: none !important; }
.is-todos .bs-extra { display: revert !important; }
.is-todos .bs-pil.bs-extra { display: flex !important; }
.bs-vermais { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 0; border: 0; background: none; font-weight: 700; font-size: 13.5px; color: var(--azul); }
.bs-vermais .ic { transition: transform .2s; }
.bs-vermais[aria-expanded="true"] .ic { transform: rotate(180deg); }
.bs-vermais:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* barra acima da grade: ordenar + filtros ativos */
.bs-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 42px; margin-bottom: 16px; }
.bs-filtrar { display: none; }
.bs-filtrar-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--azul); color: #fff; font: 700 11.5px/20px var(--fonte); font-style: normal; }
.bs-chips { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.bs-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 13px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); font: 600 13.5px var(--fonte); color: var(--tinta); white-space: nowrap; transition: box-shadow .15s, color .15s; }
.bs-chip .ic { color: var(--suave); transition: color .15s; }
.bs-chip:hover { box-shadow: inset 0 0 0 1.5px var(--azul); }
.bs-chip:hover .ic { color: var(--azul); }
.bs-limpar { height: 32px; padding: 0 4px; font-size: 13.5px; }
.bs-ordem { order: 2; position: relative; display: flex; align-items: center; gap: 7px; height: 42px; margin-left: auto; padding-left: 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: var(--suave); transition: border-color .15s, box-shadow .15s; }
.bs-ordem:hover { border-color: #CDD1DB; }
.bs-ordem:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(4, 70, 230, .12); }
.bs-ordem-rot { font-size: 13.5px; white-space: nowrap; }
.bs-ordem select { -webkit-appearance: none; appearance: none; height: 100%; padding: 0 34px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23868B98' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; font: 700 14.5px var(--fonte); color: var(--tinta); cursor: pointer; outline: none; }

/* atalhos de medida */
.bs-rapidas { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: -2px 0 18px; }
.bs-rapidas-rot { font-size: 13.5px; font-weight: 600; color: var(--suave); }
.bs-rapidas-l { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-rapidas .bs-tag { height: 34px; font-size: 14px; }

/* cartões que chegam pelo "Mostrar mais" */
.bs-novo { animation: dk-entrar .45s var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* troca de filtro/ordem: números que rolam e o que sai da tela (cartão ou chip) some no lugar */
.bs-num { display: inline-block; font-variant-numeric: tabular-nums; }
.bs-fantasma { z-index: -1; pointer-events: none; }

/* a opção tocada confirma a troca (o redesenho já nasce no estado novo) */
.bs-opc.bs-pop input:checked + .bs-caixinha { animation: bs-marca .32s var(--ease) both; }
.bs-pil.bs-pop.is-on, .bs-tag.bs-pop[aria-pressed="true"] { animation: bs-liga .3s var(--ease) both; }
.bs-f-est.bs-pop input:checked + span { animation: bs-trilho-liga .2s both; }
.bs-f-est.bs-pop input:checked + span::after { animation: bs-botao-liga .2s var(--ease) both; }
.bs-f-est.bs-pop input:not(:checked) + span { animation: bs-trilho-desliga .2s both; }
.bs-f-est.bs-pop input:not(:checked) + span::after { animation: bs-botao-desliga .2s var(--ease) both; }
@keyframes bs-marca { 0% { transform: scale(.7); } 55% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes bs-liga { 0% { transform: scale(.95); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes bs-trilho-liga { from { background: #CDD1DB; } }
@keyframes bs-trilho-desliga { from { background: var(--azul); } }
@keyframes bs-botao-liga { from { transform: none; } to { transform: translateX(18px); } }
@keyframes bs-botao-desliga { from { transform: translateX(18px); } to { transform: none; } }

/* mostrar mais */
.bs-mais { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 0 4px; text-align: center; }
.bs-mais p { font-size: 14px; color: var(--suave); }
.bs-mais p b { color: var(--tinta); }
.bs-mais-barra { width: 220px; height: 3px; overflow: hidden; border-radius: 2px; background: var(--linha); }
.bs-mais-barra span { display: block; height: 100%; border-radius: 2px; background: var(--azul); transition: width .3s var(--ease, ease); }
.bs-mais .btn { min-width: 240px; }

/* ---------- estados vazios ---------- */
.bs-vazio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: start; padding: 36px 36px 34px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); }
.bs-vazio-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--fundo); color: var(--suave); }
.bs-vazio h2 { font-size: 25px; }
.bs-vazio-txt > p { max-width: 600px; margin-top: 8px; font-size: 15.5px; }
.bs-vazio-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.bs-vazio-sug { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linha); }
.bs-vazio-sug h3 { margin-bottom: 10px; font: 700 12.5px var(--fonte); letter-spacing: .8px; text-transform: uppercase; color: var(--suave); }

/* peças sob consulta */
.bs-pecas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: var(--noite); color: #C9CEDC; }
.bs-pecas-txt { padding: 44px 44px 40px; }
.bs-pecas h2 { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -.4px; color: #fff; }
.bs-pecas-txt > p { max-width: 470px; margin-top: 14px; font-size: 16.5px; line-height: 1.55; }
.bs-pecas .bs-vazio-acoes { margin-top: 26px; }
.bs-pecas-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); counter-reset: none; }
.bs-pecas-passos li { display: flex; flex-direction: column; gap: 8px; }
.bs-pecas-passos b { font: 800 14px var(--fonte); letter-spacing: 1px; color: #7FA0FF; }
.bs-pecas-passos h3 { font-size: 17px; color: #fff; }
.bs-pecas-passos p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: #9EA5BA; }
.bs-pecas-foto { min-height: 360px; background: #111 url("../assets/img/oficina.jpg") center 35% / cover no-repeat; }

/* ---------- perguntas frequentes da medida ---------- */
.bs-faq { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px 56px; margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--linha); }
.bs-faq-lado h2 { font-size: 30px; font-weight: 800; letter-spacing: -.3px; }
.bs-faq-lado p { margin: 8px 0 20px; color: var(--suave); }
.bs-faq-lista { padding: 4px 26px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-1); }
.bs-faq-i { border-bottom: 1px solid var(--linha); }
.bs-faq-i:last-child { border-bottom: 0; }
.bs-faq-i summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 0; list-style: none; cursor: pointer; border-radius: 6px; }
.bs-faq-i summary::-webkit-details-marker { display: none; }
.bs-faq-i summary h3 { font-size: 18px; font-weight: 700; transition: color .15s; }
.bs-faq-i summary:hover h3 { color: var(--azul); }
.bs-faq-i summary .ic { flex: none; color: var(--azul); transition: transform .25s var(--ease, ease); }
.bs-faq-i[open] summary .ic { transform: rotate(45deg); }
.bs-faq-r { max-width: 700px; padding: 0 0 22px; font-size: 15.5px; line-height: 1.62; }
.bs-faq-r p + p, .bs-faq-r .bs-faq-carros + p { margin-top: 10px; }
.bs-faq-r b { color: var(--tinta); }
.bs-lk { font-weight: 700; color: var(--azul); }
.bs-lk:hover { text-decoration: underline; text-underline-offset: 3px; }
.bs-faq-carros { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.bs-faq-carros a, .bs-faq-carros span { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; background: var(--fundo); font-size: 14px; font-weight: 600; color: var(--tinta); transition: background .15s, color .15s; }
.bs-faq-carros a:hover { background: var(--azul-claro); color: var(--azul); }
.bs-anat { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 16px; }
.bs-anat span { display: flex; flex-direction: column; min-width: 84px; padding: 11px 14px 10px; border-radius: 10px; background: var(--fundo); }
.bs-anat b { font: 800 26px/1 var(--fonte-tit); color: var(--tinta); }
.bs-anat span:first-child b { color: var(--azul); }
.bs-anat small { max-width: 116px; margin-top: 6px; font-size: 12px; line-height: 1.25; color: var(--suave); }

/* ---------- responsivo da listagem ---------- */
@media (max-width: 1180px) {
  .bs-corpo { grid-template-columns: 244px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 1080px) {
  .bs-cab { flex-direction: column; align-items: stretch; gap: 18px; }
  .bs-cab-txt, .bs-veic { flex: none; }
  .bs-busca { flex: none; width: 100%; max-width: 640px; }
  .bs-pecas { grid-template-columns: 1fr; }
  .bs-pecas-foto { order: -1; min-height: 200px; }
}
@media (min-width: 901px) {
  /* a coluna de filtros acompanha a rolagem: dá para filtrar no meio da lista e ver os cartões se reorganizarem */
  .bs-filtros { position: sticky; top: 82px; display: flex !important; flex-direction: column; max-height: calc(100vh - 98px); }
  .bs-gav-corpo { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D5D9E2 transparent; }
  .bs-gav-corpo::-webkit-scrollbar { width: 8px; }
  .bs-gav-corpo::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 4px; background: #D5D9E2; }
  /* top:-1px cobre a fresta de subpixel: o conteúdo rolado nunca aparece acima do cabeçalho */
  .bs-f-cab { position: sticky; top: -1px; z-index: 2; background: #fff; transition: box-shadow .2s var(--ease, ease); }
  .bs-f-cab.is-rolado { box-shadow: 0 12px 14px -14px rgba(0, 2, 14, .38); }
}
@media (max-width: 900px) {
  .bs-cab { padding-bottom: 20px; }
  .bs-cab h1 { font-size: 29px; letter-spacing: -.4px; }
  .bs-sub { font-size: 14.5px; }
  .bs-cab-txt { flex-direction: column; align-items: flex-start; gap: 12px; flex-basis: auto; }
  .bs-cab-logo { width: 100px; height: 54px; }

  .bs-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* filtros viram gaveta que sobe do rodapé (arrastar a alça para baixo fecha) */
  .bs-filtros { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; flex-direction: column; height: min(86vh, 720px); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 48px -20px rgba(0, 2, 14, .45); transform: translateY(104%); visibility: hidden; transition: transform .3s var(--ease-saida), visibility 0s linear .3s; }
  .bs-filtros.is-aberta { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.16, 1, .3, 1); }
  .bs-filtros.is-sem-anim, .bs-gav-fundo.is-sem-anim, .bs-filtros.is-arrastando, .bs-gav-fundo.is-arrastando { transition: none !important; }
  .bs-gav-topo { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 12px 20px; border-bottom: 1px solid var(--linha); touch-action: none; cursor: grab; }
  .bs-filtros.is-arrastando .bs-gav-topo { cursor: grabbing; }
  .bs-gav-topo::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: #D5D9E2; transition: background .15s; }
  .bs-filtros.is-arrastando .bs-gav-topo::before { background: #AEB4C1; }
  .bs-gav-topo h2 { font-size: 21px; }
  .bs-gav-x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--fundo); color: var(--texto); transition: background .15s; }
  .bs-gav-x:hover { background: var(--linha); }
  .bs-gav-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 20px 12px; }
  .bs-f-cab { display: none; }
  .bs-gav-pe { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); background: #fff; box-shadow: 0 -12px 24px -20px rgba(0, 2, 14, .35); }
  .bs-gav-pe .btn { height: 50px; }
  .bs-gav-pe .btn-primario { flex: 1; min-width: 0; }
  .bs-ver.is-zero { background: #8E95A4; font-size: 14.5px; white-space: normal; line-height: 1.2; }
  .bs-gav-fundo { display: block; position: fixed; inset: 0; z-index: 74; background: rgba(0, 2, 14, .5); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-saida); }
  .bs-gav-fundo.is-aberta { opacity: 1; pointer-events: auto; transition: opacity .38s var(--ease); }
  body.bs-trava { overflow: hidden; }
  .bs-pil { height: 42px; }
  .bs-opc { min-height: 44px; }

  .bs-barra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
  .bs-filtrar { display: inline-flex; height: 44px; padding: 0 14px; }
  .bs-ordem { order: 0; margin-left: 0; height: 44px; min-width: 0; }
  .bs-ordem:first-child { grid-column: 1 / -1; }
  .bs-ordem-rot { display: none; }
  .bs-ordem select { flex: 1; min-width: 0; width: 100%; text-overflow: ellipsis; }
  .bs-chips { order: 0; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 2px 24px; scrollbar-width: none; }
  .bs-chips::-webkit-scrollbar { display: none; }
  .bs-chip, .bs-limpar { flex: none; }
  .bs-rapidas { flex-wrap: nowrap; gap: 8px; margin-bottom: 16px; }
  .bs-rapidas-rot { display: none; }
  .bs-rapidas-l { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 2px 24px; scrollbar-width: none; }
  .bs-rapidas-l::-webkit-scrollbar { display: none; }
  .bs-rapidas .bs-tag { flex: none; }

  .bs-veic { grid-template-columns: 76px minmax(0, 1fr); gap: 0 16px; flex-basis: auto; }
  .bs-veic-carro { width: 76px; height: 76px; border-radius: 14px; }
  .bs-veic-pista { left: 9px; right: 9px; }
  .bs-veic-ic { top: 13px; width: 40px; height: 40px; margin-left: -20px; }
  .bs-cab .bs-veic h1 { font-size: 28px; letter-spacing: -.4px; }
  .bs-veic-rot { margin-bottom: 5px; font-size: 11.5px; }
  .bs-veic-meds { grid-column: 1 / -1; margin-top: 18px; }
  .bs-veics { padding: 18px 16px 12px; }
  .bs-vazio { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 20px; }
  .bs-vazio h2 { font-size: 22px; }
  .bs-vazio-acoes .btn { flex: 1 1 auto; }
  .bs-pecas-txt { padding: 28px 22px 26px; }
  .bs-pecas h2 { font-size: 30px; }
  .bs-pecas h2 br { display: none; }
  .bs-pecas-passos { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .bs-pecas-passos li { flex-direction: row; gap: 14px; }
  .bs-pecas-passos b { padding-top: 2px; }
  .bs-pecas .btn-lg { width: 100%; }
  .bs-faq { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 44px; padding-top: 32px; }
  .bs-faq-lado h2 { font-size: 25px; }
  .bs-faq-lado p { margin-bottom: 14px; }
  .bs-faq-lista { padding: 2px 18px; }
  .bs-faq-i summary { padding: 17px 0; }
  .bs-faq-i summary h3 { font-size: 16.5px; }
  .bs-mais .btn { width: 100%; }
}
@media (max-width: 520px) {
  .bs-cab h1 { font-size: 27px; }
  .bs-busca { padding: 6px 8px 8px; }
  .bs-abas { padding-bottom: 6px; }
  .bs-aba { padding: 0 10px; font-size: 13.5px; }
  .bs-campos { grid-template-columns: repeat(3, minmax(0, 1fr)) 52px; gap: 6px; }
  .bs-campos--veic { grid-template-columns: repeat(2, minmax(0, 1fr)) 52px; }
  .bs-sel { height: 52px; }
  .bs-sel small { left: 10px; font-size: 10.5px; letter-spacing: .4px; }
  .bs-sel select { padding: 19px 20px 0 10px; background-position: right 8px center; font-size: 15px; }
  .bs-ir { height: 52px; padding: 0; }
  .bs-ir span { display: none; }
  .bs-chips, .bs-rapidas-l { margin: 0 -16px; padding: 2px 16px; }
  .bs-fab-ano-rot { min-width: 100%; }
  .bs-anat span { min-width: 0; flex: 1 1 28%; padding: 10px 11px 9px; }
  .bs-anat b { font-size: 22px; }
}

/* ================= comparar ================= */
.cmp { padding-bottom: 24px; }
.cmp-cab { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; padding: 8px 0 24px; }
.cmp-cab h1 { font-size: 38px; font-weight: 800; line-height: 1.06; letter-spacing: -.6px; }
.cmp-sub { margin-top: 8px; font-size: 15.5px; color: var(--suave); }
.cmp-sub b { color: var(--tinta); }
.cmp-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.cmp-dif { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--tinta); cursor: pointer; }
.cmp-dif-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cmp-dif-txt small { font-size: 12.5px; font-weight: 500; color: var(--suave); }
.cmp-aviso { margin-bottom: 16px; }

.cmp-rolo { position: relative; overflow-x: auto; background: #fff; border-radius: 14px; box-shadow: var(--sombra-1), 0 18px 40px -34px rgba(0, 2, 14, .5); -webkit-overflow-scrolling: touch; }
.cmp-rolo:focus-visible { outline-offset: 3px; }
/* enquanto as células deslizam, o deslocamento não cria barra de rolagem que pisca */
.cmp-rolo.is-movendo-y { overflow-y: hidden; }
.cmp-rolo.is-movendo-x { overflow-x: hidden; }
.cmp-t { width: 100%; min-width: calc(210px + var(--n, 2) * 210px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp-t col.cmp-c-rot { width: 210px; }
.cmp-t th, .cmp-t td { padding: 13px 18px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; font-size: 15px; }
.cmp-t tr:last-child > * { border-bottom: 0; }
.cmp-t thead th, .cmp-t td { border-left: 1px solid var(--linha); }
.cmp-t thead th:first-child { border-left: 0; }
.cmp-t tbody th { font-weight: 600; font-size: 14px; color: var(--texto); }
.cmp-t td { font-weight: 600; color: var(--tinta); }
.cmp-fixa { position: sticky; left: 0; z-index: 2; background: #fff; }
.cmp-t tbody tr:not(.cmp-secao):hover > * { background: #FAFBFD; }
.cmp-t tbody tr:not(.cmp-secao):hover > .cmp-melhor { background: #EDF8F1; }
.cmp-t.is-so-dif tr[data-igual] { display: none; }

.cmp-secao > * { padding: 10px 18px !important; background: #F7F8FA; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .9px; text-transform: uppercase; color: var(--suave) !important; }
.cmp-secao small { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; }
.cmp-secao td { border-left-color: transparent !important; }

/* cabeçalho do produto */
.cmp-p { padding: 18px !important; vertical-align: top !important; font-weight: 400; }
.cmp-p-in { position: relative; display: flex; flex-direction: column; }
.cmp-tirar { position: absolute; top: -6px; right: -6px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--fundo); color: var(--suave); transition: background .15s, color .15s; }
.cmp-tirar:hover { background: #FDE7EA; color: var(--falta); }
.cmp-menor { display: flex; align-items: center; gap: 5px; height: 18px; margin: -4px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ok); }
.cmp-menor.is-vago { visibility: hidden; }
.cmp-menor .ic { stroke-width: 2.6; }
.cmp-foto { position: relative; display: grid; place-items: center; height: 148px; margin: 4px 0 10px; }
.cmp-selo { position: absolute; top: 0; left: 0; z-index: 1; }
.cmp-foto img { max-height: 140px; width: auto; mix-blend-mode: multiply; transition: transform .25s var(--ease, ease); }
.cmp-foto:hover img { transform: scale(1.04); }
.cmp-marca { display: flex; align-items: center; height: 20px; margin-bottom: 6px; }
.cmp-marca img { height: 17px; width: auto; max-width: 100px; object-fit: contain; object-position: left; }
.cmp-marca span { font-weight: 800; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--tinta); }
.cmp-nome { font: 700 18px/1.2 var(--fonte-tit); color: var(--tinta); transition: color .15s; }
.cmp-nome:hover { color: var(--azul); }
.cmp-modelo { min-height: 20px; margin: 2px 0 10px; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: var(--suave); }
.cmp-p .estoque { margin: 8px 0 12px; }
/* o preço assenta na base do bloco: com ou sem "de R$" em cima, o valor e o botão ficam na mesma linha em todas as colunas */
.cmp-p .preco { justify-content: flex-end; }
.cmp-p .btn { width: 100%; height: 42px; padding: 0 12px; font-size: 14.5px; }

/* vaga para adicionar */
.cmp-p--add { background: #FCFCFD; }
.cmp-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 330px; padding: 20px 14px; border: 1.5px dashed #CDD2DC; border-radius: 12px; text-align: center; color: var(--suave); font-size: 13.5px; transition: border-color .15s, background .15s, color .15s; }
.cmp-add:hover { border-color: var(--azul); background: #F7F9FF; color: var(--azul); }
.cmp-add-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); transition: transform .2s var(--ease, ease); }
.cmp-add:hover .cmp-add-ic { transform: scale(1.06); }
.cmp-add b { font-size: 15.5px; color: var(--tinta); }
.cmp-vaga { background: #FCFCFD; }

/* valores */
.cmp-v { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.cmp-nada { font-weight: 500; color: #B4B9C4; }
.cmp-preco { font: 700 17px var(--fonte-tit); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cmp-letra { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #F1F3F7; font: 800 15px var(--fonte); color: var(--tinta); }
.cmp-melhor { background: #F2FAF5; }
.cmp-melhor .cmp-letra { background: var(--ok); color: #fff; }
/* classe do Inmetro/UTQG numa escala: a letra do pneu marcada no lugar dela */
.cmp-escala { display: inline-flex; align-items: center; gap: 3px; }
.cmp-escala i { flex: none; width: 12px; height: 6px; border-radius: 3px; background: #E3E6EC; font-style: normal; }
.cmp-escala i.is-v { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--tinta); font: 800 13.5px/1 var(--fonte); color: #fff; }
.cmp-melhor .cmp-escala i.is-v { background: var(--ok); }
/* barras: preço e desgaste proporcionais ao maior da linha; ruído numa escala fixa de 60 a 80 dB */
.cmp-barra { display: block; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #EDEFF3; }
.cmp-barra i { display: block; height: 100%; border-radius: 3px; background: #B9C0CE; transform: scaleX(var(--k, 1)); transform-origin: left center; }
.cmp-barra.is-melhor i { background: var(--ok); }
.cmp-melhor .cmp-barra { background: #DCEFE3; }
.cmp-dif-v { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
.cmp-selo-melhor { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ok); }
.cmp-selo-melhor .ic { stroke-width: 2.6; }
.cmp-rot, .cmp-rot-ic > span { display: flex; flex-direction: column; line-height: 1.3; }
.cmp-rot-ic { display: flex; align-items: center; gap: 8px; }
.cmp-rot-ic .ic { flex: none; color: var(--suave); }
.cmp-rot small, .cmp-rot-ic small { display: block; font-weight: 500; font-size: 12px; color: var(--suave); }

/* ao abrir: colunas em sequência, barras crescem, selo "Melhor" por último (não repete em redesenho) */
.cmp-t.is-entrando thead .cmp-p, .cmp-t.is-entrando tbody td[data-pid] { animation: cmp-coluna .55s var(--ease) both; animation-delay: calc(var(--c, 0) * 90ms + 80ms); }
.cmp-t.is-entrando .cmp-barra i { animation: cmp-barra .65s var(--ease) both; animation-delay: calc(var(--c, 0) * 90ms + 380ms); }
.cmp-t.is-entrando .cmp-escala i.is-v { animation: cmp-marca .45s var(--ease) both; animation-delay: calc(var(--c, 0) * 90ms + 360ms); }
.cmp-t.is-entrando .cmp-selo-melhor { animation: cmp-selo .5s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--c, 0) * 90ms + 640ms); }
.cmp-t.is-entrando .cmp-selo-melhor .ic path { stroke-dasharray: 22; animation: cmp-traco .4s var(--ease) both; animation-delay: calc(var(--c, 0) * 90ms + 760ms); }
@keyframes cmp-coluna { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes cmp-barra { from { transform: scaleX(0); } }
@keyframes cmp-marca { from { opacity: 0; transform: scale(.6); } }
@keyframes cmp-selo { from { opacity: 0; transform: scale(.5); } }
@keyframes cmp-traco { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
.cmp-sub-v { margin-left: -2px; font-size: 13px; font-weight: 500; color: var(--suave); }
.cmp-canto { vertical-align: bottom !important; padding-bottom: 22px !important; }
.cmp-canto span { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--suave); }
.cmp-canto .cmp-canto-n { margin-bottom: 4px; font: 800 44px/1 var(--fonte-tit); letter-spacing: -.5px; color: var(--tinta); }

/* mini-cabeçalho: quando os cartões do topo saem da tela, uma faixa curta (foto e nome) fica sob o topo do site.
   O JS põe top/left/width do mesmo tamanho da tabela e acompanha a rolagem lateral no celular. */
.cmp-mini { position: fixed; top: 78px; left: 0; z-index: 39; width: 100%; overflow: hidden; background: #fff; border-bottom: 1px solid var(--linha); box-shadow: 0 14px 22px -18px rgba(0, 2, 14, .4); opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0); pointer-events: none; transition: opacity .2s var(--ease, ease), transform .22s var(--ease, ease), visibility 0s linear .22s; }
.cmp-mini.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.cmp-mini.is-sem-anim { transition: none !important; }
.cmp-mini-grade { display: grid; transform: translate3d(calc(var(--sx, 0) * -1px), 0, 0); }
.cmp-mini-canto { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 18px; background: #fff; font-size: 13px; font-weight: 600; color: var(--suave); transform: translate3d(calc(var(--sx, 0) * 1px), 0, 0); }
.cmp-mini-canto b { font: 800 24px/1 var(--fonte-tit); color: var(--tinta); }
.cmp-mini-p { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 16px; border-left: 1px solid var(--linha); color: var(--tinta); }
.cmp-mini-p img { flex: none; width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.cmp-mini-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cmp-mini-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px var(--fonte-tit); }
.cmp-mini-tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--suave); }
.cmp-mini-p:hover .cmp-mini-tx b { color: var(--azul); }

/* a barra fixa de comparar some nesta tela (a tabela já é a comparação) */
.cmp-on .barra-comparar { display: none !important; }
main:has(.cmp) ~ .barra-comparar { display: none !important; }

/* vazio */
.cmp-vazio { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 48px; padding: 40px 40px 38px; background: #fff; border-radius: 16px; box-shadow: var(--sombra-1); }
.cmp-vazio-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 14px; background: var(--azul-claro); color: var(--azul); }
.cmp-vazio h2 { font-size: 28px; font-weight: 800; letter-spacing: -.3px; }
.cmp-vazio-txt > p { max-width: 520px; margin-top: 10px; font-size: 16px; line-height: 1.6; }
.cmp-dica { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 6px; margin: 0 2px; border-radius: 7px; background: var(--fundo); font-size: 14px; font-weight: 600; color: var(--tinta); vertical-align: 1px; white-space: nowrap; }
.cmp-caixinha { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--azul); color: #fff; }
.cmp-caixinha .ic { stroke-width: 3; }
.cmp-vazio .bs-vazio-acoes { margin-top: 22px; }
.cmp-vazio-med { align-self: center; padding: 24px; border-radius: 14px; background: var(--fundo); }
.cmp-vazio-med h3 { margin-bottom: 4px; font-size: 18px; }
.cmp-vazio-med p { margin-bottom: 14px; font-size: 14px; color: var(--suave); }
.cmp-vazio-med .bs-tag { background: #fff; }

@media (max-width: 900px) {
  .cmp-cab h1 { font-size: 29px; }
  .cmp-cab { padding-bottom: 18px; }
  .cmp-rolo { margin: 0 -24px; border-radius: 0; box-shadow: 0 1px 0 var(--linha), 0 -1px 0 var(--linha); }
  .cmp-t { min-width: calc(118px + var(--n, 2) * 176px); }
  .cmp-t col.cmp-c-rot { width: 118px; }
  .cmp-t th, .cmp-t td { padding: 11px 12px; font-size: 14px; }
  .cmp-t tbody th { font-size: 13px; }
  .cmp-fixa { box-shadow: 8px 0 12px -10px rgba(0, 2, 14, .3); }
  .cmp-rot-ic .ic { display: none; }
  .cmp-p { padding: 14px 12px !important; }
  .cmp-foto { height: 100px; }
  .cmp-foto img { max-height: 94px; }
  .cmp-nome { font-size: 16px; }
  .cmp-p .preco-v { font-size: 21px; }
  .cmp-p .preco-pix, .cmp-p .preco-parc { font-size: 12px; }
  .cmp-p .btn { height: 40px; font-size: 13.5px; }
  .cmp-add { min-height: 250px; }
  .cmp-mini-canto { padding: 0 12px; font-size: 12px; }
  .cmp-mini-canto b { font-size: 20px; }
  .cmp-mini-p { gap: 8px; padding: 7px 12px; }
  .cmp-mini-p img { width: 36px; height: 36px; }
  .cmp-mini-tx b { font-size: 14px; }
  .cmp-mini-tx small { font-size: 11.5px; }
  .cmp-selo-melhor .cmp-selo-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-sub-v { display: block; flex-basis: 100%; margin: -4px 0 0; font-size: 12px; }
  .cmp-preco { font-size: 15.5px; }
  .cmp-escala i { width: 10px; }
  .cmp-escala i.is-v { width: 24px; height: 24px; font-size: 13px; }
  .cmp-dif { gap: 8px; font-size: 14px; }
  .cmp-canto .cmp-canto-n { font-size: 34px; }
  .cmp-canto span { font-size: 12px; }
  .cmp-vazio { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 22px; }
  .cmp-vazio h2 { font-size: 23px; }
  .cmp-vazio .btn { width: 100%; }
}
@media (max-width: 520px) {
  .cmp-rolo { margin: 0 -16px; }
}