/* ===== LISTA DE PRODUTOS (Shop/Categorias/Busca) ===== */

.lista-products-grid, .products { /* segurança: Woo usa .products */
  list-style: none;
  margin: 0;
  padding: 0;
}

.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  padding: 18px 10px 0;
}
.produto-card .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important;
    font-size: 18px !important;
    color: #00B3F5 !important;
    margin-right: 2px !important;
}
.produto-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform .18s ease, box-shadow .18s ease;
}
.produto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.produto-card .marca {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.produto-card .thumb img { width: 100%; height: auto; display: block; }

/* Título do card: máximo 3 linhas com reticências */
.produto-card .titulo {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 10px 0 6px;

  /* Mantém altura fixa para alinhar os cards */
  min-height: calc(1.35em * 3);
}
.produto-card .titulo a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* Chrome/Safari/Edge/Firefox recentes */
  line-clamp: 3;           /* especificação nova (fallback) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;     /* permite quebrar em várias linhas */
	color: rgb(66, 70, 77);
}
.produto-card .titulo a:hover { text-decoration: underline; }

.produto-card .preco { margin-top: 4px; text-align: left;font-size:12px;color:black;}
.lista-linha-pix {
  font-size: 14px;
  margin-bottom: 2px;
}
.lista-preco-pix {
  font-size: 22px;
}
.preco-parcelado {
  font-size: 12px;
  color: #475569;
}

.estoque {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  margin-top: 8px;
	font-weight:500;
}
.estoque.ok   { color: #0d9488; }
.estoque.off  { color: #ef4444; }
.estoque .material-symbols-outlined { font-size: 16px; }

.produto-card .botoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
	  font-size: 12px;
}

/* Favoritar */
.favoritar-produto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e6eaf0;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .05s ease;
  text-decoration: none;
}
.favoritar-produto-btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.favoritar-produto-btn:active { transform: translateY(1px); }
.favoritar-produto-btn .material-symbols-outlined { font-size: 22px; }
.favoritar-produto-btn.favoritado .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  color: #e63946;
}

/* Botão add-to-cart do Woo dentro do card */
.produto-card .add_to_cart_button,
.produto-card .ajax_add_to_cart {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  /*min-height: 38px;*/
  border-radius: 10px;
  border: 0;
  background: #00B3F5;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .05s ease, box-shadow .2s ease;
}
.produto-card .add_to_cart_button:hover,
.produto-card .ajax_add_to_cart:hover { background: #0077cc; }
.produto-card .add_to_cart_button:active,
.produto-card .ajax_add_to_cart:active { transform: translateY(1px); }

/* ===== Hover-swap nas fotos dos cards ===== */
.produto-card .thumb {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  /* ajuda a manter o layout sem saltos entre produtos */
  aspect-ratio: 1 / 1; /* quadrado; ajuste se preferir 4/3, 16/9 etc. */
}

.produto-card .thumb .thumb-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.produto-card .thumb .thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* mantém proporção da foto sem cortar */
  transition: opacity .25s ease;
  backface-visibility: hidden;
	padding-top: 8px;
}

/* estado inicial: mostra a principal */
.produto-card .thumb .primary img { opacity: 1; }

/* se existir a secundária, deixa oculta até o hover */
.produto-card .thumb .secondary img { opacity: 0; }

/* no hover, troca */
.produto-card .thumb:hover .primary img { opacity: 0; }
.produto-card .thumb:hover .secondary img { opacity: 1; }

/* acessibilidade: teclado também deve acionar o efeito */
.produto-card .thumb:focus-visible .primary img { opacity: 0; }
.produto-card .thumb:focus-visible .secondary img { opacity: 1; }

/* wrapper da imagem com overlay */
.produto-card .thumb-wrap {
  position: relative;
}

/* ===== BOTÃO FAVORITO SOBRE A IMAGEM ===== */
.fav-overlay {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .1s ease;
}

.fav-overlay .material-symbols-outlined {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .2s ease, color .2s ease;
}

/* Mostra apenas no hover do card ou quando já favoritado */
.produto-card:hover .fav-overlay,
.fav-overlay:hover,
.fav-overlay.favoritado {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Animação e cor quando favoritado */
.fav-overlay.favoritado .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  color: #e63946;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Efeito sutil ao clicar */
.fav-overlay:active .material-symbols-outlined {
  transform: scale(0.9);
}


/* garante que o hover-swap continua visível sob o overlay */
.produto-card .thumb { position: relative; z-index: 1; }
/* Oculta o botão de favorito até o hover do card */
.fav-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s linear, transform .05s ease, box-shadow .2s ease, background .2s ease;
}

/* Mostra ao passar o mouse no card OU no próprio botão */
.produto-card:hover .fav-overlay,
.fav-overlay:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Acessibilidade: ao focar via teclado, também mostra */
.fav-overlay:focus-visible,
.produto-card:focus-within .fav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* (Opcional) manter visível se já estiver favoritado */
.fav-overlay.favoritado {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Selo de desconto do PIX ao lado do valor */
.pix-badge {
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0px 3px;
  height: 20px;
  border-radius: 9999px;      /* bem arredondado */
  background: #00b3f5;        /* azul */
  color: #fff;                 /* texto branco */
  font-weight: 800;            /* negrito */
  font-size: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
/* --- Sem estoque: imagem em P&B (não afeta produtos em estoque) --- */
.products li.product.outofstock .thumb img,
.produto-card.outofstock .thumb img {
  filter: grayscale(100%) contrast(0.95) brightness(0.95);
}

/* Linha "Indisponível" + link "Saiba mais" lado a lado */
.estoque.off {
  display: inline-flex;
  align-items: center;
  gap: 8px;        /* espaço entre ícone, texto e link */
  color: #ef4444;  /* já existia */
}

.estoque.off .texto-indisp { font-weight: 600; }

/* Link compacto ao lado do “Indisponível” */
.estoque.off .saiba-mais {
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #0a6cd6;           /* azul do tema */
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;  /* sem fundo para ficar discreto */
  transition: color .15s ease, background .15s ease;
}
.estoque.off .saiba-mais:hover {
  color: #084a99;
  background: rgba(10,108,214,.08);
}