/* Shop page (page-shop.php). Nav/footer/reset/fonts live in style.css. Cards are static (no
   hover-zoom) per the same "paper journal feel, not a slick e-commerce zoom" preference the
   Journal feed's photos were changed to follow. */

.shop-hero{
  max-width:720px; margin:0 auto;
  padding:56px 40px 30px;
  text-align:center;
}
.shop-hero h1{
  font-family:'Morvila', cursive; font-weight:400;
  font-size:clamp(40px, 6vw, 64px); line-height:1; letter-spacing:0.01em;
  margin-bottom:18px;
  transform:rotate(-1.5deg); display:inline-block;
}
.shop-intro{
  font-size:15px; line-height:1.7; color:var(--muted); text-align:center;
}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:34px;
  max-width:1200px; margin:0 auto;
  padding:10px 40px 100px;
}
.shop-card{
  display:block; color:inherit;
}
.shop-card-photo{
  width:100%; aspect-ratio:1 / 1; overflow:hidden;
  background:#f1efe9;
  box-shadow:0 18px 40px rgba(43,36,28,0.18);
  margin-bottom:14px;
}
.shop-card-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.shop-card-title{
  font-family:'Special Elite', monospace; font-size:15px; line-height:1.4;
  color:var(--ink); margin-bottom:6px;
}
.shop-card-price{
  font-family:'Kalam', cursive; font-size:15px; color:var(--ink-red);
  margin-bottom:6px;
}
.shop-card-cta{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  transition:color .2s ease;
}
.shop-card:hover .shop-card-cta{ color:var(--ink-red); }

.shop-empty{
  max-width:520px; margin:0 auto; padding:20px 40px 120px;
  text-align:center; font-size:15px; line-height:1.7; color:var(--muted);
}
.shop-empty a{ color:var(--ink-red); text-decoration:underline; }

@media (max-width:860px){
  .shop-hero{ padding:36px 24px 20px; }
  .shop-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:22px; padding:10px 24px 80px; }
}