/* =====================================================================
   COMPONENTE product-card (AVT Core). Estilo guiado por variáveis.
   O tema do site define os valores (em :root ou em .avt-card); os padrões abaixo valem se nada for definido.

   --avt-card-bg            fundo do cartão              (#fff)
   --avt-card-border        cor da borda                 (#eee)
   --avt-card-border-hover  cor da borda no hover        (#2563eb)
   --avt-card-radius        arredondamento               (6px)
   --avt-card-pad           espaçamento interno          (14px 20px 20px)
   --avt-card-pad-sm        espaçamento interno (mobile) (10px 10px 12px)
   --avt-card-shadow-hover  sombra no hover
   --avt-card-title-color / -hover / -size / -weight
   --avt-card-price-color / --avt-card-price-old-color / --avt-card-price-size
   --avt-card-badge-bg / --avt-card-badge-color / --avt-card-badge-radius
   --avt-card-btn-bg / -hover / --avt-card-btn-color / --avt-card-btn-radius
   --avt-card-font          fonte do texto               (herda)
   --avt-card-btn-font      fonte do botão               (herda)
   ===================================================================== */
.avt-card,
.woocommerce ul.products li.product.avt-card,
.woocommerce-page ul.products li.product.avt-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:5px;
  float:none;width:auto;height:auto;margin:0;
  padding:var(--avt-card-pad,14px 20px 20px);
  background:var(--avt-card-bg,#fff);
  border:1px solid var(--avt-card-border,#eee);
  border-radius:var(--avt-card-radius,6px);
  font-family:var(--avt-card-font,inherit);
  list-style:none;box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s,transform .2s
}
/* hover com a MESMA especificidade da regra base: no CSS do WooCommerce (listagens) a base é mais forte
   e anularia a borda de destaque (era o defeito: borda verde só na home, não nas categorias). */
.avt-card:hover,
.woocommerce ul.products li.product.avt-card:hover,
.woocommerce-page ul.products li.product.avt-card:hover{
  border-color:var(--avt-card-border-hover,#2563eb);
  box-shadow:var(--avt-card-shadow-hover,0 6px 18px rgba(0,0,0,.1));
  transform:translateY(-2px)
}
.avt-card .avt-card__thumb{display:block}
/* margin: o CSS do WooCommerce coloca 1em abaixo da imagem nas listagens; aqui o espaço é do próprio cartão */
.avt-card .avt-card__thumb img{display:block;width:100%;height:auto;margin:0!important;aspect-ratio:1;object-fit:contain;border-radius:calc(var(--avt-card-radius,6px))}
.avt-card .avt-card__title{
  display:block;flex:1;margin:6px 0;text-align:left;text-decoration:none;
  font-size:var(--avt-card-title-size,16px);line-height:1.4;font-weight:var(--avt-card-title-weight,500);
  color:var(--avt-card-title-color,#505050)
}
.avt-card .avt-card__title:hover{color:var(--avt-card-title-hover,#dc2626)}
.avt-card .avt-card__buy{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:48px;margin:5px 0 6px}
.avt-card .avt-card__price{display:flex;flex-direction:column;line-height:1.2;font-size:var(--avt-card-price-size,19px);font-weight:600;color:var(--avt-card-price-color,#1f2937)}
.avt-card .avt-card__price .woocommerce-Price-amount,
.avt-card .avt-card__price ins .woocommerce-Price-amount{font-size:var(--avt-card-price-size,19px);font-weight:600;color:var(--avt-card-price-color,#1f2937)}
.avt-card .avt-card__price ins{text-decoration:none;background:none}
.avt-card .avt-card__price del,
.avt-card .avt-card__price del .woocommerce-Price-amount{font-size:calc(var(--avt-card-price-size,19px) * .74);font-weight:400;color:var(--avt-card-price-old-color,#8a8a8a)}
.avt-card .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.avt-card .avt-badge{align-self:flex-end;background:var(--avt-card-badge-bg,#2563eb);color:var(--avt-card-badge-color,#fff);border-radius:var(--avt-card-badge-radius,4px);padding:4px 7px;font-size:12px;font-weight:500;white-space:nowrap}
.avt-card .avt-card__btn{
  display:block;padding:8px;text-align:center;text-decoration:none;
  background:var(--avt-card-btn-bg,#2563eb);color:var(--avt-card-btn-color,#fff);
  border-radius:var(--avt-card-btn-radius,6px);
  font-family:var(--avt-card-btn-font,inherit);font-size:16px
}
.avt-card .avt-card__btn:hover{background:var(--avt-card-btn-bg-hover,#1d4ed8);color:var(--avt-card-btn-color,#fff)}

@media (max-width:767px){
  .avt-card,.woocommerce ul.products li.product.avt-card,.woocommerce-page ul.products li.product.avt-card{padding:var(--avt-card-pad-sm,10px 10px 12px)}
  .avt-card .avt-card__title{font-size:calc(var(--avt-card-title-size,16px) - 2px);line-height:1.35}
  .avt-card .avt-card__price,.avt-card .avt-card__price .woocommerce-Price-amount,.avt-card .avt-card__price ins .woocommerce-Price-amount{font-size:calc(var(--avt-card-price-size,19px) - 3px)}
  .avt-card .avt-card__btn{font-size:14px;padding:8px 6px}
}

/* grade padrão para listas de cartões (layout; não faz parte do cartão) */
.avt-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--avt-grid-cols,4),1fr);gap:var(--avt-grid-gap,20px)}
@media (max-width:1024px){.avt-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.avt-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* O CSS "smallscreen/layout" do WooCommerce (ul.products[class*=columns-] li.product) define width:48%, float e margem
   nas listagens e carrega DEPOIS deste arquivo; sem este reforço o cartão fica estreito dentro da grade no celular. */
.woocommerce ul.products[class*=columns-] li.product.avt-card,
.woocommerce-page ul.products[class*=columns-] li.product.avt-card{float:none;width:auto;margin:0;clear:none}

/* preço grande + selo em cartão estreito: o selo desce para a linha de baixo em vez de vazar */
.avt-card .avt-card__buy{flex-wrap:wrap;row-gap:6px}