/*
Theme Name: TopImports
Theme URI: https://importsbox.com.br/
Description: Tema de loja para a TopImports — produtos importados dos EUA. Integrado ao WooCommerce, com home, categorias, página de produto e rodapé institucional. Nome provisório.
Author: TopImports
Version: 0.5.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: topimports
*/

/* ================================================================
   TOKENS
   Direção minimalista: fundo branco, um único acento navy, raio de
   2px e nenhuma sombra. A separação entre blocos vem de borda de
   1px e espaço em branco — não de elevação.
   O vermelho da bandeira sobrevive apenas no logo, nunca na interface.
   ================================================================ */
:root{
  /* Paleta ImportsBox, extraída do logotipo.
     A anterior era azul-marinho + vermelho de bandeira americana; com o
     posicionamento deixando de ser "importado dos EUA", ela contradizia
     a marca. --navy vira o grafite do logo e --orange entra como cor de
     ação, que é o papel que ela cumpre no desenho (o selo de conferido). */
  --navy:#13202E; --navy-2:#1E3348;
  --orange:#F0801F; --orange-2:#D96D12;
  --flag-red:#F0801F;                    /* mantido por compatibilidade */
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f8f8f8; --surface-3:#f1f2f3;
  --ink:#000000; --ink-soft:rgba(0,0,0,.70); --ink-faint:rgba(0,0,0,.50);
  --line:#e6e6e6; --line-strong:#d8d8d8; --ok:#1c6b40; --star:#c8951f;
  --accent-soft:#bcdbf5;
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius:2px;
  --sec:88px;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}
.ti-wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.ti-navy{color:var(--navy);}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}

/* ---------- Announcement ---------- */
.ti-announce{background:var(--navy);color:#e8eef5;font-size:13px;}
.ti-announce .ti-wrap{display:flex;gap:30px;justify-content:center;align-items:center;height:38px;flex-wrap:wrap;overflow:hidden;}
.ti-announce b{color:#fff;font-weight:600;} .ti-announce .dot{color:rgba(255,255,255,.45);}

/* ---------- Header ---------- */
.ti-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;}
.ti-head{display:flex;align-items:center;gap:24px;height:84px;}
.ti-logo{height:52px;width:auto;flex:0 0 auto;display:block;}

/* Logotipo enviado pelo dono (Aparência → Identidade do site).
   É empilhado — ícone em cima, letreiro embaixo — então precisa de mais
   altura que um logotipo horizontal para o "IMPORTS BOX" continuar legível. */
/* `align-self:center` no link, não só `align-items` no pai: o link é item
   flex e, sem isto, ele encostava no topo e o logotipo saía 3px para cima,
   invadindo a faixa de avisos. `line-height:0` remove o espaço fantasma que
   a linha de texto reserva embaixo de uma imagem inline. */
/* `align-self:center` alinha o link dentro do cabeçalho flex; sem ele o
   logotipo encostava no topo e invadia a faixa de avisos. Mantido em
   `display:block` — trocar para flex fez a imagem sumir da pintura. */
/* Mantido simples de propósito: tentativas de centralizar com display:flex,
   margin:auto ou font-size:0 fizeram a imagem sumir da renderização. Esta é
   a forma que renderiza de maneira estável; o alinhamento vertical é
   resolvido no .ti-head, com padding, e não aqui. */
.ti-logo-link,.custom-logo-link{display:block;flex:0 0 auto;line-height:0;}

/* `.ti-head` no seletor não é enfeite: o WooCommerce declara
   `.woocommerce img{height:auto}`, que tem especificidade 0,1,1 e vence um
   `.custom-logo` sozinho (0,1,0). Sem este pai, o logotipo era exibido em
   tamanho natural e estourava o cabeçalho em toda página da loja. */
.ti-head .custom-logo{height:62px;width:auto;max-width:none;display:block;object-fit:contain;}
.ti-search{flex:1;display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:0 6px 0 16px;height:46px;max-width:560px;}
.ti-search input[type=search]{border:0;background:transparent;flex:1;font-size:15px;color:var(--ink);outline:none;font-family:inherit;}
.ti-search button{border:0;background:var(--navy);color:#fff;height:34px;padding:0 18px;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .15s ease-in-out;}
.ti-search button:hover{opacity:.85;}
.ti-actions{display:flex;align-items:center;gap:22px;flex:0 0 auto;}
.ti-act{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);transition:color .15s ease-in-out;}
.ti-act:hover{color:var(--ink);}
.ti-act svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.6;}
.ti-cart-badge{background:var(--navy);color:#fff;font-size:11px;font-weight:600;border-radius:var(--radius);min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;}

/* ---------- Category nav ---------- */
/* ---------- Barra de busca e trilha (aparecem no celular) ---------- */
.ti-searchbar{display:none;background:var(--surface);border-bottom:1px solid var(--line);}
/* margin:5px — colado no cabeçalho e no que vem depois. Espaço em branco no
   topo empurra o produto para fora da primeira tela, que é o que decide a
   venda no celular. */
.ti-searchbar form{display:flex;align-items:center;gap:6px;height:38px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:0 4px 0 12px;margin:5px 0;}
.ti-searchbar input[type=search]{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none;}
.ti-searchbar button{border:0;background:var(--navy);border-radius:var(--radius);width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;}
.ti-searchbar svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;}

.ti-crumbs{background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-faint);}
.ti-crumbs .ti-wrap{padding-top:7px;padding-bottom:7px;
  /* Trilha longa rola na horizontal em vez de quebrar em três linhas e
     empurrar o produto para fora da primeira tela. */
  overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.ti-crumbs .ti-wrap::-webkit-scrollbar{display:none;}
.ti-crumbs a{color:var(--ink-soft);}
.ti-crumbs a:hover{color:var(--navy);}
.ti-crumbs .sep{margin:0 7px;color:var(--line-strong);}

.ti-cats{background:var(--surface);border-bottom:1px solid var(--line);}
.ti-cats .ti-wrap{display:flex;align-items:center;gap:2px;height:50px;overflow-x:auto;}
.ti-cats a{font-size:14px;font-weight:500;color:var(--ink-soft);padding:9px 14px;border-radius:var(--radius);white-space:nowrap;transition:color .15s ease-in-out,background-color .15s ease-in-out;}
.ti-cats a:hover{background:var(--surface-2);color:var(--navy);}
.ti-cats ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;}

/* ---------- Submenu do desktop, abrindo no hover ---------- */
/* overflow visible: sem isto o submenu é recortado pela barra. */
.ti-cats,.ti-cats .ti-wrap{overflow:visible;}
.ti-catmenu > li{position:relative;}
.ti-catmenu > li > a{display:inline-flex;align-items:center;gap:6px;}

