/* ═══════════════════════════════════════════════════════════════
   MorphiToys — SHOP / categorie-pagina
   Dient /shop/ én /categorie/{slug}/. Bouwt op het fundament:
   gedeelde .product-kaart/.product-grid, .eyebrow, .kruimels en
   .lege-staat NIET herdefiniëren — alleen pagina-specifiek werk.
   Alles gescoped onder .pg-shop + eigen .shop-/.filter-prefix.
   ═══════════════════════════════════════════════════════════════ */

/* ── Pagina-kop ──────────────────────────────────────────────── */
/* Navy kobalt zonnestraal-koptband (verpakking-stijl), full-bleed + gecentreerd */
.pg-shop .shop-kop {
    position: relative; isolation: isolate; overflow: hidden; text-align: center;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    margin-top: calc(-1 * clamp(48px, 7vw, 92px));
    margin-bottom: clamp(28px, 4.5vw, 48px);
    padding: clamp(42px, 6.5vw, 78px) var(--pad-x) clamp(34px, 5vw, 58px);
    background: radial-gradient(135% 145% at 50% 0%, #3E82E6 0%, #2A6AD6 36%, #1C55BE 72%, #1544A0 100%);
    color: #fff;
}
.pg-shop .shop-kop::before {
    content: ''; position: absolute; inset: -30% -20% auto; height: 175%; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% 7%, rgba(255,255,255,.075) 0deg 5deg, rgba(255,255,255,0) 5deg 11deg);
    -webkit-mask: radial-gradient(72% 72% at 50% 6%, #000 0%, transparent 72%);
            mask: radial-gradient(72% 72% at 50% 6%, #000 0%, transparent 72%);
}
.pg-shop .shop-kop > * { position: relative; max-width: var(--wrap); margin-inline: auto; }
.pg-shop .shop-kop .kruimels { justify-content: center; color: #C8D6F5; }
.pg-shop .shop-kop .kruimels a { color: #E7EEFB; }
.pg-shop .shop-eyebrow { margin-bottom: 16px; background: rgba(255,255,255,.16); color: #fff; }
.pg-shop .shop-eyebrow .icoon { color: var(--sun); }

/* Titel + teller op één regel, teller zakt netjes mee */
.pg-shop .shop-kop-titel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.pg-shop .shop-kop-titel h1 {
    font-size: var(--t-3xl);
    margin: 0;
    color: #fff;
}

/* Productteller — lichte glas-sticker op navy */
.pg-shop .shop-teller {
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-sm);
    color: #fff;
    background: rgba(255, 255, 255, .18);
    padding: 5px 14px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.pg-shop .shop-intro {
    margin-top: 14px;
    color: #E7EEFB;
    font-size: var(--t-lg);
    line-height: 1.55;
    margin-inline: auto;
}

/* ── Filterbalk (pills) ──────────────────────────────────────── */
.pg-shop .filterbalk {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(28px, 4.5vw, 48px);
}

.pg-shop .filter {
    display: inline-flex;
    align-items: center;
    min-height: 44px;            /* tikdoel ≥44px */
    padding: 10px 20px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-sm);
    line-height: 1;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border-sterk);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
    transition: transform .25s var(--veer),
                box-shadow .25s var(--vloei),
                background .2s, color .2s, border-color .2s;
}

/* springerige, tactiele hover */
.pg-shop .filter:hover {
    transform: translateY(-3px);
    border-color: var(--grape);
    color: var(--grape-700);
    box-shadow: var(--sh-md);
}
.pg-shop .filter:active {
    transform: translateY(-1px) scale(.97);
}

/* actief = grape-gevuld (wit op grape = 7:1) */
.pg-shop .filter.actief {
    background: var(--grape);
    border-color: var(--grape);
    color: var(--on-primary);
    box-shadow: var(--sh-grape);
}
.pg-shop .filter.actief:hover {
    background: var(--grape-700);
    color: var(--on-primary);
}

/* ── Lege staat (vriendelijke variant op fundament) ──────────── */
.pg-shop .shop-leeg {
    background:
        radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, transparent 60%),
        var(--canvas-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    padding-inline: clamp(20px, 6vw, 56px);
}
.pg-shop .shop-leeg .lege-icoon {
    background: var(--sun-100);
    color: #8A5A00;
}
.pg-shop .shop-leeg-titel {
    font-size: var(--t-xl);
    margin-bottom: 8px;
}
.pg-shop .shop-leeg p {
    max-width: 42ch;
    margin-inline: auto;
}

/* ── Responsief ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* filterbalk horizontaal scrollbaar i.p.v. wrappen op smal scherm */
    .pg-shop .filterbalk {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(var(--pad-x) * -1);
        padding: 4px var(--pad-x);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .pg-shop .filterbalk::-webkit-scrollbar { display: none; }
    .pg-shop .filter {
        flex: none;
        scroll-snap-align: start;
    }
}