/* ============================================================
   PRODUTOS
   ============================================================ */
.prod-layout { display:grid; gap: clamp(1.5rem,4vw,3rem); grid-template-columns: 250px minmax(0,1fr); align-items:start; }
@media (max-width: 860px){ .prod-layout { grid-template-columns: minmax(0,1fr); } }
.prod-filter { position: sticky; top: 100px; min-width:0; }
@media (max-width:860px){ .prod-filter { position: static; } }
.prod-filter h4 { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-400); font-weight:500; margin-bottom: .9rem; }
.filter-list { display:flex; flex-direction:column; gap:2px; }
.filter-btn {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem .9rem; border-radius:10px; color: var(--slate-700);
  font-weight:500; font-size:.95rem; transition: background .25s, color .25s;
  text-align:left; width:100%;
}
.filter-btn:hover { background: var(--slate-100); color: var(--ink); }
.filter-btn.is-active { background: var(--blue-600); color:#fff; }
.filter-btn.is-active .filter-btn__n { color: rgba(255,255,255,.7); }
.filter-btn__n { font-family:var(--font-mono); font-size:.75rem; color: var(--slate-400); }
@media (max-width:860px){
  .filter-list {
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto;
    gap:.5rem; padding-bottom:.3rem; scrollbar-width:none;
  }
  .filter-list::-webkit-scrollbar { display:none; }
  .filter-btn { width:auto; flex:none; white-space:nowrap; border:1px solid var(--line); }
}

/* ---------- Setores (navegação dinâmica) ---------- */
.area-nav .filter-btn { justify-content:flex-start; }
.area-nav__ico { width:20px; height:20px; flex:none; color: var(--slate-400); transition: color .25s; }
.area-nav__ico svg { width:100%; height:100%; }
.filter-btn.is-active .area-nav__ico { color:#fff; }
.filter-btn:hover .area-nav__ico { color: var(--blue-600); }
.filter-btn.is-active:hover .area-nav__ico { color:#fff; }
.setor-panels { position:relative; }
.setor-panel { display:none; }
.setor-panel.is-active { display:block; animation: setorFade .5s var(--ease-out); }
@keyframes setorFade { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.prod-count { font-family:var(--font-mono); font-size:.8rem; color:var(--muted); margin-bottom:1.2rem; }
.prod-group { margin-bottom: clamp(2.5rem,5vw,4rem); }
.prod-group__head { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.prod-group__head h2 { font-size: var(--step-2); }
.prod-group__head .line { flex:1; height:1px; background: var(--line); }
.prod-group__head .cnt { font-family:var(--font-mono); font-size:.8rem; color:var(--slate-400); }
.prod-grid { display:grid; gap:1.1rem; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); }
@media (max-width:640px){ .prod-grid { grid-template-columns: minmax(0,1fr); } }
.prod-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column; min-width:0;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.prod-card__img {
  aspect-ratio: 4/3; background: var(--slate-100); position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.prod-card__img svg { width: 54%; height:54%; max-width:100%; max-height:100%; color: var(--blue-600); opacity:.9; transition: transform .5s var(--ease); }
.prod-card:hover .prod-card__img svg { transform: scale(1.08) rotate(-3deg); }
.prod-card__img img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.prod-card:hover .prod-card__img img { transform: scale(1.06); }
.prod-card__tag { position:absolute; top:.7rem; left:.7rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; background:#fff; color:var(--blue-700); padding:.25rem .55rem; border-radius:6px; box-shadow: var(--shadow-sm); }
.prod-card__body { padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.prod-card__body h3 { font-size: var(--step-1); }
.prod-card__body p { color: var(--muted); font-size: var(--step--1); margin-top:.4rem; flex:1; }
.prod-card__cta { margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; color:var(--blue-700); font-family:var(--font-body); font-weight:600; font-size:.92rem; }
.prod-card__cta svg { width:1em;height:1em; transition: transform .3s; }
.prod-card:hover .prod-card__cta svg { transform: translateX(4px); }
.prod-card { cursor:pointer; }
.prod-card:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; }
.is-hidden { display:none !important; }

/* ---------- Modal de produto (quick view) ---------- */
body.prod-modal-open { overflow:hidden; }
.prod-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1.2rem; }
.prod-modal.is-hidden { display:none; }
.prod-modal__overlay { position:absolute; inset:0; background:rgba(8,21,64,.55); backdrop-filter:blur(3px); animation: prodModalFade .25s var(--ease-out); }
.prod-modal__panel {
  position:relative; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width:640px; width:100%; max-height:88vh; overflow:auto;
  display:grid; grid-template-columns: 1fr; animation: prodModalIn .3s var(--ease-out);
}
@media (min-width:640px){ .prod-modal__panel { grid-template-columns: 1fr 1fr; max-height:80vh; } }
@keyframes prodModalFade { from{ opacity:0; } to{ opacity:1; } }
@keyframes prodModalIn { from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.prod-modal__close {
  position:absolute; top:.7rem; right:.7rem; z-index:2; width:36px; height:36px; border-radius:50%;
  background:#fff; color:var(--slate-700); display:grid; place-items:center; box-shadow: var(--shadow-sm);
  transition: background .2s, color .2s;
}
.prod-modal__close:hover { background: var(--slate-100); color: var(--ink); }
.prod-modal__close svg { width:18px; height:18px; }
.prod-modal__media {
  aspect-ratio:4/3; background: var(--slate-100); display:grid; place-items:center; overflow:hidden;
}
@media (min-width:640px){ .prod-modal__media { aspect-ratio:auto; height:100%; } }
.prod-modal__media img { width:100%; height:100%; object-fit:cover; }
.prod-modal__media svg { width:44%; height:44%; color:var(--blue-600); opacity:.9; }
.prod-modal__body { padding: clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; }
.prod-modal__tag { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-700); background:var(--blue-50); align-self:flex-start; padding:.3rem .6rem; border-radius:6px; margin-bottom:.8rem; }
.prod-modal__body h3 { font-size: var(--step-2); color:var(--ink); }
.prod-modal__body p { color:var(--muted); font-size:var(--step-0); margin-top:.7rem; flex:1; }
.prod-modal__body .btn { --btn-bg:#25D366; --btn-fg:#052E22; border:1px solid #12A150; margin-top:1.4rem; justify-content:center; align-self:flex-start; white-space:nowrap; }
.prod-modal__body .btn:hover { --btn-bg:#1ebc59; }
.prod-modal__body .btn svg { flex:none; }