/* shop-pottery.css : all classes prefixed "mp-" so they don't clash with Bootstrap (.card, .btn, .row etc.) */
.mp-shop{--mp-clay:#2b2b2b;--mp-glaze:#3d8524;--mp-glaze-dark:#2f6b1b;--mp-paper:#f2f6d0;--mp-ochre:#2b2b2b;--mp-line:#d3dc9a;--mp-muted:#5b5f4a;
  --mp-serif:'Fraunces',Georgia,serif;--mp-sans:'Karla',system-ui,sans-serif;
  /* watercolor wash echoing the logo: lime, fresh green, yellow */
  background:
    radial-gradient(60% 45% at 8% 6%,rgba(224,236,90,.55),transparent 70%),
    radial-gradient(55% 50% at 95% 30%,rgba(140,200,80,.35),transparent 70%),
    radial-gradient(60% 45% at 30% 100%,rgba(245,232,90,.45),transparent 70%),
    var(--mp-paper);
  color:var(--mp-clay);font-family:var(--mp-sans);padding:clamp(28px,5vw,64px) 0}
.mp-shop *,.mp-shop *::before,.mp-shop *::after{box-sizing:border-box}
.mp-head{margin-bottom:28px}
.mp-head h1{font-family:var(--mp-serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.8rem);margin:0;color:var(--mp-clay)}
.mp-head p{color:var(--mp-muted);margin:6px 0 0}
.mp-grid{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.mp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mp-line);border-radius:6px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.mp-card:hover,.mp-card:focus-within{transform:translateY(-3px);box-shadow:0 10px 24px rgba(43,43,43,.14)}
.mp-media{position:relative;aspect-ratio:4/5;display:grid;place-items:end center;background:var(--bg)}
.mp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-media svg{width:56%;height:auto;margin-bottom:12%}
.mp-tag{position:absolute;top:12px;left:12px;background:var(--mp-clay);color:#fff;font-size:.75rem;padding:3px 9px;border-radius:99px}
.mp-wish{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;font-size:1.1rem;line-height:1;color:var(--mp-clay);padding:0}
.mp-wish[aria-pressed=true]{color:#b3372c}
.mp-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.mp-cat{font-size:.8rem;color:var(--mp-muted)}
.mp-body h3{font-family:var(--mp-serif);font-weight:500;font-size:1.15rem;line-height:1.25;margin:0;color:var(--mp-clay)}
.mp-meta{font-size:.85rem;color:var(--mp-muted)}
.mp-price-row{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:8px}
.mp-price{font-weight:600;font-size:1.15rem}
.mp-old{text-decoration:line-through;color:var(--mp-muted);font-size:.9rem}
.mp-btn{margin-top:10px;width:100%;padding:11px;border:0;border-radius:4px;background:var(--mp-glaze);color:#fff;font:600 .95rem var(--mp-sans);cursor:pointer}
.mp-btn:hover{background:var(--mp-glaze-dark)}
.mp-btn:disabled{background:var(--mp-line);color:var(--mp-muted);cursor:not-allowed}
.mp-shop button:focus-visible{outline:3px solid var(--mp-ochre);outline-offset:2px}
@media(max-width:480px){
  .mp-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .mp-body{padding:10px}.mp-body h3{font-size:1rem}.mp-meta{display:none}
  .mp-btn{padding:10px 4px;font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){.mp-card{transition:none}}