/* =====================================================================
   DRUZA — druza-shop.css
   Sistema de navegação e descoberta de produtos.

   Carregado SEMPRE depois de css/druza.css: reaproveita os mesmos tokens
   (--rose, --ink, --display, --sans, --ease) e só adiciona os componentes
   novos. Nada aqui redefine cor de marca, tipografia ou logo.

   Componentes:
     .dzhead    cabeçalho (desktop + mobile)
     .dzmega    mega menu de desktop
     .dzdrawer  menu lateral mobile com accordions
     .dzsearch  busca com sugestões
     .plp       cabeçalho de categoria + breadcrumb
     .fbar      barra de filtros (desktop)
     .fsheet    painel de filtros (mobile)
     .achips    filtros ativos
     .pgrid     grade responsiva de produtos
     .estado    vazio / erro / carregando
   ===================================================================== */

:root{
  --dzh:58px;              /* altura do cabeçalho no celular */
  --dzh-lg:74px;           /* altura do cabeçalho no desktop */
  --dz-r:14px;
  --dz-shadow:0 20px 54px -26px rgba(43,43,45,.5);
  --dz-dur:200ms;
  --dz-tap:44px;           /* alvo mínimo de toque */
}
@media (prefers-reduced-motion:reduce){ :root{ --dz-dur:1ms; } }

/* Nenhum componente novo pode criar rolagem horizontal no celular. */
html,body{max-width:100%;overflow-x:clip;}

/* ─────────────────────────────────────────────────────────────
   1) CABEÇALHO
   ───────────────────────────────────────────────────────────── */
.dzhead{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
  --dzfg:var(--ink);
  color:var(--dzfg);
  transition:background var(--dz-dur) var(--ease),color var(--dz-dur) var(--ease),border-color var(--dz-dur) var(--ease);
}
/* Variante da home: flutua sobre o hero escuro e solidifica ao rolar,
   preservando a assinatura visual atual da Druza. */
.dzhead--over{
  position:fixed;inset:0 0 auto 0;
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;
  --dzfg:#fff;
}
.dzhead--over.is-solid,
.dzhead--over.is-open{
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line);
  --dzfg:var(--ink);
  box-shadow:0 10px 28px rgba(43,43,45,.08);
}

.dzhead__bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:8px;min-height:var(--dzh);
  max-width:var(--wide);margin:0 auto;padding:0 12px;
}

/* marca */
.dzhead__logo{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--dzfg);}
.dzhead__seal{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rose);overflow:hidden;}
.dzhead__seal img{width:72%;height:72%;object-fit:contain;}
.dzhead__word{display:flex;flex-direction:column;line-height:1;min-width:0;}
.dzhead__name{font-family:var(--serif);font-weight:600;font-size:1.18rem;letter-spacing:.08em;color:var(--dzfg);}
.dzhead__sub{margin-top:3px;font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;opacity:.68;white-space:nowrap;}

/* botões utilitários do cabeçalho */
.dzhead__burger,.dzhead__act{
  display:inline-grid;place-items:center;
  width:var(--dz-tap);height:var(--dz-tap);
  padding:0;border:0;border-radius:50%;
  background:none;color:var(--dzfg);cursor:pointer;position:relative;
  transition:background var(--dz-dur) var(--ease);
}
.dzhead__burger:hover,.dzhead__act:hover{background:rgba(169,111,119,.12);}
.dzhead--over:not(.is-solid) .dzhead__burger:hover,
.dzhead--over:not(.is-solid) .dzhead__act:hover{background:rgba(255,255,255,.16);}
.dzhead__actions{display:flex;align-items:center;gap:2px;justify-self:end;}
.dzhead__badge{
  position:absolute;top:4px;right:3px;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--rose);color:#fff;font-size:.6rem;font-weight:500;
  display:none;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.dzhead__badge[data-has]{display:flex;}

/* navegação principal (desktop) */
.dznav{display:none;justify-self:center;}
/* Quebra em duas linhas centradas em vez de estourar a largura quando a
   loja tiver muitas categorias e todos os selos de destaque ativos. */