.ti-seta{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .18s ease;}
.ti-tem-sub:hover > a .ti-seta{transform:rotate(-135deg) translateY(-2px);}

.ti-sub{
  position:absolute;top:100%;left:0;z-index:45;min-width:280px;
  background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--orange);
  box-shadow:0 12px 30px rgba(19,32,46,.13);
  /* visibility + opacity em vez de display:none para a transição existir e
     o teclado continuar alcançando os links. */
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.ti-tem-sub:hover > .ti-sub,
.ti-tem-sub:focus-within > .ti-sub{opacity:1;visibility:visible;transform:translateY(0);}

/* Duas colunas quando há muitas filhas: 28 subcategorias numa coluna só
   passariam da altura da tela. */
.ti-sub-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px;padding:8px;max-height:70vh;overflow-y:auto;}
.ti-sub-in a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;font-size:13.5px;font-weight:400;color:var(--ink-soft);
  border-radius:var(--radius);white-space:normal;line-height:1.3;
}
.ti-sub-in a:hover{background:var(--surface-2);color:var(--navy);}
.ti-sub-n{font-size:11px;color:var(--ink-faint);flex:0 0 auto;}

/* A última categoria da barra abriria para fora da tela pela direita. */
.ti-catmenu > li:nth-last-child(-n+2) > .ti-sub{left:auto;right:0;}

/* ================================================================
   BANNER — a rota
   O gráfico é a própria promessa: uma linha que sai dos EUA e chega
   na casa do cliente. Sem foto de banco de imagem, sem gradiente.
   ================================================================ */
.ti-hero{border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;}
.ti-hero .ti-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:76px 24px;}
.ti-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:0 0 18px;}
.ti-hero h1{font-size:clamp(34px,4.8vw,54px);line-height:1.05;letter-spacing:-.025em;margin:0 0 20px;font-weight:700;text-wrap:balance;}
.ti-hero h1 em{font-style:normal;color:var(--navy);}
.ti-hero p.lede{font-size:17px;color:var(--ink-soft);margin:0 0 30px;max-width:48ch;}
.ti-cta{display:flex;gap:12px;flex-wrap:wrap;}
.ti-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 30px;border-radius:var(--radius);font-weight:500;font-size:17px;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:opacity .15s ease-in-out;}
.ti-btn:hover{opacity:.84;}
.ti-btn-primary{background:var(--navy);color:#fff;}
.ti-btn-primary:hover{background:var(--navy);color:#fff;}
.ti-btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy);}

/* Selos factuais — política da loja, não métrica inventada. */
.ti-facts{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;}
.ti-facts div{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);max-width:19ch;}
.ti-facts svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;stroke:var(--navy);fill:none;stroke-width:1.8;}

/* O mapa da rota */
.ti-route{width:100%;height:auto;display:block;}
.ti-route .r-line{stroke:var(--navy);stroke-width:1.5;fill:none;stroke-dasharray:5 5;}
.ti-route .r-hair{stroke:var(--line);stroke-width:1;fill:none;}
.ti-route .r-land{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1;}
.ti-route .r-dot{fill:var(--navy);}
.ti-route .r-ring{fill:none;stroke:var(--navy);stroke-width:1;opacity:.35;}
.ti-route .r-label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;fill:var(--ink-faint);text-transform:uppercase;}
.ti-route .r-note{font-family:var(--sans);font-size:12.5px;font-weight:500;fill:var(--ink-soft);}
.ti-route .r-box{fill:var(--surface);stroke:var(--line);stroke-width:1;}

@media (prefers-reduced-motion:no-preference){
  .ti-route .r-line{stroke-dashoffset:520;animation:ti-draw 1.5s cubic-bezier(.4,0,.2,1) .15s forwards;}
  .ti-route .r-plane{opacity:0;animation:ti-fade .5s ease-out 1.35s forwards;}
  .ti-route .r-arrive{opacity:0;animation:ti-fade .5s ease-out 1.5s forwards;}
}
@keyframes ti-draw{to{stroke-dashoffset:0;}}
@keyframes ti-fade{to{opacity:1;}}

/* ---------- Benefits strip ---------- */
.ti-strip{background:var(--surface);border-bottom:1px solid var(--line);}
.ti-strip .ti-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:28px 24px;}
.ti-strip .b{display:flex;gap:12px;align-items:center;}
.ti-strip .b b{display:block;color:var(--ink);font-size:14px;font-weight:600;}
.ti-strip .b span{font-size:12.5px;color:var(--ink-faint);}
.ti-strip .b svg{width:26px;height:26px;color:var(--navy);flex:0 0 auto;}

/* ---------- Sections ---------- */
.ti-sec{padding:var(--sec) 0;}
.ti-sechead{max-width:680px;margin:0 auto 44px;text-align:center;}
.ti-sechead h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.018em;margin:6px 0 10px;font-weight:600;text-wrap:balance;}
.ti-sechead p{color:var(--ink-soft);margin:0;font-size:16px;}

.ti-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ti-cat{position:relative;border-radius:var(--radius);overflow:hidden;min-height:180px;display:flex;align-items:flex-end;padding:24px;border:1px solid var(--line);background:var(--surface);transition:border-color .15s ease-in-out;}
.ti-cat:hover{border-color:var(--navy);}
.ti-cat h3{margin:0;font-size:21px;font-weight:600;color:var(--ink);}
.ti-cat p{margin:5px 0 0;font-size:13.5px;color:var(--ink-faint);}
.ti-cat .em{position:absolute;right:20px;top:18px;font-size:34px;opacity:.9;}

.ti-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ti-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;}
.ti-step .num{width:34px;height:34px;border-radius:var(--radius);background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;margin-bottom:16px;font-size:15px;}
.ti-step h4{margin:0 0 8px;font-size:16px;font-weight:600;} .ti-step p{margin:0;color:var(--ink-soft);font-size:14px;}

