/* ===========================================================
   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: 1163; /* nieuwe machine-afbeelding 1030×1430 (ratio) */
    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) {
    /* Recent activity op mobiel: horizontale slider (kaarten naast elkaar)
       i.p.v. een verticale lijst. */
    .gp-v3__activity { min-height: 0; max-height: none; }
    .gp-v3__activity-list {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gp-v3__activity-list::-webkit-scrollbar { display: none; }
    .gp-act-row {
        flex: 0 0 clamp(172px, 52vw, 220px);
        scroll-snap-align: start;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 12px;
        padding: 12px 10px 16px;
        overflow: hidden;
    }
    /* Tekst + pack-visual dicht bij elkaar i.p.v. uit elkaar getrokken. */
    .gp-act-row { grid-template-columns: 1fr auto; column-gap: 8px; }
    .gp-act-card, .gp-act-card--sealed { width: clamp(44px, 15vw, 58px); }
    .gp-act-row::after { left: 8%; right: 8%; bottom: 6px; }
}
.gp-v3__activity-head {
    margin: 0;
    padding: 5cqw 6cqw;
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    /* Zelfde font + grootte als de reviews-titel "WHAT COLLECTORS ARE SAYING". */
    font-family: var(--gp-font-display, "Bungee", sans-serif);
    font-size: clamp(22px, 3.6vw, 34px);
    letter-spacing: 0.1em;
    color: var(--gp-text);
    text-align: center;
}
.gp-v3__activity-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 2.5cqw, 8px);
}
/* LIVE-badge met pulserende dot. */
.gp-v3__activity-live {
    display: inline-flex;
    align-items: center;
    gap: clamp(2px, 1.5cqw, 4px);
    padding: clamp(1px, 0.8cqw, 2px) clamp(4px, 2.5cqw, 7px);
    border-radius: 999px;
    background: rgba(255, 59, 48, .14);
    border: 1px solid rgba(255, 59, 48, .4);
    color: #ff5f57;
    font-size: clamp(7px, 4.8cqw, 10px);
    font-weight: 800;
    letter-spacing: 0.08em;
}
.gp-v3__activity-live-dot {
    width: clamp(5px, 2.6cqw, 7px);
    height: clamp(5px, 2.6cqw, 7px);
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, .7);
    animation: gp-act-pulse 1.6s ease-out infinite;
}
@keyframes gp-act-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); opacity: 1; }
    70%  { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); opacity: .85; }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .gp-v3__activity-live-dot { animation: none; }
}
/* Social-proof teller onder de kop. */
.gp-v3__activity-stats {
    padding: clamp(3px, 2cqw, 6px) 6cqw;
    text-align: center;
    font-family: var(--gp-font-body);
    font-size: clamp(8px, 5cqw, 11px);
    color: var(--gp-text-muted);
    background: rgba(0, 0, 0, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    line-height: 1.3;
}
.gp-v3__activity-stats strong { color: var(--gp-yellow); font-weight: 800; }
.gp-v3__activity-stats-sep { opacity: .5; margin: 0 clamp(2px, 1.5cqw, 5px); }

.gp-v3__activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 2cqw 3cqw;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
/* "✓ Verified #..." per pull — koppelt social proof aan de echte sticker. */
.gp-act-verified {
    display: inline-flex;
    align-items: center;
    gap: clamp(2px, 1.5cqw, 4px);
    margin-top: clamp(1px, 1cqw, 3px);
    color: #3ddc84;
    font-family: var(--gp-font-body);
    font-weight: 700;
    font-size: clamp(6px, 4.3cqw, 10px);
    letter-spacing: 0.02em;
}
.gp-act-verified-ic {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: clamp(9px, 5.5cqw, 13px);
    height: clamp(9px, 5.5cqw, 13px);
    border-radius: 50%;
    background: rgba(61, 220, 132, .18);
    border: 1px solid rgba(61, 220, 132, .5);
    font-size: clamp(6px, 3.6cqw, 8px);
    line-height: 1;
}
.gp-act-verified-no {
    color: var(--gp-text);
    font-family: var(--gp-font-mono, monospace);
    opacity: .85;
}
.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; }