.dznav__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:0;padding:0;list-style:none;}
.dznav__item{position:static;}
.dznav__link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:8px 15px;
  border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.76rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--dzfg);white-space:nowrap;
  position:relative;
}
.dznav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dz-dur) var(--ease);
}
.dznav__link:hover::after,
.dznav__link[aria-expanded="true"]::after,
.dznav__link[aria-current="page"]::after{transform:scaleX(1);}
.dznav__link--sale{color:var(--rose-strong);}
.dzhead--over:not(.is-solid) .dznav__link--sale{color:#F3C9CD;}
.dznav__caret{width:9px;height:9px;transition:transform var(--dz-dur) var(--ease);}
.dznav__link[aria-expanded="true"] .dznav__caret{transform:rotate(180deg);}

/* Desktop: duas linhas, marca centralizada em cima e navegação
   centralizada embaixo. A marca é o eixo da página — deixá-la à esquerda
   disputando espaço com o menu foi o que tirou o prumo do cabeçalho. */
@media (min-width:1024px){
  /* Altura real das duas linhas (marca + navegação). É o que a barra de
     filtros usa como deslocamento ao ficar fixa. */
  :root{ --dzh-lg:117px; }
  .dzhead__bar{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto;
    min-height:0;
    padding:14px 32px 0;
    gap:0;
  }
  .dzhead__logo{grid-column:2;grid-row:1;justify-self:center;}
  .dzhead__actions{grid-column:3;grid-row:1;justify-self:end;align-self:center;}
  .dznav{display:block;grid-column:1/-1;grid-row:2;justify-self:center;padding:10px 0 6px;}
  .dznav__list{gap:10px;}
  .dznav__link{letter-spacing:.19em;padding:8px 18px;}
  .dznav__link::after{left:18px;right:18px;}
  .dzhead__burger{display:none;}
  .dzhead__seal{width:46px;height:46px;}
  .dzhead__name{font-size:1.62rem;letter-spacing:.12em;}
  .dzhead__sub{font-size:.52rem;letter-spacing:.26em;}
}
/* Entre 1024 e 1279 o menu é mais apertado: reduz o respiro dos itens
   antes de deixar a linha quebrar. */
@media (min-width:1024px) and (max-width:1279px){
  .dznav__link{padding:8px 12px;letter-spacing:.14em;}
  .dznav__link::after{left:12px;right:12px;}
  .dznav__list{gap:2px;}
}
@media (min-width:1280px){ .dzhead__bar{padding:14px 48px 0;} }

/* ─────────────────────────────────────────────────────────────
   2) MEGA MENU (desktop)
   ───────────────────────────────────────────────────────────── */
.dzmega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:var(--dz-shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dz-dur) var(--ease),transform var(--dz-dur) var(--ease),visibility var(--dz-dur);
  color:var(--text);
}
.dzmega.is-open{opacity:1;visibility:visible;transform:none;}
.dzmega__in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px 40px;
  max-width:var(--wide);margin:0 auto;padding:30px 48px 36px;
}
.dzmega__col h3{
  font-family:var(--sans);font-weight:500;font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-strong);
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.dzmega__list{margin:0;padding:0;list-style:none;display:grid;gap:1px;}
.dzmega__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;font-size:.92rem;color:var(--text);
  transition:color var(--dz-dur) var(--ease),padding-left var(--dz-dur) var(--ease);
}
.dzmega__list a:hover{color:var(--rose-strong);padding-left:5px;}
.dzmega__list em{font-style:normal;font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.dzmega__all{
  display:inline-block;margin-top:12px;padding-bottom:3px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rose);
}
/* cartão editorial do mega menu — mantém a peça no centro, como no site */
.dzmega__feature{
  display:block;border-radius:8px;overflow:hidden;background:var(--blush);
  border:1px solid var(--rose-inst);
}
.dzmega__feature img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease);}
.dzmega__feature:hover img{transform:scale(1.05);}
.dzmega__featurecap{display:block;padding:14px 16px 16px;}
.dzmega__featurecap b{display:block;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink);line-height:1.1;}
.dzmega__featurecap span{display:block;margin-top:5px;font-size:.72rem;color:var(--rose-deep);}

/* ─────────────────────────────────────────────────────────────
   3) DRAWER MOBILE (menu lateral com accordions)
   ───────────────────────────────────────────────────────────── */
.dzscrim{
  position:fixed;inset:0;z-index:88;background:rgba(20,16,17,.46);
  opacity:0;visibility:hidden;transition:opacity var(--dz-dur) var(--ease),visibility var(--dz-dur);
}
.dzscrim.is-open{opacity:1;visibility:visible;}

