/*
 * ck-components.css — esqueleto criado na Story 1.17 (epic-001 Bloco 3), nome definitivo.
 * Carregado por último, depois de css/style-bayrrow.css, ck-tokens.css e ck-base.css, nas 11
 * páginas da loja.
 *
 * Decisão de escopo tomada na Story 1.19 (Bloco 4, Fundação do Redesign): as regras de
 * componentes canônicos do frontend-spec.md §4.4 (card de produto), §4.5 (header) e §4.6
 * (footer) NÃO foram aplicadas aqui. Elas têm como alvo seletores JÁ usados no HTML ao vivo
 * (`.produto_item`, `.foto_produto`, `.titulo_produto`, `.preco_produto`) — carregadas depois
 * do CSS legado, mudariam a renderização imediatamente em produção, o que contradiz a AC-chave
 * da 1.19 ("zero mudança visual perceptível nesta story"). Essa é, deliberadamente, a mudança
 * visual real do redesign — pertence às Ondas do Bloco 5 (Stories 1.22+), story por story,
 * com verificação visual explícita, não à fundação aditiva. O CSS pronto já existe em
 * frontend-spec.md §4.4/§4.5/§4.6 para quando essas stories chegarem.
 */

/*
 * Story 1.21 (2026-07-31, epic-001 Bloco 4): substitui o chunking em PHP dos carrosséis
 * (`.carousel` + `.carousel-item` fatiados a cada N produtos por `$limite_cadeia_*`) por
 * `.ck-prod-rail`. O número de itens visíveis por vez passa a ser função da largura real da
 * tela, não mais de `Mobile_Detect` — mas permanece **sempre uma única linha deslizável**,
 * nunca quebra em grade estática de várias linhas.
 *
 * Implementado em flexbox: a primeira versão (commit c9fa8e9, mesma story) usava
 * `display:grid; grid-auto-flow:column` — em produção o `display:grid` computava
 * corretamente (confirmado via inspeção do DOM ao vivo), e ainda assim os itens empilhavam,
 * sem explicação de cascata encontrada em nenhuma folha de estilo carregada na página.
 * Trocado para flexbox por ser tecnologia já usada em toda esta base de código (`.row` do
 * Bootstrap é flex) e mais simples de raciocinar/depurar visualmente que grid-auto-flow.
 *
 * SUBSTITUI o fix pontual de 2026-07-31 (commit dd867be) que fazia uma versão simplificada
 * disso com `flex-basis` percentual sobre o `.row`/`.carousel-item` do Bootstrap — aquele
 * patch ad-hoc já tinha ficado redundante com a primeira versão desta regra (Task 2b).
 *
 * Revisão (2026-07-31, mesmo dia, após o usuário ver o resultado ao vivo): a versão anterior
 * desta regra quebrava em grade completa de 6 colunas a partir de 1200px (per
 * frontend-spec.md §4.4, "vira grade sem rolagem"). O usuário viu isso ao vivo e preferiu
 * manter a mecânica de carrossel deslizante — nunca quebrar em várias linhas, com setas de
 * Anterior/Próximo (adicionadas via `js/ck-prod-rail.js`, já que o Bootstrap Carousel foi
 * removido junto com o chunking em PHP). Removida a regra `@media (min-width:1200px)` que
 * ativava `flex-wrap:wrap`.
 */
