/* _familias.css (FAMILIA-76, 17/Ago) */
/* PÁGINA DE FAMÍLIAS — TAI Azulejos
   Prefixo taif- : a loja já usa tai-* em 57 classes do tema; taif- não colide.
   Tudo escopado em .taif-root para não vazar estilo para o resto da loja. */

.taif-root{
  --ink:#1e1f20; --muted:#6b6b6b; --line:#e1e1e1; --bg:#fff; --soft:#fafaf9;
  --azul:#11468B; --r:0px;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
  max-width:1360px; margin:0 auto; padding:0 16px 64px;
  -webkit-font-smoothing:antialiased;
}
.taif-root *,.taif-root *::before,.taif-root *::after{box-sizing:border-box}
.taif-root img{max-width:100%; display:block}

/* ---------------------------------------------------------------- topo */
.taif-head{padding:28px 0 20px; border-bottom:1px solid var(--line)}
.taif-kicker{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600}
.taif-h1{font-size:clamp(26px,3.6vw,42px); line-height:1.08; font-weight:700; letter-spacing:-.02em; margin:10px 0 0}
.taif-lead{margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--muted); max-width:60ch}
.taif-lead b{color:var(--ink); font-weight:600}

/* ---------------------------------------------------------------- barra de busca */
.taif-bar{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line);
  padding:14px 0; margin-bottom:24px; display:flex; gap:10px; align-items:center}
.taif-busca{flex:1; min-width:0; height:46px; padding:0 16px; border:1px solid var(--line); background:var(--soft);
  font:inherit; font-size:15px; color:var(--ink); border-radius:999px; outline:none}