.dzdrawer{
  position:fixed;top:0;bottom:0;left:0;z-index:95;
  width:min(400px,90vw);height:100dvh;max-height:100dvh;
  display:flex;flex-direction:column;
  background:#fff;box-shadow:var(--dz-shadow);
  transform:translateX(-100%);
  transition:transform .3s var(--ease);
  overscroll-behavior:contain;
}
.dzdrawer.is-open{transform:none;}
.dzdrawer__head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px 10px 20px;border-bottom:1px solid var(--line);
  min-height:var(--dzh);
}
.dzdrawer__title{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--ink);}
/* A marca abre o menu, como no site — "Navegar" não dizia nada. */
.dzdrawer__brand{display:flex;align-items:center;gap:10px;min-width:0;}
.dzdrawer__seal{
  flex:none;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;background:var(--rose);overflow:hidden;
}
.dzdrawer__seal img{width:72%;height:72%;object-fit:contain;}
.dzdrawer__word{display:flex;flex-direction:column;line-height:1;min-width:0;}
.dzdrawer__name{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:.08em;color:var(--ink);}
.dzdrawer__sub{margin-top:3px;font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* atalho de busca no topo do menu */
.dzdrawer__search{
  flex:none;
  display:flex;align-items:center;gap:11px;width:calc(100% - 32px);
  margin:14px 16px 4px;padding:0 16px;min-height:48px;
  border:1px solid var(--line);border-radius:999px;background:var(--white-warm);
  font-family:var(--sans);font-size:.92rem;color:var(--muted);text-align:left;cursor:pointer;
}
.dzdrawer__search svg{flex:none;width:18px;height:18px;color:var(--rose-strong);}
.dzdrawer__search:active{background:var(--blush);}

/* ── seções e linhas do menu de celular ─────────────────── */
.dzsec{padding:10px 0 8px;border-top:1px solid var(--line);}
.dzsec:first-of-type{border-top:0;}
.dzsec__title{
  padding:6px 20px 8px;margin:0;
  font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-strong);
}
.dzsec__list{margin:0;padding:0;list-style:none;}

/* Uma categoria = um toque. 56px de alvo, ícone à esquerda, contagem e
   seta à direita. */
.dzitem{
  display:flex;align-items:center;gap:14px;
  min-height:56px;padding:8px 20px;
  color:var(--ink);
  transition:background var(--dz-dur) var(--ease);
}
.dzitem__ico{flex:none;width:22px;height:22px;color:var(--rose-strong);}
.dzitem__label{
  flex:1;min-width:0;
  font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.15;
}
.dzitem__n{
  flex:none;min-width:22px;padding:2px 7px;border-radius:999px;
  background:var(--blush);color:var(--rose-deep);
  font-family:var(--sans);font-size:.68rem;text-align:center;
  font-variant-numeric:tabular-nums;
}
.dzitem__go{flex:none;width:14px;height:14px;color:var(--silver);}
.dzitem:hover,.dzitem:active{background:var(--white-warm);}
.dzitem.is-current{background:var(--blush);}
.dzitem.is-current .dzitem__label{color:var(--rose-deep);}
.dzitem.is-current .dzitem__n{background:#fff;}

/* "Ajuda" continua em accordion — é o único bloco secundário. */
.dzsec--acc{padding:0;}
.dzsec--acc .dzacc{border-bottom:0;}
.dzsec--acc .dzacc__btn{
  font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-strong);min-height:52px;padding:12px 20px;
}
.dzsec--acc .dzacc__panel{padding:0 0 8px;}
.dzsec--acc .dzitem__label{font-family:var(--sans);font-weight:400;font-size:.95rem;}
.dzsec--acc .dzitem{min-height:48px;}
.dzdrawer__close{
  display:grid;place-items:center;width:var(--dz-tap);height:var(--dz-tap);
  border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;
}
.dzdrawer__close:hover{background:var(--blush);}
.dzdrawer__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 12px;overscroll-behavior:contain;}
/* Rodapé enxuto: duas ações reais em vez de seis links de ajuda que
   ocupavam um terço da tela. */