.ti-whys{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ti-why{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;}
.ti-why .ic{width:40px;height:40px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:14px;color:var(--navy);}
.ti-why h4{margin:0 0 8px;font-size:16px;font-weight:600;} .ti-why p{margin:0;color:var(--ink-soft);font-size:14px;}

.ti-band{background:var(--navy);color:#fff;border-radius:var(--radius);padding:52px 44px;text-align:center;}
.ti-band h2{margin:0 0 10px;font-size:28px;color:#fff;font-weight:600;letter-spacing:-.015em;}
.ti-band p{margin:0 0 26px;color:rgba(255,255,255,.75);}
.ti-band .ti-btn-primary{background:#fff;color:var(--navy);}
.ti-band .ti-btn-primary:hover{background:#fff;color:var(--navy);}

/* ---------- Page (institucional) ---------- */
.ti-page{max-width:760px;margin:0 auto;padding:56px 24px 88px;}
.ti-page h1{font-size:34px;letter-spacing:-.022em;margin:0 0 8px;font-weight:700;}
.ti-page h2{font-size:22px;margin:30px 0 10px;font-weight:600;} .ti-page h3{font-size:16px;margin:22px 0 6px;font-weight:600;}
.ti-page p,.ti-page li{color:var(--ink-soft);font-size:15.5px;} .ti-page li{margin:6px 0;}

/* ---------- Footer ---------- */
.ti-footer{background:var(--surface);border-top:1px solid var(--line);margin-top:0;}
.ti-foottop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding:56px 0 40px;}
.ti-foottop h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px;font-weight:600;}
.ti-foottop ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.ti-foottop a{color:var(--ink-soft);font-size:14px;transition:color .15s ease-in-out;} .ti-foottop a:hover{color:var(--navy);}
.ti-foot-brand p{color:var(--ink-soft);font-size:14px;margin:14px 0 0;max-width:34ch;}
.ti-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ti-pay span{font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:5px 9px;}
/* Botão de WhatsApp.
   O verde oficial do WhatsApp é reconhecido na hora — usar a cor da marca
   aqui faria o botão parecer só mais um link. O ponto pulsante sinaliza
   atendimento ativo, que é o que faz o cliente clicar. */
.ti-wa{
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;border:0;border-radius:999px;
  padding:12px 20px;font-weight:600;font-size:15px;line-height:1;
  box-shadow:0 2px 10px rgba(37,211,102,.32);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.ti-wa:hover{background:#1FBE5A;transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,211,102,.4);color:#fff;}
.ti-wa:active{transform:translateY(0);}
.ti-wa .ti-wa-ico{flex:0 0 auto;}

/* Variante discreta, para dentro de texto corrido. */
.ti-wa--linha{background:transparent;color:#128C4A;border:1.5px solid #25D366;box-shadow:none;}
.ti-wa--linha:hover{background:rgba(37,211,102,.08);color:#0F7A40;transform:none;box-shadow:none;}

/* Ponto de "online" com pulso. Respeita quem pediu menos animação. */
.ti-wa-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:0 0 auto;position:relative;}
.ti-wa-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;opacity:.6;}
@media (prefers-reduced-motion:no-preference){
  .ti-wa-dot::after{animation:ti-pulse 1.9s ease-out infinite;}
}
@keyframes ti-pulse{from{transform:scale(1);opacity:.6;} to{transform:scale(2.6);opacity:0;}}

/* Sem número preenchido o botão não pode parecer clicável. */
.ti-wa.is-todo{background:var(--surface-3);color:var(--ink-faint);box-shadow:none;cursor:not-allowed;}

/* Botão flutuante: acompanha a rolagem na página inteira. */
.ti-wa-float{
  position:fixed;right:18px;bottom:18px;z-index:50;
  padding:14px 20px;box-shadow:0 6px 22px rgba(37,211,102,.42);
}
@media (max-width:860px){
  /* No celular só o ícone, para não tapar o botão de comprar. */
  .ti-wa-float{right:14px;bottom:14px;padding:15px;border-radius:50%;}
  .ti-wa-float span:not(.ti-wa-dot){display:none;}
  .ti-wa-float .ti-wa-dot{position:absolute;top:11px;right:11px;background:#fff;}
}
.ti-legal{border-top:1px solid var(--line);padding:24px 0 52px;color:var(--ink-faint);font-size:12px;line-height:1.7;}

/* ================= WooCommerce ================= */
/* `main.ti-wrap`, não `.ti-wrap` solto.
   O cabeçalho, a barra de busca e a trilha TAMBÉM usam .ti-wrap. Sem o
   `main`, este respiro de conteúdo era aplicado neles em toda página com a
   classe `woocommerce` no body — e o topo da loja e da ficha de produto
   ficava 2,4x mais alto que o da página inicial, que não tem essa classe. */
.woocommerce main.ti-wrap, .woocommerce-page main.ti-wrap{padding-top:36px;padding-bottom:72px;}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px !important;
  transition:border-color .15s ease-in-out;list-style:none;}
.woocommerce ul.products li.product:hover{border-color:var(--navy);}
.woocommerce ul.products li.product a img{border-radius:var(--radius);margin-bottom:12px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px !important;font-weight:500;padding:0 !important;color:var(--ink);line-height:1.45;}
.woocommerce ul.products li.product .price{color:var(--ink) !important;font-weight:600;}
.woocommerce ul.products li.product .price del{color:#a4a8a5;font-weight:400;}

/* Par de botões: ação secundária contornada, principal preenchida. */
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce input.button, .woocommerce ul.products li.product .button{
  background:transparent !important;color:var(--navy) !important;border-radius:var(--radius) !important;
  font-weight:500 !important;padding:.75em 1.3em !important;border:1px solid var(--navy) !important;
  font-family:inherit !important;transition:opacity .15s ease-in-out !important;}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce ul.products li.product .button:hover{opacity:.8;}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce div.product form.cart .button{
  background:var(--navy) !important;color:#fff !important;border-color:var(--navy) !important;}
.woocommerce div.product form.cart .button{height:57px;font-size:18px !important;}

.woocommerce span.onsale{background:var(--navy) !important;color:#fff !important;border-radius:var(--radius);font-weight:500;}
.woocommerce .star-rating span{color:var(--star);}
.woocommerce div.product .product_title{font-size:30px;letter-spacing:-.02em;color:var(--ink);font-weight:600;}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--ink);font-weight:600;font-size:26px;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--navy);}
.woocommerce .woocommerce-breadcrumb{color:var(--ink-faint);font-size:13px;margin-bottom:20px;}
.woocommerce-message, .woocommerce-info{border-top-color:var(--navy) !important;}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering{color:var(--ink-soft);}
h1.entry-title, .woocommerce-products-header__title{font-size:32px;letter-spacing:-.02em;margin:0 0 20px;font-weight:600;}

/* Variações em botão de borda fina, no lugar da lista suspensa padrão. */
.woocommerce div.product form.cart .variations select{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font-family:inherit;background:var(--surface);}
.woocommerce div.product form.cart .variations label{font-weight:600;font-size:14px;}

/* ==========================================================================
   GAVETA DE NAVEGAÇÃO (celular)
   O checkbox #ti-nav fica escondido e comanda tudo por seletor de irmão.
   Sem JavaScript: menu é o caminho para o catálogo e não pode depender de
   script que falha ou demora.
   ========================================================================== */
.ti-nav-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}

.ti-burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:0 9px;margin-left:2px;}
.ti-burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}

.ti-scrim{display:none;position:fixed;inset:0;background:rgba(15,23,35,.5);z-index:60;opacity:0;transition:opacity .22s ease;}
.ti-nav-toggle:checked ~ .ti-scrim{display:block;opacity:1;}

.ti-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);z-index:61;
  background:var(--surface);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .24s ease;
  box-shadow:-8px 0 28px rgba(15,23,35,.14);overflow-y:auto;
  /* Respeita a faixa inferior do iPhone; sem isto o último item fica sob ela. */
  padding-bottom:env(safe-area-inset-bottom,0);
}
.ti-nav-toggle:checked ~ .ti-drawer{transform:translateX(0);}

