/* =====================================================================
   Loja Cuidar de Mim — páginas públicas
   Um só tema, claro: as fotografias dos produtos precisam dele.
   ===================================================================== */

:root{
  --papel:#F2F4EE;
  --papel-fundo:#E7ECE2;
  --superficie:#FFFFFF;
  --tinta:#2B3A2D;
  --tinta-suave:#5E6E5D;
  --tinta-fraca:#8B978A;
  --risco:#DDE4D8;
  --risco-forte:#C4CFBE;
  --sage:#5F7A57;
  --sage-claro:#EAF0E6;
  --bronze:#9A8352;
  --bom:#3C6A4E;
  --bom-fundo:#E4EFE6;
  --aviso:#8A6410;
  --aviso-fundo:#F6EEDA;
  --grave:#8F362E;
  --grave-fundo:#F6E4E2;
  --sombra:0 1px 2px rgba(43,58,45,.04), 0 10px 30px -18px rgba(43,58,45,.28);
}

*{box-sizing:border-box;}
/* O atributo `hidden` tem de ganhar a qualquer display que uma classe
   nossa tenha posto. Sem isto, um `.procura-limpar{display:inline-flex}`
   deixava o ✕ à vista com o campo vazio — o browser só põe `display:none`
   como regra do agente, que qualquer classe ultrapassa. */
[hidden]{display:none !important;}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:"Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}

.saltar{position:absolute;left:-9999px;background:var(--sage);color:#fff;padding:.7rem 1.1rem;z-index:100;}
.saltar:focus{left:0;top:0;}
a{color:var(--sage);text-underline-offset:2px;}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:3px;}

/* ---------------------------------------------------------------- topo */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  border-bottom:1px solid var(--risco);background:var(--superficie);
}
.topo-marca{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1.05;}
.topo-cdm{font-family:"Parisienne",cursive;font-size:1.25rem;color:var(--sage);}
.topo-loja{
  font-family:"Marcellus",Georgia,serif;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-fraca);
}
.topo-nav{display:flex;gap:1.25rem;font-size:.92rem;}
.topo-nav a{text-decoration:none;color:var(--tinta-suave);}
.topo-nav a:hover{color:var(--sage);}

/* ---------------------------------------------------------------- corpo */
main{
  flex:1;width:100%;max-width:1100px;margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2rem) 4rem;
  display:flex;flex-direction:column;gap:1.5rem;
}
main.estreito{max-width:44rem;}

h1{
  font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,4.5vw,2.5rem);line-height:1.15;margin:0;letter-spacing:.01em;
}
h2{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.3rem;margin:0;}
p{margin:0 0 .9rem;max-width:65ch;}
p:last-child{margin-bottom:0;}
.lede{font-size:1.05rem;color:var(--tinta-suave);}

.cartao{
  background:var(--superficie);border:1px solid var(--risco);border-radius:10px;
  padding:clamp(1.1rem,3vw,1.75rem);box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:1rem;
}

.aviso{padding:.8rem 1rem;border-radius:8px;border-left:3px solid;font-size:.94rem;}
.aviso-sucesso{background:var(--bom-fundo);border-color:var(--bom);color:var(--bom);}
.aviso-erro{background:var(--grave-fundo);border-color:var(--grave);color:var(--grave);}
.aviso-info{background:var(--sage-claro);border-color:var(--sage);color:var(--sage);}

/* ---------------------------------------------------------------- formulários */
.campo{display:flex;flex-direction:column;gap:.3rem;}
.campo>span{font-size:.82rem;font-weight:500;color:var(--tinta-suave);}
.campo .ajuda{font-size:.8rem;color:var(--tinta-fraca);font-weight:400;}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=search],select,textarea{
  font:inherit;font-size:.98rem;padding:.62rem .8rem;width:100%;
  border:1px solid var(--risco-forte);border-radius:8px;
  background:var(--papel);color:var(--tinta);
}
textarea{resize:vertical;min-height:5rem;}
input[type=file]{
  font:inherit;font-size:.9rem;padding:.6rem;width:100%;
  border:1px dashed var(--risco-forte);border-radius:8px;background:var(--papel);
}
.linha{display:flex;gap:.8rem;flex-wrap:wrap;}
.linha>.campo{flex:1 1 13rem;}
.linha>.campo.curto{flex:0 1 9rem;}

.grupo{
  border:1px solid var(--risco);border-radius:9px;padding:1rem 1.1rem 1.15rem;margin:0;
  display:flex;flex-direction:column;gap:.85rem;
}
.grupo legend{
  font-family:"Marcellus",Georgia,serif;font-size:1rem;padding:0 .4rem;color:var(--tinta);
}
.grupo-nota{font-size:.86rem;color:var(--tinta-fraca);margin:0;}

.caixa{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;cursor:pointer;}
.caixa input{accent-color:var(--sage);width:1.05rem;height:1.05rem;flex:none;margin-top:.15rem;}

.botao{
  font:inherit;font-weight:500;font-size:1rem;
  padding:.72rem 1.4rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--sage);background:var(--sage);color:#fff;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:filter .18s ease;
}
.botao:hover{filter:brightness(1.08);}
.botao-simples{background:transparent;color:var(--tinta);border-color:var(--risco-forte);}
.botao-simples:hover{border-color:var(--sage);color:var(--sage);filter:none;}
.acoes{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}

.erros{background:var(--grave-fundo);border-left:3px solid var(--grave);border-radius:0 8px 8px 0;padding:.9rem 1.1rem;}
.erros ul{margin:.4rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.25rem;}
.erros strong{color:var(--grave);}