.dzdrawer__foot{
  flex:none;border-top:1px solid var(--line);background:var(--white-warm);
  padding:12px 16px max(12px,calc(10px + env(safe-area-inset-bottom)));
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.dzdrawer__foot a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:10px 12px;border-radius:999px;
  font-family:var(--sans);font-size:.8rem;color:var(--ink);
  border:1px solid var(--line);background:#fff;
}
.dzdrawer__foot a svg{flex:none;width:17px;height:17px;color:var(--rose-strong);}
.dzdrawer__foot a:active{background:var(--blush);}
.dzdrawer__foot a.is-primary{background:var(--ink);border-color:var(--ink);color:#fff;}
.dzdrawer__foot a.is-primary svg{color:#fff;}

/* accordion */
.dzacc{border-bottom:1px solid var(--line);}
.dzacc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;padding:12px 20px;
  border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:600;font-size:1.28rem;color:var(--ink);
}
.dzacc__btn:hover{background:var(--white-warm);}
.dzacc__ico{flex:none;width:18px;height:18px;color:var(--rose-strong);transition:transform var(--dz-dur) var(--ease);}
.dzacc__btn[aria-expanded="true"] .dzacc__ico{transform:rotate(180deg);}
.dzacc__panel{display:none;padding:0 20px 14px;}
.dzacc__panel.is-open{display:block;}
.dzacc__group + .dzacc__group{margin-top:14px;}
.dzacc__grouptitle{
  display:block;padding:6px 0;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-strong);
}
.dzacc__links{margin:0;padding:0;list-style:none;}
.dzacc__links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--dz-tap);padding:6px 0;
  font-size:.95rem;color:var(--text);border-bottom:1px solid var(--line);
}
.dzacc__links li:last-child a{border-bottom:0;}
.dzacc__links a:active{color:var(--rose-strong);}
.dzacc__links em{font-style:normal;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;}

/* item simples (sem accordion) dentro do drawer */
.dzdrawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;padding:12px 20px;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:1.28rem;color:var(--ink);
}
.dzdrawer__link:hover{background:var(--white-warm);}
.dzdrawer__link span{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-strong);}
.dzdrawer__link--sale{color:var(--rose-strong);}

/* ─────────────────────────────────────────────────────────────
   4) BUSCA
   ───────────────────────────────────────────────────────────── */
