/*
Theme Name: Casa Thomsen
Author: Thomsen Indústria e Comércio de Produtos Metalúrgicos
Description: Tema para a nova loja Casa Thomsen, com visual baseado na loja atual (thomsen.com.br / Loja Integrada), para uso com WooCommerce. O domínio thomsen.com.br será apontado pra cá numa etapa futura.
Version: 1.0
Requires PHP: 7.4
Text Domain: thomsen
*/

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700;800&display=swap');

:root{
  --ink:#525252;          /* cor de texto padrão do site real */
  --heading:#696262;
  --muted:#8a8a8a;
  --line:#e5e5e5;
  --bg:#ffffff;
  --bg-soft:#f4f4f4;
  --accent:#0084C7;       /* azul usado no rodapé e nos preços em destaque (Pix) */
  --accent-dark:#00699e;
  --nav-bg:#000000;       /* barra preta de categorias */
  --nav-text:#ffffff;
  --price:#525252;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Titillium Web', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}

.container{max-width:1280px; margin:0 auto; padding:0 24px;}

/* header (branco, logo + busca + ícones) */
.site-header{
  background:var(--bg);
  padding:16px 0;
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:24px;}

.site-logo{display:flex; align-items:center; gap:10px; font-family:'Titillium Web',sans-serif;}
.site-logo .mark{
  width:34px; height:34px;
  background:linear-gradient(135deg, #f2c14e, #b9862c);
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
}
.site-logo .wordmark{line-height:1.05;}
.site-logo .wordmark b{display:block; font-size:1.15rem; font-weight:700; color:var(--heading);}
.site-logo .wordmark small{display:block; font-size:.62rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;}

.header-search{
  flex:1; max-width:520px; display:flex; align-items:center;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
.header-search input{border:0; padding:11px 14px; flex:1; font-size:.88rem; font-family:inherit;}
.header-search button{border:0; background:#fff; color:var(--accent); font-weight:700; padding:0 18px; cursor:pointer; font-size:.78rem; letter-spacing:.03em;}

.header-actions{display:flex; align-items:center; gap:26px; font-size:.68rem; font-weight:600; text-transform:uppercase; color:var(--heading);}
.header-actions a{display:flex; flex-direction:column; align-items:center; gap:4px;}
.header-cart{
  display:flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; border-radius:3px; padding:9px 14px;
  font-size:.8rem; font-weight:600; text-transform:none;
}

/* barra preta de categorias */
.site-nav{background:var(--nav-bg);}
.site-nav ul{display:flex; gap:0; flex-wrap:wrap;}
.site-nav a{
  display:block; padding:14px 16px; font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; color:var(--nav-text);
}
.site-nav a:hover{background:#1a1a1a;}

/* hero / banners */
.hero-banners{padding:28px 0;}
.hero-banners .grid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}
.hero-banners img{border-radius:4px; width:100%; height:100%; object-fit:cover;}

/* section headings */
.section-title{
  font-size:1.3rem; font-weight:700; margin:40px 0 18px;
  padding-left:12px; border-left:4px solid var(--accent);
  color:var(--heading);
  display:block;
}

/* product grid */
.product-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; padding-bottom:10px;
}
.product-card{
  border:1px solid var(--line); border-radius:4px; padding:16px;
  position:relative; background:#fff; text-align:left;
}
.product-card .badge{
  position:absolute; top:12px; left:12px;
  background:var(--accent); color:#fff; font-size:.65rem; font-weight:700;
  padding:3px 8px; border-radius:3px; z-index:2;
}
.product-card .wishlist{
  position:absolute; top:12px; right:12px; color:#c9c9c9; font-size:1.05rem;
}
.product-card img{aspect-ratio:1/1; object-fit:contain; width:100%;}
.product-card .sku{display:none;} /* o site real não mostra SKU no card, só no admin */
.product-card h3{
  font-size:.82rem; font-weight:700; line-height:1.35; margin:10px 0 10px;
  min-height:2.4em; text-transform:uppercase; color:var(--heading);
}
.product-card .price-from{font-size:.72rem; color:var(--muted);}
.product-card .price{font-size:1rem; font-weight:300; color:var(--ink);}
.product-card .installment{font-size:.74rem; color:var(--muted); margin-top:4px;}
.product-card .installment .pix{color:var(--accent); font-weight:800;}
.product-card .btn-add{
  margin-top:14px; width:100%; padding:10px; text-align:center;
  background:#fff; color:var(--accent); border-radius:3px; font-size:.76rem; font-weight:700;
  border:1px solid var(--accent); cursor:pointer; text-transform:uppercase; letter-spacing:.02em;
}
.product-card .btn-add:hover{background:var(--accent); color:#fff;}

/* about section */
.about-store{background:var(--bg-soft); padding:44px 0; margin-top:50px;}
.about-store h2{font-size:1.1rem; margin-bottom:12px; color:var(--heading); text-transform:uppercase; letter-spacing:.03em;}
.about-store p{color:var(--ink); max-width:70ch; line-height:1.8; font-size:.9rem;}

/* footer azul, como o site real */
.site-footer{background:var(--accent); color:#fff; padding:44px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.2fr 1.4fr 1fr 1.1fr; gap:30px; padding-bottom:10px;}
.site-footer h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:16px; font-weight:700;}
.site-footer ul li{margin-bottom:8px; font-size:.85rem;}
.site-footer ul li a{color:rgba(255,255,255,.9);}
.site-footer ul li a:hover{text-decoration:underline;}
.site-footer p{font-size:.85rem; line-height:1.7; color:rgba(255,255,255,.92);}
.footer-newsletter{display:flex; margin-top:6px;}
.footer-newsletter input{border:0; padding:10px 12px; flex:1; border-radius:3px 0 0 3px; font-family:inherit;}
.footer-newsletter button{border:0; background:#003a56; color:#fff; padding:0 16px; border-radius:0 3px 3px 0; font-weight:700; font-size:.74rem; text-transform:uppercase; cursor:pointer;}
.footer-help-btn{
  display:inline-block; margin-top:14px; padding:9px 18px;
  border:1px solid #fff; border-radius:3px; font-size:.74rem; font-weight:700;
  text-transform:uppercase; color:#fff;
}

/* faixa cinza: pagamento + selo de segurança */
.footer-trust{background:var(--bg-soft); padding:30px 0;}
.footer-trust .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.footer-trust h5{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px;}
.payment-badges{display:flex; gap:8px; flex-wrap:wrap;}
.payment-badges span{
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:6px 12px; font-size:.72rem; font-weight:600; color:var(--ink);
}

/* barra final: CNPJ + plataforma */
.footer-bottom{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  padding:16px 0;
  font-size:.7rem; color:var(--muted);
}
.footer-bottom .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media (max-width:960px){
  .hero-banners .grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .site-nav ul{overflow-x:auto; flex-wrap:nowrap;}
  .header-search{display:none;}
}