/* ============================================================
   PIMENTA ROSA — CATÁLOGO
   Trilha · título · coluna de filtros · barra de visualização · grade
   ============================================================ */

/* ---------- Trilha ---------- */
.trilha{background:var(--sf-creme);border-bottom:1px solid var(--br-media)}
.trilha .wrap{display:flex;align-items:center;gap:8px;padding:11px 0;font-size:var(--fs-02);flex-wrap:wrap}
.trilha a{display:inline-flex;align-items:center;gap:7px;color:var(--tx-corpo);text-decoration:none;transition:var(--mo-rapido)}
.trilha a:hover{color:var(--ac-primaria)}
.trilha svg{width:15px;height:15px}
.trilha span[aria-hidden]{color:var(--pr-rose)}
.trilha #trilha-cat{color:var(--ac-primaria);font-weight:700}

/* ---------- Título da categoria ---------- */
.cat-cab{
  position:relative;overflow:hidden;
  background:linear-gradient(178deg,var(--sf-base),#FDF8EE);
  border-bottom:1px solid var(--br-suave);
}
.cat-cab::before{
  content:"";position:absolute;inset:0;background-image:var(--pt-damasco);background-size:60px 90px;opacity:.08;
  -webkit-mask-image:radial-gradient(70% 120% at 88% 0%,#000,transparent 70%);
          mask-image:radial-gradient(70% 120% at 88% 0%,#000,transparent 70%);
}
.cat-cab__in{position:relative;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6) 0}
.cat-cab__orn{
  flex:0 0 auto;width:56px;height:56px;border-radius:var(--rd-pill);display:grid;place-items:center;
  background:linear-gradient(150deg,var(--sf-rosa-veu),#F4E4EC);color:var(--ac-primaria);box-shadow:var(--sh-1);
}
.cat-cab__orn svg{width:30px;height:auto}
.cat-cab h1{
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);
  font-size:clamp(1.5rem,3vw,var(--fs-07));letter-spacing:-.02em;font-weight:600;
}
.cat-cab p{font-size:var(--fs-03);color:var(--tx-suave);margin-top:4px}

/* ---------- Duas colunas ---------- */
.pesquisa{position:relative;isolation:isolate;padding:var(--sp-7) 0 var(--sp-10);background:var(--sf-base)}
.pesquisa > .camada{overflow:hidden}
.pesquisa__in{position:relative;z-index:2;display:grid;grid-template-columns:264px 1fr;gap:var(--sp-6);align-items:start}

/* ---------- Coluna de filtros ---------- */
.lado{
  border-radius:var(--rd-lg);min-width:0;overflow:hidden;
  border:1px solid var(--br-suave);background:var(--sf-branco);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
}
/* nunca rola por dentro: a barra do sistema comia a lateral e cortava os filtros.
   A coluna rola junto com a página e só gruda quando cabe inteira na tela. */
@media (min-height:900px){
  .lado{position:sticky;top:92px}
}
.lado__cab{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-radius:calc(var(--rd-lg) - 1px) calc(var(--rd-lg) - 1px) 0 0;
  background:var(--gr-vinho);color:var(--tx-invertido);
  font-size:var(--fs-03);font-weight:700;letter-spacing:.01em;flex:0 0 auto;
}
.lado__cab svg{width:18px;height:18px;color:var(--pr-rose-clara)}
.lado__fechar{display:none;margin-left:auto;border:0;background:transparent;color:var(--pr-rose-clara);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.lado__c{padding:var(--sp-4);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);min-width:0}
.lado__c > *{min-width:0}

.busca{
  display:flex;align-items:center;gap:10px;padding:0 12px;min-width:0;
  border:1.5px solid var(--br-media);border-radius:var(--rd-pill);background:var(--sf-base);
  transition:var(--mo-rapido);
}
.busca:focus-within{border-color:var(--ac-primaria);box-shadow:0 0 0 4px rgba(163,14,80,.12);background:#fff}
.busca svg{width:17px;height:17px;color:var(--ac-primaria);flex:0 0 auto}
.busca input{
  flex:1 1 0;width:100%;min-width:0;border:0;background:transparent;padding:11px 0;
  font-family:var(--ff-corpo);font-size:var(--fs-03);color:var(--tx-forte);
  -webkit-appearance:none;appearance:none;border-radius:0;   /* o searchfield nativo do Safari impõe largura própria */
}
.busca input:focus{outline:none}
.busca input::-webkit-search-cancel-button{display:none}
.busca__x{border:0;background:var(--sf-creme-2);color:var(--tx-corpo);cursor:pointer;width:22px;height:22px;border-radius:var(--rd-pill);font-size:15px;line-height:1}
.busca__x:hover{background:var(--ac-primaria);color:#fff}

.grupo{border-top:1px solid var(--br-suave);padding-top:var(--sp-3)}
.grupo summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-03);font-weight:700;color:var(--tx-forte);padding:5px 0;
}
.grupo summary::-webkit-details-marker{display:none}
.grupo summary::after{
  content:"";width:8px;height:8px;border-right:1.7px solid var(--ac-primaria);border-bottom:1.7px solid var(--ac-primaria);
  transform:rotate(45deg) translate(-2px,-2px);transition:var(--mo-rapido);
}
.grupo[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.grupo__c{display:grid;gap:1px;padding:6px 0 10px}

.opcao{display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 8px;border-radius:var(--rd-sm);transition:var(--mo-rapido)}
.opcao:hover{background:var(--sf-rosa-veu)}
.opcao input{position:absolute;opacity:0;width:0;height:0}
.opcao__marca{
  flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--br-media);
  background:var(--sf-branco);display:grid;place-items:center;transition:var(--mo-rapido);
}
.opcao__marca::after{
  content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;transition:var(--mo-rapido);margin-top:-2px;
}
.opcao input:checked + .opcao__marca{background:var(--gr-acao);border-color:transparent}
.opcao input:checked + .opcao__marca::after{opacity:1;transform:rotate(-45deg) scale(1)}
.opcao input:focus-visible + .opcao__marca{outline:2px solid var(--ac-primaria);outline-offset:2px}
.opcao__rot{font-size:var(--fs-02);color:var(--tx-corpo);line-height:1.3}
.opcao input:checked ~ .opcao__rot{color:var(--ac-primaria);font-weight:700}
.opcao__n{
  margin-left:auto;font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);
  font-size:var(--fs-01);color:var(--tx-suave);
}
.lado__limpar{
  border:1px solid var(--br-rose);background:var(--sf-rosa-veu);color:var(--ac-primaria);cursor:pointer;
  font-family:var(--ff-corpo);font-size:var(--fs-02);font-weight:700;padding:10px;border-radius:var(--rd-sm);
}
.lado__limpar:hover{background:var(--gr-acao);color:#fff;border-color:transparent}

/* ---------- Barra de visualização e ordenação ---------- */
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding:10px 14px;margin-bottom:var(--sp-4);
  background:var(--sf-branco);border:1px solid var(--br-suave);border-radius:var(--rd-md);box-shadow:var(--sh-1);
}
.barra__vis,.barra__ord{display:flex;align-items:center;gap:10px}
.barra__rot{font-size:var(--fs-01);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-suave);font-weight:700}
.vis{display:flex;gap:3px;background:var(--sf-creme);padding:3px;border-radius:var(--rd-sm);border:1px solid var(--br-media)}
.vis__b{
  width:34px;height:30px;display:grid;place-items:center;cursor:pointer;
  border:0;background:transparent;color:var(--tx-corpo);border-radius:5px;transition:var(--mo-rapido);
}
.vis__b svg{width:17px;height:17px}
.vis__b:hover{color:var(--ac-primaria)}
.vis__b.is-on{background:var(--gr-vinho);color:var(--tx-invertido)}
.ordem{
  font-family:var(--ff-corpo);font-size:var(--fs-02);font-weight:700;color:var(--tx-forte);cursor:pointer;
  padding:9px 34px 9px 12px;border-radius:var(--rd-sm);border:1.5px solid var(--br-media);background-color:var(--sf-branco);
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ac-primaria) 50%),linear-gradient(135deg,var(--ac-primaria) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.ordem:focus{outline:none;border-color:var(--ac-primaria);box-shadow:0 0 0 3px rgba(163,14,80,.12)}
.contador{font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-02);color:var(--tx-suave);white-space:nowrap}
.contador b{color:var(--ac-primaria)}

