/*
Theme Name: FORWALK
Theme URI: https://4walk.com.br
Description: Tema-filho do Astra com o design system da FORWALK (cores, fontes e estilo da loja). E-commerce de calçados, mobile-first.
Author: FORWALK
Version: 1.0.0
Template: astra
Text Domain: forwalk
*/

/* ============================================================
   1. DESIGN TOKENS — cores, fontes e medidas da FORWALK
   ============================================================ */
:root{
  --fw-ink:      #0d0d0f;   /* preto base */
  --fw-accent:   #F26A1B;   /* laranja FORWALK */
  --fw-accent-d: #d1450e;   /* laranja escuro (hover) */
  --fw-paper:    #ffffff;   /* fundo claro */
  --fw-soft:     #f6f4ef;   /* off-white */
  --fw-muted:    #6b6b73;   /* texto suave */
  --fw-line:     #e6e2d9;   /* linhas/bordas */
  --fw-good:     #1f9d57;   /* verde (em estoque) */
  --fw-display:  'Bebas Neue', Impact, sans-serif;
  --fw-body:     'Inter', system-ui, -apple-system, sans-serif;
  --fw-mono:     'JetBrains Mono', monospace;
  --fw-radius:   12px;
}

/* ============================================================
   2. TIPOGRAFIA GLOBAL
   ============================================================ */
body{ font-family: var(--fw-body); color: var(--fw-ink); }
h1,h2,h3,h4,h5,h6{ font-family: var(--fw-body); font-weight: 800; letter-spacing: -.01em; }

/* títulos grandes (hero, seções) ganham a fonte de display */
.fw-display,
.woocommerce-products-header__title,
.wc-block-grid__product-title{
  font-family: var(--fw-display) !important;
  font-weight: 400 !important;
  letter-spacing: .03em !important;
}

a{ color: var(--fw-ink); }
a:hover{ color: var(--fw-accent); }

/* ============================================================
   3. BOTÕES (padrão da marca)
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button,
.ast-button,
button.single_add_to_cart_button{
  background: var(--fw-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-family: var(--fw-body) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: .85em 1.6em !important;
  text-transform: none !important;
  transition: background .15s ease, transform .05s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover,
button.single_add_to_cart_button:hover{
  background: var(--fw-accent) !important;
  color: #fff !important;
}
.woocommerce button.button:active{ transform: translateY(1px); }

/* ============================================================
   4. VITRINE / GRADE DE PRODUTOS (loja e categorias)
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: var(--fw-paper);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  padding: .6rem .6rem 1rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product a img{
  border-radius: 8px;
  background: var(--fw-soft);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .5rem .2rem .2rem;
}
.woocommerce ul.products li.product .price{
  color: var(--fw-ink);
  font-family: var(--fw-mono);
  font-weight: 700;
}
.woocommerce ul.products li.product .price del{
  color: var(--fw-muted);
  font-weight: 500;
  font-family: var(--fw-body);
}
.woocommerce ul.products li.product .price ins{ text-decoration: none; }

/* selo de promoção */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background: var(--fw-accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1 !important;
  padding: .35em .6em !important;
  top: 10px; left: 10px;
}

/* ============================================================
   5. PÁGINA DO PRODUTO
   ============================================================ */
.single-product .product_title{
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}
.single-product .price,
.single-product p.price{
  font-family: var(--fw-mono);
  font-weight: 700;
}
.single-product .price del{
  color: var(--fw-muted);
  font-family: var(--fw-body);
  font-weight: 500;
  margin-right: .4rem;
}
.single-product .price ins{ text-decoration: none; color: var(--fw-ink); }

/* disponibilidade em estoque */
.single-product .stock.in-stock{ color: var(--fw-good); font-weight: 600; }

/* tamanhos / variações (swatches) */
.single-product .variations td.value,
.single-product .variations_form .variations select{
  border-radius: 8px;
}

/* botão comprar bem destacado */
.single-product button.single_add_to_cart_button{
  width: 100%;
  font-size: 1rem;
  padding: 1em !important;
}

/* abas do produto */
.woocommerce-tabs ul.tabs li.active{
  border-bottom: 2px solid var(--fw-accent);
}

/* ============================================================
   6. CARRINHO E CHECKOUT
   ============================================================ */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table{
  border-radius: var(--fw-radius);
  overflow: hidden;
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  padding: 1rem;
}
.woocommerce .quantity .qty{
  border: 1px solid var(--fw-line);
  border-radius: 8px;
  padding: .4em;
}
/* cupom em destaque */
.woocommerce-cart .coupon .input-text{
  border: 1px solid var(--fw-line);
  border-radius: 8px;
}

/* ============================================================
   7. ACENTOS GERAIS
   ============================================================ */
.woocommerce-message,
.woocommerce-info{ border-top-color: var(--fw-accent) !important; }
.woocommerce-message::before,
.woocommerce-info::before{ color: var(--fw-accent) !important; }

/* breadcrumb mais discreto */
.woocommerce-breadcrumb{ color: var(--fw-muted); font-size: .82rem; }
.woocommerce-breadcrumb a{ color: var(--fw-muted); }
.woocommerce-breadcrumb a:hover{ color: var(--fw-accent); }

/* ============================================================
   8. HEADER (ajustes de apoio — caso a classe fw-header exista)
   ============================================================ */
.fw-header{ background: #fff; border-bottom: 1px solid var(--fw-line); }
.fw-header [class*="cart"] *{ color: var(--fw-ink); }
.fw-header [class*="cart"] svg{ width: 24px; height: 24px; }

/* ============================================================
   9. MOBILE-FIRST: ajustes para telas pequenas
   ============================================================ */
@media (max-width: 767px){
  .woocommerce ul.products[class*="columns-"] li.product{ width: 48%; margin: 0 1% 1rem; }
  .single-product .product_title{ font-size: 1.5rem; }
}