.taif-busca:focus{border-color:var(--ink); background:#fff}
.taif-abrir{display:flex; align-items:center; gap:8px; height:46px; padding:0 18px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; font:inherit; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; border-radius:999px; white-space:nowrap; flex:none}
@media(min-width:900px){.taif-abrir{display:none}}

/* ---------------------------------------------------------------- corpo: sidebar + resultado
   Filtro lateral, fixo na coluna esquerda no desktop — cada grupo (Cor/Linha/
   Disponibilidade) é uma lista vertical de linhas clicáveis, não mais uma nuvem
   de chip que embaralhava tudo numa fileira só. No mobile a mesma sidebar vira
   gaveta (desliza da esquerda), sem duplicar marcação. */
.taif-corpo{display:block}
@media(min-width:900px){.taif-corpo{display:grid; grid-template-columns:236px 1fr; gap:40px; align-items:start}}

.taif-sombra{display:none}
.taif-root[data-filtros="1"] .taif-sombra{display:block; position:fixed; inset:0; background:rgba(20,20,18,.4); z-index:39}

.taif-side{background:var(--bg)}
.taif-side__topo{display:none}
.taif-side__aplicar{display:none}
@media(min-width:900px){
  .taif-side{position:sticky; top:78px; max-height:calc(100vh - 96px); overflow-y:auto; padding-right:6px}
  .taif-side__topo{display:flex; align-items:center; gap:10px; padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--line)}
}
.taif-side__t{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.taif-limpar{background:none; border:none; color:var(--azul); font:inherit; font-size:12px; font-weight:600; text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; padding:4px; margin-left:auto}
.taif-side__x{display:none; background:none; border:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:0 2px}

.taif-sb-grupo{padding:16px 0; border-bottom:1px solid var(--line)}
.taif-side__topo + .taif-sb-grupo, .taif-sb-grupo:first-child{padding-top:4px}
.taif-sb-tit{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 6px}
.taif-fitem{display:flex !important; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 6px;
  border:none; background:none; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; border-radius:8px;
  transition:background .12s ease}
.taif-fitem:hover{background:var(--soft)}
.taif-fitem[aria-pressed="true"]{background:#EAF0F8; font-weight:600}
.taif-fitem__ind{width:16px; height:16px; border:1.5px solid var(--line); border-radius:5px; flex:none; position:relative; background:#fff}
.taif-fitem[aria-pressed="true"] .taif-fitem__ind{border-color:var(--azul); background:var(--azul)}
.taif-fitem[aria-pressed="true"] .taif-fitem__ind::after{content:""; position:absolute; left:5px; top:2px; width:3px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(40deg)}
.taif-fitem__cor{width:16px; height:16px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.15); box-shadow:0 0 0 1px #fff inset}
.taif-fitem[aria-pressed="true"] .taif-fitem__cor{box-shadow:0 0 0 2px #fff inset,0 0 0 3.5px var(--azul)}
.taif-fitem__label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.taif-fitem small{color:var(--muted); font-size:11.5px; flex:none}
.taif-fitem[aria-pressed="true"] small{color:var(--azul)}

/* "Azul" é 6 tons reais por baixo — a seta abre a lista fina sem sair da linha */
.taif-fitem-row{display:flex; align-items:center; gap:2px}
.taif-fitem-row .taif-fitem{flex:1; min-width:0}
.taif-fitem__exp{flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--muted); cursor:pointer; border-radius:7px}
.taif-fitem__exp:hover{background:var(--soft); color:var(--ink)}
.taif-fitem__exp svg{transition:transform .15s ease; flex:none}
.taif-fitem__exp[aria-expanded="true"] svg{transform:rotate(180deg)}
/* :not([hidden]) é obrigatório — "display" numa classe vence o [hidden] do
   navegador (os dois têm a mesma especificidade e a regra do autor ganha da UA),
   então sem essa guarda o atributo hidden é ignorado e a lista nasce sempre aberta */
.taif-fitem__sub:not([hidden]){display:flex; flex-direction:column; padding-left:24px; margin:1px 0 5px; gap:0}
.taif-fitem--sub{padding:6px 8px; font-size:12.5px}
.taif-fitem--sub .taif-fitem__cor{width:12px; height:12px}

/* gaveta no mobile — mesma marcação, só a posição/visibilidade mudam */
@media(max-width:899px){
  .taif-side{position:fixed; top:0; left:0; bottom:0; width:min(86vw,340px); z-index:40; background:var(--bg);
    box-shadow:0 0 40px rgba(0,0,0,.2); padding:18px 18px 84px; overflow-y:auto;
    transform:translateX(-105%); transition:transform .25s ease}
  .taif-root[data-filtros="1"] .taif-side{transform:translateX(0)}
  .taif-side__x{display:block; margin-left:8px}
  .taif-side__aplicar{display:block; position:fixed; left:0; bottom:0; width:min(86vw,340px); z-index:41;
    background:var(--ink); color:#fff; border:none; padding:16px; font:inherit; font-size:12px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
    transform:translateX(-105%); transition:transform .25s ease}
  .taif-root[data-filtros="1"] .taif-side__aplicar{transform:translateX(0)}
}

/* ---------------------------------------------------------------- contagem */
.taif-conta{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px}
.taif-conta b{font-size:20px; font-weight:700}
.taif-conta span{font-size:13px; color:var(--muted)}

/* ---------------------------------------------------------------- grade */
.taif-grade{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(min-width:560px) and (max-width:899px){.taif-grade{grid-template-columns:repeat(3,1fr); gap:18px}}
@media(min-width:900px){.taif-grade{grid-template-columns:repeat(3,1fr); gap:22px}}
@media(min-width:1220px){.taif-grade{grid-template-columns:repeat(4,1fr)}}

.taif-card{border:1px solid var(--line); background:#fff; text-align:left; padding:0; cursor:pointer;
  font:inherit; color:inherit; border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .15s ease}
.taif-card:hover{border-color:var(--ink)}
.taif-thumb{position:relative; aspect-ratio:1/1; background:var(--soft); overflow:hidden}
.taif-thumb img{width:100%; height:100%; object-fit:cover}
/* segunda foto (o desenho aplicado no ambiente) some por cima no hover — a
   curiosidade do "como fica na parede" sem precisar entrar no desenho */
.taif-thumb__a,.taif-thumb__b{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease}
.taif-thumb__b{opacity:0}
.taif-card:hover .taif-thumb__b{opacity:1}
.taif-thumb__dica{position:absolute; right:8px; bottom:8px; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px;
  border-radius:999px; opacity:1; transition:opacity .2s ease; pointer-events:none}
.taif-card:hover .taif-thumb__dica{opacity:0}
.taif-selos{position:absolute; top:8px; left:8px; z-index:1; display:flex; flex-direction:column; gap:5px; align-items:flex-start}
.taif-selo{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; line-height:1}
.taif-selo--pe{background:var(--azul); color:#fff}
.taif-selo--am{background:#fff; color:var(--ink); border:1px solid var(--ink)}
.taif-info{padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.taif-nome{font-size:14px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; line-height:1.25}
.taif-cores{font-size:12px; color:var(--muted)}
.taif-tira{display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; align-items:center}
/* bolinha agora TROCA a capa do card: precisa parecer clicavel e ter alvo de dedo */
.taif-tira i.taif-bola{width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.18);
  display:block; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; position:relative}
.taif-tira i.taif-bola::after{content:""; position:absolute; inset:-6px}
.taif-tira i.taif-bola:hover{transform:scale(1.18)}
.taif-tira i.taif-bola:focus-visible{outline:2px solid var(--azul,#11468B); outline-offset:2px}
.taif-tira i.taif-bola.is-on{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--azul,#11468B)}
.taif-bola__mais{font-style:normal; font-size:11px; color:var(--muted); margin-left:2px}
.taif-preco{margin-top:auto; padding-top:8px; font-size:14px; font-weight:600}
.taif-preco small{font-weight:400; color:var(--muted); font-size:12px}

/* ---------------------------------------------------------------- vazio */
.taif-vazio{padding:48px 16px; text-align:center; color:var(--muted); border:1px dashed var(--line)}
.taif-vazio b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px}

/* ---------------------------------------------------------------- tela da família */
.taif-fam{display:none}
.taif-root[data-tela="familia"] .taif-lista{display:none}
.taif-root[data-tela="familia"] .taif-fam{display:block}
.taif-voltar{display:inline-flex; align-items:center; gap:7px; background:none; border:none; font:inherit;
  font-size:13px; color:var(--muted); cursor:pointer; padding:14px 0; text-decoration:underline}
.taif-voltar:hover{color:var(--ink)}
.taif-famtopo{display:grid; grid-template-columns:1fr; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--line)}
@media(min-width:860px){.taif-famtopo{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px}}
/* o desenho E o ambiente, lado a lado — não uma escolhe a outra.
   Se só existe 1 foto boa, .taif-gal--solo derruba pra 1 coluna sem quebrar. */
.taif-gal{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.taif-gal--solo{grid-template-columns:1fr}
.taif-gal figure{margin:0; background:var(--soft); position:relative; aspect-ratio:1/1; overflow:hidden}
.taif-gal img{width:100%; height:100%; object-fit:cover; display:block}
.taif-gal figcaption{position:absolute; left:0; bottom:0; background:rgba(255,255,255,.94); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; padding:6px 10px; border-top:1px solid var(--line); border-right:1px solid var(--line)}
.taif-famh{font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.01em; margin:0}
.taif-famsub{font-size:13px; color:var(--muted); margin:8px 0 0; letter-spacing:.04em; text-transform:uppercase}
.taif-famdesc{font-size:14.5px; line-height:1.6; color:var(--ink); margin:14px 0 0; max-width:52ch}
.taif-famdesc b{font-weight:700}
.taif-fampreco{font-size:26px; font-weight:700; margin:14px 0 0; letter-spacing:-.01em; transition:opacity .12s ease}
.taif-fampreco small{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:3px; letter-spacing:0}
.taif-cartela{margin:22px 0 0}
.taif-cartela h3{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 10px}
/* align-items:start é obrigatório: sem ele a linha do grid iguala as alturas,
   o aspect-ratio da miniatura come o espaço e o rótulo da cor some no overflow. */
.taif-tons{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:start}
@media(min-width:480px){.taif-tons{grid-template-columns:repeat(4,1fr)}}
.taif-tom{border:1px solid var(--line); background:#fff; padding:0; cursor:pointer; font:inherit; color:inherit;
  text-align:left; display:flex; flex-direction:column; height:auto}
.taif-tom .t{flex:none}
.taif-tom[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.taif-tom .t{aspect-ratio:1/1; background:var(--soft); overflow:hidden}
.taif-tom .t img{width:100%; height:100%; object-fit:cover}
.taif-tom .l{padding:7px 8px; font-size:11px; line-height:1.25; letter-spacing:.03em; text-transform:uppercase}
.taif-acoes{display:flex; flex-direction:column; gap:9px; margin-top:22px}
.taif-cta{display:block; text-align:center; padding:14px 18px; font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; border-radius:var(--r)}
.taif-cta--p{background:var(--azul); color:#fff; border:1px solid var(--azul)}
.taif-cta--s{background:#fff; color:var(--ink); border:1px solid var(--ink)}
.taif-nota{font-size:12px; color:var(--muted); line-height:1.55; margin:14px 0 0; padding-left:10px; border-left:2px solid var(--line)}

/* ---------------------------------------------------------------- calculadora */
.taif-calc{margin:26px 0 0; border:1px solid var(--line); background:var(--soft); padding:16px}
.taif-calc h3{font-size:13px; font-weight:600; margin:0 0 3px}
.taif-calc p{font-size:12px; color:var(--muted); margin:0 0 12px}
.taif-calcgrid{display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:end}
.taif-calcgrid label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px}
.taif-calcgrid input{width:100%; height:42px; padding:0 11px; border:1px solid var(--line); background:#fff; font:inherit; font-size:15px; border-radius:var(--r)}
.taif-calcgrid input:focus{outline:none; border-color:var(--ink)}
.taif-x{padding-bottom:11px; color:var(--muted); font-weight:600}
.taif-res{margin-top:13px; padding-top:13px; border-top:1px solid var(--line); display:flex; gap:22px; flex-wrap:wrap}
.taif-res div{font-size:12px; color:var(--muted)}
.taif-res b{display:block; font-size:19px; color:var(--ink); margin-top:2px}

/* ---------------------------------------------------------------- rodapé */
.taif-pe{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); line-height:1.65}
.taif-pe b{color:var(--ink)}

/* ---------------------------------------------------------------- whatsapp flutuante
   Padrão trazido do BotaoWhatsApp.tsx do projeto TRACK: botão fixo + pop-up curto de
   assuntos prontos. Só aparece com uma família aberta (é o que dá contexto à mensagem). */
.taif-zap{position:fixed; right:18px; bottom:18px; z-index:60; display:none; flex-direction:column; align-items:flex-end; gap:10px}
.taif-root[data-tela="familia"] .taif-zap{display:flex}
.taif-zap-btn{display:flex; align-items:center; gap:9px; background:#25D366; color:#fff; border:none;
  padding:13px 20px 13px 16px; border-radius:999px; font:inherit; font-size:13px; font-weight:700;
  letter-spacing:.02em; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.18)}
.taif-zap-btn:hover{filter:brightness(1.05)}
.taif-zap-btn:active{transform:scale(.97)}
.taif-zap-pop{width:270px; max-width:calc(100vw - 36px); border:1px solid var(--line); background:#fff;
  border-radius:14px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.18)}
.taif-zap-pop__h{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; background:#25D366; color:#fff; padding:12px 14px}
.taif-zap-pop__h b{display:block; font-size:13px; font-weight:700}
.taif-zap-pop__h span{display:block; font-size:11px; opacity:.9; margin-top:2px}
.taif-zap-pop__h button{background:none; border:none; color:#fff; opacity:.85; font-size:18px; line-height:1; cursor:pointer; padding:0 2px}
.taif-zap-pop__h button:hover{opacity:1}
.taif-zap-pop__p{font-size:11px; color:var(--muted); margin:10px 14px 4px}
.taif-zap-pop__op{display:flex; flex-direction:column; padding:2px 8px 8px}
.taif-zap-op{display:block; padding:9px 8px; font-size:13px; color:var(--ink); text-decoration:none; border-radius:8px}
.taif-zap-op:hover{background:var(--soft)}


/* <style> da Vitrine (25–28/Ago), copiado literal */

  /* ============================================================ MOLDURA DA LOJA
     Cabeçalho e rodapé reproduzidos do site real. Cor literal aqui: esta parte
     vive FORA do .taif-root, onde as variáveis --ink/--line não existem. */
  :root{ --ink:#1e1f20; --muted:#6b6b6b; --line:#e1e1e1; --azul:#11468B; --soft:#fafaf9 }
  *{box-sizing:border-box}
  body{margin:0; font-family:Montserrat,sans-serif; font-size:13px; letter-spacing:1px;
     color:#1e1f20; background:#fff}
  /* o conteúdo da vitrine tem a própria régua tipográfica */
  .taif-root{font-size:15px; letter-spacing:normal}

  /* Header copiado do site: barra preta de 37px, cabeçalho branco de 117px NÃO fixo,
     menu em Poppins 500/13px/1px — medido em taiazulejos.com.br/colecao-de-azulejos. */
  .lj-aviso{background:#000; color:#fff; font-family:Montserrat,sans-serif; font-size:11px;
            font-weight:400; letter-spacing:1px; height:37px; display:flex; align-items:center;
            justify-content:center; text-align:center; padding:0 14px}
  .lj-aviso b{font-weight:700}
  /* a loja esconde essa barra no celular */
  @media(max-width:1080px){ .lj-aviso{display:none} }
  /* medidas conferidas em taiazulejos.com.br: faixa branca 80px, logo 40px,
     conteúdo em 1200px, item ativo SEM cor especial nem sublinhado */
  .lj-topo{background:#fff}
  .lj-topo__in{max-width:1200px; margin:0 auto; padding:0 20px; height:80px;
               display:flex; align-items:center; gap:22px}
  .lj-logo img{height:40px; max-height:40px; width:auto; display:block}
  .lj-nav{margin-left:auto; display:flex; gap:26px; align-items:center}
  .lj-nav a{color:#1e1f20; text-decoration:none; font-family:Poppins,Montserrat,sans-serif;
            font-size:13px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
            white-space:nowrap; position:relative; padding:15px 0}
  .lj-nav a:hover{color:var(--azul)}

  /* cabeçalho que reaparece na rolagem, como o .header-fixed da loja */
  .lj-topo.fixo{position:fixed; top:0; left:0; right:0; z-index:60;
                box-shadow:0 0 40px rgba(0,0,0,.15)}
  .lj-espaco{display:none} .lj-espaco.on{display:block; height:80px}
  .lj-icones{display:flex; gap:16px; align-items:center; margin-left:8px}
  .lj-icones button{background:none; border:none; padding:4px; cursor:pointer; color:#1e1f20; position:relative}
  .lj-cart{position:absolute; top:-4px; right:-7px; background:var(--ink); color:#fff; font-size:9px;
           font-weight:700; min-width:15px; height:15px; border-radius:999px; display:grid; place-items:center; padding:0 3px}
  /* No celular a loja abre uma gaveta de 312px. Sem isto, o MVP simplesmente
     ficava sem navegação nenhuma abaixo de 1080px. */
  .lj-burguer{display:none; width:40px; height:40px; border:none; background:none; padding:0;
              cursor:pointer; color:#1e1f20; align-items:center; justify-content:center}
  .lj-gaveta{position:fixed; top:0; bottom:0; left:0; width:min(312px,86vw); background:#fff;
             z-index:95; transform:translateX(-100%); transition:transform .25s ease;
             overflow-y:auto; box-shadow:2px 0 24px rgba(0,0,0,.14)}
  .lj-gaveta.on{transform:none}
  .lj-gaveta__topo{display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid #e1e1e1}
  .lj-gaveta__topo img{height:34px}
  .lj-gaveta__x{margin-left:auto; background:none; border:none; font-size:26px; line-height:1;
                color:#6b6b6b; cursor:pointer; padding:0 2px}
  .lj-gaveta a{display:block; padding:15px 20px; border-bottom:1px solid #f2f2f2;
               color:#1e1f20; text-decoration:none; font-family:Poppins,Montserrat,sans-serif;
               font-size:13px; font-weight:500; letter-spacing:1px; text-transform:uppercase}
  .lj-gaveta a:active{background:#fafaf9}
  .lj-sombra{position:fixed; inset:0; background:rgba(20,20,18,.45); z-index:94;
             opacity:0; pointer-events:none; transition:opacity .2s}
  .lj-sombra.on{opacity:1; pointer-events:auto}
  @media(max-width:1080px){
    .lj-nav{display:none}
    .lj-burguer{display:flex}
    .lj-topo__in{padding:0 10px}
  }

  /* a loja tem rodapé branco, sem borda superior */
  .lj-rodape{margin-top:60px; background:#fff}
  .lj-legal{max-width:1200px; margin:0 auto; padding:0 20px 34px; font-size:11.5px;
            color:#6b6b6b; letter-spacing:.02em; line-height:1.6}
  .lj-rodape__in{max-width:1200px; margin:0 auto; padding:34px 20px 26px; display:grid; gap:26px;
                 grid-template-columns:repeat(2,1fr)}
  @media(min-width:820px){ .lj-rodape__in{grid-template-columns:repeat(4,1fr)} }
  .lj-rodape h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
                font-weight:700; margin:0 0 12px}
  .lj-rodape a{display:block; color:#1e1f20; text-decoration:none; font-size:13px; padding:5px 0}
  .lj-rodape a:hover{color:var(--azul)}
  .lj-zap{position:fixed; right:20px; bottom:60px; width:54px; height:54px; border-radius:50%;
          background:#25d366; display:grid; place-items:center; z-index:70; border:none; cursor:pointer;
          box-shadow:0 6px 20px rgba(0,0,0,.22); text-decoration:none}
  /* no celular os flutuantes cobriam o botão FILTROS logo na primeira tela */
  @media(max-width:760px){
    .lj-zap{bottom:16px; width:48px; height:48px}
    .calc-bt{bottom:74px; width:48px; height:48px}
    .calc{bottom:132px}
  }

  /* ============================================================ ABERTURA
     Quatro promessas medidas, não adjetivo solto. */
  /* o site usa Outfit 800 nos títulos de página — aqui também */
  /* H1 na medida da loja: Outfit 800, 58px, ls -1.74px, #161616 */
  .taif-root .taif-h1{font-family:Outfit,Montserrat,sans-serif; font-weight:800;
                      font-size:clamp(34px,4.6vw,58px); letter-spacing:-.03em; color:#161616}
  /* e o conteúdo na mesma coluna de 1200px do site */
  .taif-root{max-width:1200px; padding-left:20px; padding-right:20px}

  .taib-promessas{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:22px 0 0}
  @media(min-width:760px){ .taib-promessas{grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line)} }
  .taib-prom{padding:16px 18px}
  @media(min-width:760px){ .taib-prom + .taib-prom{border-left:1px solid var(--line)} }
  .taib-prom b{display:block; font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.2}
  .taib-prom span{display:block; font-size:12px; color:var(--muted); margin-top:4px; line-height:1.45}

  /* ============================================================ A PRATELEIRA */
  .taib-ordem{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 14px}
  .taib-ordem b{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
                font-weight:700; margin-right:4px}
  .taib-ordem button{border:1px solid var(--line); background:#fff; font:inherit; font-size:12px;
                     font-weight:600; padding:8px 13px; cursor:pointer; border-radius:999px;
                     transition:border-color .12s, background .12s}
  .taib-ordem button:hover{border-color:var(--ink)}
  .taib-ordem button.on{background:var(--ink); color:#fff; border-color:var(--ink)}

  /* Bloco único do topo: o cliente diz onde mora e o tamanho da parede, e a
     listagem inteira passa a responder em data de entrega e em dinheiro. */
  .taib-eu{border:1px solid var(--ink); margin:26px 0 0; display:grid; grid-template-columns:1fr}
  @media(min-width:860px){ .taib-eu{grid-template-columns:1fr 1fr} }
  .taib-eu__c{padding:18px 20px}
  @media(min-width:860px){ .taib-eu__c + .taib-eu__c{border-left:1px solid var(--line)} }
  @media(max-width:859px){ .taib-eu__c + .taib-eu__c{border-top:1px solid var(--line)} }
  .taib-eu h3{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
              font-weight:700; margin:0 0 10px}
  .taib-eu__campos{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .taib-eu input{padding:11px 12px; border:1px solid var(--line); font:inherit; font-size:14px; width:120px}
  .taib-eu input:focus{outline:none; border-color:var(--ink)}
  .taib-eu__x{color:var(--muted); font-size:13px}
  .taib-eu__r{font-size:13px; color:var(--muted); margin:11px 0 0; line-height:1.55}
  .taib-eu__r b{color:var(--ink); font-weight:700}
  .taib-eu__r--forte{font-size:15px}
  /* o prazo é a última linha e pode quebrar — só o valor+unidade é que não pode */
  .taib-prazo{display:block; font-size:11px; color:var(--muted); margin-top:3px;
              white-space:normal; line-height:1.4}
  .taib-prazo b{color:var(--ink); font-weight:600}

  .taib-chips{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 16px}
  .taib-chip{display:inline-flex; align-items:center; gap:7px; background:var(--azul); color:#fff;
             border:none; font:inherit; font-size:11.5px; font-weight:600; padding:6px 8px 6px 11px;
             border-radius:999px; cursor:pointer}
  .taib-chip span{font-size:14px; line-height:1; opacity:.75}
  .taib-chip:hover span{opacity:1}

  /* A imagem é o produto — e quem manda no tamanho dela é a LARGURA DISPONÍVEL,
     não o gap. Medido: a 1920px o container travava em 1200px (760px vazios nas
     laterais) e a grade voltava a 5 colunas → foto de 166px, o mesmo tamanho de
     antes. Aumentar só o espaçamento afasta os cards sem crescer a peça.
     Aqui a área de produtos passa a usar a tela: o TOPO segue nos 1200px da loja
     (é ele que faz o cliente não perceber a página diferente), e só a grade cresce.
     Resultado: foto 163 → 222 (1440px) → 304 (1920px). Nunca mais 5 colunas. */
  @media(min-width:900px){
    .taif-root .taif-corpo{grid-template-columns:190px minmax(0,1fr); gap:24px}
  }
  @media(min-width:1500px){
    .taif-root{max-width:1560px}
    .taif-root .taif-corpo{grid-template-columns:210px minmax(0,1fr); gap:32px}
  }
  .taib-grade{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  @media(min-width:600px){ .taib-grade{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media(min-width:1000px){ .taib-grade{grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px} }
  @media(min-width:1500px){ .taib-grade{gap:20px} }

  .taib-card{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;
             overflow:hidden; transition:border-color .15s; text-align:left}
  @media (hover: hover){ .taib-card:hover{border-color:var(--ink)} }
  .taib-card__foto{position:relative; aspect-ratio:1; background:var(--soft); overflow:hidden; cursor:pointer}
  .taib-card__foto img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
                       transition:opacity .35s ease}
  .taib-amb{opacity:0}
  /* ☠️ O pisca do hover: a foto de ambiente é `lazy` e 59 das 73 ainda NÃO tinham
     baixado. O hover levava a opacidade a 1 antes de existir imagem — a peça
     sumia e ficava um vazio até o download chegar. Agora o ambiente só entra
     quando a classe `amb-ok` diz que ele terminou de carregar. */
  @media (hover: hover) and (pointer: fine){
    .taib-card.amb-ok:hover .taib-amb{opacity:1}
  }
  /* Com o mouse parado em cima da seta, o hover do ambiente continua ligado e a
     foto nova entra já trocada — é o pisca que sobrava. Enquanto o ponteiro está
     na seta, o card mostra SEMPRE a peça: quem navega por cor quer ver a peça. */
  .taib-card.na-seta .taib-amb{opacity:0 !important}
  @media (hover: hover) and (pointer: fine){
    .taib-card:hover:has(.taib-seta:hover) .taib-amb{opacity:0}
  }
  /* durante a troca, sem transição: as duas fotos mudam no mesmo quadro */
  .taib-card.trocando .taib-card__foto img{transition:none}
  .taib-card.trocando .taib-amb{opacity:0}
  /* sem etiqueta: a troca de foto no hover já se explica sozinha */
  .taib-selos{position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column;
              gap:5px; align-items:flex-start}
  .taib-selo{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
             padding:4px 7px; line-height:1}
  .taib-selo--pe{background:var(--azul); color:#fff}

  .taib-card{cursor:pointer}
  .taib-card__in{padding:10px 11px 11px; display:flex; flex-direction:column; gap:6px; flex:1}
  .taib-card__n{display:block; font-size:15px; font-weight:700; letter-spacing:-.012em;
                text-transform:none; line-height:1.2; cursor:pointer; color:var(--ink)}
  .taib-card__c{display:block; font-size:11.5px; color:var(--muted)}
  .taib-tira{display:flex; gap:4px; flex-wrap:wrap; margin-top:1px; align-items:center}
  .taib-tira i{width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:block;
               cursor:pointer; transition:transform .12s; position:relative}
  /* alvo de toque de 25px, ainda que a bolinha desenhada tenha 13 */
  .taib-tira i::after{content:""; position:absolute; inset:-6px}
  @media (hover: hover){ .taib-tira i:hover{transform:scale(1.3)} }
  .taib-tira i.on{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--azul)}
  /* ITEM 4 — a cor que está pronta hoje ganha um ponto: disponibilidade é por
     COR, não por desenho. Antes o selo mentia para as outras cores da família. */
  .taib-tira i.pronta::before{content:""; position:absolute; right:-1px; top:-1px; width:5px; height:5px;
    border-radius:50%; background:var(--azul); box-shadow:0 0 0 1.5px #fff}
  .taib-tira em{font-style:normal; font-size:11.5px; font-weight:500; letter-spacing:-.006em;
                color:var(--muted); margin-left:3px; white-space:nowrap}
  /* selos de painel / pronta entrega, no lugar da antiga linha corrida de texto */
  /* Sobre a foto, canto inferior esquerdo — no miolo eles gastavam uma linha
     inteira e deixavam um vão nos cards que não tinham selo nenhum. */
  .taib-marcas{position:absolute; left:8px; bottom:8px; z-index:3; display:flex; gap:5px}
  /* a peça é branca na maior parte do catálogo: sem a sombra o selo branco
     desaparece dentro da foto */
  .taib-marcas em{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.07em;
                  text-transform:uppercase; line-height:1; padding:4px 7px; border-radius:999px;
                  background:rgba(255,255,255,.94); color:var(--ink);
                  box-shadow:0 1px 4px rgba(0,0,0,.16)}
  /* No celular a foto tem 160px e dois selos somam 136 — o segundo cobria o
     contador de cor em Kimi e Tuini Ponto. Fica só o primeiro, que é o
     o selo de pronta entrega saiu em 25/Ago; sobra o de painel. */
  @media(max-width:599px){ .taib-marcas em:nth-child(n+2){display:none} }

  /* preço com a unidade sempre à vista — a confusão que já custou caro aqui */
  /* Antes eram TRÊS linhas para um preço só: "a partir de" sozinho, o valor, e o
     equivalente em m². Agora o rótulo entra na mesma linha do número — o valor
     e a unidade continuam sem se separar, que era o motivo da quebra original. */
  .taib-preco{display:block; margin-top:auto; padding-top:8px; border-top:1px solid var(--line)}
  .taib-preco__l{display:block; white-space:nowrap; line-height:1.15}
  .taib-preco i{font-style:normal; font-size:10.5px; font-weight:500; color:var(--muted);
                letter-spacing:-.004em}
  .taib-preco b{font-size:17px; font-weight:700; letter-spacing:-.015em; margin-left:2px}
  /* a unidade não é detalhe: sem ela o cliente compara R$260 de meio metro com
     R$540 do metro. Ganha caixa própria, para ler junto com o número. */
  .taib-preco small{font-size:10.5px; font-weight:700; color:var(--ink); margin-left:5px;
    letter-spacing:.04em; text-transform:uppercase; background:var(--soft);
    border:1px solid var(--line); padding:2px 5px; white-space:nowrap}
  .taib-preco u{display:block; text-decoration:none; font-size:11px; font-weight:500;
                letter-spacing:-.006em; color:var(--muted); margin-top:2px}
  /* No card de 161px do celular, "a partir de" + valor + unidade somam 181px e
     estouravam nos 76 cards. O rótulo sobe para a linha de cima; o que não pode
     se separar — valor e unidade — continua junto. */
  @media(max-width:599px){
    /* 15px fazia 8 de 76 nomes virarem duas linhas no card de 161px */
    .taib-card__n{font-size:14px}
    .taib-preco i{display:block; margin-bottom:1px}
    .taib-preco b{margin-left:0; font-size:16px}
    .taib-preco small{margin-left:4px; font-size:10px; padding:2px 4px}
  }
  /* o total da parede informada: é o número que o cliente realmente quer saber */
  /* o total ganha linha própria: é o número que fecha a decisão */
  .taib-preco u.taib-total{color:var(--ink); font-size:11px; margin-top:6px; padding-top:6px;
                           border-top:1px dotted var(--line); white-space:normal; line-height:1.35}
  .taib-preco u.taib-total b{display:block; font-size:15px; margin-top:1px}

  /* Uma ação principal, clara e específica — e as secundárias como texto, sem
     disputar peso com ela. É o que a Apple faz (um botão + um link) levado a
     sério: o rótulo do botão diz exatamente o que vai acontecer. */
  /* Uma linha só: a ação principal ocupa o espaço, as secundárias viram ícones
     do mesmo tamanho do botão. Sem link sublinhado empilhado. */
  /* Sem botão: o card inteiro abre o desenho. Na foto ficam só as setas, que
     trocam a cor sem tirar o cliente da listagem. */
  .taib-seta{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
             width:40px; height:40px; border:none; border-radius:999px; padding:0; cursor:pointer;
             background:rgba(255,255,255,.9); color:var(--ink); display:grid; place-items:center;
             opacity:0; transition:opacity .18s ease, background .12s ease;
             box-shadow:0 2px 10px rgba(0,0,0,.14)}
  .taib-seta--a{left:8px} .taib-seta--d{right:8px}
  @media (hover: hover){
    .taib-card:hover .taib-seta{opacity:1}
    .taib-seta:hover{background:#fff}
  }
  .taib-seta:focus-visible{opacity:1; outline:2px solid var(--azul); outline-offset:2px}
  .taib-seta svg{width:17px; height:17px}
  /* Sem hover (toque) as setas ficam sempre visíveis. E abaixo de 1080px também:
     quem demonstra a página encolhendo a janela do computador continua com hover,
     e não veria as setas — o revisor pegou exatamente esse caso. */
  @media (hover: none){ .taib-seta{opacity:1} }
  @media (max-width:1080px){ .taib-seta{opacity:1} }
  .taib-conta__cor{position:absolute; right:8px; bottom:8px; z-index:3; background:rgba(255,255,255,.94);
                   color:var(--ink); font-size:10px; font-weight:700; padding:3px 7px;
                   border-radius:999px; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,.16)}

  /* ============================================================ CARD DO INSTAGRAM
     Mesma célula de um produto, mas com a cara de um post: cabeçalho da conta,
     foto quadrada, curtidas e legenda. A foto é nossa, do @tai_azulejos. */
  .taib-ig{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;
           overflow:hidden; cursor:pointer; transition:border-color .15s}
  .taib-ig:hover{border-color:var(--ink)}
  /* A identificação da conta virou selo SOBRE a foto: assim a imagem do post
     começa na mesma altura das fotos de produto e a linha inteira alinha. */
  .taib-ig__marca{position:absolute; left:8px; bottom:8px; z-index:3; display:flex; align-items:center;
    gap:5px; background:rgba(255,255,255,.94); color:var(--ink); font-size:9.5px; font-weight:700;
    letter-spacing:.05em; padding:4px 8px 4px 6px; border-radius:999px; line-height:1;
    box-shadow:0 1px 4px rgba(0,0,0,.16)}
  .taib-ig__marca svg{width:12px; height:12px; flex:none}
  .taib-ig__topo{display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--line)}
  /* sem o gradiente do Instagram: o selo é a marca, na tipografia da própria página */
  .taib-ig__av{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
               background:#fff; border:1px solid var(--ink); color:var(--ink);
               font-size:8.5px; font-weight:700; letter-spacing:.06em}
  .taib-ig__quem{font-size:11.5px; font-weight:700; line-height:1.2}
  .taib-ig__quem span{display:block; font-size:10px; font-weight:400; color:var(--muted)}
  .taib-ig__selo{margin-left:auto}
  .taib-ig__selo svg{width:17px; height:17px; color:var(--muted); display:block}
  .taib-ig__foto{position:relative; aspect-ratio:1; background:var(--soft); overflow:hidden}
  .taib-ig__foto img{width:100%; height:100%; object-fit:cover; display:block}
  .taib-ig__in{padding:10px 11px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
  .taib-ig__likes{display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700}
  .taib-ig__likes svg{width:14px; height:14px}
  .taib-ig__cap{font-size:11.5px; line-height:1.5; color:var(--muted)}
  .taib-ig__cta{margin-top:auto; padding-top:8px; font-size:11.5px; font-weight:700; color:var(--azul);
                display:flex; align-items:center; gap:5px}

  /* ============================================================ CARDS DE APOIO */
  .taib-info{border:1px solid var(--ink); background:var(--ink); color:#fff; padding:20px;
             display:flex; flex-direction:column; gap:9px; justify-content:center}
  .taib-info--claro{background:var(--soft); color:var(--ink); border-color:var(--line)}
  .taib-info__k{font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; opacity:.6}
  /* o número é o que segura o olho no meio de uma grade de fotos */
  .taib-info__n{font-size:38px; font-weight:700; line-height:.95; letter-spacing:-.035em}
  .taib-info__n small{font-size:15px; font-weight:600; letter-spacing:0}
  .taib-info b{font-size:16px; font-weight:700; line-height:1.3; letter-spacing:-.01em}
  .taib-info p{font-size:12px; line-height:1.5; margin:0; opacity:.82}
  .taib-info__a{margin-top:2px; background:none; border:none; padding:0; font:inherit; font-size:11.5px;
                font-weight:600; color:inherit; cursor:pointer; text-align:left; text-decoration:underline;
                text-underline-offset:3px; opacity:.9}
  .taib-info__a:hover{opacity:1}
  .taib-calc{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:2px}
  .taib-calc input{width:100%; padding:9px; border:1px solid var(--line); font:inherit; font-size:13px}
  .taib-calc__r{font-size:12px; line-height:1.5; margin-top:6px}
  .taib-calc__r b{font-size:15px}

  /* aviso discreto no lugar do alert: não bloqueia a navegação */
  .taib-toast{position:fixed; left:50%; transform:translateX(-50%) translateY(12px); bottom:62px;
              background:var(--ink); color:#fff; font-size:13px; line-height:1.5; padding:13px 18px;
              max-width:min(92vw,420px); z-index:90; opacity:0; pointer-events:none;
              transition:opacity .2s ease, transform .2s ease}
  .taib-toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
  .taib-toast b{display:block; font-size:14px; margin-bottom:2px}

  /* ============================================================ CALCULADORA
     Vive acima do WhatsApp e acompanha o cliente em qualquer página. Mesmo
     modelo da PDP da loja: altura × largura + extra de recorte. */
  .calc-bt{position:fixed; right:20px; bottom:126px; z-index:72; width:54px; height:54px;
           border-radius:50%; border:none; background:var(--ink); color:#fff; cursor:pointer;
           display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.22);
           transition:transform .14s ease}
  .calc-bt:hover{transform:translateY(-2px)}
  .calc-bt svg{width:23px; height:23px}
  .calc-bt__dica{position:absolute; right:64px; top:50%; transform:translateY(-50%);
                 background:var(--ink); color:#fff; font-size:12px; font-weight:600;
                 padding:7px 11px; white-space:nowrap; opacity:0; pointer-events:none;
                 transition:opacity .16s ease}
  .calc-bt:hover .calc-bt__dica{opacity:1}

  .calc-fundo{position:fixed; inset:0; background:rgba(20,20,18,.45); z-index:88;
              opacity:0; pointer-events:none; transition:opacity .2s ease}
  .calc-fundo.on{opacity:1; pointer-events:auto}
  .calc{position:fixed; right:20px; bottom:126px; z-index:89; width:min(94vw,340px);
        background:#fff; border:1px solid var(--ink); transform:translateY(10px) scale(.98);
        opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease}
  .calc.on{opacity:1; transform:none; pointer-events:auto}
  @media(max-width:520px){ .calc{right:12px; left:12px; width:auto; bottom:96px} }
  .calc__topo{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
  .calc__topo b{font-size:14px; font-weight:700; letter-spacing:-.01em}
  .calc__x{margin-left:auto; background:none; border:none; font-size:22px; line-height:1;
           color:var(--muted); cursor:pointer; padding:0 2px}
  .calc__x:hover{color:var(--ink)}
  .calc__in{padding:16px}
  .calc__campos{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:end}
  .calc__campos label{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
                      color:var(--muted); font-weight:700; display:block; margin-bottom:5px}
  .calc__campos input{width:100%; padding:11px 12px; border:1px solid var(--line); font:inherit; font-size:15px}
  .calc__campos input:focus{outline:none; border-color:var(--ink)}
  .calc__x2{color:var(--muted); font-size:14px; padding-bottom:12px}
  .calc__rec{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--muted)}
  .calc__rec select{padding:7px 9px; border:1px solid var(--line); font:inherit; font-size:12.5px}
  .calc__r{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
  .calc__m2{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
  .calc__m2 small{font-size:13px; font-weight:400; color:var(--muted)}
  .calc__det{font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:5px}
  .calc__det b{color:var(--ink)}
  .calc__nota{font-size:11px; color:var(--muted); line-height:1.55; margin-top:12px;
              padding-left:9px; border-left:2px solid var(--line)}
  .calc__cta{display:block; width:100%; margin-top:13px; background:var(--azul); color:#fff;
             border:none; font:inherit; font-size:13px; font-weight:700; padding:12px; cursor:pointer}
  .calc__cta:hover{background:#0d3a75}

  /* Barra de medição: ferramenta NOSSA, não do cliente. Só aparece com ?interno=1.
     A loja não tem nada fixo no rodapé, e isso denunciava a página como diferente. */
  body.interno{padding-bottom:44px}
  .taib-regua{position:fixed; left:0; right:0; bottom:0; background:#1e1f20; color:#fff; z-index:75;
              font-size:12px; padding:11px 16px; gap:20px; flex-wrap:wrap; align-items:center;
              display:none}
  /* a barra de medição é ferramenta nossa: só aparece com ?interno=1 */
  body.interno .taib-regua{display:flex}
  .taib-regua b{font-weight:700}
  .taib-regua span{opacity:.7}
  .taib-regua .barra{flex:1; min-width:110px; height:4px; background:rgba(255,255,255,.22); overflow:hidden}
  .taib-regua .barra i{display:block; height:100%; background:#fff; width:0; transition:width .3s ease}
  /* no celular a régua vira uma linha só: o resto some para não comer a tela */
  @media(max-width:760px){
    .taib-regua{gap:10px; padding:9px 14px; font-size:11px; flex-wrap:nowrap}
    .taib-regua .some-no-celular{display:none}
  }


/* colecao.css — o que é novo */
/* ====================================================================== COLEÇÃO — o que é NOVO
   Só o que a Vitrine (25–28/Ago) não tinha. A base (moldura da loja, grade, card, sidebar, calculadora)
   é copiada LITERALMENTE de fonte/vitrine + fonte/pre-produto pelo build.py — lei de 27/Jul.
   RODADA 2 (07/Set): card C2 (seletor de medida + "A partir de:" + unidade e peças ao lado do valor),
   nome da cor com lugar fixo, CTA no padrão Apple, bolinhas em duas fileiras sem esconder cor. */

/* ---- 1. Foto: é a do cadastro. O rapport gerado saiu em 07/Set. ------------------------------- */
.taib-card__foto .taib-fonte{position:absolute; right:8px; top:8px; z-index:3; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,.9);
  padding:3px 6px; border-radius:999px; opacity:0}
body.interno .taib-card__foto .taib-fonte{opacity:1}   /* a origem da foto só aparece com ?interno=1 */

/* ---- 2. Nome da cor: lugar fixo, cross-fade curto (padrão Apple do seletor de cor) ------------- */
.taib-cor{display:block; font-size:12.5px; color:var(--muted); letter-spacing:-.004em; line-height:1.3;
  min-height:1.3em; transition:opacity .11s ease}
.taib-cor.tro{opacity:0}
.taib-cor b{font-weight:600; color:var(--ink)}
@media(max-width:599px){ .taib-cor{font-size:12px} }

/* ---- 3. Bolinhas: DUAS FILEIRAS, nada escondido, contador sempre visível ----------------------- */
.taib-tira{display:flex; flex-wrap:wrap; gap:6px 6px; align-items:center; padding:2px 0 0; margin:0}
.taib-tira i{flex:none; width:16px; height:16px}
.taib-tira i::after{inset:-9px}          /* alvo de dedo de 34px sobre a bolinha de 16 */
/* ☠️ o anel de seleção era azul fixo (#11468B) e competia com a própria cor do produto: 7 das 19 cores
   ficavam abaixo do limite (Verde Petróleo 1,06 · Verde Escuro 1,06 · Vinho 1,17 · Azul Escuro 1,34).
   Agora o sinal é neutro e independente da paleta: anel escuro com respiro branco. */
.taib-tira i.on{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--ink)}
.taib-tira em{flex:none; font-size:11.5px; white-space:nowrap}
@media(max-width:599px){ .taib-tira{gap:5px} .taib-tira i{width:14px; height:14px} }
/* no toque as setas somem: a tira é o controle — MENOS nas Frases, onde não há bolinha e a seta É o controle */
@media (hover: none){ .taib-seta{display:none} .taib-card--frase .taib-seta{display:grid; opacity:1} }
.taib-card--frase .taib-seta{opacity:1}
.taib-conta-fr{font-size:11.5px; color:var(--muted)}
/* a frase é texto: precisa de mais linha que um nome de cor */
.taib-card--frase .taib-cor{min-height:2.6em; line-height:1.35}
body.interno .taib-tira i.aprox{outline:1px dotted #b33; outline-offset:1px}

/* ---- 4. Preço C2: as duas medidas como UMA unidade ------------------------------------------- */
/* ☠️ 07/Set, medido na crítica: o preço aparecia em 5 posições Y diferentes (amplitude 42px no desktop,
   74px no mobile) porque a tira de cores empurrava o bloco. Agora a tira tem altura reservada de 2 fileiras
   e o preço fica ancorado — o olho reencontra o número no mesmo lugar em todos os cards. */
.taib-tira{min-height:40px; align-content:flex-start}
@media(max-width:599px){ .taib-tira{min-height:38px} }
.taib-preco{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:block;
  font-variant-numeric:tabular-nums}          /* tabular: as linhas alinham dígito com dígito */
/* seletor segmentado — o mesmo produto em duas medidas */
.taib-seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px;
  background:var(--soft); margin:0 0 7px}
.taib-seg button{font:inherit; font-size:11.5px; font-weight:600; letter-spacing:-.004em; border:none;
  background:none; color:var(--muted); padding:5px 11px; border-radius:999px; cursor:pointer;
  transition:background .16s ease, color .16s ease}
/* ☠️ o estado ativo era branco (#fff) sobre trilho quase-branco (#fafaf9) = 1,04:1 de contraste; a WCAG 1.4.11
   pede 3:1 para indicação de estado. Agora a pílula ativa é a tinta escura (16,5:1) — ninguém erra qual está ligada. */
.taib-seg button.on{background:var(--ink); color:#fff; box-shadow:none}
.taib-seg button:focus-visible{outline:2px solid var(--azul); outline-offset:1px}
/* O preço em UMA linha: "A partir de R$ 260,00 · 0,5 m² · 21 peças".
   Antes o rótulo gastava uma linha inteira e mudava três variáveis (tamanho +65%, peso +400, cor) contra o número. */
/* três faixas de altura FIXA: valor · unidade+peças · parcela. O preço fica no mesmo Y em todos os cards. */
.taib-val{display:block; margin-top:1px; line-height:1.25; height:25px; white-space:nowrap; overflow:hidden}
.taib-val .ap{font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0}
.taib-val b{font-size:19px; font-weight:700; letter-spacing:-.022em}
.taib-und{display:block; font-size:12px; color:var(--muted); letter-spacing:0; height:16px; white-space:nowrap; overflow:hidden}
.taib-jur{display:block; font-size:11.5px; color:var(--muted); margin-top:2px; height:15px; white-space:nowrap; overflow:hidden}
/* o trilho vazio guarda a altura do seletor onde a medida é única (frases, m² só) — senão a fileira perde o eixo */
.taib-seg--vazio{visibility:hidden; height:26px; width:1px; border-color:transparent}
/* no card de 161px do celular, "A partir de R$ 260,00" a 12+19px não cabe e era CORTADO ("R$ 260,0(").
   Medido: com 10,5px no rótulo e 16px no valor, a linha fecha em ~131px dentro dos 137px úteis. */
@media(max-width:599px){
  .taib-val{height:21px} .taib-val b{font-size:16px}
  .taib-val .ap{font-size:10.5px} .taib-und{font-size:11px; height:15px}
  .taib-seg button{padding:5px 8px; font-size:10.5px} .taib-jur{font-size:10.5px; height:14px}
  .taib-seg--vazio{height:25px}
}

/* ---- 5. CTA no padrão Apple: nomeia o que acontece, seta que anda -----------------------------
   ☠️ o CTA renderizava PRETO: `.taib-card a{color:inherit}` (0,1,1) vencia `.taib-cta{color:var(--azul)}` (0,1,0).
   A ação primária tinha perdido a cor. O seletor abaixo tem a mesma especificidade e vem depois — agora ganha.
   E o CTA fica em UMA linha sempre: quando quebrava em duas, empurrava o preço do card 17,5px e desalinhava a fileira. */
.taib-card a.taib-cta{display:flex; align-items:center; gap:4px; margin-top:10px; font-size:13.5px; font-weight:600;
  color:var(--azul); letter-spacing:-.006em; text-decoration:none; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.taib-card a.taib-cta .seta{flex:none}
.taib-cta{display:inline-flex; align-items:center; gap:4px; margin-top:10px; font-size:13.5px; font-weight:600;
  color:var(--azul); letter-spacing:-.006em; text-decoration:none; line-height:1.3}
.taib-cta .seta{transition:transform .16s ease}
@media (hover:hover){ .taib-cta:hover{text-decoration:underline; text-underline-offset:3px} .taib-cta:hover .seta{transform:translateX(3px)} }
@media(max-width:599px){ .taib-cta{font-size:13px} }

/* ---- 6. Resposta no toque (feedback no pointer-down, não no soltar) --------------------------- */
.taib-card{transition:transform .1s ease-out, border-color .15s ease}
.taib-card:active{transform:scale(.985)}
@media (prefers-reduced-motion: reduce){ .taib-card, .taib-cor, .taib-seg button, .taib-cta .seta{transition:none !important} }

/* ---- 7. Calculadora: UMA vez, no topo, para a categoria inteira ------------------------------- */
.taib-calc-top{border:1px solid var(--ink); margin:22px 0 0; padding:14px 18px; display:grid; gap:12px 18px;
  grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .taib-calc-top{grid-template-columns:auto auto 1fr auto} }
.taib-calc-top h3{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0}
.taib-calc-top__campos{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.taib-calc-top input{width:92px; padding:10px 11px; border:1px solid var(--line); font:inherit; font-size:15px}
.taib-calc-top input:focus{outline:none; border-color:var(--ink)}
.taib-calc-top label{font-size:11px; color:var(--muted); display:block; margin-bottom:3px; letter-spacing:.06em; text-transform:uppercase}
.taib-calc-top .x{color:var(--muted); padding-top:16px}
.taib-calc-top__rec{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); white-space:nowrap}
.taib-calc-top__rec select{padding:8px 9px; border:1px solid var(--line); font:inherit; font-size:12.5px}
.taib-calc-top__r{font-size:13px; line-height:1.5; color:var(--muted); font-variant-numeric:tabular-nums}
.taib-calc-top__r b{color:var(--ink); font-size:16px}
.taib-calc-top__nota{grid-column:1/-1; font-size:11px; color:var(--muted); line-height:1.5; margin:0; padding-left:9px; border-left:2px solid var(--line)}
.taib-calc-top__limpar{background:none; border:none; font:inherit; font-size:12px; color:var(--azul); text-decoration:underline; cursor:pointer; padding:0}

/* ---- 8. Faixa de prova (Padrão A) ------------------------------------------------------------- */
.taib-prova{display:flex; justify-content:center; flex-wrap:wrap; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:16px 0 0}
.taib-prova span{padding:2px 12px}
.taib-prova span + span{border-left:1px solid var(--line)}
@media(max-width:599px){ .taib-prova span{border:none !important; padding:2px 8px} }

/* ---- 9. Card de amostra no grid --------------------------------------------------------------- */
.taib-amostra{border:1px solid var(--ink); background:#fff; display:flex; flex-direction:column; justify-content:center;
  gap:8px; padding:20px; text-decoration:none; color:var(--ink); cursor:pointer}
.taib-amostra__k{font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.taib-amostra b{font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.01em}
.taib-amostra p{font-size:12px; line-height:1.5; margin:0; color:var(--muted)}
.taib-amostra__cta{margin-top:auto; font-size:12px; font-weight:700; color:var(--azul)}

/* ---- 10. Filtro com explicação ---------------------------------------------------------------- */
.taif-sb-ajuda{font-size:11px; color:var(--muted); line-height:1.4; margin:-2px 0 8px 6px}

/* ---- 11. O card inteiro é link (mesma aba, direto para a PDP da cor) --------------------------- */
.taib-card a{color:inherit; text-decoration:none}
.taib-card__foto{display:block}
.taib-card__n{display:block; margin-bottom:1px}
.taib-card__in{gap:0}
.taib-card__in > .taib-tira{margin-top:9px}

/* ---- 12. Autoteste (?teste=1) ------------------------------------------------------------------ */
.taib-teste{position:fixed; left:12px; right:12px; bottom:12px; max-height:46vh; overflow:auto; z-index:200;
  background:#fff; border:2px solid var(--ink); font-size:12px; line-height:1.45; padding:12px 14px;
  box-shadow:0 10px 40px rgba(0,0,0,.25)}
.taib-teste h4{margin:0 0 8px; font-size:13px}
.taib-teste div{padding:3px 0; border-bottom:1px dotted var(--line)}
.taib-teste .p{color:#1a7f3c} .taib-teste .f{color:#b33; font-weight:700}


/* ================================================================== 08/Set — o que a validação de fluxo mediu
   Dois defeitos de tela, ambos com número: (a) no celular NÃO EXISTIA jeito de limpar os filtros — o "limpar"
   e o "×" moram em .taif-side__topo, que o _familias.css esconde abaixo de 900px, e mediam 0×0 px para o dedo;
   (b) o primeiro azulejo caía em y=1365 numa dobra de 664 — 1,62 dobra, zero produto na primeira tela. */

/* (a) o topo da gaveta existe no celular também — é lá que mora a saída */
@media(max-width:899px){
  .taif-side__topo{display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:2;
    background:var(--bg); padding:14px 0 10px; margin-bottom:2px; border-bottom:1px solid var(--line)}
  .taif-side__x{display:block; min-width:44px; min-height:44px; font-size:26px}   /* alvo de toque de verdade */
  .taif-limpar{min-height:44px; padding:0 8px}
}

/* (b) a primeira dobra é do azulejo. Some o que o h1 e o contador já dizem, e a conta fecha num toque. */
@media(max-width:599px){
  .taif-head{padding:18px 0 14px}
  .taif-kicker{display:none}                    /* o h1 abaixo diz a mesma coisa, maior */
  .taif-lead{display:none}                      /* "77 desenhos · 350 cores · sem paginação" já está no contador */
  .taib-promessas{display:flex; gap:10px; margin:14px -18px 0; padding:0 18px; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .taib-promessas::-webkit-scrollbar{display:none}
  .taib-prom{flex:0 0 72%; scroll-snap-align:start; padding:12px 14px; border:1px solid var(--line)}
  .taib-prom b{font-size:15px}
  .taib-prom span{font-size:11.5px; margin-top:3px}
  .taib-ordem{flex-wrap:nowrap; overflow-x:auto; margin:0 -18px 12px; padding:0 18px 2px; scrollbar-width:none}
  .taib-ordem::-webkit-scrollbar{display:none}
  .taib-ordem b{display:none}
  .taib-ordem button{flex:none; white-space:nowrap}
  .taif-conta{padding:8px 0}
}

/* a calculadora dobrada — fechada no celular, inteira no desktop */
.taib-calc-top__t{background:none; border:none; font:inherit; color:inherit; padding:0; text-align:left;
  letter-spacing:inherit; text-transform:inherit; cursor:default; display:flex; align-items:center; gap:8px; width:100%}
.taib-calc-top__t i{display:none}
@media(max-width:599px){
  .taib-calc-top{margin:16px 0 0; padding:0; border:none; gap:0}
  .taib-calc-top__t{cursor:pointer; min-height:46px; border:1px solid var(--ink); padding:0 14px;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700}
  .taib-calc-top__t i{display:block; margin-left:auto; width:9px; height:9px; border:solid var(--muted);
    border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease}
  .taib-calc-top[data-aberta="1"]{border:1px solid var(--ink); padding:14px 16px; gap:12px}
  .taib-calc-top[data-aberta="1"] .taib-calc-top__t{border:none; padding:0; min-height:0; margin-bottom:2px}
  .taib-calc-top[data-aberta="1"] .taib-calc-top__t i{transform:rotate(-135deg) translateY(-2px)}
  .taib-calc-top:not([data-aberta="1"]) > *:not(h3){display:none}
  .taib-calc-top input{flex:1; width:auto; min-width:0}
  .taib-calc-top__campos > div{flex:1}
}

/* o estado vazio agora fala — e leva de volta */
.taif-vazio i{font-style:normal; color:var(--ink); font-weight:600}
.taif-vazio__bt{display:inline-block; margin-top:14px; background:var(--ink); color:#fff; border:none;
  font:inherit; font-size:13px; font-weight:600; padding:11px 18px; cursor:pointer}
.taif-vazio__bt:hover{background:var(--azul)}


/* ================================================================== o convite de WhatsApp (08/Set)
   NÃO é modal: não escurece a tela e não trava a rolagem. É um painel paralelo — material translúcido
   e deslocamento, sem scrim, como manda a régua da Apple para o que não interrompe uma tarefa.
   Entra e sai pelo MESMO caminho (de baixo), porque some para onde apareceu. */
.taiw{position:fixed; z-index:60; left:12px; right:12px; bottom:12px; padding:18px 18px 14px;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(20,20,18,.10); border-top-color:rgba(255,255,255,.75);
  box-shadow:0 -2px 40px rgba(20,20,18,.16), 0 20px 60px rgba(20,20,18,.14);
  transform:translateY(calc(100% + 24px)) scale(.985); opacity:0; touch-action:none;
  transition:transform .40s cubic-bezier(.2,.9,.24,1), opacity .26s ease}
.taiw.on{transform:translateY(0) scale(1); opacity:1}
.taiw__pega{width:36px; height:4px; border-radius:2px; background:rgba(20,20,18,.18); margin:-8px auto 12px}
.taiw__x{position:absolute; right:6px; top:4px; width:44px; height:44px; border:none; background:none;
  font-size:24px; line-height:1; color:var(--muted); cursor:pointer}
.taiw__x:active{transform:scale(.92)}
.taiw__k{margin:0; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700}
/* 09/Set: o título encolheu — quem manda no painel é a conta, não o rótulo */
.taiw__t{margin:6px 0 0; font-size:16px; line-height:1.2; letter-spacing:-.012em; font-weight:700; color:var(--ink);
  padding-right:34px}
.taiw__sub{margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted)}
/* a calculadora dentro do painel (09/Set) — a mesma conta do topo, no espaço que o painel tem */
.taiw__calc{margin:12px 0 0}
.taiw__campos{display:flex; gap:9px; align-items:flex-end}
.taiw__campos > div{flex:1; min-width:0}
.taiw__campos .x{color:var(--muted); padding-bottom:12px}
.taiw__calc label{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px}
.taiw__calc input{width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line); background:#fff;
  font:inherit; font-size:16px}                       /* 16px: abaixo disso o iOS dá zoom sozinho no foco */
.taiw__calc input:focus{outline:none; border-color:var(--ink)}
/* hierarquia por tamanho: o m² é a resposta, o resto é apoio */
.taiw__r{margin:12px 0 0; font-size:13px; line-height:1.4; color:var(--muted); font-variant-numeric:tabular-nums}
.taiw__r b{display:block; color:var(--ink); font-weight:700; font-size:26px; line-height:1.1;
  letter-spacing:-.022em; margin-bottom:2px}
.taiw__r span{display:block; font-size:11.5px; line-height:1.45; margin-top:6px; color:var(--muted)}
.taiw__r span b.q{color:var(--ink); font-size:inherit; display:inline; font-weight:700}
/* ☠️ `display:block` vence `[hidden]` — o print pegou o botão da calculadora vivo depois de ela abrir.
   Mesma armadilha do botão "Montar" em 07/Set. Toda classe com display precisa dizer o que faz escondida. */
.taiw__bt2[hidden], .taiw__calc[hidden]{display:none !important}
.taiw__bt2{display:block; width:100%; margin:9px 0 0; min-height:46px; background:none; color:var(--ink);
  border:1px solid var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .12s ease, background .14s ease}
.taiw__bt2:active{transform:scale(.985)}
/* 09/Set: o verde do WhatsApp É o botão, não o hover. O ícone da marca ganha o fundo da marca. */
.taiw__bt{display:flex; align-items:center; justify-content:center; gap:9px; margin:16px 0 0; min-height:50px;
  background:#25D366; color:#0B2C18; text-decoration:none; font-size:15px; font-weight:700; letter-spacing:-.01em;
  transition:transform .12s ease, background .14s ease}
.taiw__bt svg{width:19px; height:19px; flex:none}
@media(hover:hover){ .taiw__bt:hover{background:#1EBE5A}      /* já é verde: o hover só aprofunda */
  .taiw__bt2:hover{background:var(--soft)}
  .taiw__nao:hover{color:var(--ink)} }
.taiw__bt:active{transform:scale(.985)}
.taiw__nao{display:block; width:100%; margin:6px 0 0; min-height:42px; border:none; background:none;
  font:inherit; font-size:13px; color:var(--muted); cursor:pointer}
@media(min-width:760px){
  .taiw{left:auto; right:22px; bottom:22px; width:344px; padding:22px 22px 18px}
  .taiw__pega{display:none}      /* no desktop não há dedo para arrastar */
}
/* o botão flutuante do zap sai da frente enquanto o convite está na tela — dois convites é ruído.
   A classe vem do JS: `:has()` numa lista de seletores invalida a regra inteira em quem não o suporta,
   e o `~` não alcança porque o .lj-zap vem ANTES do convite no DOM. */
body.com-convite .lj-zap, body.com-convite .calc-bt{opacity:0; pointer-events:none; transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){
  .taiw{transition:opacity .2s ease; transform:none}
  .taiw.on{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .taiw{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none}
}


/* frases.css — a compra rápida das frases (08/Set) */
/* ======================================================================================
   FRASES — a página de compra rápida (08/Set/2026)
   Pedido do Danilo: "uma página exclusiva para as frases, onde o cliente consegue comprar
   todas de forma individual, sem ficar indo e voltando; espelho idêntico do nosso site;
   e ao final tudo vai para o carrinho do nosso e-commerce."

   A moldura (header, footer, tipografia, cores) é a MESMA da loja — copiada literal pelo
   build, igual à página de coleção. Aqui mora só o que é novo: o card com contador, a
   sacola fixa e o estado de envio.
   ====================================================================================== */

/* ---- 1. Cabeçalho da página ---------------------------------------------------------- */
.tfr-head{padding:28px 0 18px}
.tfr-kicker{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600}
.tfr-h1{font-size:clamp(26px,4.4vw,40px); line-height:1.12; letter-spacing:-.022em; margin:8px 0 0; font-weight:700}
.tfr-lead{margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--muted); max-width:62ch}
.tfr-lead b{color:var(--ink); font-weight:600}

/* ---- 2. Barra de busca + contador (gruda no topo) ------------------------------------ */
.tfr-bar{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line);
  display:flex; gap:10px; align-items:center; padding:12px 0; margin-bottom:18px}
.tfr-busca{flex:1; min-width:0; height:46px; padding:0 16px; border:1px solid var(--line); background:var(--soft);
  font:inherit; font-size:15px; color:var(--ink); border-radius:999px; outline:none}
.tfr-busca:focus{border-color:var(--ink); background:#fff}
.tfr-conta{flex:none; font-size:12.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
@media(max-width:599px){ .tfr-conta{display:none} }

/* ---- 3. A grade ---------------------------------------------------------------------- */
.tfr-grade{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){ .tfr-grade{grid-template-columns:repeat(3,1fr); gap:18px} }
@media(min-width:1080px){ .tfr-grade{grid-template-columns:repeat(4,1fr)} }

.tfr-card{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;
  transition:border-color .15s ease, box-shadow .15s ease}
.tfr-card.tem{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.tfr-card__foto{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--soft)}
.tfr-card__foto img{width:100%; height:100%; object-fit:cover; display:block}
/* o selo de quantidade aparece só quando há item — sinal de que a frase já está na sacola */
.tfr-selo{position:absolute; left:8px; top:8px; z-index:2; min-width:24px; height:24px; padding:0 7px;
  display:none; align-items:center; justify-content:center; border-radius:999px;
  background:var(--ink); color:#fff; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.tfr-card.tem .tfr-selo{display:flex}

.tfr-card__corpo{padding:12px; display:flex; flex-direction:column; flex:1; gap:0}
/* o texto da frase É o produto: precisa de espaço fixo, senão a fileira perde o eixo */
.tfr-nome{font-size:13.5px; line-height:1.35; letter-spacing:-.004em; color:var(--ink); font-weight:500;
  min-height:3.6em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
@media(max-width:599px){ .tfr-nome{font-size:12.5px} }

.tfr-preco{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
.tfr-val{display:block; font-size:18px; font-weight:700; letter-spacing:-.022em; line-height:1.25}
.tfr-und{display:block; font-size:11.5px; color:var(--muted); margin-top:1px}
@media(max-width:599px){ .tfr-val{font-size:16px} }

/* ---- 4. O contador: o controle principal da página ----------------------------------- */
/* ☠️ lição da coleção (07/Set): alvo de dedo de verdade, nunca 24px. Aqui são 40px de altura. */
.tfr-qtd{display:flex; align-items:center; gap:0; margin-top:10px; border:1px solid var(--line); border-radius:999px;
  overflow:hidden; height:40px}
.tfr-card.tem .tfr-qtd{border-color:var(--ink)}
.tfr-qtd button{flex:none; width:40px; height:38px; border:none; background:none; font:inherit; font-size:19px;
  line-height:1; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background .14s ease}
.tfr-qtd button:disabled{color:#c9c9c9; cursor:default}
@media(hover:hover){ .tfr-qtd button:not(:disabled):hover{background:var(--soft)} }
.tfr-qtd button:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
.tfr-qtd output{flex:1; text-align:center; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--ink); min-width:0}
/* estado zero: o "+" é a ação, o resto é discreto */
.tfr-card:not(.tem) .tfr-qtd output{color:var(--muted); font-weight:400; cursor:pointer; align-self:stretch;
  display:grid; place-items:center}
.tfr-card:not(.tem) .tfr-qtd output:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
@media(hover:hover){ .tfr-card:not(.tem) .tfr-qtd output:hover{background:var(--soft)} }

.tfr-esgot{margin-top:10px; height:40px; display:grid; place-items:center; border:1px dashed var(--line);
  border-radius:999px; font-size:12px; color:var(--muted)}

/* ---- 5. A sacola: barra fixa embaixo (é onde a compra fecha) ------------------------- */
.tfr-sacola{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff;
  border-top:1px solid var(--ink); box-shadow:0 -6px 24px rgba(0,0,0,.10);
  transform:translateY(105%); transition:transform .22s cubic-bezier(.32,.72,0,1); will-change:transform}
.tfr-sacola.on{transform:translateY(0)}
.tfr-sacola__in{max-width:1200px; margin:0 auto; padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:14px}
.tfr-sacola__t{flex:1; min-width:0; line-height:1.3}
.tfr-sacola__n{display:block; font-size:12px; color:var(--muted); letter-spacing:.02em}
.tfr-sacola__v{display:block; font-size:19px; font-weight:700; letter-spacing:-.022em; font-variant-numeric:tabular-nums}
@media(max-width:599px){ .tfr-sacola__v{font-size:17px} .tfr-sacola__in{padding-left:14px; padding-right:14px; gap:10px} }

.tfr-ir{flex:none; height:50px; padding:0 24px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font:inherit; font-size:14.5px; font-weight:600; letter-spacing:-.004em; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:opacity .15s ease, transform .1s ease-out}
.tfr-ir:active{transform:scale(.98)}
.tfr-ir[disabled]{opacity:.55; cursor:default}
@media(max-width:599px){ .tfr-ir{height:46px; padding:0 18px; font-size:14px} }
.tfr-ver{flex:none; background:none; border:none; font:inherit; font-size:12.5px; color:var(--azul); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:0}
/* ☠️ 08/Set: com o painel lateral assumindo o desktop, o "ver escolhidas" some lá — e ele já
   estava escondido no celular. Resultado: NINGUÉM conseguia abrir a lista. Agora, no celular,
   a própria área do resumo abre a gaveta (padrão iFood), com seta indicando que é tocável. */
@media(max-width:599px){ .tfr-ver{display:none} }
.tfr-sacola__t{cursor:pointer; -webkit-tap-highlight-color:transparent}
.tfr-sacola__t::after{content:''; display:inline-block; width:7px; height:7px; margin-left:7px;
  border-right:1.5px solid var(--muted); border-top:1.5px solid var(--muted); transform:rotate(-45deg); vertical-align:middle}
.tfr-sacola__t:focus-visible{outline:2px solid var(--azul); outline-offset:3px}

/* a sacola cobre o fim da grade: o rodapé ganha respiro do tamanho dela */
body.tem-sacola{padding-bottom:86px}

/* ---- 6. A lista da sacola (gaveta) --------------------------------------------------- */
.tfr-gav{position:fixed; inset:0; z-index:70; display:none}
.tfr-gav.on{display:block}
.tfr-gav__fundo{position:absolute; inset:0; background:rgba(30,31,32,.42)}
.tfr-gav__cx{position:absolute; right:0; top:0; bottom:0; width:min(420px,92vw); background:#fff;
  display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.16)}
.tfr-gav__topo{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.tfr-gav__topo h2{flex:1; margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.tfr-gav__x{background:none; border:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px}
.tfr-gav__lista{flex:1; overflow-y:auto; padding:6px 18px}
.tfr-li{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.tfr-li img{flex:none; width:56px; height:56px; object-fit:cover; background:var(--soft)}
.tfr-li__t{flex:1; min-width:0; font-size:13px; line-height:1.35}
.tfr-li__p{display:block; color:var(--muted); font-size:12px; margin-top:3px; font-variant-numeric:tabular-nums}
.tfr-li__x{flex:none; background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer;
  text-decoration:underline; padding:4px}
.tfr-gav__pe{padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.tfr-gav__tot{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;
  font-variant-numeric:tabular-nums}
.tfr-gav__tot b{font-size:20px; letter-spacing:-.022em}
.tfr-gav__pe .tfr-ir{width:100%; justify-content:center}

/* ---- 7. Estado de envio: nunca uma tela que finge ------------------------------------ */
/* ☠️ feedback_tela_prototipo_que_finge_gravar: se o carrinho não puder ser montado, a página
   DIZ o que houve e oferece o caminho manual — não simula sucesso. */
.tfr-ir.enviando{pointer-events:none}
.tfr-ir .sp{width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:tfr-gira .7s linear infinite; display:none}
.tfr-ir.enviando .sp{display:block}
@keyframes tfr-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .tfr-sacola{transition:none} .tfr-ir .sp{animation-duration:2s}
}

.tfr-erro{margin:14px 0 0; padding:12px 14px; border-left:3px solid #b3261e; background:#fdf3f2;
  font-size:13px; line-height:1.55; color:var(--ink)}
.tfr-erro b{font-weight:600}
.tfr-erro a{color:var(--azul)}

/* ---- 8. Seção dos painéis (produto de dinâmica diferente) ---------------------------- */
/* ☠️ lição de 07/Set: tratar frase como cor fez o card anunciar R$ 17.814,30. Painel é m², frase é peça.
   Ficam separados, com o rótulo dizendo o que cada um é. */
.tfr-sec{margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line)}
.tfr-sec h2{font-size:19px; letter-spacing:-.012em; margin:0; font-weight:700}
.tfr-sec p{margin:6px 0 18px; font-size:14px; color:var(--muted); line-height:1.6; max-width:60ch}

/* ---- 9. Vazio da busca --------------------------------------------------------------- */
.tfr-vazio{padding:40px 0; text-align:center; color:var(--muted); font-size:14px}
.tfr-vazio button{background:none; border:none; font:inherit; color:var(--azul); text-decoration:underline; cursor:pointer}

/* ---- 10. Faixa de prova (mesma da coleção) ------------------------------------------- */
.tfr-prova{display:flex; justify-content:center; flex-wrap:wrap; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:10px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin:18px 0 22px}
.tfr-prova span{padding:2px 12px}
.tfr-prova span + span{border-left:1px solid var(--line)}
@media(max-width:599px){ .tfr-prova span{border:none !important; padding:2px 8px} }

/* ======================================================================================
   RODADA 2 (08/Set) — pedidos do Danilo:
   · 21+ peças => as frases de R$ 79,90 saem a R$ 49,90 (o preço muda no card, na hora)
   · sacola lateral sempre visível no desktop, no estilo iFood
   · o valor total na listagem, e "x peças = y m²"
   ====================================================================================== */

/* ---- Preço com desconto no card ------------------------------------------------------ */
.tfr-val s{font-size:13px; font-weight:400; color:var(--muted); text-decoration-thickness:1px; margin-right:3px}
.tfr-val b.ok{color:#0a7a3d}
/* .tfr-dica saiu em 08/Set: a regra não se repete em cada card (pedido do Danilo) */
@media(max-width:599px){ .tfr-val s{font-size:11.5px} .tfr-und{font-size:10.5px} }
/* a unidade agora pode ter duas linhas (rótulo + dica): solta a altura fixa */
.tfr-und{line-height:1.4}

/* ---- O degrau: quanto falta para o preço cair ---------------------------------------- */
.tfr-degrau{font-size:12.5px; line-height:1.45; color:var(--ink); background:#f4f9f5;
  border-left:3px solid #0a7a3d; padding:9px 12px; margin:0 0 12px}
.tfr-degrau b{font-weight:700}
.tfr-degrau.ok{background:#eef7f0}
.tfr-degrau__tr{display:block; height:4px; background:#dfe8e1; border-radius:999px; margin-top:7px; overflow:hidden}
.tfr-degrau__tr i{display:block; height:100%; background:#0a7a3d; border-radius:999px; transition:width .25s ease}
@media (prefers-reduced-motion: reduce){ .tfr-degrau__tr i{transition:none} }

/* ---- A SACOLA LATERAL (desktop) — o painel que acompanha a escolha ------------------- */
/* No celular ela não cabe: lá vale a barra de baixo + a gaveta. A partir de 1080px o painel
   fica fixo à direita e a grade encolhe para não passar por baixo dele. */
.tfr-painel{display:none}
@media(min-width:1080px){
  .tfr-painel{display:flex; flex-direction:column; position:fixed; right:0; top:0; bottom:0; width:330px;
    background:#fff; border-left:1px solid var(--line); z-index:55;
    transform:translateX(100%); transition:transform .24s cubic-bezier(.32,.72,0,1)}
  .tfr-painel.on{transform:translateX(0); box-shadow:-6px 0 26px rgba(0,0,0,.07)}
  /* a moldura da loja e o conteúdo cedem espaço — nada fica escondido atrás do painel */
  body.tem-sacola .taif-root, body.tem-sacola .lj-rodape, body.tem-sacola header{
    padding-right:330px; transition:padding-right .24s cubic-bezier(.32,.72,0,1)}
  body.tem-sacola{padding-bottom:0}
  body.tem-sacola .tfr-sacola{display:none}      /* no desktop o painel substitui a barra */
  body.tem-sacola .lj-zap{right:346px}
}
.tfr-painel__topo{display:flex; align-items:baseline; gap:8px; padding:16px 18px 12px; border-bottom:1px solid var(--line)}
.tfr-painel__topo h2{flex:1; margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.tfr-painel__lista{flex:1; overflow-y:auto; padding:2px 18px}
.tfr-painel__pe{border-top:1px solid var(--line); padding:14px 18px 18px}

/* ---- A linha de um item escolhido (serve ao painel e à gaveta) ------------------------ */
.tfr-li{display:flex; gap:11px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)}
.tfr-li img{flex:none; width:50px; height:50px; object-fit:cover; background:var(--soft)}
.tfr-li__t{flex:1; min-width:0}
.tfr-li__n{display:block; font-size:12.5px; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tfr-li__p{display:block; color:var(--muted); font-size:12px; margin-top:4px; font-variant-numeric:tabular-nums}
.tfr-li__p b{color:var(--ink); font-weight:700; font-size:13px}
.tfr-li__p b.ok{color:#0a7a3d}
.tfr-li__p s{color:var(--muted); opacity:.8; margin-right:2px}
.tfr-li__p i{font-style:normal; color:var(--muted); font-size:11px}
/* o contador na própria linha: dá para ajustar sem voltar à grade */
.tfr-li__q{flex:none; display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:999px; height:30px}
.tfr-li__q button{width:28px; height:28px; border:none; background:none; font:inherit; font-size:15px; line-height:1;
  color:var(--ink); cursor:pointer; display:grid; place-items:center}
.tfr-li__q span{min-width:20px; text-align:center; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums}
@media(hover:hover){ .tfr-li__q button:hover{background:var(--soft)} }

/* ---- O resumo: total e metragem (o pedido do Danilo) --------------------------------- */
.tfr-resumo{font-variant-numeric:tabular-nums; margin-bottom:12px}
.tfr-linha{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px;
  color:var(--muted); padding:2px 0}
/* ☠️ 08/Set, visto no print: a linha "Desconto 21+ peças − R$ 0,00" aparecia com a sacola sem
   desconto. O `hidden` do HTML é display:none, mas `display:flex` acima vence por especificidade
   de cascata. Sem este !important o atributo hidden não desliga nada num elemento flex. */
.tfr-linha[hidden]{display:none !important}
.tfr-linha--verde{color:#0a7a3d; font-weight:600}
.tfr-linha--tot{color:var(--ink); font-size:13px; padding-top:7px; margin-top:5px; border-top:1px solid var(--line)}
.tfr-linha--tot b{font-size:21px; font-weight:700; letter-spacing:-.022em}
.tfr-medida{display:block; font-size:11.5px; color:var(--muted); letter-spacing:.01em; margin-bottom:9px}

/* na barra de baixo (celular) o resumo divide espaço com o botão */
.tfr-sacola__n{font-variant-numeric:tabular-nums}

/* ---- A regra de volume, anunciada no topo -------------------------------------------- */
.tfr-regra{margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink);
  background:#f4f9f5; border-left:3px solid #0a7a3d; padding:11px 14px; max-width:62ch}
.tfr-regra b{font-weight:700}
@media(max-width:599px){ .tfr-regra{font-size:12.5px; padding:10px 12px} }

/* ---- O aviso não pode cobrir o produto ----------------------------------------------
   ☠️ 08/Set, visto no print: o toast herdado da Vitrine nasce centralizado e tapou dois cards
   inteiros — preço, contador e tudo. Ele informa; não pode esconder o que o cliente está lendo. */
.taib-toast{left:18px; right:auto; transform:none; max-width:min(340px,74vw); text-align:left}
@media(min-width:1080px){ .taib-toast{bottom:22px} }
@media(max-width:599px){ .taib-toast{left:12px; right:12px; max-width:none; bottom:96px} }

/* ☠️ 08/Set, visto no print do celular: o botão do WhatsApp (flutuante, herdado da moldura da
   loja) ficava POR CIMA do "Ir para o carrinho" da gaveta aberta — tapando a ação principal.
   Com a gaveta aberta ele sai de cena; volta assim que ela fecha. */
body:has(.tfr-gav.on) .lj-zap{opacity:0; pointer-events:none; transition:opacity .15s ease}

/* (o bloco do passo do cupom saiu em 08/Set: o desconto virou automatico na loja) */

/* o contador dentro da barra de progresso: "13 de 21" */
/* ☠️ o contador "19 de 21" ficava DENTRO do trilho, que tem overflow:hidden para o preenchimento
   não vazar — e era cortado junto. Agora ele fica fora do trilho, ancorado no bloco. */
.tfr-degrau{position:relative}
.tfr-degrau__tr em{position:absolute; right:12px; bottom:7px; font-style:normal; font-size:11px;
  color:var(--muted); font-variant-numeric:tabular-nums}
.tfr-degrau{padding-bottom:26px}
.tfr-degrau.ok{padding-bottom:9px}

/* a regra dentro da listagem do carrinho (painel lateral e gaveta) */
.tfr-regra-mini{font-size:12px; line-height:1.5; color:var(--ink); background:#f4f9f5;
  border-left:3px solid #0a7a3d; padding:9px 11px; margin:12px 0 4px}
.tfr-regra-mini b{font-weight:700}

/* ☠️ 09/Set, Danilo: o total daqui é SEM frete. Dizer isso na hora evita a surpresa de ver o
   número mudar no carrinho da loja — que é onde o frete entra, com o CEP. */
.tfr-frete{display:block; margin-top:7px; font-size:11px; line-height:1.45; color:var(--muted)}

/* o degrau quando o cliente NAO pode alcancar o desconto (so paineis): informa, nao promete */
.tfr-degrau.neutro{background:var(--soft); border-left-color:var(--line); padding-bottom:9px}

/* ======================================================================================
   O POP-UP DA FRASE (09/Set) — ver a peça de perto sem sair da grade
   ☠️ A foto aparecia a 274px vinda de um original de 2084px: o cliente comprava sem ver o
   traço. Pedido do Danilo e achado do validador na mesma rodada.
   ====================================================================================== */

/* ☠️ 09/Set — O BOTÃO EXISTIA E NINGUÉM VIA. Nasceu branco translúcido com borda #e1e1e1, e as
   fotos das frases são azulejo branco sobre fundo claro: ele sumia. O Danilo foi procurar e não
   achou; meu teste só provava que o elemento existe, não que ele é VISTO.
   Agora: fundo escuro, ícone branco e sombra — se lê em qualquer foto. E a FOTO INTEIRA abre o
   pop-up, que é o gesto que as pessoas tentam antes de procurar botão. */
.tfr-card__foto{cursor:zoom-in}
.tfr-lupa{position:absolute; right:9px; top:9px; z-index:2; width:38px; height:38px; padding:0;
  display:grid; place-items:center; border:none; border-radius:999px;
  background:rgba(30,31,32,.78); color:#fff; cursor:zoom-in;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:background .14s ease, transform .1s ease-out; -webkit-tap-highlight-color:transparent}
@media(hover:hover){
  .tfr-lupa:hover{background:var(--ink); transform:scale(1.06)}
  /* na entrada do mouse no card, um rótulo explica o que o botão faz */
  .tfr-card__foto:hover .tfr-lupa::after{content:'ampliar'; position:absolute; right:46px; top:50%;
    transform:translateY(-50%); background:var(--ink); color:#fff; font-size:11px; font-weight:600;
    letter-spacing:.04em; padding:5px 9px; border-radius:999px; white-space:nowrap}
}
.tfr-lupa:focus-visible{outline:2px solid #fff; outline-offset:-4px; box-shadow:0 0 0 4px var(--azul)}

.tfr-lupa-mod{position:fixed; inset:0; z-index:90; display:none}
.tfr-lupa-mod.on{display:block}
.tfr-lupa__fundo{position:absolute; inset:0; background:rgba(30,31,32,.72)}
.tfr-lupa__cx{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(940px,94vw); max-height:92vh; background:#fff; display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
@media(max-width:760px){
  .tfr-lupa__cx{grid-template-columns:1fr; width:96vw; max-height:94vh; overflow-y:auto}
}
.tfr-lupa__foto{background:var(--soft); display:grid; place-items:center; min-height:0}
.tfr-lupa__foto img{width:100%; height:100%; max-height:92vh; object-fit:contain; display:block}
@media(max-width:760px){ .tfr-lupa__foto img{max-height:58vh} }

.tfr-lupa__lado{padding:26px 24px; display:flex; flex-direction:column; gap:2px; min-width:0}
/* ☠️ 09/Set, visto no print do Danilo: o "×" caía POR CIMA do fim do título ("foi nosso" ficava
   atrás do botão). O título agora reserva a faixa do botão de fechar. */
.tfr-lupa__lado h2{margin:0; padding-right:44px; font-size:19px; line-height:1.3;
  letter-spacing:-.012em; font-weight:600}
.tfr-lupa__und{margin:8px 0 0; font-size:12.5px; color:var(--muted)}
.tfr-lupa__preco{margin:16px 0 0; font-variant-numeric:tabular-nums}
.tfr-lupa__preco b{font-size:26px; font-weight:700; letter-spacing:-.022em}
.tfr-lupa__preco b.ok{color:#0a7a3d}
.tfr-lupa__preco s{color:var(--muted); font-size:15px; margin-right:5px}
.tfr-lupa__lado .tfr-qtd{margin-top:18px; max-width:190px}
/* o link vira um bloco com peso — deixou de ser uma linha sublinhada solta */
/* ☠️ span e em eram itens flex e saíam LADO A LADO, quebrando "Ficha completa na loja" em três
   linhas espremidas. Grid: o texto empilha na coluna 1, a seta fica na 2. */
.tfr-lupa__pdp{margin-top:18px; display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:12px; padding:13px 15px; border:1px solid var(--line); text-decoration:none;
  color:var(--ink); transition:border-color .15s ease, background .15s ease}
.tfr-lupa__pdp > svg{grid-column:2; grid-row:1 / span 2}
.tfr-lupa__pdp span{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.004em}
.tfr-lupa__pdp em{display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px}
.tfr-lupa__pdp > svg{color:var(--muted)}
@media(hover:hover){ .tfr-lupa__pdp:hover{border-color:var(--ink); background:var(--soft)} }
.tfr-lupa__pdp:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* ☠️ 09/Set — o espaço em branco do pop-up virou o lugar de dizer quem a TAI é.
   Texto com a linguagem já aprovada da casa; nada inventado aqui. */
.tfr-selos{list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px}
.tfr-selos li{font-size:12px; line-height:1.5; color:var(--muted); padding-left:20px; position:relative}
.tfr-selos li::before{content:''; position:absolute; left:0; top:5px; width:11px; height:11px;
  border-radius:50%; border:2px solid #0a7a3d}
.tfr-selos li::after{content:''; position:absolute; left:3.5px; top:8.5px; width:4px; height:4px;
  border-radius:50%; background:#0a7a3d}
.tfr-selos b{display:block; color:var(--ink); font-size:12.5px; font-weight:600; margin-bottom:2px;
  letter-spacing:-.004em}
.tfr-selos i{font-style:normal; font-weight:600; color:var(--ink)}
@media(max-width:760px){ .tfr-selos{gap:12px; margin-top:16px} .tfr-selos li{font-size:11.5px} }
.tfr-lupa__conta{margin-top:auto; padding-top:16px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums}

.tfr-lupa__x{position:absolute; right:10px; top:8px; z-index:3; width:40px; height:40px; padding:0;
  border:none; background:rgba(255,255,255,.9); border-radius:999px; font-size:26px; line-height:1;
  color:var(--ink); cursor:pointer}
.tfr-lupa__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px;
  padding:0; border:1px solid var(--line); background:rgba(255,255,255,.92); border-radius:999px;
  font-size:26px; line-height:1; color:var(--ink); cursor:pointer; display:grid; place-items:center}
.tfr-lupa__nav.ant{left:10px}
.tfr-lupa__nav.pro{left:auto; right:calc(38% + 10px)}
@media(max-width:760px){ .tfr-lupa__nav.pro{right:10px} .tfr-lupa__nav{width:38px; height:38px} }
@media(hover:hover){ .tfr-lupa__nav:hover, .tfr-lupa__x:hover{background:#fff} }