/* fichas dos filtros ativos */
.ativos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--sp-4)}
.ativo{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-02);font-weight:700;
  padding:6px 8px 6px 13px;border-radius:var(--rd-pill);
  background:var(--sf-rosa-veu);border:1px solid var(--br-rosa);color:var(--ac-primaria);
}
.ativo button{
  border:0;background:transparent;color:inherit;cursor:pointer;font-size:16px;line-height:1;
  width:20px;height:20px;border-radius:var(--rd-pill);transition:var(--mo-rapido);
}
.ativo button:hover{background:var(--ac-primaria);color:#fff}

/* ---------- Grade ---------- */
.grade{display:grid;gap:var(--sp-4)}
.grade--grade{grid-template-columns:repeat(3,1fr)}
.grade--lista,.grade--compacta{grid-template-columns:1fr;gap:10px}

.pcard{
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  border:1px solid var(--br-suave);border-radius:var(--rd-lg);background:var(--sf-branco);
  transition:transform var(--mo-padrao),box-shadow var(--mo-padrao),border-color var(--mo-padrao);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--br-rose)}
.pcard[hidden]{display:none}
.pcard__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;min-height:0;
  background:
    radial-gradient(circle at 50% 30%,#FFFFFF,transparent 68%),
    linear-gradient(155deg,var(--sf-rosa-veu) 0%,var(--sf-creme) 64%,var(--sf-creme-2) 100%);
}
.pcard__media::before{
  content:"";position:absolute;inset:0;background-image:var(--pt-damasco);background-size:60px 90px;opacity:.09;
  -webkit-mask-image:radial-gradient(62% 62% at 50% 50%,transparent 36%,#000 92%);
          mask-image:radial-gradient(62% 62% at 50% 50%,transparent 36%,#000 92%);
}
.pcard__media img{
  position:absolute;inset:var(--sp-4);margin:auto;width:auto;height:auto;
  max-width:calc(100% - var(--sp-6));max-height:calc(100% - var(--sp-6));object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(72,4,17,.16));transition:transform var(--mo-padrao);
}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__corpo{padding:var(--sp-4);display:flex;flex-direction:column;gap:5px;flex:1;text-align:center;align-items:center}
.pcard__linha{font-size:var(--fs-01);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pr-rose)}
.pcard__nome{
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);
  font-size:var(--fs-05);font-weight:600;color:var(--tx-forte);line-height:1.18;letter-spacing:-.01em;
}
.pcard__formato{font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-02);color:var(--tx-suave);letter-spacing:.04em}
.pcard__add{
  margin-top:auto;padding-top:var(--sp-4);display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:0;background:transparent;color:var(--ac-primaria);
  font-family:var(--ff-corpo);font-size:var(--fs-02);font-weight:700;transition:var(--mo-rapido);
}
.pcard__add svg{
  width:20px;height:20px;padding:3px;border-radius:var(--rd-pill);flex:0 0 auto;
  border:1.5px solid var(--ac-primaria);transition:var(--mo-rapido);
}
.pcard__add:hover{color:var(--ac-primaria-a)}
.pcard__add:hover svg{background:var(--gr-acao);color:#fff;border-color:transparent}
.pcard__add.is-add{color:var(--pr-vinho)}
.pcard__add.is-add svg{background:var(--gr-vinho);color:#fff;border-color:transparent;transform:rotate(45deg)}

/* quantidade (aparece no card quando o item está na lista, e em cada linha da lista) */
.qtd{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--br-rosa);border-radius:var(--rd-pill);background:var(--sf-branco);padding:2px}
.qtd__b{width:30px;height:30px;border:0;border-radius:var(--rd-pill);background:transparent;color:var(--ac-primaria);font-size:18px;line-height:1;cursor:pointer;font-family:var(--ff-corpo);transition:var(--mo-rapido)}
.qtd__b:hover{background:var(--gr-acao);color:#fff}
.qtd__n{width:44px;border:0;background:transparent;text-align:center;font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-03);font-weight:700;color:var(--tx-forte);appearance:none;-moz-appearance:textfield}
.qtd__n:focus{outline:none;background:var(--sf-rosa-veu);border-radius:var(--rd-sm)}
.qtd__un{font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-01);color:var(--tx-suave);padding:0 8px 0 2px;letter-spacing:.06em}
.pcard__qtd{margin-top:auto;padding-top:var(--sp-3);display:flex;flex-direction:column;align-items:center;gap:6px}
.pcard__qtd + .pcard__add{margin-top:0;padding-top:8px}
.pcard__qtd-rot{font-size:var(--fs-01);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--pr-vinho)}
.grade--lista .pcard__qtd{align-items:flex-start}
.grade--compacta .pcard__qtd{flex-direction:row;align-items:center;margin:0;padding:0;gap:8px}
.grade--compacta .pcard__qtd-rot{display:none}
/* na barra escura da lista */
.orc__lista .qtd{border-color:rgba(233,195,210,.35);background:rgba(253,246,236,.08);margin-left:auto}
.orc__lista .qtd__b{color:var(--pr-rose-clara)}
.orc__lista .qtd__n{color:#fff}
.orc__lista .qtd__un{color:var(--pr-rose-clara)}
.orc__lista .orc__x{margin-left:0}

/* visualização em lista */
.grade--lista .pcard{flex-direction:row;align-items:stretch}
.grade--lista .pcard__media{flex:0 0 190px;aspect-ratio:1}
.pcard__semfoto{position:absolute;inset:0;margin:auto;width:30%;height:auto;color:var(--pr-rose);opacity:.5}
.grade--lista .pcard__corpo{text-align:left;align-items:flex-start;justify-content:center;padding:var(--sp-5);gap:6px}
.grade--lista .pcard__nome{font-size:var(--fs-06)}
.grade--lista .pcard__add{margin-top:var(--sp-3);padding-top:0}

/* visualização compacta */
.grade--compacta .pcard{flex-direction:row;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:var(--rd-md)}
.grade--compacta .pcard:hover{transform:none}
.grade--compacta .pcard__media{flex:0 0 58px;aspect-ratio:1;border-radius:var(--rd-sm)}
.grade--compacta .pcard__media img{inset:6px;max-width:calc(100% - 12px);max-height:calc(100% - 12px);filter:none}
.grade--compacta .pcard__media::before{display:none}
.grade--compacta .pcard__corpo{
  flex-direction:row;align-items:center;gap:var(--sp-4);padding:0;text-align:left;flex:1;flex-wrap:wrap;
}
.grade--compacta .pcard__nome{font-size:var(--fs-04);flex:1 1 220px}
.grade--compacta .pcard__linha{order:-1;flex:0 0 165px;text-align:left}
.grade--compacta .pcard__formato{flex:0 0 130px}
.grade--compacta .pcard__add{margin:0;padding:0}
.grade--compacta .pcard__add span{display:none}

/* ---------- Estado vazio ---------- */
.vazio-busca{max-width:52ch;margin:var(--sp-9) auto;text-align:center;display:grid;justify-items:center;gap:var(--sp-3)}
.vazio-busca svg{width:52px;height:auto;color:var(--pr-rose)}
.vazio-busca h3{font-size:var(--fs-06)}
.vazio-busca p{font-size:var(--fs-03);color:var(--tx-corpo)}
.vazio-busca__acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:var(--sp-2)}

