/* =============================================================
   ORYX — Product catalogue (standalone page)
   Extends style2.css. This page has no hero to scroll past, so the
   header sits permanently in its solid state instead of the
   transparent-until-scrolled treatment the homepage uses.
   ============================================================= */

#top{
  background:rgba(244,242,240,.9);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line-2);
}

/* ---------- hero / intro ---------- */
.pcat{ padding:clamp(8rem,15vh,11.5rem) 0 clamp(4rem,8vh,6rem); }
.pcat__head{ max-width:60ch; }
.pcat__note{ margin:1.1rem 0 0; color:var(--mute); max-width:58ch; }

/* ---------- product grid ---------- */
.pgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,1.8rem); margin-top:clamp(2.4rem,4.5vw,3.5rem);
}
@media (max-width:980px){ .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .pgrid{ grid-template-columns:1fr; } }

.pcard{
  position:relative; display:flex; flex-direction:column;
  border-radius:4px; overflow:hidden; border:1px solid var(--line-2);
  background:var(--paper-3);
  box-shadow:0 1px 2px rgba(22,24,28,.03);
  transition:transform .5s var(--e), box-shadow .5s var(--e), border-color .5s var(--e);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -34px rgba(22,24,28,.35); border-color:var(--line); }
.pcard.is-hidden{ display:none; }

.pcard__img{ position:relative; aspect-ratio:6/6.4; overflow:hidden; background:var(--paper-2); }
.pcard__img img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;
  transition:transform .7s var(--e);
}
.pcard:hover .pcard__img img{ transform:scale(1.045); }

.pcard__info{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.2rem; border-top:1px solid var(--line-2); margin-top:auto;
}
.pcard__meta{ min-width:0; }
.pcard__tag{
  margin:0 0 .3rem; font-family:var(--f-b); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mar);
}
.pcard__name{
  font-family:var(--f-d); font-weight:500; font-size:.98rem; line-height:1.28;
  letter-spacing:-.01em; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.pcard__cta{
  flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem;
  border-radius:50%; background:var(--mar); color:#fff; overflow:hidden; position:relative; isolation:isolate;
  transition:transform .4s var(--e);
}
.pcard__cta svg{
  position:relative; z-index:2; width:1.15em; height:1.15em; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--e);
}
.pcard__cta::before{
  content:''; position:absolute; inset:0; z-index:1; background:var(--ink);
  transform:translateY(101%); transition:transform .5s var(--e);
}
.pcard__cta:hover{ transform:scale(1.08); }
.pcard__cta:hover::before{ transform:translateY(0); }
.pcard__cta:hover svg{ transform:translateX(3px); }