/* column-gap:0 so the black dividers between columns touch; row-gap leaves
   space between the dividers of one row and the next */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); column-gap:0; row-gap:48px; margin-top:50px; }
@media(max-width:860px){ .pgrid{ row-gap:36px; } }
@media(max-width:560px){
  /* two products per row on phones */
  .pgrid{ grid-template-columns:1fr 1fr; row-gap:24px; }
  /* fix the black column dividers for a 2-up grid */
  .pcard:nth-child(3n){ border-right:none; }
  .pcard:nth-child(2n){ border-right:1px solid #000; }
  /* shorter cards: trim padding + flatten the (square) thumbnail */
  .pcard { padding:12px 12px 14px; }
  .pcard .thumb { aspect-ratio:4/3; }
  .pcard .thumb svg { width:52%; height:52%; }
  .pcard .meta { margin-top:10px; padding-top:10px; }
  .pcard .cat  { font-size:8px; letter-spacing:0.12em; }
  .pcard .name { font-size:13px; margin-top:5px; }
  .pcard .year-label { font-size:8px; }
  .pcard .price{ margin-top:6px; font-size:12px; }
  .pcard .tag { font-size:8px; padding:3px 6px; top:8px; left:8px; }
}
/* In-page filter on the All Products page — "Filter +" opens a year-range menu */
.shop-filters { position:relative; display:flex; align-items:center; margin-top:28px; }
.shop-filter-toggle {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); background:none; border:none; padding:6px 0;
}
.shop-filter-plus { font-size:15px; font-weight:300; line-height:1; transition:transform .25s ease; }
.shop-filter-toggle[aria-expanded="true"] .shop-filter-plus { transform:rotate(45deg); }

.shop-filter-menu {
  position:absolute; top:100%; left:0; z-index:40; margin-top:10px; min-width:220px;
  background:var(--cream2); border:1px solid var(--hair); border-radius:4px;
  box-shadow:0 18px 44px rgba(0,0,0,0.14); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events:none;
}
.shop-filter-menu.open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.shop-filter-opt {
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--ink); font-size:13px; padding:10px 12px; border-radius:3px;
}
.shop-filter-opt:hover { background:rgba(0,0,0,0.05); }
.shop-filter-opt.active { background:rgba(0,0,0,0.08); }
.sf-years { font-family:var(--mono); font-size:12.5px; }
.sf-gen { font-size:10px; color:var(--ink-soft); letter-spacing:0.1em; text-transform:uppercase; margin-left:auto; }

/* matches the home "Featured" cards: no fill, black vertical dividers, open top/bottom */
.pcard { cursor:pointer; background:none; border-left:1px solid #000; padding:24px 24px 22px;
  display:flex; flex-direction:column; transition:background .2s; }
.pcard:nth-child(3n) { border-right:1px solid #000; }   /* right edge of each row */
.pcard:hover { background:var(--cream2); }
.pcard .thumb { aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center; background:none; }
.pcard .thumb svg { width:60%; height:60%; }
.pcard .tag  { position:absolute; top:14px; left:14px; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; background:#11110f; color:#fff; padding:4px 8px; }
.pcard .meta { margin-top:18px; padding-top:16px; border-top:1px solid #000; }
.pcard .cat  { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
.pcard .name { font-family:var(--display); font-weight:500; font-size:18px; margin-top:8px; color:var(--ink); }
.pcard .year-label { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.pcard .price{ margin-top:12px; font-size:14px; color:var(--ink); }

/* Dark process steps */
.psteps { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:54px; }
@media(max-width:860px){ .psteps{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .psteps{grid-template-columns:1fr;} }
.pstep { border-top:2px solid var(--text); padding-top:18px; }
.pstep .num { font-family:var(--display); font-weight:300; font-size:13px; }
.pstep h3   { font-family:var(--display); font-weight:500; font-size:18px; margin-top:12px; }
.pstep p    { margin-top:10px; color:var(--muted); font-size:13.5px; line-height:1.7; }

/* Light-zone overrides (pcard colors are baked into the base rules above) */
.light-zone .pcard svg [stroke] { stroke:#11110f; }
.light-zone .pcard svg [fill]:not([fill="none"]) { fill:#11110f; }
.light-zone .pstep { border-color:var(--ink); }
.light-zone .pstep h3 { color:var(--ink); }
.light-zone .pstep p  { color:var(--ink-soft); }
.light-zone .pstep .num { color:var(--ink-soft); }