/* ---------------------------------------------------------------- rodapé */
.rodape{
  border-top:1px solid var(--risco);background:var(--superficie);
  padding:1.75rem clamp(1rem,4vw,2.5rem);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;
}
.rodape-marca{font-family:"Parisienne",cursive;font-size:1.2rem;color:var(--sage);}
.rodape nav{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;font-size:.88rem;}
.rodape nav a{color:var(--tinta-suave);text-decoration:none;}
.rodape nav a:hover{color:var(--sage);}
.rodape-fiscal{font-size:.78rem;color:var(--tinta-fraca);max-width:46ch;line-height:1.5;}

@media (prefers-reduced-motion: reduce){*{transition:none !important;}}

/* =====================================================================
   Área do parceiro
   ===================================================================== */

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.85rem;}
.numero{
  background:var(--superficie);border:1px solid var(--risco);border-radius:10px;
  padding:1.2rem;display:flex;flex-direction:column;gap:.2rem;box-shadow:var(--sombra);
}
.numero.atencao{border-left:3px solid var(--aviso);}
.numero-valor{
  font-family:"Marcellus",Georgia,serif;font-size:1.85rem;line-height:1;
  font-variant-numeric:tabular-nums;
}
.numero-rotulo{font-size:.85rem;color:var(--tinta-suave);}
.ajuda{font-size:.8rem;color:var(--tinta-fraca);font-weight:400;}

.tabela-scroll{overflow-x:auto;border:1px solid var(--risco);border-radius:9px;background:var(--superficie);}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:34rem;}
th,td{text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--risco);vertical-align:top;}
thead th{
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-fraca);font-weight:500;background:var(--papel);
}
tbody tr:last-child td{border-bottom:none;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;}
.positivo{color:var(--bom);font-variant-numeric:tabular-nums;}
.negativo{color:var(--aviso);font-variant-numeric:tabular-nums;}
.marca-off{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--papel-fundo);color:var(--tinta-fraca);padding:.1rem .45rem;border-radius:3px;
}

/* ---------------------------------------------------------------- vuímetro */
.vu{display:flex;flex-direction:column;gap:.85rem;}

.vu-leitura{display:flex;justify-content:space-between;gap:1rem;}
.vu-lado{display:flex;flex-direction:column;gap:.1rem;}
.vu-eu{text-align:right;}
.vu-pct{
  font-family:"Marcellus",Georgia,serif;font-size:2rem;line-height:1;
  font-variant-numeric:tabular-nums;
}
.vu-cliente .vu-pct{color:#4F6E8F;}
.vu-eu .vu-pct{color:var(--bronze);}
.vu-quem{font-size:.82rem;color:var(--tinta-suave);}

.vu-barra{
  display:flex;height:2.6rem;border-radius:6px;overflow:hidden;
  border:1px solid var(--risco-forte);background:var(--papel-fundo);
}
.vu-seg{transition:flex-grow .12s linear;}
.vu-seg-cliente{background:#4F6E8F;}
.vu-seg-eu{background:var(--bronze);}
.vu-seg.vazio{flex-grow:0 !important;}

.vu-manipulo input[type=range]{
  width:100%;margin:0;accent-color:var(--sage);height:1.6rem;cursor:grab;
}
.vu-manipulo input[type=range]:active{cursor:grabbing;}

.vu-exemplo{
  font-size:.95rem;color:var(--tinta-suave);margin:0;
  background:var(--sage-claro);border-radius:8px;padding:.7rem .9rem;
}
.vu-exemplo strong{color:var(--tinta);}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------------------------------------------------------------- códigos */
.codigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem;}
.codigo{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border:1px solid var(--risco-forte);border-radius:7px;padding:.5rem .7rem;
  background:var(--papel);
}
.codigo.usado{opacity:.5;background:var(--papel-fundo);}
.codigo-txt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;
  letter-spacing:.02em;
}
.codigo-estado{font-size:.72rem;color:var(--tinta-fraca);}
.copiar{
  font:inherit;font-size:.75rem;padding:.15rem .45rem;border-radius:4px;cursor:pointer;
  border:1px solid var(--risco-forte);background:var(--superficie);color:var(--tinta-suave);
}
.copiar:hover{border-color:var(--sage);color:var(--sage);}

@media print{
  .topo,.rodape,.acoes,.copiar{display:none;}
  .codigos{grid-template-columns:repeat(3,1fr);}
  .codigo{border-color:#999;}
}

.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem 1.5rem;margin:0;}
.dados div{display:flex;flex-direction:column;gap:.1rem;}
.dados dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-fraca);}
.dados dd{margin:0;font-size:.98rem;}

.codigo-destaque{align-items:center;text-align:center;gap:.6rem;}
.codigo-grande{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.08em;
  background:var(--sage-claro);color:var(--tinta);
  padding:.7rem 1.4rem;border-radius:10px;border:1px dashed var(--sage);
}
.codigo-destaque form{display:inline;}

.preco-medida{
  display:block;font-size:.8rem;color:var(--tinta-fraca);
  font-variant-numeric:tabular-nums;margin-top:.1rem;
}
.ficha-info .preco-medida{font-size:.88rem;margin:.2rem 0 0;}

/* ---------------------------------------------------------------- checkout */
.carrinho-grelha{display:grid;grid-template-columns:1fr minmax(17rem,22rem);gap:1.25rem;align-items:start;}
@media (max-width:820px){.carrinho-grelha{grid-template-columns:1fr;}}

