/*
Theme Name: Ocult Club (Salient Child)
Theme URI: https://ocult.club
Description: Child theme do Salient (ThemeNectar) com a identidade visual da OCULT.CLUB — tipografia, paleta e componentes de loja (WooCommerce).
Author: OCULT.CLUB
Template: salient
Version: 1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Mesma paleta e tipografia do protótipo. Se a paleta mudar, é só editar aqui.
   ========================================================================== */
:root{
  --oc-ink:#0B0D10;
  --oc-ink-2:#1A1F26;
  --oc-paper:#E6E9EE;
  --oc-paper-2:#D8DCE2;
  --oc-grey:#5B6470;
  --oc-grey-on-dark:#9AA3AD;
  --oc-accent:#8a3a2b;
  --oc-line:rgba(11,13,16,.16);
  --oc-serif:'Fraunces', serif;
  --oc-sans:'Space Grotesk', sans-serif;
  --oc-mono:'Space Mono', monospace;
}

/* ==========================================================================
   2. TIPOGRAFIA GLOBAL (baixa especificidade — deve conviver com o Salient
   sem precisar de !important na maior parte dos casos. Se o Salient
   sobrescrever, aumentamos a especificidade depois de ver o site ao vivo.)
   ========================================================================== */
body, p, li, a, input, textarea, select{
  font-family: var(--oc-sans);
  color: var(--oc-ink);
}
h1, h2, h3, h4, h5,
.nectar-title, .heading-text{
  font-family: var(--oc-serif);
  font-weight: 400;
  letter-spacing: -.01em;
}
a{ color: var(--oc-ink); }
a:hover{ color: var(--oc-accent); }

/* rótulos/legendas em mono, se o tema usar essas classes utilitárias */
.mono, .eyebrow, .label, .meta{
  font-family: var(--oc-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ==========================================================================
   3. BOTÕES
   O Salient normalmente usa .nectar-button / .btn para os botões do page
   builder. Cobrindo os dois padrões mais comuns — confirmar contra o site
   ao vivo e remover o que não se aplicar.
   ========================================================================== */
.nectar-button,
.btn,
button[type="submit"]{
  font-family: var(--oc-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   4. WOOCOMMERCE — CLASSES NATIVAS
   Estas classes são do próprio WooCommerce (não do Salient), então são
   estáveis independente do tema. Seguro usar mesmo sem ver o site rodando
   ainda — mas o espaçamento/grid pode precisar de ajuste fino depois.
   ========================================================================== */

/* grade de produtos (loja / categoria) */
.woocommerce ul.products{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
  list-style: none;
}
@media (max-width: 900px){
  .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); }
}
.woocommerce ul.products li.product{
  margin: 0 !important;
}
.woocommerce ul.products li.product img{
  aspect-ratio: 4/5;
  object-fit: cover;
  margin-bottom: 14px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--oc-serif);
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 4px;
}
.woocommerce ul.products li.product .price{
  font-family: var(--oc-mono);
  font-size: 12px;
  color: var(--oc-grey);
}
.woocommerce ul.products li.product .price ins{
  text-decoration: none;
  color: var(--oc-accent);
}
.woocommerce span.onsale{
  background: var(--oc-accent) !important;
  border-radius: 0 !important;
  font-family: var(--oc-mono);
  font-size: 10px;
  letter-spacing: .08em;
}

/* página de produto individual */
.woocommerce div.product .product_title{
  font-family: var(--oc-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: var(--oc-mono);
  font-size: 16px;
  color: var(--oc-ink);
}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size: 15px;
  line-height: 1.75;
  color: #333A42;
  max-width: 52ch;
}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button{
  font-family: var(--oc-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: var(--oc-ink) !important;
  color: var(--oc-paper) !important;
  border-radius: 0 !important;
  padding: 16px 26px !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  opacity: .85;
}

/* abas de detalhes/envio */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family: var(--oc-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* carrinho */
.woocommerce table.cart th,
.woocommerce-cart table.cart td{
  font-family: var(--oc-sans);
}
.woocommerce table.cart img{
  aspect-ratio: 4/5;
  object-fit: cover;
}
.woocommerce-cart table.cart td.product-name a{
  font-family: var(--oc-serif);
  font-size: 16px;
}
.woocommerce .cart-collaterals .cart_totals{
  font-family: var(--oc-mono);
}

/* checkout */
.woocommerce-checkout #payment{
  background: var(--oc-paper-2) !important;
  border-radius: 0 !important;
}
.woocommerce form .form-row label{
  font-family: var(--oc-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oc-grey);
}
.woocommerce #order_review_heading,
.woocommerce-checkout #order_review table.shop_table{
  font-family: var(--oc-mono);
}

/* rótulo estilo "catálogo" para atributos de produto, se o tema exibir
   atributos customizados (ex: "OBJECT 07 — CERAMIC — 2026") */
.oc-catalog-label{
  font-family: var(--oc-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oc-grey);
  margin-bottom: 18px;
  display: block;
}

/* ==========================================================================
   5. SALIENT — A VERIFICAR
   Estes seletores são os nomes de classe mais comuns do Salient (header,
   logo, off-canvas menu). NÃO testados contra o site ao vivo ainda — depois
   que o WooCommerce estiver ativo e o child theme publicado, confirmamos
   com uma captura de tela real e ajustamos o que não bater.
   ========================================================================== */
#header-outer, #header-outer.transparent-header{
  background: var(--oc-paper);
}
#logo a, .logo-hover-color a{
  font-family: var(--oc-serif) !important;
}
#top nav > ul > li > a{
  font-family: var(--oc-mono) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}