/* ==========================================================================
   Clube dos Sneakers — camada por cima do CSS original da Droper (droper-css/).
   1. O que a Droper faz por JavaScript (hover-shadow, ripple, entrada).
   2. Polimento pelas regras da skill ui-profissional (tipografia, botões, foco,
      feedback, skeleton, overlays) — moderno e suave, sem trocar a cara da Droper.
   3. Responsividade: desktop ≥ 961 · tablet 601–960 · celular ≤ 600.
   ========================================================================== */

:root {
  --clube-ease: cubic-bezier(.22, 1, .36, 1);     /* saída suave para entradas e gavetas */
  --clube-rapido: .16s;                            /* tempo da Droper nos cards */
  --clube-foco: 0 0 0 3px rgba(74, 97, 223, .35);  /* anel de foco: --secondary-color a 35% */
  --clube-sombra-hover: rgba(0, 0, 0, .25) 0 8px 24px -16px;  /* medida na Droper */
  --clube-sombra-flutuante: 0 4px 12px rgb(0 0 0 / .08), 0 16px 40px rgb(0 0 0 / .12);
  --clube-header-mobile: 72px;
}
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- 1. Comportamentos da Droper ---------- */
[hover-shadow] { transition: transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease; }
@media (hover: hover) { [hover-shadow]:hover { transform: translateY(-2px); box-shadow: var(--clube-sombra-hover); } }
[ripple] { overflow: hidden; position: relative; }
.clube-ripple { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, .1); transform: scale(0); animation: clube-ripple .5s ease-out forwards; pointer-events: none; }
.md-button-buy .clube-ripple, .clube-hero__btn .clube-ripple { background: rgba(255, 255, 255, .25); }
.md-raised .clube-ripple { background: rgba(0, 0, 0, .1); }
@keyframes clube-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes clube-goUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.entra { animation: clube-goUp .6s var(--clube-ease) both; }

/* entrada ao rolar: seções sobem com fade; cards entram em cascata (JS marca .is-visivel) */
[data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--clube-ease), transform .6s var(--clube-ease); }
[data-revelar].is-visivel { opacity: 1; transform: none; }
[data-revelar] .clube-card-wrap { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--clube-ease), transform .5s var(--clube-ease); transition-delay: calc(var(--i, 0) * 45ms); }
[data-revelar].is-visivel .clube-card-wrap { opacity: 1; transform: none; }

