/* =============================================================
   MECÂNICA OSMAR — Catálogo de autopeças (pecas.html apenas)
   Usa os tokens definidos em css/style.css (--navy-900, --panel,
   --blue-400, --f-display, --f-mono, etc.). Todas as classes têm
   o prefixo "pc-" para não colidir com nenhuma outra página.
   ============================================================= */

/* ---------- topo do catálogo / filtros ---------- */
.pc-filtros{
  margin-top:34px;
  display:grid;
  gap:16px;
  padding:22px;
  background:rgba(9,13,22,.72);
  border:1px solid rgba(95,160,255,.22);
  border-radius:16px;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85);
}
.pc-filtros__busca{
  display:flex;align-items:center;gap:10px;
  background:#0B111C;border:1px solid #232F46;border-radius:10px;
  padding:13px 16px;
}
.pc-filtros__busca svg{width:18px;height:18px;color:var(--chrome-500);flex-shrink:0;}
.pc-filtros__busca input{
  background:transparent;border:0;outline:0;color:var(--white);width:100%;font-size:.95rem;
}
.pc-filtros__busca input::placeholder{color:var(--chrome-500);}
.pc-filtros__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.pc-filtros__grid select{
  width:100%;
  background:#0B111C;color:var(--chrome-100);border:1px solid #232F46;border-radius:10px;
  padding:12px 14px;font-size:.86rem;
}
.pc-filtros__actions{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
}
.pc-filtros__actions .btn{min-width:190px;justify-content:center;}

/* ---------- cards de categoria ---------- */
.pc-grupos-head{max-width:640px;margin-bottom:30px;}
.pc-grupos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.pc-cat-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #212C40;
  min-height:260px;
  display:flex;
  align-items:flex-end;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pc-cat-card:hover{border-color:#33507A;transform:translateY(-3px);box-shadow:0 22px 50px -28px rgba(46,124,255,.5);}
.pc-cat-card__media{position:absolute;inset:0;}
.pc-cat-card__media picture,.pc-cat-card__media img{width:100%;height:100%;display:block;}
.pc-cat-card__media img{object-fit:cover;object-position:center;}
.pc-cat-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,13,22,.08) 0%, rgba(9,13,22,.62) 55%, rgba(9,13,22,.96) 100%);
}
.pc-cat-card__body{position:relative;z-index:1;width:100%;padding:22px;display:flex;flex-direction:column;gap:12px;}
.pc-cat-card__body h3{font-size:1.08rem;line-height:1.2;color:var(--white);}
.pc-cat-card__pills{display:flex;flex-wrap:wrap;gap:8px;}
.pc-pill{
  font-family:var(--f-display);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  padding:7px 13px;border-radius:20px;
  background:rgba(9,13,22,.55);border:1px solid rgba(95,160,255,.35);color:var(--chrome-100);
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.pc-pill:hover{border-color:var(--blue-400);color:var(--blue-400);background:rgba(9,13,22,.8);}
.pc-cat-card--geral p{color:var(--chrome-300);font-size:.88rem;}
.pc-cat-card__cta{align-self:flex-start;padding:10px 18px;font-size:.78rem;}

/* ---------- toolbar de resultado ---------- */
.pc-resultado-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-bottom:22px;
}
.pc-contador{
  font-family:var(--f-mono);font-size:.8rem;color:var(--chrome-500);
}