.ck-prod-rail {
   display: flex !important;
   flex-wrap: nowrap !important;
   /*
    * justify-content:flex-start sobrescreve um `center` legado que vem de `.lista_produto`
    * (classe presente em TODOS os rails, produto e categoria). Num flex container com overflow
    * e justify-content:center, o navegador centraliza a linha inteira de itens — metade do
    * transbordo fica à esquerda, fora de alcance por scroll (scrollLeft:0 já mostra o "meio" da
    * fileira). Ficava mais visível em "Categorias em destaque" (2026-08-01, feedback do
    * usuário) por ter 51 itens (bem mais que qualquer rail de produto), mas o mesmo bug
    * afetava todos os rails em graus variados — corrigido para todos de uma vez aqui.
    */
   justify-content: flex-start !important;
   overflow-x: auto;
   gap: 12px;
   scroll-snap-type: x mandatory; scroll-padding-inline: 48px;
   -webkit-overflow-scrolling: touch; scrollbar-width: none;
   padding-bottom: 8px;
   /*
    * Onda "disposição de slides" (2026-08-01): antes desta regra o rail não tinha respiro
    * lateral nenhum — o primeiro/último card ficava colado na borda do container e por baixo
    * das setas .ck-prod-rail-prev/-next (que ficam a left/right:4px do wrap), dando a
    * sensação de carrossel "vazando"/cortado que o usuário reportou. padding-inline abre esse
    * respiro; as setas (posicionadas relativas ao -wrap, não a este elemento) passam a flutuar
    * sobre essa margem vazia em vez de sobre o conteúdo do card.
    */
   padding-inline: 48px;
}
.ck-prod-rail > * {
   flex: 0 0 42vw !important;
   width: 42vw !important;
   max-width: 42vw !important;
   scroll-snap-align: start;
   box-sizing: border-box;
}
@media (min-width: 768px) {
   .ck-prod-rail > * { flex-basis: 24vw !important; width: 24vw !important; max-width: 24vw !important; }
}
@media (min-width: 1200px) {
   /*
    * Cap fixo de 240px além do percentual: sem isso, em monitores muito largos (o container
    * pode passar de 1800-2000px), 20% de largura ainda resultava em cards de 350-400px+,
    * bem maiores que o card original (237px, style-bayrrow.css). max-width em px é um limite
    * duro (a spec de flexbox sempre respeita max-width, mesmo com flex-shrink:0) — cards
    * crescem até 20% do container, mas nunca passam de 240px.
    */
   .ck-prod-rail > * {
      flex-basis: calc(20% - 10px) !important;
      width: calc(20% - 10px) !important;
      max-width: 240px !important;
   }
}

/*
 * Mecânica de encaixe do card dentro da nova prateleira (não é redesign do card — cores,
 * tipografia e espaçamento interno do `.produto_item` continuam os mesmos; só a largura,
 * que antes era fixa em 237px (style-bayrrow.css), passa a preencher a coluna).
 *
 * Só `.produto_item` entra aqui — ele é um card ANINHADO um nível dentro do item flex real
 * (uma <div> sem classe em index.php, ou dentro de `.col-md-3` em produto.php/prestador.php),
 * então precisa preencher 100% do próprio pai (que já está corretamente dimensionado pela
 * regra `.ck-prod-rail > *` abaixo). `.col-md-2`/`.col-md-3` NÃO entram aqui — em index.php,
 * `.col-md-2` (categoria) É o próprio item flex direto do rail; dar-lhe width:100% aqui tinha
 * especificidade maior que `.ck-prod-rail > *` e sobrescrevia o limite de 42vw/24vw/240px,
 * fazendo os cards de categoria ocuparem a prateleira inteira em vez do tamanho pretendido
 * (achado do usuário, 2026-07-31). Mesma lógica vale para `.col-md-3`.
 */
.ck-prod-rail .produto_item {
   width: 100% !important;
   max-width: 100% !important;
}

/*
 * Setas de Anterior/Próximo (js/ck-prod-rail.js insere estes elementos via JS, envolvendo
 * cada .ck-prod-rail num .ck-prod-rail-wrap na hora do carregamento da página).
 */
.ck-prod-rail-wrap {
   position: relative;
}
.ck-prod-rail-prev,
.ck-prod-rail-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid var(--ck-line);
   background: var(--ck-surface);
   box-shadow: var(--ck-shadow-2);
   color: var(--ck-ink);
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background ease 0.2s, color ease 0.2s;
}
.ck-prod-rail-prev:hover,
.ck-prod-rail-next:hover {
   background: var(--ck-brand);
   color: #fff;
   border-color: var(--ck-brand);
}
/*
 * left/right:4px (posicionadas em relação ao .ck-prod-rail-wrap, não ao .ck-prod-rail — que
 * agora tem padding-inline:48px) fazem as setas flutuarem dentro desse respiro novo, sobre
 * fundo vazio, em vez de por cima do conteúdo do primeiro/último card.
 */
.ck-prod-rail-prev { left: 4px; }
.ck-prod-rail-next { right: 4px; }

