/* =========================================================
   LeanCommerce — main.css
   Design system enxuto focado em conversão.
   Troque a identidade da loja alterando apenas os tokens.
   ========================================================= */
:root{
  /* Marca — ajuste livre */
  --brand:        #0f766e;   /* cor principal (links ativos, detalhes) */
  --cta:          #e11d48;   /* cor de AÇÃO: comprar, checkout — alto contraste */
  --cta-hover:    #be123c;
  --sale:         #e11d48;   /* badge de promoção */

  /* Neutros */
  --bg:           #ffffff;
  --bg-soft:      #f6f7f8;
  --ink:          #16181d;
  --ink-soft:     #4b5563;
  --stone:        #9ca3af;
  --line:         #e5e7eb;

  --radius:       10px;
  --radius-pill:  999px;
  --shadow-card:  0 1px 3px rgba(0,0,0,.07), 0 6px 18px -8px rgba(0,0,0,.1);
  --shadow-pop:   0 12px 34px -10px rgba(0,0,0,.25);
  --ease:         cubic-bezier(.22,.9,.28,1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1280px;
  --header-h: 68px;
  --topbar-h: 36px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.screen-reader-text,.skip-link{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:8px; left:8px; width:auto; height:auto; clip:auto; z-index:999;
  background:var(--ink); color:#fff; padding:.6em 1em; border-radius:var(--radius);
}
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   TOPBAR / TICKER
   ========================================================= */
.topbar{
  height:var(--topbar-h); background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:.78rem; letter-spacing:.03em; font-weight:600; text-transform:uppercase;
}
.ticker{ position:relative; width:100%; max-width:720px; height:100%; text-align:center; }
.ticker-item{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease);
  padding:0 1rem;
}
.ticker-item.is-active{ opacity:1; transform:translateY(0); }

/* =========================================================
   HEADER FIXO
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:90; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header.scrolled{ box-shadow:0 4px 16px -8px rgba(0,0,0,.12); }
.header-inner{
  max-width:var(--container); margin:0 auto; height:var(--header-h);
  display:flex; align-items:center; gap:1.4rem; padding:0 4vw;
}
.brand{ flex-shrink:0; }
.brand-name{ font-size:1.35rem; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.brand img{ max-height:44px; width:auto; }

.header-search{
  flex:1; display:flex; max-width:480px; border:1.5px solid var(--line);
  border-radius:var(--radius-pill); overflow:hidden; transition:border-color .25s ease;
  background:var(--bg-soft);
}
.header-search:focus-within{ border-color:var(--brand); background:#fff; }
.header-search input[type="search"]{
  flex:1; border:none; background:transparent; padding:.65rem 1.1rem; font-size:.92rem; min-width:0;
}
.header-search input[type="search"]:focus{ outline:none; }
.header-search button{
  border:none; background:transparent; padding:0 1rem; color:var(--ink-soft); display:flex; align-items:center;
}

.primary-nav .menu{ list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; }
.primary-nav a{
  text-decoration:none; font-size:.92rem; font-weight:600; color:var(--ink-soft);
  transition:color .2s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a{ color:var(--ink); }

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
.cart-link{
  position:relative; display:flex; align-items:center; color:var(--ink);
  padding:.45rem; border-radius:50%; transition:background .2s ease;
}
.cart-link:hover{ background:var(--bg-soft); }
.cart-count{
  position:absolute; top:-2px; right:-4px; min-width:18px; height:18px;
  background:var(--cta); color:#fff; font-size:.66rem; font-weight:700;
  border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}

.nav-toggle{ display:none; }

@media (max-width: 900px){
  .header-inner{ flex-wrap:wrap; height:auto; padding:.7rem 4vw; gap:.8rem; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:4px; background:none; border:none; padding:.4rem;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .brand{ order:1; }
  .nav-toggle{ order:0; }
  .header-actions{ order:2; }
  .header-search{ order:3; flex-basis:100%; max-width:none; }
  .primary-nav{ order:4; flex-basis:100%; display:none; }
  .primary-nav.is-open{ display:block; }
  .primary-nav .menu{ flex-direction:column; gap:0; border-top:1px solid var(--line); padding-top:.5rem; }
  .primary-nav .menu a{ display:block; padding:.7rem 0; }
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:700; font-size:.92rem; text-decoration:none; border:none;
  padding:.8rem 1.6rem; border-radius:var(--radius); transition:background .25s ease, transform .2s var(--ease), box-shadow .25s ease;
}
.btn-primary{ background:var(--cta); color:#fff; box-shadow:0 6px 18px -8px rgba(225,29,72,.5); }
.btn-primary:hover{ background:var(--cta-hover); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-lg{ padding:1rem 2.1rem; font-size:1rem; }
.btn-small{ padding:.5rem 1rem; font-size:.8rem; }

/* =========================================================
   HERO + BENEFÍCIOS (home)
   ========================================================= */
.hero{

  color:#fff; text-align:center; padding:5.5rem 4vw 5rem;
}
/* Variante com imagem (definida no Customizer via style="background-image:...").
   O ::before aplica o gradiente escuro por cima, garantindo contraste do texto
   sobre qualquer foto. */
.hero--has-image{
  position:relative; background-size:cover; background-position:center; isolation:isolate;
}
.hero--has-image::before{
  content:''; position:absolute; inset:0; z-index:-1;
}
.hero-inner{ max-width:760px; margin:0 auto; }
.hero-kicker{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700;
  color:rgba(255,255,255,.7); margin:0 0 1rem;
}
.hero-title{ font-size:clamp(2.1rem, 5vw, 3.6rem); line-height:1.06; margin:0 0 1.2rem; letter-spacing:-.02em; }
.hero-sub{ font-size:1.05rem; color:rgba(255,255,255,.85); margin:0 auto 2rem; max-width:34em; }
.hero-ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.hero .btn-ghost:hover{ border-color:#fff; }

.benefits{ border-bottom:1px solid var(--line); background:var(--bg-soft); }
.benefits-inner{
  max-width:var(--container); margin:0 auto; padding:1.1rem 4vw;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center;
}
.benefit strong{ display:block; font-size:.9rem; }
.benefit span{ font-size:.78rem; color:var(--ink-soft); }
@media (max-width:760px){ .benefits-inner{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   SEÇÕES DA HOME
   ========================================================= */
.home-section{ padding:4.5rem 0; }
.home-section--sale{ background:var(--bg-soft); }
.section-inner{ max-width:var(--container); margin:0 auto; padding:0 4vw; }
.section-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:2rem;
}
.section-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin:0; letter-spacing:-.01em; }
.section-more{
  font-size:.88rem; font-weight:700; text-decoration:none; color:var(--brand); white-space:nowrap;
}
.section-more:hover{ text-decoration:underline; }

.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; }
.cat-card{
  text-decoration:none; text-align:center; padding:1.2rem .8rem; border:1px solid var(--line);
  border-radius:var(--radius); transition:box-shadow .25s ease, transform .25s var(--ease);
  background:#fff;
}
.cat-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.cat-thumb{ display:block; margin:0 auto .8rem; width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--bg-soft); }
.cat-thumb img{ width:100%; height:100%; object-fit:cover; }
.cat-thumb-empty{ display:block; width:100%; height:100%; background:linear-gradient(135deg,#e5e7eb,#f3f4f6); }
.cat-name{ display:block; font-weight:700; font-size:.9rem; }
.cat-count{ display:block; font-size:.75rem; color:var(--stone); }
@media (max-width:980px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   WOOCOMMERCE — LOOP DE PRODUTOS (cards)
   ========================================================= */
.woocommerce ul.products{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(230px, 2fr));
  gap:1.4rem; margin:0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none; }
.woocommerce ul.products li.product{
  width:auto !important; float:none !important; margin:0 !important;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .25s ease, transform .25s var(--ease);
  position:relative;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.woocommerce ul.products li.product a img{ width:100%; aspect-ratio:1/1; object-fit:cover; margin:0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.95rem; font-weight:600; padding:.9rem 1rem .2rem; line-height:1.35;
}
.woocommerce ul.products li.product .price{
  padding:0 1rem; color:var(--ink) !important; font-weight:800; font-size:1.05rem;
}
.woocommerce ul.products li.product .price del{ color:var(--stone); font-weight:500; font-size:.85rem; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--cta); }
.woocommerce ul.products li.product .star-rating{ margin:.3rem 1rem 0; }
.woocommerce ul.products li.product .button{
  margin:.9rem 1rem 1.1rem; background:var(--cta); padding:18px; color:#fff; border-radius:var(--radius);
  font-weight:700; text-align:center; transition:background .25s ease;
}
.woocommerce ul.products li.product .button:hover{ background:var(--cta-hover); }
.woocommerce span.onsale{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:var(--sale); color:#fff; font-weight:800; font-size:.72rem;
  min-height:0; min-width:0; line-height:1; padding:.45em .8em; border-radius:var(--radius-pill);
  text-transform:uppercase; letter-spacing:.04em;
}

/* Contagem de resultados + ordenação (nativos do Woo) */
.woocommerce .woocommerce-result-count{ color:var(--ink-soft); font-size:.88rem; }
.woocommerce .woocommerce-ordering select{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:.55rem .9rem;
  font-size:.88rem; background:#fff; font-family:inherit;
}

/* =========================================================
   LOJA — layout com sidebar de filtros
   ========================================================= */
.shop-layout{
  max-width:var(--container); margin:0 auto; padding:2.5rem 4vw 4rem;
  display:grid; grid-template-columns:260px 2fr; gap:2.5rem; align-items:start;
  
}


.shop-content{ min-width:0; }

.filters-toggle{
  display:none; align-items:center; gap:.5em; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius); padding:.65rem 1.1rem; font-weight:700; font-size:.88rem;
  margin-bottom:1.2rem;
}

.shop-filters{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
  position:sticky; top:calc(var(--header-h) + 16px);
}
.filters-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.filters-head strong{ font-size:1rem; }
.filters-close{ display:none; background:none; border:none; font-size:1.6rem; line-height:1; color:var(--stone); }
.filters-clear{
  display:inline-block; font-size:.8rem; color:var(--cta); font-weight:700; margin-bottom:1.2rem;
}

.filter-group{ padding:1.1rem 0; border-top:1px solid var(--line); }
.filter-group:first-of-type{ border-top:none; padding-top:0; }
.filter-title{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);
  margin:0 0 .8rem; font-weight:700;
}