.ti-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.ti-drawer-title{font-weight:600;font-size:15px;color:var(--ink);}
.ti-drawer-x{font-size:30px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 6px;}

.ti-drawer-search{display:flex;align-items:center;gap:6px;margin:14px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);height:44px;padding:0 6px 0 14px;}
.ti-drawer-search input[type=search]{flex:1;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none;min-width:0;}
.ti-drawer-search button{border:0;background:transparent;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;padding:0;}
.ti-drawer-search svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.8;}

/* Menu sanfona: <details>/<summary>, sem JavaScript. */
.ti-drawer-menu,.ti-dm-sub{list-style:none;margin:0;padding:0;}
.ti-dm-item{border-bottom:1px solid var(--line);}

.ti-drawer-nav a,.ti-drawer-nav summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;font-size:15px;color:var(--ink);font-weight:500;
  /* 48px é o alvo de toque mínimo confortável no celular. */
  min-height:48px;line-height:1.3;cursor:pointer;
}
.ti-drawer-nav summary{list-style:none;}
.ti-drawer-nav summary::-webkit-details-marker{display:none;}

/* Seta desenhada em CSS: gira ao abrir, sem imagem nem ícone extra. */
.ti-drawer-nav summary::after{
  content:"";flex:0 0 auto;width:9px;height:9px;margin-left:auto;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:rotate(-45deg);transition:transform .2s ease;
}
.ti-drawer-nav details[open] > summary::after{transform:rotate(45deg);}
.ti-drawer-nav details[open] > summary{color:var(--orange);font-weight:600;}

.ti-dm-sub{background:var(--surface-2);border-top:1px solid var(--line);}
.ti-dm-sub li + li{border-top:1px solid var(--line);}
.ti-dm-sub a{padding-left:34px;font-size:14px;font-weight:400;color:var(--ink-soft);min-height:44px;}
.ti-dm-sub em{font-style:normal;color:var(--orange);font-weight:600;}

/* Contagem de produtos, discreta à direita. */
.ti-dm-n{
  flex:0 0 auto;font-size:11px;font-weight:600;color:var(--ink-faint);
  background:var(--surface-3);border-radius:999px;padding:2px 8px;min-width:22px;text-align:center;
}
.ti-dm-sub .ti-dm-n{background:transparent;padding:0;}

.ti-drawer-nav a:active,.ti-drawer-nav summary:active{background:var(--surface-2);}

