/* 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 {
  /* PALETA DO PRÓPRIO PRODUTO, tirada das 7 fotos do Crocs McQueen Dinoco:
     o azul Dinoco domina (#1890c0 / #18a8d8) e o laranja da logo do
     patrocinador (#d87848) é o único tom quente da peça. Nada de creme ou
     rosa — aquilo era a identidade da Combinadinhos, não a desta loja. */
  --cl-azul: #1890c0;           /* azul Dinoco, o tom médio da peça */
  --cl-azul-d: #0e6185;         /* azul escuro, para texto sobre claro */
  --cl-azul-l: #18a8d8;         /* azul claro, o brilho da peça */
  --cl-azul-soft: #e9f4fa;      /* azul lavado, para faixas e cartões */
  --cl-laranja: #d87848;        /* laranja da logo Dinoco: destaque/urgência */
  --cl-gas: #ffc107;            /* amarelo Lightyear, dos detalhes */
  /* Verde dos botoes de acao, a pedido do dono. O --cl-ok (#1e9e4f) que ja
     existia da 3,47:1 com branco e REPROVA o minimo de 4,5:1; este da
     5,02:1 e o hover 7,13:1. */
  --cl-verde: #15803d;
  --cl-verde-d: #166534;

  --cl-ink: #0c2230;            /* texto escuro, azulado como a peça */
  --cl-ink2: #3f5a69;
  --cl-ink3: #7d94a1;
  --cl-cream: #f4fafd;          /* fundo da página: azul claríssimo */
  --cl-lav: #e9f4fa;            /* faixa de seção */
  --cl-card: #ffffff;
  --cl-line: #d7e6ee;

  /* 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: #1e9e4f;
  --cl-ok-d: #188542;

  /* 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-card);
  --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.
   O fundo continua BRANCO: o "Mania" da logo e azul #1890c0 e rende 3,63:1
   no branco contra 3,24:1 no azul claro do hero. Nenhum dos dois alcanca os
   4,5:1 de texto normal, mas a logo e uma IMAGEM de marca (nao texto que o
   CSS pinte) e vem em ~40px de altura, acima dos 18,66px que valem como
   texto grande, onde o minimo e 3:1. O branco e o melhor dos dois.
   A borda de baixo e que some, para o branco escorrer no azul do topo 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. */
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 NÃO é sticky: "Sobre este produto" e "Avaliações" ocupam as duas
   colunas na linha seguinte, e a foto grudada passava por cima do texto,
   cortando as palavras e tapando o guia de tamanhos. */
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: #fff; 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 { 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: #fff; border-radius: 18px;
  padding: 16px; box-shadow: 0 6px 24px #0c223012;
}
/* 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: #fff; 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;
}
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; }

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). O verde anterior
   (--cl-ok, #1e9e4f) dava 3,47:1 com branco e REPROVAVA o minimo de 4,5:1;
   --cl-verde (#15803d) da 5,02:1 e o hover (#166534) da 7,13:1.
   O hover ESCURECE: clarear no hover ja derrubou contraste em outra loja
   desta mesma base. */
html body .cl-btn-buy { background: var(--cl-verde); color: #fff; }
html body .cl-btn-buy:hover { background: var(--cl-verde-d); }

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-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: var(--cl-radius);
  background: #000000e6; color: #fff; font-size: 14px;
  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 #c0261f26; border-color: #c0261f; }
}
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: #fff; }
html body .cl-thumb { background: #fff; }
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: #fff;
  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);
}

/* 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: #fff;
}
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: #fff; 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: #fdeaea; color: #c0261f;
  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;
  /* o halo acompanha a pulsação e faz o ponto "respirar" */
  animation: cl-pulso 1.1s ease-in-out infinite;
}
@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; }
}