.filter-list{ list-style:none; margin:0; padding:0; }
.filter-list li{ margin:.35rem 0; }
.filter-list a{
  text-decoration:none; font-size:.9rem; color:var(--ink-soft); transition:color .2s ease;
}
.filter-list a:hover{ color:var(--ink); }
.filter-list .current-cat > a{ color:var(--brand); font-weight:700; }
.filter-list .children{ list-style:none; padding-left:1rem; margin:.3rem 0 0; }

.filter-check{
  display:flex; align-items:center; gap:.6em; text-decoration:none; font-size:.9rem; color:var(--ink-soft);
}
.filter-check .check-box{
  width:17px; height:17px; border:1.5px solid var(--stone); border-radius:4px; flex-shrink:0;
  transition:background .2s ease, border-color .2s ease;
}
.filter-check.is-active{ color:var(--ink); font-weight:600; }
.filter-check.is-active .check-box{ background:var(--brand); border-color:var(--brand); }

.price-filter .price-fields{ display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; }
.price-filter input[type="number"]{
  width:100%; min-width:0; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:.5rem .7rem; font-size:.88rem; font-family:inherit;
}
.price-filter .btn-small{ width:100%; background:var(--ink); color:#fff; border-radius:var(--radius); }
.price-filter .btn-small:hover{ background:#000; }

.tag-cloud{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-pill{
  font-size:.78rem; padding:.35em .9em; border:1px solid var(--line); border-radius:var(--radius-pill);
  text-decoration:none; color:var(--ink-soft); transition:all .2s ease;
}
.tag-pill:hover{ border-color:var(--ink); color:var(--ink); }
.tag-pill.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* Off-canvas no mobile */
@media (max-width: 900px){
  .shop-layout{ grid-template-columns:2fr; }
  .filters-toggle{ display:inline-flex; }
  .shop-filters{
    position:fixed; inset:0 auto 0 0; width:min(84vw, 340px); z-index:120;
    border-radius:0; border:none; overflow-y:auto;
    transform:translateX(-105%); transition:transform .35s var(--ease);
    box-shadow:var(--shadow-pop); top:0;
  }
  .shop-filters.is-open{ transform:translateX(0); }
  .filters-close{ display:block; }
  .shop-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:110;
  }
}

/* =========================================================
   PRODUTO INDIVIDUAL
   ========================================================= */
.product-single-wrap{ max-width:var(--container); margin:0 auto; padding:2.5rem 4vw 4rem; }
.woocommerce div.product .product_title{ font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.01em; }
.woocommerce div.product p.price{ font-size:1.6rem; font-weight:800; color:var(--ink); }
.woocommerce div.product p.price ins{ text-decoration:none; color:var(--cta); }
.woocommerce div.product p.price del{ color:var(--stone); font-size:1.05rem; }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit{
  background:var(--cta); color:#fff; border-radius:var(--radius); font-weight:800;
  padding:1rem 2rem; font-size:1rem; transition:background .25s ease;
}
.woocommerce div.product form.cart .button:hover{ background:var(--cta-hover); }
.woocommerce div.product form.cart div.quantity .qty{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:.85rem .4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding-left:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:none; border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom:2px solid var(--brand); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-weight:700; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-color:var(--line); }

/* =========================================================
   CARRINHO / CHECKOUT / NOTICES
   ========================================================= */
.page-wrap{ max-width:var(--container); margin:0 auto; padding:2.5rem 4vw 4rem; }
.page-title{ font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.01em; }

.woocommerce table.shop_table{ border:1px solid var(--line); border-radius:var(--radius); }
.woocommerce table.shop_table th{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce a.checkout-button,
.woocommerce #place_order{
  background:var(--cta) !important; color:#fff !important; border-radius:var(--radius) !important;
  font-weight:800 !important;
}
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover{ background:var(--cta-hover) !important; }
.woocommerce a.checkout-button{ font-size:1.05rem !important; padding:1rem !important; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:.75rem .9rem; font-family:inherit;
}
.woocommerce form .form-row input.input-text:focus{ border-color:var(--brand); outline:none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius:var(--radius); border-top-width:3px;
}
.woocommerce-message{ border-top-color:var(--brand); }
.woocommerce-message a.button{ background:var(--ink); color:#fff; border-radius:var(--radius); }

/* =========================================================
   BLOG / conteúdo genérico
   ========================================================= */
.post-list{ display:grid; gap:1.5rem; max-width:760px; }
.post-card{ border-bottom:1px solid var(--line); padding-bottom:1.5rem; }
.post-card h2{ margin:0 0 .4rem; font-size:1.3rem; }
.post-card a{ text-decoration:none; }
.post-card a:hover{ color:var(--brand); }
.post-meta{ color:var(--stone); font-size:.85rem; }
.entry-content{ max-width:760px; }
.pagination-wrap{ margin-top:2rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:#d1d5db; margin-top:4rem; }
.footer-inner{
  max-width:var(--container); margin:0 auto; padding:3.5rem 4vw 2.5rem;
  display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:3rem;
}
.footer-brand .brand-name{ color:#fff; font-size:1.3rem; font-weight:800; }
/* O logo do rodapé é a MESMA imagem da marca usada no header, sem filtros.
   Dica: se seu logo for escuro e sumir no fundo, envie uma versão clara
   em Personalizar → Identidade do Site, ou clareie o rodapé mudando --ink. */
.footer-brand img{ max-height:44px; width:auto; }
.footer-tagline{ font-size:.88rem; color:#9ca3af; margin-top:.8rem; max-width:26em; }
.footer-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-menu a{ text-decoration:none; font-size:.9rem; color:#d1d5db; transition:color .2s ease; }
.footer-menu a:hover{ color:#fff; }
.footer-trust p{ font-size:.85rem; margin:0 0 1rem; color:#9ca3af; }
.footer-trust strong{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:1.2rem 4vw;
  font-size:.78rem; color:#9ca3af;
}
@media (max-width:760px){ .footer-inner{ grid-template-columns:2fr; gap:2rem; } }

/* =========================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================= */
.whatsapp-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:100;
  display:flex; align-items:center; gap:.6em;
  background:#25d366; color:#fff; text-decoration:none; font-weight:800; font-size:.9rem;
  padding:.85rem 1.3rem; border-radius:var(--radius-pill);
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6);
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.whatsapp-fab:hover{ transform:translateY(-3px); box-shadow:0 14px 32px -8px rgba(37,211,102,.75); }
@media (max-width:560px){
  .whatsapp-fab span{ display:none; }
  .whatsapp-fab{ padding:.9rem; border-radius:50%; }
}