/* shop.css: the photo-library style list of available pieces */
body.shop{overflow-x:hidden}
.sh{max-width:1400px;margin:0 auto;padding:104px 16px 90px;animation:rise .6s var(--e) both}
.sh h1{margin:0 0 6px;font:italic 500 30px 'Instrument Sans',sans-serif}
.gd{display:block;overflow:hidden}
.jr{display:flex;gap:4px;margin-bottom:4px}
.jt{position:relative;display:block;min-width:0;border:0;padding:0;background:rgba(255,255,255,.55);overflow:hidden;cursor:pointer;color:#fff;border-radius:4px;font:inherit}
.jt .im{position:absolute;inset:0}
.jt .im img,.jt .im svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--e)}
.jt:hover .im img,.jt:hover .im svg,.jt:focus-visible .im img,.jt:focus-visible .im svg{transform:scale(1.05)}
.jt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.jt .tg{position:absolute;top:8px;left:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--bg);border-radius:999px;padding:3px 9px;z-index:1}
.jt .cp{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;text-align:left;background:linear-gradient(transparent,rgba(20,24,48,.75));opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--e)}
.jt:hover .cp,.jt:focus-visible .cp{opacity:1;transform:none}
@media(hover:none){.jt .cp{opacity:1;transform:none}}
.jt .cp b{display:block;font-style:italic;font-weight:500}
.jt .cp s{opacity:.7}
@media(max-width:600px){.sh{padding:84px 8px 90px}}


/* Uniform product grid */
.gd {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jt {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #fff;
}

.jt .im {
  position: absolute;
  inset: 0;
  padding: 10px;
  box-sizing: border-box;
}

.jt .im img,
.jt .im svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: none;
}

.jt:hover .im img,
.jt:hover .im svg,
.jt:focus-visible .im img,
.jt:focus-visible .im svg {
  transform: none;
}

@media (max-width: 900px) {
  .gd {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .gd {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Fill the complete product card */
.jt {
  background: transparent;
}

.jt .im {
  padding: 0;
}

.jt .im img,
.jt .im svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}