/* ═══ Activity feed — gouden sterretjes-cascade ════════════════════════════
   Alleen de sterretjes — geen card-flits meer. overflow:visible zodat de
   sterretjes uit de rij mogen "spatten". */
.gp-act-row.gp-act-win { overflow: visible; }
.gp-act-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.gp-act-spark {
    position: absolute;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe98a 45%, rgba(255, 196, 0, .55) 72%, transparent 74%);
    filter: drop-shadow(0 0 4px rgba(255, 203, 5, .9));
    opacity: 0;
    animation: gp-act-spark 1.5s ease-out var(--d, 0ms) forwards;
}
@keyframes gp-act-spark {
    0%   { opacity: 0; transform: translate(0, 0) scale(.2); }
    22%  { opacity: 1; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)) scale(1.1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
@media (prefers-reduced-motion: reduce) {
    .gp-act-spark { 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: block;
    align-items: center;
}
.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;
}
/* Reveal-status i.p.v. tagline: groen = onthuld, gedimd = nog niet. */
.gp-act-tagline--rev { color: #3ddc84; }
.gp-act-tagline--sealed { color: rgba(255, 255, 255, .55); }
.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--zoom {
    cursor: zoom-in;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.gp-act-card--zoom:hover,
.gp-act-card--zoom:focus-visible {
    transform: scale(1.04);
    border-color: var(--gp-yellow);
    box-shadow: 0 4px 14px rgba(0,0,0,.7);
    outline: none;
}
.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: calc(15.5% - 10px);
    width: 74%; height: 50%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows:    repeat(4, 1fr);
    gap: 4px;
    z-index: 10;
}
/* Horizontale offset voor alle packs (px, positief = naar rechts). */
.gp-v3__grid { --gp-pack-dx: 10px; } /* alle kolommen 20px naar links (was 30px) */
/* Per-kolom horizontale fine-tuning (px, positief = rechts), bovenop --gp-pack-dx. */
.gp-v3__grid > .gp-v3__hotspot:nth-child(5n+1) { --gp-pack-cx: 15px;  } /* kolom 1 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(5n+2) { --gp-pack-cx: 7px;   } /* kolom 2 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(5n+3) { --gp-pack-cx: 0px;   } /* kolom 3 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(5n+4) { --gp-pack-cx: -4px;  } /* kolom 4 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(5n)   { --gp-pack-cx: -10px; } /* kolom 5 */
/* Per-rij verticale fine-tuning van de pack-afbeelding (px, positief = omlaag).
   Makkelijk per rij bij te stellen zodat de packs mooi op de coils zitten. */
.gp-v3__grid > .gp-v3__hotspot:nth-child(-n+5)                 { --gp-pack-dy: 15px; } /* rij 1 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(n+6):nth-child(-n+10) { --gp-pack-dy: 25px; } /* rij 2 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(n+11):nth-child(-n+15){ --gp-pack-dy: 36px; } /* rij 3 */
.gp-v3__grid > .gp-v3__hotspot:nth-child(n+16)                 { --gp-pack-dy: 44px; } /* rij 4 */
/* Mobiel: rij 3 & 4 15px hoger — op de kleinere machine zijn de px-offsets
   proportioneel te groot waardoor de onderste rijen te laag zaten. */
@media (max-width: 700px) {
    .gp-v3__grid > .gp-v3__hotspot:nth-child(n+6):nth-child(-n+10) { --gp-pack-dy: 20px; } /* rij 2 */
    .gp-v3__grid > .gp-v3__hotspot:nth-child(n+11):nth-child(-n+15){ --gp-pack-dy: 26px; } /* rij 3 */
    .gp-v3__grid > .gp-v3__hotspot:nth-child(n+16)                 { --gp-pack-dy: 34px; } /* rij 4 */
}
.gp-v3__hotspot {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0; margin: 0;
    position: relative;
    /* Verschuif de HELE hotspot (klikgebied + pack) i.p.v. alleen de afbeelding,
       zodat het klikgebied altijd samenvalt met de zichtbare pack. top/left
       composeren netjes met de hover-transform. */
    top: var(--gp-pack-dy, 0px);
    left: calc(var(--gp-pack-dx, 0px) + var(--gp-pack-cx, 0px));
    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%; /* offset zit nu op de hotspot (zie .gp-v3__hotspot) */
    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);
    }
}
/* Touch-apparaten (geen hover): vergrootglas altijd zichtbaar + iets groter
   voor een fijne tap. Tik op de pack = selecteren, tik op de 🔍 = vergroten. */
