/* ============================================================
   Sklep donacyjny (produkty NFC) — wg Figmy SKLEP (65:1358) + ticket.
   Karty produktów = klikalne kafelki otwierające modal KUP.
   Tokeny: granat #24324A · niebieski 1473C0 · Libre Baskerville + Inter.
   ============================================================ */
:root{
    --sh-ink:#24324a; --sh-blue-a:#4E7FA7; --sh-blue-b:#1473C0;
    --sh-line:#e6eaf0; --sh-gutter:88px;
    --sh-display:'Libre Baskerville',Georgia,serif; --sh-ui:'Inter',system-ui,sans-serif;
}

/* ---------- HERO ---------- */
.shop-hero{
    min-height:200px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(134.55deg, rgba(78,127,167,.22) 13.6%, rgba(20,115,192,.22) 99.4%);
}
.shop-hero h1{
    font-family:var(--sh-display); font-weight:700; font-size:40px; line-height:normal;
    color:var(--sh-ink); margin:0; text-align:center;
}

/* ---------- WRAP / INTRO ---------- */
.shop-wrap{ max-width:1160px; margin:0 auto; padding:42px var(--sh-gutter) 64px; }
.shop-intro{
    font-family:var(--sh-ui); font-size:20px; line-height:33px; color:var(--sh-ink);
    margin:0 0 46px;
}

/* ---------- FLASH ---------- */
.shop-flash{
    background:#e8f4ed; border:1px solid #aed5c1; color:#1f5f44; border-radius:12px;
    padding:12px 18px; margin:0 0 24px; font-family:var(--sh-ui); font-size:15px;
}
.shop-flash--err{ background:#fdeaea; border-color:#e7b4b4; color:#9a2b2b; }

/* ---------- GRID PRODUKTÓW ---------- */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:27px; }
.shop-card{
    display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
    background:#fff; border:1px solid var(--sh-line); border-radius:16px; overflow:hidden;
    box-shadow:0 8px 30px rgba(36,50,74,.06); transition:transform .15s ease, box-shadow .15s ease;
    font:inherit; color:inherit;
}
.shop-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(36,50,74,.13); }
.shop-card:focus-visible{ outline:2px solid var(--sh-blue-b); outline-offset:2px; }
.shop-card__art{ display:block; aspect-ratio:1/1; background:#f6f9fb; }
.shop-card__art img{ width:100%; height:100%; object-fit:cover; display:block; }
/* serduszko (SVG) — wyśrodkowane, nie przycinane */
.shop-card__art--svg{ display:flex; align-items:center; justify-content:center; padding:24px; }
.shop-card__art--svg img{ width:auto; height:auto; max-width:60%; max-height:60%; object-fit:contain; }
.shop-card__body{ display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px; }
.shop-card__name{ font-family:var(--sh-ui); font-weight:600; font-size:17px; color:var(--sh-ink); }
.shop-card__price{ font-family:var(--sh-ui); font-weight:700; font-size:16px; color:var(--sh-blue-b); }

/* ---------- RESPONSYWNE ---------- */
@media (max-width:1100px){ :root{ --sh-gutter:48px; } .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
    :root{ --sh-gutter:22px; }
    .shop-hero{ min-height:150px; }
    .shop-hero h1{ font-size:32px; }
    .shop-intro{ font-size:17px; line-height:28px; }
    .shop-grid{ grid-template-columns:1fr; gap:18px; }
}