/**
 * Old Design — bewerkbare HTML-hero (optie B).
 *
 * Losse HTML-sectie boven de vending-machine: bewerkbare koppen/USP-teksten +
 * eigen pack-afbeeldingen (Customizer). Arcade-look afgestemd op de machine
 * (gele/paarse neon op donkere ink-achtergrond). Machine eronder ongewijzigd.
 */

html { scroll-behavior: smooth; }
#gp-machine { scroll-margin-top: 80px; }

/* Sectie-manager (Gengar): componenten als flex-kolom zodat inline `order:`
   de volgorde bepaalt. Uitgeschakelde componenten worden niet gerenderd. */
.gp-oldsections { display: flex; flex-direction: column; }
.gp-oldsections > .gp-oldsec { min-width: 0; }

/* ── Sticky mobiele cart-bar (geport van gap-mbar, Old-Design-stijl) ───── */
.gp-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--gp-ink-3, #0e1428), var(--gp-ink, #06080f));
    border-top: 2px solid rgba(255, 203, 5, .35);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
}
.gp-mbar__info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gp-mbar__count {
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gp-text, #fff);
}
.gp-mbar__total {
    font-family: var(--gp-font-numeric, 'Orbitron', monospace);
    font-size: 18px;
    font-weight: 800;
    color: var(--gp-yellow, #ffcb05);
}
.gp-mbar__cta {
    margin-left: auto;
    flex: none;
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gp-ink, #06080f);
    background: linear-gradient(180deg, var(--gp-yellow, #ffcb05), var(--gp-yellow-deep, #f5b800));
    border-radius: var(--gp-radius, 8px);
    padding: 12px 22px;
    box-shadow: 0 4px 0 var(--gp-yellow-dark, #d4a200);
}
.gp-mbar__cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gp-yellow-dark, #d4a200); }

/* Alleen op mobiel/tablet — op desktop stuurt de PAY NOW-hotspot de checkout. */
@media (min-width: 861px) {
    .gp-mbar { display: none !important; }
}

.gp-hero {
    position: relative;
    overflow-x: clip;
    background:
        radial-gradient(120% 90% at 18% 0%, rgba(255, 203, 5, .10) 0%, transparent 55%),
        radial-gradient(120% 90% at 92% 20%, rgba(122, 58, 255, .16) 0%, transparent 55%),
        linear-gradient(180deg, var(--gp-ink-2, #0a0d1a) 0%, var(--gp-ink, #06080f) 100%);
    border-bottom: 2px solid rgba(255, 203, 5, .18);
    overflow: hidden;
}

.gp-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

/* ── Copy ─────────────────────────────────────────────────────────────── */
.gp-hero__copy { min-width: 0; }

.gp-hero__badge {
    display: inline-block;
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: clamp(11px, 1.4vw, 13px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gp-yellow, #ffcb05);
    background: rgba(255, 203, 5, .10);
    border: 1px solid rgba(255, 203, 5, .35);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.gp-hero__title {
    font-family: var(--gp-font-display, 'Bungee', sans-serif);
    line-height: .98;
    margin: 0 0 16px;
    color: var(--gp-text, #fff);
    text-transform: uppercase;
    font-size: clamp(28px, 6vw, 62px);
    overflow-wrap: break-word;
    word-break: break-word;
}
.gp-hero__title-1 { display: block; }
.gp-hero__title-2 {
    display: block;
    color: var(--gp-yellow, #ffcb05);
    text-shadow: 0 0 26px rgba(255, 203, 5, .45);
}

.gp-hero__lead {
    color: var(--gp-text-dim, rgba(255, 255, 255, .70));
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.55;
    max-width: 46ch;
    margin: 0 0 22px;
}

.gp-hero__usps {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.gp-hero__usp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gp-text, #fff);
    font-weight: 600;
    font-size: clamp(13px, 1.5vw, 15px);
}
.gp-hero__usp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gp-yellow, #ffcb05);
    color: var(--gp-ink, #06080f);
    font-weight: 900;
    font-size: 13px;
    flex: none;
}

.gp-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: clamp(17px, 2vw, 21px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gp-ink, #06080f);
    background: linear-gradient(180deg, var(--gp-yellow, #ffcb05), var(--gp-yellow-deep, #f5b800));
    box-shadow: var(--gp-glow-yellow, 0 0 30px rgba(255, 203, 5, .35)), 0 6px 0 var(--gp-yellow-dark, #d4a200);
    border-radius: var(--gp-radius, 8px);
    padding: 14px 30px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.gp-hero__cta:hover { transform: translateY(-2px); }
.gp-hero__cta:active {
    transform: translateY(3px);
    box-shadow: var(--gp-glow-yellow, 0 0 30px rgba(255, 203, 5, .35)), 0 3px 0 var(--gp-yellow-dark, #d4a200);
}

/* Actions-rij: primaire knop + secundaire link */
.gp-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
}
.gp-hero__cta2 {
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: clamp(14px, 1.7vw, 17px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gp-text, #fff);
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 203, 5, .5);
    padding-bottom: 2px;
    transition: color .12s ease, border-color .12s ease;
}
.gp-hero__cta2:hover { color: var(--gp-yellow, #ffcb05); border-color: var(--gp-yellow, #ffcb05); }

/* Review-score-regel */
.gp-hero__score {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--gp-text-dim, rgba(255, 255, 255, .70));
}
.gp-hero__stars { color: var(--gp-yellow, #ffcb05); letter-spacing: 1px; }
.gp-hero__score-num { font-weight: 800; color: var(--gp-text, #fff); }

#gp-how { scroll-margin-top: 80px; }

/* ── Art / packs ──────────────────────────────────────────────────────── */
.gp-hero__art {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 2.5vw, 28px);
    min-width: 0;
}
.gp-hero__pack {
    position: relative;
    margin: 0;
    width: min(46%, 260px);
    text-align: center;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.gp-hero__pack--ess { transform: rotate(-5deg); }
.gp-hero__pack--god { transform: rotate(5deg) translateY(-10px); z-index: 2; }
.gp-hero__pack img,
.gp-hero__pack .gp-hero__ph {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
.gp-hero__pack-lbl {
    margin-top: 10px;
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: clamp(12px, 1.5vw, 15px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gp-yellow, #ffcb05);
}
.gp-hero__pack-lbl--god { color: var(--gp-magic-light, #c084fc); }
.gp-hero__pack-price {
    color: var(--gp-text, #fff);
    font-weight: 800;
}

/* ── Responsive: stack + schalen, niets verbergen ─────────────────────── */
@media (max-width: 820px) {
    .gp-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 26px;
    }
    .gp-hero__lead { margin-left: auto; margin-right: auto; }
    .gp-hero__usps { justify-content: center; }
    .gp-hero__art {
        order: -1;
        max-width: min(380px, 100%);
        margin: 0 auto;
    }
    .gp-hero__pack { width: min(44%, 168px); }
}

@media (max-width: 400px) {
    .gp-hero__usp { font-size: 13px; }
    .gp-hero__usps { gap: 8px 16px; }
    .gp-hero__pack { width: min(44%, 150px); }
}

/* ── "Wat klanten ontvangen hebben" — slider (Gengar/arcade-stijl) ─────── */
.gp-received {
    background:
        radial-gradient(120% 80% at 85% 0%, rgba(122, 58, 255, .12) 0%, transparent 55%),
        linear-gradient(180deg, var(--gp-ink-2, #0a0d1a), var(--gp-ink, #06080f));
    border-top: 2px solid rgba(255, 203, 5, .18);
    padding: clamp(32px, 5vw, 60px) 0;
    overflow: hidden;
}
.gp-received__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.gp-received__head { text-align: center; margin-bottom: clamp(18px, 3vw, 30px); }
.gp-received__kicker {
    font-family: var(--gp-font-heading, 'Bebas Neue', sans-serif);
    font-size: clamp(11px, 1.4vw, 13px);
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gp-yellow, #ffcb05);
}
.gp-received__title {
    font-family: var(--gp-font-display, 'Bungee', sans-serif);
    font-size: clamp(26px, 4.5vw, 46px);
    line-height: 1; text-transform: uppercase;
    color: var(--gp-text, #fff); margin: 6px 0 8px;
}
.gp-received__sub {
    color: var(--gp-text-dim, rgba(255, 255, 255, .7));
    font-size: clamp(14px, 1.6vw, 16px); margin: 0; max-width: 52ch;
    margin-left: auto; margin-right: auto;
}
.gp-received__slider { position: relative; }
.gp-received__track {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 6px 2px 14px;
    scrollbar-width: none;
}
.gp-received__track::-webkit-scrollbar { display: none; }
.gp-received__slide {
    flex: 0 0 auto; margin: 0;
    width: clamp(200px, 26vw, 280px);
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
    border: 2px solid rgba(255, 203, 5, .25);
    border-radius: var(--gp-radius-lg, 14px);
    overflow: hidden;
    background: var(--gp-ink-3, #0e1428);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.gp-received__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-received__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; width: 44px; height: 44px; border: none; cursor: pointer;
    border-radius: 50%; font-size: 26px; line-height: 1;
    color: var(--gp-ink, #06080f);
    background: linear-gradient(180deg, var(--gp-yellow, #ffcb05), var(--gp-yellow-deep, #f5b800));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
}
.gp-received__nav--prev { left: 4px; }
.gp-received__nav--next { right: 4px; }
.gp-received__nav:active { transform: translateY(-50%) scale(.94); }
@media (max-width: 600px) {
    .gp-received__nav { width: 38px; height: 38px; font-size: 22px; }
    .gp-received__slide { width: clamp(160px, 62vw, 220px); }
}