@media (hover: none) {
    .gp-v3__zoom {
        opacity: 1;
        transform: scale(1);
        width: 16px; height: 16px; /* zelfde als de voorraad-badge .gp-v3__count */
        font-size: 9px;
        background: rgba(6, 8, 15, 0.9);
    }
}
.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-caption {
    margin-top: 10px;
    text-align: center;
    color: #3ddc84;
    font-family: var(--gp-font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.gp-v3__zoom-caption::before { content: '✓ '; }
.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: #22c55e;
    box-shadow: 0 0 0 3px #22c55e, 0 0 26px rgba(34,197,94,.9), inset 0 0 14px rgba(34,197,94,.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; }

/* In-cart marker — winkelwagen-icoon midden op de pack zodra geselecteerd. */
.gp-v3__incart {
    position: absolute;
    inset: 0;
    z-index: 27;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.gp-v3__incart svg {
    box-sizing: border-box;
    width: 54%;
    height: 54%;
    min-width: 34px;
    min-height: 34px;
    max-width: 48px;
    max-height: 48px;
    /* GEEN padding op de <svg>: CSS-padding op een inline SVG met viewBox laat
       Chrome de viewBox-inhoud naar ~0 krimpen (icoon onzichtbaar). De inset
       rond het vinkje zit nu in de viewBox zelf (-4 -4 32 32) in front-page.php. */
    color: #fff;
    background: #22c55e;
    border: 2px solid #eafff1;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(34,197,94,.95), 0 2px 8px rgba(0,0,0,.55);
    animation: gp-incart-pop .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gp-incart-pop {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}
.gp-v3__hotspot[data-selected="1"] .gp-v3__incart { display: flex; }

/* 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: 81.7%; top: 17.5%;
    width: 17%; height: 18%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2cqi 3cqi;
    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(12px, 18cqi, 28px);
    letter-spacing: 0.1em;
    line-height: 1;
    flex: 0 0 auto;
}
.gp-v3__hiw-steps {
    margin: 0.5em 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(8px, 9.5cqi, 15px);
    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(8px, 8.5cqi, 13px);
    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: 90.1%;
    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: 41.9%; }
.gp-v3__sel-label--total { top: 46.7%; }

/* 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: 90.1%; top: 44.3%;
    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: 90.1%; top: 49.1%;
    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: 81.5%; top: 54.4%;
    width: 17.5%; height: 8%;
    border-radius: 12px;
}
.gp-v3__hs--paynow:not([aria-disabled="true"]):hover {
    box-shadow: 0 0 36px rgba(255,53,72,.65);
}

/* ─── Pack vliegt naar PAY NOW (cue bij pack-selectie) ─────────── */
.gp-fly-sprite {
    position: fixed;
    z-index: 10001;
    object-fit: contain;
    pointer-events: none;
    border-radius: 6px;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
    will-change: transform, opacity;
}
/* PAY NOW licht kort op zodra de pack "aankomt". De hotspot is transparant
   over de baked knop, dus we tonen een gele→cyaan glow-puls. */
.gp-v3__hs--paynow.gp-paynow-bump {
    animation: gp-paynow-bump .85s ease-out;
}
@keyframes gp-paynow-bump {
    0%   { box-shadow: 0 0 0 0 rgba(255, 203, 5, 0); }
    25%  { box-shadow: 0 0 34px 7px rgba(255, 203, 5, .9),  inset 0 0 18px rgba(255, 203, 5, .5); }
    55%  { box-shadow: 0 0 26px 4px rgba(67, 232, 216, .85), inset 0 0 14px rgba(67, 232, 216, .45); }
    100% { box-shadow: 0 0 0 0 rgba(67, 232, 216, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .gp-v3__hs--paynow.gp-paynow-bump { animation: none; }
}

/* 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: calc(76.1% + 10px); /* 15px lager, daarna 5px hoger */
    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: 2.6cqi; /* iets meer ruimte i.v.m. de scale hieronder */
}
.gp-v3__droplz-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 98%;
    transform: scale(1.2); /* nog 20% groter (hoogte was al maxed op 98%) */
    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(14px, 5.8cqi, 31px);
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, .15);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Gevuld slot: de gekozen pack vult het kaartje, nummer verdwijnt. */
.gp-v3__droplz-card.is-filled {
    border-color: rgba(67, 232, 216, .75);
    background: rgba(6, 10, 12, .55);
    box-shadow: 0 0 12px rgba(67, 232, 216, .45), inset 0 0 8px rgba(0, 0, 0, .5);
}
.gp-v3__droplz-card.is-filled .gp-v3__droplz-num { display: none; }
/* Kleine volumekorting-badge onder het slotnummer (bv. -5% / -10%).
   Absoluut onderaan, zodat het slotnummer even hoog gecentreerd blijft als
   de nummers zónder korting-label (1, 2, 4). */
.gp-v3__droplz-disc {
    position: absolute;
    left: 0; right: 0;
    bottom: 9%;
    text-align: center;
    font-family: var(--gp-font-heading, 'Bebas Neue'), sans-serif;
    font-size: clamp(6px, 2.8cqi, 13px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--gp-yellow, #ffcb05);
    text-shadow: 0 0 6px rgba(255, 203, 5, .4);
    white-space: nowrap;
}
.gp-v3__droplz-card.is-filled .gp-v3__droplz-disc { display: none; }
.gp-v3__droplz-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    animation: gp-droplz-pop .28s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes gp-droplz-pop {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}
.gp-v3__droplz-line {
    width: 100%;
    height: 2px;
    margin-top: calc(4% + 5px); /* 5px extra ruimte tussen vakjes 1-5 en de lijn */
    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: calc(86.1% + 15px); /* 15px lager */
    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: calc(86.1% + 15px); /* 15px lager */
    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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.02;
    font-size: clamp(10px, 2.2cqi, 20px);
}
/* Elke regel op één lijn houden (geen extra wrap van "BUY WITHOUT"). */
.gp-v3__hs-l1, .gp-v3__hs-l2 { display: block; white-space: nowrap; }
.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);
}

/* Klein "i"-icoon rechtsboven in de buy-knoppen → opent de uitleg-popup.
   Neemt de knopkleur over (currentColor: cyan bij reveal, paars bij ship). */
.gp-v3__hs-info {
    flex: none;
    width: clamp(13px, 2.8cqi, 19px);
    height: clamp(13px, 2.8cqi, 19px);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: rgba(0, 0, 0, .3);
    color: inherit;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(8px, 1.9cqi, 13px);
    line-height: 1;
    text-shadow: none;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gp-v3__hs-info:hover,
.gp-v3__hs-info:focus-visible {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 8px currentColor;
    outline: none;
}

/* 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; }
}
.gp-v3__banner-link { display: block; }
.gp-v3__banner-link .gp-v3__banner-top { margin-bottom: 0; }

/* ─── Top-banner slider (2–3 banners) ─────────────────────────── */
.gp-v3__banner-slider {
    position: relative;
    width: 100%;
    max-width: 1084px;
    margin: 0 auto;
}
.gp-v3__banner-track {
    position: relative;
}
.gp-v3__banner-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
}
.gp-v3__banner-slide.is-active {
    opacity: 1;
    visibility: visible;
}
/* Stack slides on top of each other so the slider keeps one banner's height. */
.gp-v3__banner-slide:not(.is-active) {
    position: absolute;
    inset: 0;
}
.gp-v3__banner-slide .gp-v3__banner-top { margin: 0; }

.gp-v3__banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}
.gp-v3__banner-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.gp-v3__banner-dot:hover { background: rgba(255, 255, 255, .85); }
.gp-v3__banner-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}
@media (max-width: 700px) {
    .gp-v3__banner-dots { bottom: 8px; gap: 6px; }
    .gp-v3__banner-dot { width: 8px; height: 8px; }
}

/* ─── 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(.4);
}
/* Donkere scrim over de pack zodat de lock-melding leesbaar is. */
.gp-v3__hotspot.is-locked-other::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    background: rgba(6, 9, 18, .62);
    border-radius: 6px;
    pointer-events: none;
}