/*
 * Story 1.22 Task 1 (2026-07-31, epic-001 Bloco 5, AC1): header em "3 faixas" de
 * frontend-spec.md §4.5, aplicado por cima das classes já existentes em `inc/menu.php`
 * (include compartilhado por 11 páginas — index.php, produto.php, prestador.php, loja.php,
 * carrinho.php, vender.php, historico.php, lista_desejos.php, listar_prestadores.php,
 * listar_especialidades.php, finaliza_pedido_comprar_agora.php).
 *
 * Achado desta story (corrige a AC1 tal como redigida): não existe, na estrutura real do
 * arquivo, uma "faixa utilitária (CEP/entrega)" como banda visual separada — isso era uma
 * suposição do frontend-spec.md §4.5, marcada lá como [PENDENTE] (baseada numa cópia inline
 * não verificada em finalizar.php). O que existe de fato é um ícone de entrega/CEP como
 * dropdown (`#dropdnCep`) dentro da própria faixa principal. Construir uma 4ª faixa dedicada
 * exigiria markup PHP novo num include de 11 páginas — fora do escopo "CSS-only, reaproveitando
 * classes existentes" desta task, e um invento não pedido por nenhum dado/fonte real (Artigo
 * IV da Constitution). Decisão tomada com o dono do projeto, 2026-07-31: mapear as 3 faixas
 * para o que existe de verdade —
 *   Faixa 1: `.hdr-content.hdr-content-sticky` — versão condensada (logo + ícones), já
 *            funcional via tema (`js/app.js` THEME.header.stickyHeaderInit + `.has-sticky`
 *            no <body>); aqui só recebe reforço visual, sem tocar no mecanismo de exibição.
 *   Faixa 2: `.hdr-content` (sem `.hdr-content-sticky`) — faixa principal completa
 *            (logo + busca + ícones de conta/lista de desejos/carrinho, com o dropdown de
 *            CEP embutido).
 *   Faixa 3: `#menu-2 .hdr-nav` (a instância REAL — o `#menu-2` existe duplicado no arquivo;
 *            a primeira ocorrência é markup morto, com todo o nav dentro de comentário HTML;
 *            `.hdr-nav`/`.mmenu` só existem no DOM na segunda ocorrência, então o seletor
 *            aninhado já discrimina as duas sem precisar tocar no PHP nem no id duplicado,
 *            que fica fora do escopo desta task).
 */
.hdr-content:not(.hdr-content-sticky) {
   border-bottom: 1px solid var(--ck-line);
}
.hdr-content.hdr-content-sticky {
   border-bottom: 1px solid var(--ck-line);
   box-shadow: var(--ck-shadow-1);
}
#menu-2 .hdr-nav {
   border-top: 1px solid var(--ck-line);
}

/*
 * Mobile (AC1): a faixa de categorias vira scroll horizontal em vez de ficar só dentro do
 * menu hambúrguer. Breakpoint usado é 1024px (o mesmo de `.hide-mobile`/`.show-mobile` já
 * definido em style-bayrrow.css), não 768px como o texto da AC1 sugeria — usar um breakpoint
 * novo e diferente do resto do tema criaria uma faixa de largura (768-1024px) com
 * comportamento inconsistente entre esta faixa e o restante da navegação mobile.
 * `!important` necessário para vencer `.hide-mobile { display:none !important; }` (mesma
 * técnica, especificidade maior + ordem de carregamento depois do CSS legado).
 */
@media (max-width: 1024px) {
   #menu-2 .hdr-nav.hide-mobile {
      display: flex !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }
   #menu-2 .hdr-nav.hide-mobile > .mmenu {
      display: flex !important;
      flex-wrap: nowrap;
      white-space: nowrap;
   }
}

/*
 * Story 1.22 Task 2 (2026-07-31, epic-001 Bloco 5, AC2): card de produto canônico, CSS de
 * frontend-spec.md §4.4 aplicado sobre a MESMA árvore DOM que o PHP já emite em `index.php`
 * (`.produto_item > .foto_produto > img` + `.titulo_produto` + `.preco_produto`), sem nenhuma
 * mudança de PHP. Este é o card reusado, sem retrabalho, pelas Stories 1.23 (produto.php) e
 * 1.24 (loja.php) — as três páginas carregam este mesmo `css/ck-components.css`.
 *
 * `!important` necessário em `.foto_produto img` e em `.titulo_produto`/`.preco_produto`
 * porque o CSS legado (style-bayrrow.css) define, respectivamente, `height`/`max-height`
 * inline no próprio `<img>` (via PHP) e `color` com `!important` nessas duas classes —
 * mesma técnica de sobrescrita já usada na Story 1.21.
 *
 * `.ck-prod-rail .produto_item { width/max-width:100% }` da Story 1.21 continua valendo (mais
 * específico, carregado antes destas regras) — controla a LARGURA do card dentro da
 * prateleira; as regras abaixo cuidam do conteúdo interno (cores, tipografia, foto, preço).
 */
