/* Crocland — camada própria sobre o CSS do TikTok Shop (TUX).
   O CSS deles traz os tokens de cor/tipografia em [data-tux-color-scheme=light];
   aqui ficam só o layout da página de produto e os componentes que o JS do
   TikTok montava (galeria, grade de tamanhos, carrinho), que não copiamos. */

:root {
  /* ===== TEMA ESCURO "DINOCO A NOITE" (31/10/2026) =====
     A loja era clara (fundo #f4fafd, cartoes brancos). Virou noturna.
     Os NOMES dos tokens continuam os mesmos de proposito: cerca de 70% das
     regras deste arquivo ja pintavam por token, e trocando so os VALORES
     elas viram tema escuro sozinhas. Trocar os nomes obrigaria a reescrever
     o arquivo inteiro e cada regra esquecida viraria texto escuro no
     escuro.
     Os valores vieram da paleta aprovada no briefing. Onde o briefing dava
     um tom que reprovava no contraste eu ajustei e anotei a medida. */
  --cl-azul: #20BDF2;           /* azul Dinoco (briefing) */
  /* No tema claro este era o azul ESCURO, para texto sobre fundo claro.
     No escuro o papel se inverte: o que precisa de contraste e o tom CLARO.
     Por isso --cl-azul-d agora e mais claro que --cl-azul, e nao mais
     escuro. Quem ler o nome esperando "dark" se engana; o nome ficou por
     causa das ~40 regras que ja o usam. */
  --cl-azul-d: #7FD9F7;         /* 11,48:1 no fundo #10151D */
  --cl-azul-l: #20BDF2;         /* brilho: o proprio azul Dinoco */
  --cl-azul-soft: #16293A;      /* faixa/cartao azulado, era #e9f4fa */
  --cl-laranja: #FF9E5E;        /* laranja Dinoco clareado p/ fundo escuro */
  --cl-gas: #FFD447;            /* amarelo dos detalhes (briefing) */
  /* O verde #15803d do tema claro da 2,41:1 no fundo escuro: some.
     O verde do briefing (#08BC59) e de FUNDO de botao, com texto escuro
     por cima — nao de texto. */
  --cl-verde: #08BC59;
  --cl-verde-d: #06A84E;

  /* Texto. --cl-ink era o mais escuro; agora e o mais CLARO, pelo mesmo
     motivo da inversao acima. */
  --cl-ink: #F5F8FC;            /* texto principal: 17,19:1 no #10151D */
  --cl-ink2: #B9C7D8;           /* secundario: 10,66:1 */
  --cl-ink3: #8A9AAD;           /* terciario: 6,37:1 no fundo, 4,52:1 no
                                   campo #243244 — o pior caso ainda passa.
                                   (o briefing nao deu
                                   este tom; escolhi o mais escuro que
                                   ainda passa nos 4,5:1) */
  --cl-cream: #0B1118;          /* fundo alternativo (briefing) */
  --cl-lav: #16293A;            /* faixa de secao */
  --cl-card: #1B2635;           /* cartoes e paineis (briefing) */
  --cl-line: #34465A;           /* bordas discretas (briefing) */
  --cl-campo: #243244;          /* campos e controles (briefing) */
  --cl-fundo: #10151D;          /* fundo principal (briefing) */

  /* a cor de marca é o azul do produto */
  --cl-brand: var(--cl-azul);
  --cl-brand-d: var(--cl-azul-d);
  --cl-brand-soft: var(--cl-azul-soft);
  --cl-rosa: var(--cl-laranja);  /* nome herdado: agora aponta para o laranja */

  /* Verde de ação: o mesmo do botão de pagar no checkout. */
  --cl-ok: #08BC59;
  --cl-ok-d: #06A84E;
  /* Texto que vai SOBRE o verde. Preto-azulado: 6,71:1 no #08BC59,
     contra 2,52:1 do BRANCO, que REPROVA. Medido, nao estimado. */
  --cl-sobre-verde: #06220F;
  /* Texto que vai SOBRE o azul (selos, badges, pilulas). O branco so
     servia quando o azul era ESCURO; agora que ele clareou, branco sobre
     --cl-azul-d da 1,59:1 e some. Este escuro da 10,32:1. */
  --cl-sobre-azul: #06222E;

  /* ESTADOS. No tema claro o erro era texto #c0261f sobre #fdeaea (rosa
     claro). No escuro inverte: o vermelho CLAREIA e o fundo escurece. */
  --cl-erro: #FF8A80;           /* 7,60:1 no --cl-erro-bg */
  --cl-erro-bg: #2A1416;
  --cl-erro-bd: #5C2A26;
  /* Aviso (a caixa amarela do "leve mais"): 10,96:1 no proprio fundo. */
  --cl-aviso: #FFD447;
  --cl-aviso-bg: #2A2310;
  --cl-aviso-bd: #574819;

  /* nomes antigos, ainda usados por regras do arquivo */
  --cl-dinoco: var(--cl-azul);
  --cl-dinoco-d: var(--cl-azul-d);
  --cl-dinoco-l: var(--cl-azul-l);
  --cl-dinoco-soft: var(--cl-azul-soft);
  --cl-text: var(--cl-ink);
  --cl-text2: var(--cl-ink2);
  --cl-text3: var(--cl-ink3);
  --cl-bg: var(--cl-fundo);     /* era var(--cl-card) = branco */
  --cl-bg-soft: var(--cl-lav);

  --cl-radius: 16px;
  --cl-max: 1080px;
}

/* O CSS do TikTok traz `*{margin:0;padding:0;border:0;font-family:TikTokFont}`
e `body, html {position:relative}`. TikTokFont não existe aqui (o pacote de
   fontes deles não veio), e o reset zera todo o espaçamento desta página.
   Por isso cada bloco abaixo repõe o que precisa com especificidade própria,
   em vez de depender da ordem dos arquivos. */
/* O CSS do TikTok tem `body,html{height:100vh;overflow-x:hidden;width:100vw}`:
   no app deles a rolagem acontece dentro de um #root, mas aqui isso TRAVA a
   página inteira — o conteúdo passa de 3000 px e a janela não rola.
   Estas duas regras destravam; não as remova. */
html, body {
  height: auto !important;
  min-height: 100%;
  width: auto !important;
  overflow-x: hidden;
  overflow-y: visible !important;
}

html body {
  margin: 0;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* devolve a fonte a tudo que o reset do TikTok marcou como TikTokFont */
html body, html body * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: initial;
  -webkit-touch-callout: default;
}

html body img { max-width: 100%; display: block; }

/* o reset zera margens de título/parágrafo/lista: repõe o ritmo do texto */
html body h1, html body h2, html body h3 { margin: 0 0 12px; }
html body p { margin: 0 0 12px; }
html body ul { margin: 0; padding: 0; }

/* ------------------------------------------------------------------ topo */
/* CABECALHO (28/10/2026). Tinha `justify-content: space-between`, que foi
   escrito para DOIS elementos — a marca numa ponta e um link "Pedidos" na
   outra. O link nao existe nesta loja, entao a logo ficava sozinha a
   esquerda e sobravam 87% da faixa em branco (172px de marca numa barra de
   1280). Com a marca centrada o vazio vira respiro, e nao buraco.
   A borda de baixo some para o topo escorrer na abertura sem a linha dura
   que cortava a pagina em duas.
   Altura menor (10px de padding) porque, sem segundo elemento, nada aqui
   precisa dos 69px de antes — e e a primeira tela que ganha o espaco.

   31/10/2026, TEMA ESCURO: o fundo era BRANCO e virou --cl-bg (#10151D).
   Isso obrigou a trocar o ARQUIVO da logo, nao so a cor de fundo: o
   "Crocs" dela e azul-marinho #001830, que no branco lia bem e no escuro
   praticamente sumia (1,2:1). O logo-crocsmania-escuro.png tem o MESMO
   desenho, o mesmo azul Dinoco e o mesmo solado — so o marinho virou
   branco-gelo. O "Mania" azul #20BDF2 rende 8,39:1 no fundo escuro,
   contra os 3,63:1 que tinha no branco: melhorou. */
html body .cl-top {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 8px 16px; border-bottom: 0;
  position: sticky; top: 0; background: var(--cl-bg); z-index: 20;
}

html body .cl-brand {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  color: var(--cl-text); text-decoration: none;
}
html body .cl-pedidos { color: var(--cl-text2); text-decoration: none; font-size: 14px; }
html body .cl-pedidos:hover { color: var(--cl-brand); }

html body .cl-crumb {
  max-width: var(--cl-max); margin: 0 auto; padding: 12px 16px 0;
  color: var(--cl-text3); font-size: 13px; display: flex; gap: 6px;
}

/* --------------------------------------------------------------- layout */
html body .cl-wrap {
  max-width: var(--cl-max); margin: 0 auto; padding: 16px;
  display: grid; gap: 28px 36px;
  /* minmax(0,...) e não 1fr: um item de grid tem min-width:auto, e no celular
     a coluna de compra estourava para 520 px numa tela de 390 px. */
  grid-template-columns: minmax(0, 1fr);
}
/* nenhum filho do grid pode ser mais largo que a coluna */
html body .cl-wrap > * { min-width: 0; max-width: 100%; }
@media (min-width: 900px) {
html body .cl-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* A galeria NAO e sticky — e nao adianta tentar nesta pagina. O <body> tem
   `overflow-x: hidden` (a regra que segura a rolagem lateral no celular), e
   isso faz dele um container de rolagem, o que DESLIGA `position: sticky`
   em todos os descendentes. Medi em 31/10/2026: com sticky declarado e
   aplicado, a foto continuava subindo junto com a pagina.
   Tirar o overflow do body traz de volta a rolagem horizontal, que e pior.
   O vazio de ~2000px na coluna esquerda continua: resolve-lo exigiria tirar
   #cl-kit de dentro de .cl-buy no HTML (grid-column so vale para filho
   DIRETO do grid), e isso mexe na estrutura que segura o fluxo de compra.
   Fica anotado como proximo passo, nao como bug novo. */
html body .cl-gallery { position: static; }
html body .cl-about, html body .cl-reviews { grid-column: 1 / -1; }
/* "Sobre" e "Avaliações" ocupam a largura toda; sem isto o texto fica numa
   coluna estreita à esquerda e a metade direita da tela fica vazia. */
html body .cl-about > *, html body .cl-reviews > * { max-width: none; }
html body .cl-about p, html body .cl-bullets { max-width: 68ch; }
/* bullets em duas colunas nas telas largas, para não virar lista comprida */
@media (min-width: 1000px) {
  html body .cl-bullets { columns: 2; column-gap: 40px; max-width: none; }
  html body .cl-bullets li { break-inside: avoid; }
  html body .cl-reviews { column-gap: 32px; }
}
}

/* -------------------------------------------------------------- galeria */
html body .cl-main-photo {
  /* fundo BRANCO porque as fotos do catálogo têm fundo branco: com o azul
     claro apareciam tarjas nas laterais da sandália. */
  background: var(--cl-card); border-radius: var(--cl-radius);
  overflow: hidden; aspect-ratio: 1 / 1;
  /* no computador a foto parava em meia tela e empurrava tudo para baixo */
  max-width: 460px; margin-inline: auto;
}
/* A foto quadrada ocupava a dobra inteira e jogava preço e botão para fora
   da tela. Com a largura limitada, a altura cai junto (o quadro é 1:1) e a
   ação volta a aparecer sem rolar. */


@media (max-width: 759px) {
  html body .cl-main-photo { max-width: 290px; }
  
  /* As miniaturas vinham ANTES do botão e empurravam a ação para fora da
     primeira tela. Elas voltam logo abaixo do CTA (ordem do flex), onde quem
     quer ver mais fotos encontra, sem custar a dobra. */
  html body .cl-gallery { display: flex; flex-direction: column; }

  html body .cl-gallery .cl-thumbs { order: 3; margin-top: 14px; }
  html body .cl-hero p:not(.cl-hero-sub) { font-size: 14.5px; }
  html body .cl-hero { padding-bottom: 14px; }
  html body .cl-hero-frete { margin-top: 2px; }
}

/* `contain` com padding deixa a sandália respirar sem as tarjas brancas
   que apareciam quando a foto quadrada entrava num quadro mais largo. */
html body .cl-main-photo img {
  width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box;
}
html body .cl-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
html body .cl-thumbs[hidden] { display: none; }

/* Subtítulo do topo: uma linha de respiro entre a chamada e o card. */
html body .cl-hero-sub {
  font-size: 15.5px; line-height: 1.55; color: var(--cl-ink2);
  margin: 0 auto; max-width: 46ch;
}

/* CARD DE PREÇOS — o bloco branco com as opções lado a lado e o botão
   grande embaixo, como na landing de referência. Os preços ficam DENTRO de
   cartões, não soltos numa frase: é o que o cliente compara antes de agir. */
html body .cl-hero-card {
  margin: 20px auto 0; max-width: 480px;
  background: var(--cl-card); border-radius: 18px;
  padding: 16px; box-shadow: 0 6px 24px #00000059;
}
/* 2x2 no celular: quatro cartões numa linha só em 390px espremeriam o
   preço até virar ilegivel. */
/* minmax(0,1fr) e não 1fr: um item de grid tem min-width:auto, então o
   texto "R$ 39,75 por par" empurrava a coluna para 124px onde cabiam 106 —
   e o quarto cartão vazava para fora do quadro branco. */
