/* ===========================================================
   Grapapack v3 homepage — rendered full-machine-ui.png + hotspots.
   Coordinate system: 838 wide × 1244 tall (machine-only render, mei 2026).
   All hotspot/overlay positions are percentages of those numbers.

   Layout: de echte .gp-nav header staat nu OOK op de homepage (logo +
   hamburger + tweaks). De machine staat in .gp-v3__stage; de live-sectie +
   recent activity staan in .gp-v3__rail — links naast de machine op desktop,
   onder de machine op mobiel.
   =========================================================== */

/* De security-strip in de footer zit al in de banner-bottom; verberg alleen
   die. Het manageable footer menu + copyright tonen we wel. */
body.home .gp-footer__strip { display: none; }

.gp-v3 {
    --v3-w: 838;
    --v3-h: 1244;
    background: #000;
    min-height: 100vh;
    padding: 24px 16px 40px;
}

/* Layout wrapper: rail + machine naast elkaar (desktop), gestapeld (mobiel).
   DOM-volgorde is stage → rail; op desktop schuift de rail via order:-1 naar
   links, op mobiel valt de rail (order:0) onder de machine. */
.gp-v3__layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    max-width: calc(var(--v3-w) * 1px + 320px);
    margin: 0 auto;
}

.gp-v3__rail {
    order: -1;
    flex: 0 0 clamp(220px, 22vw, 300px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
}

.gp-v3__stage {
    position: relative;
    flex: 0 1 calc(var(--v3-w) * 1px);
    width: 100%;
    max-width: calc(var(--v3-w) * 1px);
    /* Keep the aspect ratio of the design image so percentages stay aligned */
    aspect-ratio: var(--v3-w) / var(--v3-h);
    /* container-type maakt cqi-units in children werken op stage-breedte
       i.p.v. viewport — zodat tekst meeschaalt op mobile. */
    container-type: inline-size;
    container-name: gpstage;
}

@media (max-width: 900px) {
    .gp-v3__layout {
        flex-direction: column;
        align-items: stretch;
    }
    /* Rail onder de machine op mobiel (order terug naar normaal). */
    .gp-v3__rail {
        order: 0;
        flex: none;
        width: 100%;
    }
    .gp-v3__stage {
        flex: none;
        max-width: 100%;
        margin: 0 auto;
    }
}

.gp-v3__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* ───────────────────────────────────────────────────────────
   HOTSPOTS — invisible click areas over baked controls.
   Each `.gp-v3__hs--<id>` is positioned absolutely using
   pixel→% coordinates from the 1084×1451 image.
   =========================================================== */
.gp-v3__hs {
    position: absolute;
    background: transparent;
    border: 0;
    padding: 0; margin: 0;
    cursor: pointer;
    text-decoration: none;
    color: transparent;
    transition: filter .15s, box-shadow .15s, transform .12s;
    border-radius: 8px;
}
.gp-v3__hs:hover:not([aria-disabled="true"]):not(:disabled) {
    box-shadow: 0 0 24px rgba(255,255,255,.18);
    filter: brightness(1.06);
}
.gp-v3__hs[aria-disabled="true"], .gp-v3__hs:disabled {
    cursor: not-allowed; filter: grayscale(.5) brightness(.7);
}

/* Grab a Pack logo top-left — verwijderd 2026-05-26, baked image header
   is voldoende. Live + Activity rail schuiven nu omhoog in de vrijgekomen
   ruimte. */
.gp-v3__logo { display: none; }
.gp-v3__logo--legacy {
    position: absolute;
    left: 1%; top: 0.5%;
    width: 25.2%; height: 12.6%;
    z-index: 15;
    display: block;
    cursor: pointer;
}
.gp-v3__logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: top left;
    pointer-events: none;
}

/* LIVE stream sectie — bovenaan de linker rail (desktop) / boven de activity
   feed (mobiel). Bevat WE'RE LIVE / NOT LIVE status banner + WATCH LIVE knop. */
