/* Mermaids of Earth — Shop grid (page-shop.php)
   Save as: child-theme/css/shop-grid.css  — or append to shop.css.
   Uses tokens from mermaids.css. */

.shop-wrap{max-width:1200px;margin:0 auto;padding:3rem 2rem 5rem}
.shop-empty{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;opacity:.7;text-align:center;padding:3rem 0}

.shop-section{margin-bottom:3.5rem}
.shop-section-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.9rem;color:var(--cream);margin:0 0 1.5rem;padding-bottom:.6rem;border-bottom:1px solid rgba(201,148,26,.25);position:relative}
.shop-section-title::after{content:'';position:absolute;left:0;bottom:-1px;width:60px;height:1px;background:var(--gold)}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}

.shop-card{background:var(--ocean);border:1px solid rgba(201,148,26,.16);border-radius:3px;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.shop-card:hover{transform:translateY(-4px);border-color:rgba(201,148,26,.45)}
.shop-card-link{display:block;color:inherit;text-decoration:none}
.shop-card-img{aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--ocean-2,#0c2738);position:relative}
.shop-card-badge{position:absolute;top:12px;left:12px;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(7,14,20,.78);border:1px solid rgba(201,148,26,.4);color:var(--gold-lt);padding:.35rem .6rem;border-radius:2px}
.shop-card.is-soldout .shop-card-img{opacity:.6}

.shop-card-body{padding:1.2rem 1.3rem 1.5rem;text-align:center}
.shop-card-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.3rem;line-height:1.2;color:var(--cream);margin:0 0 .6rem;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.shop-card-price{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--gold-lt);margin-bottom:1rem}
.shop-card-more{display:inline-block;font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:2px;padding:.6rem 1.2rem;transition:.2s}
.shop-card:hover .shop-card-more{background:var(--gold);color:var(--deep)}

@media(max-width:900px){
  .shop-grid{grid-template-columns:1fr 1fr;gap:1rem}
}
@media(max-width:560px){
  .shop-grid{grid-template-columns:1fr}
}