.ti-drawer-foot{margin-top:auto;padding:18px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);}
.ti-drawer-foot a{font-size:14px;color:var(--ink-soft);padding:8px 0;}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width:900px){
  .ti-hero .ti-wrap{grid-template-columns:1fr;gap:44px;padding:52px 24px;}
  .ti-strip .ti-wrap,.ti-steps,.ti-whys{grid-template-columns:repeat(2,1fr);}
  .ti-cat-grid{grid-template-columns:1fr;}
  .ti-foottop{grid-template-columns:1fr 1fr;}
  :root{--sec:64px;}
}

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width:860px){
  /* Nada pode furar a largura da tela. Um único elemento largo demais cria
     rolagem horizontal na página inteira, que é o defeito mais visível. */
  html,body{overflow-x:hidden;max-width:100%;}
  img,video,iframe,table{max-width:100%;height:auto;}

  .ti-wrap{padding-left:16px;padding-right:16px;}

  /* Cabeçalho compacto em três zonas: hambúrguer à esquerda, logotipo ao
     centro, ícones à direita. A busca sai daqui e vira barra própria abaixo,
     onde ela cabe inteira. */
  .ti-searchbar{display:block;}
  .ti-burger{display:flex;order:-1;margin:0;}
  .ti-logo-link,.custom-logo-link{margin:0 auto;}   /* centraliza o logotipo */
  .ti-actions{margin-left:0;}

  /* Cabeçalho: ícones sem texto. */
  /* Tudo apertado de propósito: o topo (aviso + cabeçalho + busca + trilha)
     estava comendo metade da tela antes do primeiro produto. Numa loja, o
     que vende é o produto aparecer sem rolagem.
     `height:auto` + padding em vez de altura fixa faz o cabeçalho acompanhar
     o logotipo, em vez de o logotipo transbordar sobre a faixa de avisos. */
  .ti-head{height:auto;min-height:0;padding-top:5px;padding-bottom:5px;gap:8px;}
  .ti-logo{height:30px;}
  /* 34px de altura basta no logotipo DEITADO: a altura toda vira letreiro,
     em vez de se dividir entre símbolo e texto como na versão empilhada. */
  .ti-head .custom-logo{height:34px;}
  .ti-search{display:none;}
  .ti-cats{display:none;}
  .ti-burger{display:flex;}
  .ti-actions{gap:4px;margin-left:auto;}
  .ti-act span:not(.ti-cart-badge){display:none;}
  .ti-act{padding:9px 6px;}
  .ti-act svg{width:24px;height:24px;}
  .ti-act-cart{position:relative;}
  .ti-cart-badge{position:absolute;top:2px;right:-2px;}

  /* Faixa de avisos: em 375px cabe UMA mensagem. Tentar espremer as três
     quebrava em duas linhas e deixava os separadores soltos no fim da linha.
     Fica a primeira, que é o argumento mais forte de venda. */
  .ti-announce{font-size:11.5px;}
  .ti-announce .ti-wrap{height:28px;min-height:0;gap:0;padding:0 16px;flex-wrap:nowrap;overflow:hidden;}
  .ti-crumbs .ti-wrap{padding-top:6px;padding-bottom:6px;}
  .ti-announce .ti-wrap > span:nth-child(n+2){display:none;}
  .ti-announce .ti-wrap > span:first-child{white-space:nowrap;}

  /* Grade de produtos: duas colunas, como na referência. O WooCommerce usa
     float com largura em porcentagem; grid substitui e alinha de verdade. */
  .woocommerce ul.products,.woocommerce-page ul.products{
    display:grid !important;grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;margin:0 !important;
  }
  .woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important;}
  .woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
    width:100% !important;margin:0 !important;float:none !important;
    padding:10px !important;display:flex;flex-direction:column;
  }
  /* Imagem quadrada em todas as fichas: é o que faz a grade parecer alinhada
     mesmo com fotos de proporções diferentes vindas do fornecedor. */
  .woocommerce ul.products li.product a img{
    aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:10px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:13px !important;line-height:1.35;
    /* Título de 3 linhas no máximo: sem isto, um título de fornecedor com 20
       palavras empurra o preço para baixo e desalinha a linha inteira. */
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(3 * 1.35em);
  }
  .woocommerce ul.products li.product .price{font-size:15px !important;margin-top:auto;}
  .woocommerce ul.products li.product .button{width:100%;text-align:center;margin-top:8px;}

  .woocommerce main.ti-wrap,.woocommerce-page main.ti-wrap{padding-top:14px;padding-bottom:36px;}
  h1.entry-title,.woocommerce-products-header__title{font-size:21px;margin:0 0 4px;}
  /* Contagem e ordenação lado a lado, como na referência: duas linhas
     inteiras só para isso empurravam o produto para fora da primeira tela. */
  .woocommerce .woocommerce-result-count{float:none;margin:0;font-size:12.5px;flex:1;}
  .woocommerce .woocommerce-ordering{float:none;margin:0;flex:0 0 auto;max-width:56%;}
  .woocommerce .woocommerce-ordering select{width:100%;height:38px;font-size:13px;padding:0 8px;}
  .woocommerce-products-header + .woocommerce-notices-wrapper + .woocommerce-result-count,
  .woocommerce .woocommerce-result-count{display:block;}
  /* Envolve os dois numa linha só. */
  .woocommerce ul.products{clear:both;}
  .woocommerce main.ti-wrap > .woocommerce-result-count,
  .woocommerce main.ti-wrap > .woocommerce-ordering{display:inline-block;vertical-align:middle;}

  /* Página do produto: uma coluna. */
  .woocommerce div.product div.images,.woocommerce div.product div.summary{width:100% !important;float:none !important;margin:0 0 20px !important;}
  /* Miniaturas da galeria: o WooCommerce usa float com largura em
     porcentagem e a última linha fica com peças de tamanhos diferentes.
     Grade fixa de 4 mantém todas do mesmo tamanho, cheia ou pela metade. */
  .woocommerce div.product .flex-control-thumbs{
    display:grid !important;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 0 !important;
  }
  .woocommerce div.product .flex-control-thumbs li{width:100% !important;float:none !important;margin:0 !important;}
  .woocommerce div.product .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);}

  .woocommerce div.product .product_title{font-size:21px;line-height:1.3;}
  /* Sem isto sobra um vão morto entre as opções e o botão de compra. */
  .woocommerce div.product form.cart .variations{margin-bottom:10px !important;}
  .woocommerce div.product form.cart .single_variation_wrap{margin-top:0;}
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;gap:8px;align-items:stretch;}
  .woocommerce div.product form.cart .quantity{flex:0 0 74px;}
  .woocommerce div.product form.cart .quantity input.qty{width:100%;height:52px;text-align:center;}
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart .button{flex:1;margin:0;}
  /* Rótulo e opções empilham: em 375px, rótulo à esquerda espreme os botões. */
  .woocommerce div.product form.cart table.variations tr,
  .woocommerce div.product form.cart table.variations td,
  .woocommerce div.product form.cart table.variations th{display:block;width:100%;padding:0 !important;text-align:left;}
  .woocommerce div.product form.cart table.variations th{margin-bottom:6px;font-weight:600;}
  .woocommerce div.product p.price,.woocommerce div.product span.price{font-size:22px;}
  .woocommerce div.product form.cart .button{width:100%;height:52px;font-size:16px !important;}
  .woocommerce div.product form.cart .variations select{width:100%;height:46px;}
  .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0 !important;}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{display:block;width:100%;margin:0 0 4px;border-radius:var(--radius);}

  /* Tabelas de carrinho e checkout não cabem em 375px: rolam na própria caixa
     em vez de esticar a página. */
  .woocommerce table.shop_table,.woocommerce-cart table.cart{display:block;overflow-x:auto;white-space:nowrap;}
  .woocommerce-cart .wc-proceed-to-checkout a.button{width:100%;text-align:center;}

  /* Rodapé */
  .ti-strip .ti-wrap,.ti-steps,.ti-whys,.ti-foottop{grid-template-columns:1fr;}
  .ti-facts{gap:16px;}
  .ti-facts div{max-width:100%;}
  .ti-band{padding:38px 20px;}
}

/* Telas bem estreitas: mantém duas colunas, só aperta o respiro. */
@media (max-width:380px){
  .ti-wrap{padding-left:12px;padding-right:12px;}
  .woocommerce ul.products,.woocommerce-page ul.products{gap:10px !important;}
  .woocommerce ul.products li.product{padding:8px !important;}
  .ti-logo{height:34px;}
}

/* ==========================================================================
   INDICE IMPORTBOX
   Monoline, sem escudo e sem coroa de louros: esses elementos leem como
   imitacao de orgao certificador, que e exatamente a leitura proibida.
   A autoridade vem do numeral e do rigor tipografico.
   ========================================================================== */
.ib-lockup{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin:18px 0 22px;}

.ib-badge{
  display:inline-flex;flex-direction:column;gap:5px;
  border:1px solid var(--line);padding:12px 16px;border-radius:var(--radius);
}
.ib-badge-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.ib-badge-n{font-size:34px;line-height:1;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.ib-badge-n em{font-style:normal;font-size:13px;font-weight:500;color:var(--ink-soft);margin-left:2px;}
.ib-badge-r{font-size:11px;color:var(--ink-soft);letter-spacing:.02em;}

.ib-selo{
  display:inline-flex;flex-direction:column;justify-content:center;gap:3px;
  border:1px solid var(--navy);color:var(--navy);
  padding:12px 16px;border-radius:var(--radius);
}
.ib-selo-t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;}
.ib-selo-m{font-size:18px;font-weight:700;line-height:1;letter-spacing:-.01em;}
.ib-selo--destaque{border-color:#8A6B2F;color:#8A6B2F;background:#FBF7EE;}

.ib-porque{
  border-top:1px solid var(--line);margin:26px 0 0;padding:20px 0 0;
}
.ib-porque-h{font-size:15px;font-weight:600;margin:0 0 12px;color:var(--ink);}
.ib-porque-l{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;}
.ib-porque-l li{position:relative;padding-left:16px;font-size:14px;color:var(--ink-soft);line-height:1.5;}
.ib-porque-l li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--navy);}
.ib-porque-rank{font-size:14px;color:var(--ink);margin:0 0 14px;font-weight:500;}
.ib-porque-fine{font-size:11.5px;line-height:1.65;color:var(--ink-soft);margin:0;}
.ib-porque-fine a{color:var(--navy);text-decoration:underline;}