/* ---------- cards de produto ---------- */
.pc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.pc-card{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid #212C40;
  border-radius:16px;
  overflow:hidden;
  height:100%;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pc-card:hover{border-color:#33507A;transform:translateY(-3px);box-shadow:0 22px 50px -30px rgba(46,124,255,.45);}
.pc-card__media{position:relative;aspect-ratio:4/3;background:#0B111C;flex-shrink:0;}
.pc-card__media picture,.pc-card__media img{width:100%;height:100%;display:block;}
.pc-card__media img{object-fit:cover;object-position:center;}
.pc-tag{
  position:absolute;z-index:1;
  font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 10px;border-radius:20px;
}
.pc-tag--cat{top:12px;left:12px;color:var(--blue-400);background:#0B111Ccc;border:1px solid #5FA0FF4d;}
.pc-tag--ilustrativa{bottom:12px;right:12px;color:var(--chrome-300);background:#0B111Cd9;border:1px solid #3A4557;}
.pc-card__body{
  display:flex;flex-direction:column;gap:8px;
  padding:20px;flex:1;
}
.pc-card__nome{font-size:1.02rem;line-height:1.25;min-height:2.5em;}
.pc-card__meta{font-size:.82rem;color:var(--chrome-300);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pc-card__meta b{color:var(--white);}
.pc-card__meta .mono{font-size:.76rem;color:var(--chrome-500);}
.pc-card__aplicacao{font-size:.84rem;color:var(--chrome-300);min-height:2.6em;}
.pc-card__specs{
  display:flex;gap:10px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.72rem;color:var(--chrome-500);
}
.pc-card__specs span{padding:4px 9px;border:1px solid #232F46;border-radius:6px;}
.pc-selo{
  align-self:flex-start;
  font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 11px;border-radius:20px;border:1px solid transparent;
}
.pc-selo--estoque{color:var(--ok);background:#33B36B1f;border-color:#33B36B4d;}
.pc-selo--consulta{color:var(--low);background:#E6A5221f;border-color:#E6A5224d;}
.pc-card__actions{
  margin-top:auto;padding-top:8px;
  display:flex;flex-direction:column;gap:10px;
}
.pc-card__actions .btn{width:100%;font-size:.78rem;padding:12px 16px;}
.pc-carregar-mais{display:flex;justify-content:center;margin-top:32px;}
.pc-carregar-mais .btn{min-width:260px;justify-content:center;}
.pc-vazio{
  grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--chrome-500);
  font-family:var(--f-mono);font-size:.9rem;line-height:1.7;
}

/* ---------- modal de detalhes ---------- */
.pc-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(4,7,13,.82);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.pc-modal.is-open{opacity:1;pointer-events:auto;}
body.pc-modal-open{overflow:hidden;}
.pc-modal__panel{
  position:relative;
  width:min(920px,100%);
  max-height:88vh;overflow-y:auto;
  background:linear-gradient(160deg,#141c2a,#0d131d);
  border:1px solid rgba(95,160,255,.28);
  border-radius:20px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  transform:translateY(14px);
  transition:transform .2s ease;
}
.pc-modal.is-open .pc-modal__panel{transform:translateY(0);}
.pc-modal__close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:#0B111Cd9;border:1px solid #2A3750;color:var(--chrome-100);
  font-size:1.1rem;line-height:1;
}
.pc-modal__close:hover{border-color:var(--blue-400);color:var(--blue-400);}
.pc-modal__content{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.pc-modal__media{position:relative;aspect-ratio:4/3;background:#0B111C;}
.pc-modal__media picture,.pc-modal__media img{width:100%;height:100%;display:block;}
.pc-modal__media img{object-fit:cover;}
.pc-modal__media .pc-tag--ilustrativa{bottom:14px;right:14px;}
.pc-modal__info{padding:30px;display:flex;flex-direction:column;gap:12px;}
.pc-modal__info h2{font-size:1.5rem;line-height:1.15;}
.pc-modal__marca{font-size:.92rem;color:var(--chrome-300);}
.pc-modal__desc{color:var(--chrome-300);font-size:.92rem;line-height:1.6;}
.pc-modal__specs{display:grid;gap:10px;margin:6px 0;padding:16px 0;border-top:1px dashed #2A3750;border-bottom:1px dashed #2A3750;}
.pc-modal__specs div{display:flex;justify-content:space-between;gap:16px;font-size:.86rem;}
.pc-modal__specs dt{color:var(--chrome-500);}
.pc-modal__specs dd{margin:0;color:var(--chrome-100);text-align:right;}
.pc-modal__obs{font-size:.84rem;color:var(--chrome-300);}
.pc-modal__obs b{color:var(--chrome-100);}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .pc-filtros__grid{grid-template-columns:repeat(2,1fr);}
  .pc-grupos{grid-template-columns:repeat(2,1fr);}
  .pc-grid{grid-template-columns:repeat(2,1fr);}
  .pc-modal__content{grid-template-columns:1fr;}
  .pc-modal__media{aspect-ratio:16/9;}
}
@media (max-width:640px){
  .pc-filtros{padding:18px;}
  .pc-filtros__grid{grid-template-columns:1fr;}
  .pc-filtros__actions{flex-direction:column;}
  .pc-filtros__actions .btn{width:100%;min-width:0;}
  .pc-grupos{grid-template-columns:1fr;}
  .pc-grid{grid-template-columns:1fr;}
  .pc-modal{padding:0;}
  .pc-modal__panel{max-height:100vh;height:100%;border-radius:0;}
}