.dzsearch{
  position:fixed;inset:0 0 auto 0;z-index:96;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--dz-shadow);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .28s var(--ease),visibility .28s;
  max-height:100dvh;display:flex;flex-direction:column;
}
.dzsearch.is-open{transform:none;visibility:visible;}
.dzsearch__bar{
  flex:none;display:flex;align-items:center;gap:8px;
  max-width:var(--wide);width:100%;margin:0 auto;padding:10px 12px;
}
.dzsearch__field{
  flex:1;display:flex;align-items:center;gap:10px;min-width:0;
  padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white-warm);
}
.dzsearch__field svg{flex:none;color:var(--muted);}
.dzsearch__field input{
  flex:1;min-width:0;height:46px;border:0;background:none;outline:none;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
}
.dzsearch__field input::placeholder{color:var(--muted);}
.dzsearch__clear{
  display:none;place-items:center;width:32px;height:32px;margin-right:-6px;
  border:0;border-radius:50%;background:var(--line);color:var(--ink);cursor:pointer;font-size:.9rem;
}
.dzsearch__clear.is-on{display:grid;}
.dzsearch__cancel{
  flex:none;min-height:var(--dz-tap);padding:0 12px;border:0;background:none;
  font-family:var(--sans);font-size:.82rem;color:var(--rose-strong);cursor:pointer;
}
.dzsearch__body{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  max-width:var(--wide);width:100%;margin:0 auto;padding:0 12px 20px;
}
.dzsearch__sec{margin-top:14px;}
.dzsearch__sec h3{
  font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-strong);padding:6px 4px;
}
.dzsearch__list{margin:0;padding:0;list-style:none;}
.dzsearch__list a{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:8px 4px;border-bottom:1px solid var(--line);color:var(--text);
}
.dzsearch__list a:hover,.dzsearch__list a:focus-visible{background:var(--white-warm);}
.dzsearch__thumb{
  flex:none;width:44px;height:52px;border-radius:4px;object-fit:cover;background:var(--blush);
}
.dzsearch__meta{flex:1;min-width:0;}
.dzsearch__meta b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);line-height:1.2;}
.dzsearch__meta span{display:block;margin-top:2px;font-size:.74rem;color:var(--muted);}
.dzsearch__price{flex:none;font-size:.84rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.dzsearch__term{
  display:flex;align-items:center;gap:10px;min-height:var(--dz-tap);
  padding:6px 4px;font-size:.95rem;color:var(--text);border-bottom:1px solid var(--line);
}
.dzsearch__term mark{background:transparent;color:var(--ink);font-weight:500;}
.dzsearch__empty{padding:28px 6px;text-align:center;color:var(--muted);font-size:.9rem;}
@media (min-width:1024px){
  .dzsearch__bar{padding:14px 32px;}
  .dzsearch__body{padding:0 32px 28px;}
  .dzsearch__field input{height:52px;}
}

/* ─────────────────────────────────────────────────────────────
   5) CABEÇALHO DE CATEGORIA (PLP)
   ───────────────────────────────────────────────────────────── */
.plp{max-width:var(--wide);margin:0 auto;padding:0 16px;}
@media (min-width:1024px){ .plp{padding:0 32px;} }
@media (min-width:1280px){ .plp{padding:0 48px;} }

.plp__crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:14px 0 0;margin:0;list-style:none;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.plp__crumb li{display:flex;align-items:center;gap:6px;}
.plp__crumb li+li::before{content:"/";opacity:.45;}
.plp__crumb a{color:var(--muted);}
.plp__crumb a:hover{color:var(--rose-strong);}
.plp__crumb [aria-current="page"]{color:var(--text);}

.plp__head{padding:18px 0 4px;}
.plp__head h1{
  font-size:clamp(2rem,7vw,3.3rem);letter-spacing:-.012em;line-height:1.04;
  max-width:18ch;
}
.plp__lede{margin-top:10px;color:var(--muted);max-width:56ch;line-height:1.6;font-size:.95rem;}
.plp__count{
  display:block;margin-top:12px;
  font-size:.74rem;letter-spacing:.1em;color:var(--rose-strong);
  font-variant-numeric:tabular-nums;
}

/* atalhos de subcategoria / tipo — rolagem horizontal contida */
.plp__quick{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:18px -16px 0;padding:2px 16px 6px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.plp__quick::-webkit-scrollbar{display:none;}
.plp__quick a{
  flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.8rem;color:var(--text);white-space:nowrap;
  transition:border-color var(--dz-dur) var(--ease),background var(--dz-dur) var(--ease),color var(--dz-dur) var(--ease);
}
.plp__quick a:hover{border-color:var(--rose);}
.plp__quick a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff;}
@media (min-width:1024px){ .plp__quick{margin-left:0;margin-right:0;padding-left:0;padding-right:0;flex-wrap:wrap;} }

/* ─────────────────────────────────────────────────────────────
   6) FILTROS — barra de desktop
   ───────────────────────────────────────────────────────────── */
.fbar{
  display:none;
  /* -1px fecha o fio de página que aparecia entre a borda do cabeçalho
     e o topo da barra fixa. */
  position:sticky;top:calc(var(--dzh-lg) - 1px);z-index:40;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  margin-top:22px;padding:12px 0;
  background:var(--white-warm);border-bottom:1px solid var(--line);
}
@media (min-width:1024px){ .fbar{display:grid;} }
/* Os filtros ficam centrados na página e a ordenação encostada à direita:
   o olho lê a linha inteira sem precisar varrer da esquerda. */
.fbar__group{
  grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
}
.fbar__drop{position:relative;}
.fbar__btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-family:var(--sans);font-size:.8rem;color:var(--text);cursor:pointer;
  transition:border-color var(--dz-dur) var(--ease),color var(--dz-dur) var(--ease);
}
.fbar__btn:hover{border-color:var(--rose);}
.fbar__btn[aria-expanded="true"]{border-color:var(--ink);color:var(--ink);}
.fbar__btn.has-value{border-color:var(--ink);background:var(--ink);color:#fff;}
.fbar__btn svg{width:10px;height:10px;transition:transform var(--dz-dur) var(--ease);}
.fbar__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.fbar__n{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--rose);color:#fff;font-size:.62rem;
}
.fbar__panel{
  position:absolute;left:0;top:calc(100% + 8px);z-index:5;
  width:max(240px,100%);max-height:60vh;overflow-y:auto;
  padding:14px;border:1px solid var(--line);border-radius:10px;
  background:#fff;box-shadow:var(--dz-shadow);
  display:none;
}
.fbar__panel.is-open{display:block;}
.fbar__sort{
  grid-column:3;justify-self:end;
  min-height:42px;padding:9px 34px 9px 16px;border:1px solid var(--line);border-radius:999px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234A4547' stroke-width='1.5'><path d='m2 4 4 4 4-4'/></svg>") no-repeat right 14px center;
  font-family:var(--sans);font-size:.8rem;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;
}