.produto_item {
   position: relative;
   display: flex;
   flex-direction: column;
   background: var(--ck-surface);
   border: 1px solid var(--ck-line);
   border-radius: var(--ck-r-md);
   padding: 12px;
   height: 100%;
   transition: box-shadow .18s ease, border-color .18s ease;
}
.produto_item:hover,
.produto_item:focus-within {
   box-shadow: var(--ck-shadow-2);
   border-color: transparent;
}

.foto_produto {
   aspect-ratio: 1 / 1;
   display: grid;
   place-items: center;
   margin-bottom: 10px;
   overflow: hidden;
}
.foto_produto img {
   max-width: 100% !important;
   max-height: 100% !important;
   width: auto !important;
   height: auto !important;
   object-fit: contain;
}

.titulo_produto {
   color: var(--ck-ink-2) !important;
   font-size: var(--ck-fs-sm);
   line-height: var(--ck-lh-base);
   min-height: 2.8em;
}

.preco_produto {
   color: var(--ck-ink) !important;
   margin-top: auto;
}
.preco_produto .promo-price {
   font-size: var(--ck-fs-sm);
   color: var(--ck-ink-3);
   text-decoration: line-through;
   display: block;
}
.preco_produto .price {
   font-size: var(--ck-fs-price);
   font-weight: 700;
   color: var(--ck-ink);
   margin: 2px 0 0;
}
/*
 * Onda "disposição de slides" (2026-08-01, inspirado no selo de desconto sobre a foto da
 * Worten.pt): o PHP continua emitindo este badge no mesmo lugar de sempre (dentro de
 * .preco_produto, ao lado do preço riscado) — nenhuma mudança de PHP foi necessária. Só a
 * posição CSS muda: position:absolute o tira do fluxo normal e o ancora a 10px do topo/
 * esquerda de .produto_item (que agora é position:relative), pousando visualmente sobre o
 * canto da foto, já que .foto_produto é sempre o primeiro elemento do card. Cor trocada de
 * --ck-fresh (verde, semanticamente "frescor/em estoque") para --ck-sale (vermelho), que o
 * ck-tokens.css já definia especificamente como "selo de desconto" mas nunca tinha sido usado.
 */
.produto_item .badge-success {
   position: absolute;
   top: 10px;
   left: 10px;
   z-index: 2;
   background: var(--ck-sale);
   color: #fff;
   border-radius: var(--ck-r-pill);
   font-size: var(--ck-fs-xs);
   font-weight: 700;
   padding: 3px 9px;
   box-shadow: var(--ck-shadow-1);
}

/*
 * Ícone de favoritar (canto superior direito da foto) e faixa "Ver e comprar" (rodapé do
 * card) — Onda "disposição de slides" (2026-08-01), inspirados no coração + botão "Adicionar"
 * da Worten.pt. Ambos ficam DENTRO do mesmo <a> que já envolvia o card inteiro (nenhuma
 * reestruturação do link foi feita, para não arriscar HTML de âncoras aninhadas em 20 blocos
 * PHP repetidos numa página em produção) — por isso são <span>, não <a>: cliques neles apenas
 * seguem o link do card para produto.php, como qualquer outro clique no card já fazia. O rótulo
 * "Ver e comprar" (em vez de "Adicionar ao carrinho") é deliberado, para não prometer uma ação
 * de carrinho instantânea que este componente não executa.
 */
.produto_item .ck-prod-fav {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 2;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--ck-surface);
   color: var(--ck-ink-3);
   box-shadow: var(--ck-shadow-1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}
.produto_item:hover .ck-prod-fav {
   color: var(--ck-sale);
}
.produto_item .ck-prod-cart-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin-top: 10px;
   padding: 8px 10px;
   border-radius: var(--ck-r-sm);
   border: 1px solid var(--ck-brand);
   color: var(--ck-brand);
   font-size: var(--ck-fs-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .02em;
   transition: background .18s ease, color .18s ease;
}
.produto_item:hover .ck-prod-cart-cta {
   background: var(--ck-brand);
   color: #fff;
}