/* ---------- 2. Polimento ---------- */
/* Tipografia: texto grande com −2% de espaçamento e altura de linha 1,1–1,2 */
.ck-title, .ck-card-subheader { letter-spacing: -.02em; }
.ck-title { line-height: 1.15; }
.clube-titulo-xl { letter-spacing: -.03em; line-height: 1.05; }
.clube-pdp__titulo { letter-spacing: -.02em; line-height: 1.15 !important; }
.clube-pdp__preco, .clube-numero { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.clube-pix { color: var(--black-2); font-weight: 700; }

/* Foco visível em tudo que é clicável (teclado), nunca no clique do mouse */
a:focus-visible, button:focus-visible, [role="radio"]:focus-visible, input:focus-visible { outline: none; box-shadow: var(--clube-foco) !important; border-radius: 10px; }
.ck-card-dropv2:focus-within { box-shadow: var(--clube-foco); }
#ck-toolbarv2--search:focus-within { box-shadow: var(--clube-foco); }

/* Card de produto: nome escurece no hover do card (signifier), foto cresce 3% */
.clube-card-wrap { width: 240px; min-width: 240px; scroll-snap-align: start; }
.ck-card-dropv2 .clube-card-nome { color: var(--black-2); transition: color var(--clube-rapido) ease; }
.ck-card-dropv2 .ck-card-dropv2--img { transition: transform .5s var(--clube-ease), opacity .4s ease; }
@media (hover: hover) {
  .ck-card-dropv2:hover .clube-card-nome { color: #000; }
  .ck-card-dropv2:hover .ck-card-dropv2--img { transform: scale(1.03); }
}
.ck-card-dropv2:active { transform: translateY(0) scale(.99); }

/* Fotos recortadas (PNG com alfa) no lugar das fotos com fundo branco da Droper */
.ck-card-dropv2--img.clube-recorte { width: 86%; height: 86%; left: 7%; top: 4%; object-fit: contain; }
.clube-chip-img { object-fit: contain; padding: 14px 6px 0; }
.clube-marca { object-fit: contain; padding: 13px; }

/* Skeleton enquanto a foto carrega (placeHolderShimmer da Droper) */
.clube-skel { background: linear-gradient(90deg, #f3f3f3 0%, #fafafa 40%, #f3f3f3 80%); background-size: 1600px 100%; animation: clube-brilho 1.4s linear infinite; }
.clube-skel.is-carregado { animation: none; background: transparent; }
.clube-skel img { opacity: 0; transition: opacity .4s ease; }
.clube-skel.is-carregado img { opacity: 1; }
.ck-card-dropv2 .clube-skel { border-radius: 0 0 20px 20px; }
@keyframes clube-brilho { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } }

/* Vitrines: encaixe ao rolar + setas no desktop + borda que esmaece */
.clube-carrossel { position: relative; }
.clube-trilho { scroll-snap-type: x mandatory; scroll-padding-left: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.clube-trilho::-webkit-scrollbar { display: none; }
.clube-seta { position: absolute; top: calc(50% - 22px); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #111; box-shadow: var(--clube-sombra-flutuante); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(.92); transition: opacity .25s ease, transform .25s var(--clube-ease), background-color .16s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.clube-seta--esq { left: 14px; } .clube-seta--dir { right: 14px; }
.clube-seta:hover { background: #fff; } .clube-seta:active { transform: scale(.9); }
.clube-seta[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) and (min-width: 961px) { .clube-carrossel:hover .clube-seta { opacity: 1; transform: scale(1); } }
.clube-vitrine-topo { padding-right: 4px; }
.clube-ver-todos { color: var(--black-3); white-space: nowrap; }
.clube-ver-todos .material-icons { transition: transform var(--clube-rapido) ease; }
.clube-ver-todos:hover .material-icons { transform: translateX(3px); }

/* Botões: lateral = 2× vertical, estados padrão / hover / pressionado / foco */
.md-button-buy { border-radius: 12px !important; transition: background-color var(--clube-rapido) ease, transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease !important; }
.clube-btn-comprar:hover { background-color: #1c1c1c !important; box-shadow: var(--clube-sombra-hover); }
.clube-btn-sacola:hover { background-color: #ececee !important; }
.md-button-buy:active { transform: scale(.98); }
.md-button-buy.is-ok { background-color: var(--success-color) !important; color: #fff !important; }

/* Tamanhos: selecionado anima, esgotado fica claramente inativo */
.produto-tamanhov2-button { transition: background-color var(--clube-rapido) ease, color var(--clube-rapido) ease, transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease !important; }
.produto-tamanhov2-button--selected { animation: clube-pulo .28s var(--clube-ease); }
.produto-tamanhov2-button--disabled { opacity: .5; cursor: not-allowed !important; }
.produto-tamanhov2-button--disabled .produto-tamanhov2-button__titulo { text-decoration: line-through; }
@keyframes clube-pulo { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
.clube-tam-preco { font-variant-numeric: tabular-nums; }

/* Favoritar: coração preenche com um pulo */
.clube-fav.is-ativo md-icon { color: var(--like-color); animation: clube-pulo .3s var(--clube-ease); }

/* Miniaturas e variantes: ativa com contorno */
.clube-miniaturas .avatar-square.is-ativa, .clube-variantes a.is-ativa { box-shadow: 0 0 0 2px var(--black-2) inset; }
.clube-pdp__foto img { transition: opacity .25s ease; }

/* Abas do histórico */
.clube-aba { border: 0; background: transparent; padding: 6px 12px; border-radius: 20px; color: var(--black-3); transition: background-color var(--clube-rapido) ease, color var(--clube-rapido) ease; }
.clube-aba:hover { background: var(--grey-2); }
.clube-aba.is-ativa { background: var(--grey-2); color: var(--black-1); }
.clube-grafico { display: block; width: 100%; height: 300px; }

/* Sacola no header: contador com pulo */
.clube-sacola-ic { position: relative; display: inline-flex; }
.clube-contador { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--secondary-color); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.clube-contador.is-pulo { animation: clube-pulo .35s var(--clube-ease); }

/* Aviso ("Adicionado à sacola ✓") que sobe da base */
.clube-aviso { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; border-radius: 14px; background: #111; color: #fff; font: 500 14px/20px Roboto, sans-serif; box-shadow: var(--clube-sombra-flutuante); transition: opacity .3s ease, transform .4s var(--clube-ease); }
.clube-aviso .material-icons { color: #4ade80; font-size: 20px; }
.clube-aviso a { color: #fff; font-weight: 700; margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.clube-aviso.is-visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Hero: na Droper o título vem desenhado no banner; aqui é HTML no mesmo lugar e escala */
.clube-hero { position: relative; transition: transform 1.2s var(--clube-ease); }
.clube-hero-moldura:hover .clube-hero { transform: scale(1.015); }
.clube-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25) 48%, transparent 70%); }
.clube-hero__texto { position: absolute; left: 3.3%; top: 18%; color: #fff; font-family: Roboto, sans-serif; }
.clube-hero__texto h1 { font-size: clamp(24px, 2.4vw, 40px); font-weight: 500; margin: 0; line-height: 1.12; letter-spacing: -.02em; }
.clube-hero__texto p { font-size: clamp(16px, 1.75vw, 28px); font-weight: 400; margin: 4px 0 24px; color: #fff; opacity: .9; letter-spacing: -.01em; }
.clube-hero__btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #000; text-decoration: none; font-size: 15px; font-weight: 500; line-height: 20px; padding: 12px 24px; border-radius: 10px; transition: transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease; }
.clube-hero__btn:hover { transform: translateY(-2px); box-shadow: var(--clube-sombra-hover); }
.clube-hero__btn .material-icons { font-size: 20px; transition: transform var(--clube-rapido) ease; }
.clube-hero__btn:hover .material-icons { transform: translateX(3px); }
.clube-hero__texto small { display: block; margin-top: clamp(24px, 5vw, 80px); font-size: 12px; font-weight: 500; letter-spacing: .04em; opacity: .85; }

/* Banners de coleção: gradiente só atrás do título (nada de escurecer a foto toda) */
.clube-colecao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); pointer-events: none; }
.clube-colecao > h2 { position: relative; z-index: 1; }
.clube-colecao { transition: background-size .8s var(--clube-ease); }
.clube-ver-colecao .material-icons { transition: transform var(--clube-rapido) ease; }
.clube-colecao:hover .clube-ver-colecao .material-icons { transform: translateX(3px); }

/* Rodapé */
.media-footer a, .media-footer a:visited { color: #fff !important; text-decoration: none; transition: opacity var(--clube-rapido) ease; }
.media-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.clube-rodape-base { gap: 16px; flex-wrap: wrap; }

/* Elementos só do celular, escondidos no desktop */
.clube-barra-inferior, .clube-barra-compra { display: none; }

/* ---------- 3. Responsividade ---------- */

/* Tablet e celular (≤ 960) */
@media (max-width: 960px) {
  /* produto: uma coluna */
  .clube-pdp { flex-direction: column !important; padding: 0 !important; }
  .clube-pdp > .flex_50 { max-width: 100% !important; flex: 1 1 100% !important; width: 100%; box-sizing: border-box; }
  .clube-pdp__galeria { padding: 0 10px; }
  .clube-pdp__info { padding: 16px 16px 0 !important; }
  .clube-pdp__titulo { font-size: 28px !important; margin-top: 8px !important; padding-right: 0 !important; }
  .clube-pdp__preco { font-size: 40px !important; }
  .clube-sobre { flex-direction: column !important; }
  .clube-sobre__texto { max-width: 100% !important; flex: 1 1 100% !important; }
  .clube-garantias { flex-direction: column !important; gap: 32px !important; padding: 28px 24px !important; }
  .clube-garantias > .flex_33 { max-width: 100% !important; flex: 1 1 100% !important; }
  .clube-aval { flex-wrap: wrap !important; gap: 24px !important; }
  .clube-aval .clube-divisor { display: none; }
  .clube-aval__nums { flex: 1 1 100% !important; gap: 24px !important; flex-wrap: wrap; }
  .clube-hero__texto { top: auto; bottom: 9%; left: 20px; right: 20px; }
  .clube-hero::before { background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.2) 55%, transparent 75%); }
  .clube-rodape-cols { flex-wrap: wrap; gap: 32px 24px; }
  .clube-rodape-cols > * { flex: 1 1 calc(50% - 24px); }
  .clube-rodape-marca { align-items: flex-start !important; }
}

/* Celular (≤ 600): header da Droper no app + barra inferior + barra de compra */
@media (max-width: 600px) {
  :root { --clube-gutter: 16px; }

  /* header: ver bloco HEADER no fim do arquivo */

  /* home */
  .ck-slider--home__aspectratio.clube-hero-moldura { aspect-ratio: 4 / 5 !important; width: calc(100% - 16px) !important; border-radius: 20px !important; margin: 0 auto !important; }
  .clube-hero { background-position: 62% center !important; }
  .clube-hero__texto h1 { font-size: 28px; }
  .clube-hero__texto p { font-size: 18px; margin-bottom: 20px; }
  .clube-hero__btn { padding: 12px 20px; }
  .clube-categorias { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px; overflow: visible !important; margin-top: 12px !important; }
  .clube-categorias .chips-v2 { aspect-ratio: auto !important; min-width: 0 !important; margin: 0 !important; flex-direction: row !important; justify-content: flex-start !important; height: 72px; padding: 0 12px 0 6px !important; gap: 8px; }
  .clube-secoes { gap: 24px !important; }
  .ck-title { font-size: 22px !important; }
  .clube-card-wrap { width: 168px; min-width: 168px; }
  .ck-card-dropv2--cabecalho { height: 68px !important; max-height: 68px !important; padding: 0 10px !important; }
  .ck-card-dropv2--cabecalho .clube-card-nome { font-size: 13px !important; line-height: 18px !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; max-height: 54px; }
  .ck-card-dropv2--cabecalho .fs20 { font-size: 17px !important; }
  .clube-autent { padding-left: 20px !important; padding-right: 20px !important; }
  .ck-card-multiple-drops-link { aspect-ratio: 4 / 3 !important; }

  /* produto */
  .clube-migalha { font-size: 13px !important; }
  .clube-pdp__titulo { font-size: 24px !important; }
  .clube-pdp__preco { font-size: 34px !important; }
  .clube-tamanhos li { flex: 0 0 25% !important; max-width: 25% !important; }
  .clube-tamanhos .produto-tamanhov2-button { min-height: 64px; }
  .clube-pdp__compra { display: none !important; }        /* vai para a barra fixa */
  .ck-card-drop--spacing { margin-left: 8px !important; margin-right: 8px !important; width: calc(100% - 16px) !important; padding: 20px 16px !important; box-sizing: border-box; }
  .clube-sobre__dados > .flex_33 { flex: 0 0 50% !important; max-width: 50% !important; }
  .clube-sobre__dados, .clube-sobre__texto { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
  .clube-garantias > .ck-card { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; gap: 12px !important; }
  .clube-garantias .mb15 { margin-bottom: 0 !important; }
  .clube-pdp__marca .md-button span.ml5 { display: none; }      /* ações viram só ícone, com aria-label */
  .clube-pdp__marca .md-button { min-width: 44px !important; padding: 0 10px !important; }
  .clube-grafico text { display: none; }
  .clube-grafico { height: 180px; }
  .clube-abas { gap: 2px !important; }

  /* rodapé */
  .clube-rodape-cols > * { flex: 1 1 100%; }
  .clube-rodape-base { flex-direction: column; }
  .media-footer { padding-bottom: 110px !important; }

  /* barra inferior em vidro (padrão do app da Droper) */
  .clube-barra-inferior { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; height: 64px; border-radius: 22px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255, 255, 255, .5); box-shadow: var(--clube-sombra-flutuante); justify-content: space-around; align-items: center; padding: 0 4px; }
  .clube-barra-inferior__item { flex: 1; min-width: 44px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--black-4); text-decoration: none; font: 500 11px/14px Roboto, sans-serif; border-radius: 14px; transition: color var(--clube-rapido) ease, background-color var(--clube-rapido) ease; }
  .clube-barra-inferior__item .material-icons { font-size: 24px; }
  .clube-barra-inferior__item.is-ativo { color: #000; }
  .clube-barra-inferior__item:active { background: rgba(0, 0, 0, .05); }
  .clube-aviso { bottom: calc(92px + env(safe-area-inset-bottom)); width: calc(100% - 32px); box-sizing: border-box; justify-content: flex-start; }
  .clube-aviso a { margin-left: auto; }

  /* produto: barra de compra fixa no lugar da barra inferior */
  .pg-produto .clube-barra-inferior { display: none; }
  .pg-produto .clube-barra-compra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 12px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-top: 1px solid rgba(0, 0, 0, .06); }
  .clube-barra-compra__preco { display: flex; flex-direction: column; line-height: 1.2; font-family: Roboto, sans-serif; }
  .clube-barra-compra__preco span { font-size: 12px; color: var(--black-4); }
  .clube-barra-compra__preco strong { font-size: 20px; color: #000; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .clube-barra-compra .md-button-buy { flex: 1; height: 52px !important; min-height: 52px !important; margin: 0 !important; font-size: 16px !important; }
  .pg-produto .clube-aviso { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Quem pede menos movimento no sistema não recebe animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-revelar], [data-revelar] .clube-card-wrap { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   HEADER — completo ≥ 1100 px · hambúrguer + gaveta abaixo disso
   Alvos de toque ≥ 44 px; ícone do tamanho da linha (24 px); ghost buttons no menu.
   ========================================================================== */
#ck-toolbarv2 { gap: 4px; padding-left: 8px !important; padding-right: 8px !important; justify-content: flex-start !important; }
.clube-hdr-logo { height: 44px; padding: 0 10px; border-radius: 10px; flex: none; }
.clube-hdr-logo img { height: 24px; display: block; }
.clube-hdr-menu { flex: 1 1 auto; min-width: 0; gap: 2px; }
.clube-hdr-menu .md-button { color: #fff !important; border-radius: 10px !important; height: 40px; min-height: 40px !important; line-height: 40px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: .14px; transition: background-color var(--clube-rapido) ease !important; }
.clube-hdr-menu .md-button:hover { background: rgba(255, 255, 255, .1) !important; }
.clube-hdr-busca { flex: 0 1 300px; min-width: 200px; width: auto !important; height: 38px !important; margin: 0 4px 0 auto !important; border-radius: 10px !important; transition: box-shadow var(--clube-rapido) ease, flex-basis .3s var(--clube-ease); }
.clube-hdr-busca:focus-within { flex-basis: 380px; }
.clube-hdr-busca input { font-size: 15px; line-height: 24px; min-width: 0; text-overflow: ellipsis; }
.clube-hdr-acao { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 10px; color: #fff !important; text-decoration: none; font: 500 14px/20px Roboto, sans-serif; letter-spacing: .14px; transition: background-color var(--clube-rapido) ease; }
.clube-hdr-acao:hover { background: rgba(255, 255, 255, .1); }
.clube-hdr-acao .material-icons { font-size: 22px; }
.clube-hdr-hamb { display: none; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; align-items: center; justify-content: center; transition: background-color var(--clube-rapido) ease; }
.clube-hdr-hamb:hover { background: rgba(255, 255, 255, .1); }
.clube-hamb { position: relative; width: 20px; height: 14px; display: block; }
.clube-hamb i { position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, width .3s ease; }
.clube-hamb i:nth-child(1) { top: 0; } .clube-hamb i:nth-child(2) { top: 6px; width: 14px; } .clube-hamb i:nth-child(3) { top: 12px; }
.clube-hdr-hamb:hover .clube-hamb i:nth-child(2) { width: 20px; }
.clube-hdr-hamb[aria-expanded="true"] .clube-hamb i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.clube-hdr-hamb[aria-expanded="true"] .clube-hamb i:nth-child(2) { opacity: 0; }
.clube-hdr-hamb[aria-expanded="true"] .clube-hamb i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Entre 1100 e 1279: menu completo, busca mais curta, ações só com ícone */
@media (max-width: 1279px) and (min-width: 1100px) {
  .clube-hdr-busca { flex-basis: 240px; }
  .clube-hdr-acao .clube-rotulo { display: none; }
  .clube-hdr-acao { width: 44px; padding: 0; justify-content: center; }
}

/* Abaixo de 1100: hambúrguer, logo, busca que estica, ações em ícone */
@media (max-width: 1099px) {
  .clube-hdr-hamb { display: inline-flex; }
  .clube-hdr-menu { display: none !important; }
  .clube-hdr-logo { padding: 0 6px; }
  .clube-hdr-busca { flex: 1 1 auto; max-width: 520px; margin-left: auto !important; }
  .clube-hdr-busca:focus-within { flex-basis: auto; }
  .clube-hdr-acao .clube-rotulo { display: none; }
  .clube-hdr-acao { width: 44px; padding: 0; justify-content: center; }
}

/* Celular: uma linha só — hambúrguer · logo · busca · sacola */
@media (max-width: 600px) {
  #ck-toolbarv2 { top: 8px !important; width: calc(100% - 16px) !important; height: 56px !important; min-height: 56px !important; padding: 0 6px !important; gap: 2px; border-radius: 18px !important; }
  #ck-toolbarv2--space { height: 72px !important; display: block !important; }
  .clube-hdr-logo img { height: 22px; }
  .clube-hdr-busca { min-width: 0; height: 40px !important; margin: 0 2px 0 4px !important; border-radius: 12px !important; max-width: none; }
  .clube-hdr-busca input { font-size: 16px; }   /* 16px evita o zoom automático do iPhone */
  .clube-hdr-acao--entrar, .clube-hdr-acao--sem-mobile { display: none; }  /* conta e sacola ficam na barra inferior */
}

/* Gaveta lateral */
.clube-menu-fundo { position: fixed; inset: 0; z-index: 98; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s cubic-bezier(.4, 0, .2, 1); }
.clube-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 99; width: min(360px, 88vw); display: flex; flex-direction: column; background: #fff; color: var(--black-1); border-top-right-radius: 20px; border-bottom-right-radius: 20px; box-shadow: var(--clube-sombra-flutuante); transform: translateX(-104%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); font-family: Roboto, sans-serif; overscroll-behavior: contain; }
.clube-menu-fundo.is-aberto { opacity: 1; }
.clube-menu.is-aberto { transform: none; }
body.clube-menu-aberto { overflow: hidden; }
.clube-menu__topo { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--grey-2); flex: none; }
.clube-menu__logo { height: 24px; display: block; }
.clube-menu__fechar { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--background-droper); color: var(--black-1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--clube-rapido) ease, transform var(--clube-rapido) ease; }
.clube-menu__fechar:hover { background: var(--grey-2); } .clube-menu__fechar:active { transform: scale(.94); }
.clube-menu__corpo { flex: 1; overflow-y: auto; padding: 16px 12px 24px; }
.clube-menu__conta { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 16px; background: var(--background-droper); color: inherit; text-decoration: none; transition: background-color var(--clube-rapido) ease; }
.clube-menu__conta:hover { background: var(--grey-2); }
.clube-menu__conta > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.clube-menu__conta b { font-size: 15px; font-weight: 700; line-height: 20px; }
.clube-menu__conta small { font-size: 13px; color: var(--black-4); line-height: 18px; }
.clube-menu__avatar { width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.clube-menu__rotulo { margin: 20px 12px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--black-5); }
.clube-menu__lista { display: flex; flex-direction: column; }
.clube-menu__item { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 12px; border-radius: 12px; color: var(--black-1); text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: -.01em; transition: background-color var(--clube-rapido) ease; }
.clube-menu__item:hover, .clube-menu__item:focus-visible { background: var(--background-droper); }
.clube-menu__item > .material-icons:first-child { font-size: 22px; color: var(--black-3); }
.clube-menu__item span { flex: 1; }
.clube-menu__seta { font-size: 20px; color: var(--black-6); transition: transform var(--clube-rapido) ease; }
.clube-menu__item:hover .clube-menu__seta { transform: translateX(3px); color: var(--black-3); }
.clube-menu__marcas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 4px; }
.clube-menu__marca { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; background: var(--background-droper); color: var(--black-2); text-decoration: none; font-size: 12px; font-weight: 500; transition: transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease; }
.clube-menu__marca:hover { transform: translateY(-2px); box-shadow: var(--clube-sombra-hover); }
.clube-menu__marca img { width: 26px; height: 26px; }
.clube-menu__ajuda { display: flex; flex-direction: column; padding: 0 12px; }
.clube-menu__ajuda a { padding: 10px 0; color: var(--black-3); text-decoration: none; font-size: 15px; transition: color var(--clube-rapido) ease; }
.clube-menu__ajuda a:hover { color: #000; }
.clube-menu__base { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--grey-2); font-size: 11px; letter-spacing: .3em; color: var(--black-5); }
.clube-menu__wordmark { height: 16px; }
/* itens entram em cascata quando a gaveta abre */
.clube-menu .clube-menu__item, .clube-menu .clube-menu__conta, .clube-menu .clube-menu__marca { opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .35s var(--clube-ease), background-color var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease; transition-delay: calc(var(--i, 0) * 30ms + 80ms); }
.clube-menu.is-aberto .clube-menu__item, .clube-menu.is-aberto .clube-menu__conta, .clube-menu.is-aberto .clube-menu__marca { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .clube-menu .clube-menu__item, .clube-menu .clube-menu__conta, .clube-menu .clube-menu__marca { opacity: 1; transform: none; } }

/* todos os itens do menu na mesma linha de base (o Express tem ícone) */
.clube-hdr-menu .md-button { display: inline-flex !important; align-items: center; justify-content: center; }


/* ==========================================================================
   CATEGORIAS — nome com respiro: a foto ocupa o alto, o nome fica 14 px acima da borda
   ========================================================================== */
.clube-categorias { padding: 0 10px; box-sizing: border-box; gap: 10px; }
.clube-categorias .chips-v2 { margin: 0 !important; padding: 10px 10px 14px !important; justify-content: space-between !important; gap: 8px; }
.clube-chip-foto { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.clube-chip-foto .clube-chip-img { width: 100% !important; height: 100%; aspect-ratio: auto !important; padding: 6px 4px 0 !important; transition: transform .5s var(--clube-ease); }
@media (hover: hover) { .clube-categorias .chips-v2:hover .clube-chip-img { transform: scale(1.05); } }
.clube-chip-nome { font-size: 13px !important; line-height: 18px !important; letter-spacing: -.01em; margin: 0 !important; color: var(--black-1) !important; }

/* ==========================================================================
   FAIXA DE MARCAS — divisor natural entre seções + carrossel contínuo
   ========================================================================== */
.clube-faixa-marcas { width: 100%; max-width: 2000px; margin: 24px auto 8px; box-sizing: border-box; background: #fff; border-top: 1px solid #ececee; border-bottom: 1px solid #ececee; padding: 18px 0 20px; }
.clube-faixa-marcas__topo { display: flex; align-items: center; gap: 14px; padding: 0 20px 14px; }
.clube-faixa-marcas__rotulo { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--black-2); }
.clube-faixa-marcas__legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--black-4); }
.clube-faixa-marcas__topo .clube-ver-todos { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }

.clube-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.clube-marquee__trilho { display: flex; width: max-content; gap: 28px; padding: 6px 14px; animation: clube-marquee 45s linear infinite; }
.clube-marquee:hover .clube-marquee__trilho, .clube-marquee:focus-within .clube-marquee__trilho { animation-play-state: paused; }
@keyframes clube-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 14px)); } }

.clube-marca-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; flex: none; text-decoration: none; color: var(--black-2); border-radius: 16px; outline-offset: 4px; }
.clube-marca-anel { position: relative; display: block; width: 72px; height: 72px; border-radius: 50%; padding: 3px; box-sizing: border-box; background: transparent; transition: transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease; }
.clube-marca-circulo { width: 100%; height: 100%; border-radius: 50%; background: var(--background-droper); display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #ececee; }
.clube-marca-circulo img { width: 56%; height: 56%; object-fit: contain; filter: grayscale(1); opacity: .9; transition: filter .25s ease, opacity .25s ease, transform .25s var(--clube-ease); }
.clube-marca-nome { font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; transition: color var(--clube-rapido) ease; }
@media (hover: hover) {
  .clube-marca-item:hover .clube-marca-anel { transform: translateY(-2px); box-shadow: var(--clube-sombra-hover); }
  .clube-marca-item:hover .clube-marca-circulo img { filter: none; opacity: 1; transform: scale(1.06); }
  .clube-marca-item:hover .clube-marca-nome { color: #000; }
}

/* Marca em alta: anel vermelho-alaranjado + brilho que pulsa devagar + selo HOT */
.clube-marca-item.is-hot .clube-marca-anel { background: conic-gradient(from 210deg, #ff2d17, #ff5a00, #ff9500, #ff5a00, #ff2d17); animation: clube-hot-brilho 2.8s ease-out infinite; }
.clube-marca-item.is-hot .clube-marca-circulo { border: 2px solid #fff; background: #fff; }
.clube-marca-item.is-hot .clube-marca-circulo img { filter: none; opacity: 1; }
@keyframes clube-hot-brilho { 0% { box-shadow: 0 0 0 0 rgba(255, 74, 0, .35); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 74, 0, 0); } }
.clube-hot { display: inline-flex; align-items: center; gap: 1px; height: 18px; padding: 0 7px 0 4px; border-radius: 9px; background: linear-gradient(90deg, #ff2d17, #ff6a00); color: #fff; font: 700 10px/18px Roboto, sans-serif; letter-spacing: .06em; box-sizing: border-box; white-space: nowrap; }
.clube-hot .material-icons { font-size: 13px; }
.clube-marca-anel .clube-hot { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 2px solid #fff; height: 20px; line-height: 16px; box-shadow: 0 2px 6px rgba(255, 74, 0, .35); }
.clube-hot--mini { height: 18px; }

/* Celular */
@media (max-width: 600px) {
  .clube-categorias { padding: 0 8px; }
  .clube-categorias .chips-v2 { padding: 0 12px 0 6px !important; justify-content: flex-start !important; gap: 10px; }
  .clube-chip-foto { flex: none; width: 64px; height: 56px; }
  .clube-chip-foto .clube-chip-img { padding: 0 !important; }
  .clube-chip-nome { font-size: 14px !important; text-align: left !important; white-space: normal !important; }
  .clube-faixa-marcas { margin: 20px 0 4px; padding: 14px 0 16px; }
  .clube-faixa-marcas__topo { padding: 0 16px 12px; flex-wrap: wrap; row-gap: 4px; }
  .clube-faixa-marcas__legenda { order: 3; flex-basis: 100%; font-size: 12px; }
  .clube-marquee__trilho { gap: 18px; animation-duration: 35s; }
  .clube-marca-item { width: 72px; }
  .clube-marca-anel { width: 62px; height: 62px; }
}

/* Menos movimento: carrossel parado, rolagem manual */
@media (prefers-reduced-motion: reduce) {
  .clube-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .clube-marquee__trilho { animation: none; }
  .clube-marca-item[aria-hidden="true"] { display: none; }
  .clube-marca-item.is-hot .clube-marca-anel { animation: none; }
}

/* respiro entre o selo HOT (que sai 7 px do anel) e o nome */
.clube-marca-item { gap: 14px; }


/* ==========================================================================
   RODAPÉ — estrutura da Droper + UI/UX
   ========================================================================== */
.clube-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clube-rodape .media-footer { padding: 56px 0 32px !important; }
.clube-rodape__caixa { max-width: 1220px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.clube-rodape__grade { display: grid; grid-template-columns: 1.25fr .9fr 1.05fr 1.75fr auto; gap: 32px; align-items: start; }
.clube-rodape .media-footer h2.clube-rodape__titulo { margin: 0 0 16px; font: 700 18px/24px Roboto, sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-align: left; }
.clube-rodape .media-footer h2.clube-rodape__titulo--espaco { margin-top: 36px; }
.clube-rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.clube-rodape__lista a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; line-height: 20px; color: #bdbdbd !important; text-decoration: none; transition: color var(--clube-rapido) ease; }
.clube-rodape__lista a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.clube-rodape p { text-align: left; }

.clube-rodape__news { display: flex; align-items: center; height: 48px; padding: 0 4px 0 16px; border-radius: 12px; background: #161616; border: 1px solid #2a2a2a; max-width: 320px; transition: border-color var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease; }
.clube-rodape__news:focus-within { border-color: #4a61df; box-shadow: 0 0 0 3px rgba(74, 97, 223, .3); }
.clube-rodape__news.is-erro { border-color: var(--danger-color); }
.clube-rodape__news input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: 400 15px/20px Roboto, sans-serif; }
.clube-rodape__news input::placeholder { color: #777; }
.clube-rodape__news button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 9px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--clube-rapido) ease, background-color var(--clube-rapido) ease; }
.clube-rodape__news button:hover { background: #e6e6e6; } .clube-rodape__news button:active { transform: scale(.94); }
.clube-rodape__news button .material-icons { font-size: 20px; transition: transform var(--clube-rapido) ease; }
.clube-rodape__news button:hover .material-icons { transform: translateX(2px); }
.clube-rodape__news-msg { margin: 8px 0 0 !important; min-height: 18px; font-size: 13px !important; line-height: 18px; color: #9e9e9e; }
.clube-rodape__news-msg.is-ok { color: #4ade80; } .clube-rodape__news-msg.is-erro { color: #f87171; }

.clube-rodape__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.clube-rodape__social a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cor); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform var(--clube-rapido) ease, box-shadow var(--clube-rapido) ease, filter var(--clube-rapido) ease; }
.clube-rodape__social a[style*="#000"] { background: #1c1c1c; }
.clube-rodape__social a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 20px -10px var(--cor); filter: brightness(1.08); }
.clube-rodape__social svg { width: 19px; height: 19px; }
.clube-rodape__pagamento { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.clube-rodape__pagamento li { width: 48px; height: 30px; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.clube-rodape__pagamento li svg { width: 24px; height: 24px; }
.clube-rodape__boleto { width: auto !important; padding: 0 8px; gap: 4px; color: #111; font: 700 11px/1 Roboto, sans-serif; }
.clube-rodape__boleto .material-icons { font-size: 16px; }
.clube-rodape__nota { margin: 12px 0 0 !important; font-size: 13px !important; line-height: 18px; color: #9e9e9e; }
.clube-rodape__marca img { width: 132px; display: block; transition: opacity var(--clube-rapido) ease; }
.clube-rodape__marca a:hover img { opacity: .85; }

.clube-rodape__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.clube-rodape__base-esq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clube-rodape__idioma, .clube-rodape__topo { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #e6e6e6; font: 500 14px/20px Roboto, sans-serif; cursor: pointer; transition: background-color var(--clube-rapido) ease, color var(--clube-rapido) ease; }
.clube-rodape__idioma:hover, .clube-rodape__topo:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.clube-rodape__topo .material-icons { font-size: 18px; transition: transform var(--clube-rapido) ease; }
.clube-rodape__topo:hover .material-icons { transform: translateY(-2px); }
.clube-rodape__bandeira { width: 20px; height: 14px; border-radius: 2px; background: #009c3b; position: relative; overflow: hidden; flex: none; }
.clube-rodape__bandeira::before { content: ""; position: absolute; inset: 2px 3px; background: #ffdf00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.clube-rodape__bandeira::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #002776; left: 7px; top: 4px; }
.clube-rodape__copy { margin: 0 !important; font-size: 13px !important; line-height: 20px; color: #9e9e9e; }

/* tablet: 2 colunas, marca em cima */
@media (max-width: 960px) {
  .clube-rodape__grade { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .clube-rodape__marca { grid-row: 1; grid-column: 1 / -1; }
}
/* celular: links com 44 px de toque, colunas de links lado a lado */
@media (max-width: 600px) {
  .clube-rodape .media-footer { padding: 40px 0 120px !important; }
  .clube-rodape__caixa { padding: 0 20px; }
  .clube-rodape__grade { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .clube-rodape__col--largo { grid-column: 1 / -1; }
  .clube-rodape .media-footer h2.clube-rodape__titulo { font-size: 16px; margin-bottom: 8px; }
  .clube-rodape__lista a { min-height: 44px; }
  .clube-rodape__news { max-width: none; }
  .clube-rodape__base { flex-direction: column-reverse; align-items: flex-start; margin-top: 36px; }
}

/* base do menu hambúrguer: só o logo, maior */
.clube-menu__base { justify-content: flex-start !important; }
.clube-menu__wordmark { height: 26px !important; }

/* desktop: 6 redes e 6 meios de pagamento em uma linha cada */
@media (min-width: 961px) { .clube-rodape__social { gap: 8px; flex-wrap: nowrap; } .clube-rodape__social a { width: 38px; height: 38px; } .clube-rodape__pagamento { gap: 6px; flex-wrap: nowrap; } .clube-rodape__pagamento li { width: 44px; } .clube-rodape__boleto { width: auto !important; } }

/* ==========================================================================
   Auditoria de 02/10/2026: alvos de toque de 44 px e rodapé entre 961 e 1100 px
   ========================================================================== */
/* rodapé: com 5 colunas não cabe o logo até ~1040 px; o logo sobe para a primeira linha */
@media (min-width: 961px) and (max-width: 1100px) {
  .clube-rodape__grade { grid-template-columns: 1.25fr .9fr 1.05fr 1.75fr; }
  .clube-rodape__marca { grid-row: 1; grid-column: 1 / -1; }
}
/* setas do carrossel só existem com mouse (no toque, o trilho rola com o dedo e elas ficavam invisíveis, mas clicáveis) */
@media (max-width: 960px), (hover: none) { .clube-seta { display: none; } }
@media (max-width: 600px) {
  .clube-pular { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .clube-hdr-busca { height: 44px !important; }
  .clube-hdr-busca form, .clube-hdr-busca input { height: 100%; }
  .clube-hdr-busca .buscarv5-search-btn { width: 44px !important; height: 44px !important; min-width: 44px; margin: 0 !important; }
  .clube-ver-todos, .clube-vitrine-topo .ck-link { min-height: 44px; display: inline-flex; align-items: center; }
  .clube-rodape__news { height: 52px; }
  .clube-rodape__news input { height: 100%; }
  .clube-rodape__news button { width: 44px; height: 44px; }
  .clube-rodape__social a { width: 44px; height: 44px; }
  .clube-rodape__idioma, .clube-rodape__topo { height: 44px; }
  .clube-chip-marca { height: 44px; }
  .clube-btn--escuro { height: 44px; }
  .clube-ck-rodape a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* controles pequenos no desenho ganham área de toque invisível de 44 px */
.clube-cupom, .clube-aba, .clube-link-btn, .clube-item__remover { position: relative; }
@media (max-width: 600px) {
  .clube-cupom::after, .clube-aba::after, .clube-link-btn::after, .clube-item__remover::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* ==========================================================================
   Carrossel com arraste (Embla), inclusive no PC — 02/10/2026
   Mesmo recurso do REPZ, Retrobox e catalogodemantos, no visual da Droper: cursor de mão, cards que não
   "pulam" durante o arraste, setas sobre o trilho no desktop e uma barra fina de posição no lugar dos pontos.
   ========================================================================== */
.clube-trilho { display: block !important; scroll-snap-type: none; padding-right: 0 !important; }
.clube-trilho__fila { display: flex; align-items: flex-start; touch-action: pan-y pinch-zoom; will-change: transform; }
.clube-trilho__fila > .clube-card-wrap { flex: none; }
.clube-trilho.is-nativo { overflow-x: auto !important; scroll-snap-type: x mandatory; }
.clube-trilho.is-embla { cursor: grab; }
.clube-trilho.is-arrastando { cursor: grabbing; }
.clube-trilho.is-arrastando [hover-shadow], .clube-trilho.is-arrastando [hover-shadow]:hover { transform: none !important; box-shadow: none !important; }
.clube-trilho img { -webkit-user-drag: none; user-select: none; }
.clube-carrossel__progresso { position: relative; height: 3px; margin: 6px 20px 0; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.clube-carrossel__progresso span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px; background: #111; transition: width .2s ease; }
.clube-carrossel.is-cabe .clube-carrossel__progresso { visibility: hidden; }
.ck-card-multiple-drops .clube-carrossel__progresso { background: rgba(255, 255, 255, .16); margin-bottom: 8px; }
.ck-card-multiple-drops .clube-carrossel__progresso span { background: #fff; }
@media (min-width: 961px) { .clube-carrossel__progresso { max-width: 240px; margin-left: 20px; } }
@media (max-width: 600px) { .clube-carrossel__progresso { margin: 4px 16px 0; } }