html body .cl-top {
  background: var(--cl-card); border-bottom: 1px solid var(--cl-line);
  box-shadow: none;
}
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. */
  background:
    linear-gradient(180deg, var(--cl-azul-soft) 0%, #fbfdfe 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;
    max-width: 1120px; margin-inline: auto;
    padding: 46px 24px 42px; text-align: left;
  }
  /* `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; }
  /* 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;
  /* o banner agora tem fundo azul próprio; um #fff aqui vazaria nos cantos */
  background: var(--cl-azul-d, #0e6185);
}
/* 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; }
html body .cl-hero p { 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 { 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 #0c22300f; 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: #fff; }
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: #fff;
  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%;
  background: var(--cl-azul); color: #fff;
  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: #fff; 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, #f4fafd);
  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: #0c2230;
}

/* 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 #0c223033;
  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, #0c2230cc, #0c223000);
  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: #fff; 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: #c44; color: #c44; }
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: #fff; 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, #f4fafd);
}
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: #fff; 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 #0c223018;
}
html body .cl-mod-ant { left: 9px; }
html body .cl-mod-prox { right: 9px; }

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: #0c223033;
}
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: #fff; 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: #c44; color: #c44; }

/* ALINHAMENTO DOS QUATRO CARTOES (28/10/2026)
   Os quatro cartoes abrem com o Crocs de perfil e o BICO PARA A ESQUERDA.
   Spider-Man e Mickey ja tinham essa foto; McQueen e Toy Story abriam com
   o pe oposto, apontando para a direita.
   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. */
html body .cl-mod-add {
  background: var(--cl-verde); border: 1.5px solid var(--cl-verde); color: #fff;
}
html body .cl-mod-add:hover {
  background: var(--cl-verde-d); border-color: var(--cl-verde-d); color: #fff;
}
html body .cl-mod-mais {
  background: #fff; 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: #fff;
}
@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.
   ================================================================== */
html body #cl-resumo {
  background: var(--cl-ink, #0c2230); color: #fff;
  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: #fff; 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; } }

/* Botões de compra respirando — é o que puxa o olho para a ação. */
html body #cl-abrir, html body #cl-buy {
  animation: cl-pulse-cta 2.4s ease-in-out infinite;
}
/* A bolinha da urgência já pisca com `cl-pulso`, lá em cima — não
   duplicamos aqui. */
/* O texto da urgência acompanha, mais discreto. */
html body .cl-urg { animation: cl-text-glow 2.6s ease-in-out infinite; }
/* O banner dos quatro flutua devagar. */
html body .cl-hero-img img { animation: cl-float-y 5.5s ease-in-out infinite; }
/* O selo "N× no combo" dá um pulo ao aparecer. */
html body .cl-mod-selo { animation: cl-pulse-scale 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html body #cl-abrir, html body #cl-buy,
  html body .cl-urg, html body .cl-urg::before,
  html body .cl-hero-img img, html body .cl-mod-selo { animation: none; }
}

/* ==================================================================
   TOPO SEM IMAGEM: a headline carrega a primeira tela sozinha, entao
   cresce e ganha respiro. O card de precos sobe junto.
   (A foto dos quatro modelos chegou a entrar aqui em 28/10/2026 e saiu
   no mesmo dia, a pedido do dono. Sem ela a coluna unica volta a ser o
   certo: duas colunas com um lado vazio ficam piores que uma centrada.)
   ================================================================== */
html body .cl-hero h1 { font-size: 36px; line-height: 1.08; }
html body .cl-hero-sub { font-size: 16px; line-height: 1.6; max-width: 40ch; margin-inline: auto; }
html body .cl-hero-sub strong { color: var(--cl-azul); font-weight: 800; }
html body .cl-hero h1 em { display: block; margin-top: 4px; }

@media (min-width: 860px) {
  /* sem a coluna da imagem, o hero volta a ser uma coluna so e centrada */
  html body .cl-hero { grid-template-columns: 1fr; text-align: center; max-width: 820px; }
  html body .cl-hero h1 { font-size: 46px; margin-inline: auto; }
  html body .cl-hero-sub { margin-inline: auto; }
  html body .cl-hero-card { margin-inline: auto; }
}

/* ==================================================================
   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: #0c2230a6;
}
html body .cl-modal--aviso[hidden] { display: none; }

html body .cl-aviso-cx {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border-radius: 22px; padding: 34px 28px 28px;
  text-align: center; box-shadow: 0 24px 60px #0c223033;
  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, #f4fafd); 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: #fdeaea; color: #c0261f;
  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; }
}