.ib-chip{
  display:inline-flex;align-items:baseline;gap:5px;margin:6px 0 2px;
  border:1px solid var(--line);border-radius:var(--radius);padding:3px 8px;
}
.ib-chip-n{font-size:14px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;}
.ib-chip-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.ib-chip--selo{border-color:var(--navy);}

@media (max-width:600px){
  .ib-badge-n{font-size:30px;}
  .ib-lockup{gap:10px;}
}
/* Explicador do indice: <details> nativo, sem JS. */
.ib-info{display:inline;position:relative;}
.ib-info summary{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:5px;vertical-align:middle;
  border:1px solid currentColor;border-radius:50%;
  font-size:9px;line-height:1;cursor:pointer;opacity:.65;list-style:none;
}
.ib-info summary::-webkit-details-marker{display:none;}
.ib-info summary:hover,.ib-info[open] summary{opacity:1;}
.ib-info-b{
  position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:280px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(16,22,40,.16);padding:14px 16px;
  text-transform:none;letter-spacing:0;
}
.ib-info-b strong{display:block;font-size:12.5px;color:var(--navy);margin-bottom:6px;}
.ib-info-b p{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 8px;}
.ib-info-b a{font-size:12px;color:var(--navy);text-decoration:underline;}
@media (max-width:520px){ .ib-info-b{width:min(280px,78vw);} }
/* ==========================================================================
   HOME IMPORTSBOX
   A curadoria e o produto, entao o Indice vem antes do preco em todo lugar.
   Laranja e cor de assinatura do Indice: nao usar em botao comum, senao ela
   deixa de significar "aqui tem nota" e vira so mais uma cor.
   ========================================================================== */

/* --- botoes --------------------------------------------------------------- */
.ti-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.ti-btn-p{background:var(--navy);color:#fff;border:1px solid var(--navy);}
.ti-btn-p:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff;}
.ti-btn-s{background:transparent;color:var(--navy);border:1px solid var(--line-strong);}
.ti-btn-s:hover{border-color:var(--navy);}

/* --- secoes --------------------------------------------------------------- */
.ti-sec{padding:var(--sec) 0;}
.ti-sec-alt{background:var(--surface-2);}
.ti-sec-h{max-width:56ch;margin:0 0 40px;}
.ti-sec-h h2{
  font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.02em;
  font-weight:700;margin:0 0 10px;color:var(--ink);text-wrap:balance;
}
.ti-sec-h p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0;}
.ti-sec-cta{margin-top:36px;}

/* --- 01 hero -------------------------------------------------------------- */
.ti-h1{padding:76px 0 68px;border-bottom:1px solid var(--line);}
.ti-h1-grid{display:grid;gap:56px;align-items:center;}
@media (min-width:960px){.ti-h1-grid{grid-template-columns:1.05fr .95fr;gap:72px;}}

.ti-h1-t{
  font-size:clamp(36px,5.6vw,60px);line-height:1.04;letter-spacing:-.035em;
  font-weight:700;margin:0 0 22px;color:var(--ink);text-wrap:balance;
}
.ti-h1-t span{display:block;color:var(--ink-faint);}
.ti-h1-s{font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:0 0 30px;}
.ti-h1-cta{display:flex;gap:12px;flex-wrap:wrap;}
.ti-h1-n{font-size:13px;color:var(--ink-faint);margin:24px 0 0;}

/* O produto do hero e a prova da tese: nota antes de tudo. */
.ti-h1-prod{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:border-color .2s ease;
}
.ti-h1-prod:hover{border-color:var(--line-strong);}
.ti-h1-prod-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:22px;}
.ti-h1-prod-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease;}
.ti-h1-prod:hover .ti-h1-prod-img img{transform:scale(1.03);}
.ti-h1-prod-idx{display:flex;flex-direction:column;gap:3px;padding:16px 0 14px;border-top:1px solid var(--line);}
.ti-h1-prod-idx .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}
.ti-h1-prod-idx .n{font-size:46px;line-height:1;font-weight:700;color:var(--orange);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.ti-h1-prod-idx .n i{font-style:normal;font-size:15px;font-weight:500;color:var(--ink-faint);margin-left:3px;}
.ti-h1-prod-idx .r{font-size:12.5px;color:var(--ink-soft);}
.ti-h1-prod-nome{display:block;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.4;}

/* --- 02 provas ------------------------------------------------------------ */
.ti-provas{border-bottom:1px solid var(--line);}
.ti-provas-g{display:grid;grid-template-columns:repeat(2,1fr);}
@media (min-width:820px){.ti-provas-g{grid-template-columns:repeat(4,1fr);}}
.ti-prova{padding:26px 22px 26px 0;display:flex;flex-direction:column;gap:4px;}
.ti-prova b{font-size:14px;font-weight:600;color:var(--ink);}
.ti-prova span{font-size:13px;color:var(--ink-soft);line-height:1.45;}

/* --- 03 categorias -------------------------------------------------------- */
.ti-catg{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
@media (min-width:760px){.ti-catg{grid-template-columns:repeat(3,1fr);}}
.ti-catc{
  display:flex;flex-direction:column;background:var(--surface-2);
  border-radius:var(--radius);overflow:hidden;transition:background-color .2s ease;
}
.ti-catc:hover{background:var(--surface-3);}
.ti-catc-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-3);}
.ti-catc-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.ti-catc:hover .ti-catc-img img{transform:scale(1.04);}
.ti-catc-nome{padding:16px 18px 2px;font-size:16px;font-weight:600;color:var(--ink);}
.ti-catc-n{padding:0 18px 18px;font-size:12.5px;color:var(--ink-faint);}

