/* ============================================================
   Twister Colors — Loja de Tintas (site estático)
   CSS compartilhado por TODAS as páginas.
   Editar aqui altera o site inteiro.
   ============================================================ */

/* ---------- Fontes locais (Arvo + Open Sans) ---------- */
@font-face{font-family:'Arvo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Arvo-400-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Arvo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Arvo-700-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/OpenSans-400-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/OpenSans-600-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/OpenSans-700-normal-latin.woff2') format('woff2')}

/* ---------- Variáveis ---------- */
:root{
  --primario:#CE5400;
  --primario-escuro:#a94600;
  --secundario:#0091CE;
  --texto:#4d4d4d;
  --titulo:#333;
  --fundo:#fff;
  --fundo-claro:#EFEFEF;
  --borda:#e6e6e6;
  --raio:6px;
  --fonte-titulo:'Arvo',Georgia,serif;
  --fonte-corpo:'Open Sans',Arial,Helvetica,sans-serif;
  --sombra:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fonte-corpo);
  font-size:15px;
  line-height:1.6;
  color:var(--texto);
  background:var(--fundo);
}
img{max-width:100%;height:auto}
a{color:var(--secundario);text-decoration:none}
a:hover{color:var(--primario)}
h1,h2,h3,h4{font-family:var(--fonte-titulo);color:var(--titulo);line-height:1.25;margin:.4em 0}
h1{font-size:1.7em}
h2{font-size:1.35em}
h3{font-size:1.1em}
p{margin:.5em 0}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primario);color:#fff;padding:8px 14px;z-index:999}
.skip-link:focus{left:0;color:#fff}
.icon-btn{background:none;border:0;padding:6px;cursor:pointer;color:#333;display:inline-flex;align-items:center}
.icon-btn svg{width:24px;height:24px}
.icon-btn:hover{color:var(--primario)}
.button{
  display:inline-block;background:var(--primario);color:#fff;padding:10px 22px;
  border-radius:var(--raio);font-weight:600;border:0;cursor:pointer;font-size:15px;
  font-family:var(--fonte-corpo);transition:background .2s;
}
.button:hover{background:var(--primario-escuro);color:#fff}
.btn-link{font-weight:600}

/* ---------- Header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--borda)}
.header-main{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:1180px;margin:0 auto;padding:14px 16px;gap:12px;
}
.header-left{display:flex;align-items:center;gap:4px}
.header-right{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.social-link{color:#333;display:inline-flex;padding:6px}
.social-link svg{width:22px;height:22px}
.social-link:hover{color:var(--secundario)}
.site-logo{display:inline-flex;justify-content:center}
.site-logo img{max-height:110px;width:auto}
.menu-toggle{display:none}
.header-nav{background:var(--fundo-claro);border-top:1px solid var(--borda);position:sticky;top:0;z-index:50}
.header-nav .wrap{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.header-nav a{
  font-family:var(--fonte-titulo);font-weight:700;color:var(--titulo);
  padding:12px 22px;display:inline-block;text-transform:none;letter-spacing:.3px;
}
.header-nav a:hover{color:var(--primario)}
.header-nav a.active{color:var(--primario)}

/* ---------- Busca (overlay) ---------- */
.search-overlay{
  position:fixed;inset:0;background:rgba(255,255,255,.97);z-index:200;
  display:flex;align-items:flex-start;justify-content:center;padding:80px 16px 16px;
}
.search-overlay[hidden]{display:none}
.search-close{position:absolute;top:16px;right:16px}
.search-box{width:100%;max-width:640px}
.search-box form,.big-search{display:flex;background:#fff;border:2px solid var(--primario);border-radius:var(--raio);overflow:hidden}
.search-box input,.big-search input{
  flex:1;border:0;padding:12px 14px;font-size:16px;outline:none;font-family:var(--fonte-corpo);min-width:0;background:#fff;color:var(--texto);
}
.search-box button,.big-search button{
  background:var(--primario);border:0;color:#fff;padding:0 20px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;font-family:var(--fonte-corpo);
}
.search-box button:hover,.big-search button:hover{background:var(--primario-escuro)}
.search-box button svg,.big-search button svg{width:20px;height:20px}
.live-results{background:#fff;border:1px solid var(--borda);border-top:0;border-radius:0 0 var(--raio) var(--raio);box-shadow:var(--sombra);max-height:60vh;overflow:auto}
.live-results a,.live-results .live-empty{
  display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--borda);color:var(--texto);
}
.live-results a:hover{background:var(--fundo-claro);color:var(--texto)}
.live-results img{width:44px;height:44px;object-fit:contain;border-radius:4px;background:#fff}
.live-results .lr-cat{color:#999;font-size:.8em;display:block}

/* ---------- Off-canvas (menu mobile) ---------- */
.offcanvas{
  position:fixed;top:0;left:0;bottom:0;width:290px;max-width:85vw;background:#fff;z-index:300;
  transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;box-shadow:var(--sombra);
}
.offcanvas.open{transform:translateX(0)}
.offcanvas[hidden]{display:block}
.offcanvas-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--borda)}
.offcanvas-head img{max-height:48px}
.offcanvas-search{padding:12px}
.offcanvas-search input{
  width:100%;padding:10px 12px;border:1px solid var(--borda);border-radius:var(--raio);
  font-size:15px;font-family:var(--fonte-corpo);
}
.offcanvas nav{display:flex;flex-direction:column}
.offcanvas nav a{padding:13px 16px;border-bottom:1px solid var(--borda);color:var(--titulo);font-weight:600}
.offcanvas nav a:hover{background:var(--fundo-claro);color:var(--primario)}
.offcanvas-contact{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.offcanvas-contact a{display:inline-flex;align-items:center;gap:8px;color:var(--texto)}
.offcanvas-contact svg{width:18px;height:18px;color:var(--primario)}
.offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:250}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-size:.82em;color:#909090;margin:10px 0 16px}
.breadcrumbs a{color:#909090}
.breadcrumbs a:hover{color:var(--primario)}
.breadcrumbs>span:after{content:" / ";color:#c9c9c9}
.breadcrumbs>span:last-child:after{content:""}

/* ---------- Título de página ---------- */
.page-title{margin:18px 0 6px;text-align:left}
.page-title h1{margin:0}
.page-title p{color:#8a8a8a;margin:4px 0 0}
.term-desc{color:var(--texto);margin-bottom:16px}

/* ---------- Layout loja/categoria ---------- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:8px 0 30px}
.sidebar .widget{background:var(--fundo-claro);border-radius:var(--raio);padding:16px 18px;margin-bottom:20px}
.sidebar .widget h3{margin-top:0;font-size:1em;text-transform:uppercase;letter-spacing:.5px;color:var(--titulo)}
.widget-categories ul{list-style:none;margin:0;padding-left:12px}
.widget-categories>ul{padding-left:0}
.widget-categories li{margin:2px 0}
.widget-categories a{color:var(--texto);font-size:.92em;display:inline-block;padding:3px 0}
.widget-categories a:hover{color:var(--primario)}
.widget-categories li.current>a{color:var(--primario);font-weight:700}
.widget-categories .count{color:#a0a0a0;font-size:.85em}

/* ---------- Grid de produtos ---------- */
.products-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{margin:0}
.product-card .box{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  transition:box-shadow .2s,border-color .2s;height:100%;display:flex;flex-direction:column;
}
.product-card .box:hover{box-shadow:var(--sombra);border-color:#d8d8d8}
.prod-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;padding:10px}
.prod-img img{max-height:100%;object-fit:contain;transition:transform .25s}
.product-card .box:hover .prod-img img{transform:scale(1.04)}
.prod-img-empty{aspect-ratio:1/1;background:var(--fundo-claro)}
.prod-info{padding:10px 12px 14px;border-top:1px solid var(--borda)}
.prod-cat{display:block;font-size:.75em;color:#a0a0a0;text-transform:uppercase;letter-spacing:.4px}
.prod-title{font-family:var(--fonte-corpo);font-size:.92em;font-weight:600;margin:2px 0 0;line-height:1.35}
.prod-title a{color:var(--titulo)}
.prod-title a:hover{color:var(--primario)}

/* ---------- Paginação ---------- */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:28px 0 10px}
.pagination .page-numbers{
  display:inline-block;min-width:40px;padding:8px 12px;text-align:center;
  border:1px solid var(--borda);border-radius:var(--raio);color:var(--texto);background:#fff;
}
.pagination a.page-numbers:hover{border-color:var(--primario);color:var(--primario)}
.pagination .current{background:var(--primario);border-color:var(--primario);color:#fff}
.pagination .dots{padding:8px 4px;color:#999}

/* ---------- Página de produto ---------- */
.product-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;padding-top:8px}
.product-figure{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  display:flex;align-items:center;justify-content:center;padding:14px;margin-top:10px;
}
.product-figure img{max-height:420px;object-fit:contain}
.product-figure-empty{aspect-ratio:1/1;background:var(--fundo-claro);color:#999}
.product-gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.product-gallery-thumbs img{width:72px;height:72px;object-fit:contain;border:1px solid var(--borda);border-radius:4px;padding:4px}
.product-title{font-size:1.6em;margin-top:0}
.product-shortdesc{margin:12px 0}
.product-shortdesc p{margin:0}
.product-meta{font-size:.88em;color:#8a8a8a;margin:10px 0}
.product-meta a{color:var(--secundario)}
.product-meta a:hover{color:var(--primario)}
.product-meta a:after{content:", "}
.product-meta a:last-child:after{content:""}
.product-contact{
  margin-top:18px;background:var(--fundo-claro);border-radius:var(--raio);padding:14px 18px;
}
.product-contact p{margin:4px 0}
.contact-phones{display:flex;gap:16px;flex-wrap:wrap}
.contact-phones a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--primario);font-size:1.05em}
.contact-phones svg{width:20px;height:20px}
.product-description{border-top:1px solid var(--borda);margin-top:26px;padding-top:6px}
.product-content{word-wrap:break-word;overflow-wrap:break-word}
.product-content img{height:auto}
.product-content table{max-width:100%;border-collapse:collapse}
.product-content td,.product-content th{border:1px solid var(--borda);padding:6px 10px}

/* ---------- Home ---------- */
.home-search{background:var(--fundo-claro);padding:26px 16px}
.home-search .big-search,.home-search form{max-width:720px;margin:0 auto}
.big-search svg{width:20px;height:20px}
.home-cat-list{padding:26px 0 6px;max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px}
.section-title{border-bottom:2px solid var(--fundo-claro);padding-bottom:8px}
.section-title a{color:var(--titulo)}
.section-title a:hover{color:var(--primario)}
.products-list{list-style:none;margin:0;padding:0}
.products-list li{border-bottom:1px solid var(--borda)}
.products-list a{display:flex;align-items:center;gap:12px;padding:8px 4px;color:var(--texto)}
.products-list a:hover{color:var(--primario)}
.products-list img{width:64px;height:64px;object-fit:contain;flex:0 0 auto}
.products-list span{font-weight:600;line-height:1.3}
.home-marcas{padding:26px 16px;max-width:1180px;margin:0 auto}
.marcas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.marcas-grid a,.marcas-grid span{
  display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--borda);border-radius:var(--raio);padding:14px;min-height:90px;
}
.marcas-grid a:hover{border-color:var(--secundario);box-shadow:var(--sombra)}
.marcas-grid img{max-height:70px;object-fit:contain}
.home-seo{max-width:1180px;margin:0 auto;padding:10px 16px 34px}
.home-seo img{height:auto}
.search-results{max-width:1180px;margin:0 auto;padding:10px 16px 40px}
.search-results .products-grid{margin-top:16px}

/* ---------- Páginas de conteúdo ---------- */
.page-content{padding:12px 0 40px;max-width:860px}
.entry-meta{color:#999;font-size:.85em}
.wc-empty{max-width:640px;margin:40px auto;text-align:center;padding:0 16px 50px}
.wc-empty .big-search{margin:18px auto;max-width:480px}
.live-search-wrap{position:relative;margin:18px auto;max-width:480px}
.live-search-wrap>svg{position:absolute;right:12px;top:12px;width:22px;height:22px;color:#999;pointer-events:none}
.live-search-wrap .live-results{position:absolute;top:100%;left:0;right:0;z-index:20}

/* ---------- Footer ---------- */
.site-footer{margin-top:30px}
.footer-1{background:var(--fundo-claro);border-top:1px solid var(--borda);padding:34px 0}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.footer-cols h3{font-size:1em;text-transform:uppercase;letter-spacing:.4px;margin-top:0}
.footer-cols p{font-size:.9em}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:4px 0}
.footer-links a{color:var(--texto);font-size:.9em}
.footer-links a:hover{color:var(--primario)}
.footer-contact a{display:inline-flex;align-items:center;gap:8px}
.footer-contact svg{width:16px;height:16px;color:var(--primario)}
.footer-2{background:#fff;padding:18px 0 26px;border-top:1px solid var(--borda)}
.footer-bottom{text-align:center}
.pay-icons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.pay-icons img{border-radius:4px}
.copyright{font-size:.85em;color:#8a8a8a;margin:0}

/* ---------- Impressão ---------- */
@media print{
  .site-header,.header-nav,.site-footer,.search-overlay,.offcanvas,.offcanvas-backdrop,.pagination{display:none!important}
  body{font-size:12pt}
}

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .shop-layout{grid-template-columns:1fr}
  .sidebar .widget{display:none}
  .sidebar .widget:first-child{display:block}
  .product-layout{grid-template-columns:1fr}
}
@media (max-width:700px){
  .menu-toggle{display:inline-flex}
  .site-logo img{max-height:64px}
  .header-main{padding:10px 12px}
  .social-link{display:none}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .marcas-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:1fr}
  .header-nav a{padding:10px 14px;font-size:.95em}
  h1{font-size:1.45em}
  .product-figure img{max-height:320px}
}