/*
 * Prateleira de categorias (index.php, "Categorias em destaque") — Onda "disposição de
 * slides" (2026-08-01), inspirada nos ícones circulares de categoria da paodeacucar.com.
 * Escopado por .ck-cat-rail (classe nova, só nesta div em index.php) e não por .prod_cat
 * puro porque essa classe também é usada no dropdown "Compre por departamento" do
 * inc/menu.php, compartilhado pelas 11 páginas — estilizar .prod_cat direto vazaria para o
 * menu inteiro do site.
 */
.ck-cat-rail .prod_cat {
   border-radius: 50%;
   aspect-ratio: 1 / 1;
   width: 96px !important;
   max-width: 96px !important;
   height: 96px;
   object-fit: cover;
   background: var(--ck-surface-2);
   border: 1px solid var(--ck-line);
   padding: 14px;
   box-sizing: border-box;
}

/*
 * Banner principal (index.php, #carouselExampleControls_BANNER) — Onda "disposição de
 * slides" (2026-08-01), inspirado no banner com moldura/setas circulares/dots da
 * paodeacucar.com. ID já é único a index.php (confirmado via grep antes desta mudança), então
 * nenhum escopo extra é necessário — estas regras não afetam nenhuma outra página.
 */
#carouselExampleControls_BANNER {
   border-radius: var(--ck-r-lg);
   overflow: hidden;
   box-shadow: var(--ck-shadow-2);
}
#carouselExampleControls_BANNER .carousel-control-prev,
#carouselExampleControls_BANNER .carousel-control-next {
   width: 44px;
   height: 44px;
   top: 50%;
   bottom: auto;
   transform: translateY(-50%);
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.9);
   box-shadow: var(--ck-shadow-2);
   opacity: 1;
}
#carouselExampleControls_BANNER .carousel-control-prev { left: 16px; }
#carouselExampleControls_BANNER .carousel-control-next { right: 16px; }
#carouselExampleControls_BANNER .carousel-control-prev-icon,
#carouselExampleControls_BANNER .carousel-control-next-icon {
   width: 18px;
   height: 18px;
   filter: invert(1) grayscale(1) brightness(0.3);
}
#carouselExampleControls_BANNER .carousel-indicators {
   margin-bottom: 10px;
}
#carouselExampleControls_BANNER .carousel-indicators li {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   border: none;
   margin: 0 4px;
}
#carouselExampleControls_BANNER .carousel-indicators li.active {
   background: #fff;
   width: 22px;
   border-radius: var(--ck-r-pill);
}

/*
 * Conter a largura das prateleiras de produto/categoria (2026-08-01, feedback do usuário
 * vendo a home ao vivo: "na Worten ele deixa no máximo uns 80% da largura", depois ajustado
 * para 90%). Este tema NÃO tem, em nenhum lugar do site, um `.container` de fato centralizado
 * com gutters simétricos — não havia nenhuma largura "contida" pré-existente para reaproveitar.
 *
 * `.categoria_exibicao_produto` (o título de cada prateleira) e `.ck-prod-rail-wrap` (criado
 * por js/ck-prod-rail.js) são usados em várias páginas fora das 4 com este redesign
 * (carrinho.php, vender.php, historico.php, lista_desejos.php, listar_prestadores.php,
 * listar_especialidades.php), então esta regra precisa de escopo.
 *
 * Escopo é `body.ck-redesign` (2026-08-02), NÃO `.ck-redesign` no `.page-content` como nas
 * primeiras versões desta regra — motivo: `produto.php` (e provavelmente `prestador.php`)
 * têm um bug de HTML pré-existente (grid Bootstrap mal aninhado dentro do buy-box/galeria,
 * já documentado e deliberadamente não tocado — ver `produto.php` por volta da linha 1259,
 * "R12" no gap table do frontend-spec) que fecha `</div>` demais e faz `.page-content` terminar
 * cedo demais no DOM real — confirmado comparando o HTML realmente renderizado (`curl`) com o
 * DOM ao vivo: a maioria dos rails da página ficava, na prática, IRMÃ de `.page-content`, não
 * descendente. `<body>` não sofre desse problema (navegadores sempre mantêm todo o conteúdo
 * dentro do `<body>`, mesmo com `<div>`s desbalanceados), por isso a classe `ck-redesign` foi
 * movida pra lá.
 *
 * Também cobre as duas convenções de marcação encontradas: `index.php` usa
 * `class="categoria_exibicao_produto"`, enquanto `produto.php`/`prestador.php`/`loja.php` usam
 * `id="categoria_exibicao_produto"` (mesmo nome, seletor CSS diferente) — daí o segundo
 * seletor com `#`.
 */