/* --- 04 grade de produtos ------------------------------------------------- */
.ti-pgrid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);}
@media (min-width:720px){.ti-pgrid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1040px){.ti-pgrid{grid-template-columns:repeat(4,1fr);}}
.ti-pgrid-4{grid-template-columns:repeat(2,1fr);}
@media (min-width:1040px){.ti-pgrid-4{grid-template-columns:repeat(4,1fr);}}

.ti-pcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s ease;
}
.ti-pcard:hover{border-color:var(--line-strong);}
.ti-pcard-img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;}
.ti-pcard-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease;}
.ti-pcard:hover .ti-pcard-img img{transform:scale(1.04);}
.ti-pcard-top{
  position:absolute;top:10px;left:10px;
  background:var(--navy);color:#fff;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius);
}
.ti-pcard-b{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}

/* O Indice antes do nome e do preco: e o que diferencia a loja. */
.ti-pcard-idx{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
.ti-pcard-idx b{font-size:22px;font-weight:700;color:var(--orange);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.ti-pcard-idx i{font-style:normal;font-size:11px;color:var(--ink-faint);}
.ti-pcard-idx em{font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);width:100%;margin-top:1px;}
.ti-pcard-cat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.ti-pcard-nome{font-size:14px;font-weight:500;color:var(--ink);line-height:1.4;}
.ti-pcard-rank{font-size:12px;color:var(--ink-soft);}
.ti-pcard-preco{margin-top:auto;padding-top:8px;font-size:17px;font-weight:700;color:var(--ink);}
.ti-pcard-preco del{font-weight:400;font-size:13px;color:var(--ink-faint);margin-right:5px;}
.ti-pcard-preco ins{text-decoration:none;}

/* --- 05 voce ve a nota ---------------------------------------------------- */
.ti-nota{padding:var(--sec) 0;background:var(--navy);color:#fff;}
.ti-nota-g{display:grid;gap:48px;align-items:start;}
@media (min-width:900px){.ti-nota-g{grid-template-columns:1fr 1fr;gap:72px;}}
.ti-nota-t{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0 0 18px;color:#fff;}
.ti-nota-t span{color:var(--orange);}
.ti-nota-p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);max-width:48ch;margin:0 0 28px;}
.ti-nota .ti-btn-p{background:#fff;color:var(--navy);border-color:#fff;}
.ti-nota .ti-btn-p:hover{background:rgba(255,255,255,.88);color:var(--navy);}

.ti-pilares{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.14);}
.ti-pilares li{background:var(--navy);padding:20px 0 20px 0;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:baseline;}
.ti-pilares .i{grid-row:span 2;font-size:12px;font-weight:600;color:var(--orange);letter-spacing:.08em;}
.ti-pilares b{font-size:15.5px;font-weight:600;color:#fff;}
.ti-pilares .d{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62);}

/* --- 06 por necessidade --------------------------------------------------- */
.ti-nec{display:flex;flex-wrap:wrap;gap:10px;}
.ti-nec a{
  display:inline-flex;align-items:center;padding:13px 20px;
  border:1px solid var(--line-strong);border-radius:999px;
  font-size:14.5px;color:var(--ink);transition:border-color .18s ease,background-color .18s ease;
}
.ti-nec a:hover{border-color:var(--navy);background:var(--surface-2);}

/* --- 08 passos ------------------------------------------------------------ */
.ti-passos{list-style:none;margin:0;padding:0;display:grid;gap:28px;grid-template-columns:1fr;}
@media (min-width:760px){.ti-passos{grid-template-columns:repeat(4,1fr);gap:32px;}}
.ti-passos li{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:2px solid var(--navy);}
.ti-passos .i{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--orange);}
.ti-passos b{font-size:16px;font-weight:600;color:var(--ink);}
.ti-passos span:not(.i){font-size:13.5px;line-height:1.5;color:var(--ink-soft);}

/* --- 09 faq --------------------------------------------------------------- */
.ti-faq-w{max-width:820px;}
.ti-faq{border-top:1px solid var(--line-strong);}
.ti-faq details{border-bottom:1px solid var(--line);}
.ti-faq summary{
  list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--ink);
}
.ti-faq summary::-webkit-details-marker{display:none;}
.ti-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.ti-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.ti-faq p{margin:0;padding:0 0 22px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:66ch;}

@media (prefers-reduced-motion:reduce){
  .ti-pcard-img img,.ti-catc-img img,.ti-h1-prod-img img{transition:none;}
  .ti-pcard:hover .ti-pcard-img img,.ti-catc:hover .ti-catc-img img,.ti-h1-prod:hover .ti-h1-prod-img img{transform:none;}
}

@media (max-width:640px){
  :root{--sec:56px;}
  .ti-h1{padding:44px 0 40px;}
  .ti-h1-cta .ti-btn{flex:1 1 100%;}
  .ti-prova{padding:20px 16px 20px 0;}
}
/* ================================================================
   CHECKOUT SEM DISTRAÇÕES
   ----------------------------------------------------------------
   Cabeçalho e rodapé mínimos na tela de pagamento. Sem menu, busca,
   categorias ou trilha: na hora de pagar, todo link é uma saída.
   ================================================================ */

.ti-co-head{background:var(--surface);border-bottom:1px solid var(--line);padding:18px 0;}
.ti-co-head .ti-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.ti-co-logo{display:inline-flex;align-items:center;text-decoration:none;}

/* Especificidade: `.woocommerce img{height:auto}` (0,1,1) vence `.custom-logo`
   (0,1,0) e o logotipo sai em tamanho natural, estourando a barra. Amarrar ao
   container resolve — vale para qualquer regra de imagem deste tema. */
.ti-co-head .custom-logo{height:38px;width:auto;max-width:190px;display:block;}

.ti-co-seal{display:inline-flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:13px;line-height:1.3;}
.ti-co-seal b{color:var(--ink-soft);font-weight:600;display:block;font-size:12px;}
.ti-co-seal svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ok);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.ti-co-foot{border-top:1px solid var(--line);margin-top:56px;padding:28px 0 40px;}
.ti-co-links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;}
.ti-co-links a{color:var(--ink-faint);font-size:13px;text-decoration:none;}
.ti-co-links a:hover{color:var(--ink);text-decoration:underline;}
.ti-co-legal{text-align:center;color:var(--ink-faint);font-size:12px;margin:14px 0 0;}

/* Mais ar em volta do formulário: o checkout em blocos vem apertado por
   padrão, e respiro é o que separa uma tela de pagamento confiável de um
   formulário genérico. */
.ti-checkout-limpo .wp-block-woocommerce-checkout{margin-top:36px;}
.ti-checkout-limpo .wc-block-components-form .wc-block-components-text-input input{height:52px;}
.ti-checkout-limpo .wc-block-checkout__form{max-width:600px;}