/* opções (usadas na barra e no painel mobile) */
.fopt{display:grid;gap:1px;}
.fopt label{
  display:flex;align-items:center;gap:11px;
  min-height:var(--dz-tap);padding:6px 4px;
  font-size:.9rem;color:var(--text);cursor:pointer;border-radius:6px;
}
.fopt label:hover{background:var(--white-warm);}
.fopt input{
  flex:none;width:19px;height:19px;margin:0;accent-color:var(--rose-deep);cursor:pointer;
}
.fopt span{flex:1;min-width:0;}
.fopt em{font-style:normal;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.fopt input:disabled + span{color:var(--muted);opacity:.55;}

/* faixa de preço */
.fprice{display:grid;gap:12px;}
.fprice__row{display:flex;align-items:center;gap:10px;}
.fprice__row label{flex:1;display:grid;gap:5px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.fprice__row input{
  width:100%;min-height:42px;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--sans);font-size:.9rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   7) FILTROS — barra compacta e painel de celular
   ───────────────────────────────────────────────────────────── */
.fmob{
  position:sticky;top:calc(var(--dzh) - 1px);z-index:42;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:18px -16px 0;padding:10px 16px;
  background:rgba(253,248,248,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:1024px){ .fmob{display:none;} }
.fmob__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 14px;
  border:1px solid var(--ink);border-radius:999px;background:#fff;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;
}
.fmob__btn:active{transform:scale(.985);}
.fmob__n{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--rose-deep);color:#fff;font-size:.64rem;
}

/* bottom sheet */
.fsheet{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;flex-direction:column;
  height:min(88dvh,760px);
  background:#fff;border-radius:18px 18px 0 0;box-shadow:var(--dz-shadow);
  transform:translateY(100%);visibility:hidden;
  transition:transform .3s var(--ease),visibility .3s;
  overscroll-behavior:contain;
}
.fsheet.is-open{transform:none;visibility:visible;}
.fsheet__grip{flex:none;display:grid;place-items:center;padding:8px 0 2px;}
.fsheet__grip span{display:block;width:42px;height:4px;border-radius:999px;background:var(--line);}
.fsheet__head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 8px 12px 20px;border-bottom:1px solid var(--line);
}
.fsheet__head h2{font-family:var(--display);font-weight:600;font-size:1.4rem;}
.fsheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 8px;}
.fsheet__foot{
  flex:none;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:12px 16px max(12px,calc(10px + env(safe-area-inset-bottom)));
  border-top:1px solid var(--line);background:#fff;
}
.fsheet__clear{
  min-height:50px;padding:0 18px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text);cursor:pointer;
}
.fsheet__apply{min-height:50px;}
/* accordions reaproveitam .dzacc dentro do sheet */
.fsheet .dzacc__btn{font-family:var(--sans);font-size:.95rem;font-weight:400;letter-spacing:.02em;min-height:56px;}
.fsheet .dzacc__btn b{font-weight:500;color:var(--ink);}
.fsheet .dzacc__count{font-size:.72rem;color:var(--rose-strong);margin-left:8px;}

/* painel de ordenação no celular */
.fsheet--sort{height:auto;max-height:80dvh;}
.fsheet--sort .fsheet__body{padding:6px 8px 10px;}
.fsort{display:grid;gap:2px;padding:0 12px 8px;}
.fsort label{
  display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 8px;
  border-radius:10px;font-size:1rem;color:var(--text);cursor:pointer;
}
.fsort label:hover{background:var(--white-warm);}
.fsort input{width:20px;height:20px;accent-color:var(--rose-deep);}

/* ─────────────────────────────────────────────────────────────
   8) FILTROS ATIVOS
   ───────────────────────────────────────────────────────────── */
.achips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;}
.achips:empty{display:none;}
.achips__label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.achips__chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:6px 8px 6px 14px;
  border:1px solid var(--rose);border-radius:999px;background:var(--blush);
  font-family:var(--sans);font-size:.76rem;color:var(--rose-deep);cursor:pointer;
  transition:background var(--dz-dur) var(--ease);
}
.achips__chip:hover{background:var(--rose-inst);}
.achips__chip b{font-weight:500;}
.achips__x{
  display:grid;place-items:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:rgba(169,111,119,.18);font-size:.8rem;line-height:1;
}
.achips__clear{
  min-height:36px;padding:6px 4px;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.76rem;color:var(--rose-strong);
  border-bottom:1px solid var(--rose);border-radius:0;
}