.gp-v3__live {
    position: relative;
    width: 100%;
    padding: 14px 10px;
    background: rgba(6, 8, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    container-type: inline-size;
    container-name: gplive;
}
.gp-v3__live-status {
    display: block;
    width: 78%; max-width: 220px;
    height: auto;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    transition: width .2s ease-out;
}
/* Wanneer LIVE: status afbeelding groter. */
.gp-v3__live[data-live-state="on"] .gp-v3__live-status {
    width: 100%;
}
.gp-v3__live-watch {
    display: block;
    width: 72%; max-width: 190px;
    cursor: pointer;
    transition: transform .12s, filter .12s;
}
.gp-v3__live-watch img {
    display: block;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.gp-v3__live-watch:hover {
    transform: scale(1.04);
    filter: brightness(1.1);
}
/* Geen actief live platform → grayscale + niet-klikbaar. */
.gp-v3__live-watch.is-off {
    filter: grayscale(1) brightness(.55);
    pointer-events: none;
    cursor: not-allowed;
}
.gp-v3__live-watch.is-off:hover {
    transform: none;
    filter: grayscale(1) brightness(.55);
}

/* Platform icon-buttons (Whatnot, TikTok, YouTube) — grijs uit, rood aan.
   Icon-only, container-query-gestuurde grootte zodat ze meeschalen op
   desktop én mobile binnen de smalle .gp-v3__live rail. */
.gp-v3__live-platforms {
    display: flex;
    gap: 6cqw;
    width: 92%;
    justify-content: center;
    margin-top: 3cqw;
    transform: translateY(-5px);
}
.gp-v3__live-platform {
    flex: 0 0 auto;
    width: clamp(20px, 22cqw, 50px);
    height: clamp(20px, 22cqw, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    transition: filter .15s, transform .12s, box-shadow .15s;
}
.gp-v3__live-platform svg {
    width: 60%;
    height: 60%;
    fill: currentColor;
    display: block;
}
.gp-v3__live-platform.is-off {
    background: linear-gradient(180deg, #3a3a45, #2a2a35);
    color: rgba(255, 255, 255, .35);
    border: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none;
}
.gp-v3__live-platform.is-live {
    background: linear-gradient(180deg, #ff3548, #c8101b);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 0 12px rgba(255, 53, 72, .55);
}
.gp-v3__live-platform.is-live:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255, 53, 72, .8);
}

/* RECENT ACTIVITY widget — linker rail, onder de live sectie.
   container-type maakt cqw-units in children werken zodat inhoud
   meeschaalt met de widget i.p.v. fixed-pixel-locked te blijven. */
.gp-v3__activity {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 320px;
    background: rgba(6, 8, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    container-type: inline-size;
    container-name: gpactivity;
}
/* Op mobiel onder de machine: vaste, scrollbare hoogte zodat 't niet
   eindeloos uitrekt. */
@media (max-width: 900px) {
    .gp-v3__activity { min-height: 360px; max-height: 60vh; }
}
.gp-v3__activity-head {
    margin: 0;
    padding: 5cqw 6cqw;
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-family: var(--gp-font-heading);
    font-size: clamp(9px, 6.5cqw, 14px);
    letter-spacing: 0.1em;
    color: var(--gp-text);
    text-align: center;
}
.gp-v3__activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 2cqw 3cqw;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.gp-v3__activity-list::-webkit-scrollbar { width: 6px; }
.gp-v3__activity-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.gp-v3__activity-loading,
.gp-v3__activity-empty {
    text-align: center;
    color: var(--gp-text-muted);
    padding: 6cqw 4cqw;
    font-family: var(--gp-font-mono);
    font-size: clamp(8px, 5cqw, 11px);
    letter-spacing: 0.05em;
}

/* Activity row v2 — twee-koloms layout: links avatar+username+tagline+card name+time,
   rechts staat de card image als grote portret. Onderaan een goud-naar-oranje
   accent strip ter scheiding. */
.gp-act-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr clamp(30px, 28cqw, 70px);
    gap: clamp(3px, 2cqw, 8px);
    align-items: stretch;
    padding: clamp(6px, 3.5cqw, 12px) clamp(3px, 2cqw, 8px) clamp(8px, 4cqw, 14px);
    border-bottom: 0;
    overflow: hidden;
}
.gp-act-row::after {
    content: "";
    position: absolute;
    left: 6%; right: 6%; bottom: 2%;
    height: 1.5px;
    background: linear-gradient(90deg, #f5b800 0%, #ff8a00 100%);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255, 138, 0, .35);
}
.gp-act-row:last-child::after { display: none; }
.gp-act-left {
    min-width: 0;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: clamp(2px, 1.5cqw, 5px);
}
.gp-act-head {
    display: grid;
    grid-template-columns: clamp(20px, 14cqw, 36px) 1fr;
    gap: clamp(4px, 2.5cqw, 8px);
    align-items: center;
}
.gp-act-avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gp-ink-4);
    border: 1px solid rgba(255,255,255,.15);
}
.gp-act-head-text { min-width: 0; line-height: 1.1; }
.gp-act-name {
    color: var(--gp-text);
    font-family: var(--gp-font-body);
    font-weight: 800; font-size: clamp(9px, 6.5cqw, 14px);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-act-flag {
    font-size: clamp(10px, 7cqw, 16px);
    line-height: 1;
    margin-left: 2px;
    vertical-align: -1px;
}
.gp-act-tagline {
    color: var(--gp-yellow);
    font-family: var(--gp-font-body);
    font-weight: 800;
    font-size: clamp(8px, 5.5cqw, 12px);
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-act-card-name {
    color: var(--gp-yellow);
    font-family: var(--gp-font-body);
    font-weight: 700;
    font-size: clamp(8px, 5.5cqw, 12px);
    letter-spacing: 0.02em;
    line-height: 1.2;
    word-break: break-word;
}
.gp-act-time {
    color: var(--gp-text-muted);
    font-size: clamp(6px, 4.5cqw, 10px);
    line-height: 1.2;
}
.gp-act-card {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    object-fit: cover;
    border-radius: 4px;
    background: var(--gp-ink-2);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 3px 8px rgba(0,0,0,.6);
    align-self: center;
}
.gp-act-card--sealed {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    font-family: var(--gp-font-body);
    font-weight: 700;
    font-size: clamp(6px, 2.4cqw, 9px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.04);
    border-style: dashed;
    box-shadow: none;
}

/* Mobile: laat alles meeschalen met de stage. Geen 'display:none' op
   side-widgets; ze krimpen met de canvas mee dankzij cqw-units. Wel
   tap-targets voor cart/menu vergroten zodat ze met de vinger te raken
   blijven (~44px doel op gemiddelde mobile). */
@media (max-width: 900px) {
    .gp-v3 { padding: 8px 4px; }
    .gp-v3__hs--cart { width: 7%; height: 4%; }
    .gp-v3__hs--menu { width: 7%; height: 4%; }
    .gp-v3__logo { width: 20.2%; height: 10.1%; }  /* 20% kleiner dan desktop 25.2% / 12.6% */
    /* HOW IT WORKS knop een stuk breder + hoger zodat tekst comfortabel past op mobiel.
       De span gebruikt al cqi (knop-breedte) dus schaalt automatisch mee. */
    .gp-v3__hs--howitworks { left: 27%; width: 36%; height: 4.5%; }
    .gp-v3__hs--tweaks { width: 7%; height: 4%; }
}

/* Header — logo (in z'n eigen .gp-v3__logo overlay) + 2 zichtbare CTAs +
   cart/menu rechtsboven. */
.gp-v3__hs--logo { display: none; } /* logo apart, niet als hotspot */
.gp-v3__hs--tweaks {
    left: 89%; top: 0.9%; width: 4.7%; height: 2.8%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gp-text) !important;
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    font-size: clamp(11px, 1.2vw, 16px);
    line-height: 1;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}
.gp-v3__hs--tweaks:hover {
    background: rgba(255, 203, 5, .25);
    border-color: var(--gp-yellow);
}
.gp-v3__hs--tweaks span { display: inline-block; transition: transform .4s ease; }
.gp-v3__hs--tweaks:hover span { transform: rotate(60deg); }
.gp-v3__hs--cart { left: 89.0%; top: 0.9%; width: 4.7%; height: 2.8%; }
.gp-v3__hs--menu { left: 95.6%; top: 0.9%; width: 4.7%; height: 2.8%; }

/* HOW IT WORKS + LEADERBOARD — echt zichtbare knoppen in de lege topzone
   van het nieuwe machine-ontwerp. */
/* HOW IT WORKS / LEADERBOARD knoppen verwijderd 2026-05-26 — vervangen door
   gp-v3__tagline. Onderstaande blokken blijven beschikbaar voor het geval
   een knop toch terugkomt. */
.gp-v3__hs--howitworks,
.gp-v3__hs--leaderboard { display: none; }

/* ─── PACK-DROP animatie (na betaling, ?gp_packdrop=KEY) ─────────────── */
.gp-packdrop-sprite {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    transform: translate(0, 0) rotate(0deg);
    will-change: transform;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6));
}

@keyframes gp-packdrop-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0); }
    50%      { box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 0 28px rgba(255,255,255,.7); }
}
.gp-v3__hs--reveal.gp-packdrop-pulse,
.gp-v3__hs--ship.gp-packdrop-pulse {
    animation: gp-packdrop-pulse 1.2s ease-in-out infinite;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 102;
}