.linha-carrinho{
  display:grid;grid-template-columns:3.5rem 1fr auto auto;gap:.9rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--risco);
}
.linha-carrinho:last-of-type{border-bottom:none;}
.lc-img img{width:3.5rem;height:3.5rem;object-fit:cover;border-radius:6px;display:block;border:1px solid var(--risco);}
.sem-foto{display:block;width:3.5rem;height:3.5rem;border-radius:6px;background:var(--papel-fundo);border:1px dashed var(--risco-forte);}
.sem-foto.grande{width:100%;aspect-ratio:1;height:auto;}
.lc-info{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.lc-nome{font-weight:500;text-decoration:none;color:inherit;}
.lc-nome:hover{color:var(--sage);}
.lc-qt input{width:4rem;text-align:center;}
.lc-qt-fixa{font-variant-numeric:tabular-nums;color:var(--tinta-suave);}
.lc-preco{text-align:right;display:flex;flex-direction:column;font-variant-numeric:tabular-nums;}

.resumo{
  background:var(--superficie);border:1px solid var(--risco);border-radius:10px;
  padding:1.25rem;box-shadow:var(--sombra);position:sticky;top:1rem;
  display:flex;flex-direction:column;gap:1rem;
}
.resumo h2{font-size:1.1rem;}
.resumo-itens{display:flex;flex-direction:column;gap:.4rem;font-size:.88rem;}
.ri{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;}
.ri-qt{color:var(--tinta-fraca);font-variant-numeric:tabular-nums;}
.ri-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ri-preco{font-variant-numeric:tabular-nums;}

.resumo-linhas{margin:0;display:flex;flex-direction:column;gap:.45rem;}
.resumo-linhas>div{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;}
.resumo-linhas dt,.resumo-linhas dd{margin:0;}
.resumo-linhas dd{font-variant-numeric:tabular-nums;}
.resumo-linhas .desconto{color:var(--bom);}
.resumo-linhas .total{
  border-top:1px solid var(--risco);padding-top:.6rem;margin-top:.2rem;
  font-family:"Marcellus",Georgia,serif;font-size:1.2rem;
}
.gratis{color:var(--bom);font-weight:500;}
.cupao-form{display:flex;gap:.5rem;align-items:flex-end;}
.cupao-form .campo{flex:1;}
.usar-credito{display:flex;gap:.5rem;align-items:flex-end;border-top:1px solid var(--risco);padding-top:.9rem;}
.usar-credito .campo{flex:1;}

.opcoes-entrega{display:flex;flex-direction:column;gap:.5rem;}
.opcao{
  display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  border:1px solid var(--risco-forte);border-radius:8px;padding:.8rem .9rem;
  transition:border-color .18s ease,background-color .18s ease;
}
.opcao:has(input:checked){border-color:var(--sage);background:var(--sage-claro);}
.opcao input{accent-color:var(--sage);margin-top:.2rem;flex:none;}
.opcao span{display:flex;flex-direction:column;gap:.1rem;}

/* passos da encomenda */
.passos{
  list-style:none;margin:0;padding:0;display:flex;gap:.4rem;flex-wrap:wrap;
  background:var(--superficie);border:1px solid var(--risco);border-radius:10px;padding:1rem;
}
.passos li{
  flex:1;min-width:7rem;display:flex;flex-direction:column;gap:.15rem;
  padding-top:.7rem;border-top:3px solid var(--risco);color:var(--tinta-fraca);font-size:.88rem;
}
.passos li.feito{border-top-color:var(--sage);color:var(--tinta);}
.passos li.agora .passo-nome{font-weight:600;color:var(--sage);}
.passo-nome{font-size:.94rem;}

/* catálogo */
.filtros-loja{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;}
.filtros-loja .campo{flex:0 1 12rem;}
.campo-largo{flex:1 1 18rem !important;}
.grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem;}
.produto{background:var(--superficie);border:1px solid var(--risco);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease;}
.produto:hover{border-color:var(--risco-forte);transform:translateY(-2px);}
.produto-img{display:block;position:relative;aspect-ratio:1;background:var(--papel-fundo);}
.produto-img img{width:100%;height:100%;object-fit:cover;display:block;}
.selo{position:absolute;top:.5rem;left:.5rem;font-size:.72rem;padding:.15rem .5rem;border-radius:4px;
  background:var(--grave);color:#fff;}
.produto-corpo{padding:.85rem;display:flex;flex-direction:column;gap:.25rem;flex:1;}
.produto-marca{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-fraca);}
.produto-nome{font-family:"Karla",sans-serif;font-size:.95rem;font-weight:500;margin:0;line-height:1.3;}
.produto-nome a{text-decoration:none;color:inherit;}
.produto-conteudo{font-size:.8rem;color:var(--tinta-fraca);}
.produto-preco{margin-top:auto;padding-top:.4rem;}
.preco-final{font-family:"Marcellus",Georgia,serif;font-size:1.15rem;}
.preco-final.grande{font-size:1.9rem;}
.preco-antes{text-decoration:line-through;color:var(--tinta-fraca);font-size:.85rem;margin-left:.4rem;}
.selo-parceiro{display:inline-block;font-size:.75rem;background:var(--sage-claro);color:var(--sage);
  padding:.1rem .5rem;border-radius:4px;margin-left:.5rem;}

/* ficha de produto */
.migalhas{font-size:.85rem;color:var(--tinta-fraca);}
.migalhas a{color:var(--tinta-suave);}
.ficha-produto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start;}
@media (max-width:760px){.ficha-produto{grid-template-columns:1fr;}}
.ficha-principal{width:100%;border-radius:10px;border:1px solid var(--risco);display:block;}
.ficha-miniaturas{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap;}
.mini{border:1px solid var(--risco);border-radius:6px;padding:0;background:none;cursor:pointer;overflow:hidden;}
.mini.ativa{border-color:var(--sage);}
.mini img{width:3.5rem;height:3.5rem;object-fit:cover;display:block;}
.ficha-info{display:flex;flex-direction:column;gap:.5rem;}
.ficha-conteudo{color:var(--tinta-suave);margin:0;}
.ficha-iva{font-size:.8rem;color:var(--tinta-fraca);margin:0;}
.ficha-comprar{display:flex;gap:.6rem;align-items:flex-end;margin:.5rem 0;}
.ficha-texto{font-size:.94rem;line-height:1.65;}
.advertencias{background:var(--aviso-fundo);border-left:3px solid var(--aviso);padding:.7rem .9rem;border-radius:0 6px 6px 0;}
.disponibilidade{font-size:.9rem;margin:0;}
.disp-ok{color:var(--bom);} .disp-pouco{color:var(--aviso);} .disp-esgotado{color:var(--grave);}
.areas{display:flex;gap:.5rem;flex-wrap:wrap;}
.area{background:var(--superficie);border:1px solid var(--risco);border-radius:999px;
  padding:.5rem 1.1rem;text-decoration:none;color:var(--tinta);font-size:.92rem;}
