/* ==========================================================================
   POPUPS2: one Sticker Glow layer for every popup on aneemate.com
   (round 2, 25 Oct 2026). Paper cards, ink outline, hard ink shadow, brand
   yellow and purple, LilitaOne, sunburst rays, brand clip path buttons (the
   .btn shape from brand.js), pop in motion. Mobile first: under 640px every
   modal is a bottom sheet with a grab handle (swipe down closes it, popups2.js).

   Loaded by assets/header.html after qskin.css and sticker.css, so it wins on
   equal specificity. Covers: the first visit logo pop, the $QORPO sheet, the
   pack promo, the persona question, the sticky $QORPO bar (pill on phones), the
   "Made for players" strip, the mobile drawer, the buy dialog with every state,
   the Ethereum and multi currency pickers, the wallet picker, the bundle
   checkout, the trailer modal, the share sheet, the cookie banner and toasts.
   Shared classes: .pp-card .pp-x .pp-k .pp-title .pp-grab .pp-toast
   ========================================================================== */

:root{
  --pp-ink:var(--sg-ink,#111015);--pp-paper:var(--sg-paper,#FFFDF6);--pp-cream:var(--sg-cream,#FFF4D6);
  --pp-y1:var(--sg-y1,#FED654);--pp-y2:var(--sg-y2,#F8A531);--pp-grad:linear-gradient(180deg,#FED654 0%,#F8A531 100%);
  --pp-purple:var(--sg-purple,#9146FF);--pp-muted:#4a4152;--pp-dim:#6d6577;
  --pp-ok:#2f9e44;--pp-bad:#d6336c;
  --pp-pop:4px 5px 0 var(--pp-ink);--pp-pop-card:8px 10px 0 var(--pp-ink);
  --pp-r:22px;--pp-r-tile:14px;
  --pp-disp:var(--sg-display,LilitaOne,"Lilita One","Arial Black",Impact,sans-serif);
  --pp-body:var(--sg-body,AneeBody,"Cabinet Grotesk","Segoe UI",Arial,sans-serif);
  --pp-spring:cubic-bezier(.34,1.56,.64,1);
  --pp-rays:repeating-conic-gradient(from 0deg at 50% 120%,rgba(255,255,255,.34) 0 7deg,rgba(255,255,255,0) 7deg 18deg);
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes ppIn{0%{opacity:0;transform:translateY(26px) scale(.86) rotate(-2deg)}60%{opacity:1;transform:translateY(-3px) scale(1.03) rotate(.6deg)}100%{opacity:1;transform:none}}
@keyframes ppUp{0%{transform:translateY(105%)}70%{transform:translateY(-6px)}100%{transform:none}}
@keyframes ppFade{from{opacity:0}to{opacity:1}}
@keyframes ppSpin{to{transform:rotate(360deg)}}
@keyframes ppWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes ppPulse{0%,100%{box-shadow:var(--pp-pop),0 0 0 0 rgba(254,214,84,.7)}50%{box-shadow:var(--pp-pop),0 0 0 8px rgba(254,214,84,0)}}

/* ── shared parts ───────────────────────────────────────────────────────── */
.pp-card{position:relative;background:var(--pp-paper);color:var(--pp-ink);border:4px solid var(--pp-ink);border-radius:var(--pp-r);box-shadow:var(--pp-pop-card);font-family:var(--pp-body);font-weight:500}
.pp-title{font-family:var(--pp-disp)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.01em!important;color:var(--pp-ink)!important;line-height:1.02!important}
.pp-k,.q-promo .q-k,.q-sheet .q-k,.q-in-ask .q-k{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 4px;border-radius:999px;background:var(--pp-purple);color:#fff!important;border:2px solid var(--pp-ink);box-shadow:2px 3px 0 var(--pp-ink);
  font:900 11px/1 var(--pp-body)!important;letter-spacing:.14em;text-transform:uppercase}
.pp-k .q-dot,.q-promo .q-k .q-dot,.q-in-ask .q-k .q-dot{width:7px;height:7px;border-radius:50%;background:var(--pp-y1);box-shadow:none}
/* the close button: paper disc, ink ring, hard shadow, turns yellow and spins a quarter on hover */
.pp-x,html body .q-x,html body .q-bar__x,html dialog.buydlg .x button,html dialog .wp-x,html dialog.pf-checkout form[method=dialog] .btn,html .a-modal__close{
  display:grid!important;place-items:center;width:40px!important;height:40px!important;min-width:40px;padding:0!important;border-radius:50%!important;
  background:var(--pp-paper)!important;color:var(--pp-ink)!important;border:3px solid var(--pp-ink)!important;box-shadow:3px 4px 0 var(--pp-ink)!important;
  font:400 24px/1 var(--pp-disp)!important;cursor:pointer;clip-path:none!important;-webkit-clip-path:none!important;
  transition:transform .25s var(--pp-spring),background .15s}
.pp-x:hover,html body .q-x:hover,html body .q-bar__x:hover,html dialog.buydlg .x button:hover,html dialog .wp-x:hover,html .a-modal__close:hover{background:var(--pp-y1)!important;transform:rotate(90deg) scale(1.05)}
.pp-x:active,html body .q-x:active{transform:scale(.92)}
/* grab handle on phone bottom sheets (added by popups2.js) */
.pp-grab{display:none}
@media (max-width:640px){
  .pp-grab{display:block;position:absolute;left:50%;top:8px;width:54px;height:6px;margin-left:-27px;border-radius:99px;background:var(--pp-ink);opacity:.85;z-index:5;touch-action:none}
  .pp-grab::before{content:"";position:absolute;inset:-14px -40px}
}
/* toasts */
.pp-toast,html body .h-toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:2100;transform:translateX(-50%);max-width:calc(100vw - 32px);
  padding:12px 18px;border-radius:16px;background:var(--pp-paper)!important;color:var(--pp-ink)!important;border:3px solid var(--pp-ink);box-shadow:var(--pp-pop)!important;
  font:800 14px/1.35 var(--pp-body)!important;animation:ppToast .45s var(--pp-spring) both}
@keyframes ppToast{from{opacity:0;transform:translate(-50%,24px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}

/* ── 1. first visit loader: moved to the one loader in header.html (round 3, inline styles .am-ld) ── */

/* ── 2. modal backdrops ─────────────────────────────────────────────────── */
html body .q-sheet.on,html body .q-share{background:rgba(17,16,21,.62)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html dialog.buydlg::backdrop,html dialog.wp-dlg::backdrop,html dialog.pf-checkout::backdrop,html dialog.a-modal::backdrop{
  background:radial-gradient(60% 50% at 50% 40%,rgba(254,214,84,.16),transparent 70%),rgba(17,16,21,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ── 3. the $QORPO sheet (sell.js .q-sheet) ─────────────────────────────── */
html body .q-sheet__in{width:min(540px,100%);padding:0 22px 22px;border-radius:var(--pp-r);background:var(--pp-paper);color:var(--pp-ink);border:4px solid var(--pp-ink);
  box-shadow:var(--pp-pop-card);font-family:var(--pp-body);overscroll-behavior:contain;scrollbar-width:thin}
html body .q-sheet.on .q-sheet__in{animation:ppIn .45s var(--pp-spring) both}
html body .q-sheet__top{position:relative;isolation:isolate;overflow:hidden;margin:0 -22px 0;padding:20px 64px 18px 20px;grid-template-columns:56px 1fr;
  background:var(--pp-rays),var(--pp-grad);background-size:200% 200%,auto;background-position:50% 0,0 0;border-bottom:4px solid var(--pp-ink)}
html body .q-sheet__top img{filter:drop-shadow(3px 4px 0 var(--pp-ink));animation:ppWiggle 2.4s ease-in-out 1s 2}
html body .q-sheet__top h3{margin:6px 0 0;font:400 clamp(24px,6vw,30px)/1 var(--pp-disp)!important;text-transform:uppercase!important;color:#fff;
  -webkit-text-stroke:5px var(--pp-ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--pp-ink);letter-spacing:.01em}
html body .q-sheet__px{grid-column:1/-1;display:flex;gap:10px;align-items:baseline;text-align:left}
html body .q-sheet__px b{display:inline;font:400 20px var(--pp-disp);color:var(--pp-ink)}
html body .q-chg{font:900 13px var(--pp-body)}html body .q-chg.up{color:#1f7a33}html body .q-chg.down{color:#b0174a}
html body .q-sheet .q-chg.up,html body .q-sheet .q-chg.down{padding:2px 8px;border-radius:99px;background:var(--pp-paper);border:2px solid var(--pp-ink)}
html body .q-sheet .q-x{top:14px;right:14px}
html body .q-burnline{margin:16px 0 0;padding:10px 12px;border-radius:var(--pp-r-tile);background:#fff0e3;border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);font-weight:700;color:var(--pp-ink)}
html body .q-burnline b{font-family:var(--pp-disp);font-weight:400;font-size:18px;color:#d9480f}
html body .q-sheet__why{color:var(--pp-muted)!important;font-weight:600}
html body .q-ex{gap:10px}
html body .q-ex a{background:#fff;color:var(--pp-ink);border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);border-radius:var(--pp-r-tile);min-height:56px;transition:transform .2s var(--pp-spring),box-shadow .2s}
html body .q-ex a:hover,html body .q-ex a:focus-visible{transform:translate(-2px,-3px) rotate(-.6deg);box-shadow:5px 7px 0 var(--pp-ink)}
html body .q-ex b{font:400 18px var(--pp-disp);text-transform:uppercase}html body .q-ex span{font:800 11.5px var(--pp-body);color:var(--pp-dim)}
html body .q-ex i{background:var(--pp-grad);color:var(--pp-ink);border:2px solid var(--pp-ink);font:400 14px var(--pp-disp);text-transform:uppercase;border-radius:10px}
html body .q-steps{color:var(--pp-muted)}html body .q-steps b{color:var(--pp-ink)}
html body .q-steps li::marker{font-family:var(--pp-disp);color:var(--pp-purple)}
html body .q-ca{background:var(--pp-cream);border:2px dashed var(--pp-ink)}
html body .q-ca span{font:800 11.5px var(--pp-body);color:var(--pp-dim)}
html body .q-ca button{color:var(--pp-ink);font:700 13px ui-monospace,Menlo,Consolas,monospace;min-height:40px}
html body .q-ca em{font:400 13px var(--pp-disp);text-transform:uppercase;padding:4px 10px;border-radius:9px;background:var(--pp-purple);color:#fff}
html body .q-work{margin-top:16px}
html body .q-work .q-k{margin-bottom:8px}
html body .q-work__g{display:grid;gap:8px}
@media (min-width:520px){html body .q-work__g{grid-template-columns:repeat(3,1fr)}}
html body .q-work__g a{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--pp-r-tile);background:#fff;border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);color:var(--pp-ink);text-decoration:none;transition:transform .2s var(--pp-spring)}
html body .q-work__g a:hover{transform:translateY(-3px) rotate(-.8deg)}
html body .q-work__g b{font:400 17px var(--pp-disp);text-transform:uppercase}html body .q-work__g span{font-size:12.5px;line-height:1.35;color:var(--pp-muted)}
html body .q-work__studio{font-size:13px;color:var(--pp-muted)}
html body .q-sheet__acts .btn{height:50px}
html body .q-fine{color:var(--pp-dim)}

/* ── 4. pack promo (sell.js .q-promo) and the persona question ─────────── */
html body .q-promo{left:16px;bottom:16px;width:min(380px,calc(100vw - 24px));opacity:0;transform:translateY(40px) scale(.9);transition:none}
html body .q-promo.on{opacity:1;transform:none;animation:ppIn .5s var(--pp-spring) both}
html body .q-promo__in{padding:0 18px 16px;border-radius:var(--pp-r);background:var(--pp-paper);color:var(--pp-ink);border:4px solid var(--pp-ink);box-shadow:var(--pp-pop-card);overflow:hidden}
html body .q-promo__in::before{content:"";position:absolute;inset:0 0 auto;height:132px;background:var(--pp-rays),var(--pp-grad);background-size:200% 200%,auto;background-position:50% 0,0 0;border-bottom:4px solid var(--pp-ink)}
html body .q-promo--play .q-promo__in::before,html body .q-promo--win .q-promo__in::before{background:var(--pp-rays),linear-gradient(180deg,#b98cff,#7a2ff0);background-size:200% 200%,auto}
html body .q-promo__art{height:150px;margin:-6px -18px 4px;align-items:flex-end;padding-bottom:8px}
html body .q-promo__art img{filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 4px 0 var(--pp-ink));height:124px}
html body .q-promo__art img:nth-child(1),html body .q-promo__art img:nth-child(3){height:100px}
html body .q-promo .q-k{position:relative;margin-top:6px}
html body .q-promo h3{font:400 23px/1.02 var(--pp-disp)!important;text-transform:uppercase!important;letter-spacing:.01em;color:var(--pp-ink);margin:10px 40px 6px 0}
html body .q-promo p{color:var(--pp-muted);font-weight:600;font-size:14px;margin-bottom:12px}
html body .q-promo .q-x{top:10px;right:10px}
html body .q-promo__acts .btn{height:48px;font-size:15px}
html body .q-promo__epic{color:var(--pp-ink);font-weight:800}
@media (max-width:640px){
  html body .q-promo{left:8px;right:8px;bottom:8px;width:auto}
  html body .q-promo__in{padding:0 14px 12px}
  html body .q-promo__in::before{height:96px}
  html body .q-promo__art{height:104px}html body .q-promo__art img{height:90px}html body .q-promo__art img:nth-child(1),html body .q-promo__art img:nth-child(3){height:72px}
  html body .q-promo h3{font-size:20px!important}html body .q-promo p{font-size:13px;margin-bottom:10px}
}

/* persona question: fun.js QIntro(true), docked like the promo, never covering the page */
html.q-in-on{overflow:auto!important}
html body .q-intro.again{inset:auto auto 16px 16px;width:min(420px,calc(100vw - 24px));display:block;padding:0;background:none!important;overflow:visible;z-index:995;transform:none;transition:opacity .3s}
html body .q-intro.again .q-in-glow,html body .q-intro.again .q-in-stage{display:none}
html body .q-intro.again .q-in-ask{opacity:1;transform:none;pointer-events:auto;width:auto;text-align:left;padding:18px 18px 12px;background:var(--pp-paper);color:var(--pp-ink);
  border:4px solid var(--pp-ink);border-radius:var(--pp-r);box-shadow:var(--pp-pop-card);animation:ppIn .5s var(--pp-spring) both;transition:none}
html body .q-intro.again .q-in-ask h2{font:400 24px/1.02 var(--pp-disp)!important;text-transform:uppercase;letter-spacing:.01em;color:var(--pp-ink);margin:10px 0 0;-webkit-text-fill-color:currentColor;background:none}
html body .q-intro.again .q-in-ask p{color:var(--pp-muted);font-size:14px;font-weight:600;margin:6px 0 12px}
html body .q-intro.again .q-in-who{gap:10px;max-width:none}
html body .q-intro.again .q-in-who button{background:#fff;color:var(--pp-ink);border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);border-radius:var(--pp-r-tile);padding:10px 8px;
  transition:transform .2s var(--pp-spring),background .15s}
html body .q-intro.again .q-in-who button[data-w=player]{background:linear-gradient(180deg,#fff7d6,#ffe9a6)}
html body .q-intro.again .q-in-who button[data-w=trader]{background:linear-gradient(180deg,#f3e9ff,#e0cbff)}
html body .q-intro.again .q-in-who button:hover,html body .q-intro.again .q-in-who button:focus-visible{transform:translateY(-4px) rotate(-1deg);box-shadow:4px 7px 0 var(--pp-ink)}
html body .q-intro.again .q-in-who img{height:72px;filter:drop-shadow(2px 3px 0 var(--pp-ink))}
html body .q-intro.again .q-in-who b{font:400 19px var(--pp-disp);text-transform:uppercase;color:var(--pp-ink)}
html body .q-intro.again .q-in-who span{color:var(--pp-muted);font-size:12.5px;font-weight:600}
html body .q-intro.again .q-in-who button.picked{background:var(--pp-grad);transform:scale(1.04)}
html body .q-intro.again .q-in-skip{color:var(--pp-ink);font-weight:800;text-decoration:underline;margin-top:8px}
html body .q-intro.again.out{opacity:0;pointer-events:none}
html body .q-intro.again .pp-x{position:absolute;top:10px;right:10px;z-index:3}
@media (max-width:640px){html body .q-intro.again{left:8px;right:8px;bottom:8px;width:auto}html body .q-intro.again .q-in-who img{height:56px}}

/* ── 5. the one sticky action bar: desktop pill here, the phone bar in cta3.css ── */
html body .q-bar{bottom:14px;width:auto;max-width:calc(100vw - 24px)}
html body .q-bar__in{gap:10px;padding:7px 7px 7px 10px;border-radius:999px;background:var(--pp-paper);border:3px solid var(--pp-ink);box-shadow:var(--pp-pop);backdrop-filter:none;color:var(--pp-ink)}
html body .q-bar__px{color:var(--pp-ink)}html body .q-bar__px img{filter:drop-shadow(2px 2px 0 var(--pp-ink))}
html body .q-bar__px b{font:900 11px var(--pp-body);letter-spacing:.12em}html body .q-bar__px em{font:400 17px var(--pp-disp)}
html body .q-bar .q-chg{padding:2px 7px;border-radius:99px;border:2px solid var(--pp-ink);background:#fff;font-size:11.5px}
html body .q-bar__burn{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12.5px;color:#d9480f;white-space:nowrap}
html body .q-bar__burn b{font:400 15px var(--pp-disp)}
html body .q-bar__acts .btn{height:40px;font-size:14px}
html body .q-bar__x{width:32px!important;height:32px!important;min-width:32px;font-size:18px!important;box-shadow:2px 3px 0 var(--pp-ink)!important}
html.drawer-open .q-bar,html.q-lock .q-bar{transform:translate(-50%,160%)!important}
/* phones and tablets: the slim three action bar lives in cta3.css (round 3) */

/* ── 6. "Made for players / holders" strip (fun.js .q-fy) ──────────────── */
html body .q-fy{padding:20px 0 8px}
html body .q-fy__in{background:var(--pp-paper);color:var(--pp-ink);border:4px solid var(--pp-ink);border-radius:var(--pp-r);box-shadow:var(--pp-pop-card);padding:14px;gap:14px}
html body .q-fy__who img{height:60px;filter:drop-shadow(2px 3px 0 var(--pp-ink))}
html body .q-fy__who small{display:inline-flex;padding:5px 10px 4px;border-radius:999px;background:var(--pp-purple);color:#fff;border:2px solid var(--pp-ink);font:900 11px var(--pp-body);letter-spacing:.14em;text-transform:uppercase}
html body .q-fy__chg{color:var(--pp-ink);font-weight:800;margin-top:4px;display:block;min-height:24px}
html body .q-fy__links{gap:10px}
html body .q-fy__links a{background:#fff;color:var(--pp-ink);border:3px solid var(--pp-ink);border-radius:var(--pp-r-tile);box-shadow:3px 4px 0 var(--pp-ink);min-height:56px;transition:transform .2s var(--pp-spring),box-shadow .2s}
html body .q-fy__links a:nth-child(1){background:var(--pp-grad)}
html body .q-fy__links a:hover,html body .q-fy__links a:focus-visible{transform:translate(-2px,-3px) rotate(-.8deg);box-shadow:5px 7px 0 var(--pp-ink);background-color:#fff}
html body .q-fy__links b{font:400 16px/1.05 var(--pp-disp);text-transform:uppercase;color:var(--pp-ink)}
html body .q-fy__links span{color:var(--pp-muted);font-weight:600}
html body .q-fy__links i{color:var(--pp-ink);font-style:normal;font-family:var(--pp-disp)}
@media (max-width:860px){html body .q-fy__in{grid-template-columns:1fr}html body .q-fy__links{grid-template-columns:1fr 1fr}}

/* ── 7. mobile drawer (header.html #drawer) ────────────────────────────── */
html body .drawer{background:var(--pp-paper)!important;color:var(--pp-ink);border-top:4px solid var(--pp-ink);overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom))}
html body .drawer::before{content:"";position:absolute;inset:0 0 auto;height:180px;z-index:-1;background:var(--pp-rays),var(--pp-grad);background-size:220% 220%,auto;background-position:50% 0,0 0;opacity:.9;pointer-events:none;
  -webkit-mask:linear-gradient(#000 40%,transparent);mask:linear-gradient(#000 40%,transparent)}
html body .drawer{isolation:isolate}
html body .drawer.in{animation:ppDrawer .38s var(--pp-spring) both}
@keyframes ppDrawer{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
html body .drawer-nav{gap:8px;padding-top:8px}
html body .drawer-nav a{color:var(--pp-ink)!important;background:#fff;border:3px solid var(--pp-ink)!important;border-radius:var(--pp-r-tile);box-shadow:3px 4px 0 var(--pp-ink);
  padding:10px 14px!important;font-size:clamp(20px,5.8vw,26px)!important;line-height:1.05;align-items:center;min-height:52px}
html body .drawer-nav a b{color:var(--pp-purple)!important;font:900 12px var(--pp-body)!important;min-width:28px}
html body .drawer-nav a[aria-current="page"]{background:var(--pp-grad)}
html body .drawer-nav a[aria-current="page"] b::before{background:var(--pp-ink)}
html body .drawer-nav a:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--pp-ink)}
html body .drawer-foot .btn{width:100%;height:54px}
html body .drawer-wallet{background:#fff!important;color:var(--pp-ink)!important;border:3px solid var(--pp-ink)!important;box-shadow:3px 4px 0 var(--pp-ink)!important;font:400 17px var(--pp-disp)!important;text-transform:uppercase}
html body .drawer-note{color:var(--pp-muted)!important;font-weight:600}
html body .drawer-social a{color:var(--pp-ink)!important;font-weight:800}
html body .burger{background:var(--pp-y1)!important;border:3px solid var(--pp-ink)!important;border-radius:14px!important;box-shadow:2px 3px 0 #000!important}
html body .burger span{background:var(--pp-ink)!important;left:9px;right:9px}
html body .burger span:nth-child(1){top:10px}html body .burger span:nth-child(2){top:17px}html body .burger span:nth-child(3){top:24px}
@media (prefers-reduced-motion:reduce){html body .drawer.in,html body .drawer.in .drawer-nav a{animation:none!important;opacity:1}}

/* ── 8. the buy dialog (buy.js dialog.buydlg) and its states ───────────── */
html dialog.buydlg{width:min(500px,calc(100vw - 24px));padding:0 0 20px;background:var(--pp-paper);color:var(--pp-ink);border:4px solid var(--pp-ink);border-radius:var(--pp-r);
  box-shadow:var(--pp-pop-card);font-family:var(--pp-body);overscroll-behavior:contain;overflow-x:hidden}
/* base layout, self contained (open.css with the old dialog rules is no longer loaded by /open) */
html dialog.buydlg{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 24px);overflow:auto}
html dialog.buydlg .x{position:absolute;z-index:3;margin:0}
html dialog.buydlg>.eyebrow{display:block}
html dialog.buydlg .qty{display:flex;flex-wrap:wrap;margin-bottom:14px}
html dialog.buydlg .qty:empty{display:none}
html dialog.buydlg .steps{list-style:none;padding:0;margin-top:0;margin-bottom:14px;counter-reset:s;display:grid}
html dialog.buydlg .steps li{counter-increment:s;position:relative;font-size:14px;border-radius:12px;line-height:1.3}
html dialog.buydlg .steps li::before{content:counter(s);position:absolute;left:12px;top:50%;border-radius:50%;text-align:center}
html dialog.buydlg .steps li.done::before{content:"✓"}
html dialog.buydlg .quote{display:grid;gap:6px;margin-top:6px;margin-bottom:12px}
html dialog.buydlg .quote:empty{display:none}
html dialog.buydlg .quote div{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-bottom:6px}
html dialog.buydlg .quote b{font-variant-numeric:tabular-nums}
html dialog.buydlg .msg{min-height:0;font-size:14px;line-height:1.45;margin-top:6px;margin-bottom:14px}
html dialog.buydlg .msg:empty{margin:0}
html dialog.buydlg .btnrow .btn{width:100%}
html dialog.buydlg .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
html dialog.buydlg .fine{font-size:12px;line-height:1.5;margin-top:14px;margin-bottom:0}
html dialog.buydlg[open]{animation:ppIn .45s var(--pp-spring) both}
html dialog.buydlg>.eyebrow{position:relative;padding:18px 64px 0 22px;background:var(--pp-rays),var(--pp-grad);background-size:220% 260%,auto;background-position:50% 0,0 0;color:var(--pp-ink)}
html dialog.buydlg>.eyebrow::before{content:attr(data-k);display:none}
html dialog.buydlg>.eyebrow{font:900 11px var(--pp-body);letter-spacing:.16em;text-transform:uppercase}
html dialog.buydlg h3{margin:0 0 16px;padding:4px 64px 16px 22px;background:var(--pp-grad);border-bottom:4px solid var(--pp-ink);color:#fff;
  font:400 clamp(26px,7vw,32px)/1 var(--pp-disp)!important;text-transform:uppercase;-webkit-text-stroke:5px var(--pp-ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--pp-ink)}
html dialog.buydlg>:not(.x):not(.eyebrow):not(h3){margin-left:20px;margin-right:20px}
html dialog.buydlg .x{top:14px;right:14px}
html dialog.buydlg .qty{gap:8px}
html dialog.buydlg .qty button{height:44px;padding:0 14px;border-radius:12px;background:#fff;color:var(--pp-ink);border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);
  font:400 16px var(--pp-disp);text-transform:uppercase;transition:transform .15s var(--pp-spring)}
html dialog.buydlg .qty button:hover{color:var(--pp-ink);transform:translateY(-2px)}
html dialog.buydlg .qty button[aria-pressed="true"]{background:var(--pp-grad);box-shadow:3px 4px 0 var(--pp-ink)}
html dialog.buydlg .steps{gap:6px}
html dialog.buydlg .steps li{color:var(--pp-dim);font-weight:700;border:2px solid transparent;padding:9px 12px 9px 48px}
html dialog.buydlg .steps li::before{width:26px;height:26px;margin-top:-13px;border:2px solid var(--pp-ink);box-shadow:none;background:#fff;color:var(--pp-ink);font:400 14px/22px var(--pp-disp)}
html dialog.buydlg .steps li.now{background:#fff;color:var(--pp-ink);border-color:var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink)}
html dialog.buydlg .steps li.now::before{background:var(--pp-y1);animation:ppPulse 1.6s ease-in-out infinite}
html dialog.buydlg .steps li.done{color:var(--pp-ink)}
html dialog.buydlg .steps li.done::before{background:#9cf58a;color:var(--pp-ink);border-color:var(--pp-ink)}
html dialog.buydlg .quote{padding:12px 14px;border-radius:var(--pp-r-tile);background:#fff;border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink)}
html dialog.buydlg .quote div{color:var(--pp-muted);border-bottom:2px dashed rgba(17,16,21,.16);font-weight:600}
html dialog.buydlg .quote div:last-child{border-bottom:0;padding-bottom:0}
html dialog.buydlg .quote b{color:var(--pp-ink)}
html dialog.buydlg .quote .burn,html dialog.buydlg .q-burnrow span,html dialog.buydlg .q-burnrow b{color:#d9480f!important}
html dialog.buydlg .q-burnrow{background:#fff0e3;margin:2px -8px;padding:8px}
html dialog.buydlg .quote .q-off b{color:var(--pp-purple)}
/* status line: pending (default), error (.bad), success (text after a receipt) */
html dialog.buydlg .msg{color:var(--pp-ink);font-weight:700;padding:0}
html dialog.buydlg .msg:not(:empty){padding:10px 12px 10px 38px;border-radius:12px;background:var(--pp-cream);border:2px solid var(--pp-ink);position:relative}
html dialog.buydlg .msg:not(:empty)::before{content:"";position:absolute;left:12px;top:12px;width:16px;height:16px;border-radius:50%;border:3px solid var(--pp-ink);border-right-color:transparent;animation:ppSpin .8s linear infinite}
html dialog.buydlg .msg.bad{color:#7a0f33;background:#ffe3ec}
html dialog.buydlg .msg.bad::before{animation:none;border-color:var(--pp-bad);border-radius:4px;transform:rotate(45deg);width:12px;height:12px;left:14px;top:14px;background:var(--pp-bad)}
html dialog.buydlg.pp-ok .msg{background:#e3fbdc}
html dialog.buydlg.pp-ok .msg::before,html dialog.buydlg.pp-idle .msg::before{animation:none;border:0;background:var(--pp-ok);content:"";width:14px;height:14px;top:13px}
html dialog.buydlg.pp-idle .msg::before{background:var(--pp-purple)}
html dialog.buydlg .btnrow .btn{height:56px;font-size:19px}
html dialog.buydlg .fine{color:var(--pp-dim)}
html dialog.buydlg .wp-bar{color:var(--pp-ink)}
@media (prefers-reduced-motion:reduce){html dialog.buydlg[open],html dialog.buydlg .steps li.now::before,html dialog.buydlg .msg::before{animation:none!important}}

/* ── 9. bundle checkout (commerce.js dialog.pf-checkout) ───────────────── */
html dialog.pf-checkout{width:min(480px,calc(100vw - 24px));padding:0;margin:auto;background:var(--pp-paper)!important;color:var(--pp-ink)!important;border:4px solid var(--pp-ink)!important;
  border-radius:var(--pp-r)!important;box-shadow:var(--pp-pop-card)!important;overflow:auto;max-height:calc(100dvh - 24px)}
html dialog.pf-checkout[open]{animation:ppIn .45s var(--pp-spring) both}
html dialog.pf-checkout form[method=dialog]{position:absolute;top:14px;right:14px;z-index:3}
html dialog.pf-checkout form[method=dialog] .btn{font-size:0!important}
html dialog.pf-checkout form[method=dialog] .btn::before{content:"×";font-size:24px}
html dialog.pf-checkout .a-panel__body{padding:0 20px 20px;display:grid;gap:10px}
html dialog.pf-checkout .a-label{display:block;margin:0 -20px;padding:18px 64px 0 20px;background:var(--pp-grad);color:var(--pp-ink)!important}
html dialog.pf-checkout .a-h3{margin:0 -20px 6px;padding:4px 64px 14px 20px;background:var(--pp-grad);border-bottom:4px solid var(--pp-ink);color:#fff!important;font-size:28px!important;-webkit-text-stroke:5px var(--pp-ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--pp-ink)}
html dialog.pf-checkout label{display:grid;gap:4px;font:900 11px var(--pp-body);letter-spacing:.12em;text-transform:uppercase;color:var(--pp-dim)}
html dialog.pf-checkout select{min-height:46px;border-radius:12px;background:#fff;color:var(--pp-ink);border:3px solid var(--pp-ink);font:700 15px var(--pp-body);padding:0 10px}
html dialog.pf-checkout #directStatus:not(:empty){padding:10px 12px;border-radius:12px;background:var(--pp-cream);border:2px solid var(--pp-ink);font-weight:700}
html dialog.pf-checkout .o-fine{color:var(--pp-dim)}
html dialog.pf-checkout .a-link{color:var(--pp-purple);font-weight:800}

/* ── 10. trailer and lightbox modals (arceus dialog.a-modal) ───────────── */
html dialog.a-modal[open]{animation:ppIn .45s var(--pp-spring) both}
html .a-modal__box{border:4px solid var(--pp-ink);border-radius:var(--pp-r);box-shadow:var(--pp-pop-card),0 0 0 3px var(--pp-y1);background:var(--pp-ink)}
html .a-modal__close{top:12px;right:12px}

/* ── 11. share sheet (dev.html .q-share, card share and ref links) ─────── */
html body .q-share__in{background:var(--pp-paper);color:var(--pp-ink);border:4px solid var(--pp-ink);border-radius:var(--pp-r);box-shadow:var(--pp-pop-card)}
html body .q-share.on .q-share__in{animation:ppIn .45s var(--pp-spring) both}
html body .q-share__pv{background:var(--pp-rays),var(--pp-grad);background-size:200% 200%,auto;border:3px solid var(--pp-ink);border-radius:var(--pp-r-tile)}
html body .q-share__pv canvas{border:3px solid var(--pp-ink);box-shadow:var(--pp-pop)}
html body .q-share__side h3{font:400 24px var(--pp-disp)!important;text-transform:uppercase!important;color:var(--pp-ink)}
html body .q-share__side p{color:var(--pp-muted);font-weight:600}
html body .q-share__lab{font:900 11px var(--pp-body);color:var(--pp-purple)}
html body .q-share__opt button{background:#fff;color:var(--pp-ink);border:3px solid var(--pp-ink);box-shadow:3px 4px 0 var(--pp-ink);min-height:46px;font-weight:800}
html body .q-share__opt button[aria-pressed="true"]{background:var(--pp-grad);box-shadow:3px 4px 0 var(--pp-ink)}
html body .q-share__opt small{color:var(--pp-dim);font:800 11px var(--pp-body)}
html body .q-share__ok{color:var(--pp-ok);font:800 12px var(--pp-body)}

/* ── 12. cookie banner (qtrack.js writes inline styles; these win with !important) ── */
html body>div[role="dialog"][aria-label="Cookies"]{left:12px!important;right:12px!important;bottom:12px!important;max-width:400px!important;background:var(--pp-paper)!important;color:var(--pp-ink)!important;
  border:4px solid var(--pp-ink)!important;border-radius:var(--pp-r)!important;box-shadow:var(--pp-pop-card)!important;padding:16px 16px 14px 74px!important;font:600 14px/1.45 var(--pp-body)!important;
  animation:ppIn .5s var(--pp-spring) both;z-index:2147483000!important}
html body>div[role="dialog"][aria-label="Cookies"]::before{content:"";position:absolute;left:14px;top:16px;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 30% 35%,#6b3d16 0 4px,transparent 5px),radial-gradient(circle at 65% 30%,#6b3d16 0 3px,transparent 4px),radial-gradient(circle at 55% 68%,#6b3d16 0 4px,transparent 5px),var(--pp-grad);
  border:3px solid var(--pp-ink);box-shadow:2px 3px 0 var(--pp-ink);animation:ppWiggle 2s ease-in-out .6s 2}
html body>div[role="dialog"][aria-label="Cookies"] a{color:var(--pp-purple)!important;font-weight:800}
html body>div[role="dialog"][aria-label="Cookies"] button{min-height:44px!important;padding:0 18px!important;border-radius:12px!important;border:3px solid var(--pp-ink)!important;
  font:400 16px var(--pp-disp)!important;text-transform:uppercase;cursor:pointer;box-shadow:3px 4px 0 var(--pp-ink)!important;color:var(--pp-ink)!important;transition:transform .15s var(--pp-spring)}
html body>div[role="dialog"][aria-label="Cookies"] button[data-c="no"]{background:#fff!important}
html body>div[role="dialog"][aria-label="Cookies"] button[data-c="yes"]{background:var(--pp-grad)!important}
html body>div[role="dialog"][aria-label="Cookies"] button:hover{transform:translateY(-2px) rotate(-1deg)}
@media (min-width:641px){html body>div[role="dialog"][aria-label="Cookies"]{left:16px!important;right:auto!important;bottom:16px!important}}

/* ── 13. phone bottom sheets: every modal docks to the bottom edge ─────── */
@media (max-width:640px){
  html body .q-sheet{align-items:flex-end;padding:0}
  html body .q-sheet__in{width:100%;max-height:92dvh;border-radius:var(--pp-r) var(--pp-r) 0 0;border-bottom:0;box-shadow:0 -6px 0 var(--pp-ink);padding-bottom:max(20px,env(safe-area-inset-bottom))}
  html body .q-sheet.on .q-sheet__in{animation:ppUp .42s var(--pp-spring) both}
  html body .q-sheet__top{padding-top:26px}
  html body .q-sheet__acts{grid-template-columns:1fr}
  html dialog.buydlg,html dialog.wp-dlg,html dialog.pf-checkout{width:100%!important;max-width:100%!important;margin:auto 0 0!important;inset:auto 0 0 0!important;max-height:92dvh!important;
    border-radius:var(--pp-r) var(--pp-r) 0 0!important;border-bottom:0!important;box-shadow:0 -6px 0 var(--pp-ink)!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
  html dialog.buydlg[open],html dialog.wp-dlg[open],html dialog.pf-checkout[open]{animation:ppUp .42s var(--pp-spring) both}
  html dialog.buydlg>.eyebrow{padding-top:26px}
  html body .q-share{align-items:flex-end;padding:0}
  html body .q-share__in{border-radius:var(--pp-r) var(--pp-r) 0 0;border-bottom:0;max-height:94dvh;padding-top:26px}
  html body .q-share.on .q-share__in{animation:ppUp .42s var(--pp-spring) both}
}
.pp-dragging{transition:none!important;animation:none!important}
.pp-closing{transition:transform .22s ease-in!important}

@media (prefers-reduced-motion:reduce){
  html body .q-sheet.on .q-sheet__in,html body .q-promo.on,html body .q-intro.again .q-in-ask,html dialog[open],html body .q-share.on .q-share__in,
  html body>div[role="dialog"][aria-label="Cookies"],html body>div[role="dialog"][aria-label="Cookies"]::before,.pp-toast,html body .h-toast,html body .q-sheet__top img{animation:none!important}
  .pp-x,html body .q-x{transition:none}
}
/* q-bar tuck on scroll: cta3.css */
html body .q-promo__acts .btn,html body .q-sheet__acts .btn,html body .q-bar__acts .btn{font-family:var(--pp-disp)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.02em}
/* the main action of the buy dialog stays in reach while its long content scrolls */
html dialog.buydlg .btnrow{position:sticky;bottom:-20px;z-index:2;margin-bottom:-20px;padding:12px 0 20px;background:linear-gradient(rgba(255,253,246,0),var(--pp-paper) 14px)}
html body dialog.pf-checkout p{color:var(--pp-muted)}
html body dialog.pf-checkout #directStatus{color:var(--pp-ink)}
html body .q-intro.again,html body .q-intro.again:focus,html body .q-intro.again:focus-visible{outline:none!important}
html body .q-intro.again .q-in-ask h2,html body .q-intro.again .q-in-who b{text-transform:uppercase!important;font-family:var(--pp-disp)!important;font-weight:400!important}
/* bug fix: qskin.css gives .q-sheet display:flex, which beat [hidden], so after the first close an
   invisible full screen layer kept eating every click on the page */
html body .q-sheet[hidden]{display:none!important}

/* coordinator 25 Oct: no sticky bar while a pack opens or the store is in view */
html.cx-open .q-bar,html.cx-room .q-bar{display:none!important}