@media (min-width: 768px) {
   /*
    * !important necessário aqui: seções aninhadas dentro do `.holder` do banner (ex.:
    * "Categorias em destaque" no index.php) perdem para alguma regra legada mais específica/
    * !important de style-bayrrow.css que fixa a largura de containers dentro de `.holder`.
    */
   body.ck-redesign .categoria_exibicao_produto,
   body.ck-redesign #categoria_exibicao_produto,
   body.ck-redesign .ck-prod-rail-wrap {
      width: 90% !important;
      max-width: 1600px !important;
      margin-top: 20px !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }
}

/*
 * Só o texto do título "Categorias em destaque" escondido a pedido do usuário (2026-08-01) —
 * o rail de ícones abaixo continua visível/funcional, só o rótulo em si some.
 * .ck-cat-title, classe nova em index.php/produto.php/prestador.php.
 */
.ck-cat-title {
   display: none !important;
}

/*
 * Com o título escondido (regra acima), o espaço que ele ocupava entre a seção anterior e o
 * carrossel de ícones some junto — sobrava pouco respiro no topo. Compensado com margin-top no
 * wrap do rail de categorias.
 */
.ck-prod-rail-wrap:has(.ck-cat-rail) {
   margin-top: 40px;
}

/*
 * Cards de resultado de busca/filtro em loja.php (2026-08-02) — layout diferente do
 * .produto_item das outras 3 páginas (lista horizontal: foto à esquerda, texto à direita, via
 * .item_resultado/.img_resultado/.texto_resultado, não um grid). Mesmo tratamento visual
 * (selo de desconto sobre a foto, coração, hierarquia de preço, CTA de rodapé), adaptado à
 * estrutura própria desta página. Reaproveita os mesmos nomes de classe ck-prod-fav/
 * ck-prod-cart-cta usados nas outras páginas (semântica igual, escopo por ancestral diferente
 * — sem conflito). Coração e CTA ficam dentro do único <a> que já envolvia o card inteiro
 * (mesma decisão de risco das outras páginas: sem reestruturar o link em âncoras aninhadas).
 */
.item_resultado {
   position: relative;
   border-radius: var(--ck-r-md);
   transition: box-shadow .18s ease;
}
.item_resultado:hover {
   box-shadow: var(--ck-shadow-2) !important;
}
.item_resultado .ck-badge-desc {
   position: absolute;
   top: 10px;
   left: 10px;
   z-index: 2;
   background: var(--ck-sale);
   color: #fff;
   border-radius: var(--ck-r-pill);
   font-size: var(--ck-fs-xs);
   font-weight: 700;
   padding: 3px 9px;
   box-shadow: var(--ck-shadow-1);
}
.item_resultado .ck-prod-fav {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 2;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--ck-surface);
   color: var(--ck-ink-3);
   box-shadow: var(--ck-shadow-1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}
.item_resultado:hover .ck-prod-fav {
   color: var(--ck-sale);
}
.item_resultado .ck-preco-antigo {
   display: block;
   font-size: var(--ck-fs-sm);
   color: var(--ck-ink-3);
   text-decoration: line-through;
}
.item_resultado .ck-preco-atual {
   margin: 2px 0 0;
   font-size: var(--ck-fs-price);
   font-weight: 700;
   color: var(--ck-ink);
}
/*
 * Ícone-only, flutuante no canto inferior direito (não uma faixa de texto como nas outras
 * páginas) — .texto_resultado tem altura fixa de 160px e .item_resultado tem overflow:hidden
 * (estilo inline pré-existente), então uma faixa de texto normal no fluxo ficava cortada.
 * Posicionamento absoluto evita depender da altura do card.
 */
.item_resultado .ck-prod-cart-cta {
   position: absolute;
   bottom: 10px;
   right: 10px;
   z-index: 2;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--ck-surface);
   border: 1px solid var(--ck-brand);
   color: var(--ck-brand);
   box-shadow: var(--ck-shadow-1);
   font-size: 14px;
}
.item_resultado:hover .ck-prod-cart-cta {
   background: var(--ck-brand);
   color: #fff;
}