/* ================================
   PGF Gallery Styles (no popup)
   Accent: #ffce00  Text: #000000
   ================================ */
:root {
  --pgfg-accent: #ffce00;
  --pgfg-text:   #000000;
  --pgfg-bg:     #ffffff;
}

/* Filter chips */
.pgfg-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .5rem; }
.pgfg-chip{
  padding:.4rem .7rem; border:1px solid #e5e7eb; border-radius:.5rem;
  background:var(--pgfg-bg); cursor:pointer; font:inherit; color:var(--pgfg-text);
  transition:background .2s,border-color .2s;
}
.pgfg-chip.is-active{ background:var(--pgfg-accent); color:var(--pgfg-text); border-color:var(--pgfg-accent); }
.pgfg-chip:hover{ background:#ffd633; border-color:#ffd633; }

/* Sub-head */
.pgfg-subhead{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.25rem 0 1rem; }
.pgfg-current-label{ font-weight:600; font-size:1.05rem; color:var(--pgfg-text); }

/* Search */
.pgfg-searchform{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid #e5e7eb; border-radius:999px; padding:.25rem .25rem .25rem .5rem; background:var(--pgfg-bg);
}
.pgfg-searchicon{ opacity:.6; margin-right:.1rem; color:var(--pgfg-text); }
.pgfg-search{ border:0; outline:0; padding:.4rem .5rem; min-width:220px; background:transparent; color:var(--pgfg-text); }
.pgfg-btn{
  border:2px solid var(--pgfg-accent); color:var(--pgfg-text); background:var(--pgfg-accent);
  padding:.35rem .9rem; border-radius:999px; font-weight:600; cursor:pointer; transition:background .2s,border-color .2s;
}
.pgfg-btn:hover{ background:#ffd633; border-color:#ffd633; }

/* Grid & cards */
.pgfg-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; list-style:none; margin:0; padding:0;
}
@media (max-width:1024px){ .pgfg-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .pgfg-list{ grid-template-columns:1fr; } }

.pgfg-card{ position:relative; background:transparent; border:0; border-radius:0; overflow:visible; }

.pgfg-open{ display:block; width:100%; text-align:left; background:transparent; border:0; padding:0; cursor:pointer; text-decoration:none; }

/* Image box ≈ 330x426 + subtle shadow */
.pgfg-thumb{
  position:relative; width:100%; aspect-ratio:330 / 426; background:#d9d9d9;
  border-radius:.5rem; box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.pgfg-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  border-radius:.5rem; transition:filter .2s, transform .2s;
}

/* Hover eye overlay (image dims; card bg never changes) */
.pgfg-hover-eye{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85);
  width:56px; height:56px; border-radius:999px; background:var(--pgfg-accent);
  display:grid; place-items:center; opacity:0; transition:opacity .2s, transform .2s;
}
.pgfg-hover-eye::before{
  content:""; width:22px; height:22px; background-color:var(--pgfg-text);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5Zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 .002 6.002A3 3 0 0 0 12 9z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5Zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 .002 6.002A3 3 0 0 0 12 9z"/></svg>') center/contain no-repeat;
}
.pgfg-card:hover .pgfg-hover-eye{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.pgfg-card:hover .pgfg-thumb img{ filter:brightness(.85); }

/* Meta */
.pgfg-meta{ padding:.75rem .25rem 0; }
.pgfg-title{ font-weight:700; font-size:1.125rem; color:var(--pgfg-text); margin-bottom:.25rem; }
.pgfg-price{ color:var(--pgfg-text); opacity:.9; }

/* Pagination (centered + arrows) */
.pgfg-pagination{ margin:1.25rem 0 0; }
.pgfg-pages{ display:flex; justify-content:center; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pgfg-page{
  padding:.45rem .7rem; border:1px solid #e5e7eb; border-radius:.35rem; background:var(--pgfg-bg);
  cursor:pointer; color:var(--pgfg-text); transition:background .2s, border-color .2s;
}
.pgfg-page.is-arrow{ font-weight:700; }
.pgfg-page.is-active{ background:var(--pgfg-accent); color:var(--pgfg-text); border-color:var(--pgfg-accent); }
.pgfg-page:hover{ background:#ffd633; border-color:#ffd633; }
.pgfg-page.is-disabled{ opacity:.45; cursor:not-allowed; }

/* Empty state */
.pgfg-empty{ opacity:.7; color:var(--pgfg-text); }


/* Controls row on the right of subhead */
.pgfg-controls{
  display:flex;
  align-items:center;
  gap:.75rem;
}

/* Texture select */
.pgfg-select-wrap{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.pgfg-select-label{
  font-size:.9rem;
  color:var(--pgfg-text);
  opacity:.8;
}
.pgfg-select{
  appearance:auto;
  -webkit-appearance:auto;
  border:1px solid #e5e7eb;
  border-radius:.5rem;
  padding:.35rem .6rem;
  background:#fff;
  color:var(--pgfg-text);
  min-width:160px;
}
.pgfg-select:focus{
  outline:2px solid var(--pgfg-accent);
  outline-offset:2px;
}