.area:hover{border-color:var(--sage);color:var(--sage);}
.discreto{font-size:.85rem;color:var(--tinta-fraca);}

.topo-carrinho{position:relative;display:inline-flex;align-items:center;gap:.35rem;}
.bolha{
  background:var(--sage);color:#fff;font-size:.72rem;font-weight:600;
  min-width:1.2rem;height:1.2rem;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;
}

/* --------------------------------------------------------- conversa */
.conversa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.fala{border:1px solid var(--risco);border-radius:10px;padding:.8rem 1rem;}
.fala-cliente{border-left:3px solid var(--risco-forte);}
.fala-loja{border-left:3px solid var(--sage);background:var(--sage-claro);}
.fala-quem{
  display:flex;gap:.6rem;align-items:baseline;justify-content:space-between;
  font-size:.85rem;font-weight:500;margin-bottom:.4rem;
}
.fala-texto{line-height:1.6;}

/* ------------------------------------------- formulário-tipo (Anexo) */
.formulario-tipo{
  border:1px solid var(--risco-forte);border-radius:10px;padding:1.2rem;
  background:var(--superficie);line-height:1.7;
}
.formulario-tipo .linha-preencher{
  border-bottom:1px solid var(--risco-forte);margin:.2rem 0 .9rem;min-height:1.4rem;
}
@media print{
  .topo,.rodape,.acoes,.aviso{display:none !important;}
  .cartao{border:0;padding:0;box-shadow:none;}
  .formulario-tipo{border:1px solid #000;}
}

/* ----------------------------------- aviso de loja fechada, só para nós */
.espreitadela{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:.6rem 1rem;font-size:.86rem;
  background:#2b2b28;color:#f3efe7;
  box-shadow:0 -2px 12px rgba(0,0,0,.18);
}
.espreitadela a{color:#f3efe7;text-decoration:underline;}
@media print{.espreitadela{display:none;}}

/* ------------------------------------------- código por SMS */
.codigo-grande{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.8rem;letter-spacing:.35em;text-align:center;
}
.ligacao-botao{
  background:none;border:0;padding:0;color:inherit;
  text-decoration:underline;cursor:pointer;font:inherit;
}


/* ======================================================================
   Página 404 — o bambual

   A animação é toda em CSS sobre um <svg> desenhado pelo PHP. Nenhuma
   biblioteca: são oito canas a rodar um grau e meio à volta da própria
   base, cada uma com o seu compasso, mais folhas soltas a atravessar.
   O desencontro é o que faz parecer vento; postas a bater certo pareciam
   um limpa-para-brisas.

   `transform-box:view-box` é o que permite dar o pivô em coordenadas do
   viewBox — sem isso o SVG roda à volta do canto da caixa e as canas
   fogem para fora do ecrã.
   ====================================================================== */
.perdido{display:flex;flex-direction:column;gap:1.6rem;}

.bambual{
  position:relative;
  margin:0 0 .4rem;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#F7F9F4 0%,var(--sage-claro) 100%);
  border:1px solid var(--risco);
}
.bambual svg{display:block;width:100%;height:clamp(190px,32vw,260px);}

/* Esbate-se em baixo para as canas não acabarem cortadas a direito. */
.bambual::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,var(--papel));
  pointer-events:none;
}