html body .cl-hero-ops {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px; margin-bottom: 14px;
}
@media (min-width: 560px) {
  html body .cl-hero-ops { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}
html body .cl-hero-op {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 15px 5px 12px; border-radius: 13px; text-align: center;
  background: var(--cl-azul-soft); border: 2px solid transparent;
}
html body .cl-hero-op.is-melhor {
  background: var(--cl-azul-soft); border-color: var(--cl-azul);
}
html body .cl-hero-op-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--cl-laranja, #d87848); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
html body .cl-hero-op-tit {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--cl-ink2);
}
html body .cl-hero-op-val {
  font-size: 21px; font-weight: 800; color: var(--cl-ink); letter-spacing: -.03em;
  line-height: 1.1;
  /* "R$ 129,00" tem um dígito a mais e quebrava em duas linhas, deixando o
     terceiro cartão mais alto que os outros dois. */
  white-space: nowrap;
}
@media (max-width: 400px) {
  /* telas estreitas: encolhe em vez de quebrar */
  html body .cl-hero-op-val { font-size: 19px; }
}
@media (min-width: 420px) and (max-width: 559px) {
  /* ainda em 2 colunas: a coluna é larga, o preço pode crescer */
  html body .cl-hero-op-val { font-size: 24px; }
}
@media (min-width: 560px) {
  /* 4 colunas de ~106px: em 21px o "R$ 129,00" encostava na borda */
  html body .cl-hero-op-val { font-size: 18.5px; }
  html body .cl-hero-op { padding: 15px 4px 12px; }
  html body .cl-hero-op-un { font-size: 10px; }
}
html body .cl-hero-op.is-melhor .cl-hero-op-val { color: var(--cl-azul); }
html body .cl-hero-op-un {
  font-size: 10.5px; color: var(--cl-ink2); line-height: 1.3;
  /* em 4 colunas a coluna fica estreita: quebra em vez de esticar o grid */
  overflow-wrap: anywhere;
}
html body .cl-hero-btn {
  display: block; width: 100%; padding: 17px 16px; font-size: 16px;
  font-weight: 800; letter-spacing: .02em;
  text-decoration: none; text-align: center;
}
/* Aviso da faixa de 5 pares, entre a tabela e o botao. Fundo amarelo
   Lightyear (o mesmo detalhe da peca) para separar da tabela sem competir
   com o botao verde. Texto #4a3b00 sobre #fff8e1 da 10,31:1 (medido). */
/* ===== FAIXA ATUAL DO KIT (30/10/2026) =====
   `is-melhor` diz qual faixa compensa mais (fixa). `is-atual` diz em qual
   o kit esta AGORA — sao coisas diferentes e podem cair na mesma caixa.
   Por isso o destaque atual e um FUNDO, nao outra borda: duas bordas na
   mesma caixa nao se distinguem.
   O rotulo "seu kit" nao depende so de cor, e `aria-current` (posto pelo
   JS) conta a mesma coisa a quem usa leitor de tela. */
html body .cl-hero-op.is-atual {
  background: var(--cl-azul-soft);
  border-color: var(--cl-azul);
}
html body .cl-hero-op.is-atual::after {
  content: "seu kit"; position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--cl-azul-d); color: var(--cl-sobre-azul);
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px;
}

/* ===== FOCO VISIVEL (30/10/2026) =====
   Conferido no navegador: 11 de 25 elementos focaveis nao mostravam NADA
   ao receber foco — entre eles o botao de comprar, os filtros de
   personagem e o "Escolher" de cada modelo. Quem navega por teclado ficava
   sem saber onde esta.
   `:focus-visible` (e nao `:focus`) so marca quando o foco veio do teclado:
   o clique do mouse continua sem contorno. */
html body :focus-visible {
  outline: 3px solid var(--cl-azul-d);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Dentro do resumo escuro o azul some; ali o contorno e claro. */
html body .cl-resumo :focus-visible { outline-color: #fff; }

/* ===== BARRA DE RESUMO DO CELULAR (30/10/2026) =====
   So no celular: no desktop o resumo fica ao lado da selecao e ja esta
   sempre visivel. z-index 30 fica ABAIXO do toast (40) e do modal (90),
   para nunca cobrir um aviso. O padding do body abre espaco no fim da
   pagina, senao a barra taparia o rodape. */
@media (max-width: 899px) {
  html body .cl-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--cl-card); border-top: 1px solid var(--cl-line);
    box-shadow: 0 -6px 18px -12px rgba(12,34,48,.5);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  html body .cl-barra[hidden] { display: none; }
  html body .cl-barra-in {
    display: flex; align-items: center; gap: 12px;
    max-width: 560px; margin: 0 auto;
  }
  html body .cl-barra-txt { display: grid; line-height: 1.2; }
  html body .cl-barra-txt strong { font-size: 13px; color: var(--cl-ink2); font-weight: 700; }
  html body .cl-barra-txt span { font-size: 19px; font-weight: 800; color: var(--cl-ink); }
  html body .cl-barra-btn {
    flex: 1; padding: 13px 16px; font-size: 15px; text-align: center;
    text-decoration: none; white-space: nowrap;
  }
  /* espaco no fim da pagina, para a barra nao tapar o rodape */
  html body { padding-bottom: 86px; }
}
/* No desktop a barra nao existe. */
@media (min-width: 900px) { html body .cl-barra { display: none; } }

/* ===== MONTADOR: erro no campo certo e valor por par (30/10/2026) =====
   O aviso "falta o tamanho" vivia so no rodape do montador; com quatro
   pares na tela a pessoa tinha de cacar qual faltava. */
html body .cl-mod-card.tem-erro {
  border-color: var(--cl-erro); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(192,38,31,.12);
}
/* O select ganha a mesma marca. `aria-invalid` (posto pelo JS) e o que
   conta ao leitor de tela — a cor sozinha nao serve. */
html body .cl-mod-tam[aria-invalid="true"] {
  border-color: var(--cl-erro-bd); background: var(--cl-erro-bg);
}
html body .cl-res-cada {
  margin: 2px 0 0; text-align: right; font-size: 12.5px;
  color: var(--cl-ink2); font-weight: 700;
}

/* ===== ESCOLHA POR PERSONAGEM (30/10/2026) =====
   Filtra os cartoes do montador. A decoracao de cada colecao e uma BARRA
   fina no topo do cartao, nao um fundo estampado: estampa atras de texto
   e o que mais atrapalha a leitura, e o briefing pede o contrario. */
html body .cl-pers-sec { margin: 0 0 14px; }
html body .cl-pers-tit {
  margin: 0 0 2px; font-size: 18px; font-weight: 800;
  color: var(--cl-azul-d); letter-spacing: -.01em;
}
/* O subtitulo explica o que o filtro FAZ. Sem ele, "Escolha sua equipe"
   sobre uma fila de personagens parece o passo da compra, e quem toca
   espera ter escolhido o par. */
html body .cl-pers-sub {
  margin: 0 0 10px; font-size: 13px; color: var(--cl-ink2);
}
html body .cl-pers-lista {
  display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 560px) { html body .cl-pers-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
html body .cl-pers {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px 9px; background: var(--cl-card); font-family: inherit;
  border: 1.5px solid var(--cl-line); border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html body .cl-pers img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
}
html body .cl-pers-todos {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
  font-size: 22px; color: var(--cl-gas);
}
html body .cl-pers-nome {
  font-size: 11px; font-weight: 700; color: var(--cl-ink2);
  line-height: 1.25; text-align: center; overflow-wrap: anywhere;
}
html body .cl-pers:hover { border-color: var(--cl-azul); transform: translateY(-2px); }
/* Selecionado: borda grossa + nome escuro + a barra do tema. Tres sinais,
   nenhum deles so a cor — daltonico tambem distingue. */
html body .cl-pers.is-on {
  border-color: var(--cl-azul-d); border-width: 2px;
  box-shadow: 0 6px 14px -10px rgba(12,34,48,.6);
}
html body .cl-pers.is-on .cl-pers-nome { color: var(--cl-ink); font-weight: 800; }
html body .cl-pers::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--cl-line);
}
/* Cada colecao marca o seu: pista (xadrez), teia (vermelho/azul),
   espaco (verde/roxo) e Disney (vermelho/preto). */
html body .cl-pers[data-tema="carros"]::before {
  background: repeating-linear-gradient(90deg,#05090E 0 6px,#EEF4FA 6px 12px);
}
html body .cl-pers[data-tema="aranha"]::before {
  background: linear-gradient(90deg,#c4221c 0 50%,#1b4b9e 50% 100%);
}
html body .cl-pers[data-tema="espaco"]::before {
  background: linear-gradient(90deg,#5bb81e 0 50%,#7b3fbf 50% 100%);
}
html body .cl-pers[data-tema="disney"]::before {
  background: linear-gradient(90deg,#c4221c 0 50%,#1a1a1a 50% 100%);
}
html body .cl-pers[data-tema="todos"]::before { background: var(--cl-gas); }

/* ===== BRILHO AO SELECIONAR CARROS (31/10/2026) =====================
   O briefing pedia "reflexo no raio ao selecionar Carros". O raio existe
   so DENTRO da foto do produto, e foto nao se anima por partes; o
   equivalente honesto e um brilho que atravessa o proprio botao, como a
   luz passando por um carro em movimento.
   .cl-pers ja tem overflow:hidden e position:relative, entao a faixa
   corre por dentro da borda arredondada.
   So no tema carros: brilho em todos os botoes viraria ruido.           */
@keyframes cl-brilho {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%)  skewX(-18deg); }
}
html body .cl-pers[data-tema="carros"].is-on::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 100%);
  /* so decora: nao pode roubar o clique do botao */
  pointer-events: none;
  animation: cl-brilho .85s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  html body .cl-pers[data-tema="carros"].is-on::after { animation: none; display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .cl-pers { transition: none; }
  html body .cl-pers:hover { transform: none; }
}

/* ===== CABECALHO COM NAVEGACAO (30/10/2026) =====
   Logo a esquerda, secoes no meio, contador do kit a direita. Tudo leva a
   um destino real na propria pagina. */
html body .cl-top {
  justify-content: space-between; gap: 10px; padding: 6px 14px;
}
html body .cl-top .cl-brand img { height: 56px; }
@media (min-width: 900px) { html body .cl-top .cl-brand img { height: 64px; } }

html body .cl-nav { display: none; }
@media (min-width: 760px) {
  html body .cl-nav { display: flex; gap: 22px; }
  html body .cl-nav a {
    color: var(--cl-ink2); text-decoration: none; font-size: 14.5px;
    font-weight: 700; padding: 10px 2px; position: relative;
  }
  /* sublinhado que cresce no hover — o unico movimento aqui */
  html body .cl-nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 4px;
    height: 2px; background: var(--cl-azul); transition: right .18s ease;
  }
  html body .cl-nav a:hover { color: var(--cl-ink); }
  html body .cl-nav a:hover::after { right: 0; }
}

/* Contador do kit. `hidden` tem de vencer o display:flex, senao o elemento
   escondido continuaria ocupando espaco. */
html body .cl-top-kit[hidden] { display: none; }
html body .cl-top-kit {
  display: flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 7px 12px; border-radius: 999px;
  background: var(--cl-azul-soft); border: 1.5px solid var(--cl-azul);
}
html body .cl-top-kit-n {
  display: grid; place-items: center; min-width: 22px; height: 22px;
  border-radius: 999px; background: var(--cl-azul-d); color: var(--cl-sobre-azul);
  font-size: 12.5px; font-weight: 800;
}
html body .cl-top-kit-txt { font-size: 12.5px; font-weight: 700; color: var(--cl-azul-d); }
@media (prefers-reduced-motion: reduce) {
  html body .cl-nav a::after { transition: none; }
}

/* ===== CENARIO DE PISTA — FOTO DO CIRCUITO NOTURNO (31/10/2026) =====
   Era tudo desenhado em CSS (ceu, asfalto, refletores, faixa). Agora e uma
   FOTO de autodromo a noite, que o dono enviou: traz os refletores reais, a
   arquibancada, a curva com zebra e o asfalto molhado — coisas que o CSS so
   sugeria. Os <span> de refletor/asfalto/faixa sairam do HTML junto.
   O texto por cima continua HTML selecionavel; a foto e so o fundo. */
html body .cl-hero { position: relative; overflow: hidden; }
html body .cl-pista {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* a cor fica por baixo da foto: e o que se ve enquanto ela carrega, e
     tambem nas bordas se a proporcao da tela nao casar com a da imagem */
  background: #0B1118;
}
html body .cl-pista picture { display: block; width: 100%; height: 100%; }
html body .cl-pista-foto {
  width: 100%; height: 100%;
  /* `cover` recorta sem distorcer. A ancora e o RODAPE da imagem: a parte
     util (o asfalto onde a peca pousa) esta embaixo; ancorar no centro
     cortaria justamente o chao. */
  object-fit: cover; object-position: 50% 100%;
  display: block;
}
/* Faixa quadriculada no rodape da CENA, nao do hero. O ::after do hero
   nascia com a largura do bloco centrado (1120px numa janela de 1440) e as
   pontas ficavam de fora; a cena ja vaza de borda a borda, entao a faixa
   desenhada nela herda esse alcance de graca. */
