/* 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)}