/* Selo do Pix na lista de meios de pagamento. */
.ti-pix-rotulo{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ti-pix-selo{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--ok);color:#fff;white-space:nowrap;}
.ti-pix-descricao{font-size:13px;line-height:1.5;color:var(--ink-soft);}

/* Nota sobre o "Check-out expresso": num navegador sem carteira digital a
   área aparece vazia, mas NÃO é defeito de CSS e não deve ser escondida às
   cegas — `apple_pay_domain_set` está verificado, e Apple Pay só desenha no
   Safari em aparelho Apple, Google Pay só com cartão salvo. Esconder por
   regra fixa tiraria o botão de quem consegue usá-lo. Conferir num iPhone
   real antes de mexer. Lembrete: a verificação da Apple é por domínio e
   precisa ser refeita quando o site mudar para importsbox.com.br. */

@media (max-width:640px){
	.ti-co-head{padding:14px 0;}
	.ti-co-head .custom-logo{height:30px;max-width:150px;}
	.ti-co-seal span:not(:has(b)){display:none;}
	.ti-co-seal b{font-size:11px;}
}

/* ==========================================================================
   CARRINHO LATERAL
   Mandar o cliente para /carrinho a cada item interrompe a navegacao. O
   drawer confirma, mostra o subtotal e devolve o cliente onde ele estava.
   ========================================================================== */
.ti-cd-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(10,14,20,.42);
  opacity:0;transition:opacity .25s ease;
}
.ti-cd-open .ti-cd-scrim{opacity:1;}

.ti-cd{
  position:fixed;top:0;right:0;bottom:0;z-index:91;
  width:min(420px,92vw);display:flex;flex-direction:column;
  background:#fff;border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  box-shadow:-18px 0 44px rgba(16,22,40,.12);
}
.ti-cd-open .ti-cd{transform:translateX(0);}

.ti-cd-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none;
}
.ti-cd-top h2{font-size:17px;font-weight:600;margin:0;color:var(--ink);}
.ti-cd-x{
  background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
  color:var(--ink-faint);padding:2px 6px;transition:color .15s ease;
}
.ti-cd-x:hover{color:var(--ink);}

.ti-cd-body{flex:1;overflow-y:auto;padding:6px 22px 12px;}
.ti-cd-body .woocommerce-mini-cart{list-style:none;margin:0;padding:0;}
.ti-cd-body .woocommerce-mini-cart-item{
  position:relative;display:block;padding:18px 28px 18px 0;
  border-bottom:1px solid var(--line);
}
/* O nome do produto e a imagem vivem dentro do MESMO link no mini-cart do
   WooCommerce; por isso a grade e aplicada nesse link, nao no <li>. */
.ti-cd-body .woocommerce-mini-cart-item > a:not(.remove){
  display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;
  font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4;
}
.ti-cd-body .woocommerce-mini-cart-item img{
  width:64px;height:64px;object-fit:contain;margin:0;float:none;
  border:1px solid var(--line);border-radius:var(--radius);
}
.ti-cd-body .quantity{display:block;padding-left:78px;margin-top:5px;font-size:12.5px;color:var(--ink-soft);}
.ti-cd-body .woocommerce-mini-cart-item .remove{
  position:absolute;top:18px;right:0;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;color:var(--ink-faint);border-radius:50%;text-decoration:none;
}
.ti-cd-body .woocommerce-mini-cart-item .remove:hover{color:var(--ink);background:var(--surface-2);}
.ti-cd-body .woocommerce-mini-cart__empty-message{padding:44px 0;text-align:center;color:var(--ink-soft);font-size:14.5px;}
.ti-cd-body .woocommerce-mini-cart__total{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:18px 0 4px;margin:0;border-top:1px solid var(--line-strong);font-size:14px;
}
.ti-cd-body .woocommerce-mini-cart__total strong{font-weight:600;color:var(--ink-soft);}
.ti-cd-body .woocommerce-mini-cart__total .amount{font-size:21px;font-weight:700;color:var(--ink);}

/* O botao de finalizar precisa ficar sempre visivel, mesmo com a lista longa. */
.ti-cd-body .woocommerce-mini-cart__buttons{
  display:flex;flex-direction:column;gap:9px;margin:16px 0 4px;padding:0;
}
.ti-cd-body .woocommerce-mini-cart__buttons a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 22px;border-radius:var(--radius);
  font-size:14.5px;font-weight:600;line-height:1;
}
.ti-cd-body .woocommerce-mini-cart__buttons a.checkout{background:var(--navy);color:#fff;border:1px solid var(--navy);order:-1;}
.ti-cd-body .woocommerce-mini-cart__buttons a.checkout:hover{background:var(--navy-2);color:#fff;}
.ti-cd-body .woocommerce-mini-cart__buttons a:not(.checkout){background:transparent;color:var(--navy);border:1px solid var(--line-strong);}

.ti-cd-foot{padding:14px 22px 20px;border-top:1px solid var(--line);flex:none;}
.ti-cd-seguir{width:100%;}

@media (prefers-reduced-motion:reduce){
  .ti-cd{transition:none;} .ti-cd-scrim{transition:none;}
}

/* ==========================================================================
   PDP — PILARES DO INDICE E BARRA FIXA
   ========================================================================== */
.ib-pil{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:11px;}
.ib-pil li{display:grid;grid-template-columns:1fr 96px 34px;gap:12px;align-items:center;}
.ib-pil-r{font-size:13.5px;color:var(--ink-soft);}
.ib-pil-b{display:block;height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;}
.ib-pil-b i{display:block;height:100%;background:var(--orange);border-radius:2px;}
.ib-pil-n{
  font-size:13.5px;font-weight:700;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;
}
@media (max-width:420px){
  .ib-pil li{grid-template-columns:1fr 62px 32px;gap:9px;}
  .ib-pil-r{font-size:12.5px;}
}

.ti-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(16,22,40,.08);
}
.ti-sticky-p{font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap;}
.ti-sticky-p del{font-weight:400;font-size:13px;color:var(--ink-faint);margin-right:4px;}
.ti-sticky-p ins{text-decoration:none;}
.ti-sticky-b{
  flex:1;border:0;cursor:pointer;background:var(--navy);color:#fff;
  padding:15px 18px;border-radius:var(--radius);
  font-size:14.5px;font-weight:600;font-family:inherit;line-height:1;
}
.ti-sticky-b:hover{background:var(--navy-2);}
/* No desktop o painel de compra continua visivel na propria pagina. */
@media (min-width:860px){ .ti-sticky{display:none;} }