/* Loja — CSS próprio, seguindo o layout e a paleta do site original. */
:root{
  --primaria:#002055; --secundaria:#56a8b8; --clara:#b0d3de;
  --sucesso:#17848c; --aviso:#fcb92c; --perigo:#bd0811;
  --tinta:#1d2430; --cinza:#6b7280; --linha:#e5e7eb; --fundo:#f5f6f8;
  --raio:8px; --sombra:0 1px 3px rgba(16,24,40,.08); --largura:1400px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Poppins,system-ui,-apple-system,sans-serif;color:var(--tinta);background:#fff;font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
[hidden]{display:none !important}          /* precisa vencer o display:block acima */
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
main{min-height:60vh}
.container{max-width:var(--largura);margin:0 auto;padding:0 16px}

/* ---------- topo azul ---------- */
.topo{position:sticky;top:0;z-index:40;background:var(--primaria)}
.topo-linha{max-width:var(--largura);margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:14px}
.topo-menu{display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:6px}
.topo-menu span{width:21px;height:2px;background:#fff;border-radius:2px}
.topo-logo{display:flex;align-items:center;margin-right:8px}
.topo-logo img{filter:brightness(0) invert(1)}      /* o logo vira branco sobre o azul */
.logo-largo{height:34px;width:auto}
.logo-mini{height:28px;width:auto;display:none}
.topo-busca{flex:1;display:flex;max-width:820px;background:#fff;border-radius:999px;position:relative}
.topo-busca input{flex:1;border:0;outline:0;padding:9px 20px;font-size:14px;color:var(--primaria);
  border-radius:999px 0 0 999px;background:transparent}
.topo-busca button{border:0;background:var(--aviso);color:#3a2a00;padding:0 20px;display:grid;
  place-items:center;border-radius:0 999px 999px 0}
.topo-carrinho{position:relative;color:#fff;padding:4px;margin-left:auto}  /* empurra carrinho e cotação para a direita */
.topo-carrinho .badge{position:absolute;top:-3px;right:-7px;background:var(--aviso);color:#3a2a00;border-radius:999px;
  font-size:11px;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.topo-faixa{height:3px;background:var(--perigo)}

/* ---------- menu lateral ---------- */
.menu-lateral{position:fixed;inset:0 auto 0 0;width:300px;max-width:85vw;background:#fff;z-index:60;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.25)}
.ml-topo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:#fff;color:var(--primaria)}
.ml-topo button{background:none;border:0;font-size:26px;line-height:1;color:var(--cinza)}
.menu-lateral ul{list-style:none;margin:0;padding:0}
.menu-lateral li a{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #f3f4f6;font-size:14px}
.menu-lateral li a em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--cinza)}
.fundo-escuro{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}

/* ---------- home ---------- */
.hero{max-width:var(--largura);margin:14px auto 0;padding:0 16px;position:relative}
.hero img{width:100%;height:auto;border-radius:var(--raio)}
.banner-nav{display:flex;gap:6px;justify-content:center;margin-top:10px}
.banner-nav button{width:8px;height:8px;border-radius:999px;border:0;background:var(--linha);padding:0}
.banner-nav button[aria-current="true"]{background:var(--primaria);width:22px}
.secao{max-width:var(--largura);margin:34px auto;padding:0 16px}
.secao-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.secao h2{font-size:20px;margin:0;font-weight:600;color:var(--primaria);text-transform:uppercase;letter-spacing:.3px}
.secao-topo a{font-size:13px;color:var(--secundaria);font-weight:500;white-space:nowrap}
.carrossel-caixa{position:relative}
.carr-seta{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border:0;
  border-radius:50%;background:#fff;color:var(--primaria);font-size:22px;line-height:1;
  box-shadow:0 2px 10px rgba(16,24,40,.18);display:grid;place-items:center}
.carr-seta:hover{background:var(--primaria);color:#fff}
.carr-seta.esq{left:-6px} .carr-seta.dir{right:-6px}
.carr-seta[hidden]{display:none !important}

.carrossel.setores{grid-auto-columns:minmax(240px,1fr)}
.setor{display:flex;flex-direction:column;text-align:center}
.setor img{width:100%;height:auto;border-radius:var(--raio);aspect-ratio:1;object-fit:cover}
.setor-nome{margin-top:9px;font-size:14px;font-weight:600;color:var(--primaria)}
.setor-qtd{font-size:12px;color:var(--cinza);margin-top:1px}
.marcas{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.marca img{width:100%;height:auto;border-radius:var(--raio)}

/* ---------- produtos ---------- */
.grade{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.carrossel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(178px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.card{border:1px solid var(--linha);border-radius:var(--raio);background:#fff;display:flex;flex-direction:column;
  padding:10px;text-align:center;transition:box-shadow .15s}
.card{transition:box-shadow .28s ease,transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease}
.card:hover{box-shadow:0 6px 20px rgba(16,24,40,.10);transform:translateY(-3px);border-color:var(--clara)}
.card img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.card:hover img{transform:scale(1.035)}
.card-foto{position:relative;aspect-ratio:1;display:grid;place-items:center}
.card-foto img{max-height:100%;width:auto;object-fit:contain}
.selo{position:absolute;top:2px;left:2px;background:var(--perigo);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px}
.card-nome{font-size:12.5px;line-height:1.35;text-transform:uppercase;margin:10px 0 8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:50px}
.card-preco{font-size:17px;font-weight:700;color:var(--primaria);margin-top:auto}

/* ---------- listagem ---------- */
.miolo{max-width:var(--largura);margin:20px auto;padding:0 16px;display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.filtros{border:1px solid var(--linha);border-radius:var(--raio);padding:15px;position:sticky;top:110px}
.filtros h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza);margin:0 0 9px}
.filtros section+section{margin-top:16px;padding-top:16px;border-top:1px solid var(--linha)}
.filtros a{display:block;font-size:13px;padding:4px 0}
.filtros a:hover{color:var(--secundaria)}
.filtros a.ativo{color:var(--primaria);font-weight:600}
.filtros .faixa{display:flex;gap:6px;margin-top:8px}
.filtros .faixa input{width:100%;border:1px solid var(--linha);border-radius:6px;padding:7px;font-size:13px}
.filtros .faixa button{border:0;background:var(--primaria);color:#fff;border-radius:6px;padding:0 12px}
.lista-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.lista-topo h1{font-size:20px;margin:0;color:var(--primaria);text-transform:uppercase}
.lista-topo .conta{font-size:13px;color:var(--cinza)}
.lista-topo select{border:1px solid var(--linha);border-radius:6px;padding:8px 10px;font-size:13px;background:#fff}
.migalhas{max-width:var(--largura);margin:12px auto 0;padding:0 16px;font-size:12.5px;color:var(--cinza)}
.paginacao{display:flex;gap:6px;justify-content:center;margin:28px 0;flex-wrap:wrap}
.paginacao a,.paginacao span{min-width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--linha);border-radius:6px;font-size:13px;padding:0 9px}
.paginacao .atual{background:var(--primaria);color:#fff;border-color:var(--primaria);font-weight:600}
.vazio{text-align:center;padding:60px 20px;color:var(--cinza)}

/* ---------- produto ---------- */
.prod{max-width:var(--largura);margin:20px auto;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.galeria-principal{border:1px solid var(--linha);border-radius:var(--raio);aspect-ratio:1;display:grid;place-items:center;padding:20px}
.galeria-principal img{max-height:100%;width:auto;object-fit:contain}
.galeria-mini{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.galeria-mini button{width:62px;height:62px;border:1.5px solid var(--linha);border-radius:7px;background:#fff;padding:4px;display:grid;place-items:center}
.galeria-mini button[aria-current="true"]{border-color:var(--primaria)}
.prod h1{font-size:23px;margin:0 0 6px;line-height:1.3;color:var(--primaria);text-transform:uppercase}
.prod-meta{font-size:12.5px;color:var(--cinza);margin-bottom:16px}
.prod-de{font-size:14px;color:var(--cinza);text-decoration:line-through}
.prod-preco{font-size:33px;font-weight:700;color:var(--primaria);line-height:1.1}
.prod-pix{font-size:14px;color:var(--sucesso);font-weight:600;margin-top:4px}
.prod-parc{font-size:13.5px;color:var(--cinza)}
.caixa-compra{border:1px solid var(--linha);border-radius:var(--raio);padding:17px;margin-top:18px}
.qtd{display:flex;border:1px solid var(--linha);border-radius:7px;width:fit-content;overflow:hidden;margin-bottom:12px}
.qtd button{border:0;background:#fff;width:40px;height:42px;font-size:18px;color:var(--primaria)}
.qtd input{width:52px;border:0;border-left:1px solid var(--linha);border-right:1px solid var(--linha);text-align:center;font-size:15px;outline:0}
.btn-comprar{width:100%;border:0;background:var(--aviso);color:#3a2a00;font-weight:700;font-size:15.5px;padding:14px;border-radius:8px}
.btn-comprar:hover{filter:brightness(.95)}
.selo-estoque{font-size:12.5px;color:var(--sucesso);margin-top:10px;font-weight:500}
.abas{max-width:var(--largura);margin:44px auto;padding:0 16px}
.abas-nav{display:flex;gap:22px;border-bottom:1px solid var(--linha);margin-bottom:18px}
.abas-nav button{background:none;border:0;padding:11px 2px;font-size:14px;font-weight:500;color:var(--cinza);border-bottom:2px solid transparent}
.abas-nav button[aria-selected="true"]{color:var(--primaria);border-bottom-color:var(--primaria)}
.aba-conteudo{font-size:14.5px;line-height:1.75;white-space:pre-line;color:#374151;max-width:900px}
.ficha-linha{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #f3f4f6;font-size:14px}
.ficha-linha b{min-width:200px;font-weight:500;color:var(--cinza)}

/* ---------- carrinho ---------- */
.carrinho{max-width:1060px;margin:26px auto;padding:0 16px;display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start}
.carr-item{display:grid;grid-template-columns:92px 1fr auto;gap:14px;padding:15px 0;border-bottom:1px solid var(--linha);align-items:center}
.carr-item .foto{border:1px solid var(--linha);border-radius:7px;aspect-ratio:1;display:grid;place-items:center;padding:6px}
.carr-nome{font-size:13.5px;line-height:1.35;margin-bottom:5px;text-transform:uppercase}
.carr-preco{font-weight:600;color:var(--primaria)}
.carr-remover{background:none;border:0;color:var(--cinza);font-size:12.5px;text-decoration:underline;padding:0;margin-top:5px}
.resumo{border:1px solid var(--linha);border-radius:var(--raio);padding:19px;position:sticky;top:110px}
.resumo h2{font-size:16px;margin:0 0 13px;color:var(--primaria)}
.resumo-linha{display:flex;justify-content:space-between;font-size:14px;padding:6px 0}
.resumo-total{display:flex;justify-content:space-between;font-size:19px;font-weight:700;color:var(--primaria);padding-top:11px;margin-top:8px;border-top:1px solid var(--linha)}
.btn-checkout{width:100%;border:0;background:var(--sucesso);color:#fff;font-weight:700;font-size:15px;padding:14px;border-radius:8px;margin-top:13px}

/* ---------- institucional ---------- */
.pagina{max-width:900px;margin:28px auto 56px;padding:0 16px}
.pagina h1{font-size:23px;color:var(--primaria);margin-bottom:16px;text-transform:uppercase}
.pagina .texto{font-size:14.5px;line-height:1.8;color:#374151;white-space:pre-line}
.pagina .texto h2{font-size:16.5px;color:var(--primaria);margin:24px 0 8px;text-transform:uppercase}

/* ---------- rodapé ---------- */
.rodape{background:var(--primaria);color:#fff;margin-top:52px;padding:36px 16px 0}
.rod-grade{max-width:var(--largura);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:34px}
.rodape h5{color:#fff;font-size:15px;font-weight:700;margin:0 0 12px}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:8px}
.rodape a{font-size:14px;color:#fff}
.rodape a:hover{color:var(--aviso)}
.rod-sub{font-size:13.5px;color:#c9d4e4;margin:0 0 12px}
.rod-contato p{display:flex;align-items:center;gap:9px;font-size:14px;margin:0 0 9px}
.rod-contato .ico{color:var(--aviso);width:16px;text-align:center;font-size:15px}
.rod-fim{max-width:var(--largura);margin:28px auto 0;padding:15px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.ico-aviso{background:var(--aviso);color:#3a2a00;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}

/* ---------- aviso do carrinho ---------- */
.aviso-add{position:fixed;right:18px;bottom:18px;background:var(--sucesso);color:#fff;padding:13px 18px;border-radius:8px;
  font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:80;opacity:0;transform:translateY(12px);transition:.22s;max-width:320px}
.aviso-add.mostra{opacity:1;transform:none}

@media(max-width:1200px){ .grade{grid-template-columns:repeat(4,1fr)} }
@media(max-width:980px){
  .miolo{grid-template-columns:1fr} .filtros{position:static}
  .prod{grid-template-columns:1fr;gap:24px}
  .carrinho{grid-template-columns:1fr}
  .rod-grade{grid-template-columns:1fr 1fr}
  .marcas{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .grade{grid-template-columns:repeat(2,1fr);gap:10px}
  .carrossel.setores{grid-auto-columns:minmax(168px,1fr)}
  .carr-seta{display:none}
  .marcas{grid-template-columns:repeat(2,1fr)}
  .logo-largo{display:none} .logo-mini{display:block}
  .topo-linha{flex-wrap:wrap;gap:10px}
  .topo-busca{order:4;flex-basis:100%;max-width:none}
  .prod-preco{font-size:27px}
  .rod-grade{grid-template-columns:1fr;gap:24px}
  .secao h2{font-size:17px}
}

/* ---------- acréscimos: redes, cotação, selos, título de seção, newsletter ---------- */
.topo-cotacao{display:flex;align-items:center;gap:7px;color:#fff;font-weight:700;font-size:14px;white-space:nowrap;margin-left:14px}
.topo-cotacao img{width:32px;height:32px;flex:none}

.secao-titulo{text-align:center;margin-bottom:18px}
.secao-titulo h2{font-size:22px;font-weight:700;color:var(--primaria);margin:0 0 4px}
.secao-titulo span{font-size:15px;color:var(--cinza);font-weight:400}
.secao-vermais{text-align:center;margin:14px 0 0}
.secao-vermais a{font-size:13.5px;color:var(--secundaria);font-weight:600}

/* com poucos selos, 1fr estica cada um para meia tela; o teto mantém a
   largura de leitura e o conjunto fica centrado */
.selos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,430px));
  gap:14px;justify-content:center}
.selo-card{background:var(--primaria);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px;min-height:100px}
.selo-card img{width:52px;height:52px;flex:none}
.selo-card h6{margin:0 0 2px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  background:linear-gradient(90deg,#fcb92c,#e4b861 35%,#fffc97);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.selo-card p{margin:0;color:#fff;font-size:15px;line-height:1.35}

.card-de{font-size:12.5px;color:var(--cinza);text-decoration:line-through;display:block;margin-bottom:2px}
.card-home .card-preco{color:var(--perigo)}     /* na home o preço é vermelho; na listagem, azul */

.newsletter{max-width:var(--largura);margin:34px auto;padding:26px 20px;background:var(--primaria);border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.newsletter strong{color:var(--aviso);font-size:16px;display:block;margin-bottom:4px}
.newsletter p{color:#fff;margin:0;font-size:14.5px;max-width:560px}
.newsletter form{display:flex;gap:8px}
.newsletter input{border:0;border-radius:7px;padding:11px 14px;font-size:14px;min-width:230px;outline:0}
.newsletter button{border:0;border-radius:7px;padding:11px 20px;background:var(--aviso);color:#3a2a00;font-weight:700;font-size:14px}

.zap{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;font-size:26px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:70}

@media(max-width:980px){ .selos{grid-template-columns:1fr} }
@media(max-width:700px){
  .newsletter{flex-direction:column;align-items:flex-start}
  .newsletter form{width:100%} .newsletter input{flex:1;min-width:0}
}

/* ---------- banner: arte larga no desktop, quadrada no celular ---------- */
.hero picture{display:block}
.hero picture[hidden]{display:none !important}
.hero > picture img{width:100%;height:auto;aspect-ratio:1600/1197;object-fit:cover;border-radius:var(--raio)}
.hero .faixa-rc img{aspect-ratio:2560/500;object-fit:cover}   /* a faixa é tira larga */
@media(max-width:700px){
  .hero > picture img{aspect-ratio:900/673}   /* a arte de celular é quase quadrada */
  .hero .faixa-rc img{aspect-ratio:1400/273}
}

/* ---------- menu lateral com subcategorias ---------- */
.ml-lista{list-style:none;margin:0;padding:0}
.ml-item{display:flex;align-items:stretch;border-bottom:1px solid #f3f4f6}
.ml-item>a{flex:1;display:flex;align-items:center;gap:10px;padding:10px 6px 10px 16px;font-size:14px;min-width:0}
.ml-item>a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-item>a em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--cinza)}
.ml-abrir{border:0;background:none;width:40px;font-size:19px;line-height:1;color:var(--cinza);flex:none}
.ml-abrir[aria-expanded="true"]{color:var(--primaria)}
.ml-subs{list-style:none;margin:0;padding:4px 0 8px;background:#f8f9fb;border-bottom:1px solid #f3f4f6}
.ml-subs a{display:flex;gap:8px;padding:7px 16px 7px 44px;font-size:13px;color:#4b5563}
.ml-subs a:hover{color:var(--primaria)}
.ml-subs em{margin-left:auto;font-style:normal;font-size:11px;color:var(--cinza)}

/* ---------- frete e impostos na página do produto ---------- */
.caixa-frete{border:1px solid var(--linha);border-radius:var(--raio);padding:17px;margin-top:16px}
.caixa-frete h3{margin:0 0 4px;font-size:15px;color:var(--primaria)}
.frete-ajuda{margin:0 0 12px;font-size:13px;color:var(--cinza)}
.frete-form{display:flex;gap:8px}
.frete-form input{flex:1;max-width:180px;border:1px solid var(--linha);border-radius:7px;padding:10px 12px;font-size:14px;outline:0}
.frete-form input:focus{border-color:var(--secundaria)}
.frete-form button{border:0;background:var(--primaria);color:#fff;font-weight:600;font-size:14px;padding:10px 20px;border-radius:7px}
.frete-resultado{margin-top:14px}
.frete-uf{font-size:12.5px;color:var(--cinza);margin-bottom:8px}
.frete-op{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linha);flex-wrap:wrap}
.frete-op-nome{font-size:14px;font-weight:600;color:var(--tinta)}
.frete-op-prazo{font-size:12px;color:var(--cinza);display:block;font-weight:400}
.frete-op-valores{text-align:right;font-size:12.5px;color:var(--cinza)}
.frete-op-total{display:block;font-size:17px;font-weight:700;color:var(--primaria)}
.frete-erro{color:var(--perigo);font-size:13.5px;margin-top:10px}
.frete-aviso{font-size:11.5px;color:var(--cinza);margin:12px 0 0;line-height:1.5}

/* ---------- selos de benefício na página do produto ---------- */
.beneficios{list-style:none;margin:16px 0 0;padding:16px 18px;display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--linha);border-radius:var(--raio)}
.beneficios li{display:flex;align-items:flex-start;gap:12px}
.beneficios li img{width:34px;height:34px;flex:none;margin-top:1px}
.beneficios strong{display:block;font-size:14px;color:var(--primaria);font-weight:600;margin-bottom:1px}
.beneficios span{font-size:12.5px;color:var(--cinza);line-height:1.45}

/* ---------- transição entre páginas ---------- */
@view-transition { navigation: auto; }          /* cross-fade nativo onde houver suporte */

/* Curvas: a saída acelera (o olho já largou a página), a entrada desacelera
   devagar no fim — é o que faz parecer assentar em vez de aparecer de supetão. */
::view-transition-old(root){animation:sai .30s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:entra .46s cubic-bezier(.16,1,.3,1) both}
@keyframes sai  { to   { opacity:0; transform:translateY(-5px) } }
@keyframes entra{ from { opacity:0; transform:translateY(12px) } }

/* barra de progresso do topo */
#carregando{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--aviso),#fffc97);
  box-shadow:0 0 8px rgba(252,185,44,.6);
  transition:width .28s cubic-bezier(.16,1,.3,1),opacity .34s ease;opacity:0;pointer-events:none}
#carregando.ativo{opacity:1}

/* fade de entrada para quem não tem View Transitions */
.sem-vt main{animation:entra .46s cubic-bezier(.16,1,.3,1) both}

/* enquanto sai da página, o conteúdo esmaece de leve */
body.saindo main{opacity:.42;transform:translateY(-4px);
  transition:opacity .38s ease,transform .38s cubic-bezier(.4,0,1,1)}
body.saindo{cursor:progress}

@media (prefers-reduced-motion: reduce){        /* respeita quem pediu menos animação */
  @view-transition { navigation: none; }
  .sem-vt main,body.saindo main{animation:none;opacity:1;transform:none;transition:none}
  #carregando{transition:none}
}

/* ---------- checkout ---------- */
.checkout{max-width:1100px;margin:24px auto 60px;padding:0 16px;display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
.ck-form h1{font-size:23px;color:var(--primaria);margin:0 0 18px}
.ck-passo{border:1px solid var(--linha);border-radius:var(--raio);padding:18px;margin-bottom:16px}
.ck-passo h2{display:flex;align-items:center;gap:9px;font-size:16px;color:var(--primaria);margin:0 0 14px}
.ck-passo h2 span{width:24px;height:24px;border-radius:50%;background:var(--primaria);color:#fff;
  display:grid;place-items:center;font-size:13px;flex:none}
.ck-sub{font-size:14px;color:var(--primaria);margin:18px 0 10px}
.ck-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ck-grade .c2{grid-column:span 2}
.ck-grade label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--cinza)}
.ck-grade input{border:1px solid var(--linha);border-radius:7px;padding:10px 12px;font-size:14px;color:var(--tinta);outline:0}
.ck-grade input:focus{border-color:var(--secundaria)}
.erro{color:var(--perigo);font-size:12px}
.ck-opcoes{display:flex;flex-direction:column;gap:9px}
.ck-opcao{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--linha);
  border-radius:9px;padding:14px 16px;cursor:pointer;
  transition:border-color .22s ease,background .22s ease}
.ck-opcao:hover{border-color:var(--clara)}
.ck-opcao:has(input:checked){border-color:var(--primaria);background:#f7f9fc}
.ck-opcao input{width:17px;height:17px;flex:none;margin:1px 0 0;accent-color:var(--primaria)}
.ck-op-nome{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--tinta);
  display:flex;flex-direction:column;gap:3px;line-height:1.35}
.ck-op-nome em{font-style:normal;font-size:12.5px;font-weight:400;color:var(--cinza);line-height:1.45}
.ck-op-preco{font-weight:700;color:var(--primaria);white-space:nowrap;font-size:14.5px;
  padding-top:1px}
.ck-nota{font-size:12.5px;color:var(--cinza);background:#f7f9fc;border-radius:7px;padding:11px 13px;margin:12px 0 0;line-height:1.5}
.ck-alerta{background:#fdecec;color:var(--perigo);border-radius:7px;padding:12px 14px;font-size:13.5px;margin:0 0 16px}
.ck-enviar{width:100%;border:0;background:var(--sucesso);color:#fff;font-weight:700;font-size:16px;padding:15px;border-radius:9px}
.ck-enviar:hover{filter:brightness(.95)}
.ck-resumo{border:1px solid var(--linha);border-radius:var(--raio);padding:18px;position:sticky;top:110px}
.ck-resumo h2{font-size:16px;margin:0 0 14px;color:var(--primaria)}
.ck-item{display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid #f3f4f6}
.ck-item img{border:1px solid var(--linha);border-radius:6px;object-fit:contain}
.ck-item-nome{font-size:12.5px;line-height:1.35;display:flex;flex-direction:column;gap:2px}
.ck-item-nome em{font-style:normal;color:var(--cinza);font-size:11.5px}
.ck-item-preco{font-size:13px;font-weight:600;color:var(--primaria)}

/* ---------- pedido confirmado ---------- */
.pedido{max-width:900px;margin:26px auto 60px;padding:0 16px}
.ped-topo{text-align:center;margin-bottom:26px}
.ped-ok{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--sucesso);color:#fff;font-size:26px;margin-bottom:12px}
.ped-topo h1{font-size:24px;color:var(--primaria);margin:0 0 8px}
.ped-topo p{font-size:14.5px;color:var(--cinza);margin:0 0 12px}
.ped-situacao{display:inline-block;font-size:12.5px;font-weight:600;padding:5px 13px;border-radius:999px}
.ped-situacao.aguardando{background:#fff5d9;color:#8a6200}
.ped-situacao.pago{background:#e3f5ee;color:var(--sucesso)}
.ped-situacao.enviado{background:#e6effa;color:var(--primaria)}
.ped-situacao.cancelado{background:#fdecec;color:var(--perigo)}
.ped-colunas{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px}
.ped-colunas h2{font-size:15px;color:var(--primaria);margin:0 0 11px}
.ped-colunas section+section h2:not(:first-child){margin-top:20px}
.ped-dados{font-size:14px;line-height:1.7;color:#374151;margin:0}
.ped-voltar{text-align:center;margin-top:30px}
.ped-voltar a{color:var(--secundaria);font-weight:600;font-size:14px}

@media(max-width:900px){
  .checkout{grid-template-columns:1fr}
  .ck-resumo{position:static}
  .ped-colunas{grid-template-columns:1fr}
}
@media(max-width:600px){ .ck-grade{grid-template-columns:1fr} .ck-grade .c2{grid-column:span 1} }

/* ---------- seletor de tamanho e voltagem ---------- */
.variacoes{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.var-rotulo{display:block;font-size:12.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.var-opcoes{display:flex;flex-wrap:wrap;gap:8px}
.var-op input{position:absolute;opacity:0;pointer-events:none}
.var-op span{display:grid;place-items:center;min-width:46px;height:40px;padding:0 13px;
  border:1.5px solid var(--linha);border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;transition:.12s}
.var-op span:hover{border-color:var(--secundaria)}
.var-op input:checked + span{border-color:var(--primaria);background:var(--primaria);color:#fff}
.var-op input:focus-visible + span{outline:2px solid var(--secundaria);outline-offset:2px}

/* ---------- faixa de remessa na página do produto ---------- */
.faixa-remessa{display:block;margin-top:16px}
.faixa-remessa img{width:100%;height:auto;border-radius:var(--raio)}

/* ---------- busca: avisos, nada encontrado e sugestões ---------- */
.busca-aviso{background:#f8fafc;border-left:3px solid var(--secundaria);border-radius:0 6px 6px 0;
  padding:10px 14px;margin:0 0 14px;font-size:14px;color:var(--tinta)}
.busca-aviso strong{color:var(--primaria)}
.busca-aviso a{color:var(--sucesso);text-decoration:underline;text-underline-offset:2px}

.busca-nada{text-align:center;padding:46px 20px 30px;color:var(--cinza)}
.busca-nada svg{color:var(--clara);margin-bottom:8px}
.busca-nada h2{font-size:19px;color:var(--primaria);margin:0 0 6px}
.busca-nada p{margin:6px 0}
.busca-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px}
.busca-chips a{background:#fff;border:1px solid var(--linha);border-radius:999px;padding:7px 16px;
  font-size:14px;color:var(--primaria);box-shadow:var(--sombra);transition:border-color .15s,color .15s}
.busca-chips a:hover{border-color:var(--secundaria);color:var(--sucesso)}
.busca-nada-cats{font-size:13px;margin-top:18px}
.busca-nada-cats a{color:var(--sucesso);text-decoration:underline;text-underline-offset:2px}

/* sugestões enquanto digita */
.sugestoes{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:10px;
  box-shadow:0 10px 28px rgba(0,32,85,.22);overflow:hidden;z-index:60;padding:4px 0}
.sugestoes li{list-style:none}
.sugestoes a{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:14px;color:var(--tinta)}
.sugestoes a:hover,.sugestoes .marcada a{background:#f1f5f9}
.sugestoes svg{color:var(--cinza);flex:none}
.sugestoes b{font-weight:600;color:var(--primaria)}
.sugestoes ul{margin:0;padding:0}
.sugestoes .sug-prod a{gap:10px}
.sugestoes .sug-prod img{width:36px;height:36px;object-fit:contain;flex:none;background:#fff}
.sugestoes .sug-prod span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.sugestoes .sug-prod em{font-style:normal;font-weight:600;color:var(--primaria);font-size:13px;flex:none}
.sugestoes li + .sug-prod:first-of-type{border-top:1px solid var(--linha);margin-top:4px;padding-top:4px}

/* ---------- checkout: CEP, impostos ao vivo ---------- */
.ck-cep-aviso{display:block;font-size:13px;margin-top:-6px;color:var(--cinza)}
.ck-cep-aviso.ok{color:var(--sucesso)}
.ck-cep-aviso.erro{color:var(--perigo)}
.ck-cep-aviso.carregando{color:var(--cinza)}
.ck-cep-aviso.carregando::after{content:'';display:inline-block;width:11px;height:11px;margin-left:7px;
  vertical-align:-1px;border:2px solid var(--linha);border-top-color:var(--secundaria);
  border-radius:50%;animation:girando .7s linear infinite}
@keyframes girando{to{transform:rotate(360deg)}}

/* o valor que muda pisca de leve, para o olho perceber que recalculou */
.ck-piscou{animation:piscar .5s ease}
@keyframes piscar{0%{background:rgba(86,168,184,.28)}100%{background:transparent}}

.ck-resumo-nota{font-size:12.5px;color:var(--cinza);line-height:1.5;margin:12px 0 0;
  border-top:1px solid var(--linha);padding-top:12px}

.ck-rastrear{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  border:1px solid var(--linha);border-radius:9px;padding:11px 14px;font-size:14px;
  font-weight:600;color:var(--primaria);background:#fff;transition:border-color .2s,color .2s,transform .2s}
.ck-rastrear:hover{border-color:var(--secundaria);color:var(--sucesso);transform:translateY(-1px)}
.ck-rastrear svg{color:var(--secundaria);flex:none}

/* ---------- página de rastreio ---------- */
.rastreio{margin:26px auto 40px;max-width:900px}
.rastreio h1{font-size:23px;color:var(--primaria);margin:0 0 4px;text-transform:uppercase}
.rastreio-ajuda{color:var(--cinza);font-size:14px;margin:0 0 18px}
.rastreio-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;
  background:var(--fundo);border-radius:12px;padding:16px}
.rastreio-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--primaria)}
.rastreio-form input{border:1px solid var(--linha);border-radius:8px;padding:11px 13px;font-size:15px;
  background:#fff;font-weight:400;text-transform:uppercase}
.rastreio-form input:focus{outline:2px solid var(--clara);outline-offset:1px;border-color:var(--secundaria)}
.rastreio-form button{border:0;background:var(--sucesso);color:#fff;font-weight:700;font-size:15px;
  padding:12px 26px;border-radius:8px;transition:filter .2s,transform .2s}
.rastreio-form button:hover{filter:brightness(.94);transform:translateY(-1px)}
.rastreio-erro{background:#fff4f4;border-left:3px solid var(--perigo);border-radius:0 6px 6px 0;
  padding:12px 15px;margin:16px 0 0;font-size:14px;color:var(--perigo)}
.rastreio-rodape{font-size:12.5px;color:var(--cinza);margin-top:22px;text-align:center}

.rastreio-caixa{border:1px solid var(--linha);border-radius:12px;margin-top:20px;overflow:hidden;
  box-shadow:var(--sombra);animation:entra .34s ease both}
.rastreio-cabec{display:flex;flex-wrap:wrap;gap:22px;background:var(--primaria);color:#fff;padding:16px 20px}
.rastreio-cabec strong{display:block;font-size:16px}
.rastreio-rot{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.rastreio-cancelado{margin:0;padding:20px;color:var(--perigo);font-weight:600;text-align:center}

.linha-tempo{list-style:none;margin:0;padding:24px 20px 10px}
.linha-tempo li{display:flex;gap:14px;padding-bottom:22px;position:relative}
.linha-tempo li:last-child{padding-bottom:6px}
.linha-tempo li::before{content:'';position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--linha)}
.linha-tempo li:last-child::before{display:none}
.linha-tempo li.feita::before{background:var(--sucesso)}
.lt-marca{width:18px;height:18px;border-radius:50%;border:2px solid var(--linha);background:#fff;
  flex:none;margin-top:2px;position:relative;z-index:1}
.linha-tempo li.feita .lt-marca{background:var(--sucesso);border-color:var(--sucesso)}
.linha-tempo li.agora .lt-marca{border-color:var(--secundaria);
  box-shadow:0 0 0 4px rgba(86,168,184,.22);animation:pulsando 1.8s ease-in-out infinite}
@keyframes pulsando{50%{box-shadow:0 0 0 8px rgba(86,168,184,.10)}}
.linha-tempo strong{display:block;font-size:15px;color:var(--primaria)}
.linha-tempo em{display:block;font-style:normal;font-size:13px;color:var(--cinza);margin-top:2px}
.linha-tempo .lt-quando{display:block;font-size:12px;color:var(--secundaria);margin-top:3px}
.linha-tempo li.futura strong{color:var(--cinza)}
.linha-tempo li.futura em,.linha-tempo li.futura strong{opacity:.65}

.rastreio-colunas{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;padding:20px;border-top:1px solid var(--linha)}
.rastreio-colunas h2{font-size:14px;text-transform:uppercase;color:var(--primaria);margin:0 0 10px}
.rastreio-colunas section + section h2:not(:first-child){margin-top:18px}

@media(max-width:760px){
  .rastreio-form{grid-template-columns:1fr}
  .rastreio-colunas{grid-template-columns:1fr;gap:18px}
}

/* ---------- estados de carregamento ---------- */
.girinho{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
  border-top-color:currentColor;border-radius:50%;animation:girando .68s linear infinite;
  vertical-align:-2px;margin-right:8px;flex:none}
.girinho.grande{width:30px;height:30px;border-width:3px;margin:0 0 14px;
  border-color:rgba(0,32,85,.14);border-top-color:var(--secundaria)}
.ocupado{pointer-events:none;opacity:.86;cursor:progress}
.ocupado .girinho{border-color:rgba(255,255,255,.32);border-top-color:currentColor}
button.ocupado,a.ocupado{display:inline-flex;align-items:center;justify-content:center}

/* confirmação curta depois de adicionar: o olho precisa ver que deu certo */
.btn-comprar.deu-certo{background:var(--sucesso);color:#fff}
.certo{display:inline-block;margin-right:8px;font-weight:700;animation:brotar .32s ease both}
@keyframes brotar{from{transform:scale(.4);opacity:0}}

.carr-item.linha-ocupada{opacity:.45;filter:saturate(.4);pointer-events:none;
  transition:opacity .25s ease,filter .25s ease}

/* cobertura de tela: só para gravar o pedido */
.cobertura{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
.cobertura.mostra{opacity:1}
.cobertura-caixa{display:flex;flex-direction:column;align-items:center;
  background:#fff;border-radius:14px;padding:30px 40px;box-shadow:0 14px 44px rgba(0,32,85,.18)}
.cobertura-caixa p{margin:0;font-size:15px;font-weight:600;color:var(--primaria)}

.frete-ajuda.carregando::after{content:'';display:inline-block;width:11px;height:11px;margin-left:8px;
  vertical-align:-1px;border:2px solid var(--linha);border-top-color:var(--secundaria);
  border-radius:50%;animation:girando .7s linear infinite}

@media(prefers-reduced-motion:reduce){
  .girinho,.ck-cep-aviso.carregando::after,.frete-ajuda.carregando::after{animation:none}
  .cobertura{transition:none}
}

/* ---------- selo "imposto já pago" (carrinho e checkout) ---------- */
.selo-imposto{border:1px solid var(--clara);background:#f4fafb;border-radius:11px;
  padding:15px 17px;margin:18px 0}
.selo-imposto-topo{display:flex;align-items:center;gap:9px;color:var(--sucesso);margin-bottom:10px}
.selo-imposto-topo strong{font-size:15px;color:var(--primaria)}
.selo-imposto ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.selo-imposto li{display:flex;gap:9px;font-size:13.5px;line-height:1.5;color:var(--tinta)}
.selo-imposto li .tique{color:var(--sucesso);font-weight:700;flex:none}
.selo-imposto li strong{color:var(--primaria)}

/* ---------- pagamento por Pix ---------- */
.pix{border:1px solid var(--linha);border-radius:12px;padding:20px;margin:20px 0;
  box-shadow:var(--sombra);animation:entra .4s cubic-bezier(.16,1,.3,1) both}
.pix h2{margin:0 0 16px;font-size:17px;color:var(--primaria);text-align:center}
.pix-colunas{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.pix-qr{width:200px;height:200px;display:grid;place-items:center;color:var(--tinta);
  border:1px solid var(--linha);border-radius:10px;padding:8px;background:#fff}
.pix-qr svg{width:100%;height:100%}
.pix-semqr{font-size:13px;color:var(--cinza);text-align:center;padding:12px}
.pix-valor{font-size:26px;font-weight:700;color:var(--primaria);margin:0 0 6px}
.pix-passo{font-size:13.5px;color:var(--cinza);line-height:1.55;margin:0 0 12px}
.pix-copia{display:flex;gap:8px}
.pix-copia input{flex:1;min-width:0;border:1px solid var(--linha);border-radius:8px;
  padding:10px 12px;font-size:12px;font-family:ui-monospace,Menlo,monospace;background:var(--fundo);color:var(--cinza)}
.pix-copia button{border:0;background:var(--primaria);color:#fff;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:8px;white-space:nowrap;transition:background .25s ease,transform .2s ease}
.pix-copia button:hover{transform:translateY(-1px)}
.pix-copia button.copiado{background:var(--sucesso)}
.pix-espera{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--cinza);margin:14px 0 0}
.pix-ponto{width:9px;height:9px;border-radius:50%;background:var(--aviso);flex:none;
  animation:pulsando-ponto 1.5s ease-in-out infinite}
@keyframes pulsando-ponto{0%,100%{opacity:1}50%{opacity:.25}}
.pix-ok{color:var(--sucesso);font-weight:700}
.pix-prazo{font-size:12.5px;color:var(--secundaria);margin:6px 0 0}
.pix-prazo.vencido{color:var(--perigo)}
.pix-pago{background:#eefaf3;border-left:3px solid var(--sucesso);border-radius:0 8px 8px 0;
  padding:14px 17px;margin:18px 0;color:var(--sucesso);font-weight:600}

@media(max-width:700px){
  .pix-colunas{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pix-copia{width:100%}
  .pix-espera{justify-content:center}
}
.ck-nota-ok{border-left:3px solid var(--sucesso);background:#eefaf3;color:var(--tinta)}
.var-grupo.var-unica{display:flex;align-items:baseline;gap:8px}
.var-unica .var-valor{font-size:14px;font-weight:600;color:var(--primaria)}

/* ---------- faixa do Remessa Conforme na home ---------- */
.faixa-rc{display:block;margin-top:10px;border-radius:var(--raio);overflow:hidden;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease}
.faixa-rc img{width:100%;height:auto}
.faixa-rc:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,32,85,.14)}

/* ---------- página do Remessa Conforme ---------- */
.rc{max-width:900px;margin:0 auto 50px;padding:0 16px}
.rc-topo img{width:100%;height:auto;border-radius:var(--raio);margin-top:20px}
.rc-topo h1{font-size:26px;color:var(--primaria);margin:22px 0 10px;text-transform:uppercase;line-height:1.25}
.rc-linha{font-size:16px;line-height:1.6;color:var(--tinta);margin:0 0 6px}
.rc-linha strong{color:var(--sucesso)}

.rc-cartoes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0}
.rc-cartoes div{border:1px solid var(--linha);border-radius:11px;padding:16px 18px;background:#fff}
.rc-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--sucesso);color:#fff;font-weight:700;font-size:14px;margin-bottom:9px}
.rc-cartoes h2{font-size:15px;color:var(--primaria);margin:0 0 5px}
.rc-cartoes p{font-size:13.5px;line-height:1.55;color:var(--cinza);margin:0}

.rc-bloco{margin:30px 0}
.rc-bloco h2{font-size:18px;color:var(--primaria);margin:0 0 10px;text-transform:uppercase}
.rc-bloco p{font-size:15px;line-height:1.7;color:var(--tinta);margin:0 0 12px}
.rc-bloco strong{color:var(--primaria)}

.rc-passos{counter-reset:passo;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rc-passos li{counter-increment:passo;position:relative;padding:14px 16px 14px 54px;
  border:1px solid var(--linha);border-radius:10px;font-size:14.5px;line-height:1.6}
.rc-passos li::before{content:counter(passo);position:absolute;left:16px;top:14px;
  width:24px;height:24px;border-radius:50%;background:var(--primaria);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700}

.rc-faq{margin:0}
.rc-faq dt{font-weight:600;color:var(--primaria);font-size:15px;margin-top:16px}
.rc-faq dd{margin:5px 0 0;font-size:14.5px;line-height:1.65;color:var(--tinta);
  border-left:2px solid var(--clara);padding-left:13px}

.rc-fonte{font-size:12.5px;color:var(--cinza);border-top:1px solid var(--linha);
  padding-top:14px;margin-top:30px;line-height:1.6}
.rc-fonte a{color:var(--sucesso);text-decoration:underline;text-underline-offset:2px}
.rc-voltar{text-align:center;margin-top:22px}
.rc-voltar a{font-size:13px;color:var(--cinza);text-decoration:underline}

@media(max-width:700px){
  .rc-cartoes{grid-template-columns:1fr}
  .rc-topo h1{font-size:21px}
}

/* ---------- carrinho: CEP, frete e impostos ---------- */
.carr-cep{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  padding:14px 0;margin:12px 0}
/* filho direto: sem isso a regra também pega os <label> das opções de entrega
   e vence o .carr-op por especificidade, matando o flex deles */
.carr-cep > label{display:block;font-size:13px;font-weight:600;color:var(--primaria);margin-bottom:8px}
.carr-cep form{display:flex;gap:8px}
.carr-cep input{flex:1;min-width:0;border:1px solid var(--linha);border-radius:8px;
  padding:10px 12px;font-size:14px;background:#fff}
.carr-cep input:focus{outline:2px solid var(--clara);outline-offset:1px;border-color:var(--secundaria)}
.carr-cep button{border:0;background:var(--primaria);color:#fff;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:8px;white-space:nowrap;transition:filter .25s,transform .2s}
.carr-cep button:hover{filter:brightness(1.12);transform:translateY(-1px)}

.carr-cep-aviso{font-size:12.5px;margin:9px 0 0;color:var(--cinza);line-height:1.5}
.carr-cep-aviso.ok{color:var(--sucesso)}
.carr-cep-aviso.erro{color:var(--perigo)}
.carr-cep-aviso.carregando::after{content:'';display:inline-block;width:11px;height:11px;margin-left:7px;
  vertical-align:-1px;border:2px solid var(--linha);border-top-color:var(--secundaria);
  border-radius:50%;animation:girando .7s linear infinite}

.carr-cep-opcoes{display:grid;gap:7px;margin-top:11px}
.carr-op{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--linha);
  border-radius:9px;padding:13px 15px;cursor:pointer;
  transition:border-color .22s ease,background .22s ease}
.carr-op:hover{border-color:var(--clara)}
.carr-op.marcada{border-color:var(--secundaria);background:#f4fafb}
/* a bolinha alinha com a PRIMEIRA linha do texto, não com o meio do bloco:
   com duas linhas, centralizar deixa a marca solta entre elas */
.carr-op input{width:17px;height:17px;flex:none;margin:2px 0 0;accent-color:var(--sucesso)}
.carr-op-nome{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--primaria);line-height:1.35}
.carr-op-nome em{display:block;font-style:normal;font-weight:400;font-size:12.5px;
  color:var(--cinza);margin-top:3px;line-height:1.45}
.carr-op-preco{font-size:14px;font-weight:700;color:var(--primaria);white-space:nowrap;padding-top:1px}

/* ---------- carrinho: tipografia e linha do produto ---------- */
.carr-titulo{font-size:22px;color:var(--primaria);margin:0 0 6px}
.carr-conta{color:var(--cinza);font-size:13px;margin:0 0 14px}
.carr-ver{color:var(--secundaria);font-weight:600}
.carr-lado{text-align:right}
.carr-lado .qtd-campo{width:62px;padding:8px;border:1px solid var(--linha);border-radius:7px;text-align:center;font-size:14px}
.carr-total{margin-top:8px;font-weight:700;color:var(--primaria);font-size:15px}
.carr-remover{min-height:32px;display:inline-block}
.resumo-pix{font-size:13px;color:var(--sucesso);font-weight:600;margin:10px 0 0}
.resumo-parcela{font-size:12.5px;color:var(--cinza);margin:3px 0 0}
.resumo-voltar{text-align:center;margin:12px 0 0}
.resumo-voltar a{font-size:13px;color:var(--cinza);text-decoration:underline}

/* ======================================================================
   RESPONSIVIDADE
   Os pontos de quebra seguem o conteúdo, não aparelhos: cada um existe
   porque alguma coisa começa a apertar naquela largura.
   ====================================================================== */

/* tablet: 4 colunas de produto viram cartões de ~175px, apertado demais */
@media(max-width:980px){
  .grade{grid-template-columns:repeat(3,1fr)}
  .rc-cartoes{grid-template-columns:repeat(2,1fr)}
}

/* a partir daqui o resumo do carrinho e do checkout ocupam a largura toda */
@media(max-width:700px){
  .resumo,.ck-resumo{padding:16px}
  .carr-titulo{font-size:19px}
  .selo-imposto{padding:13px 14px}
  .selo-imposto li{font-size:13px}
}

/* celular: a linha do produto não cabe em três colunas */
@media(max-width:560px){
  .carr-item{grid-template-columns:76px 1fr;gap:12px;align-items:start;padding:14px 0}
  .carr-lado{grid-column:2;text-align:left;display:flex;align-items:center;
    justify-content:space-between;gap:12px;margin-top:11px}
  .carr-total{margin-top:0;font-size:16px}
  .carr-nome{font-size:13px;margin-bottom:4px}
  .carr-preco{font-size:13px}
}

/* toque: alvo pequeno demais faz errar o clique no celular */
@media(hover:none){
  .btn-checkout,.ck-enviar,.carr-cep button,.rastreio-form button,
  .btn-comprar,.topo-busca button{min-height:46px}
  .qtd-campo{min-height:42px}
  .carr-remover{min-height:38px;padding:6px 0}
  .carr-op,.ck-opcao{padding-top:15px;padding-bottom:15px}
  .sugestoes a{padding-top:12px;padding-bottom:12px}
}

/* telas estreitas de verdade (360 e abaixo) */
@media(max-width:380px){
  .container,.carrinho,.checkout,.rc,.rastreio{padding-left:12px;padding-right:12px}
  .grade{gap:8px}
  .carr-cep form{flex-wrap:wrap}
  .carr-cep button{width:100%}
  .rc-topo h1{font-size:19px}
  .pix-copia{flex-direction:column}
  .pix-copia button{width:100%}
}

/* ---------- etapa de pagamento: Pix com desconto e cartão ---------- */
.ck-selo-off{background:var(--sucesso);color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.02em;align-self:flex-start}
.ck-painel{border:1px solid var(--linha);border-top:0;border-radius:0 0 9px 9px;
  padding:16px;margin:-9px 0 0;background:#fbfcfd;animation:abre .3s cubic-bezier(.16,1,.3,1) both}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}}
.ck-mini{font-size:12.5px;color:var(--cinza);line-height:1.55;margin:12px 0 0}

.pix-desconto{display:flex;flex-wrap:wrap;gap:14px}
.pix-desconto > div{flex:1;min-width:150px;background:#fff;border:1px solid var(--linha);
  border-radius:9px;padding:12px 14px}
.pd-rot{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza)}
.pix-desconto strong{display:block;font-size:20px;color:var(--primaria);margin-top:3px}
.pd-economia{border-color:var(--sucesso) !important;background:#eefaf3 !important}
.pd-economia strong{color:var(--sucesso)}
.resumo-desconto span:last-child{color:var(--sucesso);font-weight:600}

/* cartão: a pré-visualização mostra o que foi digitado, inclusive a bandeira */
.cartao{perspective:1000px;max-width:330px;margin:0 auto 18px}
.cartao-giro{position:relative;width:100%;aspect-ratio:1.586;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.cartao.virado .cartao-giro{transform:rotateY(180deg)}
.cartao-frente,.cartao-verso{position:absolute;inset:0;backface-visibility:hidden;
  border-radius:13px;color:#fff;box-shadow:0 10px 26px rgba(0,32,85,.24);
  background:linear-gradient(135deg,#0b2f6b 0%,#002055 55%,#001233 100%);overflow:hidden}
.cartao-frente{display:flex;flex-direction:column;justify-content:space-between;padding:18px}
.cartao-verso{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:14px}
.cartao-frente::after{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;
  border-radius:50%;background:rgba(255,255,255,.06)}
.cartao-topo{display:flex;align-items:center;justify-content:space-between}
.cartao-chip{width:38px;height:28px;border-radius:5px;
  background:linear-gradient(135deg,#f6d98a,#c9a227 60%,#f6d98a);position:relative}
.cartao-chip::after{content:'';position:absolute;inset:6px 4px;border:1px solid rgba(0,0,0,.22);border-radius:3px}
.cartao-bandeira{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.95}
.cartao-numero{font-size:19px;letter-spacing:.09em;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,Menlo,monospace;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cartao-base{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.cartao-base span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.65}
.cartao-base strong{font-size:12.5px;font-weight:600;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:180px}
.cartao-val strong{max-width:none}
.cartao-tarja{height:40px;background:#0a1a30}
.cartao-cvv{background:#fff;color:var(--tinta);margin:0 18px;border-radius:5px;padding:7px 11px;
  display:flex;align-items:center;justify-content:space-between}
.cartao-cvv span{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--cinza)}
.cartao-cvv strong{font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em}

.cc-grade input,.cc-grade select{font-variant-numeric:tabular-nums}
#ccNome{text-transform:uppercase}
.ck-grade label .erro{display:block;font-size:12px;color:var(--perigo);margin-top:4px}
.ck-grade input.invalido,.ck-grade select.invalido{border-color:var(--perigo);background:#fffafa}
.ck-grade input.valido{border-color:var(--sucesso)}

@media(max-width:560px){
  .cartao{max-width:none}
  .cartao-numero{font-size:17px;letter-spacing:.06em}
  .pix-desconto > div{min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .ck-painel{animation:none}
  .cartao-giro{transition:none}
}
.ck-dica{display:block;font-size:12px;color:var(--cinza);margin-top:4px;line-height:1.45}

/* ---------- resumo no topo do checkout ---------- */
.ck-topo{border:1px solid var(--linha);border-radius:11px;background:#fff;
  margin:0 0 20px;box-shadow:var(--sombra);overflow:hidden}
.ck-topo summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  list-style:none;user-select:none;transition:background .22s ease}
.ck-topo summary::-webkit-details-marker{display:none}
.ck-topo summary:hover{background:#f8fafc}
.ct-rot{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--primaria);line-height:1.3}
.ct-rot em{display:block;font-style:normal;font-weight:400;font-size:12.5px;color:var(--cinza);margin-top:2px}
.ct-total{font-size:19px;font-weight:700;color:var(--primaria);white-space:nowrap}
.ct-seta{color:var(--cinza);flex:none;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.ck-topo[open] .ct-seta{transform:rotate(180deg)}
.ck-topo[open] summary{border-bottom:1px solid var(--linha)}
.ct-corpo{padding:6px 16px 14px;animation:abre .28s cubic-bezier(.16,1,.3,1) both}
.ct-corpo .ck-item{padding:8px 0}
.ct-corpo .ck-item img{width:40px;height:40px}

@media(prefers-reduced-motion:reduce){
  .ct-seta,.ct-corpo{transition:none;animation:none}
}
.carr-minimo{background:#fff8e6;border-left:3px solid var(--aviso);border-radius:0 7px 7px 0;
  padding:11px 13px;margin:13px 0 0;font-size:13px;line-height:1.5;color:var(--tinta)}
.carr-minimo strong{color:var(--primaria)}

/* "Continuar comprando": mesmo tamanho do botão de finalizar, cor secundária.
   Contornado em vez de preenchido — as duas ações têm pesos diferentes, e
   dois botões cheios lado a lado fazem a pessoa parar para escolher. */
.btn-continuar{background:#fff;color:var(--primaria);border:1.5px solid var(--linha);
  padding:12.5px;   /* 14 menos a borda, para ficar da mesma altura do de cima */
  margin-top:9px;transition:border-color .22s ease,background .22s ease,transform .2s ease}
.btn-continuar:hover{border-color:var(--primaria);background:#f7f9fc;transform:translateY(-1px)}