/* Lock-melding (icoon + "Locked by visitor") — alleen zichtbaar bij lock. */
.gp-v3__lockmsg {
    position: absolute;
    inset: 0;
    z-index: 28;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5%;
    padding: 6%;
    text-align: center;
    pointer-events: none;
}
.gp-v3__hotspot.is-locked-other .gp-v3__lockmsg { display: flex; }
.gp-v3__lockmsg-ico {
    width: 34%;
    height: auto;
    max-width: 30px;
    color: var(--gp-led-red, #ff3b4e);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}
.gp-v3__lockmsg-text {
    font-family: var(--gp-font-body, sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.1;
    font-size: clamp(7px, 2.1cqw, 12px);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* ===========================================================
   "Added to cart" bevestiging — tijdelijke toast rechtsonder met
   overzicht van de zojuist toegevoegde pack + een paar reviews.
   =========================================================== */
.gp-atc-pop {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: min(80vh, 560px);
    overflow-y: auto;
    background: var(--gp-ink-3, #11142a);
    color: var(--gp-text, #f4f6ff);
    border: 1.5px solid var(--gp-cyan, #43e8d8);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(67,232,216,.15);
    padding: 16px 16px 14px;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
    -webkit-overflow-scrolling: touch;
}
.gp-atc-pop[hidden] { display: none; }
.gp-atc-pop.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.gp-atc-pop__close {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--gp-text, #fff);
    font-size: 13px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.gp-atc-pop__close:hover { background: var(--gp-led-red, #ff3040); color: #fff; }

.gp-atc-pop__head {
    display: flex; align-items: center; gap: 10px;
    padding-right: 26px;
}
.gp-atc-pop__check {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--gp-cyan, #43e8d8);
    color: var(--gp-ink-2, #0a0d1a);
    font-weight: 900; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(67,232,216,.7);
}
.gp-atc-pop__head-text { display: flex; flex-direction: column; min-width: 0; }
.gp-atc-pop__title {
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: 14px; letter-spacing: .04em;
    color: var(--gp-cyan, #43e8d8);
}
.gp-atc-pop__sub {
    font-size: 11px; color: rgba(255,255,255,.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gp-atc-pop__cart-head {
    display: block;
    margin-top: 12px;
    font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.gp-atc-pop__list {
    margin-top: 6px;
    max-height: 168px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 6px;
    background: rgba(0,0,0,.25);
    border-radius: 10px;
}
.gp-atc-pop__row {
    display: flex; align-items: center; gap: 10px;
}
.gp-atc-pop__thumb {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
}
.gp-atc-pop__thumb--ph { background: rgba(255,255,255,.06); }
.gp-atc-pop__name {
    font-weight: 600; font-size: 12.5px; line-height: 1.25;
    color: var(--gp-text, #fff);
}

.gp-atc-pop__totals {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
}
.gp-atc-pop__totals-label {
    color: rgba(255,255,255,.6);
    text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
}
.gp-atc-pop__total {
    font-family: var(--gp-font-numeric, ui-monospace), monospace;
    font-weight: 800; color: var(--gp-cyan, #43e8d8);
}
.gp-atc-pop__total .amount,
.gp-atc-pop__total bdi { color: var(--gp-cyan, #43e8d8); }

.gp-atc-pop__cta {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    text-align: center;
    text-decoration: none;
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: 13px; letter-spacing: .05em;
    color: var(--gp-ink-2, #0a0d1a);
    background: var(--gp-yellow, #ffcb05);
    border-radius: 9px;
    box-shadow: 0 0 14px rgba(255,203,5,.4);
    transition: filter .15s;
}
.gp-atc-pop__cta:hover { filter: brightness(1.08); }

.gp-atc-pop__reviews {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; gap: 10px;
}
.gp-atc-review { margin: 0; }
.gp-atc-review__stars {
    display: block;
    color: #ffcb05; font-size: 11px; letter-spacing: 1px;
}
.gp-atc-review__text {
    margin: 2px 0 2px;
    font-size: 11.5px; line-height: 1.4;
    color: rgba(255,255,255,.85);
    font-style: italic;
}
.gp-atc-review__author {
    font-size: 10.5px; color: rgba(255,255,255,.5);
    font-weight: 600;
}

@media (max-width: 600px) {
    .gp-atc-pop {
        right: 10px; left: 10px; bottom: 10px;
        width: auto;
        max-height: 70vh;
    }
}