html body .cl-pista::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background:
    repeating-linear-gradient(90deg,#05090E 0 12px,#EEF4FA 12px 24px) 0 0/24px 6px,
    repeating-linear-gradient(90deg,#EEF4FA 0 12px,#05090E 12px 24px) 0 6px/24px 6px;
  background-repeat: repeat-x; z-index: 3;
}

/* Veu escuro por cima da foto. Sem ele o texto branco cai em cima dos
   refletores acesos (os pontos mais claros da imagem) e perde contraste.
   E um degrade: mais fechado a esquerda, que e onde mora o texto no
   desktop, e mais aberto a direita, para a pista continuar aparecendo. */
html body .cl-pista::after {
  /* z-index 1: o veu cobre a FOTO, mas fica ABAIXO do xadrez (z-index 3).
     Sem isto o veu escurecia a faixa justamente nas pontas, onde ele e mais
     fechado, e o xadrez parecia nao alcancar as bordas. */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, #0B1118E6 0%, #0B1118B3 38%, #0B111859 62%, #0B111840 100%),
    linear-gradient(180deg, #0B1118A6 0%, transparent 34%);
}
@media (max-width: 859px) {
  /* No celular o texto ocupa a largura toda, entao o veu precisa ser parelho
     — um degrade lateral deixaria metade da frase sobre a parte clara. */
  html body .cl-pista::after {
    background: linear-gradient(180deg, #0B1118D9 0%, #0B1118A6 46%, #0B111880 100%);
  }
}

/* O conteudo fica ACIMA do cenario. */
html body .cl-hero-txt, html body .cl-hero-foto-box { position: relative; z-index: 1; }

html body .cl-hero-apartir {
  margin: 14px 0 12px; font-size: 14px; color: var(--cl-ink2); line-height: 1.2;
}
html body .cl-hero-preco {
  display: block; font-size: 38px; font-weight: 800; color: var(--cl-ink);
  letter-spacing: -.02em;
}
html body .cl-ab-seta { margin-left: 8px; }

/* A foto do produto, sobre a pista. */
html body .cl-hero-produto {
  /* 540px no desktop: na referencia a peca domina a metade direita, e com
     os 420px de antes ela ficava pequena no meio da pista. */
  display: block; width: 100%; max-width: 540px; height: auto;
  /* margem de baixo zero: o calcado encosta no asfalto em vez de flutuar */
  margin: 6px auto 0;
  /* O rgba(12,34,48,.28) era azul-petroleo CLARO: no ceu noturno ele
     aparecia como um contorno luminoso em volta da peca recortada, e nao
     como sombra. Preto puro, e a sombra do tema escuro (lista mais
     abaixo) nao se soma mais a esta. */
  filter: drop-shadow(0 16px 18px #00000073);
}
/* Linhas de velocidade: entram UMA vez, na chegada. Nao e laco infinito —
   movimento continuo atras do produto atrapalha quem esta escolhendo. */
@keyframes cl-entra-produto {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
html body .cl-hero-produto { animation: cl-entra-produto .5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  html body .cl-hero-produto { animation: none; }
}

/* Faixa quadriculada: transicao para a secao seguinte. */
html body .cl-hero::after {
  /* O hero nao tem mais padding (o respiro foi para os filhos), entao
     left/right 0 ja encostam nas bordas: a caixa de conteudo virou o bloco
     inteiro. O -100% de antes era remendo para o padding e hoje so faria o
     padrao comecar fora da tela. */
  /* O xadrez saiu daqui para o .cl-pista::before (que vaza de borda a
     borda). Este pseudo nao desenha mais nada. */
  content: none;
}

/* ===== ABERTURA: os modelos antes da tabela de precos (30/10/2026) =====
   O topo abria com texto e numeros e a peca so aparecia depois de rolar.
   Os cartoes usam object-fit: contain para NAO cortar nem distorcer o
   calcado, e aspect-ratio reserva o espaco (sem pulo de layout). */
/* Sao CINCO modelos. Em duas colunas o quinto fica sozinho na ultima linha e
   as fotos nadam num cartao largo demais; em tres as fotos ocupam melhor o
   espaco e sobra so um buraco (3+2), que o grid centraliza. */
html body .cl-ab {
  display: grid; gap: 8px; margin: 18px 0 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 860px) { html body .cl-ab { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
html body .cl-ab-card {
  display: block; text-decoration: none; background: var(--cl-card);
  border: 1px solid #dceaf3; border-radius: 14px; padding: 8px 8px 10px;
  box-shadow: 0 2px 6px -4px rgba(12,34,48,.3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html body .cl-ab-card:hover, html body .cl-ab-card:focus-visible {
  transform: translateY(-3px); border-color: var(--cl-azul);
  box-shadow: 0 10px 20px -12px rgba(12,34,48,.5);
}
/* 4/3, nao 1/1: as fotos sao do Crocs DE PERFIL, bem mais largo que alto.
   No quadrado sobrava uma faixa vazia em cima e embaixo de cada cartao e a
   abertura ficava com 700px de altura no celular. `contain` continua
   garantindo que o calcado nao e cortado nem esticado. */
html body .cl-ab-card img {
  /* `height: auto` e obrigatorio: sem ele o atributo height="300" do HTML
     vence o aspect-ratio e a imagem fica 176x300 (mais alta que larga),
     deixando faixas vazias em cima e embaixo do calcado. */
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; background: var(--cl-card); border-radius: 10px;
}
html body .cl-ab-nome {
  display: block; margin-top: 7px; text-align: center;
  font-size: 11.5px; font-weight: 800; color: var(--cl-ink);
  line-height: 1.25; overflow-wrap: anywhere;
}
html body .cl-ab-btn { display: block; width: 100%; margin: 4px 0 0; text-align: center; }
html body .cl-ab-info {
  /* a margem de baixo mantem a linha ACIMA do asfalto: sem ela o texto
     caia dentro da faixa cinza e sumia */
  /* #51707f era cinza-azulado para fundo claro: no escuro da 3,46:1 e
     REPROVA. --cl-ink2 da 10,66:1 no fundo principal. */
  margin: 9px 0 46px; text-align: center; font-size: 13px; color: var(--cl-ink2);
}
@media (min-width: 860px) {
  /* O max-width (31/10/2026) prende a quebra: sem ele a linha ia ate a
     largura da coluna e "tamanhos" sobrava sozinho numa segunda linha bem
     depois do botao, como se fosse outro bloco. Com 44ch ela quebra junto
     do botao e os dois leem como um grupo so. */
  html body .cl-ab-info { text-align: left; margin-bottom: 8px; max-width: 44ch; }
  html body .cl-ab-btn { max-width: 340px; }
}
html body .cl-ab-info strong { color: var(--cl-ink); }
/* Quem pediu menos movimento nao recebe a elevacao dos cartoes. */
@media (prefers-reduced-motion: reduce) {
  html body .cl-ab-card { transition: none; }
  html body .cl-ab-card:hover { transform: none; }
}

html body .cl-hero-mais {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--cl-aviso-bg); border: 1px solid var(--cl-aviso-bd);
  font-size: 13.5px; line-height: 1.45; color: var(--cl-aviso); text-align: center;
}
/* O #2e2500 (marrom quase preto) era para o fundo AMARELO CLARO do tema
   antigo. No fundo ambar escuro ele SOME — o "5 pares" e o "R$ x por par"
   viravam buracos no meio da frase. Branco-gelo da 14,04:1 ali. */
html body .cl-hero-mais strong { color: #F5F8FC; }

html body .cl-hero-frete {
  margin: 9px 0 0; font-size: 12.5px; color: var(--cl-ink2);
}
@media (min-width: 760px) {
  html body .cl-hero-btn { max-width: 460px; margin-inline: auto; }
}
/* O botão do topo VOLTOU a aparecer no celular: agora é ele que abre a
   vitrine (antes a loja já estava aberta e ele só rolava a página, ficando
   redundante com a barra fixa). */
html body .cl-thumb {
  flex: 0 0 64px; width: 64px; height: 64px; padding: 0; cursor: pointer;
  background: var(--cl-bg-soft); border: 2px solid transparent;
  border-radius: 6px; overflow: hidden;
}
html body .cl-thumb img { width: 100%; height: 100%; object-fit: contain; }
html body .cl-thumb.is-on { border-color: var(--cl-text); }

/* ---------------------------------------------------------------- compra */
html body .cl-title { font-size: 20px; line-height: 1.35; margin: 0 0 10px; font-weight: 600; }
@media (min-width: 900px) { html body .cl-title { font-size: 24px; } }

html body .cl-social { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; margin-bottom: 14px; }
html body .cl-stars { color: #ffc107; letter-spacing: 1px; }
html body .cl-muted { color: var(--cl-text3); }
html body .cl-dot { color: var(--cl-text3); }

html body .cl-price { display: flex; align-items: baseline; color: var(--cl-brand); margin: 6px 0 4px; }
html body .cl-cur { font-size: 20px; font-weight: 600; }
html body .cl-int { font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
html body .cl-cent { font-size: 20px; font-weight: 600; }

html body .cl-promo {
  display: inline-block; margin: 0 0 18px; padding: 5px 10px;
  background: #fe2c551a; color: var(--cl-brand);
  border-radius: 4px; font-size: 13px; font-weight: 600;
}

html body .cl-field { margin-bottom: 18px; }
html body .cl-label { font-size: 14px; color: var(--cl-text2); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html body .cl-label strong { color: var(--cl-text); }
html body .cl-guide { margin-left: auto; color: var(--cl-text2); font-size: 13px;
  /* padding vertical leva a area de toque de 20px para 44px; o texto nao
     muda de tamanho, so o alvo do dedo. */
  padding: 12px 2px; }

html body .cl-color {
  width: 56px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid var(--cl-text); border-radius: 6px;
  overflow: hidden; background: var(--cl-bg-soft);
}
html body .cl-color img { width: 100%; height: 100%; object-fit: contain; }

html body .cl-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
html body .cl-size {
  min-width: 56px; padding: 10px 14px; cursor: pointer;
  background: var(--cl-bg-soft); color: var(--cl-text);
  border: 1px solid transparent; border-radius: 6px;
  font-size: 14px; font-weight: 500; font-family: inherit;
}
html body .cl-size:hover { border-color: var(--cl-text3); }
html body .cl-size.is-on { border-color: var(--cl-brand); background: #fe2c550f; color: var(--cl-brand); font-weight: 600; }

html body .cl-erro { color: var(--cl-brand); font-size: 13px; margin: 8px 0 0; }

html body .cl-qty { display: inline-flex; align-items: center; border: 1px solid var(--cl-line); border-radius: 6px; overflow: hidden; }
html body .cl-qty button {
  width: 40px; height: 40px; cursor: pointer; font-size: 18px;
  background: var(--cl-bg); border: 0; color: var(--cl-text); font-family: inherit;
}
html body .cl-qty button:hover { background: var(--cl-bg-soft); }
html body .cl-qty input {
  width: 52px; height: 40px; text-align: center; font-size: 15px;
  border: 0; border-left: 1px solid var(--cl-line); border-right: 1px solid var(--cl-line);
  color: var(--cl-text); background: var(--cl-bg); font-family: inherit;
}

html body .cl-actions { display: flex; gap: 10px; margin: 20px 0 16px; flex-wrap: wrap; }
html body .cl-btn {
  flex: 1 1 160px; padding: 14px 20px; cursor: pointer;
  border: 0; border-radius: var(--cl-radius);
  font-size: 15px; font-weight: 600; font-family: inherit;
}
/* Botao de compra VERDE, a pedido do dono (28/10/2026).
   31/10/2026, TEMA ESCURO: o verde do briefing (#08BC59) e MUITO mais claro
   que o antigo #15803d. Isso inverte quem pode ser o texto: branco sobre
   ele da 2,52:1 e REPROVA (o antigo dava 5,02:1 e passava). Por isso o
   texto virou --cl-sobre-verde (#06220F), que da 6,71:1. Medido.
   O hover ESCURECE o fundo, o que SOBE o contraste com o texto escuro? Nao:
   com texto escuro, escurecer o fundo aproxima os dois. Por isso o hover
   aqui CLAREIA de leve: 8,35:1 contra os 6,71:1 do repouso. */
html body .cl-btn-buy { background: var(--cl-verde); color: var(--cl-sobre-verde); }
html body .cl-btn-buy:hover { background: #2BD074; }

html body .cl-trust { list-style: none; padding: 0; margin: 0; color: var(--cl-text2); font-size: 13px; }
html body .cl-trust li { padding: 5px 0 5px 20px; position: relative; }
html body .cl-trust li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 700; }

/* ---------------------------------------------------------- sobre/reviews */
html body .cl-about h2, html body .cl-reviews h2 { font-size: 18px; margin: 0 0 12px; font-weight: 600; }
html body .cl-about h3 { font-size: 15px; margin: 22px 0 10px; font-weight: 600; }
html body .cl-about { border-top: 1px solid var(--cl-line); padding-top: 24px; }
html body .cl-brandline { font-size: 14px; margin-bottom: 12px; }
html body .cl-about p { color: var(--cl-text2); margin: 0 0 14px; max-width: 70ch; }
html body .cl-bullets { max-width: 70ch; }
html body .cl-bullets { color: var(--cl-text2); padding-left: 20px; margin: 0; }
html body .cl-bullets li { margin-bottom: 6px; }
html body .cl-guia-img { max-width: 520px; border-radius: var(--cl-radius); border: 1px solid var(--cl-line); }

html body .cl-reviews { border-top: 1px solid var(--cl-line); padding-top: 24px; }
html body .cl-rev-sum { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 15px; }
html body .cl-review { border-top: 1px solid var(--cl-line); padding: 14px 0; }
html body .cl-review header { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
html body .cl-verif { color: #16a34a; font-size: 12px; }
html body .cl-review p { margin: 6px 0; color: var(--cl-text2); }
html body .cl-review footer { color: var(--cl-text3); font-size: 12px; }

/* ------------------------------------------------------- barra do celular */


html body .cl-foot { border-top: 1px solid var(--cl-line); margin-top: 28px; padding: 20px 16px; color: var(--cl-text3); font-size: 13px; text-align: center; }

/* --------------------------------------------------------------- aviso */
html body .cl-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 92px; z-index: 40;
  /* max-content, nao fit-content: a caixa e position:fixed sem left/right
     definidos, e nesse caso o navegador resolvia a largura em metade da
     janela (215px de 430) — "McQueen entrou na sua equipe" saia em 4
     linhas. max-content pede a largura do texto em uma linha e o
     max-width a segura na tela em frases longas. */
  width: max-content; max-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: var(--cl-radius);
  background: #000000e6; color: #fff; font-size: 14px;
  text-align: center; text-wrap: balance;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
html body .cl-toast.is-on { opacity: 1; }
@media (min-width: 900px) { html body .cl-toast { bottom: 32px; } }

/* Aviso de "falta o tamanho": entra pulando, para o cliente perceber que
   algo o está impedindo de seguir. */
@keyframes cl-toast-pulo {
  0%   { transform: translateX(-50%) translateY(14px) scale(.9); opacity: 0; }
  55%  { transform: translateX(-50%) translateY(-6px) scale(1.04); opacity: 1; }
  75%  { transform: translateX(-50%) translateY(2px) scale(.99); }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
html body .cl-toast.is-pulo {
  background: #c0261f; font-weight: 700;
  animation: cl-toast-pulo .5s cubic-bezier(.22,1.2,.36,1) both;
}
/* Destaque no seletor que está faltando, para o aviso ter um destino. */
@keyframes cl-chama {
  0%, 100% { box-shadow: 0 0 0 0 #c0261f00; border-color: var(--cl-azul); }
  50%      { box-shadow: 0 0 0 5px #FF8A8033; border-color: var(--cl-erro); }
}
html body .cl-mod-tam.is-faltando { animation: cl-chama 1s ease-in-out 2; }

@media (prefers-reduced-motion: reduce) {
  html body .cl-toast.is-pulo, html body .cl-mod-tam.is-faltando { animation: none; }
}

/* ------------------------------------------- fotos enviadas por clientes */
/* Faixa no topo das avaliações, como a "Fotos de avaliações" do TikTok. */
html body .cl-rev-strip {
  display: flex; gap: 8px; overflow-x: auto;
  margin: 0 0 20px; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
html body .cl-rev-strip img {
  flex: 0 0 72px; width: 72px; height: 72px;
  object-fit: cover; border-radius: 6px;
  background: var(--cl-bg-soft); scroll-snap-align: start;
}

/* Fotos dentro de uma avaliação. */
html body .cl-rev-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
html body .cl-rev-fotos img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: 6px; background: var(--cl-bg-soft);
}

/* Estrelas vazias da nota individual. */
html body .cl-star-off { color: #0000001f; }

html body .cl-rev-nota {
  color: var(--cl-text3); font-size: 13px;
  border-top: 1px solid var(--cl-line); padding-top: 14px; margin: 14px 0 0;
}

/* ======================================================================
   TEMA DINOCO — Relâmpago McQueen
   Faixa de corrida no topo, azul Dinoco nos elementos de marca e um toque
   do amarelo Lightyear. O vermelho continua só no preço e nos botões de
   comprar: é a cor que o olho procura para agir.
   ====================================================================== */

/* faixa de corrida azul/amarela no topo da loja */
html body .cl-top {
  border-bottom: 0;
  box-shadow: 0 2px 0 var(--cl-dinoco), 0 4px 0 var(--cl-gas);
}
html body .cl-brand { color: var(--cl-dinoco-d); }
/* (o "95" do McQueen saiu: amarrava a loja a um produto só) */

html body .cl-crumb { color: var(--cl-dinoco-d); opacity: .75; }

/* As fotos do catálogo têm fundo BRANCO. Com o azul lavado atrás, o branco
   da foto virava uma tarja visível nas laterais da sandália. */
html body .cl-main-photo { background: var(--cl-card); }
html body .cl-thumb { background: var(--cl-card); }
html body .cl-thumb.is-on { border-color: var(--cl-dinoco); }

/* selo da promoção nas cores do patrocinador */
html body .cl-promo {
  background: var(--cl-dinoco-soft);
  color: var(--cl-dinoco-d);
  border-left: 3px solid var(--cl-gas);
}

/* tamanhos: o escolhido fica azul Dinoco */
html body .cl-size { background: var(--cl-dinoco-soft); }
html body .cl-size:hover { border-color: var(--cl-dinoco); }
html body .cl-size.is-on {
  border-color: var(--cl-dinoco); background: var(--cl-dinoco);
  color: #fff; font-weight: 700;
}
html body .cl-color { border-color: var(--cl-dinoco); background: var(--cl-dinoco-soft); }

/* (o botão "Adicionar ao carrinho" saiu: só existe "Comprar agora") */

/* selos de confiança com o tique azul */
html body .cl-trust li::before { color: var(--cl-dinoco); }

/* títulos de seção com a faixa de corrida */
html body .cl-about h2, html body .cl-reviews h2 {
  display: flex; align-items: center; gap: 10px;
}
html body .cl-about h2::after, html body .cl-reviews h2::after {
  content: ""; flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cl-dinoco), var(--cl-gas) 60%, transparent);
}

html body .cl-brandline strong { color: var(--cl-dinoco-d); }
html body .cl-bullets li::marker { color: var(--cl-dinoco); }

/* avaliações: fotos de cliente com borda azul suave */
html body .cl-rev-strip img, html body .cl-rev-fotos img {
  border: 1px solid #1890c026;
}
html body .cl-verif { color: var(--cl-dinoco-d); }

/* barra fixa do celular com a faixa de corrida em cima */
/* Barra de compra sem a faixa de corrida: no fim da página ela virava uma
   tarja azul atravessada que não somava nada. Fica só um filete discreto. */


html body .cl-foot {
  background: transparent; color: var(--cl-text3);
  border-top: 1px solid var(--cl-line);
}

/* selo de licença acima do título */
/* A LINHA DA LICENCA era o unico lugar da pagina que dizia de que personagem
   e o Crocs — e estava em 12px cinza-claro (--cl-text3), menor que a legenda
   de qualquer foto. Quem chega do anuncio do McQueen precisa reconhecer o
   produto na primeira olhada.
   A tarja (DINOCO, MARVEL, BUZZ…) e o texto seguem o modelo escolhido no
   passo 2 via loja.js, entao o estilo nao pode cravar cor de personagem:
   e a mesma regra servindo os quatro. */
html body .cl-licenca {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 12.5px; color: var(--cl-text2);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
html body .cl-licenca strong { color: var(--cl-dinoco-d); }
html body .cl-tag-dinoco {
  /* --cl-dinoco (#1890c0) com branco da 3,63:1 e a tarja tem 11,5px: abaixo
     dos 4,5:1 que texto pequeno exige. O tom escuro da mesma peca da 6,85:1
     sem mudar a cor da marca. */
  background: var(--cl-dinoco-d); color: var(--cl-sobre-azul);
  /* A troca de modelo vira transicao azul->vermelho em vez de corte seco.
     So a cor anima: nada aqui mexe em posicao ou tamanho. */
  transition: background-color .28s ease;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 800; font-size: 11.5px; letter-spacing: .09em;
  /* a faixa amarela embaixo e o detalhe Lightyear da propria peca: da ao
     selo o ar de emblema de corrida sem precisar de arte nova. */
  box-shadow: 0 2px 0 var(--cl-gas);
}

/* Rust-eze e vermelho na peca. #b3261e com branco da 6,54:1 — passa dos
   4,5:1 que a tarja de 11,5px exige. */
html body .cl-tag-dinoco[data-tag="RUST-EZE"] { background: #b3261e; }

/* quatro destaques do produto, em grade */
html body .cl-destaques {
  list-style: none; padding: 0;
  margin: 18px 0 0; display: grid; gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body .cl-destaques li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: var(--cl-radius);
  background: var(--cl-dinoco-soft);
  border-left: 3px solid var(--cl-dinoco);
}
html body .cl-destaques .cl-ico {
  width: 20px; height: 20px; color: var(--cl-dinoco); margin-bottom: 3px;
}
html body .cl-destaques strong { font-size: 13px; color: var(--cl-dinoco-d); }
html body .cl-destaques small { font-size: 11.5px; color: var(--cl-text3); line-height: 1.35; }

/* ======================================================================
   OFERTA AO CLICAR EM COMPRAR (order bump)
   Diálogo que aparece antes do checkout com outros Crocs. Tudo com
   `html body` na frente pelo mesmo motivo do resto do arquivo: o reset do
   CSS do TikTok zera margem/padding de tudo.
   ====================================================================== */
html body .cl-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
}
html body .cl-modal[hidden] { display: none; }
@media (min-width: 640px) {
  html body .cl-modal { align-items: center; padding: 24px; }
}

html body .cl-modal-fundo {
  position: absolute; inset: 0; background: #0b1b2ab8;
  backdrop-filter: blur(2px);
}

html body .cl-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--cl-bg);
  border-radius: 16px 16px 0 0;
  padding: 22px 18px 16px;
  box-shadow: 0 -8px 40px #0000003d;
  animation: cl-sobe .22s ease-out;
}
@media (min-width: 640px) {
  html body .cl-modal-card { border-radius: 16px; padding: 26px 24px 20px; }
}
@keyframes cl-sobe { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }

html body .cl-modal-x {
  position: absolute; top: 8px; right: 10px;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%;
  font-size: 26px; line-height: 1; color: var(--cl-text3);
}
html body .cl-modal-x:hover { background: var(--cl-bg-soft); color: var(--cl-text); }

html body .cl-modal-card h2 {
  font-size: 18px; font-weight: 700; margin: 0 0 4px; padding-right: 32px;
  color: var(--cl-dinoco-d);
}
html body .cl-of-preco { color: var(--cl-brand); }
html body .cl-modal-sub { font-size: 13px; color: var(--cl-text3); margin: 0 0 14px; }

/* ------------------------------------------------------------- a lista */
html body .cl-of-lista {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; margin: 0 -4px 14px; padding: 0 4px;
}

html body .cl-of-item {
  display: grid; grid-template-columns: 68px 1fr auto; gap: 11px;
  align-items: center;
  padding: 10px; border-radius: 12px;
  background: var(--cl-bg-soft);
  border: 2px solid transparent;
  transition: border-color .15s, background .15s;
}
html body .cl-of-item.is-on {
  border-color: var(--cl-dinoco); background: var(--cl-dinoco-soft);
}

html body .cl-of-foto {
  width: 68px; height: 68px; border-radius: 8px;
  object-fit: contain; background: var(--cl-card);
}
html body .cl-of-nome { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
html body .cl-of-precos { font-size: 13px; margin-top: 3px; }
html body .cl-of-de { color: var(--cl-text3); text-decoration: line-through; margin-right: 6px; }
html body .cl-of-por { color: var(--cl-brand); font-weight: 700; }

html body .cl-of-add {
  padding: 9px 14px; cursor: pointer;
  border: 0; border-radius: 8px; font-family: inherit;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--cl-dinoco); color: #fff;
}
html body .cl-of-add:hover { filter: brightness(1.07); }
html body .cl-of-item.is-on .cl-of-add { background: #16a34a; }

/* grade de tamanhos que abre ao adicionar */
html body .cl-of-tams {
  grid-column: 1 / -1; display: none;
  flex-wrap: wrap; gap: 6px; padding-top: 4px;
}
html body .cl-of-item.is-aberto .cl-of-tams { display: flex; }
html body .cl-of-tams span {
  width: 100%; font-size: 12px; color: var(--cl-text2); margin-bottom: 2px;
}
html body .cl-of-tam {
  min-width: 42px; padding: 7px 10px; cursor: pointer;
  background: var(--cl-campo); color: var(--cl-text);
  border: 1px solid var(--cl-line); border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
html body .cl-of-tam:hover { border-color: var(--cl-dinoco); }
html body .cl-of-tam.is-on {
  background: var(--cl-dinoco); color: #fff;
  border-color: var(--cl-dinoco); font-weight: 700;
}

/* ---------------------------------------------------------------- pé */
html body .cl-modal-pe { border-top: 1px solid var(--cl-line); padding-top: 13px; }
html body .cl-modal-total { font-size: 14px; color: var(--cl-text2); margin-bottom: 9px; }
html body .cl-modal-total strong { font-size: 19px; color: var(--cl-brand); }
html body .cl-modal-pe .cl-btn { width: 100%; }

html body .cl-link {
  display: block; width: 100%; margin-top: 9px; padding: 7px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--cl-text3); text-decoration: underline;
}
html body .cl-link:hover { color: var(--cl-text); }

html body.cl-travado { overflow: hidden; }

/* ======================================================================
   OFERTA — refinamentos
   ====================================================================== */

/* etiqueta acima do título */
html body .cl-modal-tag {
  display: inline-block; margin: 0 0 8px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--cl-brand); color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
html body .cl-modal-card h2 { font-size: 20px; line-height: 1.25; margin: 0 0 6px; }
html body .cl-modal-sub strong { color: var(--cl-text); }

/* foto com o selo de desconto por cima */
html body .cl-of-fotobox { position: relative; width: 78px; height: 78px; }
html body .cl-of-foto { width: 78px; height: 78px; }
html body .cl-of-selo {
  position: absolute; top: -5px; left: -5px;
  padding: 2px 6px; border-radius: 999px;
  background: var(--cl-brand); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 1px 4px #0000002e;
}
html body .cl-of-item { grid-template-columns: 78px 1fr auto; }

html body .cl-of-economia {
  margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--cl-ok);
}

/* botão de adicionar: verde, igual ao caminho da compra */
html body .cl-of-add { background: var(--cl-ok); }
html body .cl-of-add:hover { background: var(--cl-ok-d); }
html body .cl-of-item.is-on .cl-of-add { background: var(--cl-ok-d); }

/* economia total, no pé */
html body .cl-modal-eco {
  margin: -4px 0 9px; font-size: 13px; font-weight: 700; color: var(--cl-ok);
}
html body .cl-modal-eco[hidden] { display: none; }

/* o item escolhido fica verde, não azul: é o estado "vai levar" */
html body .cl-of-item.is-on {
  border-color: var(--cl-ok); background: #1e9e4f0f;
}
html body .cl-of-tam.is-on {
  background: var(--cl-ok); border-color: var(--cl-ok);
}
html body .cl-of-tam:hover { border-color: var(--cl-ok); }

/* ======================================================================
   ESTILO LANDING (inspirado na Combinadinhos)
   Fundo creme, tipografia arredondada, cartões brancos com cantos grandes,
   seções com respiro e uma só ação em verde.
   ====================================================================== */

html body, html body * {
  font-family: Nunito, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

html body {
  background: var(--cl-cream);
  color: var(--cl-ink);
  font-size: 16px;
}

/* --------------------------------------------------------- barra de topo */
/* Urgência no alto, como a deles. O número sai do catálogo, não é inventado
   na mão — ver `estoque` em scripts/gerar-pagina.py. */
/* Barra de urgência em vermelho: é a cor de escassez que o cliente
   reconhece. O laranja de antes se perdia no fundo creme. */
html body .cl-urg {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; background: var(--cl-erro-bg); color: var(--cl-erro);
  border-bottom: 1px solid #f6d2d0;
  font-size: 12.5px; font-weight: 800; text-align: center;
}
html body .cl-urg::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #e02b20; flex: none;
  /* Sem pisca (31/10/2026): o ponto piscava a cada 1,1s o tempo todo no
     alto da tela, no campo de visao de quem esta lendo o resto. O ponto
     vermelho sozinho ja marca a faixa de urgencia. */
}
@keyframes cl-pulso {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 #e02b2066; }
  50%      { opacity: .35; box-shadow: 0 0 0 5px #e02b2000; }
}
/* Quem pediu menos animação no sistema não vê o pisca. */
@media (prefers-reduced-motion: reduce) {
  html body .cl-urg::before { animation: none; }
}

/* TEMA ESCURO: o topo usa o MESMO tom do alto do ceu da abertura
   (--cl-cream = #0B1118, o primeiro passo do gradiente da .cl-pista), para
   o cabecalho escorrer na cena em vez de virar uma faixa colada por cima.
   A linha de baixo tambem sai pelo mesmo motivo; o que separa o topo do
   resto, quando a pagina rola, e a sombra. */
html body .cl-top {
  background: var(--cl-cream); border-bottom: 0;
  box-shadow: 0 6px 18px -10px #000000A6;
}
html body .cl-brand { color: var(--cl-ink); font-weight: 800; letter-spacing: -.02em; }

/* ------------------------------------------------------------- chamada */
html body .cl-hero {
  padding: 22px 16px 18px; text-align: center;
  /* Era --cl-lav chapado. O degrade sai das MESMAS cores da peca (o azul
     Dinoco lavado por cima, o branco embaixo) e da profundidade ao topo sem
     nenhuma arte nova — a foto do produto continua sendo a unica imagem.
     A linha amarela no fim e o detalhe Lightyear da propria sandalia, e
     fecha o bloco como a borda de uma pista. */
  /* TEMA ESCURO: era um degrade CLARO que terminava em #fbfdfe (quase
     branco). Como no desktop o .cl-hero e centrado com max-width, esse
     branco aparecia como duas BARRAS verticais nas laterais, fora do
     bloco. Agora o fundo do bloco e o mesmo ceu noturno do cenario, e a
     cena de pista (.cl-pista) desenha por cima. */
  background: linear-gradient(180deg, #0B1118 0%, #111A26 100%);
  border-bottom: 3px solid var(--cl-gas);
}
/* Duas colunas a partir do tablet: texto à esquerda, foto à direita. No
   celular continua empilhado — lado a lado em 390px espreme os dois. */
@media (min-width: 860px) {
  html body .cl-hero {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 40px;
    /* O HERO ocupa a janela inteira e e o PADDING que centraliza o
       conteudo (1120px no meio). Antes ele era um bloco centrado por
       max-width + margens automaticas, e tudo que e fundo — a foto do
       circuito e a faixa xadrez — ficava presa a esses 1120px, deixando
       duas tarjas escuras nas laterais em telas largas.
       Com o bloco ocupando tudo, o fundo encosta nas bordas sem truque de
       vw, e o conteudo continua exatamente onde estava. */
    max-width: none; margin-inline: 0;
    padding-inline: max(24px, calc((100% - 1120px) / 2));
    /* Padding ZERO de proposito, nos dois eixos: um filho `position:
       absolute` se mede pela caixa de CONTEUDO, entao qualquer padding aqui
       faz a foto do cenario parar antes das pontas e deixa faixa escura.
       O respiro passou para os filhos (regra logo abaixo), onde nao
       atrapalha o fundo. */
    padding: 0; text-align: left;
  }
  /* O respiro que saiu do padding do hero volta aqui, so no conteudo:
     24px nas laterais, 46/42 em cima e embaixo. O `:not(.cl-pista)` e o que
     garante que a cena NAO ganhe margem — ela tem de encostar nas bordas. */
  html body .cl-hero > *:not(.cl-pista) { margin-block: 46px 42px; }
  /* `margin-inline: 0` sozinho não bastava: h1 e p têm max-width com
     `margin: 0 auto`, que recentraliza dentro da coluna. */
  html body .cl-hero h1 {
    margin: 0 0 14px; font-size: 42px; max-width: none; text-wrap: balance;
  }
  html body .cl-hero p { margin: 0; max-width: 48ch; }
  /* Mesmo caso do <p> acima, para os dois blocos que nao sao <p> simples:
     a CAIXA deles tinha `margin: 0 auto` e se recentrava na coluna, entao
     "A partir de / R$ 129,00" aparecia no meio enquanto o titulo, o botao
     e o resto do texto comecavam na margem esquerda (31/10/2026). */
  html body .cl-hero-sub,
  html body .cl-hero-apartir { margin-inline: 0; text-align: left; }
  /* O card e o botão vivem na coluna da IMAGEM: ficam centralizados sob
     ela, não alinhados à esquerda com o texto. */
  html body .cl-hero-card { margin: 16px auto 0; }
  html body .cl-hero-btn { max-width: none; }
  html body .cl-hero-frete { text-align: center; }
}
html body .cl-hero-img img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  /* a foto e RECORTADA (fundo transparente): um azul claro aqui viraria
     um retangulo brilhante atras da peca. Fica o tom do cartao. */
  background: var(--cl-card);
}
/* No celular a foto vem DEPOIS do texto: a promessa primeiro, a imagem
   confirmando. */
@media (max-width: 859px) {
  html body .cl-hero-img { margin-top: 16px; }
}

/* Selos de confiança embaixo da chamada. */



html body .cl-hero-tag {
  display: inline-block; margin: 0 0 14px; padding: 6px 14px;
  border-radius: 999px; background: var(--cl-brand); color: #fff;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
html body .cl-hero h1 {
  /* Chamada grande e apertada, como a da landing de referência: é ela que
     carrega a promessa, não pode ter tamanho de parágrafo. */
  font-size: 33px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.03em; margin: 0 auto 12px; color: var(--cl-ink);
  max-width: 760px; text-wrap: balance;
}
/* A segunda linha da chamada vai no AZUL da logo: é a cor da marca, e
   a copy é a voz da loja. O laranja fica reservado para sinalizar
   coisa (urgência, aviso, "melhor valor"), não para falar. */
html body .cl-hero h1 em { font-style: normal; color: var(--cl-azul); display: block; }
/* :not(.cl-hero-sub) (31/10/2026): esta regra generica tem especificidade
   maior que `.cl-hero-sub` (duas classes + elemento contra uma classe), e
   por isso vencia o bloco do topo la embaixo — o subtitulo ficava com
   15,5px/620px em vez dos 16px/40ch declarados para ele. Agora cada um
   cuida do seu: aqui os demais <p> do topo, la o subtitulo. */
html body .cl-hero p:not(.cl-hero-sub) { font-size: 15.5px; line-height: 1.55; color: var(--cl-ink2); margin: 0 auto; max-width: 620px; }
html body .cl-hero p strong { color: var(--cl-ink); }
/* Este bloco vinha DEPOIS do @media 860px que monta as duas colunas e
   desfazia o trabalho dele: o `padding` voltava ao de uma coluna e o
   `margin: 0 auto` do <p> recentralizava o texto dentro da coluna. O topo
   ficava empilhado e estreito (820px num monitor de 1280) mesmo com o grid
   declarado. Agora so mexe no que e proprio de tela grande — tamanho de
   fonte — e deixa a grade em paz. */
@media (min-width: 900px) {
  html body .cl-hero h1 { font-size: 44px; }
  html body .cl-hero p:not(.cl-hero-sub) { font-size: 17px; }
}

/* -------------------------------------------------- cartão de oferta */
html body .cl-oferta-box {
  background: var(--cl-card); border-radius: 20px;
  padding: 18px; margin: 18px 0 14px;
  box-shadow: 0 2px 18px #0000004D; border: 1px solid var(--cl-line);
}
html body .cl-precos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
html body .cl-preco-op {
  border: 2px solid var(--cl-line); border-radius: 14px;
  padding: 13px 10px; text-align: center; background: var(--cl-lav);
  position: relative;
}
html body .cl-preco-op.is-melhor { border-color: var(--cl-rosa); background: var(--cl-azul-soft); }
html body .cl-preco-op .cl-op-tit { font-size: 12.5px; color: var(--cl-ink2); font-weight: 700; }
html body .cl-preco-op .cl-op-val {
  font-size: 27px; font-weight: 800; color: var(--cl-ink);
  letter-spacing: -.02em; line-height: 1.15; margin: 2px 0;
}
html body .cl-preco-op .cl-op-un { font-size: 11.5px; color: var(--cl-ink3); }
html body .cl-selo-melhor {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 3px 10px; border-radius: 999px;
  background: var(--cl-rosa); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* ------------------------------------------------------ selos de confiança */
html body .cl-trust2 {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px;
}
html body .cl-trust2 li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--cl-ink2); line-height: 1.3;
}
html body .cl-trust2 svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--cl-brand); }

/* ----------------------------------------------------------- seções */
html body .cl-sec { padding: 26px 16px; }
html body .cl-sec-alt { background: var(--cl-lav); }
html body .cl-passo {
  text-align: center; font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cl-rosa); margin: 0 0 6px;
}
html body .cl-sec-tit {
  text-align: center; font-size: 25px; font-weight: 800;
  letter-spacing: -.02em; color: var(--cl-ink); margin: 0 0 8px;
}
html body .cl-sec-sub {
  text-align: center; font-size: 14.5px; color: var(--cl-ink2);
  line-height: 1.55; margin: 0 auto 18px; max-width: 540px;
}

/* cartões e botões no estilo arredondado da referência */
html body .cl-btn { border-radius: 999px; font-weight: 800; font-size: 16px; padding: 16px 22px; }
html body .cl-main-photo, html body .cl-thumb { border-radius: 14px; }
html body .cl-size { border-radius: 12px; font-weight: 700; }
html body .cl-of-item, html body .cl-modal-card { border-radius: 18px; }
html body .cl-review { border-color: var(--cl-line); }

html body .cl-foot { background: var(--cl-lav); border-top: 1px solid var(--cl-line); }

/* o guia de tamanhos estourava a largura no celular */
html body .cl-guia-img { max-width: 100%; height: auto; }


/* ======================================================================
   CORREÇÕES DO TOPO
   ====================================================================== */

/* Todo SVG inline tem tamanho fixo. Sem isto, se a regra específica não
   pegar (CSS atrasado, classe errada), o ícone estoura a tela inteira —
   foi o que aconteceu na tela do dono. */
html body svg { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
html body .cl-ico { width: 20px; height: 20px; }
html body .cl-trust2 svg { width: 16px; height: 16px; }
html body .cl-of-selo, html body .cl-modal-tag, html body .cl-hero-tag { line-height: 1.3; }

/* A barra de urgência e o topo precisam acompanhar a largura do conteúdo:
   em tela larga o texto ficava colado na borda esquerda. */
html body .cl-urg > span,
html body .cl-top { padding-inline: max(16px, calc((100vw - var(--cl-max)) / 2)); }
html body .cl-top { max-width: none; }

/* A chamada centralizada com largura de leitura. O text-align fica aqui
   junto do max-width: sem ele, o h1 (que é bloco) encostava na esquerda
   enquanto a etiqueta e o parágrafo seguiam centralizados. */
/* `margin-inline: auto` sozinho perdia para a regra genérica
   `html body h1 { margin: 0 0 12px }` — mesma especificidade, declarada
   depois. Por isso a margem vai escrita por extenso aqui. */
html body .cl-hero > * {
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  text-align: center;
}

/* Enquanto a Nunito não chega, a fonte de sistema arredondada evita o
   "pulo" de layout e já parece do mesmo estilo. */
html body, html body * {
  font-family: Nunito, "Segoe UI Variable", "Segoe UI", -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ======================================================================
   GRADE DE MODELOS
   Todos os Crocs da loja em cartões, cada um com a própria numeração.
   ====================================================================== */
html body .cl-modelos {
  grid-column: 1 / -1;
  padding: 30px 0 10px;
  border-top: 1px solid var(--cl-line);
  margin-top: 8px;
}

html body .cl-grade {
  display: grid; gap: 12px;
  /* 2 por linha no celular: com 1 por linha o cartão virava uma tela inteira
     e o cliente rolava 4 telas para ver a loja toda. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  html body .cl-grade { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

html body .cl-card {
  display: flex; flex-direction: column;
  background: var(--cl-card); border: 1px solid var(--cl-line);
  border-radius: 18px; padding: 12px;
}

html body .cl-card-foto {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--cl-azul-soft); border-radius: 12px;
  overflow: hidden; margin-bottom: 10px;
}
html body .cl-card-foto img { width: 100%; height: 100%; object-fit: contain; }

html body .cl-card-selo {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cl-laranja); color: #fff;
  font-size: 11px; font-weight: 800;
}

html body .cl-card-nome {
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  margin: 0 0 5px; color: var(--cl-ink);
}
html body .cl-card-precos { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
html body .cl-card-de { font-size: 12.5px; color: var(--cl-ink3); text-decoration: line-through; }
html body .cl-card-precos strong { font-size: 20px; font-weight: 800; color: var(--cl-azul); }

html body .cl-card-tams { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
html body .cl-card-tam {
  min-width: 36px; padding: 6px 8px; cursor: pointer;
  background: var(--cl-azul-soft); color: var(--cl-ink);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
}
html body .cl-card-tam:hover { border-color: var(--cl-azul); }
html body .cl-card-tam.is-on {
  background: var(--cl-azul); color: #fff; border-color: var(--cl-azul);
}

html body .cl-card-aviso { font-size: 12px; color: var(--cl-laranja); margin: -4px 0 8px; }
html body .cl-card-aviso[hidden] { display: none; }

/* o botão empurra para o fim: cartões de alturas diferentes alinham embaixo */
html body .cl-card-buy {
  /* `margin-top: auto` alinhava os botões embaixo, mas o flex esticava a
     altura e o raio de 999px transformava o botão num círculo. `align-self`
     empurra para o fim SEM esticar. */
  margin-top: auto; align-self: stretch; flex: 0 0 auto;
  font-size: 14.5px; padding: 12px 16px; border-radius: 12px;
}


/* --- grade compacta no celular (2 cartões por linha) --- */
@media (max-width: 759px) {
  html body .cl-card { padding: 9px; border-radius: 14px; }
  html body .cl-card-foto { margin-bottom: 8px; border-radius: 10px; }
  html body .cl-card-nome { font-size: 12.5px; }
  html body .cl-card-precos { gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
  html body .cl-card-precos strong { font-size: 17px; }
  html body .cl-card-de { font-size: 11px; }
  html body .cl-card-tam { min-width: 30px; padding: 5px 6px; font-size: 11.5px; border-radius: 7px; }
  html body .cl-card-tams { gap: 4px; margin-bottom: 8px; }
  html body .cl-card-buy { font-size: 13px; padding: 10px 12px; }
  html body .cl-card-selo { font-size: 10px; padding: 2px 6px; top: 6px; left: 6px; }
}

/* ======================================================================
   SELETOR DE MODELO
   Os 4 Crocs são o mesmo produto: muda o personagem. Fica onde antes
   estava "Cor: Multi".
   ====================================================================== */
html body .cl-modelos-pick { display: flex; flex-wrap: wrap; gap: 9px; }

html body .cl-mod {
  position: relative; width: 66px; height: 66px; padding: 3px; cursor: pointer;
  background: var(--cl-azul-soft);
  border: 2px solid transparent; border-radius: 12px;
}
html body .cl-mod img { width: 100%; height: 100%; object-fit: contain; }
html body .cl-mod:hover { border-color: var(--cl-azul-l); }
html body .cl-mod.is-on {
  border-color: var(--cl-azul); background: var(--cl-azul-soft);
  box-shadow: 0 0 0 3px #1890c026;
}

/* preço de tabela riscado, ao lado do preço do modelo escolhido */
html body .cl-price { flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
html body .cl-de {
  font-size: 15px; font-weight: 600; color: var(--cl-ink3);
  text-decoration: line-through; width: 100%;
}
html body .cl-de[hidden] { display: none; }

/* com um modelo só por vez, a faixa de miniaturas da galeria some */
html body .cl-thumbs[hidden] { display: none; }

/* ======================================================================
   OPÇÕES DE QUANTIDADE (1 par / 3 pares)
   São <button>: precisam zerar o estilo do navegador e mostrar qual está
   escolhido — antes eram <div> com cara de botão e nada acontecia.
   ====================================================================== */
/* A tabela é informativa: sem cursor de clique e sem hover, para ninguém
   tentar escolher a quantidade aqui (ela sai do passo 2). */
html body .cl-preco-op {
  width: 100%; font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
/* A tabela NÃO marca faixa nenhuma: borda azul com anel é exatamente o
   visual de "Escolhido" nos cartões de modelo, e o cliente lia a faixa
   destacada como uma opção que ele teria selecionado. */

/* "Melhor valor" fica em laranja — é selo de oferta, não de seleção. */
html body .cl-preco-op.is-melhor { border-color: var(--cl-laranja); }

/* tique no canto do escolhido, para não depender só da cor */
html body .cl-preco-op.is-on::after {
  content: "\2713"; position: absolute; top: 7px; right: 9px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--cl-azul); color: #fff;
  font-size: 11px; line-height: 17px; text-align: center; font-weight: 800;
}

/* preço do pop-up numa linha própria: no título ele quebrava "R$" do valor */
html body .cl-modal-preco {
  margin: 0 0 4px; font-size: 15px; color: var(--cl-ink2);
}
html body .cl-modal-preco strong { color: var(--cl-azul); font-size: 19px; font-weight: 800; }

/* ======================================================================
   MONTAGEM DO KIT — passo 1 (quantos pares) e passo 2 (cada par)
   ====================================================================== */
html body .cl-passo-box { margin-bottom: 16px; }
html body .cl-passo-tit {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--cl-ink); margin: 0 0 10px;
}
html body .cl-passo-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  /* branco sobre o azul Dinoco claro dava 2,18:1; o escuro da 7,54:1 */
  background: var(--cl-azul); color: var(--cl-sobre-azul);
  font-size: 12px; font-weight: 800; flex: none;
}
html body .cl-passo-tit .cl-guide { margin-left: auto; font-weight: 600; }

/* Quatro opções em 2x2: com três colunas a quarta sobrava sozinha numa
   segunda linha, desalinhada do resto. */
html body .cl-precos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 620px) {
  html body .cl-precos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html body .cl-preco-op { padding: 11px 6px; }
html body .cl-preco-op .cl-op-val { font-size: 19px; }
html body .cl-preco-op .cl-op-tit { font-size: 11.5px; }
html body .cl-preco-op .cl-op-un { font-size: 10.5px; }
html body .cl-selo-melhor { font-size: 9px; padding: 2px 7px; }

/* um bloco por par */
html body .cl-par {
  background: var(--cl-card); border: 1px solid var(--cl-line);
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
html body .cl-par-tit {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--cl-ink3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px;
}
html body .cl-par-nome {
  font-size: 13.5px; font-weight: 700; color: var(--cl-ink);
  text-transform: none; letter-spacing: 0;
}

/* Dois cartões por linha no celular: a foto fica grande o bastante para
   reconhecer o personagem de relance, que é o que decide a escolha. */
/* UM cartão por vez no celular, como a landing de referência: a foto ocupa
   a largura toda e o cliente vê um modelo de cada vez conforme rola. Em
   quatro colunas de 85px nenhum personagem era reconhecível. */
html body .cl-par-mods {
  display: grid; grid-template-columns: 1fr;
  gap: 12px; margin-bottom: 14px;
}
@media (min-width: 620px) {
  /* tela larga comporta dois lado a lado sem encolher a foto */
  html body .cl-par-mods { grid-template-columns: repeat(2, 1fr); }
}
/* O ITEM é a moldura (cartão + grade de tamanhos dentro dele); o botão
   fica sem borda própria para os dois parecerem uma peça só. */
html body .cl-par-item {
  background: var(--cl-card); border: 2px solid var(--cl-line);
  border-radius: 18px; overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
html body .cl-par-item.is-on {
  border-color: var(--cl-azul); box-shadow: 0 0 0 3px #1890c021;
}
html body .cl-par-mod {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 12px; cursor: pointer; text-align: center;
  background: transparent; border: 0; border-radius: 0;
}
html body .cl-par-mod-foto {
  display: block; aspect-ratio: 4 / 3; background: var(--cl-bg-soft, #16293A);
  border-radius: 14px; overflow: hidden;
}
html body .cl-par-mod-foto img { width: 100%; height: 100%; object-fit: contain; }
html body .cl-par-mod-nome {
  font-size: 18px; font-weight: 800; color: var(--cl-ink); line-height: 1.2;
}
/* “Escolher” / “Escolhido”: a ação fica explícita no cartão, em vez de
   o cliente ter de adivinhar que a foto é clicável. */
html body .cl-par-mod-acao {
  display: block; padding: 11px 14px; border-radius: 999px;
  border: 1.5px solid var(--cl-line); color: var(--cl-ink2);
  font-size: 14.5px; font-weight: 700;
}
html body .cl-par-mod.is-on .cl-par-mod-acao {
  background: var(--cl-azul); border-color: var(--cl-azul); color: #fff;
}
html body .cl-par-item:hover { border-color: var(--cl-azul-l); }
html body .cl-par-mod.is-on .cl-par-mod-nome { color: var(--cl-azul); }


html body .cl-par-tams { display: flex; flex-wrap: wrap; gap: 5px; }
html body .cl-par-tam {
  min-width: 38px; padding: 7px 9px; cursor: pointer;
  background: var(--cl-azul-soft); color: var(--cl-ink);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
}
html body .cl-par-tam:hover { border-color: var(--cl-azul); }
html body .cl-par-tam.is-on {
  background: var(--cl-azul); color: #fff; border-color: var(--cl-azul);
}

/* resumo do que foi montado */
html body .cl-resumo { margin-bottom: 12px; }
html body .cl-res-linha, html body .cl-res-desc, html body .cl-res-total {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; padding: 4px 0; color: var(--cl-ink2);
}
html body .cl-res-linha em { color: var(--cl-laranja); font-style: normal; }
html body .cl-res-desc { color: var(--cl-ok); font-weight: 700; }
html body .cl-res-total {
  border-top: 1px solid var(--cl-line); margin-top: 5px; padding-top: 9px;
  font-size: 15px; color: var(--cl-ink);
}
html body .cl-res-total strong { font-size: 19px; color: var(--cl-azul); font-weight: 800; }

/* a marca no topo passou a ser imagem; a altura segura o layout enquanto
   a imagem carrega, para a página não "pular".
   Em 28/10/2026 a arte mudou: era uma FAIXA tipográfica (200x46) e virou
   uma marca quase quadrada, com o tamanco em cima e o nome embaixo. Nos
   34px de antes o "Mania" sumia, então a altura acompanha a arte nova. */
html body .cl-brand img { height: 72px; width: auto; display: block; }
@media (min-width: 900px) { html body .cl-brand img { height: 88px; } }

/* ======================================================================
   VÍDEOS DE CRIADORES (TikTok)
   Faixa que rola para o lado. O player oficial só entra ao tocar — ver
   loja.js: seis iframes de saída deixariam a página pesada.
   ====================================================================== */
html body .cl-videos {
  grid-column: 1 / -1;
  padding: 30px 0 6px;
  border-top: 1px solid var(--cl-line);
  margin-top: 8px;
}
html body .cl-videos[hidden] { display: none; }

html body .cl-videos-faixa {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 0 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}

html body .cl-video { flex: 0 0 190px; scroll-snap-align: start; }

html body .cl-video-box {
  position: relative; aspect-ratio: 9 / 16;
  background: var(--cl-azul-soft);
  border: 1px solid var(--cl-line); border-radius: 14px;
  overflow: hidden; cursor: pointer;
}
html body .cl-video-el {
  width: 100%; height: 100%; display: block;
  object-fit: cover; background: #05090E;
}

/* botão de play, antes de o vídeo carregar */
html body .cl-video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; padding: 0; color: #fff;
}
html body .cl-video-play svg {
  width: 56px; height: 56px; padding: 15px;
  border-radius: 50%; background: var(--cl-azul);
  box-shadow: 0 4px 16px #00000073;
  transition: transform .15s;
}
html body .cl-video-box:hover .cl-video-play svg { transform: scale(1.08); }
html body .cl-video.is-on .cl-video-play { display: none; }
/* o botao nao pode roubar o toque dos controles do video */
html body .cl-video-play { z-index: 2; }

/* nome do criador, dentro do cartao sobre um degrade */
html body .cl-video-autor {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 24px 10px 8px; box-sizing: border-box;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(to top, #05090EE6, #05090E00);
  pointer-events: none;
}
html body .cl-video.is-on .cl-video-autor { display: none; }



@media (min-width: 760px) {
  html body .cl-video { flex: 0 0 215px; }
  html body .cl-video-autor { font-size: 13px; }
}

/* ================================================================
   CELULAR: a ficha de produto (galeria + licença + título + estrelas)
   sai de cena. Cada modelo já tem o próprio cartão com foto grande no
   passo 2, então essa parte repetia a mesma sandália e empurrava o kit
   para baixo. No computador ela fica: lá o espaço sobra e a ficha ocupa
   a coluna ao lado.
   ================================================================ */
@media (max-width: 759px) {
  html body .cl-gallery,
  html body .cl-licenca,
  html body .cl-title,
  html body .cl-social,
  /* O preço grande e a faixa "Leve 2 por..." repetem o card do topo, que
     já mostra as quatro faixas logo acima. */
  html body .cl-price,
  html body .cl-promo { display: none; }
}

/* Grade de tamanhos, dentro do cartão do modelo escolhido. */
html body .cl-par-tambox {
  padding: 0 12px 13px; border-top: 1px solid var(--cl-line); margin-top: 2px;
}
html body .cl-par-tam-tit {
  margin: 11px 0 9px; font-size: 13.5px; font-weight: 700; color: var(--cl-ink);
}

/* Subtítulo do passo 2 e botões de montar o kit. */
html body .cl-passo-sub {
  margin: -4px 0 12px; font-size: 13.5px; color: var(--cl-ink2);
}
html body .cl-add-par {
  display: block; width: 100%; margin-top: 4px;
  padding: 14px 16px; border-radius: 999px; cursor: pointer;
  background: var(--cl-azul-soft); border: 2px dashed var(--cl-azul);
  color: var(--cl-azul); font-size: 15px; font-weight: 800; font-family: inherit;
}
html body .cl-add-par[hidden] { display: none; }
html body .cl-add-par:hover { background: var(--cl-azul-soft); }

html body .cl-par-remover {
  margin-left: auto; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--cl-line);
  color: var(--cl-ink2); font-size: 11.5px; font-weight: 700; font-family: inherit;
}
html body .cl-par-remover:hover { border-color: var(--cl-erro); color: var(--cl-erro); }
html body .cl-par-tit { display: flex; align-items: center; gap: 8px; }

/* ==================================================================
   CARTÃO DE MODELO (formato da landing de referência): carrossel de
   fotos, selo "N× no combo", um seletor de tamanho por unidade com ×
   para remover, e "+ Repetir este modelo".
   ================================================================== */
html body .cl-mod-card {
  background: var(--cl-card); border: 2px solid var(--cl-line); border-radius: 18px;
  overflow: hidden; margin-bottom: 12px;
  transition: border-color .12s, box-shadow .12s;
}
html body .cl-mod-card.is-on {
  border-color: var(--cl-azul); box-shadow: 0 0 0 3px #1890c021;
}

html body .cl-mod-foto {
  position: relative; aspect-ratio: 4 / 3; background: var(--cl-bg-soft, #16293A);
}

/* ===== TEMA DE CORRIDA NOS CARTOES DE CARROS (31/10/2026) ==============
   O tema vem de data-tema, posto por temaDe() no loja.js a partir da
   franquia. So os Carros ganham decoracao: espalhar pista por Mickey e
   Homem-Aranha tiraria o sentido dela.
   Tudo aqui e ::before/::after sobre a MOLDURA — nenhuma regra toca a
   foto, que precisa continuar em contain para nao cortar o calcado.   */

/* A faixa xadrez e a MESMA do hero (ver .cl-hero::after): repetir o
   padrao amarra a pagina em vez de inventar um segundo vocabulario. */
html body .cl-mod-card[data-tema="carros"] .cl-mod-foto::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background:
    repeating-linear-gradient(90deg,#05090E 0 8px,#EEF4FA 8px 16px) 0 0/16px 4px,
    repeating-linear-gradient(90deg,#EEF4FA 0 8px,#05090E 8px 16px) 0 4px/16px 4px;
  background-repeat: repeat-x; z-index: 2; opacity: .85;
}

/* O patrocinador vira selo, como no para-choque: e o unico jeito de
   distinguir os dois McQueen de relance (mesmo tema, mesma franquia). */
html body .cl-mod-card[data-tema="carros"] .cl-mod-selo-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--cl-sobre-azul); background: var(--cl-azul-d);
  box-shadow: 0 1px 3px rgba(12,34,48,.25);
}
/* Rust-eze e vermelho na peca; o selo segue a cor do proprio calcado,
   senao o McQueen vermelho ganharia um cracha azul. */
html body .cl-mod-card[data-tag="RUST-EZE"] .cl-mod-selo-tag {
  /* Este selo e o UNICO de fundo escuro entre os selos: aqui quem passa e
     o BRANCO (6,54:1); o texto escuro do --cl-sobre-azul da 2,52:1. */
  background: #b3261e; color: #fff;
}

/* Realce ao entrar no kit: a borda do cartao de Carros fica com o
   amarelo Lightyear por cima do azul padrao de .is-on. */
html body .cl-mod-card[data-tema="carros"].is-on {
  border-color: var(--cl-azul);
  box-shadow: 0 0 0 3px #1890c021, inset 0 3px 0 0 var(--cl-gas);
}
html body .cl-mod-foto img {
  width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px;
  box-sizing: border-box;
}
html body .cl-mod-foto img[hidden] { display: none; }

html body .cl-mod-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--cl-campo); border: 1px solid var(--cl-line); color: var(--cl-ink);
  font-size: 19px; line-height: 1; font-family: inherit;
  display: grid; place-items: center; box-shadow: 0 2px 8px #00000059;
}
html body .cl-mod-ant { left: 9px; }
html body .cl-mod-prox { right: 9px; }
  /* Area de toque de 44px sem engordar o botao: o ::after estende a
     regiao clicavel para fora do circulo de 34px. O desenho continua o
     mesmo; o dedo e que passa a acertar. (Minimo recomendado: 44x44.) */
  html body .cl-mod-seta::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

html body .cl-mod-pontos {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; gap: 5px;
}
html body .cl-mod-ponto {
  width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF40;
}
html body .cl-mod-ponto.is-on { background: var(--cl-azul); width: 16px; border-radius: 3px; }

html body .cl-mod-corpo { padding: 12px 13px 14px; }
html body .cl-mod-topo {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
}
html body .cl-mod-nome { font-size: 18px; font-weight: 800; color: var(--cl-ink); }
html body .cl-mod-selo {
  margin-left: auto; padding: 5px 10px; border-radius: 999px;
  background: var(--cl-azul); color: #fff; font-size: 11.5px; font-weight: 800;
  white-space: nowrap;
}

/* Uma linha por unidade do modelo no kit. */
html body .cl-mod-linha {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
html body .cl-mod-tam {
  flex: 1; padding: 12px 13px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--cl-azul); background: var(--cl-azul-soft); color: var(--cl-ink);
  font-size: 14.5px; font-weight: 700; font-family: inherit;
}
html body .cl-mod-x {
  width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid var(--cl-line); color: var(--cl-ink2);
  font-size: 20px; line-height: 1; font-family: inherit;
}
html body .cl-mod-x:hover { border-color: var(--cl-erro); color: var(--cl-erro); }

/* ALINHAMENTO DOS CARTOES (28/10/2026, revisto em 29/10)
   Os cartoes abrem com o Crocs de perfil e o BICO PARA A ESQUERDA.
   Spider-Man e Mickey ja tinham essa foto; McQueen Dinoco e Toy Story abriam
   com o pe oposto, apontando para a direita.

   EXCECAO: o McQueen Vermelho (29/10/2026) so tem DUAS fotos — um perfil
   apontando para a DIREITA e uma traseira. Nao existe foto do outro pe para
   trocar, e espelhar inverteria o "95", o "Rust-eze" e o "crocs" estampados
   na peca (conferi a imagem espelhada antes de decidir). Num produto
   licenciado, texto ao contrario parece falsificacao — pior que a fileira
   desalinhada. Fica como a Crocs fotografou ate aparecer a foto do par.
   Tentei antes resolver com `transform: scaleX(-1)` e estava ERRADO: o
   espelho virava tambem o texto impresso na peca — "DINOCO", "95",
   "LIGHTYEAR" sairam ao contrario, o que num produto licenciado parece
   falsificacao. A Crocs fotografa os DOIS pes, entao a correcao e so
   escolher a foto do outro pe (crocs-mcqueen-3 e toy-story-5), que ja
   nasce virada para a esquerda com todo o texto legivel.
   A ordem das fotos esta em fonte/produtos.json; aqui nao ha regra. */


html body .cl-mod-add, html body .cl-mod-mais {
  display: block; width: 100%; padding: 13px 16px; border-radius: 999px;
  cursor: pointer; font-size: 14.5px; font-weight: 700; font-family: inherit;
}
/* Era branco com borda cinza: a acao principal de cada cartao parecia
   desligada, e com quatro cartoes lado a lado nada chamava o clique. */
/* O verde do tema escuro e claro: branco por cima da 2,52:1 e REPROVA.
   Mesma correcao do .cl-btn-buy — texto escuro, e o hover CLAREIA. */
html body .cl-mod-add {
  background: var(--cl-verde); border: 1.5px solid var(--cl-verde);
  color: var(--cl-sobre-verde);
}
html body .cl-mod-add:hover {
  background: #2BD074; border-color: #2BD074; color: var(--cl-sobre-verde);
}
html body .cl-mod-mais {
  background: var(--cl-card); border: 1.5px dashed var(--cl-azul); color: var(--cl-azul);
  margin-top: 2px;
}
html body .cl-mod-mais:hover { background: var(--cl-azul-soft); }
html body .cl-mod-add[disabled], html body .cl-mod-mais[disabled] {
  opacity: .5; cursor: default; border-style: solid;
  border-color: var(--cl-line); color: var(--cl-ink2); background: var(--cl-campo);
}
@media (min-width: 620px) {
  html body #cl-pares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  html body .cl-mod-card { margin-bottom: 0; }
}

/* O botão e o selo de frete agora vivem embaixo da foto dos quatro. */
html body .cl-hero-img .cl-hero-btn { margin-top: 14px; }
html body .cl-hero-img .cl-hero-frete { margin-top: 9px; text-align: center; }

/* ==================================================================
   RESUMO DO KIT, no formato da landing de referência: fundo escuro,
   miniatura de cada par, tamanho por extenso e × para tirar.
   ================================================================== */
/* --cl-ink virou quase BRANCO no tema escuro: usado como FUNDO aqui,
   dava painel claro com texto branco por cima. Agora e painel escuro. */
html body #cl-resumo {
  background: var(--cl-azul-soft); color: var(--cl-ink);
  border-radius: 18px; padding: 16px; margin-bottom: 14px;
}
html body .cl-res-tit {
  margin: 0 0 12px; font-size: 19px; font-weight: 800; color: #fff;
}
html body .cl-res-vazio {
  margin: 0; font-size: 14px; color: #ffffffb3; text-align: center; padding: 6px 0;
}
html body .cl-res-linha {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid #ffffff1f;
}
html body .cl-res-foto {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  object-fit: contain; background: var(--cl-card); padding: 3px; box-sizing: border-box;
}
html body .cl-res-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body .cl-res-nome { font-size: 14.5px; font-weight: 700; color: #fff; }
html body .cl-res-tam { font-size: 12.5px; color: #ffffffb3; }
html body .cl-res-tam em { font-style: normal; color: #ffb38a; }
html body .cl-res-x {
  margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: none; border: 0; color: #ffffff8c; cursor: pointer;
  font-size: 21px; line-height: 1; font-family: inherit;
}
html body .cl-res-x:hover { color: #fff; background: #ffffff1a; }

html body .cl-res-desc {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 11px 0 0; font-size: 13.5px; color: #8fe0b0;
}
html body .cl-res-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding-top: 11px; margin-top: 4px;
  border-top: 1px solid #ffffff2e;
}
html body .cl-res-total span { font-size: 15px; font-weight: 700; color: #fff; }
html body .cl-res-total strong { font-size: 25px; font-weight: 800; color: #fff; }
html body .cl-res-aviso {
  margin: 10px 0 0; font-size: 12.5px; color: #ffffffb3;
}

/* ==================================================================
   ENTRADA AO ROLAR. A classe `cl-anima` no <html> só é posta pelo JS
   quando o efeito pode rodar — sem JS, sem IntersectionObserver ou com
   "reduzir movimento" ligado, nada aqui se aplica e a página aparece
   inteira, como sempre.
   ================================================================== */
html.cl-anima .cl-surge {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
html.cl-anima .cl-surge.is-visivel { opacity: 1; transform: none; }

/* Os cartões de modelo são redesenhados a cada escolha. Depois que o
   kit começa a ser montado, eles devem aparecer na hora — esperar o
   observer faria o cartão piscar a cada clique. */
html.cl-anima .cl-montando .cl-surge { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html.cl-anima .cl-surge { opacity: 1; transform: none; transition: none; }
}

/* ==================================================================
   EFEITOS (mesmas animações da landing de referência, com as cores
   da nossa marca). Todas param com "reduzir movimento" ligado.
   ================================================================== */
@keyframes cl-pulse-cta {
  0%   { transform: scale(1);     box-shadow: 0 8px 18px #1e9e4f40; }
  50%  { transform: scale(1.015); box-shadow: 0 12px 28px #1e9e4f61; }
  100% { transform: scale(1);     box-shadow: 0 8px 18px #1e9e4f40; }
}
@keyframes cl-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes cl-pulse-scale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@keyframes cl-text-glow { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }

/* ==================================================================
   ANIMACOES QUE SE REPETIAM SEM PARAR — REMOVIDAS (31/10/2026)
   Botao pulsando, texto da urgencia piscando, selo do combo crescendo e
   encolhendo: tres animacoes `infinite` ao mesmo tempo na mesma tela.
   Movimento continuo nao chama mais atencao depois do primeiro ciclo —
   vira ruido, atrapalha quem le devagar e segura a bateria acordada.
   O que ficou e so o que responde a uma acao: :hover/:active nos
   controles, o aviso ao juntar um par (ver .cl-toast) e a entrada do
   cartao, que roda uma vez.
   Os @keyframes acima seguem definidos de proposito: nao custam nada
   sem um `animation` que os use, e um deles ainda serve a entrada.
   ================================================================== */

/* ==================================================================
   TOPO COM A FOTO NA PISTA (30/10/2026). Este bloco nasceu "TOPO SEM
   IMAGEM" e centrava tudo numa coluna de 820px. Com o McQueen recortado
   sobre o cenario, a coluna unica empilhava texto e foto e desperdicava
   metade de um monitor — o contrario da referencia, que pede texto a
   esquerda e produto a direita.
   NOTA (31/10/2026): este comentario estava sem a abertura de bloco. O
   navegador lia o texto como se fosse um seletor e DESCARTAVA as regras
   daqui ate reencontrar o proprio rumo — o h1 do celular ficava com o
   tamanho de outra regra (33px em vez de 34px) e o max-width: 40ch do
   subtitulo nunca valia. Corrigido; as quatro regras abaixo agora valem.
   ================================================================== */
html body .cl-hero h1 { font-size: 34px; line-height: 1.06; }
html body .cl-hero-sub {
  font-size: 16px; line-height: 1.6; max-width: 40ch;
  color: var(--cl-ink2); margin: 0 auto;
}
/* Em tela grande o texto fica a esquerda, junto do h1: `0 auto` centrava
   o subtitulo dentro da coluna e o descolava do titulo. */
@media (min-width: 900px) { html body .cl-hero-sub { font-size: 17px; margin-inline: 0; } }
html body .cl-hero-sub strong { color: var(--cl-azul); font-weight: 800; }
html body .cl-hero h1 em { display: block; margin-top: 2px; color: var(--cl-azul); font-style: normal; }

@media (min-width: 860px) {
  html body .cl-hero h1 { font-size: 50px; margin-inline: 0; max-width: none; }
  html body .cl-hero-sub { margin-inline: 0; }
}

/* ==================================================================
   AVISO "Ops!" — só aparece quando o cliente tenta continuar sem ter
   escolhido o tamanho de algum par.
   ================================================================== */
html body .cl-modal--aviso {
  display: grid; place-items: center; padding: 20px;
  /* escurece a página atrás: sem isto o aviso parecia só mais um card
     solto no meio da lista. */
  background: #05090ECC;
}
html body .cl-modal--aviso[hidden] { display: none; }

html body .cl-aviso-cx {
  position: relative; width: 100%; max-width: 420px;
  background: var(--cl-card); border-radius: 22px; padding: 34px 28px 28px;
  text-align: center; box-shadow: 0 24px 60px #000000A6;
  animation: cl-aviso-entra .26s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes cl-aviso-entra {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
html body .cl-aviso-x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: none; border: 0; color: var(--cl-ink2);
  font-size: 24px; line-height: 1; font-family: inherit;
}
html body .cl-aviso-x:hover { background: var(--cl-bg-soft, #16293A); color: var(--cl-ink); }

html body .cl-aviso-ico {
  display: grid; place-items: center; width: 72px; height: 72px;
  margin: 0 auto 18px; border-radius: 50%;
  background: var(--cl-erro-bg); color: var(--cl-erro);
  font-size: 34px; font-weight: 800; line-height: 1;
  border: 2px solid #f6d2d0;
}
html body .cl-aviso-cx h2 {
  margin: 0 0 10px; font-size: 27px; font-weight: 800; color: var(--cl-ink);
}
html body .cl-aviso-txt {
  margin: 0 0 24px; font-size: 15.5px; line-height: 1.55; color: var(--cl-ink2);
}
html body .cl-aviso-ok {
  display: block; width: 100%; padding: 16px; border-radius: 999px;
  font-size: 15.5px; font-weight: 800; letter-spacing: .03em;
}
@media (prefers-reduced-motion: reduce) {
  html body .cl-aviso-cx { animation: none; }
}

/* ===================================================================
   TEMA ESCURO — ACABAMENTO DAS FOTOS (31/10/2026)
   As fotos do catalogo agora tem FUNDO TRANSPARENTE (o recorte feito em
   fonte/fotos-recortadas/). Isso muda o que a moldura deve fazer: antes ela
   escondia o fundo branco do arquivo; agora ela so precisa dar um lugar
   para a peca pousar.
   Estas regras vem no FIM do arquivo de proposito — precisam vencer as
   regras antigas que pintavam a moldura de claro, e aqui a ordem resolve
   sem precisar inflar seletor.
   =================================================================== */

/* A moldura some: a peca recortada pousa direto no fundo da secao.
   Um radial discreto faz as vezes da luz do autodromo batendo no chao, e
   da aos modelos PRETOS (Mickey, pantufa do Banguela) uma borda de luz
   para eles nao se perderem no cartao escuro. */
html body .cl-main-photo,
html body .cl-ab-foto,
html body .cl-mod-foto {
  background:
    radial-gradient(60% 48% at 50% 62%, #20BDF21A 0%, transparent 72%),
    var(--cl-card);
}

/* Sombra sob a peca. drop-shadow segue o RECORTE (o contorno real do
   calcado), ao contrario de box-shadow, que seguiria o retangulo da
   moldura e daria uma sombra quadrada atras de uma peca transparente. */
/* O .cl-hero-produto NAO entra aqui: ele ja tem a sua propria sombra na
   regra de cima, e duas `filter: drop-shadow` na mesma peca empilham o
   contorno em vez de escurece-lo. */
html body .cl-main-photo img,
html body .cl-ab-card img,
html body .cl-mod-foto img {
  filter: drop-shadow(0 10px 14px #00000066);
}

/* As miniaturas ficam menores e mais escuras que a foto grande, para a
   selecionada se destacar por LUZ, e nao so pela borda azul. */
html body .cl-thumb { background: var(--cl-cream); }
html body .cl-thumb.is-on { background: var(--cl-card); border-color: var(--cl-azul); }

/* A foto do resumo e a da oferta ficam sobre painel, nao sobre o fundo. */
html body .cl-res-foto, html body .cl-of-foto, html body .cl-par-foto {
  background: var(--cl-campo);
}

/* O guia de tamanhos e uma INFOGRAFIA da Crocs: fundo branco com tabelas
   de letra miuda. Inverter ou escurecer a imagem estragaria a leitura dos
   numeros, que e justamente para o que ela serve — e e a informacao que
   evita a troca por tamanho errado.
   Em vez de mexer na imagem, ela ganha uma moldura clara PROPRIA, com um
   respiro branco em volta: fica claro que aquilo e um documento colado na
   pagina escura, e nao uma secao que esqueceram de pintar. */
html body .cl-guia-img {
  background: #fff; padding: 10px; box-sizing: border-box;
  border: 1px solid var(--cl-line);
  box-shadow: 0 10px 30px -12px #000000A6;
}

/* ===== ABERTURA: cenario de borda a borda no desktop (31/10/2026) =====
   No desktop o .cl-hero e centrado com max-width:1120px. O cenario mora
   DENTRO dele, entao em telas largas a cena de pista parava nos 1120px e
   os lados mostravam o fundo da pagina: duas barras verticais, visiveis
   justamente porque o tema e escuro e a cena tem brilho.
   Em vez de esticar o cenario com 100vw (que conta a barra de rolagem e
   criaria rolagem lateral), quem ganha a cor de ponta a ponta e o PROPRIO
   .cl-hero: ele nao tem max-width, so o conteudo interno tem. Basta ele
   nao ser mais o bloco centrado. */
@media (min-width: 860px) {
  /* ABERTURA DE BORDA A BORDA.
     Antes: .cl-hero era um bloco centrado (max-width:1120px) e a cena de
     pista, dentro dele, parava nos 1120px — em telas largas sobravam duas
     barras verticais do fundo da pagina nas laterais.
     A tentativa obvia (hero full-width + padding lateral grande + insets
     negativos na cena) NAO funciona, e vale registrar por que: num
     container GRID, o bloco de referencia de um filho `position:absolute`
     e a CAIXA DE CONTEUDO (a area das colunas), nao a caixa de padding.
     Medido: com padding de 160px as colunas davam 540px+540px+40 de gap,
     centradas, e qualquer filho absoluto com `inset:0` caia em 340->1100,
     ignorando `left:-160px`. Ate um <div> de teste limpo caiu ali.
     Solucao: o hero continua centrado e a CENA e que vaza, com a tecnica
     de full-bleed (deslocar metade da janela e devolver a largura toda).
     `100vw` inclui a barra de rolagem, mas o .cl-hero tem overflow:hidden,
     entao o excesso e cortado ali e nao cria rolagem lateral na pagina. */
  /* A cena sai do fluxo do grid. Enquanto ela era item do grid, o
     navegador lhe dava a LARGURA DA CELULA (medido: 760px tanto em 1440
     quanto em 1024, sem reagir a janela), e left/right so a deslocavam.
     `position: fixed` nao serve (rolaria junto); o que resolve e o hero
     deixar de ser o pai de grid para ela, com `display: contents` fora de
     questao. A saida simples: posicionar pela JANELA com vw, que nao
     depende da celula. O overflow:hidden do hero corta o excesso, entao
     nao nasce rolagem lateral. */
  /* A faixa xadrez do rodape do hero tem o mesmo problema que a cena: o
     hero e centrado com max-width:1120px e as margens automaticas de
     160px, entao o ::after nascia com 1120px e sobravam pontas escuras.
     Mesma tecnica de full-bleed. */
  html body .cl-hero > .cl-pista {
    grid-area: 1 / 1 / -1 / -1;
    /* O hero agora e full-width, mas tem padding lateral grande; um filho
       absoluto se mede pela caixa de CONTEUDO, entao os insets negativos
       devolvem esse padding e a cena volta a encostar nas bordas. */
    left: calc(-1 * max(24px, (100% - 1120px) / 2));
    right: calc(-1 * max(24px, (100% - 1120px) / 2));
    width: auto; max-width: none; margin-left: 0;
    /* Na vertical vale a MESMA regra do horizontal: `top/bottom: 0` param
       na caixa de CONTEUDO e deixavam 46px descobertos em cima e 45 embaixo
       (o padding vertical do hero). Em vez de repetir esses numeros aqui —
       que mudam por breakpoint e sairiam de sincronia na primeira vez que
       alguem mexesse no padding — a cena e esticada por `height`, que conta
       a caixa de PADDING inteira. */
    top: 0; bottom: 0; height: auto;
  }
}

/* ===================================================================
   DETALHES DA REFERENCIA (31/10/2026): raio nos titulos e sacola no topo.
   =================================================================== */

/* Raio amarelo depois dos titulos, como na imagem de referencia. E so
   enfeite: vem com aria-hidden no HTML, entao o leitor de tela nao anuncia
   "raio" no meio da frase. O tamanho acompanha o titulo (em), e nao um px
   fixo, para nao descolar quando o titulo encolhe no celular. */
html body .cl-raio {
  display: inline-block; margin-left: .3em; font-size: .72em;
  line-height: 1; vertical-align: .08em;
  /* o emoji ja e amarelo; o drop-shadow e o que o faz "acender" no escuro */
  filter: drop-shadow(0 0 6px #FFD44759);
}
@media (prefers-reduced-motion: reduce) { html body .cl-raio { filter: none; } }

/* Sacola do topo. Fica na ponta direita, separada do menu. */
html body .cl-top-sacola {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  color: var(--cl-ink); text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
html body .cl-top-sacola:hover, html body .cl-top-sacola:focus-visible {
  background: var(--cl-card); color: var(--cl-azul);
}

/* A peca da abertura, maior e inclinada como na referencia. A inclinacao e
   leve (nao e "deitar" a foto): so o bastante para a peca parecer entrando
   na curva, em vez de posada de lado.
   Desligada no reduzir-movimento? Nao: isto nao e animacao, e enquadramento
   — nao pisca nem se move, entao nao incomoda quem pediu menos movimento. */
@media (min-width: 860px) {
  html body .cl-hero-produto {
    max-width: 560px;
    transform: rotate(-4deg) scale(1.04);
    transform-origin: 58% 72%;
  }
}

/* No celular a peca aparecia cortada embaixo: ela e o ultimo filho do hero,
   e a margem de 42px que separa o conteudo do rodape do bloco empurrava a
   base da foto para fora do `overflow: hidden`.
   A foto da abertura nao precisa dessa folga — ela deve mesmo encostar na
   faixa quadriculada, como na referencia, onde o calcado pousa na pista. */
@media (max-width: 859px) {
  html body .cl-hero > .cl-hero-foto-box { margin-bottom: 0; }
  html body .cl-hero-produto { margin-bottom: 0; }
}

/* ===================================================================
   PECA DA ABERTURA: VOLUME E APOIO NA PISTA (31/10/2026)
   A peca estava recortada sobre a foto do circuito, mas "colada": sem
   brilho atras, sem sombra de contato e sem reflexo no asfalto molhado.
   Tres camadas resolvem, todas em CSS, sem imagem nova.
   =================================================================== */

html body .cl-hero-foto-box { position: relative; }

/* 1) HALO AZUL atras da peca — a luz do refletor passando por tras.
   Fica no ::before da caixa, atras da foto (z-index), e nao na foto, para
   nao ser cortado pelo drop-shadow dela. */
html body .cl-hero-foto-box::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 86%; aspect-ratio: 3 / 2;
  background: radial-gradient(closest-side,
    #20BDF273 0%, #20BDF233 44%, transparent 74%);
  pointer-events: none;
}

/* 2) SOMBRA DE CONTATO: a mancha escura logo abaixo da peca, que e o que
   faz o olho entender que ela esta POUSADA e nao flutuando. Elipse bem
   achatada, propositalmente mais estreita que a peca. */
html body .cl-hero-foto-box::after {
  content: ""; position: absolute; z-index: 1;
  left: 50%; bottom: 12%; transform: translateX(-50%);
  width: 58%; height: 30px;
  background: radial-gradient(closest-side, #000000A6 0%, transparent 76%);
  filter: blur(5px); pointer-events: none;
}

html body .cl-hero-produto { position: relative; z-index: 2; }

/* 3) REFLEXO no asfalto. A copia espelhada entra logo abaixo da peca,
   esmaecida e desfocada, e some para baixo com uma mascara — asfalto
   molhado reflete forte perto do objeto e nada longe dele. */
html body .cl-hero-reflexo {
  /* `top:100%` jogava a copia inteira ABAIXO da peca e ela passava 163px
     do rodape do hero, onde o overflow:hidden a cortava fora — medido.
     Agora o reflexo e ancorado pelo RODAPE da caixa e so a parte de cima
     dele aparece: e assim que reflexo em chao molhado se comporta, forte
     junto do objeto e sumindo depressa. */
  position: absolute; z-index: 1; left: 0; right: 0;
  top: auto; bottom: -34%; height: 46%;
  width: 100%; object-fit: cover; object-position: 50% 0%;
  transform: scaleY(-1);
  /* .3 ficava quase invisivel sobre o asfalto escuro da foto. .5 com menos
     desfoque le como reflexo de verdade sem competir com a peca. */
  opacity: .5; filter: blur(2px) saturate(.8) brightness(1.1);
  -webkit-mask-image: linear-gradient(to top, transparent 10%, #000 80%);
          mask-image: linear-gradient(to top, transparent 10%, #000 80%);
  pointer-events: none;
}
/* O reflexo acompanha a inclinacao da peca no desktop; sem isto ele fica
   reto embaixo de uma peca torta. */
@media (min-width: 860px) {
  html body .cl-hero-reflexo {
    transform: scaleY(-1) rotate(4deg) scale(1.04);
    transform-origin: 58% 28%;
  }
}
/* No celular o espaco abaixo da peca e a propria faixa quadriculada: o
   reflexo bateria nela. Fica so no desktop, onde ha pista embaixo. */
@media (max-width: 859px) {
  html body .cl-hero-reflexo { display: none; }
}