/* ═══════════════════════════════════════════════════════════════
   Home › Sectie "Populaire diertjes" (uitgelichte producten)
   Tilt de SECTIE op — warme volle-breedte band, speelse decor-blobs,
   sticker-eyebrow, sociale bewijskracht + centrale CTA.
   De GEDEELDE productkaart (.product-kaart/.product-foto/.prijs) en
   de basis-componenten (.eyebrow/.alles-link/.btn) blijven onaangeroerd.
   Eigen classes zijn geprefixt met .uitgelicht-* tegen botsingen.
   ═══════════════════════════════════════════════════════════════ */

/* — Warme volle-breedte band achter de sectie — */
.uitgelicht-band {
    position: relative;
    isolation: isolate;            /* houdt blob-z-index lokaal */
    /* Full-bleed: breekt uit de pagina-flow naar randloos breed */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-block: clamp(8px, 2vw, 28px);
    overflow: hidden;              /* vangt decor-overloop → geen H-scroll */
    background:
        radial-gradient(95% 70% at 88% 6%, var(--sun-100) 0%, transparent 46%),
        radial-gradient(80% 75% at 6% 96%, var(--grape-100) 0%, transparent 50%),
        var(--canvas-2);
    border-block: 1px solid var(--border);
}

/* De gedeelde .sectie blijft de gecentreerde inhoudskolom (max var(--wrap)).
   Boven decor tillen zodat kaarten/kop altijd klikbaar bovenop liggen. */
.uitgelicht-band > .sectie {
    position: relative;
    z-index: 1;
}

/* — Decoratieve zwevende blobs (gebruikt de gedeelde .blob niet, eigen vorm) — */
.uitgelicht-blob {
    position: absolute;
    z-index: 0;
    border-radius: 46% 54% 60% 40% / 44% 42% 58% 56%;
    filter: blur(6px);
    opacity: .5;
    pointer-events: none;
}
.uitgelicht-blob--1 {
    width: clamp(180px, 26vw, 360px); aspect-ratio: 1;
    top: -7%; right: -5%;
    background: radial-gradient(circle at 35% 30%, var(--coral) 0%, var(--berry) 75%);
    animation: uitgelicht-drijf 13s var(--vloei) infinite alternate;
}
.uitgelicht-blob--2 {
    width: clamp(150px, 22vw, 300px); aspect-ratio: 1;
    bottom: -10%; left: -6%;
    background: radial-gradient(circle at 40% 35%, var(--teal) 0%, var(--grape) 80%);
    opacity: .35;
    animation: uitgelicht-drijf 16s var(--vloei) infinite alternate-reverse;
}

/* — Sparkle/ster-accenten (speels, met mate) — */
.uitgelicht-ster {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    color: var(--sun);
    filter: drop-shadow(0 3px 8px rgba(255,194,74,.45));
    animation: uitgelicht-fonkel 4.5s ease-in-out infinite;
}
.uitgelicht-ster--1 { top: 11%; left: 7%; color: var(--coral); }
.uitgelicht-ster--2 { bottom: 16%; right: 9%; animation-delay: 1.6s; }

/* — Sticker-eyebrow wat lucht geven onder de kop-tekst — */
.uitgelicht-band .eyebrow { margin-bottom: 14px; }

/* — Sociale bewijskracht onder de sectie-kop-omschrijving — */
.uitgelicht-bewijs {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1.5px solid var(--border-sterk);
    box-shadow: var(--sh-sm);
    font-family: var(--font-display);
    font-weight: 600;
    /* eigen, kleinere maat → niet de gedeelde .sectie-kop p-grootte */
    font-size: var(--t-sm) !important;
    color: var(--ink) !important;
    line-height: 1;
}
.uitgelicht-bewijs .icoon { color: var(--coral); }

/* — Centrale CTA onderaan de sectie — */
.uitgelicht-cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(34px, 5vw, 56px);
}

/* — Bewegingen — */
@keyframes uitgelicht-drijf {
    from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    to   { transform: translate3d(0, 22px, 0) rotate(8deg) scale(1.06); }
}
@keyframes uitgelicht-fonkel {
    0%, 100% { transform: scale(1) rotate(0deg);   opacity: .55; }
    50%      { transform: scale(1.22) rotate(12deg); opacity: 1; }
}

/* Op kleine schermen de decor-drukte temperen */
@media (max-width: 600px) {
    .uitgelicht-ster--2 { display: none; }
    .uitgelicht-blob { opacity: .32; }
}

/* Respecteer reduced-motion: decor stil + zacht zichtbaar */
@media (prefers-reduced-motion: reduce) {
    .uitgelicht-blob,
    .uitgelicht-ster { animation: none; }
}