/* ─── Reveal cinematic ───────────────────────────────────────── */
.gp-pd-flash {
    position: absolute; inset: 0;
    z-index: 150;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
        rgba(255,255,255,1) 0%,
        rgba(255,235,150,.8) 25%,
        rgba(255,150,40,.3) 55%,
        transparent 75%);
    opacity: 0;
    transform: scale(.3);
    animation: gp-pd-flash .6s ease-out forwards;
}
@keyframes gp-pd-flash {
    0%   { opacity: 0; transform: scale(.3); }
    35%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

.gp-pd-cards-stage {
    position: absolute; inset: 0;
    z-index: 160;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(8px, 1.5%, 22px);
    pointer-events: none;
    perspective: 1200px;
}
.gp-pd-card-reveal {
    margin: 0;
    width: clamp(80px, 18%, 220px);
    aspect-ratio: 2.5 / 3.5;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: scale(0) rotateY(180deg);
    transform-style: preserve-3d;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, .65),
        0 0 28px rgba(255, 210, 80, .55),
        0 0 60px rgba(255, 80, 200, .35);
    animation: gp-pd-card-flip .85s cubic-bezier(.18, .9, .32, 1.35) forwards;
}
.gp-pd-card-reveal img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
}
.gp-pd-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    padding: 12%;
    text-align: center;
    color: rgba(255,255,255,.8);
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: clamp(10px, 1.4cqi, 18px);
    background: linear-gradient(135deg, #2a1a4a, #4a2670);
}
.gp-pd-card-reveal::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255, 255, 255, .55) 48%,
        rgba(180, 220, 255, .35) 55%,
        transparent 65%);
    transform: translateX(-120%);
    animation: gp-pd-shimmer 1.4s ease-out .55s forwards;
    pointer-events: none;
}
@keyframes gp-pd-card-flip {
    0%   { opacity: 0; transform: scale(0) rotateY(180deg); }
    55%  { opacity: 1; transform: scale(1.28) rotateY(0deg); }
    75%  { transform: scale(0.92) rotateY(0deg); }
    100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}