.cana-t1 .colmo{fill:#4E6A47;}
.cana-t2 .colmo{fill:#6E8A63;}
.cana-t3 .colmo{fill:#9DB292;}
.cana-t1 .no{fill:#3C5437;}
.cana-t2 .no{fill:#546B4B;}
.cana-t3 .no{fill:#7E9473;}
.cana-t1 .folha path{fill:#5A7A4F;}
.cana-t2 .folha path{fill:#7B9770;}
.cana-t3 .folha path{fill:#A8BC9D;}
.cana-t3{opacity:.75;}
.chao{fill:#C8D4BE;}
.voa path{fill:#8FA884;opacity:.6;}

.cana{
  transform-box:view-box;
  transform-origin:var(--pivo) 300px;
  animation:balancar var(--dur) ease-in-out var(--atraso) infinite;
}
@keyframes balancar{
  0%,100%{transform:rotate(-1.4deg);}
  50%    {transform:rotate(1.4deg);}
}

/* A folha tem o seu baloiço por cima do da cana: mais curto e mais solto. */
.folha{
  transform-box:view-box;
  transform-origin:var(--fpivo);
  animation:abanar var(--fdur) ease-in-out var(--fatraso) infinite;
}
@keyframes abanar{
  0%,100%{transform:rotate(-4deg);}
  50%    {transform:rotate(5deg);}
}

.voa{
  transform-box:view-box;
  animation:atravessar var(--vdur) linear var(--vatraso) infinite;
}
@keyframes atravessar{
  0%  {transform:translate(-40px,var(--y0)) rotate(-10deg);opacity:0;}
  10% {opacity:.6;}
  50% {transform:translate(250px,calc(var(--y0) - 30px)) rotate(16deg);}
  90% {opacity:.6;}
  100%{transform:translate(540px,calc(var(--y0) + 22px)) rotate(-6deg);opacity:0;}
}

/* Quem pediu ao sistema para parar as animações fica com o bambual quieto,
   e continua a ser um desenho bonito — não uma página partida. */
@media (prefers-reduced-motion:reduce){
  .cana,.folha,.voa{animation:none;}
  .voa{transform:translate(var(--x0),var(--y0)) rotate(8deg);opacity:.5;}
}

.perdido-numero{
  font-family:"Marcellus",Georgia,serif;
  font-size:clamp(2.6rem,9vw,3.6rem);line-height:1;
  color:var(--risco-forte);margin:0 0 .2rem;letter-spacing:.06em;
}
.perdido h1{margin:0 0 .5rem;}
.perdido-texto{display:flex;flex-direction:column;gap:.2rem;}
.perdido-texto .lede{margin:0 0 1.4rem;}

.perdido-caixa{
  background:var(--superficie);border:1px solid var(--risco);border-radius:10px;
  padding:clamp(1.1rem,3vw,1.6rem);box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.4rem;
}
.perdido-caixa h2{margin:0;}
.perdido-caixa p{margin:0;color:var(--tinta-suave);}

.perdido-procura{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;}
.perdido-procura .campo{flex:1 1 16rem;}
.perdido-procura .botao{flex:none;}

.perdido-nota{font-size:.9rem;}


/* A fita que diz que a loja está fechada. Fica logo abaixo do cabeçalho,
   nas páginas que continuam de pé — os termos, o contacto, o estado de uma
   encomenda, a 404. Discreta: informa, não alarma. */
.fita-fechada{
  /* O p da loja tem 65ch de largura de leitura e a fita herdava-a: ficava
     uma tarja a meio do ecrã em vez de uma faixa. Aqui não é texto para
     ler em coluna, é um aviso a atravessar a página. */
  max-width:none;
  margin:0;padding:.7rem clamp(1rem,4vw,2rem);
  background:var(--aviso-fundo);color:var(--aviso);
  border-bottom:1px solid rgba(138,100,16,.18);
  font-size:.9rem;text-align:center;
}
.fita-fechada a{color:inherit;text-underline-offset:3px;}

/* O logótipo no cabeçalho. Altura fixa e largura livre: assim o Pedro pode
   trocar a imagem por outra de proporção diferente sem partir a barra. */
.topo-logo{height:44px;width:auto;max-width:min(280px,55vw);object-fit:contain;display:block;}
@media (max-width:640px){ .topo-logo{height:34px;} }

/* --------------------------------------------------------------- partilhar
   Os três primeiros são links a sério e funcionam sem JavaScript. O copiar
   e o «Partilhar…» só aparecem quando o browser os suporta — um botão que
   não faz nada é pior do que botão nenhum. */
.partilhar{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--risco);
}
.partilhar-titulo{
  font-size:.82rem;color:var(--tinta-fraca);margin-right:.2rem;
}
.partilhar-b{
  font:inherit;font-size:.85rem;line-height:1;cursor:pointer;
  padding:.5rem .8rem;border-radius:999px;
  border:1px solid var(--risco-forte);background:var(--superficie);
  color:var(--tinta-suave);text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.partilhar-b:hover{border-color:var(--sage);color:var(--sage);}
.partilhar-feito{border-color:var(--bom);color:var(--bom);}
.partilhar-manual{flex:1 1 100%;margin-top:.5rem;}
.partilhar-manual input{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem;
  width:100%;padding:.5rem .7rem;border:1px solid var(--sage);border-radius:8px;
  background:var(--superficie);color:var(--tinta);
}

/* ======================================================================
   O bambual, e a entrada da loja

   O motivo é o mesmo da 404 e do cartão de partilha — é assim que a loja
   se reconhece. As canas baloiçam cada uma ao seu compasso; postas a bater
   certo pareciam um limpa-para-brisas.
   ====================================================================== */
.bambual-svg{display:block;width:100%;height:100%;}
.cana-t1 .colmo{fill:#4E6A47;} .cana-t2 .colmo{fill:#6E8A63;} .cana-t3 .colmo{fill:#9DB292;}
.cana-t1 .no{fill:#3C5437;}    .cana-t2 .no{fill:#546B4B;}    .cana-t3 .no{fill:#7E9473;}
.cana-t1 .folha path{fill:#5A7A4F;} .cana-t2 .folha path{fill:#7B9770;} .cana-t3 .folha path{fill:#A8BC9D;}
.cana-t3{opacity:.75;}
.chao{fill:#C8D4BE;}
.voa path{fill:#8FA884;opacity:.6;}

.cana{transform-box:view-box;transform-origin:var(--pivo) 300px;
      animation:balancar var(--dur) ease-in-out var(--atraso) infinite;}
@keyframes balancar{0%,100%{transform:rotate(-1.4deg);}50%{transform:rotate(1.4deg);}}

.folha{transform-box:view-box;transform-origin:var(--fpivo);
       animation:abanar var(--fdur) ease-in-out var(--fatraso) infinite;}
@keyframes abanar{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(5deg);}}

.voa{transform-box:view-box;animation:atravessar var(--vdur) linear var(--vatraso) infinite;}
@keyframes atravessar{
  0%  {transform:translate(-40px,var(--y0)) rotate(-10deg);opacity:0;}
  10% {opacity:.6;}
  50% {transform:translate(250px,calc(var(--y0) - 30px)) rotate(16deg);}
  90% {opacity:.6;}
  100%{transform:translate(540px,calc(var(--y0) + 22px)) rotate(-6deg);opacity:0;}
}

/* ============================================================= as faixas
   A entrada deixou de ser uma caixa dentro do <main> e passou a ser a
   primeira de uma pilha de faixas que atravessam o ecrã. Cada faixa trata
   da sua largura (.faixa-corpo) e do seu tom; o <main> só as empilha.

   Chegou-se aqui porque a página anterior era o contrário disto: tudo
   dentro da mesma coluna, tudo sobre o mesmo fundo, e portanto tudo com o
   mesmo peso. Percorrer não dava nenhuma sensação de andamento.
   ===================================================================== */
main.fluida{max-width:none;padding:0;gap:0;}
/* Os avisos do layout entram dentro do <main> sem faixa nenhuma à volta;
   sem isto ficavam colados à borda do ecrã numa página fluida. */
main.fluida > .aviso{
  max-width:1100px;width:calc(100% - 2 * clamp(1rem,4vw,2rem));
  margin:1.25rem auto -.25rem;
}

.faixa{position:relative;padding-block:clamp(2.5rem,6.5vw,4.25rem);}
.faixa-corpo{
  max-width:1100px;margin:0 auto;padding-inline:clamp(1rem,4vw,2rem);
  display:flex;flex-direction:column;gap:1.1rem;
}
.faixa-fina{padding-block:clamp(1.4rem,3.2vw,2.1rem);}
.faixa-branca{background:var(--superficie);border-block:1px solid var(--risco);}
.faixa-funda{background:var(--papel-fundo);}
.faixa-verde{background:var(--sage-claro);}

/* --------------------------------------------------------- a entrada */
.faixa-entrada{
  padding-block:clamp(3.25rem,8.5vw,6rem);
  background:linear-gradient(180deg,var(--papel) 0%,var(--papel-fundo) 100%);
  overflow:hidden;isolation:isolate;
}
.hero-fundo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;
  /* Esbate-se para a esquerda: as canas ficam do lado do ar, o texto do
     lado limpo. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%);
}
.hero-texto{max-width:34rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;}
.faixa-entrada h1{font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.12;margin:0;}
.faixa-entrada .lede{margin:0;max-width:30rem;}
.faixa-entrada .acoes{margin:.4rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap;}

/* ------------------------------------------------------- o fecho verde
   O mesmo desenho da entrada, ao espelho: canas à esquerda, texto à
   direita. Abre e fecha a página com o mesmo motivo sem parecer que se
   repetiu por falta de ideias. */
.faixa-fecho{overflow:hidden;isolation:isolate;}
.fecho-fundo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,#000 68%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,#000 68%);
}
.fecho-texto{max-width:36rem;margin-left:auto;display:flex;flex-direction:column;gap:.9rem;}
.faixa-fecho .acoes{margin:.3rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap;}
.marcas{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .55rem;
  font-size:.95rem;color:var(--tinta-suave);margin:0;
}
.marcas-rotulo{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-fraca);margin-right:.35rem;
}
.marcas-nome{font-family:"Marcellus",Georgia,serif;color:var(--tinta);}
/* O ponto tinha a cor de um risco e desaparecia sobre o verde claro: os
   nomes das marcas ficavam colados uns aos outros. */
.marcas-ponto{color:var(--tinta-fraca);}

@media (max-width:760px){
  .faixa-entrada,.faixa-fecho{text-align:center;}
  .hero-texto,.fecho-texto{align-items:center;max-width:none;margin-inline:auto;}
  .faixa-entrada .acoes,.faixa-fecho .acoes,.marcas{justify-content:center;}
  .hero-fundo,.fecho-fundo{opacity:.26;-webkit-mask-image:none;mask-image:none;}
  /* Dois botões de larguras diferentes, cada um centrado à sua maneira,
     ficavam desalinhados no telemóvel. Empilham-se e ficam do mesmo
     tamanho. */
  .faixa-entrada .acoes,.faixa-fecho .acoes{
    flex-direction:column;align-items:stretch;width:100%;max-width:22rem;margin-inline:auto;
  }
}

/* ------------------------------------------------------- as três frases */
.promessas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem 2.25rem;}
.promessa{display:flex;gap:.8rem;align-items:flex-start;}
.promessa svg{flex:none;width:20px;height:20px;fill:var(--sage);margin-top:.28rem;}
.promessa h3{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1rem;margin:0 0 .1rem;}
.promessa p{font-size:.88rem;color:var(--tinta-suave);margin:0;max-width:34ch;}

/* -------------------------------------------------- cabeçalho de secção */
.sobrancelha{
  display:block;font-family:"Marcellus",Georgia,serif;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-fraca);
  margin-bottom:.3rem;
}
.seccao-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;}
/* Só os títulos de secção crescem. Escrito como `.faixa h2` apanhava
   também o nome do produto dentro do cartão — no catálogo os nomes
   passaram a manchetes e a grelha desfez-se. */
.faixa-corpo > h2,.seccao-topo h2,.fecho-texto h2{font-size:clamp(1.4rem,2.8vw,1.95rem);line-height:1.2;}
.ligacao-seta{
  text-decoration:none;color:var(--sage);font-size:.9rem;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.35rem;padding-bottom:.15rem;
}
.ligacao-seta span{display:inline-block;transition:transform .18s ease;}
.ligacao-seta:hover span{transform:translateX(3px);}

/* ---------------------------------------------------------- as secções */
.seccao-nota{color:var(--tinta-suave);margin:-.4rem 0 .2rem;max-width:46ch;}

/* As áreas deixam de ser pastilhas paradas. */
.faixa .area{padding:.58rem 1.15rem;font-size:.95rem;box-shadow:0 1px 2px rgba(43,58,45,.03);}
.area{transition:transform .16s ease,border-color .16s ease,color .16s ease,background-color .16s ease,box-shadow .16s ease;}
.area:hover{transform:translateY(-2px);border-color:var(--sage);color:var(--sage);background:var(--sage-claro);
            box-shadow:0 6px 16px -10px rgba(43,58,45,.35);}

/* ------------------------------------------------- os cartões de produto
   O cartão levanta-se e a fotografia aproxima-se um pouco. É o suficiente
   para a página responder ao rato sem se armar em circo. */
.produto{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  will-change:transform;
}
.produto:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px -14px rgba(43,58,45,.30);
  border-color:var(--risco-forte);
}
.produto-img{overflow:hidden;}
.produto-img img{transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.produto:hover .produto-img img{transform:scale(1.06);}
.produto-nome a{transition:color .16s ease;}
.produto:hover .produto-nome a{color:var(--sage);}

/* --------------------------------------- o que vem a seguir numa ficha */
.parecidos{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;padding-top:1.75rem;
           border-top:1px solid var(--risco);}
.parecidos .seccao-topo h2{font-size:clamp(1.3rem,2.4vw,1.6rem);}

/* ---------------------------------------------------------- o catálogo */
.faixa-titulo{background:linear-gradient(180deg,var(--papel) 0%,var(--papel-fundo) 100%);
              padding-top:clamp(1.8rem,4.5vw,2.8rem);}
.faixa-titulo .faixa-corpo{gap:.55rem;}
.faixa-titulo .lede{margin:0;}
.faixa-pastilhas{background:var(--papel-fundo);padding-block:0 clamp(1rem,2.4vw,1.4rem);}
/* Texto corrido, e não flex: com `display:flex` cada pedaço de texto vira
   um item e o `gap` metia um espaço antes da vírgula. */
.procura-resumo{margin:.2rem 0 0;font-size:.92rem;color:var(--tinta-suave);}
.procura-resumo strong{color:var(--tinta);font-weight:600;}
.procura-resumo a{margin-left:.35rem;white-space:nowrap;}

/* A barra de filtros acompanha a descida. Com setenta produtos, mudar a
   ordenação não pode obrigar a subir a página toda. */
.faixa-filtros{
  position:sticky;top:0;z-index:30;
  background:var(--superficie);border-block:1px solid var(--risco);
  padding-block:.7rem;
}

/* ------------------------------------------------- a barra de procura
   Antes eram três controlos com três alturas diferentes na mesma linha —
   e a altura errada nota-se mais do que qualquer outra coisa numa barra.
   Agora há uma medida só, --alt-b, e tudo se senta nela.

   A lupa ocupa o tamanho de um botão enquanto ninguém procura nada, e
   estende-se ao ser carregada. É uma transição de `width`, que costuma
   ser má ideia — aqui não é: é um elemento só, sem irmãos a saltar. */
.barra{
  --alt-b:2.6rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.barra input,.barra select,.barra button,.barra .botao{font:inherit;}

.procura{
  position:relative;display:flex;align-items:center;
  height:var(--alt-b);width:min(26rem,100%);flex:0 1 26rem;
  background:var(--papel);border:1px solid var(--risco-forte);border-radius:999px;
  transition:width .28s cubic-bezier(.2,.7,.2,1),flex-basis .28s cubic-bezier(.2,.7,.2,1),
             box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
}
.procura:focus-within{
  border-color:var(--sage);background:var(--superficie);
  box-shadow:0 0 0 3px var(--sage-claro);
}
.procura-lupa{
  flex:none;width:var(--alt-b);height:var(--alt-b);padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:999px;cursor:pointer;color:var(--tinta-suave);
}
.procura-lupa svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.procura-lupa:hover{color:var(--sage);}
.procura.aberta .procura-lupa{color:var(--sage);}
/* O cabo da lupa roda um pouco ao abrir. É pouco de propósito: uma lupa
   que dá uma volta completa é um brinquedo, não uma ferramenta. */
.procura.aberta .procura-lupa svg{transform:rotate(-12deg);}
/* Escrito com dois níveis de propósito: a regra geral dos formulários
   apanha `input[type=search]` e desenhava um retângulo com moldura e
   fundo DENTRO da pílula — uma caixa dentro de outra caixa. Um seletor de
   classe simples não lhe chegava. */
.procura .procura-campo{
  flex:1;min-width:0;width:auto;height:100%;
  border:0;border-radius:0;background:transparent;color:var(--tinta);
  padding:0 .2rem 0 0;outline:none;font-size:.95rem;box-shadow:none;
}
.procura .procura-campo:focus{outline:none;box-shadow:none;}
.procura .procura-campo::placeholder{color:var(--tinta-fraca);}
.procura .procura-campo::-webkit-search-cancel-button{-webkit-appearance:none;display:none;}
.procura-limpar{
  flex:none;width:2rem;height:2rem;margin-right:.3rem;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:999px;cursor:pointer;color:var(--tinta-fraca);
}
.procura-limpar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.procura-limpar:hover{color:var(--grave);background:var(--papel-fundo);}

/* Fechada: fica do tamanho da lupa e o campo desaparece de vista e do
   teclado. Só acontece com JavaScript — ver .js-barra mais abaixo. */
.js-barra .procura:not(.aberta){width:var(--alt-b);flex:0 0 var(--alt-b);cursor:pointer;}
.js-barra .procura:not(.aberta) .procura-campo{opacity:0;pointer-events:none;}
.js-barra .procura:not(.aberta) .procura-limpar{display:none;}

.barra-b{
  display:inline-flex;align-items:center;gap:.45rem;
  height:var(--alt-b);padding:0 1rem;
  background:var(--superficie);border:1px solid var(--risco-forte);border-radius:999px;
  color:var(--tinta);cursor:pointer;font-size:.92rem;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.barra-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.barra-b:hover,.barra-b[aria-expanded="true"]{border-color:var(--sage);color:var(--sage);}
.barra-selo{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;
  background:var(--sage);color:#fff;font-size:.72rem;font-variant-numeric:tabular-nums;
}
.barra-conta{
  margin-left:auto;font-size:.85rem;color:var(--tinta-fraca);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Com JavaScript o botão Filtrar não tem nada que fazer: a procura é ao
   vivo e os <select> submetem-se sozinhos. Um botão que não é preciso
   carregar é o pior tipo de botão. */
.js-barra .barra-submeter{display:none;}
.barra-submeter{height:var(--alt-b);padding:0 1.2rem;border-radius:999px;}

/* O painel dos filtros ocupa a linha toda por baixo. */
.filtros-painel{
  flex-basis:100%;display:none;align-items:flex-end;gap:.7rem 1rem;flex-wrap:wrap;
  padding-top:.7rem;margin-top:.1rem;border-top:1px solid var(--risco);
}
.filtros-painel.aberto{display:flex;animation:painel-abre .22s ease;}
/* Sem JavaScript está sempre aberto: não há botão para o abrir. */
html:not(.js-barra) .filtros-painel{display:flex;}
@keyframes painel-abre{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.filtros-painel .campo{gap:.25rem;}
.filtros-painel .campo>span{font-size:.75rem;letter-spacing:.04em;color:var(--tinta-fraca);}
.filtros-painel select{
  height:2.3rem;padding:0 2rem 0 .7rem;border:1px solid var(--risco-forte);
  border-radius:8px;background-color:var(--superficie);color:var(--tinta);font-size:.92rem;
}
.filtros-limpar{
  font-size:.88rem;color:var(--tinta-suave);text-decoration:none;
  align-self:flex-end;padding-bottom:.5rem;
}
.filtros-limpar:hover{color:var(--sage);text-decoration:underline;}

/* Quando a procura ao vivo não deixa nada de pé. */
.grelha-vazia{
  background:var(--superficie);border:1px solid var(--risco);border-radius:10px;
  padding:clamp(1.5rem,4vw,2.5rem);text-align:center;
}
.grelha-vazia .lede{margin:0 auto .5rem;}
.grelha-vazia p{margin-inline:auto;}
/* A pastilha acesa: é a resposta visual a ter-se carregado nela na
   entrada. Sem estado ligado, as pastilhas eram nove botões que nunca
   diziam onde se estava. */
/* O número ao lado do nome: com duas ou três linhas de produto, saber
   quantos há em cada uma poupa um clique que não leva a lado nenhum. */
.area-conta{
  display:inline-block;margin-left:.45rem;font-size:.75rem;
  color:var(--tinta-fraca);font-variant-numeric:tabular-nums;
}
.area-ativa .area-conta{color:rgba(255,255,255,.75);}
.area-ativa{background:var(--sage);border-color:var(--sage);color:#fff;}
.area-ativa:hover{background:var(--sage);border-color:var(--sage);color:#fff;}

@media (max-width:760px){
  /* Nove pastilhas a quebrarem de linha davam cinco filas antes de se ver
     um produto. Passam a uma fila que se arrasta de lado. */
  .faixa-pastilhas .faixa-corpo{padding-inline:0;}
  .faixa-pastilhas .areas{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-inline:clamp(1rem,4vw,2rem);
  }
  .faixa-pastilhas .areas::-webkit-scrollbar{display:none;}
  .faixa-pastilhas .area{white-space:nowrap;flex:none;}
  /* Agarrada ao topo, a barra de filtros ocupava meio ecrã de telemóvel —
     que é o contrário de ajudar a procurar. */
  .faixa-filtros{position:static;}
  /* A lupa fechada e o botão de filtros cabem lado a lado; aberta, a
     procura toma a linha inteira e empurra a conta para baixo. */
  .procura{flex:1 1 100%;width:auto;}
  .js-barra .procura:not(.aberta){flex:0 0 var(--alt-b);}
  .barra-conta{margin-left:auto;}
  .filtros-painel .campo{flex:1 1 10rem;}
  .filtros-painel select{width:100%;}
}

/* No telemóvel a grelha caía para uma coluna e cada produto ocupava um
   ecrã inteiro: percorrer setenta produtos assim é impraticável. Duas
   colunas é o que qualquer loja faz, e é o que se espera. */
@media (max-width:540px){
  .grelha{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;}
  .produto-corpo{padding:.65rem;}
  .produto-nome{font-size:.88rem;}
}

/* --------------------------------------------------------- a revelação
   As secções sobem um pouco ao entrar no ecrã. Sem JavaScript nada disto
   acontece e a página fica igual — por isso a classe só é aplicada depois
   de o script arrancar. */
.js-revela .revela{opacity:0;transform:translateY(18px);}
.js-revela .revela.dentro{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
/* Na grelha, cada cartão entra um instante depois do anterior. */
.js-revela .revela.dentro .produto{animation:subir .5s cubic-bezier(.2,.7,.2,1) backwards;}
.js-revela .revela.dentro .produto:nth-child(1){animation-delay:.02s;}
.js-revela .revela.dentro .produto:nth-child(2){animation-delay:.08s;}
.js-revela .revela.dentro .produto:nth-child(3){animation-delay:.14s;}
.js-revela .revela.dentro .produto:nth-child(4){animation-delay:.20s;}
.js-revela .revela.dentro .produto:nth-child(n+5){animation-delay:.26s;}
@keyframes subir{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* Quem pediu ao sistema para parar as animações fica com tudo quieto — e
   com tudo VISÍVEL, que é o que costuma faltar nestas coisas. */
@media (prefers-reduced-motion:reduce){
  .cana,.folha,.voa{animation:none;}
  .voa{transform:translate(var(--x0),var(--y0)) rotate(8deg);opacity:.5;}
  .produto,.produto-img img,.area,.ligacao-seta span{transition:none;}
  .procura,.procura-lupa svg{transition:none;}
  .filtros-painel.aberto{animation:none;}
  .produto:hover{transform:none;}
  .produto:hover .produto-img img{transform:none;}
  .js-revela .revela{opacity:1;transform:none;}
  .js-revela .revela.dentro .produto{animation:none;}
}