/* ─────────────────────────────────────────────────────────────
   9) GRADE DE PRODUTOS
   ───────────────────────────────────────────────────────────── */
.pgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 12px;
  margin-top:22px;
  list-style:none;padding:0;
}
@media (min-width:560px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;} }
@media (min-width:900px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;} }
@media (min-width:1200px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (min-width:1680px){ .pgrid{grid-template-columns:repeat(5,minmax(0,1fr));} }
/* 320–360px continua com duas peças por linha (menos rolagem para achar a
   sua), só com respiro menor. Uma coluna só abaixo disso, onde o cartão
   ficaria estreito demais para o nome caber. */
@media (max-width:359px){
  .plp{padding-left:12px;padding-right:12px;}
  .pgrid{gap:12px 10px;}
  .pgrid .pcard h3{font-size:.98rem;}
  .plp__quick{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;}
  .fmob{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;}
}
@media (max-width:299px){ .pgrid{grid-template-columns:1fr;} }

.pgrid .pcard{margin:0;}
.pgrid .pcard h3{font-size:1.05rem;margin-top:11px;line-height:1.2;}
.pgrid .pcard__price{font-size:.92rem;margin-top:5px;}
.pgrid .pcard__inst{font-size:.7rem;}
@media (min-width:900px){
  .pgrid .pcard h3{font-size:1.24rem;margin-top:15px;}
  .pgrid .pcard__price{font-size:1rem;}
  .pgrid .pcard__inst{font-size:.76rem;}
}
/* A imagem continua sendo o elemento principal: reserva de espaço fixa
   (aspect-ratio + width/height) evita layout shift durante o lazy load. */
.pgrid .card-media,.pgrid .ph{aspect-ratio:4/5;}
.pgrid .pcard__tag{top:9px;left:9px;font-size:.52rem;padding:4px 9px;}
.pcard__tags{position:absolute;top:9px;left:9px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.pcard__tags .pcard__tag{position:static;}
.pcard__tag--sale{background:var(--rose-strong);}
.pcard__tag--new{background:var(--emerald);}
.pcard__tag--out{background:rgba(255,255,255,.9);color:var(--muted);}
.pcard__sold{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:rgba(253,248,248,.55);pointer-events:none;
}

/* botão carregar mais */
.pmore{display:flex;justify-content:center;margin-top:36px;}
.pmore .btn{min-width:min(320px,100%);}

/* ─────────────────────────────────────────────────────────────
   10) ESTADOS (carregando, vazio, erro)
   ───────────────────────────────────────────────────────────── */
.skel{display:block;border-radius:4px;background:var(--blush);position:relative;overflow:hidden;}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);animation:dz-shimmer 1.3s infinite;
}
@keyframes dz-shimmer{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){ .skel::after{animation:none;} }
.skel--media{aspect-ratio:4/5;}
.skel--line{height:12px;margin-top:12px;}
.skel--line.is-short{width:52%;}

.estado{
  display:grid;justify-items:center;gap:14px;
  padding:56px 20px;text-align:center;
  border:1px dashed var(--rose-inst);border-radius:12px;background:#fff;
  margin-top:26px;
}
.estado__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--blush);color:var(--rose-strong);}
.estado h2{font-family:var(--display);font-weight:600;font-size:1.7rem;color:var(--ink);}
.estado p{color:var(--muted);max-width:44ch;line-height:1.6;font-size:.95rem;}
.estado__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px;}

/* ─────────────────────────────────────────────────────────────
   11) AJUSTES GLOBAIS DE APOIO
   ───────────────────────────────────────────────────────────── */
/* trava de rolagem do fundo quando drawer/sheet/busca estão abertos */
body.dz-lock{overflow:hidden;}
/* o corpo não precisa mais compensar o header antigo fixo */
body.has-pinned{padding-top:0;}

/* volta para a listagem (ficha do produto) */
.plp__back{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--dz-tap);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-strong);
}
.plp__back:hover{color:var(--rose-deep);}

/* faixa de destaque reaproveitável (novidades, mais vendidos) */
.shelf{max-width:var(--wide);margin:0 auto;padding:0 16px;}
@media (min-width:1024px){ .shelf{padding:0 32px;} }
@media (min-width:1280px){ .shelf{padding:0 48px;} }
.shelf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.shelf__link{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--rose);padding-bottom:4px;white-space:nowrap;
}