/* ---------- Lista de orçamento ---------- */
.orc{
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:var(--gr-vinho);color:var(--tx-invertido);box-shadow:0 -12px 34px rgba(72,4,17,.24);
  animation:sobe var(--mo-padrao) both;
}
@keyframes sobe{from{transform:translateY(100%)}to{transform:none}}
.orc__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:12px 0;flex-wrap:wrap}
.orc__toggle{display:flex;align-items:center;gap:12px;background:transparent;border:0;cursor:pointer;color:inherit;font-family:var(--ff-corpo);font-size:var(--fs-03);font-weight:700;padding:4px}
.orc__toggle svg{width:18px;height:18px;color:var(--pr-rose-clara);transition:var(--mo-rapido)}
.orc__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.orc__n{
  min-width:34px;height:34px;padding:0 8px;border-radius:var(--rd-pill);display:grid;place-items:center;
  background:var(--gr-acao);font-family:var(--ff-display);font-variation-settings:var(--fv-display);font-size:var(--fs-04);color:#fff;
}
.orc__rot{color:var(--pr-rose-clara);font-weight:400;font-size:var(--fs-02)}
.orc__acoes{display:flex;align-items:center;gap:10px}
.orc__acoes .btn--fantasma{--btn-fg:var(--pr-rose-clara);--btn-bg-h:rgba(253,246,236,.10)}
.orc__lista{border-top:1px solid rgba(233,195,210,.22);max-height:min(46vh,360px);overflow-y:auto;padding:var(--sp-4) 0}
.orc__lista ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.orc__lista li{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:var(--rd-md);background:rgba(253,246,236,.07);font-size:var(--fs-03)}
.orc__lista b{color:#fff;font-weight:600}
.orc__lista span{color:var(--pr-rose-clara);font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-02)}
.orc__x{margin-left:auto;border:0;background:transparent;color:var(--pr-rose-clara);cursor:pointer;font-size:20px;line-height:1;width:30px;height:30px;border-radius:var(--rd-pill);transition:var(--mo-rapido)}
.orc__x:hover{background:rgba(253,246,236,.12);color:#fff}

body.tem-orc{padding-bottom:86px}
body.tem-orc .zap-fixo{bottom:96px}

/* botão de filtros no mobile */
.filtros-mob{
  display:none;position:fixed;left:20px;bottom:20px;z-index:64;align-items:center;gap:8px;cursor:pointer;
  padding:13px 20px;border-radius:var(--rd-pill);border:0;
  background:var(--gr-vinho);color:var(--tx-invertido);box-shadow:var(--sh-3);
  font-family:var(--ff-corpo);font-size:var(--fs-03);font-weight:700;
}
.filtros-mob svg{width:18px;height:18px;color:var(--pr-rose-clara)}
body.filtros-abertos .filtros-mob,body.filtros-abertos .zap-fixo{opacity:0;pointer-events:none;transition:opacity var(--mo-rapido)}
.lado__fundo{position:fixed;inset:0;z-index:85;background:rgba(46,2,9,.5);backdrop-filter:blur(2px)}

/* ---------- Responsivo ---------- */
@media (max-width:1180px){
  .grade--grade{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  /* nem z-index nem isolation aqui: os dois criam contexto de empilhamento
     e prendiam o drawer atrás do cabeçalho fixo */
  .pesquisa{isolation:auto}
  .pesquisa__in{grid-template-columns:1fr;z-index:auto}
  .lado{
    position:fixed;top:0;left:0;bottom:0;width:min(330px,88vw);z-index:90;max-height:none;border-radius:0;
    transform:translateX(-102%);transition:transform var(--mo-padrao);box-shadow:var(--sh-4);
  }
  .lado.is-aberto{transform:none}
  .lado{overflow-y:auto}
  .lado__fechar{display:block}
  .filtros-mob{display:inline-flex}
  body.tem-orc .filtros-mob{bottom:96px}
  .grade--grade{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cat-cab__in{padding:var(--sp-5) 0;flex-direction:column;text-align:center}
  .trilha .wrap{justify-content:center}
  .barra{justify-content:center}
  .filtros-mob{left:50%;transform:translateX(-50%)}
  .barra{justify-content:space-between}
  .barra__vis .barra__rot,.barra__ord .barra__rot{display:none}
  .contador{order:3;width:100%}
  .grade--grade{grid-template-columns:1fr 1fr;gap:10px}
  .pcard__corpo{padding:var(--sp-3)}
  .pcard__nome{font-size:var(--fs-03)}
  .pcard__add span{display:none}
  .grade--lista .pcard__media{flex-basis:110px}
  .grade--lista .pcard__corpo{padding:var(--sp-3)}
  .grade--lista .pcard__nome{font-size:var(--fs-04)}
  .grade--compacta .pcard__linha{flex-basis:100%}
  .grade--compacta .pcard__formato{flex-basis:auto}
  .orc__in{justify-content:center}
  .orc__acoes{width:100%}
  .orc__acoes .btn--zap{flex:1}
  body.tem-orc{padding-bottom:132px}
  body.tem-orc .zap-fixo{bottom:142px}
  body.tem-orc .filtros-mob{bottom:142px}
}
@media (prefers-reduced-motion:reduce){
  .orc{animation:none}
  .lado{transition:none}
}