/* ==========================================================================
   Oriente Tintas — CSS para a página da Loja (WooCommerce)
   Adapta a grade padrão do WooCommerce (ul.products / li.product) para o
   visual dos cards de produto usados em produtos.html (.prod)
   ========================================================================== */

:root{
  --ot-roxo:#472681;
  --ot-roxo-escuro:#2A1656;
  --ot-laranja:#F07E26;
  --ot-laranja-claro:#FF9A33;
  --ot-laranja-texto:#CC6110;
  --ot-lilas:#EDE8F7;
  --ot-cinza:#6B6478;
  --ot-papel:#FAF7F2;
  --ot-tinta:#241A3D;
  --ot-borda:#E2DCEF;
  --ot-branco:#FFFFFF;
  --ot-raio:14px;
  --ot-display:'CodeBlack','Gotham',sans-serif;
  --ot-texto:'Gotham','CodeNew',sans-serif;
  --ot-mono:'CodeNew','Gotham',monospace;
}

/* ---------- Área geral da loja ---------- */
.woocommerce-page #main.site-main,
main#main.site-main{
  background:var(--ot-lilas);
  padding:48px 24px 90px;
}
@media(max-width:700px){
  .woocommerce-page #main.site-main,
  main#main.site-main{ padding:28px 18px 60px; }
}

/* ---------- Breadcrumb ---------- */
.woocommerce-breadcrumb{
  font-family:var(--ot-texto);
  font-size:14px;
  color:var(--ot-cinza);
  margin:0 0 26px;
  max-width:1180px;
  margin-inline:auto;
}
.woocommerce-breadcrumb a{ color:var(--ot-roxo); text-decoration:none; font-weight:600; }
.woocommerce-breadcrumb a:hover{ text-decoration:underline; }

/* ---------- Cabeçalho / título ---------- */
.woocommerce-products-header{
  max-width:1180px;
  margin:0 auto 20px;
}
.woocommerce-products-header__title.page-title{
  font-family:var(--ot-display);
  font-weight:700;
  font-size:clamp(2rem,4vw,3.3rem);
  line-height:1.12;
  letter-spacing:-.035em;
  color:var(--ot-roxo-escuro);
  margin:0 0 6px;
}

/* ---------- Contagem de resultados + ordenação ---------- */
.woocommerce-result-count,
.woocommerce-ordering{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
.woocommerce-result-count{
  font-family:var(--ot-texto);
  color:var(--ot-cinza);
  font-size:.9rem;
  margin:0 0 8px;
}
.woocommerce-ordering{
  display:flex;
  justify-content:flex-end;
  margin:0 auto 26px;
}
.woocommerce-ordering .orderby{
  font-family:var(--ot-texto);
  font-size:.9rem;
  font-weight:600;
  color:var(--ot-roxo-escuro);
  background:var(--ot-branco);
  border:1px solid var(--ot-borda);
  border-radius:10px;
  padding:10px 14px;
  min-height:44px;
  cursor:pointer;
}
.woocommerce-ordering .orderby:focus{
  outline:2px solid var(--ot-roxo);
  border-color:var(--ot-roxo);
}

/* ---------- Grade de produtos ---------- */
ul.products{
  max-width:1180px;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr)) !important;
  gap:18px !important;
  padding:0;
  list-style:none;
}
ul.products::before,
ul.products::after{ content:none !important; }

ul.products li.product{
  width:auto !important;
  margin:0 !important;
  padding:22px 20px 20px !important;
  float:none !important;
  background:var(--ot-branco);
  border:1px solid var(--ot-borda);
  border-radius:var(--ot-raio);
  display:flex;
  flex-direction:column;
  position:relative;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
}
ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(34,18,45,.11);
}

/* faixa colorida lateral, no estilo dos cards do catálogo */
ul.products li.product::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:5px;
  border-radius:var(--ot-raio) 0 0 var(--ot-raio);
  background:var(--ot-laranja);
}

/* imagem do produto */
ul.products li.product a.woocommerce-LoopProduct-link{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  order:1;
}
ul.products li.product img{
  order:1;
  width:100%;
  height:170px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--ot-borda);
  border-radius:10px;
  margin:0 0 14px;
}

/* título do produto */
ul.products li.product h2.woocommerce-loop-product__title{
  order:2;
  font-family:var(--ot-display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.3;
  color:var(--ot-roxo-escuro);
  margin:0 0 8px;
  min-height:2.6em;
}

/* preço (quando existir) */
ul.products li.product .price{
  order:3;
  font-family:var(--ot-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ot-roxo);
  margin:2px 0 10px;
}
ul.products li.product .price del{
  color:var(--ot-cinza);
  font-weight:400;
  font-size:.85rem;
  opacity:.8;
}
ul.products li.product .price ins{
  text-decoration:none;
  color:var(--ot-roxo);
}

/* botão "Leia mais" / "Adicionar ao carrinho" */
ul.products li.product a.button{
  order:4;
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--ot-texto);
  font-weight:600;
  font-size:.86rem;
  color:var(--ot-laranja);
  background:transparent;
  border:0;
  padding:10px 0 0;
  text-decoration:none;
}
ul.products li.product a.button:hover{
  text-decoration:underline;
  color:var(--ot-laranja-texto);
}

/* placeholder do WooCommerce quando não há foto */
ul.products li.product img.woocommerce-placeholder{
  opacity:.5;
}

/* ---------- Paginação ---------- */
nav.woocommerce-pagination{
  max-width:1180px;
  margin:40px auto 0;
}
nav.woocommerce-pagination ul.page-numbers{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}
nav.woocommerce-pagination .page-numbers li{ list-style:none; }
nav.woocommerce-pagination .page-numbers a.page-numbers,
nav.woocommerce-pagination .page-numbers span.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--ot-borda);
  background:var(--ot-branco);
  color:var(--ot-roxo-escuro);
  font-family:var(--ot-texto);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
nav.woocommerce-pagination .page-numbers a.page-numbers:hover{
  background:var(--ot-lilas);
  border-color:var(--ot-roxo);
}
nav.woocommerce-pagination .page-numbers span.current{
  background:var(--ot-roxo-escuro);
  border-color:var(--ot-roxo-escuro);
  color:#fff;
}
nav.woocommerce-pagination .page-numbers span.dots{
  border:0;
  background:transparent;
}

/* ---------- Responsivo ---------- */
@media(max-width:700px){
  ul.products{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:12px !important; }
  ul.products li.product{ padding:16px 14px 14px !important; }
  ul.products li.product img{ height:130px; }
}