/* ============================================================
   A LOJONA — Estilo personalizado (inspirado no achatudostore)
   Edite as variáveis abaixo para trocar as cores da loja inteira
   ============================================================ */
:root {
  --lojona-cor-primaria: #e0272d;   /* vermelho dos badges/botões */
  --lojona-cor-escura:   #111111;   /* preto do header/logo */
  --lojona-cor-texto:    #222222;
  --lojona-cor-fundo:    #ffffff;
  --lojona-cor-cinza:    #f3f3f3;
  --lojona-radius:       12px;
}

/* ------------------------------------------------------------
   1) BARRA DE ANÚNCIO (topo)
------------------------------------------------------------ */
.lojona-topbar {
  background: var(--lojona-cor-escura);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
  font-size: 12px;
  letter-spacing: .2px;
}
.lojona-topbar__track {
  display: inline-flex;
  gap: 48px;
  padding-left: 100%;
  animation: lojona-marquee 18s linear infinite;
}
.lojona-topbar__track span { white-space: nowrap; }
@keyframes lojona-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lojona-topbar__track { animation: none; padding-left: 0; justify-content: center; width: 100%; }
}

/* ------------------------------------------------------------
   2) CABEÇALHO
------------------------------------------------------------ */
.site-header,
header.pagelayer-header,
#masthead {
  background: var(--lojona-cor-fundo) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Contador do carrinho */
.cart-count,
.pagelayer-cart-count,
.cart-contents-count {
  background: var(--lojona-cor-primaria) !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Menu principal / categorias */
.main-nav a,
.pagelayer-menu a,
nav.primary-menu a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600;
  color: var(--lojona-cor-texto);
}
.main-nav a:hover,
.pagelayer-menu a:hover,
nav.primary-menu a:hover {
  color: var(--lojona-cor-primaria);
}

/* ------------------------------------------------------------
   3) GRID E CARDS DE PRODUTO (WooCommerce)
------------------------------------------------------------ */
ul.products,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 992px) { ul.products, ul.products[class*="columns-"] { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px) { ul.products, ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }
@media (max-width: 420px) { ul.products, ul.products[class*="columns-"] { grid-template-columns: 1fr !important; } }

/* Anula a largura/float que o tema/Pagelayer aplica em cada item
   (é isso que causava o card estreito com espaço em branco ao lado) */
ul.products li.product {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  height: 100%;
  margin: 0 !important;
  border-radius: var(--lojona-radius);
  overflow: visible;
  background: var(--lojona-cor-fundo);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
  box-sizing: border-box !important;
}
ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Imagem sempre com proporção fixa, mesmo sem foto cadastrada,
   com cantos arredondados só em cima (o card não corta mais mais nada) */
ul.products li.product a img,
ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--lojona-cor-cinza);
  border-radius: var(--lojona-radius) var(--lojona-radius) 0 0;
  display: block;
}

/* Linha de Wishlist/Compare: quebra em vez de vazar pra fora do card */
ul.products li.product .yith-wcwl-add-to-wishlist,
ul.products li.product .compare,
ul.products li.product [class*="wishlist"],
ul.products li.product [class*="compare"] {
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
  padding: 0 12px 10px;
  font-size: 11px;
  box-sizing: border-box;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px 0;
  margin: 0 0 6px;
  color: var(--lojona-cor-texto);
  line-height: 1.35;
}

ul.products li.product .price {
  padding: 0 12px;
  margin-bottom: 10px;
  font-size: 15px;
}
ul.products li.product .price del {
  color: #999;
  opacity: .8;
  font-size: 13px;
}
ul.products li.product .price ins {
  color: var(--lojona-cor-primaria);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}

/* Empurra o botão sempre para o final do card */
ul.products li.product a.add_to_cart_button,
ul.products li.product a.button {
  margin: auto 12px 12px !important;
  background: var(--lojona-cor-escura) !important;
  color: #fff !important;
  border-radius: 8px;
  text-align: center;
  padding: 10px 14px !important;
  font-size: 13px;
  font-weight: 600;
  border: none;
}
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button:hover {
  background: var(--lojona-cor-primaria) !important;
}

/* Badge "Oferta" pequeno, no canto — nunca cobrindo a foto */
.onsale,
.pagelayer-sale-badge,
span.onsale {
  position: absolute !important;
  top: 8px; left: 8px;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 6px !important;
  background: var(--lojona-cor-primaria) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
  padding: 4px 8px !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  z-index: 5;
}

/* Esconde linhas de wishlist/compare vazias que "furam" o card */
ul.products li.product .yith-wcwl-add-to-wishlist:empty,
ul.products li.product .compare:empty {
  display: none !important;
}

/* ------------------------------------------------------------
   4) RODAPÉ
------------------------------------------------------------ */
.site-footer,
footer.pagelayer-footer,
#colophon {
  background: var(--lojona-cor-escura);
  color: #ddd;
  padding-top: 40px;
}
.site-footer a,
footer.pagelayer-footer a,
#colophon a {
  color: #ddd;
}
.site-footer a:hover,
footer.pagelayer-footer a:hover,
#colophon a:hover {
  color: var(--lojona-cor-primaria);
}
.site-footer h3,
footer.pagelayer-footer h3,
#colophon h3 {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 14px;
}