@keyframes gp-pd-shimmer {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.gp-pd-sparkle {
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    background: radial-gradient(circle, #fff 0%, #ffd23c 40%, rgba(255, 210, 60, 0) 75%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: rotate(var(--ang, 0deg)) translateY(0) scale(0);
    animation: gp-pd-sparkle .9s ease-out forwards;
}
@keyframes gp-pd-sparkle {
    0%   { opacity: 0; transform: rotate(var(--ang, 0deg)) translateY(0)     scale(0); }
    25%  { opacity: 1; transform: rotate(var(--ang, 0deg)) translateY(-12px) scale(1.3); }
    100% { opacity: 0; transform: rotate(var(--ang, 0deg)) translateY(-90px) scale(0); }
}

.gp-packdrop-result {
    position: absolute; inset: 0;
    z-index: 200;
    background: rgba(6, 8, 15, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 4%;
    animation: gp-packdrop-fadein .25s ease-out;
}
@keyframes gp-packdrop-fadein { from { opacity: 0; } to { opacity: 1; } }
.gp-packdrop-result__inner {
    text-align: center;
    max-width: 96%;
}
.gp-packdrop-result h2 {
    color: var(--gp-yellow, #ffcb05);
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: clamp(20px, 3vw, 38px);
    margin: 0 0 20px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(255, 203, 5, .6);
}
.gp-packdrop-result p {
    color: var(--gp-text, #fff);
    font-size: clamp(13px, 1.4vw, 18px);
    margin: 0 0 24px;
}
.gp-packdrop-cards {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 18px;
    margin-bottom: 28px;
}
.gp-packdrop-cards figure {
    margin: 0;
    background: var(--gp-ink-2);
    border: 2px solid rgba(67, 232, 216, .35);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6), 0 0 30px rgba(67, 232, 216, .2);
}
.gp-packdrop-cards img {
    display: block;
    max-width: 220px;
    max-height: 280px;
    object-fit: contain;
    margin: 0 auto;
}
.gp-packdrop-cards figcaption {
    color: var(--gp-cyan);
    font-family: var(--gp-font-mono, ui-monospace);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 8px;
}
.gp-packdrop-done {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(180deg, var(--gp-red, #ff3548), var(--gp-red-deep, #c8101b));
    color: #fff;
    border: 3px solid var(--gp-ink-2);
    border-radius: 10px;
    font-family: var(--gp-font-display);
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--gp-red, #ff3548), 0 6px 0 var(--gp-ink-2), 0 0 30px rgba(255, 53, 72, .5);
    transition: transform .12s;
}
.gp-packdrop-done:hover { transform: translateY(-1px); color: #fff; }

/* Tijdens packdrop: dim de PAY NOW knop (klant is al klaar met betalen) */
.gp-v3[data-gp-packdrop="1"] .gp-v3__hs--paynow {
    pointer-events: none;
    opacity: .4;
    filter: grayscale(.6);
}

/* Header taglines — donkerblauwe neon tekst centraal bovenin, beheerbaar
   via Instellingen → Grapapack Pages. Roteert tussen meerdere regels via JS. */
.gp-v3__tagline {
    position: absolute;
    left: 30%; top: 0.9%;
    width: 40%; height: 4%;
    text-align: center;
    pointer-events: none;
    user-select: none;
    z-index: 14;
}
.gp-v3__tagline-line {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #5b9eff;
    font-family: var(--gp-font-body);
    font-weight: 800;
    font-size: clamp(7px, 1.2cqi, 14px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow:
        0 0 6px rgba(91, 158, 255, .9),
        0 0 14px rgba(91, 158, 255, .55),
        0 0 24px rgba(60, 80, 180, .35);
    opacity: 0;
    transition: opacity .6s ease;
}
.gp-v3__tagline-line.is-active { opacity: 1; }
.gp-v3__hs--howitworks:hover,
.gp-v3__hs--leaderboard:hover {
    background: var(--gp-yellow);
    color: var(--gp-ink-2) !important;
    box-shadow: 0 0 18px rgba(255, 203, 5, .55);
}
.gp-v3__hs--howitworks  { left: 42%; top: 0.9%; width: 14%; height: 2.8%; }
.gp-v3__hs--leaderboard { left: 58%; top: 0.9%; width: 14%; height: 2.8%; }

/* Coin pill € overlay — niet meer aanwezig in het nieuwe design */

/* Coin pill € overlay — niet meer aanwezig in het nieuwe design */
.gp-v3__overlay--coins { display: none; }

/* WATCH LIVE / VIEW ALL ACTIVITY — geen livestream of activity panel meer */
.gp-v3__hs--watchlive    { display: none; }
.gp-v3__hs--viewactivity { display: none; }

/* ───────────────────────────────────────────────────────────
   Pack hotspot grid — 5 cols × 4 rows = 20 packs.
   Kalibratie voor nieuwe GrapAPack-Machine.png (mei 2026).
   =========================================================== */
.gp-v3__grid {
    position: absolute;
    left: 3.5%; top: 15.5%;
    width: 74%; height: 50%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows:    repeat(4, 1fr);
    gap: 4px;
    z-index: 10;
}
.gp-v3__hotspot {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0; margin: 0;
    position: relative;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}

/* Pack stack: up to 10 thumbnails per hotspot. Front (--off:0) sits flat,
   each deeper pack peeks 2px up-and-right behind it and drops in z-index.
   Only the front pack is clickable — children are pointer-events:none so
   the parent button keeps the click. */
.gp-v3__pack {
    position: absolute;
    left: 10%; top: 10%;
    width: 80%; height: 80%;
    object-fit: contain;
    pointer-events: none;
    transform: translate(calc(var(--off, 0) * 2px), calc(var(--off, 0) * -2px));
    z-index: calc(20 - var(--off, 0));
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
    user-select: none;
}

/* Zoom magnifier — small chip top-right of the hotspot, fades in on hover.
   Separate from the card click (which adds to cart) thanks to stopPropagation
   in machine.js. */
.gp-v3__zoom {
    position: absolute;
    top: 4px; left: 4px;
    z-index: 25;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(6, 8, 15, 0.78);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 11px; line-height: 1;
    cursor: zoom-in;
    border: 1px solid rgba(255,255,255,.35);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .15s, transform .15s, background .15s, color .15s;
}
.gp-v3__zoom:focus-visible {
    opacity: 1; transform: scale(1);
}
/* Hover-reveal alleen op echte hover-apparaten — op touch behandelt de browser
   de eerste tap anders als hover (= dubbel tikken nodig om te selecteren). */
@media (hover: hover) {
    .gp-v3__hotspot:hover .gp-v3__zoom,
    .gp-v3__hotspot:focus-within .gp-v3__zoom {
        opacity: 1; transform: scale(1);
    }
}
.gp-v3__zoom:hover {
    background: var(--gp-cyan);
    color: var(--gp-ink-2);
}

/* Pack-count badge — klein getal rechtsboven elke hotspot dat
   toont hoeveel packs er in deze (row, col) zitten. */
.gp-v3__count {
    position: absolute;
    top: 3px; right: 3px;
    z-index: 24;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-yellow, #ffcb05);
    color: var(--gp-ink-2, #0a0d1a);
    font-family: var(--gp-font-numeric, ui-monospace);
    font-weight: 900;
    font-size: 10px;
    line-height: 1;
    border-radius: 8px;
    border: 1.5px solid var(--gp-ink-2, #0a0d1a);
    box-shadow: 0 0 6px rgba(255, 203, 5, .6);
    pointer-events: none;
    user-select: none;
}
/* Verberg badge als slot leeg of out-of-stock */
.gp-v3__hotspot[data-out-of-stock="1"] .gp-v3__count,
.gp-v3__hotspot:disabled .gp-v3__count { display: none; }

/* Lightbox: fullscreen overlay with the large image. */
.gp-v3__zoom-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
}
.gp-v3__zoom-modal[hidden] { display: none; }
.gp-v3__zoom-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: zoom-out;
}
.gp-v3__zoom-card {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
}
.gp-v3__zoom-img {
    display: block;
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
    background: var(--gp-ink-2);
}
.gp-v3__zoom-x {
    position: absolute;
    top: -14px; right: -14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff; color: #000;
    border: 0; cursor: pointer;
    font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.gp-v3__zoom-x:hover {
    background: var(--gp-led-red, #ff3040); color: #fff;
}
@media (hover: hover) {
    .gp-v3__hotspot:hover:not(:disabled) {
        border-color: rgba(67,232,216,.6);
        box-shadow: 0 0 16px rgba(67,232,216,.4);
        transform: translateY(-2px);
    }
}
.gp-v3__hotspot[data-selected="1"] {
    border-color: var(--gp-cyan, #43e8d8);
    box-shadow: 0 0 0 3px var(--gp-cyan), 0 0 26px var(--gp-cyan), inset 0 0 14px rgba(67,232,216,.35);
    animation: gp-pulse-glow 1.4s ease-in-out infinite;
}
.gp-v3__hotspot[data-out-of-stock="1"],
.gp-v3__hotspot:disabled { cursor: not-allowed; }

/* HOW IT WORKS panel — neon blauwe tekst in het BOVENSTE rechter zwarte vlak.
   container-type maakt cqi-units in children werken zodat alles meeschaalt
   met de panel-breedte i.p.v. viewport (anders unreadable op mobile). */
.gp-v3__hiw {
    position: absolute;
    left: 80%; top: 17%;
    width: 17%; height: 16%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 5cqi 4cqi 4cqi;
    z-index: 14;
    color: var(--gp-cyan);
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    text-align: center;
    text-shadow:
        0 0 4px rgba(67, 232, 216, .95),
        0 0 10px rgba(67, 232, 216, .75),
        0 0 18px rgba(67, 232, 216, .55);
    container-type: inline-size;
    container-name: gphiw;
    overflow: visible;
    /* button reset */
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform .15s ease-out, filter .15s ease-out;
}
.gp-v3__hiw:hover,
.gp-v3__hiw:focus-visible {
    filter: brightness(1.25);
    transform: scale(1.02);
    outline: none;
}
.gp-v3__hiw:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(67, 232, 216, .8);
    border-radius: 6px;
}
.gp-v3__hiw-title {
    margin: 0;
    font-size: clamp(11px, 16.5cqi, 26px);
    letter-spacing: 0.1em;
    line-height: 1;
    flex: 0 0 auto;
}
.gp-v3__hiw-steps {
    margin: 1em 0 0;
    padding: 0 0 0 6cqi;
    list-style: none;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 0.7em;
    font-family: var(--gp-font-body);
    font-weight: 700;
    font-size: clamp(7px, 9cqi, 14px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.gp-v3__hiw-more {
    display: inline-block;
    margin: 0.8em auto 0;
    padding: 0.55em 1.4em;
    background: var(--gp-cyan, #43e8d8);
    color: #06080f;
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: clamp(7px, 7.5cqi, 12px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 0 14px rgba(67, 232, 216, .5);
    pointer-events: none;
    transition: transform .15s ease-out;
}
.gp-v3__hiw:hover .gp-v3__hiw-more {
    transform: translateY(-6px) scale(1.04);
}
.gp-v3__hiw-steps li {
    display: flex; align-items: center; gap: 0.4em;
    line-height: 1.1;
    text-align: left;
}
.gp-v3__hiw-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4em; height: 1.4em;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-family: var(--gp-font-numeric);
    font-size: 0.85em;
    box-shadow: 0 0 8px rgba(67, 232, 216, .55);
}

/* Labels boven count + total — gele display font net zoals HIW titel hierboven. */
.gp-v3__sel-label {
    position: absolute;
    left: 88.4%;
    transform: translate(-50%, -50%);
    display: inline-block;
    color: var(--gp-yellow);
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: clamp(9px, 1.5cqi, 18px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    z-index: 5;
    text-shadow:
        0 0 6px rgba(255, 203, 5, .85),
        0 0 14px rgba(255, 203, 5, .45);
}
.gp-v3__sel-label--count { top: 37.8%; }
.gp-v3__sel-label--total { top: 42.6%; }

/* SELECTED panel — count + total overlays.
   Default in het ONDERSTE van de 2 lege rechter-vakjes; user vult later in
   met definitieve content. */
.gp-v3__sel-count {
    position: absolute;
    left: 88.4%; top: 40.2%;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 0 2px;
    background: transparent;
    color: var(--gp-cyan);
    font-family: var(--gp-font-numeric); font-weight: 900;
    font-size: clamp(8px, 1.7cqi, 22px);
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(67,232,216,.75);
    pointer-events: none;
    z-index: 5;
}
.gp-v3__sel-total {
    position: absolute;
    left: 88.4%; top: 45%;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 0 2px;
    background: transparent;
    color: var(--gp-cyan);
    font-family: var(--gp-font-numeric); font-weight: 900;
    font-size: clamp(8px, 1.7cqi, 22px);
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(67,232,216,.75);
    pointer-events: none;
    z-index: 5;
}
.gp-v3__sel-total .amount,
.gp-v3__sel-total bdi { color: var(--gp-cyan); font-family: var(--gp-font-numeric); }

/* PAY NOW button hotspot — rechter-rail rode glow knop */
.gp-v3__hs--paynow {
    left: 80.5%; top: 51.5%;
    width: 16.5%; height: 7%;
    border-radius: 12px;
}
.gp-v3__hs--paynow:not([aria-disabled="true"]):hover {
    box-shadow: 0 0 36px rgba(255,53,72,.65);
}

/* DROP-ZONE preview — 2 grijze placeholders waar straks de gekochte packs
   landen, met daaronder een neon divider tussen drop-zone en REVEAL/SHIP. */
.gp-v3__droplz {
    position: absolute;
    left: 14%; top: 71%;
    width: 54%; height: 9%;
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: space-between;
    z-index: 18;
    pointer-events: none;
    container-type: inline-size;
    transition: opacity .4s ease-out;
}
.gp-v3__droplz.is-hidden { opacity: 0; }
.gp-v3__droplz-cards {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 1.5cqi;
}
.gp-v3__droplz-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68%;
    aspect-ratio: 2.5 / 3.5;
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .35);
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: clamp(10px, 4cqi, 22px);
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, .15);
}
.gp-v3__droplz-line {
    width: 100%;
    height: 2px;
    margin-top: 4%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(67, 232, 216, .8) 12%,
        #43e8d8 35%,
        #ffffff 50%,
        #c084fc 65%,
        rgba(192, 132, 252, .8) 88%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(67, 232, 216, .85),
        0 0 16px rgba(192, 132, 252, .55),
        0 0 24px rgba(255, 255, 255, .25);
    border-radius: 2px;
}

/* REVEAL / SHIP — side-by-side onder de pack-landing zone.
   Tekst+icoon overlay zodat de baked SHIP SEALED knop visueel wordt
   gesplitst in 2 styled buttons. Top zone (66.5-74.1%) blijft vrij voor
   de pack-drop landing animatie. */
.gp-v3__hs--reveal {
    left: 14.5%; top: 81%;
    width: 26%; height: 6.5%;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(2, 18, 28, .82), rgba(2, 12, 22, .92));
    border: 2px solid #43e8d8;
    box-shadow: 0 0 18px rgba(67, 232, 216, .55), inset 0 0 12px rgba(67, 232, 216, .25);
    color: #43e8d8 !important;
    display: flex; align-items: center; justify-content: center;
    gap: 6%;
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(67, 232, 216, .65);
    z-index: 25;
}
.gp-v3__hs--ship {
    left: 42.5%; top: 81%;
    width: 26%; height: 6.5%;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30, 10, 50, .82), rgba(22, 6, 40, .92));
    border: 2px solid #c084fc;
    box-shadow: 0 0 18px rgba(192, 132, 252, .55), inset 0 0 12px rgba(192, 132, 252, .25);
    color: #c084fc !important;
    display: flex; align-items: center; justify-content: center;
    gap: 6%;
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(192, 132, 252, .65);
    z-index: 25;
}
.gp-v3__hs--reveal .gp-v3__hs-icon,
.gp-v3__hs--ship   .gp-v3__hs-icon {
    font-size: clamp(14px, 3cqi, 28px);
    line-height: 1;
}
.gp-v3__hs--reveal .gp-v3__hs-label,
.gp-v3__hs--ship   .gp-v3__hs-label {
    font-size: clamp(11px, 2.2cqi, 20px);
}
.gp-v3__hs--reveal:hover {
    box-shadow: 0 0 28px rgba(67, 232, 216, .85), inset 0 0 14px rgba(67, 232, 216, .35);
    transform: translateY(-1px);
}
.gp-v3__hs--ship:hover {
    box-shadow: 0 0 28px rgba(192, 132, 252, .85), inset 0 0 14px rgba(192, 132, 252, .35);
    transform: translateY(-1px);
}

/* Speaker — geen icoon in het nieuwe design */
.gp-v3__hs--speaker { display: none; }

/* ───────────────────────────────────────────────────────────
   Checkout popup — inline modal over the homepage. Ported
   from proto-overlays.jsx PModalShell styling.
   =========================================================== */
@keyframes gp-v3-co-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gp-v3-co-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.gp-v3__co-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: gp-v3-co-backdrop-in .25s ease-out;
}
.gp-v3__co-modal[hidden] { display: none; }

.gp-v3__co-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.gp-v3__co-card {
    position: relative;
    width: 100%; max-width: 1100px;
    max-height: 90vh;
    background: var(--gp-ink-2);
    border: 4px solid var(--gp-yellow, #ffcb05);
    border-radius: 14px;
    box-shadow:
        0 0 0 2px var(--gp-ink-2),
        0 30px 80px rgba(0,0,0,.8),
        0 0 40px rgba(255,203,5,.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: gp-v3-co-modal-in .28s cubic-bezier(.2,.7,.3,1.2);
}

.gp-v3__co-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 26px;
    border-bottom: 2px solid rgba(255,203,5,.25);
    background: linear-gradient(180deg, #1a1c30, var(--gp-ink-2));
}
.gp-v3__co-kicker {
    font-family: var(--gp-font-mono);
    font-size: 10px; letter-spacing: 3px;
    color: var(--gp-cyan);
    margin-bottom: 4px;
}
.gp-v3__co-title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 28px; letter-spacing: 1.5px;
    color: var(--gp-yellow);
    text-shadow: 2px 2px 0 var(--gp-ink-2);
    line-height: 1;
}
.gp-v3__co-x {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--gp-ink-4);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.15);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
}
.gp-v3__co-x:hover {
    background: var(--gp-led-red, #ff3548);
    border-color: var(--gp-led-red, #ff3548);
}

.gp-v3__co-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 24px 28px;
    min-height: 0;
    color: var(--gp-text);
}
.gp-v3__co-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--gp-text-muted);
    font-family: var(--gp-font-mono);
    font-size: 12px;
    letter-spacing: 2px;
}
.gp-v3__co-error {
    padding: 16px 20px;
    color: var(--gp-led-red);
    background: rgba(255,53,72,.1);
    border: 1px solid rgba(255,53,72,.4);
    border-radius: 8px;
    font-family: var(--gp-font-body);
    font-size: 13px;
}

/* When the body is rendering, dim it during AJAX submit */
.gp-v3__co-body.is-busy { opacity: .55; pointer-events: none; }

/* ───────────────────────────────────────────────────────────
   Debug mode: ?gp_debug=1 reveals all hotspots + overlay rects
   with coloured semi-transparent backgrounds so we can see
   exactly where they land and tune coordinates.
   =========================================================== */
.gp-v3[data-gp-debug="1"] .gp-v3__hs {
    background: rgba(0, 255, 255, 0.18) !important;
    outline: 1px dashed rgba(0, 255, 255, 0.9);
    border: 0;
}
.gp-v3[data-gp-debug="1"] .gp-v3__hs::before {
    content: attr(aria-label);
    position: absolute; top: 0; left: 0;
    background: rgba(0, 255, 255, 0.95); color: #000;
    font: bold 9px var(--gp-font-mono);
    padding: 1px 4px; white-space: nowrap;
}
.gp-v3[data-gp-debug="1"] .gp-v3__hotspot {
    background: rgba(255, 0, 255, 0.18) !important;
    outline: 1px dashed rgba(255, 0, 255, 0.9);
}
.gp-v3[data-gp-debug="1"] .gp-v3__hotspot::before {
    content: attr(aria-label);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(255, 0, 255, 0.85); color: #fff;
    font: bold 10px var(--gp-font-mono);
    padding: 2px 4px; pointer-events: none;
}
.gp-v3[data-gp-debug="1"] .gp-v3__overlay {
    background: rgba(255, 255, 0, 0.10) !important;
    outline: 1px dashed rgba(255, 255, 0, 0.9);
}
.gp-v3[data-gp-debug="1"] .gp-v3__overlay::before {
    content: attr(data-debug);
    position: absolute; top: -16px; left: 0;
    background: rgba(255, 255, 0, 0.95); color: #000;
    font: bold 9px var(--gp-font-mono);
    padding: 1px 4px; white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 700px) {
    .gp-v3 { padding: 8px; }
    .gp-v3__ticker-phase { font-size: 10px; }
    /* Op mobiel mag de HIW infographic niet over de machine REVEAL/SHIP
       buttons heen vallen — extra spacing zodat het ruim onder de machine staat. */
    .gp-v3__howitworks-img {
        margin: 0 auto 24px !important;
        z-index: auto !important;
    }
}

/* HOW IT WORKS panel — tablet/mobile. Alles zichtbaar, agressief kleiner
   geschaald zodat het binnen het zwarte vlak past. cqi = % van panel-
   breedte zodat het mee-schaalt met de stage. */
@media (max-width: 900px) {
    .gp-v3__hiw {
        top: 17.5%; /* ~15px lager dan voorheen, alleen op mobiel */
        padding: 2cqi 1cqi;
        justify-content: center;
        text-shadow:
            0 0 2px rgba(67, 232, 216, .9),
            0 0 5px rgba(67, 232, 216, .55);
    }
    .gp-v3__hiw-title {
        margin: 0 0 0.2em;
        font-size: clamp(7px, 11cqi, 13px);
        letter-spacing: 0.04em;
        line-height: 1;
    }
    .gp-v3__hiw-steps {
        padding: 0 0 0 2cqi;
        gap: 0.5em;
        font-size: clamp(5px, 6.5cqi, 9px);
        letter-spacing: 0.02em;
        margin: 0.6em 0 0;
        font-weight: 500;
    }
    .gp-v3__hiw-steps li {
        gap: 0.3em;
        line-height: 1.1;
        align-items: flex-start;
        font-weight: 500;
    }
    .gp-v3__hiw-text {
        display: block;
        white-space: normal;
        word-break: break-word;
        max-width: 65cqi;
        font-weight: 500;
    }
    .gp-v3__hiw-num {
        width: 1.2em; height: 1.2em;
        font-size: 0.75em;
        box-shadow: 0 0 4px rgba(67, 232, 216, .5);
    }
    .gp-v3__hiw-more {
        margin: 1.1em auto 0;
        padding: 0.3em 0.7em;
        font-size: clamp(5px, 6cqi, 8px);
        letter-spacing: 0.03em;
        box-shadow: 0 0 8px rgba(67, 232, 216, .5);
        transform: translateY(0);
    }

    /* Selected/Amount labels 20% kleiner op mobiel. */
    .gp-v3__sel-label {
        font-size: clamp(7px, 1.2cqi, 14px);
        letter-spacing: 0.08em;
    }

    /* Mobiele rail-volgorde: HOW IT WORKS → recent activity → live stream.
       machine.js plaatst de howitworks-img in de rail; flex-order bepaalt de
       definitieve volgorde. Geen negatieve marge zodat 'ie netjes aansluit. */
    .gp-v3__howitworks-img { margin: 0 auto 20px !important; order: 1; }
    .gp-v3__activity       { order: 2; }
    .gp-v3__live           { order: 3; }
}

/* ─── Banners (top + bottom) ──────────────────────────────────── */
.gp-v3__banner-top,
.gp-v3__banner-bottom {
    display: block;
    width: 100%;
    max-width: 1084px;
    margin: 0 auto;
    height: auto;
    background: #000;
}
.gp-v3__howitworks-img {
    display: block;
    width: 100%;
    max-width: 1084px;
    margin: -40px auto 24px;
    height: auto;
    background: #000;
    position: relative;
    z-index: 10;
}
.gp-v3__banner-top    { margin-bottom: 0; }
.gp-v3__banner-bottom { margin-top: 32px; margin-bottom: 32px; }
@media (max-width: 700px) {
    .gp-v3__banner-bottom { margin-top: 20px; margin-bottom: 20px; }
}

/* ─── Slot-lock: gelocked door iemand anders ──────────────── */
.gp-v3__hotspot.is-locked-other {
    cursor: not-allowed;
    pointer-events: none;
}
.gp-v3__hotspot.is-locked-other .gp-v3__pack,
.gp-v3__hotspot.is-locked-other .gp-v3__count {
    filter: grayscale(1) brightness(.45);
}
.gp-v3__hotspot.is-locked-other::after {
    content: "🔒";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 9cqw, 56px);
    z-index: 6;
    pointer-events: none;
    text-shadow: 0 0 12px rgba(0, 0, 0, .9);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
}