/* Tema Giro (premium, 4a onda): pecas e equipamentos para moto - preto, grafite, vermelho de corrida e concreto,
   Barlow Condensed em tudo, cantos retos e cortes diagonais. Topo em barra dupla (preta com a busca larga e grafite com o menu
   inclinado), pagina que comeca pela busca "pela sua moto" em fichas de cilindrada, ofertas do dia, abas, dois banners, e
   rodape com a faixa quadriculada de chegada. Carregado depois do CSS do Vitrine e do premium.css. */

.tema-giro { --gi-preto: #121417; --gi-grafite: #23262b; --gi-vermelho: var(--loja, #e63a1f); --gi-concreto: #efefec; --gi-linha: #d9d9d4; --gi-sub: #6c7078; }
body.tema-giro { background: var(--gi-concreto); }

/* ---------- barra dupla */
.gi-topo .vt-aviso { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gi-topo .vt-barra { background: var(--gi-preto); }
.gi-topo .vt-marca img { width: auto; height: var(--logo-altura, 42px); max-width: 230px; border: 0; border-radius: 0; background: none; object-fit: contain; }
body.vitrine .gi-topo .vt-busca { max-width: 680px; }
body.vitrine .gi-topo .vt-busca input { height: 48px; border: 0; border-radius: 0; background: #fff; font-size: 16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%); }
body.vitrine .gi-topo .vt-busca button { right: 0; width: 58px !important; height: 48px; border-radius: 0 !important; background: var(--gi-vermelho) !important; color: #fff !important; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.gi-topo .vt-sacola .counter { background: var(--gi-vermelho); }
.gi-topo .vt-menu { background: var(--gi-grafite); border: 0; }
.gi-topo .vt-menu .container { gap: 0; min-height: 48px; }
.gi-topo .vt-menu a { padding: 13px 20px; border-radius: 0; color: #e8e8e4 !important; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transform: skewX(-12deg); }
.gi-topo .vt-menu a:hover { background: var(--gi-vermelho); color: #fff !important; }
.gi-topo .vt-menu a.vt-ofertas { background: var(--gi-vermelho); color: #fff !important; }

/* ---------- titulos condensados com faixa vermelha */
.tema-giro .vt-secao-cab h2 { display: inline-flex; align-items: center; gap: 12px; font-size: 40px; font-weight: 800 !important; letter-spacing: .01em; color: var(--gi-preto); }
.tema-giro .vt-secao-cab h2::before { content: ""; width: 10px; height: 30px; background: var(--gi-vermelho); transform: skewX(-14deg); }
.tema-giro .vt-secao-cab a { color: var(--gi-vermelho) !important; font-weight: 800; text-transform: uppercase; }

/* ---------- cartao tecnico: canto cortado, preco grande */
.tema-giro .vt-card { border: 0; border-radius: 0; background: #fff; box-shadow: none !important; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.tema-giro .vt-card-img { border-radius: 0; background: #e6e6e3; }
.tema-giro .vt-card-info { padding: 12px 16px 6px; }
.tema-giro .ppc-marca { display: none; }
.tema-giro .vt-card-nome { font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--gi-preto); text-transform: uppercase; }
.tema-giro .vt-card-preco strong { font-size: 28px; font-weight: 800; color: var(--gi-preto); }
.tema-giro .vt-card-botao { margin: 6px 16px 16px; border-radius: 0; background: var(--gi-preto); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tema-giro .vt-card:hover .vt-card-botao { background: var(--gi-vermelho); }
.tema-giro .ppc .ppc-ver { display: none; }
.tema-giro .vt-selo { border-radius: 0; background: var(--gi-vermelho); font-weight: 800; transform: skewX(-12deg); }

/* ---------- abas inclinadas e ofertas do dia */
body.vitrine.tema-giro .hdl-abas-bts { gap: 4px; border: 0; }
body.vitrine.tema-giro .hdl-abas-bts button { padding: 10px 22px; border: 0; border-radius: 0; background: #fff !important; color: var(--gi-preto) !important; font-size: 17px; font-weight: 800; text-transform: uppercase; transform: skewX(-12deg); }
body.vitrine.tema-giro .hdl-abas-bts button[aria-selected="true"] { background: var(--gi-preto) !important; color: #fff !important; }
.tema-giro .hdl-relampago { padding: 30px; border-radius: 0; border: 0; background: var(--gi-preto); color: #e8e8e4; }
body.vitrine.tema-giro .hdl-relampago h2 { font-size: 46px; font-weight: 800; color: #fff; text-transform: uppercase; }
.tema-giro .hdl-relampago p { color: #b9bcc2; }
.tema-giro .hdl-rel-selo { border-radius: 0; background: var(--gi-vermelho); color: #fff; }
.tema-giro .hdl-rel-relogio span { border-radius: 0; background: var(--gi-grafite); color: #fff; }
.tema-giro .hdl-rel-relogio b { font-size: 34px; color: #fff; }
body.vitrine.tema-giro .hdl-hero { border-radius: 0; }
body.vitrine.tema-giro .hdl-hero h2 { font-size: 46px; font-weight: 800; text-transform: uppercase; }
body.vitrine.tema-giro .hdl-hero a, body.vitrine.tema-giro .vt-botao { border-radius: 0 !important; background: var(--gi-vermelho) !important; color: #fff !important; font-weight: 800; text-transform: uppercase; }

/* ---------- busca pela sua moto (bloco Destaques) */
.gi-moto { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; padding: 46px 0; color: #e8e8e4; background: var(--gi-preto); box-shadow: 0 0 0 100vmax var(--gi-preto); clip-path: inset(0 -100vmax); }
.gi-moto::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 6px; background: var(--gi-vermelho); }
.gi-moto-cab small { color: var(--gi-vermelho); font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.vitrine .gi-moto-cab h2 { margin: 6px 0 8px; font-family: var(--fonte-titulos), sans-serif; font-size: 58px; font-weight: 800; line-height: .95; text-transform: uppercase; color: #fff; }
.gi-moto-cab p { margin: 0 0 18px; color: #b9bcc2; font-size: 18px; }
.gi-moto-botao { color: #fff !important; font-size: 17px; font-weight: 800; text-transform: uppercase; text-decoration: none !important; border-bottom: 3px solid var(--gi-vermelho); }
.gi-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gi-ficha { display: grid; gap: 4px; padding: 22px 18px; background: var(--gi-grafite); color: #e8e8e4 !important; text-decoration: none !important; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: background .2s, transform .2s; }
.gi-ficha:hover { background: var(--gi-vermelho); transform: translateY(-3px); }
.gi-ficha b { font-size: 34px; font-weight: 800; line-height: 1; color: #fff; }
.gi-ficha b small { margin-left: 4px; font-size: 16px; color: #b9bcc2; }
.gi-ficha:hover b small { color: #fff; }
.gi-ficha span { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 991px) { .gi-moto { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; } .gi-fichas { grid-template-columns: 1fr 1fr; } body.vitrine .gi-moto-cab h2 { font-size: 42px; } }

/* ---------- carrinho: conta-giros */
.gi-frete { display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: var(--gi-preto); color: #e8e8e4; }
.gi-frete p { margin: 0; font-size: 17px; } .gi-frete b { color: #fff; }
.gi-giros { position: relative; flex: none; width: 64px; height: 36px; overflow: hidden; }
.gi-giros::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from -120deg, #4a4e55 0 190deg, var(--gi-vermelho) 190deg 240deg, transparent 240deg); -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px); }
.gi-giros i { position: absolute; left: 31px; bottom: 4px; width: 2px; height: 28px; background: #fff; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }

/* ---------- rodape: faixa quadriculada de chegada */
.gi-chegada { height: 28px; background: repeating-conic-gradient(#fff 0 25%, var(--gi-preto) 0 50%) 0 0 / 28px 28px; }
.gi-assinatura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding-top: 44px; padding-bottom: 24px; }
.gi-assinatura p { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1; text-transform: uppercase; color: #fff; }
.gi-assinatura ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gi-assinatura li { padding: 7px 14px; background: var(--gi-grafite); color: #e8e8e4; font-size: 15px; font-weight: 700; text-transform: uppercase; transform: skewX(-12deg); }
.gi-rodape .vt-rodape-grade h3 { color: #fff; font-size: 18px; letter-spacing: .08em; }