/* ==========================================================================
   Studio theme layer — black / Geist / single accent colour.
   Loaded after output.css + custom.css so it wins over the old styling.
   ========================================================================== */

:root {
  --pm-bg: var(--dark-color-primary, #000);
  --pm-card: var(--dark-color-secondary, #141416);
  --pm-accent: var(--color-primary, #7ABABA);
  --pm-accent-2: var(--color-primary-hover, #A6D8D8);
  --pm-border: rgba(255, 255, 255, 0.08);
  --pm-border-strong: rgba(255, 255, 255, 0.16);
  --pm-text: #fafafa;
  --pm-muted: #a1a1aa;   /* zinc-400 */
  --pm-dim: #71717a;     /* zinc-500 */
  --pm-faint: #52525b;   /* zinc-600 */
  --pm-radius: 8px;
  --pm-max: 1152px;
}

html { scroll-behavior: smooth; }
body,
.font-poppins {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  background: var(--pm-bg) !important;
  color: var(--pm-text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pm-accent); color: #fff; }

.pm-container { width: 100%; max-width: var(--pm-max); margin: 0 auto; padding: 0 16px; }
.pm-container-wide { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .pm-container-wide { padding: 0 32px; } }

.pm-section { padding: 96px 0; position: relative; }
@media (min-width: 768px) { .pm-section { padding: 112px 0; } }

/* ---------- Typography ---------- */
.pm-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pm-accent); margin: 0 0 12px;
}
.pm-h2 {
  font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: #fff; margin: 0;
}
@media (min-width: 768px) { .pm-h2 { font-size: 36px; } }
.pm-lead { color: var(--pm-muted); line-height: 1.65; }
.pm-center { text-align: center; }
.pm-head { margin-bottom: 40px; }
.pm-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }

/* ---------- Buttons ---------- */
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 6px; font-size: 15px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: all .2s ease; text-decoration: none; border: 1px solid transparent;
}
.pm-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.pm-btn:hover svg { transform: translateX(3px); }
.pm-btn-light { background: #fff; color: #000; }
.pm-btn-light:hover { background: #e4e4e7; }
.pm-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.15); }
.pm-btn-ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); }
.pm-btn-accent { background: var(--pm-accent); color: #fff; }
.pm-btn-accent:hover { filter: brightness(1.12); }
.pm-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pm-muted); transition: color .2s; }
.pm-link:hover { color: #fff; }
.pm-link svg { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.pm-header {
  position: sticky; top: 0; z-index: 60; padding: 14px 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pm-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pm-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-brand img { height: 40px; width: 40px; object-fit: contain; }
.pm-brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: #fff; line-height: 1.1; }
.pm-brand-sub { font-size: 11px; color: var(--pm-dim); text-transform: lowercase; }
.pm-left { display: flex; align-items: center; gap: 32px; min-width: 0; }
.pm-nav { display: none; align-items: center; gap: 24px; }
@media (min-width: 1024px) { .pm-nav { display: flex; } }
.pm-nav-item { position: relative; }
.pm-nav a, .pm-nav .pm-nav-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: var(--pm-muted); white-space: nowrap; transition: color .2s;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.pm-nav a:hover, .pm-nav .pm-nav-toggle:hover, .pm-nav .is-active { color: #fff; }
.pm-nav-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.pm-dropdown {
  position: absolute; top: calc(100% + 14px); left: -12px; min-width: 210px; padding: 6px;
  background: #0a0a0b; border: 1px solid var(--pm-border); border-radius: var(--pm-radius);
  box-shadow: 0 20px 40px rgba(0,0,0,.5); z-index: 70;
}
.pm-dropdown a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--pm-muted); font-size: 14px; }
.pm-dropdown a:hover, .pm-dropdown a.is-active { background: rgba(255,255,255,.05); color: #fff; }

.pm-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pm-radius); border: 1px solid var(--pm-border); background: rgba(255,255,255,.03);
  color: var(--pm-muted); transition: all .2s; cursor: pointer; position: relative;
}
.pm-icon-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.pm-icon-btn svg { width: 18px; height: 18px; }
.pm-icon-btn.pm-discord { color: #5865f2; border-color: rgba(88,101,242,.2); background: rgba(88,101,242,.05); }
.pm-icon-btn.pm-discord:hover { background: rgba(88,101,242,.15); }
.pm-icon-btn.pm-cart { color: var(--pm-accent); }
.pm-sep { width: 1px; height: 20px; background: rgba(255,255,255,.06); margin: 0 2px; }
.pm-currency-btn { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; gap: 6px; }
.pm-currency-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 220px; padding: 6px; z-index: 80;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: #0a0a0b; border: 1px solid var(--pm-border); border-radius: var(--pm-radius);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.pm-currency-menu.hidden { display: none; }
.pm-currency-menu a { text-align: center; padding: 8px 0; border-radius: 6px; font-size: 13px; color: var(--pm-muted); }
.pm-currency-menu a:hover, .pm-currency-menu a.is-active { background: rgba(255,255,255,.06); color: #fff; }
.pm-user { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; width: auto; }
.pm-user img { width: 30px; height: 30px; border-radius: 6px; }
.pm-user span { font-size: 13px; color: #e4e4e7; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); padding: 6px; min-width: 160px; z-index: 80;
  background: #0a0a0b; border: 1px solid var(--pm-border); border-radius: var(--pm-radius);
  opacity: 0; visibility: hidden; transition: all .15s;
}
.pm-user.open .pm-user-menu { opacity: 1; visibility: visible; }
.pm-user-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; color: #f87171; font-size: 14px; }
.pm-user-menu a:hover { background: rgba(248,113,113,.1); }
.pm-login {
  height: 40px; padding: 0 18px; border-radius: var(--pm-radius); background: #fff; color: #000;
  font-weight: 600; font-size: 14px; border: 0; cursor: pointer; transition: background .2s;
}
.pm-login:hover { background: #e4e4e7; }
.pm-hide-mobile { display: none !important; }
@media (min-width: 1024px) { .pm-hide-mobile { display: inline-flex !important; } .pm-hide-desktop { display: none !important; } }

.pm-mobile-menu { border-top: 1px solid rgba(255,255,255,.05); margin-top: 14px; padding-top: 12px; }
.pm-mobile-menu.hidden { display: none; }
.pm-mobile-menu a, .pm-mobile-menu button.pm-m-link {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  padding: 11px 4px; color: var(--pm-muted); font-size: 15px; font-weight: 500; background: none; border: 0; text-align: left; cursor: pointer;
}
.pm-mobile-menu a:hover, .pm-mobile-menu a.is-active { color: #fff; }
.pm-mobile-sub { padding-left: 14px; border-left: 1px solid var(--pm-border); margin-left: 4px; }
.pm-mobile-sub.hidden { display: none; }
.pm-mobile-currencies { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px 0; }
.pm-mobile-currencies a { justify-content: center; padding: 8px 0; border: 1px solid var(--pm-border); border-radius: 6px; font-size: 12px; }

/* ---------- Hero ---------- */
.pm-hero {
  position: relative; min-height: max(640px, calc(100vh - 69px - var(--pm-promo-h, 0px))); min-height: max(640px, calc(100svh - 69px - var(--pm-promo-h, 0px))); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 80px 16px 120px; overflow: hidden; text-align: center;
}
.pm-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 100px, #000 55%, transparent 92%);
          mask-image: linear-gradient(to bottom, transparent, #000 100px, #000 55%, transparent 92%); }
.pm-hero-pan { position: absolute; inset: 0; display: flex; width: max-content; height: 100%; opacity: .14; animation: pm-pan 80s linear infinite alternate; }
.pm-hero-pan img {
  height: 100%; width: auto; max-width: none; flex-shrink: 0; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.pm-hero-pan img + img { margin-left: -30px; }
@keyframes pm-pan { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
.pm-hero-glow {
  position: absolute; top: 33%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 600px; border-radius: 50%; filter: blur(120px); opacity: .18;
  background: var(--pm-accent); pointer-events: none;
}
.pm-hero-content { position: relative; z-index: 2; max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.pm-hero .pm-eyebrow { letter-spacing: 0.3em; margin-bottom: 24px; }
.pm-hero h1 {
  font-family: "Russo One", var(--pm-font, "Geist"), sans-serif; font-size: 40px; font-weight: 400; letter-spacing: .01em; line-height: 1; color: #fff;
  margin: 0 0 32px; text-transform: uppercase;
}
@media (min-width: 768px) { .pm-hero h1 { font-size: 64px; } }
@media (min-width: 1024px) { .pm-hero h1 { font-size: 88px; } }
.pm-hero-sub { font-size: 18px; color: var(--pm-muted); max-width: 672px; line-height: 1.65; margin: 0 0 48px; }
@media (min-width: 768px) { .pm-hero-sub { font-size: 20px; } }
.pm-hero-ctas { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 448px; }
.pm-hero-ctas .pm-btn { flex: none; }
@media (min-width: 640px) { .pm-hero-ctas { flex-direction: row; } .pm-hero-ctas .pm-btn { flex: 1; } }
.pm-trust { margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; font-size: 14px; color: var(--pm-dim); }
.pm-trust span { display: inline-flex; align-items: center; gap: 8px; }
.pm-trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.pm-scroll { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); width: 24px; height: 40px; border: 2px solid #27272a; border-radius: 999px; display: flex; justify-content: center; z-index: 2; }
.pm-scroll::after { content: ""; width: 4px; height: 8px; border-radius: 999px; background: #52525b; margin-top: 8px; animation: pm-bounce 1.2s infinite; }
@keyframes pm-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- Package cards ---------- */
.pm-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .pm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pm-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pm-grid-tight { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .pm-grid-tight { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.pm-card {
  position: relative; display: flex; flex-direction: column; width: 100% !important; overflow: hidden;
  border-radius: var(--pm-radius); background: var(--pm-card); border: 1px solid var(--pm-border);
  transition: border-color .25s, transform .25s; color: #fff; text-decoration: none;
}
.pm-card:hover { border-color: var(--pm-border-strong); }
.pm-card-media { position: relative; width: 100%; height: 272px; overflow: hidden; }
@media (min-width: 640px) { .pm-card-media { height: 304px; } }
.pm-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pm-card:hover .pm-card-media img { transform: scale(1.03); }
.pm-card-body {
  position: relative; z-index: 2; margin-top: -48px; padding: 12px 16px 16px; display: flex; flex-direction: column; flex-grow: 1;
  background: color-mix(in srgb, var(--pm-card) 80%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid var(--pm-border);
}
.pm-card .package-name {
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; width: auto;
}
.pm-card:hover .package-name { color: var(--pm-accent); }
.pm-card .package-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; margin-bottom: 12px; }
/* tags/tops are injected by main.js with old utility classes — normalise them */
.pm-card .package-tags > span,
.package-page-tags > span {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--pm-dim) !important; font-size: 10px !important; text-transform: uppercase !important;
  letter-spacing: .08em !important; padding: 2px 8px !important; border-radius: 6px !important; font-weight: 500 !important;
}
.pm-card .package-tops { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.pm-card .package-tops > span,
.package-page-tops > span {
  background: var(--pm-accent) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px !important; border-radius: 6px !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pm-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pm-price { display: flex; flex-direction: column; line-height: 1.1; }
.pm-price-now { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.pm-price-old { font-size: 12px; color: var(--pm-faint); text-decoration: line-through; }
.pm-price-row { display: flex; align-items: center; gap: 8px; }
.pm-badge-off { font-size: 10px; font-weight: 700; color: #fff; background: var(--pm-accent); padding: 2px 6px; border-radius: 4px; }
.pm-card .pm-cart-btn {
  height: 38px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all .2s; border: 1px solid transparent;
}
.pm-card .pm-cart-btn svg { width: 16px; height: 16px; }
.pm-card .package-add-to-cart { background: #fff; color: #000; }
.pm-card .package-add-to-cart:hover { background: var(--pm-accent); color: #fff; }
.pm-card .package-remove { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.2); }
.pm-card .package-remove:hover { background: rgba(239,68,68,.2); }
/* compact variant used on the homepage grid */
.pm-compact .pm-card-media { height: auto; aspect-ratio: 16 / 9; }
.pm-compact .pm-card-body { margin-top: 0; padding: 12px 16px; background: var(--pm-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.pm-compact .package-name { font-size: 14px; font-weight: 500; margin: 0; }
.pm-compact .package-tags, .pm-compact .pm-cart-btn, .pm-compact .pm-price-old, .pm-compact .pm-badge-off { display: none !important; }
.pm-compact .pm-card-foot { margin: 0; flex-shrink: 0; }
.pm-compact .pm-price-now { font-size: 14px; font-weight: 400; color: var(--pm-dim); }
.pm-compact .package-tops > span { font-size: 9px !important; }
/* the old featured "fire" effect does not fit this look */
.pm-card .fire { display: none !important; }

/* ---------- Flagship / showcase ---------- */
.pm-flagship { position: relative; isolation: isolate; overflow: hidden; }
.pm-flagship-bg { position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 128px, #000 calc(100% - 128px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 128px, #000 calc(100% - 128px), transparent); }
.pm-flagship-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.12) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.12) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%); }
.pm-flagship-inner { padding: 112px 0; }
@media (min-width: 768px) { .pm-flagship-inner { padding: 144px 0; } }
.pm-flagship h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; max-width: 576px; }
@media (min-width: 768px) { .pm-flagship h2 { font-size: 48px; } }
.pm-flagship p.pm-copy { margin: 20px 0 0; font-size: 16px; color: #d4d4d8; line-height: 1.65; max-width: 512px; }
@media (min-width: 768px) { .pm-flagship p.pm-copy { font-size: 18px; } }
.pm-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.pm-live {
  position: relative; overflow: hidden; border-radius: var(--pm-radius);
  border: 1px solid color-mix(in srgb, var(--pm-accent) 20%, transparent); background: #050505;
}
.pm-live-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .4; }
.pm-live::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, #000, rgba(0,0,0,.8), transparent); }
.pm-live-inner { position: relative; z-index: 2; padding: 32px; max-width: 672px; }
@media (min-width: 768px) { .pm-live-inner { padding: 64px; } }
@media (min-width: 1024px) { .pm-live-inner { padding: 80px; } }
.pm-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; margin-bottom: 24px;
  background: color-mix(in srgb, var(--pm-accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--pm-accent) 30%, transparent);
  color: var(--pm-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pm-ping { position: relative; display: flex; width: 8px; height: 8px; }
.pm-ping::before, .pm-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pm-accent); }
.pm-ping::before { animation: pm-ping 1.2s cubic-bezier(0,0,.2,1) infinite; opacity: .75; }
@keyframes pm-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.pm-live h2 { font-size: 36px; font-weight: 900; line-height: 1; letter-spacing: -0.025em; margin: 0 0 24px; text-transform: uppercase; }
@media (min-width: 768px) { .pm-live h2 { font-size: 60px; } }
.pm-gradient-text { background: linear-gradient(to right, var(--pm-accent), var(--pm-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-live p { color: #9ca3af; font-size: 18px; line-height: 1.65; margin: 0 0 32px; max-width: 512px; }

/* ---------- About / studio ---------- */
.pm-about { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .pm-about { grid-template-columns: 1fr 1fr; gap: 80px; } }
.pm-about .pm-h2 { margin-bottom: 24px; }
.pm-about-copy p { color: var(--pm-muted); line-height: 1.65; margin: 0 0 16px; }
.pm-stats { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 40px; }
.pm-stat-num { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 768px) { .pm-stat-num { font-size: 36px; } }
.pm-stat-num .pm-plus { color: var(--pm-accent); }
.pm-stat-label { font-size: 12px; color: var(--pm-dim); margin-top: 4px; }
.pm-features { display: flex; flex-direction: column; gap: 12px; }
.pm-feature { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: var(--pm-radius); background: var(--pm-card); border: 1px solid var(--pm-border); }
.pm-feature-icon {
  width: 40px; height: 40px; border-radius: var(--pm-radius); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pm-accent) 10%, transparent); color: var(--pm-accent); font-size: 16px;
}
.pm-feature h3 { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.pm-feature p { font-size: 14px; color: var(--pm-dim); line-height: 1.6; margin: 0; }

/* ---------- Reviews ---------- */
.pm-reviews { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1024px; margin: 0 auto; }
@media (min-width: 768px) { .pm-reviews { grid-template-columns: repeat(3, 1fr); } }
.pm-review { background: var(--pm-card); padding: 24px; border-radius: var(--pm-radius); border: 1px solid var(--pm-border); display: flex; flex-direction: column; }
.pm-stars { display: flex; gap: 2px; margin-bottom: 16px; color: var(--pm-accent); font-size: 14px; }
.pm-stars .off { color: #27272a; }
.pm-review p { color: var(--pm-muted); font-size: 14px; line-height: 1.65; margin: 0 0 20px; flex-grow: 1; }
.pm-reviewer { display: flex; align-items: center; gap: 10px; }
.pm-avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pm-accent) 10%, transparent); color: var(--pm-accent); font-size: 11px; font-weight: 600;
}
.pm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pm-reviewer-name { font-size: 12px; font-weight: 500; color: #d4d4d8; line-height: 1.2; }
.pm-reviewer-role { font-size: 11px; color: var(--pm-faint); }

/* ---------- FAQ ---------- */
.pm-faq { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pm-faq-item { border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); border-radius: var(--pm-radius); padding: 0 20px; transition: border-color .2s; }
.pm-faq-item.open { border-color: rgba(255,255,255,.14); }
.pm-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; background: none; border: 0; color: #fff; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; font-family: inherit; }
.pm-faq-q svg { width: 16px; height: 16px; color: var(--pm-dim); flex-shrink: 0; transition: transform .2s; }
.pm-faq-item.open .pm-faq-q svg { transform: rotate(180deg); }
.pm-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.pm-faq-item.open .pm-faq-a { grid-template-rows: 1fr; }
.pm-faq-a > div { overflow: hidden; }
.pm-faq-a p { margin: 0; padding: 0 0 16px; color: var(--pm-muted); font-size: 14px; line-height: 1.65; }

/* ---------- Category / store page ---------- */
.pm-store { padding: 32px 0 96px; }
.pm-store-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
@media (min-width: 768px) { .pm-store-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.pm-store-head h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
@media (min-width: 768px) { .pm-store-head h1 { font-size: 40px; } }
.pm-store-desc { color: var(--pm-muted); margin-top: 8px; max-width: 640px; line-height: 1.6; }
.pm-store-desc:empty { display: none; }
.pm-tools { display: flex; gap: 10px; width: 100%; }
@media (min-width: 768px) { .pm-tools { width: auto; } }
.pm-search { position: relative; flex: 1; }
@media (min-width: 768px) { .pm-search { width: 360px; flex: none; } }
.pm-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--pm-dim); pointer-events: none; }
.pm-search input {
  width: 100%; height: 48px; padding: 0 16px 0 42px; border-radius: var(--pm-radius); font-size: 14px; font-family: inherit;
  background: #09090b; border: 1px solid rgba(255,255,255,.06); color: #fff; outline: none; transition: border-color .2s;
}
.pm-search input::placeholder { color: var(--pm-faint); }
.pm-search input:focus { border-color: rgba(255,255,255,.2); }
.pm-filter { position: relative; }
.pm-filter > button {
  height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pm-radius);
  background: #09090b; border: 1px solid rgba(255,255,255,.06); color: #d4d4d8; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.pm-filter > button svg { width: 16px; height: 16px; }
.pm-filter > button:hover { border-color: rgba(255,255,255,.14); }
.pm-filter ul {
  position: absolute; right: 0; top: calc(100% + 8px); width: 220px; max-height: 320px; overflow-y: auto; z-index: 50;
  list-style: none; margin: 0; padding: 6px; background: #0a0a0b; border: 1px solid var(--pm-border); border-radius: var(--pm-radius);
}
.pm-filter ul.hidden { display: none; }
.pm-filter .tag-option { display: block; padding: 8px 12px; border-radius: 6px; color: var(--pm-muted) !important; font-size: 14px; font-weight: 500 !important; background: none !important; }
.pm-filter .tag-option:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
.pm-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin-bottom: 24px; border-radius: var(--pm-radius); border: 1px solid var(--pm-border); background: var(--pm-card); }
.pm-tabs a { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--pm-dim); transition: all .2s; }
.pm-tabs a:hover { color: #d4d4d8; }
.pm-tabs a.is-active { background: rgba(255,255,255,.08); color: #fff; }
.pm-empty { color: var(--pm-dim); padding: 64px 0; text-align: center; grid-column: 1 / -1; }

/* ---------- Footer ---------- */
.pm-footer { border-top: 1px solid rgba(255,255,255,.05); padding: 64px 0 32px; margin-top: 32px; }
.pm-footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 64px; }
@media (min-width: 768px) { .pm-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.pm-footer h3 { font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 24px; }
.pm-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pm-footer ul a, .pm-footer-text { color: var(--pm-dim); transition: color .2s; line-height: 1.6; }
.pm-footer ul a:hover { color: var(--pm-accent); }
.pm-socials { display: flex; gap: 16px; margin-top: 24px; }
.pm-socials a { color: #9ca3af; font-size: 18px; transition: color .2s; }
.pm-socials a:hover { color: #fff; }
.pm-discord-btn { display: inline-block; margin-top: 16px; padding: 12px 24px; border-radius: 6px; background: #5865f2; color: #fff; font-weight: 600; transition: background .2s; }
.pm-discord-btn:hover { background: #4752c4; }
.pm-footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding-top: 32px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: space-between; color: var(--pm-faint); font-size: 14px; text-align: center; }
@media (min-width: 768px) { .pm-footer-bottom { flex-direction: row; text-align: left; } }
.pm-footer-bottom img { height: 28px; opacity: .7; }

.coupon-strip { font-family: inherit !important; }

.pm-dropdown.hidden, .pm-currency-menu.hidden, .pm-mobile-currencies.hidden { display: none !important; }
.pm-avatar { position: relative; }
.pm-avatar img { position: absolute; inset: 0; }
/* Section wrapper that main.js used to inject is no longer used */
.hot-packages { display: contents; }
.package-page-tops { position: static !important; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start !important; margin-bottom: 10px; }
.package-page-name { padding-right: 0 !important; letter-spacing: -0.02em; }

/* ==========================================================================
   Product page
   ========================================================================== */
.pm-product { padding: 24px 0 32px; }
.pm-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pm-dim); margin-bottom: 20px; transition: color .2s; }
.pm-back:hover { color: #fff; }
.pm-back svg { width: 16px; height: 16px; }
.pm-product-grid { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) { .pm-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.pm-product-left, .pm-product-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1024px) { .pm-product-left { position: sticky; top: 88px; } }

.pm-gallery { display: flex; flex-direction: column; gap: 10px; }
.pm-gallery-main { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #09090b; border: 1px solid #27272a; overflow: hidden; }
.pm-gallery-main .swiper, .pm-gallery-main .swiper-wrapper, .pm-gallery-main .swiper-slide { width: 100%; height: 100%; }
.pm-gallery-main .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pm-video, .pm-video iframe { width: 100%; height: 100%; background: #000; border: 0; }
.pm-gallery .swiper-button-next, .pm-gallery .swiper-button-prev {
  width: 36px !important; height: 36px !important; border-radius: 0 !important; background: rgba(0,0,0,.7) !important;
  color: #fff !important; opacity: 0; transition: opacity .2s, background .2s;
}
.pm-gallery-main:hover .swiper-button-next, .pm-gallery-main:hover .swiper-button-prev { opacity: 1; }
.pm-gallery .swiper-button-next:hover, .pm-gallery .swiper-button-prev:hover { background: #000 !important; }
.pm-gallery .swiper-button-next:after, .pm-gallery .swiper-button-prev:after { font-size: 14px !important; font-weight: 700; }
@media (hover: none) { .pm-gallery .swiper-button-next, .pm-gallery .swiper-button-prev { opacity: 1; } }
.pm-gallery-thumbs[hidden] { display: none; }
.pm-gallery-thumbs .swiper-slide {
  position: relative; aspect-ratio: 16 / 10; height: auto; cursor: pointer; overflow: hidden;
  border: 2px solid #3f3f46 !important; border-radius: 0 !important; opacity: .7 !important; transition: border-color .2s, opacity .2s;
}
.pm-gallery-thumbs .swiper-slide:hover { border-color: #71717a !important; opacity: 1 !important; }
.pm-gallery-thumbs .swiper-slide-thumb-active { border-color: var(--pm-accent) !important; opacity: 1 !important; }
.pm-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pm-thumb-video span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); color: #fff; }
.pm-thumb-video svg { width: 20px; height: 20px; }

.pm-box { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: var(--pm-radius); padding: 16px; }
@media (min-width: 768px) { .pm-box { padding: 20px; } }
.pm-box-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--pm-dim); margin: 0 0 12px; }
.pm-box-title svg { width: 14px; height: 14px; }
.pm-box-text { color: var(--pm-muted); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }

.pm-buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pm-buy-now { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .pm-buy-now { font-size: 30px; } }
.pm-buy-old { font-size: 15px; color: var(--pm-faint); text-decoration: line-through; }
.pm-buy-note { font-size: 12px; color: var(--pm-faint); margin: 4px 0 16px; }
.pm-buy-actions { display: flex; gap: 8px; }
.pm-buy-main { flex: 1; }
.pm-btn-danger { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.25); }
.pm-btn-danger:hover { background: rgba(239,68,68,.2); }
.pm-btn-danger svg, .pm-btn-danger img { width: 16px; height: 16px; }
.pm-square-btn {
  width: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--pm-radius); border: 1px solid var(--pm-border); background: rgba(255,255,255,.04); color: var(--pm-dim); transition: all .2s;
}
.pm-square-btn:hover { color: #fbbf24; border-color: rgba(245,158,11,.4); }
.pm-square-btn svg { width: 18px; height: 18px; }
.pm-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.pm-pay img { width: 42px; height: 28px; object-fit: cover; border-radius: 4px; opacity: .85; }
.pm-pay span { font-size: 11px; font-weight: 600; color: var(--pm-dim); padding: 0 6px; }

.pm-product-title { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: #fff; margin: 0; line-height: 1.2; }
@media (min-width: 640px) { .pm-product-title { font-size: 26px; } }
@media (min-width: 768px) { .pm-product-title { font-size: 30px; } }
.pm-product-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-product-tags:empty { display: none; }
.package-page-tags > span {
  font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important;
  color: var(--pm-muted) !important; padding: 4px 12px !important;
}
.package-page-tops:empty { display: none; }
.pm-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #d4d4d8; transition: all .2s;
}
.pm-chip:hover { background: rgba(255,255,255,.08); color: #fff; }
.pm-chip svg { width: 16px; height: 16px; }
.pm-btn-discord { background: #5865f2; color: #fff; }
.pm-btn-discord:hover { background: #4752c4; }
.pm-help { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .pm-help { flex-direction: row; align-items: center; justify-content: space-between; } }
.pm-help-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px; }

/* Rich text from the Tebex editor */
.pm-prose { color: #d4d4d8; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.pm-prose > :first-child { margin-top: 0 !important; }
.pm-prose > :last-child { margin-bottom: 0 !important; }
.pm-prose p { margin: 0 0 12px; }
.pm-prose h1, .pm-prose h2, .pm-prose h3, .pm-prose h4 { color: #fff; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 20px 0 10px; }
.pm-prose h1 { font-size: 22px; } .pm-prose h2 { font-size: 19px; } .pm-prose h3 { font-size: 16px; } .pm-prose h4 { font-size: 15px; }
.pm-prose ul, .pm-prose ol { margin: 0 0 12px; padding-left: 20px; }
.pm-prose ul { list-style: none; padding-left: 0; }
.pm-prose ul > li { position: relative; padding-left: 22px; margin: 6px 0; }
.pm-prose ul > li::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 6px;
  border-left: 2px solid var(--pm-accent); border-bottom: 2px solid var(--pm-accent); transform: rotate(-45deg);
}
.pm-prose ol { list-style: decimal; } .pm-prose ol > li { margin: 6px 0; }
.pm-prose li > p { margin: 0; }
.pm-prose strong, .pm-prose b { color: #fff; font-weight: 600; }
.pm-prose em { color: #e4e4e7; }
.pm-prose a { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 2px; }
.pm-prose hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 20px 0; }
.pm-prose img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; cursor: zoom-in; }
.pm-prose iframe { max-width: 100%; border-radius: 6px; }
.pm-prose table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.pm-prose th, .pm-prose td { border: 1px solid rgba(255,255,255,.08); padding: 8px 10px; text-align: left; }
.pm-prose th { background: rgba(255,255,255,.04); color: #fff; }
.pm-prose code { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.pm-prose blockquote { margin: 12px 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--pm-accent); color: var(--pm-muted); }
.pm-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .pm-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Overlays, modals, lightbox
   ========================================================================== */
.pm-overlay { z-index: 10000 !important; background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 16px; transition: opacity .3s; }
.pm-overlay-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer; }
.pm-overlay-close:hover { color: #fff; }
.pm-overlay-close svg { width: 28px; height: 28px; }
.pm-lightbox-img { max-width: 100%; max-height: 90vh; object-fit: contain; transition: transform .3s; }
.pm-modal {
  width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; text-align: left;
  background: #0a0a0b; border: 1px solid var(--pm-border); border-radius: var(--pm-radius);
  padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.6); transition: transform .3s;
}
@media (min-width: 640px) { .pm-modal { padding: 28px; } }
.pm-modal-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); }
.pm-modal-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px; }
.pm-modal-text { font-size: 14px; color: var(--pm-muted); line-height: 1.6; margin: 0 0 20px; }
.pm-modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.pm-modal-actions > * { flex: 1; }
.pm-modal-actions-wrap { flex-wrap: wrap; }
.pm-modal-actions-wrap .login-with-button { flex: 1 1 60%; }
.pm-modal-actions-wrap .fivem-cancel { flex: 1 1 30%; }
.pm-modal-actions-wrap form { flex: 1 1 100%; }
.pm-auth { text-align: center; }
.pm-auth .pm-modal-actions { justify-content: center; }
.pm-auth-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.pm-auth-logo img { height: 40px; width: auto; object-fit: contain; }
.pm-auth-page { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.pm-auth-page .pm-modal-center { position: static; transform: none; margin: 0 auto; }
.pm-input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--pm-radius); font-size: 14px; font-family: inherit;
  background: #09090b; border: 1px solid rgba(255,255,255,.1); color: #fff; outline: none; transition: border-color .2s;
}
select.pm-input { cursor: pointer; }
.pm-input:focus { border-color: var(--pm-accent); }
.pm-input::placeholder { color: var(--pm-faint); }
.pm-form { display: flex; flex-direction: column; gap: 14px; }
.pm-field { display: flex; flex-direction: column; gap: 6px; }
.pm-label { font-size: 13px; color: var(--pm-muted); margin: 0; }
.pm-note { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; margin-bottom: 4px; border-radius: var(--pm-radius); color: var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pm-accent) 20%, transparent); }
.pm-note svg { flex-shrink: 0; margin-top: 2px; }
.pm-note p { margin: 0; font-size: 13px; line-height: 1.6; }

/* Popup overlay containers that main.js fades in */
.login-fivem, .login-discord, .options-popup {
  background: rgba(0,0,0,.75) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; z-index: 10000 !important;
}

/* ==========================================================================
   Basket drawer + checkout
   ========================================================================== */
.pm-drawer-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pm-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 440px; display: flex; flex-direction: column;
  background: #0a0a0b; border-left: 1px solid var(--pm-border); box-shadow: -30px 0 60px rgba(0,0,0,.5);
  animation: pm-slide-in .3s ease;
}
@keyframes pm-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pm-drawer-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: #fff; }
.pm-drawer-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; }
.pm-drawer-body > .absolute-center { color: var(--pm-dim) !important; font-size: 15px !important; font-weight: 400 !important; }

.pm-checkout-page { padding: 48px 0 96px; }
.pm-basket { display: flex; flex-direction: column; }
.pm-basket-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pm-basket-item {
  position: relative; display: flex; gap: 12px; padding: 10px; padding-right: 48px;
  border-radius: var(--pm-radius); background: var(--pm-card); border: 1px solid var(--pm-border); transition: border-color .2s;
}
.pm-basket-item:hover { border-color: var(--pm-border-strong); }
.pm-basket-item > img { width: 104px; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 6px; flex-shrink: 0; align-self: flex-start; }
.pm-basket-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-basket-info .basket-package-name { font-size: 14px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; }
.basket-package-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.basket-package-tags > span {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.06) !important; color: var(--pm-dim) !important;
  font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: 1px 6px !important; border-radius: 4px !important;
}
.basket-package-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--pm-muted); }
.basket-package-options:empty { display: none; }
.basket-package-options li { background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 4px; }
.basket-package-options strong { color: #fff; font-weight: 600; }
.pm-basket-price { font-size: 14px; font-weight: 600; color: #fff; margin-top: 2px; }
.basket-package-delete {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--pm-dim); cursor: pointer; transition: all .2s;
}
.basket-package-delete:hover { color: #f87171; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); }
.basket-package-delete svg { width: 16px; height: 16px; }
.pm-basket-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; margin-bottom: 16px; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.pm-basket-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-basket-account img { width: 36px; height: 36px; border-radius: 6px; background: rgba(255,255,255,.05); }
.pm-basket-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pm-dim); }
.pm-basket-user { font-size: 14px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-basket-total { text-align: right; }
.pm-basket-total-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.pm-basket-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--pm-faint); margin: 12px 0 0; text-align: center; }
.pm-basket-secure svg { width: 14px; height: 14px; flex-shrink: 0; }
.pm-basket-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; text-align: center; color: var(--pm-dim); }
.pm-basket-empty svg { width: 40px; height: 40px; color: var(--pm-faint); }
.pm-basket-empty p { margin: 0 0 8px; }

/* ==========================================================================
   Tiered / subscription cards (markup filled by main.js)
   ========================================================================== */
.pm-tiered .tiered-card { border-radius: var(--pm-radius) !important; background: var(--pm-card) !important; border: 1px solid var(--pm-border) !important; }
.pm-tiered .tiered-card:hover { border-color: var(--pm-border-strong) !important; }
.pm-tiered .tiered-card-title { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.015em; color: #fff !important; }
.pm-tiered .tiered-card-icon { border-radius: var(--pm-radius) !important; background: color-mix(in srgb, var(--pm-accent) 12%, transparent) !important; color: var(--pm-accent) !important; }
.pm-tiered .popular-pill { background: var(--pm-accent) !important; color: #fff !important; box-shadow: 0 0 24px color-mix(in srgb, var(--pm-accent) 45%, transparent) !important; }
.pm-tiered .tiered-features-list li { color: #d4d4d8 !important; font-size: 14px !important; }
.pm-tiered .tiered-subscribe-btn, .pm-tiered .package-add-to-cart {
  background: #fff !important; color: #000 !important; border-radius: 6px !important; font-weight: 600 !important; border: 0 !important;
}
.pm-tiered .tiered-subscribe-btn:hover, .pm-tiered .package-add-to-cart:hover { background: var(--pm-accent) !important; color: #fff !important; }

/* ==========================================================================
   Toasts (SweetAlert2) + loaders
   ========================================================================== */
.swal2-popup { background: #0a0a0b !important; color: #fff !important; border: 1px solid var(--pm-border) !important; border-radius: var(--pm-radius) !important; font-family: inherit !important; }
.swal2-title { color: #fff !important; font-size: 15px !important; font-weight: 600 !important; }
.swal2-html-container { color: var(--pm-muted) !important; font-size: 13px !important; }
.swal2-timer-progress-bar { background: var(--pm-accent) !important; }
.swal2-confirm { background: var(--pm-accent) !important; border-radius: 6px !important; }
.swal2-cancel { background: rgba(255,255,255,.08) !important; border-radius: 6px !important; }

/* ==========================================================================
   Subscription landing page
   ========================================================================== */
.pm-sub-page { position: relative; padding: 32px 0 64px; overflow: hidden; isolation: isolate; }
.pm-sub-head { text-align: center; margin: 24px auto 40px; max-width: 760px; }
.pm-sub-head h1 {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #fff;
}
@media (min-width: 768px) { .pm-sub-head h1 { font-size: 50px; } }
.pm-sub-crown { width: 30px; height: 30px; color: var(--pm-accent); flex-shrink: 0; }
.pm-sub-lead { font-size: 16px; line-height: 1.7; color: var(--pm-muted); margin: 0; }
@media (min-width: 768px) { .pm-sub-lead { font-size: 18px; } }
.pm-sub-lead strong { color: #fff; font-weight: 600; }
.pm-sub-value[hidden] { display: none; }
.pm-sub-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pm-sub-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 6px;
  font-size: 14px; font-weight: 500; color: #e4e4e7; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.pm-sub-pill[hidden] { display: none; }
.pm-sub-pill svg { width: 16px; height: 16px; color: var(--pm-accent); }
.pm-sub-pill-green { color: #4ade80; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
.pm-sub-pill-green svg { color: #4ade80; }

.pm-sub-included { margin-bottom: 72px; }
.pm-sub-included[hidden] { display: none; }
.pm-sub-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .pm-sub-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pm-sub-tiles { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
.pm-sub-tile {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111;
  border: 1px solid rgba(255,255,255,.08); transition: border-color .2s, transform .2s;
}
.pm-sub-tile:hover { border-color: var(--pm-accent); transform: translateY(-2px); }
.pm-sub-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pm-sub-tile:hover img { transform: scale(1.05); }
.pm-sub-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2; padding: 2px 7px; border-radius: 3px;
  background: #9333ea; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(147,51,234,.4);
}
.pm-sub-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.pm-sub-play svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); opacity: .9; }
.pm-sub-tile-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11px; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent); opacity: 0; transition: opacity .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-sub-tile:hover .pm-sub-tile-name { opacity: 1; }
@media (hover: none) { .pm-sub-tile-name { opacity: 1; } }
.pm-sub-tile.is-extra { display: none; }
.pm-sub-included.is-open .pm-sub-tile.is-extra { display: block; }
.pm-sub-more {
  display: flex; align-items: center; gap: 8px; margin: 20px auto 0; height: 38px; padding: 0 18px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--pm-muted); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); transition: all .2s;
}
.pm-sub-more[hidden] { display: none; }
.pm-sub-more:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.pm-sub-more svg { width: 16px; height: 16px; transition: transform .2s; }
.pm-sub-more.is-open svg { transform: rotate(180deg); }

.pm-sub-plans-title { text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -0.025em; color: #fff; margin: 0 0 36px; }
@media (min-width: 768px) { .pm-sub-plans-title { font-size: 32px; } }
.pm-plans { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0 auto; }
.pm-plans-1 { max-width: 380px; }
.pm-plans-2 { max-width: 760px; }
.pm-plans-3 { max-width: 1040px; }
@media (min-width: 768px) {
  .pm-plans-2 { grid-template-columns: repeat(2, 1fr); }
  .pm-plans-3 { grid-template-columns: repeat(3, 1fr); }
}
.pm-plan {
  position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 32px;
  background: rgba(14,14,16,.92); border: 1px solid rgba(255,255,255,.08); border-radius: 4px;
  transition: border-color .2s, transform .2s;
}
.pm-plan:hover { border-color: rgba(255,255,255,.18); }
.pm-plan.is-best { border-color: var(--pm-accent); box-shadow: 0 0 40px color-mix(in srgb, var(--pm-accent) 12%, transparent); }
.pm-plan-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 14px; border-radius: 999px; background: var(--pm-accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pm-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pm-plan-name { font-size: 18px; font-weight: 600; color: #fff; margin: 0; letter-spacing: -0.015em; }
.pm-plan-save {
  flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #4ade80; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
}
.pm-plan-price { display: flex; align-items: baseline; gap: 6px; }
.pm-plan-amount { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1.1; }
.pm-plan-per { font-size: 14px; color: var(--pm-dim); }
.pm-plan-bill { font-size: 14px; color: var(--pm-dim); margin: 10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-plan-actions { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.pm-plan-actions .pm-btn { width: 100%; }
.pm-plan-details { text-align: center; font-size: 13px; color: var(--pm-dim); transition: color .2s; }
.pm-plan-details:hover { color: #fff; }

.pm-sub-includes {
  max-width: 900px; margin: 56px auto 0; padding: 24px; border-radius: 4px;
  background: rgba(14,14,16,.8); border: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) { .pm-sub-includes { padding: 28px 32px; } }
.pm-sub-includes-title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-dim); margin: 0 0 20px; }
.pm-sub-includes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px 32px; }
@media (min-width: 768px) { .pm-sub-includes ul { grid-template-columns: repeat(2, 1fr); } }
.pm-sub-includes li { display: flex; gap: 12px; align-items: flex-start; }
.pm-sub-includes li svg { width: 18px; height: 18px; color: var(--pm-accent); flex-shrink: 0; margin-top: 2px; }
.pm-sub-includes strong { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.pm-sub-includes span { font-size: 13px; color: var(--pm-dim); line-height: 1.55; }


/* Subscription page: background continues behind FAQ + reviews, pixel skyline glow at the bottom */
.pm-sub-page { padding-bottom: 48px; }
.pm-sub-extra { position: relative; z-index: 1; }
.pm-sub-extra .pm-section { padding: 72px 0; }
.pm-sub-extra .pm-faq-item { background: rgba(10, 17, 18,.6); border-color: rgba(255,255,255,.07); }
.pm-sub-extra .pm-review { background: rgba(10, 15, 15,.75); }

/* Warm, slightly see-through panels so the site background glows through (matches the subscription look) */
.pm-review, .pm-feature, .pm-faq-item, .pm-box, .pm-plan, .pm-sub-includes, .pm-basket-item { background: rgba(9, 15, 16, .72); border-color: rgba(255, 255, 255, .07); }
.pm-plan.is-best { border-color: var(--pm-accent); }



/* Hero sits on its own dark base so the fixed site background (skyline) only shows below it */
.pm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* solid behind the hero, then a soft fade so the site background blends in below it */
  background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a calc(100% - 160px), rgba(10, 10, 10, 0) 100%);
}
/* darken the picture behind the headline so baked-in image text doesn't compete */
.pm-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(8,5,3,.75), transparent 75%);
}


/* ==========================================================================
   Site background (fixed, behind every page): dark base, amber glows,
   stepped skyline, fine grid and floating embers
   ========================================================================== */
.pm-site-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #0a0a0a; }
.pm-site-skyline {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 35%; opacity: .8;
  background:
    linear-gradient(transparent 40%, rgba(5, 30, 30, .6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,130 L20,130 L20,150 L40,150 L40,140 L60,140 L60,130 L80,130 L80,180 L100,180 L100,150 L120,150 L120,160 L140,160 L140,150 L160,150 L160,150 L180,150 L180,140 L200,140 L200,140 L220,140 L220,170 L240,170 L240,130 L260,130 L260,150 L280,150 L280,160 L300,160 L300,170 L320,170 L320,150 L340,150 L340,130 L360,130 L360,140 L380,140 L380,170 L400,170 L400,160 L420,160 L420,160 L440,160 L440,150 L460,150 L460,140 L480,140 L480,140 L500,140 L500,170 L520,170 L520,130 L540,130 L540,140 L560,140 L560,160 L580,160 L580,170 L600,170 L600,130 L620,130 L620,150 L640,150 L640,180 L660,180 L660,160 L680,160 L680,130 L700,130 L700,160 L720,160 L720,180 L740,180 L740,140 L760,140 L760,180 L780,180 L780,130 L800,130 L800,170 L820,170 L820,170 L840,170 L840,180 L860,180 L860,140 L880,140 L880,140 L900,140 L900,170 L920,170 L920,180 L940,180 L940,170 L960,170 L960,180 L980,180 L980,170 L1000,170 L1000,200 Z' fill='%23201000'/%3E%3C/svg%3E");
  background-size: cover; background-position: bottom;
}
.pm-site-glow { position: absolute; border-radius: 50%; }
.pm-site-glow-1 { top: -50%; left: 10%; width: 80%; height: 200%; transform: rotate(20deg); background: radial-gradient(ellipse at center, rgba(122, 186, 186, .08) 0%, transparent 70%); }
.pm-site-glow-2 { top: -20%; left: 30%; width: 60%; height: 150%; transform: rotate(-15deg); background: radial-gradient(ellipse at center, rgba(122, 186, 186, .06) 0%, transparent 70%); }
.pm-site-grid {
  position: absolute; inset: 0; z-index: 1; opacity: .3;
  background-image:
    linear-gradient(rgba(122, 186, 186, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 186, 186, .05) 1px, transparent 1px);
  background-size: 12px 12px;
}
.pm-site-embers { position: absolute; inset: 0; }
.pm-ember { position: absolute; bottom: 0; border-radius: 50%; opacity: 0; animation: pm-ember-rise linear infinite; }
@keyframes pm-ember-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(var(--drift, 20px), -120vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pm-ember { animation: none; opacity: .6; bottom: var(--rest, 20%); } }


/* ---------- Hero: tilted wall of product thumbnails ---------- */
.pm-hero-pan[hidden] { display: none; }
.pm-hero-wall {
  position: absolute; inset: -30% -15%; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  transform: rotate(-8deg) scale(1.1); opacity: 0; transition: opacity 1.2s ease;
}
.pm-hero-wall.is-ready { opacity: .24; }
.pm-wall-row { display: flex; gap: 18px; width: max-content; animation: pm-wall-left 90s linear infinite; }
.pm-wall-row:nth-child(even) { animation-name: pm-wall-right; animation-duration: 110s; }
.pm-wall-row img {
  width: 340px; aspect-ratio: 16 / 9; height: auto; flex-shrink: 0; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
@media (max-width: 767px) { .pm-wall-row img { width: 220px; } .pm-hero-wall, .pm-wall-row { gap: 12px; } }
@keyframes pm-wall-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pm-wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .pm-wall-row { animation: none; } }

/* ==========================================================================
   Store / category page (toolbar, tabs with counts, subscription banner, 4-col grid)
   ========================================================================== */
.pm-toolbar { display: flex; gap: 10px; margin-bottom: 24px; }
.pm-toolbar .pm-search { flex: 1; width: auto; }
.pm-toolbar .pm-search input { background: rgba(5, 5, 6, .85); }
.pm-toolbar .pm-filter > button { background: rgba(5, 5, 6, .85); }
.pm-cat-tabs { margin-bottom: 24px; }
.pm-cat-tabs a { gap: 8px; }
.pm-cat-tabs a svg { width: 15px; height: 15px; opacity: .8; }
.pm-cat-tabs a.is-active svg { color: var(--pm-accent); opacity: 1; }
.pm-tab-count { font-size: 12px; color: var(--pm-faint); font-variant-numeric: tabular-nums; }
.pm-tab-count:empty { display: none; }
.pm-cat-tabs a.is-active .pm-tab-count { color: var(--pm-muted); }

.pm-sub-banner {
  position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden; margin-bottom: 32px;
  padding: 18px 20px; border-radius: var(--pm-radius); background: #141416; border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .2s;
}
.pm-sub-banner[hidden] { display: none; }
.pm-sub-banner:hover { border-color: rgba(255, 255, 255, .16); }
@media (min-width: 900px) { .pm-sub-banner { flex-direction: row; align-items: center; justify-content: space-between; } }
.pm-sub-banner-art {
  position: absolute; inset: 0 -40px 0 0; display: flex; padding-left: 26%; pointer-events: none;
}
.pm-sub-banner-art span {
  flex: 0 0 9.5%; margin-left: -1.2%; background-size: cover; background-position: center; opacity: .9;
  transform: skewX(-22deg); border-left: 2px solid rgba(0, 0, 0, .7); box-shadow: inset 2px 0 0 var(--edge, transparent);
}
.pm-sub-banner-art span:nth-child(5n + 1) { --edge: rgba(122, 186, 186, .9); }
.pm-sub-banner-art span:nth-child(5n + 2) { --edge: rgba(139, 92, 246, .8); }
.pm-sub-banner-art span:nth-child(5n + 3) { --edge: rgba(34, 211, 238, .7); }
.pm-sub-banner-art span:nth-child(5n + 4) { --edge: rgba(245, 158, 11, .8); }
.pm-sub-banner-art span:nth-child(5n) { --edge: rgba(148, 163, 184, .6); }
/* dark for the text on the left, clearest in the middle, dim again behind the price */
.pm-sub-banner-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #141416 0%, rgba(20, 20, 22, .95) 30%, rgba(20, 20, 22, .38) 50%, rgba(20, 20, 22, .82) 76%, rgba(20, 20, 22, .9) 100%);
}
/* light sweep across the banner */
.pm-sub-banner::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -10%; width: 8%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); transform: skewX(-22deg);
  animation: pm-shine 6s ease-in-out 1.5s infinite;
}
@keyframes pm-shine { 0% { left: -10%; } 35%, 100% { left: 110%; } }
@media (prefers-reduced-motion: reduce) { .pm-sub-banner::after { animation: none; display: none; } }
.pm-sub-banner-body, .pm-sub-banner-cta { position: relative; z-index: 1; }
.pm-sub-banner-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pm-sub-banner-title svg { width: 20px; height: 20px; color: var(--pm-accent); }
.pm-sub-banner-text { margin: 6px 0 10px; font-size: 14px; color: var(--pm-muted); }
.pm-sub-banner-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pm-sub-banner-perks li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pm-dim); }
.pm-sub-banner-perks svg { width: 12px; height: 12px; color: var(--pm-accent); }
.pm-sub-banner-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.pm-sub-banner-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pm-sub-banner-price span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pm-dim); }
.pm-sub-banner-price strong { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pm-sub-banner-cta .pm-btn { height: 40px; padding: 0 18px; font-size: 14px; }

.pm-grid-store { gap: 20px; }
@media (min-width: 1280px) { .pm-grid-store { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.pm-grid-store .pm-card-media { height: auto; aspect-ratio: 16 / 10; }
.pm-grid-store .pm-card-body { margin-top: 0; }
.pm-grid-store .package-name { font-size: 17px; }
.pm-grid-store .pm-price-now { font-size: 20px; font-weight: 700; }

/* square icon cart button on product cards */
.pm-card .pm-cart-btn {
  width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 6px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: #d4d4d8;
}
.pm-card .pm-cart-btn svg { width: 18px; height: 18px; }
.pm-card .package-add-to-cart:hover { background: var(--pm-accent); border-color: var(--pm-accent); color: #fff; }
.pm-card .package-remove { color: #f87171; border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .08); }
.pm-card .package-remove:hover { background: rgba(239, 68, 68, .2); }

/* ==========================================================================
   Store filters panel
   ========================================================================== */
.pm-card.is-filtered-out { display: none !important; }
@media (min-width: 1024px) { .pm-grid-store { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1279px) { .pm-grid-store { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); } }

.pm-filters-toggle {
  position: relative; height: 48px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  border-radius: var(--pm-radius); background: rgba(5, 5, 6, .85); border: 1px solid rgba(255, 255, 255, .06);
  color: #d4d4d8; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s;
}
.pm-filters-toggle svg { width: 16px; height: 16px; }
.pm-filters-toggle:hover { border-color: rgba(255, 255, 255, .14); }
.pm-filters-toggle.is-open { color: var(--pm-accent); border-color: color-mix(in srgb, var(--pm-accent) 60%, transparent); background: color-mix(in srgb, var(--pm-accent) 10%, rgba(5, 5, 6, .85)); }
.pm-filters-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pm-accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pm-filters-badge[hidden] { display: none; }

.pm-filters { margin: -8px 0 24px; padding: 20px 24px 24px; border-radius: var(--pm-radius); background: rgba(10, 15, 15, .92); border: 1px solid rgba(255, 255, 255, .07); }
.pm-filters[hidden] { display: none; }
.pm-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pm-filters-title { display: inline-flex; align-items: center; gap: 8px; color: var(--pm-accent); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pm-filters-title svg { width: 16px; height: 16px; }
.pm-filters-head-actions { display: flex; align-items: center; gap: 14px; }
.pm-filters-result { font-size: 13px; color: var(--pm-dim); }
.pm-filters-head-actions .pm-link { background: none; border: 0; cursor: pointer; font-family: inherit; }
.pm-filters-head-actions .pm-icon-btn { width: 32px; height: 32px; }
.pm-filters-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .pm-filters-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; } }
.pm-filters-col { min-width: 0; }
.pm-fgroup + .pm-fgroup { margin-top: 22px; }
.pm-fgroup-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-dim); }
.pm-fgroup-title svg { width: 14px; height: 14px; }
.pm-fbox { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 6px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.pm-cols-ico { width: 18px; height: 18px; color: var(--pm-accent); flex-shrink: 0; }
.pm-cols-few { width: 14px; height: 14px; }
.pm-fbox input[type="range"] { flex: 1; }
.pm-sort { cursor: pointer; }
.pm-sort svg { width: 16px; height: 16px; color: var(--pm-accent); flex-shrink: 0; }
.pm-sort select { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.pm-sort select option { background: #141416; color: #fff; text-transform: none; }

/* range inputs (single + dual) */
.pm-filters input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); outline: none; }
.pm-filters input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.pm-filters input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer; border: 0; }
.pm-price-range { flex-direction: column; align-items: stretch; gap: 14px; }
.pm-price-labels { display: flex; justify-content: space-between; font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pm-accent); }
.pm-dual { position: relative; height: 16px; }
.pm-dual-track { position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.pm-dual-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--pm-accent); }
.pm-dual input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 16px; background: transparent; pointer-events: none; }
.pm-dual input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.pm-dual input[type="range"]::-moz-range-thumb { pointer-events: auto; }

.pm-fcats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-fcheck { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 6px; color: #e4e4e7; font-size: 14px; transition: background .15s; }
.pm-fcheck:hover { background: rgba(255, 255, 255, .04); }
.pm-fcheck-box { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); flex-shrink: 0; position: relative; }
.pm-fcheck.is-checked .pm-fcheck-box { background: var(--pm-accent); border-color: var(--pm-accent); }
.pm-fcheck.is-checked .pm-fcheck-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pm-fcount { color: var(--pm-dim); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pm-chip {
  height: 28px; padding: 0 10px; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  color: #d4d4d8; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .14); transition: all .15s;
}
.pm-chip:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.pm-chip.is-on { background: color-mix(in srgb, var(--pm-accent) 18%, transparent); border-color: var(--pm-accent); color: #fff; }
.pm-fempty { margin: 0; font-size: 13px; color: var(--pm-dim); }

/* Subscription banner: full-size link + "x" close strip on the right */
.pm-sub-banner { cursor: pointer; padding-right: 64px; }
@media (min-width: 900px) { .pm-sub-banner { padding-right: 68px; } }
.pm-sub-banner-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pm-sub-banner-hit:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 2px; }
.pm-sub-banner-close {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: 48px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, .08); color: var(--pm-faint); cursor: pointer; transition: color .2s, background .2s;
}
.pm-sub-banner-close:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.pm-sub-banner-close svg { width: 16px; height: 16px; }
.pm-sub-banner.is-closing { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }

/* ==========================================================================
   Store toolbar: sticks under the header and floats as a blurred bar
   ========================================================================== */
.pm-toolbar-sentinel { height: 1px; margin-bottom: -1px; }
.pm-toolbar {
  position: sticky; top: calc(var(--pm-promo-h, 0px) + var(--pm-header-h, 69px) + 12px); z-index: 50;
  padding: 0; border: 1px solid transparent; border-radius: 12px;
  transition: padding .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pm-toolbar.is-stuck {
  padding: 8px; background: rgba(12, 16, 17, .82); border-color: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.pm-toolbar.is-stuck .pm-search input,
.pm-toolbar.is-stuck .pm-filters-toggle { height: 44px; }

.pm-view-toggle { display: none; align-items: center; gap: 2px; padding: 3px; flex-shrink: 0; border-radius: var(--pm-radius); background: rgba(5, 5, 6, .85); border: 1px solid rgba(255, 255, 255, .06); }
@media (min-width: 768px) { .pm-view-toggle { display: inline-flex; } }
.pm-view-toggle button {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
  background: transparent; border: 0; color: var(--pm-dim); cursor: pointer; transition: all .15s;
}
.pm-toolbar.is-stuck .pm-view-toggle button { width: 38px; height: 36px; }
.pm-view-toggle button svg { width: 17px; height: 17px; }
.pm-view-toggle button:hover { color: #e4e4e7; }
.pm-view-toggle button.is-active { background: rgba(255, 255, 255, .09); color: #fff; }

/* cart button only appears in the floating bar (the header has one at the top) */
.pm-toolbar-cart {
  display: none; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--pm-radius);
  background: rgba(5, 5, 6, .85); border: 1px solid rgba(255, 255, 255, .06); color: var(--pm-accent); cursor: pointer; transition: all .15s;
}
.pm-toolbar-cart svg { width: 18px; height: 18px; }
.pm-toolbar-cart:hover { background: color-mix(in srgb, var(--pm-accent) 12%, rgba(5, 5, 6, .85)); }
.pm-toolbar.is-stuck .pm-toolbar-cart { display: inline-flex; height: 44px; width: 44px; }

/* sticky header sits under the fixed promo bar while it is showing */
.pm-header { top: var(--pm-promo-h, 0px); }

/* Header slides away while scrolling down (body.pm-header-hidden is toggled in navbar.twig) */
.pm-header { transition: transform .3s ease; will-change: transform; }
body.pm-header-hidden .pm-header { transform: translateY(calc(-100% - var(--pm-promo-h, 0px) - 2px)); }
.pm-toolbar { transition: top .3s ease, padding .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
body.pm-header-hidden .pm-toolbar { top: calc(var(--pm-promo-h, 0px) + 12px); }
@media (prefers-reduced-motion: reduce) { .pm-header, .pm-toolbar { transition: none; } }

/* --------------------------------------------------------------------------
   Floating toolbar v2: narrower when floating + smooth (no layout jump).
   The bar keeps its size; a backing layer fades/scales in behind it.
   -------------------------------------------------------------------------- */
.pm-toolbar,
.pm-toolbar.is-stuck {
  padding: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pm-toolbar {
  margin-left: auto; margin-right: auto; max-width: 100%;
  top: calc(var(--pm-promo-h, 0px) + var(--pm-header-h, 69px) + 20px);
  transition: max-width .55s cubic-bezier(.22, 1, .36, 1), top .4s cubic-bezier(.22, 1, .36, 1);
}
body.pm-header-hidden .pm-toolbar { top: calc(var(--pm-promo-h, 0px) + 20px); }
.pm-toolbar.is-stuck { max-width: min(1080px, calc(100% - 48px)); }
.pm-toolbar::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; pointer-events: none; border-radius: 14px;
  background: rgba(12, 16, 17, .82); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  opacity: 0; transform: scale(.97) translateY(-4px);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.pm-toolbar.is-stuck::before { opacity: 1; transform: none; }
.pm-toolbar.is-stuck .pm-search input,
.pm-toolbar.is-stuck .pm-filters-toggle { height: 48px; }
.pm-toolbar.is-stuck .pm-view-toggle button { width: 40px; height: 40px; }

/* cart button slides in instead of popping in */
.pm-toolbar-cart,
.pm-toolbar.is-stuck .pm-toolbar-cart {
  display: inline-flex; height: 48px; overflow: hidden;
  transition: width .45s cubic-bezier(.22, 1, .36, 1), margin .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, border-color .3s ease;
}
.pm-toolbar-cart { width: 0; margin-left: -10px; opacity: 0; border-color: transparent; pointer-events: none; }
.pm-toolbar.is-stuck .pm-toolbar-cart { width: 48px; margin-left: 0; opacity: 1; border-color: rgba(255, 255, 255, .06); pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .pm-toolbar, .pm-toolbar::before, .pm-toolbar-cart { transition: none !important; }
}

/* ==========================================================================
   Grid / Map switch + map view
   ========================================================================== */
.package-list.is-view-hidden { display: none !important; }
.pm-view-toggle button { width: auto; padding: 0 12px; gap: 7px; font-family: inherit; font-size: 14px; font-weight: 600; }
.pm-view-toggle button span { display: none; }
@media (min-width: 1024px) { .pm-view-toggle button span { display: inline; } }
.pm-toolbar.is-stuck .pm-view-toggle button { width: auto; }

.pm-map { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pm-map[hidden] { display: none; }
@media (min-width: 1024px) { .pm-map { grid-template-columns: minmax(0, 1fr) 280px; } }
.pm-map-stage {
  position: relative; height: min(74vh, 780px); min-height: 440px; overflow: hidden; touch-action: none; cursor: grab;
  border-radius: var(--pm-radius); border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(ellipse at 50% 40%, #12100e, #070606 75%);
}
.pm-map-stage.is-dragging { cursor: grabbing; }
.pm-map-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --s: 1; }
.pm-map-canvas:not(.has-image) {
  border-radius: 6px;
  background-color: #0d0b0a;
  background-image:
    linear-gradient(rgba(122, 186, 186, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 186, 186, .06) 1px, transparent 1px);
  background-size: 6.25% 4.54%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.pm-map-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pm-map-labels span {
  position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--s))); white-space: nowrap; pointer-events: none;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .22);
}
.pm-map-pin {
  position: absolute; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -100%) scale(calc(1 / var(--s))); transform-origin: 50% 100%; transition: opacity .2s;
}
.pm-map-pin span {
  position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--pin); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .6);
}
.pm-map-pin span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.pm-map-pin:hover span, .pm-map-pin:focus-visible span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 35%, transparent), 0 4px 10px rgba(0, 0, 0, .6); }
.pm-map-pin.is-dim { opacity: .18; }

.pm-map-zoom { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.pm-map-zoom button {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer;
  background: rgba(10, 10, 11, .85); border: 1px solid rgba(255, 255, 255, .1); color: #e4e4e7; font-size: 18px; font-family: inherit;
}
.pm-map-zoom button:hover { background: rgba(30, 30, 32, .95); color: #fff; }
.pm-map-zoom svg { width: 16px; height: 16px; }
.pm-map-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 14px; color: var(--pm-dim); }
.pm-map-status[hidden] { display: none; }

.pm-map-popup {
  position: absolute; z-index: 4; width: 240px; overflow: hidden; border-radius: 8px; cursor: default;
  background: #0c1112; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
}
.pm-map-popup[hidden] { display: none; }
.pm-map-popup img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pm-map-popup-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.pm-map-popup-body strong { font-size: 14px; color: #fff; }
.pm-map-popup-body > span { font-size: 12px; color: var(--pm-dim); }
.pm-map-popup-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pm-map-popup-foot b { font-size: 16px; color: #fff; }
.pm-map-popup-foot .pm-btn { height: 32px; padding: 0 14px; font-size: 13px; }
.pm-map-popup-x {
  position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: 16px; line-height: 1;
}

.pm-map-side { padding: 16px; border-radius: var(--pm-radius); background: rgba(10, 15, 15, .85); border: 1px solid rgba(255, 255, 255, .07); align-self: start; }
.pm-map-legend, .pm-map-missing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-map-legend button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; border: 0; background: none; cursor: pointer;
  color: #e4e4e7; font-family: inherit; font-size: 13px; text-align: left; transition: background .15s;
}
.pm-map-legend button:hover, .pm-map-legend button.is-on { background: rgba(255, 255, 255, .06); }
.pm-map-legend i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.pm-map-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-map-legend em { font-style: normal; font-size: 12px; color: var(--pm-dim); }
.pm-map-missing a { display: block; padding: 6px 8px; font-size: 13px; color: var(--pm-dim); border-radius: 6px; }
.pm-map-missing a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.pm-map-land { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pm-map-land .land { fill: rgba(130, 200, 200, .07); stroke: rgba(150, 210, 210, .35); stroke-width: .25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pm-map-land .lake { fill: rgba(7, 7, 8, .9); stroke: rgba(150, 210, 210, .25); stroke-width: .2; vector-effect: non-scaling-stroke; }

/* --------------------------------------------------------------------------
   Floating toolbar v3: it takes the header's place. It floats only while the
   header is hidden (scrolling down); when the header comes back it slides away.
   -------------------------------------------------------------------------- */
.pm-toolbar,
body.pm-header-hidden .pm-toolbar { top: calc(var(--pm-promo-h, 0px) + 20px); }
.pm-toolbar {
  transition: max-width .55s cubic-bezier(.22, 1, .36, 1), top .4s cubic-bezier(.22, 1, .36, 1),
              transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
body:not(.pm-header-hidden) .pm-toolbar.is-stuck {
  transform: translateY(calc(-100% - 40px)); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .pm-toolbar { transition: none !important; } }

/* ---------- Map view on Leaflet ---------- */
.pm-map-stage { cursor: default; }
.pm-map-leaflet { position: absolute; inset: 0; }
.pm-map .leaflet-container { background: transparent; font-family: inherit; outline: none; }
.pm-map:not(.has-art) .leaflet-container {
  background-image:
    linear-gradient(rgba(122, 186, 186, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 186, 186, .05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.pm-map-hint {
  position: absolute; right: 12px; top: 12px; z-index: 500; pointer-events: none; padding: 6px 10px; border-radius: 6px;
  font-size: 12px; color: #a1a1aa; background: rgba(10, 10, 11, .8); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pm-map-status { z-index: 600; }
.pm-map .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; margin: 12px !important; }
.pm-map .leaflet-control-zoom a {
  width: 34px !important; height: 34px !important; line-height: 32px !important; margin-bottom: 4px; border-radius: 6px !important;
  background: rgba(10, 10, 11, .88) !important; color: #e4e4e7 !important; border: 1px solid rgba(255, 255, 255, .1) !important;
}
.pm-map .leaflet-control-zoom a:hover { background: rgba(30, 30, 32, .95) !important; color: #fff !important; }
.pm-map-area {
  white-space: nowrap; pointer-events: none; transform-origin: center;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .25);
}
.pm-map-area { margin-left: -60px !important; width: 120px !important; text-align: center; }

.pm-lpin { background: none; border: 0; }
.pm-lpin span {
  position: absolute; left: 3px; top: 2px; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--pin); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); transition: transform .15s ease;
}
.pm-lpin span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.pm-lpin:hover span { transform: rotate(-45deg) scale(1.15); }

.pm-map .leaflet-popup.pm-map-popup .leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden; border-radius: 8px; background: #0c1112; color: #fff;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
}
.pm-map .leaflet-popup.pm-map-popup .leaflet-popup-content { margin: 0; width: 240px !important; font-family: inherit; }
.pm-map .leaflet-popup.pm-map-popup .leaflet-popup-tip { background: #0c1112; border: 1px solid rgba(255, 255, 255, .12); }
.pm-map .leaflet-popup.pm-map-popup img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pm-map .leaflet-popup.pm-map-popup a.leaflet-popup-close-button {
  top: 6px; right: 6px; width: 26px; height: 26px; line-height: 24px; border-radius: 50%; z-index: 2;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: 18px;
}
.pm-map .leaflet-popup.pm-map-popup .pm-btn { color: #fff; }

/* Dark map style: grey land, lighter roads, sea fades to black (brightness then contrast maps
   sea ~0.54 -> 0, land ~0.78 -> 0.22, roads 1.0 -> 0.42 in luminance) */
.pm-map.has-art.is-dark .leaflet-tile-pane { filter: grayscale(1) brightness(.46) contrast(1.99); }
.pm-map.has-art.is-dark .pm-map-stage { background: #000; }

/* Original-colour map: fill around the tiles with the sea colour (no dark frame) */
.pm-map.has-art:not(.is-dark) .pm-map-stage { background: var(--pm-map-sea, #0FA8D2); }
.pm-map.has-art:not(.is-dark) .pm-map-hint { color: #e4e4e7; background: rgba(10, 10, 11, .7); }

/* --------------------------------------------------------------------------
   Softer, linear motion for the store toolbar, filters panel and header
   -------------------------------------------------------------------------- */
.pm-toolbar {
  transition: max-width .45s linear, top .35s linear, transform .35s linear, opacity .35s linear !important;
}
.pm-toolbar::before { transition: opacity .35s linear, transform .35s linear !important; }
.pm-toolbar-cart,
.pm-toolbar.is-stuck .pm-toolbar-cart { transition: width .35s linear, margin .35s linear, opacity .35s linear, border-color .35s linear !important; }
.pm-header { transition: transform .35s linear !important; }
.pm-filters-toggle, .pm-view-toggle button, .pm-chip, .pm-fcheck { transition: background-color .25s linear, border-color .25s linear, color .25s linear !important; }

/* filters panel fades/slides in instead of popping */
.pm-filters:not([hidden]) { animation: pm-filters-in .3s linear; }
@keyframes pm-filters-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pm-toolbar, .pm-toolbar::before, .pm-toolbar-cart, .pm-header { transition: none !important; }
  .pm-filters:not([hidden]) { animation: none; }
}

/* Faster toolbar / header / filters motion (still linear) */
.pm-toolbar { transition: max-width .2s linear, top .18s linear, transform .18s linear, opacity .18s linear !important; }
.pm-toolbar::before { transition: opacity .18s linear, transform .18s linear !important; }
.pm-toolbar-cart,
.pm-toolbar.is-stuck .pm-toolbar-cart { transition: width .18s linear, margin .18s linear, opacity .18s linear, border-color .18s linear !important; }
.pm-header { transition: transform .18s linear !important; }
.pm-filters-toggle, .pm-view-toggle button, .pm-chip, .pm-fcheck { transition: background-color .12s linear, border-color .12s linear, color .12s linear !important; }
.pm-filters:not([hidden]) { animation-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
  .pm-toolbar, .pm-toolbar::before, .pm-toolbar-cart, .pm-header { transition: none !important; }
}

/* Subscription page: included items as a compact 3-column grid */
.pm-sub-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; max-width: 640px; margin: 0 auto; }
.pm-sub-tile-name { font-size: 10px; padding: 14px 6px 4px; }
.pm-sub-badge { font-size: 8px; padding: 2px 5px; }
.pm-sub-play svg { width: 22px; height: 22px; }

/* ==========================================================================
   Plan cards v2: features + price block; single plan = wide two-column card
   ========================================================================== */
.pm-plan {
  position: relative; overflow: hidden; min-height: 0; padding: 28px; gap: 24px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 22, 23, .95), rgba(9, 12, 12, .95));
  border: 1px solid rgba(255, 255, 255, .08);
}
.pm-plan-glow {
  position: absolute; top: -120px; right: -80px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--pm-accent) 28%, transparent), transparent 70%);
}
.pm-plan > * { position: relative; }
.pm-plan-flag { position: absolute; }
.pm-plan-top { justify-content: flex-start; align-items: center; gap: 14px; margin-bottom: 22px; }
.pm-plan-top .pm-plan-save { margin-left: auto; }
.pm-plan-icon {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: color-mix(in srgb, var(--pm-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--pm-accent) 35%, transparent); color: var(--pm-accent);
}
.pm-plan-icon svg { width: 22px; height: 22px; }
.pm-plan-name { font-size: 20px; }
.pm-plan-sub { margin: 2px 0 0; font-size: 13px; color: var(--pm-dim); }
.pm-plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pm-plan-features li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #d4d4d8; }
.pm-plan-features li[hidden] { display: none; }
.pm-plan-features strong { color: #fff; font-weight: 600; }
.pm-plan-features i {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; position: relative;
  background: color-mix(in srgb, var(--pm-accent) 18%, transparent);
}
.pm-plan-features i::after {
  content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px;
  border: solid var(--pm-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pm-plan-buy { display: flex; flex-direction: column; }
.pm-plan-amount { font-size: 52px; }
.pm-plan-actions { padding-top: 24px; }
.pm-plan-actions .pm-btn { height: 52px; font-size: 16px; }
.pm-plan-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.pm-plan-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pm-dim); }
.pm-plan-trust svg { width: 14px; height: 14px; color: var(--pm-accent); }

/* multiple plans: stacked card */
.pm-plans-2 .pm-plan, .pm-plans-3 .pm-plan { display: flex; flex-direction: column; }
.pm-plans-2 .pm-plan-buy, .pm-plans-3 .pm-plan-buy { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .06); }

/* single plan: wide card, features left / price right */
.pm-plans-1 { max-width: 880px; }
.pm-plans-1 .pm-plan { display: grid; grid-template-columns: 1fr; padding: 32px; }
@media (min-width: 768px) {
  .pm-plans-1 .pm-plan { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; padding: 36px; align-items: center; }
  .pm-plans-1 .pm-plan-buy { padding: 28px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
}
.pm-plans-1 .pm-plan-glow { right: auto; left: -120px; top: -140px; }
.pm-plan > .pm-plan-glow, .pm-plan > .pm-plan-flag { position: absolute; }
.pm-plan > .pm-plan-glow { z-index: 0; }
.pm-plan > .pm-plan-main, .pm-plan > .pm-plan-buy { z-index: 1; }
.pm-plans-1 .pm-plan > .pm-plan-main { grid-column: 1; grid-row: 1; }
@media (min-width: 768px) { .pm-plans-1 .pm-plan > .pm-plan-buy { grid-column: 2; grid-row: 1; } }
.pm-plan > .pm-plan-flag { top: 0; transform: translateX(-50%); border-radius: 0 0 8px 8px; padding: 4px 14px 5px; z-index: 2; }
.pm-plan.is-best .pm-plan-top { margin-top: 10px; }

.pm-sub-browse { text-decoration: none; width: fit-content; }
.pm-sub-browse svg { transition: transform .15s linear; }
.pm-sub-browse:hover svg { transform: translateX(3px); }

/* Show all: extra MLO tiles appear one after another, and fade out on "Show less" */
.pm-sub-included.is-open .pm-sub-tile.is-extra { animation: pm-tile-in .32s linear both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes pm-tile-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.pm-sub-included.is-closing .pm-sub-tile.is-extra { animation: pm-tile-out .2s linear both; }
@keyframes pm-tile-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.97); } }
.pm-sub-more svg { transition: transform .2s linear; }
@media (prefers-reduced-motion: reduce) { .pm-sub-included .pm-sub-tile.is-extra { animation: none !important; } }

/* Plan cards: even alignment across cards */
.pm-plans-2 .pm-plan, .pm-plans-3 .pm-plan { padding-top: 40px; }
.pm-plan.is-best .pm-plan-top { margin-top: 0; }
.pm-plans-2 .pm-plan-save, .pm-plans-3 .pm-plan-save { position: absolute; top: 14px; right: 16px; margin: 0; }
.pm-plan-top { min-height: 44px; }
.pm-plan.is-best { box-shadow: 0 0 0 1px var(--pm-accent), 0 24px 60px color-mix(in srgb, var(--pm-accent) 18%, transparent); }
@media (min-width: 1024px) { .pm-plans-3 .pm-plan.is-best { transform: translateY(-8px); } }

/* ==========================================================================
   Live server banner v2: text left, scrolling product columns right
   ========================================================================== */
.pm-live-v2 {
  display: grid; grid-template-columns: 1fr; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 20, 22, .95), rgba(10, 9, 8, .97) 55%);
  border: 1px solid color-mix(in srgb, var(--pm-accent) 25%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
@media (min-width: 1024px) { .pm-live-v2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 520px; } }
.pm-live-v2::before {
  background: radial-gradient(ellipse 60% 70% at 0% 0%, color-mix(in srgb, var(--pm-accent) 18%, transparent), transparent 70%);
  z-index: 0; pointer-events: none;
}
.pm-live-v2 .pm-live-inner { max-width: none; align-self: center; }
@media (min-width: 1024px) { .pm-live-v2 .pm-live-inner { padding: 64px 56px; } }
.pm-live-v2 h2 { font-size: 40px; }
@media (min-width: 768px) { .pm-live-v2 h2 { font-size: 58px; } }
.pm-live-v2 p { font-size: 17px; color: #a1a1aa; margin-bottom: 24px; }

.pm-live-connect {
  display: flex; align-items: center; gap: 12px; max-width: 460px; margin-bottom: 24px; padding: 6px 6px 6px 14px;
  border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .1);
}
.pm-live-connect-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-accent); flex-shrink: 0; }
.pm-live-connect code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.pm-live-copy {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 7px; flex-shrink: 0; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: #e4e4e7; font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background .15s linear, color .15s linear;
}
.pm-live-copy svg { width: 14px; height: 14px; }
.pm-live-copy:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pm-live-copy.is-done { background: rgba(34, 197, 94, .15); border-color: rgba(34, 197, 94, .4); color: #4ade80; }

.pm-live-points { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .07); display: grid; gap: 10px; }
.pm-live-points:empty { display: none; }
.pm-live-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #d4d4d8; }
.pm-live-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); flex-shrink: 0; }

.pm-live-visual { position: relative; z-index: 1; min-height: 320px; overflow: hidden; }
@media (min-width: 1024px) { .pm-live-visual { min-height: 100%; } }
.pm-live-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 9, 8, .95), transparent 22%, transparent 78%, rgba(10, 9, 8, .95)),
    linear-gradient(to right, rgba(9, 14, 14, .9), transparent 35%);
}
.pm-live-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.pm-live-visual.is-ready .pm-live-fallback { display: none; }
.pm-live-cols {
  position: absolute; inset: -20% -10% -20% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  transform: rotate(6deg); opacity: 0; animation: pm-live-fade .8s linear .1s forwards;
}
@keyframes pm-live-fade { to { opacity: 1; } }
.pm-live-col { overflow: hidden; }
.pm-live-track { display: flex; flex-direction: column; gap: 12px; animation: pm-live-up 40s linear infinite; }
.pm-live-col:nth-child(2) .pm-live-track { animation-name: pm-live-down; animation-duration: 48s; }
.pm-live-col:nth-child(3) .pm-live-track { animation-duration: 44s; }
.pm-live-track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
@keyframes pm-live-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pm-live-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pm-live-track { animation: none; } }
.pm-live-v2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .pm-live-v2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.pm-live-v2 .pm-live-inner { min-width: 0; padding: 28px 22px; }
@media (min-width: 640px) { .pm-live-v2 .pm-live-inner { padding: 40px; } }
@media (min-width: 1024px) { .pm-live-v2 .pm-live-inner { padding: 64px 56px; } }
.pm-live-connect { max-width: 100%; }
.pm-live-v2 .pm-row { flex-wrap: wrap; }
@media (max-width: 479px) { .pm-live-v2 .pm-row .pm-btn { flex: 1 1 100%; } .pm-live-copy span { display: none; } .pm-live-v2 h2 { font-size: 34px; } }

/* ==========================================================================
   Live server banner v3 (like reference): full-bleed blurred background,
   text on the left, stacked uppercase buttons
   ========================================================================== */
.pm-live-v2 { display: block; min-height: 0; position: relative; border-radius: 10px; background: #050505; border: 1px solid rgba(255, 255, 255, .06); }
@media (min-width: 1024px) { .pm-live-v2 { min-height: 0; } }
.pm-live-v2::before { display: none; }
.pm-live-v2 .pm-live-visual { position: absolute; inset: 0; z-index: 0; min-height: 0; }
.pm-live-v2 .pm-live-cols { inset: -10% -5% -10% 25%; transform: rotate(0deg); gap: 18px; filter: blur(2px) brightness(.5) saturate(.85); }
.pm-live-v2 .pm-live-track img { aspect-ratio: 16 / 10; }
.pm-live-v2 .pm-live-visual::after {
  background:
    linear-gradient(to right, #050505 0%, rgba(5, 5, 5, .96) 28%, rgba(5, 5, 5, .55) 60%, rgba(5, 5, 5, .7) 100%),
    linear-gradient(to bottom, rgba(5, 5, 5, .6), transparent 30%, transparent 70%, rgba(5, 5, 5, .7));
}
.pm-live-v2 .pm-live-inner { position: relative; z-index: 2; max-width: 640px; padding: 40px 24px; }
@media (min-width: 768px) { .pm-live-v2 .pm-live-inner { padding: 72px 76px; } }
.pm-live-v2 h2 { font-size: 40px; letter-spacing: -0.02em; margin-bottom: 26px; }
@media (min-width: 768px) { .pm-live-v2 h2 { font-size: 60px; } }
.pm-live-v2 p { font-size: 17px; max-width: 470px; margin-bottom: 30px; }
.pm-live-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pm-live-btn { height: 56px; padding: 0 32px; border-radius: 0; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.pm-live-btn svg { width: 18px; height: 18px; }
.pm-live-btn-main { box-shadow: 0 0 28px color-mix(in srgb, var(--pm-accent) 55%, transparent); }
.pm-live-btn-main:hover { box-shadow: 0 0 40px color-mix(in srgb, var(--pm-accent) 75%, transparent); }
.pm-live-btn-main:hover svg { transform: none; }
.pm-live-v2 .pm-btn-ghost.pm-live-btn { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .25); }
.pm-live-v2 .pm-live-points { margin-top: 30px; }
@media (max-width: 479px) { .pm-live-btn { width: 100%; justify-content: center; } }

/* Footer v2 (reference style) */
.pm-footer-v2 { border-top: 0; margin-top: 0; padding: 72px 0 40px; background: linear-gradient(to bottom, transparent, rgba(5, 5, 5, .85) 30%); }
.pm-footer-v2 .pm-container { max-width: 1320px; }
.pm-footer-v2 .pm-footer-grid { gap: 40px 48px; margin-bottom: 56px; }
@media (min-width: 768px) { .pm-footer-v2 .pm-footer-grid { grid-template-columns: 1.15fr 1fr 1fr 1.15fr; } }
.pm-footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pm-footer-logo img { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.pm-footer-logo span { font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; color: var(--pm-accent); max-width: 110px; }
.pm-footer-v2 .pm-footer-text { margin: 0; font-size: 15px; line-height: 1.6; color: #a1a1aa; max-width: 340px; }
.pm-footer-v2 h3 { font-size: 15px; letter-spacing: .04em; margin-bottom: 22px; }
.pm-footer-v2 ul { gap: 16px; }
.pm-footer-v2 ul a, .pm-footer-email { font-size: 15px; color: #a1a1aa; }
.pm-footer-v2 ul a:hover, .pm-footer-email:hover { color: #fff; }
.pm-footer-email { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; transition: color .15s linear; }
.pm-footer-email svg { width: 16px; height: 16px; flex-shrink: 0; }
.pm-footer-email.is-shown { color: #e4e4e7; }
.pm-footer-v2 .pm-socials { margin-top: 26px; gap: 18px; }
.pm-footer-v2 .pm-socials a { color: #d4d4d8; font-size: 20px; }
.pm-footer-v2 .pm-discord-btn { margin-top: 20px; padding: 13px 26px; border-radius: 6px; font-size: 15px; }
.pm-footer-v2 .pm-footer-bottom { font-size: 13px; color: #71717a; padding-top: 28px; }
.pm-footer-v2 .pm-footer-bottom p { margin: 0; }
.pm-footer-credit { opacity: .55; margin-left: 8px; transition: opacity .15s linear; }
.pm-footer-credit:hover { opacity: 1; }

/* Live banner: shorter, wider, more rectangular */
.pm-live-v2 { border-radius: 6px; }
@media (min-width: 768px) {
  .pm-live-v2 .pm-live-inner { padding: 44px 64px; max-width: 760px; }
  .pm-live-v2 h2 { font-size: 46px; margin-bottom: 16px; }
  .pm-live-v2 h2 br { display: none; }
  .pm-live-v2 h2 .pm-gradient-text { margin-left: .25em; }
  .pm-live-v2 p { margin-bottom: 24px; }
  .pm-live-ctas { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .pm-live-btn { height: 50px; padding: 0 26px; font-size: 15px; }
}
@media (min-width: 1280px) { .pm-section .pm-container:has(> .pm-live-v2) { max-width: 1320px; } }
.pm-live-v2 .pm-pill { margin-bottom: 18px; }
@media (min-width: 768px) {
  .pm-live-v2 .pm-live-inner { max-width: 920px; }
  .pm-live-v2 h2 .pm-gradient-text { white-space: nowrap; }
}

/* Store page: product grid sits in a narrower, centred area */
.pm-store .package-list.pm-grid-store,
.pm-store [data-filter-none] { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Store page: everything (search, tabs, banner, filters, grid, map) shares the grid's width */
.pm-store > .pm-container-wide { max-width: calc(1180px + 32px); }
@media (min-width: 768px) { .pm-store > .pm-container-wide { max-width: calc(1180px + 64px); } }

/* Subscription page: placeholders while store data loads, pictures fade in */
.pm-sub-skel {
  display: block; aspect-ratio: 16 / 9; border-radius: 2px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 70%);
  background-size: 300% 100%; animation: pm-skel 1.1s linear infinite;
}
@keyframes pm-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pm-sub-tile { background: rgba(255, 255, 255, .04); }
.pm-sub-tile img { opacity: 0; transition: opacity .25s linear, transform .4s; }
.pm-sub-tile img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pm-sub-skel { animation: none; } .pm-sub-tile img { transition: none; } }

/* Keep the footer at the bottom of the screen on short pages (e.g. an empty category) */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > * { width: 100%; flex-shrink: 0; }
body > .pm-footer { margin-top: auto; }


/* ==========================================================================
   Site background bottom: endless pixel runner (replaces the city skyline).
   Cacti scroll 400px per 2.2s; the runner hops exactly when one reaches it.
   ========================================================================== */
.pm-site-skyline { height: 150px; opacity: 1; background: none !important; -webkit-mask: none !important; mask: none !important; filter: none !important; }
.pm-site-skyline::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 30, 30, .55), transparent); }
.pm-run-clouds, .pm-run-cacti, .pm-run-ground { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
.pm-run-clouds { bottom: 70px; height: 80px; opacity: .08; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iODAiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDEwKSI+PHJlY3QgeD0iMTUiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIyMCIgeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjI1IiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMzAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSI1IiB5PSI1IiB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMTAiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIxNSIgeT0iNSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjIwIiB5PSI1IiB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIzMCIgeT0iNSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjM1IiB5PSI1IiB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMCIgeT0iMTAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSI1IiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjE1IiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjIwIiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjI1IiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjMwIiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjM1IiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjQwIiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjQ1IiB5PSIxMCIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2ZmZDliMCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NjAsNDYpIj48cmVjdCB4PSIxMiIgeT0iMCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjE2IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMjAiIHk9IjAiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIyNCIgeT0iMCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSI4IiB5PSI0IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMTIiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIxNiIgeT0iNCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjIwIiB5PSI0IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMjQiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIyOCIgeT0iNCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjAiIHk9IjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSI0IiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjEyIiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMTYiIHk9IjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIyMCIgeT0iOCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjI0IiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PHJlY3QgeD0iMjgiIHk9IjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmQ5YjAiLz48cmVjdCB4PSIzMiIgeT0iOCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmZDliMCIvPjxyZWN0IHg9IjM2IiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZkOWIwIi8+PC9nPjwvc3ZnPg=="); animation: pm-run-clouds 40s linear infinite; }
.pm-run-cacti { bottom: 26px; height: 36px; opacity: .22; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzYiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4LDApIj48cmVjdCB4PSI4IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMTIiIHk9IjAiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZjlhM2MiLz48cmVjdCB4PSI4IiB5PSI0IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMTIiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZjlhM2MiLz48cmVjdCB4PSIwIiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjEyIiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMCIgeT0iMTIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZjlhM2MiLz48cmVjdCB4PSI4IiB5PSIxMiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjEyIiB5PSIxMiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjIwIiB5PSIxMiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjAiIHk9IjE2IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iNCIgeT0iMTYiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZjlhM2MiLz48cmVjdCB4PSI4IiB5PSIxNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjEyIiB5PSIxNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjIwIiB5PSIxNiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjgiIHk9IjIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMTIiIHk9IjIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMTYiIHk9IjIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMjAiIHk9IjIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iOCIgeT0iMjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZjlhM2MiLz48cmVjdCB4PSIxMiIgeT0iMjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZjlhM2MiLz48cmVjdCB4PSI4IiB5PSIyOCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjEyIiB5PSIyOCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2ZmOWEzYyIvPjxyZWN0IHg9IjgiIHk9IjMyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PHJlY3QgeD0iMTIiIHk9IjMyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmY5YTNjIi8+PC9nPjwvc3ZnPg=="); animation: pm-run-tile 2.2s linear infinite; }
.pm-run-ground { bottom: 12px; height: 14px; opacity: .3; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMTQiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyIiBmaWxsPSIjZmZiMDcwIi8+PHJlY3QgeD0iMTIiIHk9IjYiIHdpZHRoPSIzIiBoZWlnaHQ9IjIiIGZpbGw9IiNmZmIwNzAiLz48cmVjdCB4PSI1NyIgeT0iOSIgd2lkdGg9IjYiIGhlaWdodD0iMiIgZmlsbD0iI2ZmYjA3MCIvPjxyZWN0IHg9Ijk2IiB5PSI1IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiBmaWxsPSIjZmZiMDcwIi8+PHJlY3QgeD0iMTQzIiB5PSI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIyIiBmaWxsPSIjZmZiMDcwIi8+PHJlY3QgeD0iMTg4IiB5PSI2IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiBmaWxsPSIjZmZiMDcwIi8+PHJlY3QgeD0iMjMxIiB5PSIxMCIgd2lkdGg9IjYiIGhlaWdodD0iMiIgZmlsbD0iI2ZmYjA3MCIvPjxyZWN0IHg9IjI3OSIgeT0iNSIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2ZmYjA3MCIvPjxyZWN0IHg9IjMyMiIgeT0iOCIgd2lkdGg9IjYiIGhlaWdodD0iMiIgZmlsbD0iI2ZmYjA3MCIvPjxyZWN0IHg9IjM2NSIgeT0iNiIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2ZmYjA3MCIvPjwvc3ZnPg=="); animation: pm-run-tile 2.2s linear infinite; }
.pm-runner {
  position: absolute; left: 116px; bottom: 25px; width: 48px; height: 48px; opacity: .6;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI0OCIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIj48cmVjdCB4PSIzOSIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjOGE2YTFjIi8+PHJlY3QgeD0iMzYiIHk9IjMiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiM4YTZhMWMiLz48cmVjdCB4PSIzOSIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjMzIiB5PSI2IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSIzOSIgeT0iNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjMwIiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjkiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSIzNiIgeT0iOSIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjM5IiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzkiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzkiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTIiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTUiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iNiIgeT0iMjQiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSI5IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjEyIiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE1IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE4IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjIxIiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI3IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjMwIiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjMiIHk9IjI3IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iNiIgeT0iMjciIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSI5IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjEyIiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE1IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzFhMTIwOCIvPjxyZWN0IHg9IjE4IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjIxIiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI0IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI3IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjAiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjOGE2YTFjIi8+PHJlY3QgeD0iMyIgeT0iMzAiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSI2IiB5PSIzMCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjkiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTIiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTUiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMyIgeT0iMzMiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiM4YTZhMWMiLz48cmVjdCB4PSI2IiB5PSIzMyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjkiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTIiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTUiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iNiIgeT0iMzYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiM4YTZhMWMiLz48cmVjdCB4PSI5IiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjEyIiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE1IiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE4IiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjkiIHk9IjM5IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PHJlY3QgeD0iMjEiIHk9IjM5IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PHJlY3QgeD0iOSIgeT0iNDIiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNjOTlhMmUiLz48cmVjdCB4PSIyNCIgeT0iNDIiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNjOTlhMmUiLz48cmVjdCB4PSI2IiB5PSI0NSIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2M5OWEyZSIvPjxyZWN0IHg9IjkiIHk9IjQ1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PHJlY3QgeD0iMjciIHk9IjQ1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PHJlY3QgeD0iMzAiIHk9IjQ1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4LDApIj48cmVjdCB4PSIzOSIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjOGE2YTFjIi8+PHJlY3QgeD0iMzYiIHk9IjMiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiM4YTZhMWMiLz48cmVjdCB4PSIzOSIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjMzIiB5PSI2IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSIzOSIgeT0iNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjMwIiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjkiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSIzNiIgeT0iOSIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjM5IiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzkiIHk9IjEyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzkiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzYiIHk9IjE4IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTIiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTUiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjciIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzAiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMzMiIHk9IjIxIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iNiIgeT0iMjQiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSI5IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjEyIiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE1IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE4IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjIxIiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI3IiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjMwIiB5PSIyNCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjMiIHk9IjI3IiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iNiIgeT0iMjciIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSI5IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjEyIiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE1IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzFhMTIwOCIvPjxyZWN0IHg9IjE4IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjIxIiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI0IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjI3IiB5PSIyNyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjAiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjOGE2YTFjIi8+PHJlY3QgeD0iMyIgeT0iMzAiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNmNWM1NDIiLz48cmVjdCB4PSI2IiB5PSIzMCIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjkiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTIiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTUiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjQiIHk9IjMwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMyIgeT0iMzMiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiM4YTZhMWMiLz48cmVjdCB4PSI2IiB5PSIzMyIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjkiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTIiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTUiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMTgiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iMjEiIHk9IjMzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjZjVjNTQyIi8+PHJlY3QgeD0iNiIgeT0iMzYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiM4YTZhMWMiLz48cmVjdCB4PSI5IiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjEyIiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE1IiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2Y1YzU0MiIvPjxyZWN0IHg9IjE4IiB5PSIzNiIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iIzhhNmExYyIvPjxyZWN0IHg9IjEyIiB5PSIzOSIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2M5OWEyZSIvPjxyZWN0IHg9IjIxIiB5PSIzOSIgd2lkdGg9IjMiIGhlaWdodD0iMyIgZmlsbD0iI2M5OWEyZSIvPjxyZWN0IHg9IjkiIHk9IjQyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PHJlY3QgeD0iMjQiIHk9IjQyIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIiBmaWxsPSIjYzk5YTJlIi8+PHJlY3QgeD0iOSIgeT0iNDUiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNjOTlhMmUiLz48cmVjdCB4PSIxMiIgeT0iNDUiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNjOTlhMmUiLz48cmVjdCB4PSIyMSIgeT0iNDUiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNjOTlhMmUiLz48cmVjdCB4PSIyNCIgeT0iNDUiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNjOTlhMmUiLz48L2c+PC9zdmc+") 0 0 / 96px 48px no-repeat;
  animation: pm-run-legs .26s steps(2) infinite, pm-run-jump 2.2s linear infinite;
}
@keyframes pm-run-tile { from { background-position-x: 0; } to { background-position-x: -400px; } }
@keyframes pm-run-clouds { from { background-position-x: 0; } to { background-position-x: -900px; } }
@keyframes pm-run-legs { from { background-position-x: 0; } to { background-position-x: -96px; } }
@keyframes pm-run-jump {
  0%, 36% { transform: translateY(0); }
  43% { transform: translateY(-34px); }
  50% { transform: translateY(-46px); }
  57% { transform: translateY(-34px); }
  64%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .pm-run-clouds, .pm-run-cacti, .pm-run-ground, .pm-runner { animation: none; } }
.pm-run-cacti { opacity: .4; }
.pm-run-ground { opacity: .5; }
.pm-run-clouds { opacity: .12; }
.pm-runner { opacity: .95; filter: drop-shadow(0 0 6px rgba(245, 197, 66, .35)); }
.pm-footer-v2 { background: linear-gradient(to bottom, transparent, rgba(5, 5, 5, .55) 40%); }

/* Homepage: runner scene hidden over the hero, fades in once you scroll down */
body:has(.pm-hero) .pm-site-skyline { opacity: 0; transition: opacity .3s linear; }
body:has(.pm-hero).pm-scrolled .pm-site-skyline { opacity: 1; }

/* Runner scene v2: bigger, and blended into the background instead of sitting on top of it */
.pm-site-skyline {
  width: calc(100% / 1.7); height: 150px;
  transform: scale(1.7); transform-origin: left bottom;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%) !important;
          mask-image: linear-gradient(to top, #000 55%, transparent 100%) !important;
}
.pm-site-skyline::before { background: linear-gradient(to top, rgba(8, 42, 44, .6), rgba(40, 20, 5, .25) 25%, transparent 60%); }
.pm-run-ground { opacity: .22; }
.pm-run-cacti { opacity: .26; }
.pm-run-clouds { opacity: .1; }
.pm-runner { opacity: .55; filter: sepia(.35) saturate(.9); }
.pm-site-skyline {
  -webkit-mask-image: linear-gradient(to top, #000 88%, transparent 100%) !important;
          mask-image: linear-gradient(to top, #000 88%, transparent 100%) !important;
}
.pm-run-ground { opacity: .38; }
.pm-run-cacti { opacity: .38; }
.pm-run-clouds { opacity: .14; }
.pm-runner { opacity: .78; filter: sepia(.25); }
/* runner sits near the left edge (visible beside centred content); cacti shifted 80px to stay in sync */
.pm-runner { left: 36px; }
.pm-run-cacti { animation-name: pm-run-cacti; }
@keyframes pm-run-cacti { from { background-position-x: -80px; } to { background-position-x: -480px; } }
/* Runner scene: subtle, background-only */
.pm-run-ground { opacity: .2; }
.pm-run-cacti { opacity: .2; }
.pm-run-clouds { opacity: .07; }
.pm-runner { opacity: .38; filter: sepia(.55) saturate(.7) blur(.3px); }
.pm-site-skyline::before { background: linear-gradient(to top, rgba(6, 36, 38, .45), transparent 55%); }
/* Runner scene fades out while a full-bleed picture section (e.g. the flagship banner) passes the bottom of the screen */
body.pm-runner-hidden .pm-site-skyline { opacity: 0 !important; }
.pm-site-skyline { transition: opacity .3s linear; }

/* No runner scene anywhere on the homepage */
body:has(.pm-hero) .pm-site-skyline, body:has(.pm-hero).pm-scrolled .pm-site-skyline { display: none !important; }

/* Footer: solid black so the background (runner, grid, glow) never shows through it */
.pm-footer-v2 { position: relative; background: #050505; border-top: 1px solid rgba(255, 255, 255, .05); }
.pm-footer-v2::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 80px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, #050505);
}

/* Footer starts with a hard edge (no fade above it) */
.pm-footer-v2::before { display: none; }

/* ==========================================================================
   Subscription plans v3: billing-period picker + single summary panel
   ========================================================================== */
.pm-ck {
  display: grid; grid-template-columns: 1fr; max-width: 920px; margin: 0 auto;
  background: #0a0e0f; border: 1px solid rgba(255, 255, 255, .09); border-radius: 6px; overflow: hidden;
}
@media (min-width: 820px) { .pm-ck { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.pm-ck-left { padding: 28px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
@media (min-width: 820px) { .pm-ck-left { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .07); } }
.pm-ck-right { padding: 28px; display: flex; flex-direction: column; background: #0f1415; }
.pm-ck:not(:has(.pm-ck-left)) { max-width: 520px; }
.pm-ck-label { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a8a93; }

.pm-ck-options { display: flex; flex-direction: column; }
.pm-ck-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 4px; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .07); color: #e4e4e7; font-family: inherit;
  transition: background-color .12s linear;
}
.pm-ck-opt:last-child { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pm-ck-opt:hover { background: rgba(255, 255, 255, .025); }
.pm-ck-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #52525b; flex-shrink: 0; position: relative; transition: border-color .12s linear; }
.pm-ck-opt[aria-checked="true"] .pm-ck-radio { border-color: var(--pm-accent); }
.pm-ck-opt[aria-checked="true"] .pm-ck-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pm-accent); }
.pm-ck-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-ck-opt-name { font-size: 16px; font-weight: 600; color: #fff; }
.pm-ck-opt-name em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--pm-accent); margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }
.pm-ck-opt-sub { font-size: 13px; color: #8a8a93; }
.pm-ck-opt-sub b { font-weight: 600; color: #4ade80; }
.pm-ck-opt-price { font-size: 17px; font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-ck-opt-price small { font-size: 12px; font-weight: 500; color: #8a8a93; margin-left: 2px; }
.pm-ck-opt[aria-checked="true"] .pm-ck-opt-price { color: var(--pm-accent); }

.pm-ck-plan[hidden] { display: none; }
.pm-ck-price { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pm-ck-price span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #8a8a93; margin-left: 4px; }
.pm-ck-bill { margin: 10px 0 20px; font-size: 13px; color: #8a8a93; }
.pm-ck-actions .pm-btn { width: 100%; height: 50px; border-radius: 4px; font-size: 15px; }
.pm-ck-list { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .07); display: grid; gap: 9px; }
.pm-ck-list li { font-size: 14px; color: #c4c4cc; padding-left: 16px; position: relative; }
.pm-ck-list li[hidden] { display: none; }
.pm-ck-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 2px; background: var(--pm-accent); }
.pm-ck-list strong { color: #fff; font-weight: 600; }
.pm-ck-note { margin: 20px 0 0; font-size: 12px; color: #6b6b74; line-height: 1.5; }

/* Blue theme: recolour the pixel runner scene art (cacti/ground/clouds are baked-in images) */
.pm-run-cacti, .pm-run-ground, .pm-run-clouds { filter: hue-rotate(150deg) saturate(.55); }
.pm-sub-banner-art span:nth-child(5n + 1) { --edge: rgba(122, 186, 186, .9); }

.pm-runner { filter: saturate(.85) brightness(.9); opacity: .4; }


/* Light teal accent: dark text on filled accent surfaces (like the Login button) */
.pm-btn-accent, .pm-btn-accent:hover,
.pm-card .package-add-to-cart:hover, .package-page .package-add-to-cart:hover,
.pm-badge-off, .pm-filters-badge, .pm-plan-flag, .pm-pill, .pm-ck-opt-name em,
.pm-card .package-tops > span, .package-page-tops > span,
.pm-tiered .popular-pill, .pm-tiered .tiered-subscribe-btn:hover, .pm-tiered .package-add-to-cart:hover,
.swal2-confirm { color: #0b1717 !important; }
.pm-btn-accent svg, .pm-card .package-add-to-cart:hover svg { color: #0b1717; }
.pm-pill { background: color-mix(in srgb, var(--pm-accent) 85%, transparent); border-color: transparent; }
.pm-pill .pm-ping::before, .pm-pill .pm-ping::after { background: #0b1717; }
.pm-ck-opt-name em { color: var(--pm-accent) !important; }
.pm-live-btn-main svg { color: #0b1717; }

/* Store logo shown in place of a missing/broken product picture */
img.pm-img-fallback {
  object-fit: contain !important; padding: 18%; opacity: .55 !important;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--pm-accent) 14%, #0e1213), #0a0d0e 75%);
}

img.pm-img-fallback { opacity: .9 !important; padding: 22%; }

.pm-filters:not([hidden]) { animation: none; }

/* Promo bar hides together with the header while scrolling down */
.coupon-strip.is-visible { transition: transform .18s linear, opacity .18s linear; }
body.pm-header-hidden .coupon-strip.is-visible { transform: translateY(-100%); opacity: 0; pointer-events: none; }
body.pm-header-hidden .pm-toolbar { top: 20px !important; }

/* Cart count badge */
.show-basket { position: relative; overflow: visible !important; }
.pm-cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; pointer-events: none;
  background: var(--pm-accent); color: #0b1717; font-size: 11px; font-weight: 800; line-height: 1; font-family: inherit;
  box-shadow: 0 0 0 2px #070909, 0 0 12px color-mix(in srgb, var(--pm-accent) 55%, transparent);
}
.pm-cart-badge[hidden] { display: none; }
.pm-cart-badge.is-pop { animation: pm-badge-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pm-badge-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pm-cart-badge.is-pop { animation: none; } }

/* Basket: coupon + creator code */
.pm-codes { display: grid; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.pm-code-label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-dim); }
.pm-code-row { display: flex; gap: 8px; }
.pm-code-row .pm-input { height: 40px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.pm-code-row .pm-input::placeholder { text-transform: none; letter-spacing: 0; }
.pm-code-row .pm-btn { height: 40px; padding: 0 16px; font-size: 13px; flex-shrink: 0; }
.pm-code-row .pm-btn:disabled { opacity: .6; cursor: default; }
.pm-code-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pm-code-form .pm-code-label + .pm-code-chips { margin-top: 0; }
.pm-code-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600;
  color: var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pm-accent) 40%, transparent);
}
.pm-code-chip strong { color: #fff; }
.pm-code-chip svg { width: 13px; height: 13px; }
.pm-code-chip a { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: #9fb4b4; font-size: 15px; line-height: 1; }
.pm-code-chip a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pm-code-combo { gap: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--pm-radius); background: #09090b; overflow: hidden; }
.pm-code-combo:focus-within { border-color: var(--pm-accent); }
.pm-code-combo .pm-input { border: 0; border-radius: 0; background: transparent; flex: 1; min-width: 0; }
.pm-code-combo .pm-btn { border: 0; border-left: 1px solid rgba(255, 255, 255, .1); border-radius: 0; height: 40px; }


/* Login popups (Cfx.re / Discord): big logo, centred text, Cancel + Login side by side */
.pm-login-card { max-width: 400px; padding: 30px 28px 26px; text-align: center; border-radius: 14px; background: #101314; }
.pm-login-card .pm-auth-logo { margin-bottom: 18px; }
.pm-login-card .pm-auth-logo img { height: 52px; max-width: 220px; }
.pm-login-card .pm-modal-text { font-size: 15px; line-height: 1.6; color: #8f9a9a; margin: 0 0 22px; }
.pm-login-card .pm-modal-actions { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 0; }
.pm-login-card .pm-modal-actions > * { flex: initial; }
.pm-login-card .fivem-cancel { flex: 0 0 auto !important; height: 46px; padding: 0 24px; border-radius: 10px; background: rgba(255,255,255,.05); border: 0; color: #a1a1aa; font-weight: 600; }
.pm-login-card .fivem-cancel:hover { background: rgba(239,68,68,.14); color: #f87171; }
.pm-login-card .login-with-button { flex: 1 1 auto !important; height: 46px; border-radius: 10px; font-size: 15px; font-weight: 600; gap: 10px; }
.pm-login-card .login-with-button svg { width: 18px; height: 18px; }
.pm-login-card .login-with-button:hover svg { transform: none; }
.pm-login-card form { flex: 1 1 100% !important; margin-top: 2px; }
.pm-login-card .pm-modal-actions-wrap { flex-wrap: wrap; }
.pm-login-card .pm-modal-actions-wrap .fivem-cancel { flex: 0 0 auto !important; }
.pm-login-card .pm-modal-actions-wrap .login-with-button { flex: 1 1 0 !important; }

/* ==========================================================================
   Documentation page
   ========================================================================== */
.pm-docs { padding: 40px 0 80px; }
.pm-docs-wrap { max-width: calc(1180px + 64px); }
.pm-docs-head { margin-bottom: 28px; }
.pm-docs-title { margin: 0 0 8px; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.03em; }
.pm-docs-intro { margin: 0 0 20px; color: var(--pm-muted); max-width: 640px; }
.pm-docs-intro:empty { display: none; }
.pm-docs-search { max-width: 460px; display: block; }
.pm-docs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .pm-docs-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 36px; } }
.pm-docs-nav { align-self: start; padding: 14px; border-radius: var(--pm-radius); background: rgba(10, 15, 15, .75); border: 1px solid rgba(255, 255, 255, .07); }
@media (min-width: 900px) { .pm-docs-nav { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; } }
.pm-docs-sec { margin: 12px 6px 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-dim); }
.pm-docs-sec:first-child { margin-top: 2px; }
.pm-docs-nav ul { list-style: none; margin: 0; padding: 0; }
.pm-docs-nav a { display: block; padding: 7px 10px; border-radius: 6px; color: #c4cccc; font-size: 14px; border-left: 2px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.pm-docs-nav a:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.pm-docs-nav a.is-active { color: var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 10%, transparent); border-left-color: var(--pm-accent); }
.pm-docs-body { min-width: 0; padding: 28px; border-radius: var(--pm-radius); background: rgba(10, 15, 15, .75); border: 1px solid rgba(255, 255, 255, .07); }
@media (min-width: 900px) { .pm-docs-body { padding: 36px 44px; } }
.pm-docs-body .pm-prose h2:first-of-type { margin-top: 0; font-size: 28px; }
.pm-docs-crumb { margin: 0 0 6px !important; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-accent); }
.pm-docs-body .pm-prose pre { background: #070909; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: 14px; overflow-x: auto; }
.pm-docs-body .pm-prose pre code { background: none; padding: 0; }
.pm-docs-loading, .pm-docs-empty { color: var(--pm-dim); }
.pm-docs-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .07); }
.pm-docs-pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .08); color: #fff; font-weight: 600; max-width: 48%; }
.pm-docs-pager a:hover { border-color: var(--pm-accent); }
.pm-docs-pager a span { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-dim); }
.pm-docs-next { margin-left: auto; text-align: right; }

/* Admin menu link (staff only) */
.pm-nav a.pm-nav-admin, .pm-mobile-menu a.pm-nav-admin { color: var(--pm-accent); display: inline-flex; align-items: center; gap: 6px; }
.pm-nav a.pm-nav-admin::before, .pm-mobile-menu a.pm-nav-admin::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pm-accent); box-shadow: 0 0 8px var(--pm-accent); }

/* Store admin page tabs */
.pm-admin-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pm-admin-tabs button { height: 36px; padding: 0 16px; border-radius: 6px; border: 0; background: none; color: var(--pm-dim); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pm-admin-tabs button:hover { color: #fff; }
.pm-admin-tabs button.is-active { background: rgba(255,255,255,.09); color: #fff; }
[data-admin-panel][hidden] { display: none; }

/* Reviews slider: 3 at a time, the next 3 come in one after another */
.pm-reviews-summary { margin: 10px 0 0; font-size: 13px; color: var(--pm-muted); }
.pm-reviews-summary i { color: var(--pm-accent); font-size: 12px; }
.pm-reviews-summary b { color: #fff; font-weight: 600; }
.pm-reviews { max-width: 1080px; align-items: stretch; }
.pm-review { animation: pmReviewIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.pm-reviews[data-dir="prev"] .pm-review { animation-name: pmReviewInPrev; }
.pm-reviews.is-leaving .pm-review { animation: pmReviewOut .26s ease-in both; animation-delay: calc(var(--i, 0) * 40ms); }
.pm-reviews.is-leaving[data-dir="prev"] .pm-review { animation-name: pmReviewOutPrev; }
@keyframes pmReviewIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes pmReviewInPrev { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes pmReviewOut { to { opacity: 0; transform: translateX(-24px); } }
@keyframes pmReviewOutPrev { to { opacity: 0; transform: translateX(24px); } }
.pm-reviews-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.pm-reviews-nav[hidden] { display: none; }
.pm-reviews-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pm-border); background: rgba(255,255,255,.03); color: #d4d4d8; display: grid; place-items: center; cursor: pointer; font-size: 12px; transition: background .2s, border-color .2s, color .2s; }
.pm-reviews-arrow:hover { border-color: var(--pm-accent); color: var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 8%, transparent); }
.pm-reviews-dots { display: flex; gap: 6px; }
.pm-reviews-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.18); cursor: pointer; transition: width .3s, background .3s; }
.pm-reviews-dots button.is-active { width: 22px; background: var(--pm-accent); }
@media (prefers-reduced-motion: reduce) { .pm-review, .pm-reviews.is-leaving .pm-review { animation: none; } }

/* "Page not found" (also what non-admins see on the admin page) */
.pm-notfound { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 90px 16px 120px; }
.pm-notfound-code { margin: 0; font-size: clamp(64px, 12vw, 120px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pm-accent) 70%, transparent); }
.pm-notfound .pm-h2 { margin: 0; }
.pm-notfound-text { margin: 0 0 12px; color: var(--pm-muted); font-size: 15px; }

/* Admin link: hidden until the admin check passes */
.pm-nav-admin[hidden] { display: none !important; }

/* Visually hidden, still read by search engines and screen readers */
.pm-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Recently purchased cards above "Latest work" (module.payments.html, style "cards"): wide rectangles like the old Recent Payments */
.pm-section.pm-recent-cards { padding-bottom: 0; }
.pm-rc-container { max-width: 1440px; }
.pm-recent-cards .pm-head-row { margin-bottom: 22px; }
.pm-rc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .pm-rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pm-rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 480px) { .pm-rc-grid { grid-template-columns: 1fr; } }
.pm-rc {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 100px; padding: 16px 18px; border-radius: var(--pm-radius);
  background: rgba(9, 15, 16, .72); border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .2s ease, transform .2s ease;
}
.pm-rc:hover { border-color: color-mix(in srgb, var(--pm-accent) 40%, transparent); transform: translateY(-2px); }
.pm-rc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pm-rc-avatar {
  position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  font-size: 19px; font-weight: 700; color: #0b1717; background: var(--pm-accent);
}
.pm-rc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-rc-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.pm-rc-name { font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-rc-time { font-size: 11.5px; color: var(--pm-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-rc-price {
  flex-shrink: 0; padding: 5px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 12%, transparent);
}
.pm-rc-pkg { margin: 0; font-size: 12.5px; color: var(--pm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-rc-pkg span { color: #e3eded; font-weight: 600; }

/* Admin tabs wrap on narrow screens */
@media (max-width: 640px) { .pm-admin-tabs { display: flex; flex-wrap: wrap; max-width: 100%; } .pm-admin-tabs button { flex: 1 1 auto; padding: 0 12px; } }

/* Reviews stay short: at most 3 lines of text per card */
.pm-review p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Live stats (module.services-cards.twig) */
.pm-stat[hidden] { display: none; }
.pm-stat-value { font-variant-numeric: tabular-nums; }
.pm-stat-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); animation: pmStatPulse 2s ease-in-out infinite;
}
@keyframes pmStatPulse { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .pm-stat-dot { animation: none; } }


/* Coupon / creator code box: error when a code isn't valid */
.pm-code-error { margin: 8px 0 0; font-size: 12.5px; color: #f87171; }
.pm-code-error[hidden] { display: none; }
.pm-basket-total-note { margin-top: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--pm-accent); text-align: right; }

/* Sales (Tebex package discounts): red ribbon across the picture corner, new price + crossed-out old price */
.pm-card-media { position: relative; overflow: hidden; }
.pm-sale-ribbon {
  position: absolute; top: 18px; right: -40px; z-index: 3; width: 150px; padding: 5px 0; transform: rotate(45deg);
  text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: #e03131; box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.pm-compact .pm-sale-ribbon { top: 13px; right: -44px; padding: 3px 0; font-size: 11px; }
.pm-price-row { display: flex; align-items: baseline; gap: 8px; }
.pm-price-row .pm-price-old { font-size: 12.5px; color: var(--pm-faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pm-compact .pm-price-row .pm-price-old { display: inline !important; font-size: 11.5px; }
.pm-compact .pm-price-row .pm-price-now { color: #fff; font-weight: 600; }
/* product page */
.pm-buy-sale { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pm-sale-label {
  display: inline-flex; padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: #e03131;
}
.pm-buy-row { display: flex; align-items: baseline; gap: 12px; }
.pm-buy-sale .pm-buy-old { font-size: 17px; text-decoration-thickness: 2px; }

/* Docs: pictures / GIFs open full size on click */
.pm-docs-viewer {
  position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 24px; cursor: zoom-out;
  background: rgba(3, 6, 7, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.pm-docs-viewer.is-open { opacity: 1; }
.pm-docs-viewer img { max-width: min(1400px, 100%); max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); transform: scale(.96); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.pm-docs-viewer.is-open img { transform: none; }
.pm-docs-viewer button {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; line-height: 1;
}
@media (prefers-reduced-motion: reduce) { .pm-docs-viewer, .pm-docs-viewer img { transition: none; } }

/* ===== Docs: GitHub-style Markdown (docs-page.twig) ===== */
@media (min-width: 1280px) {
  .pm-docs-wrap { max-width: calc(1180px + 64px + 240px); }
  .pm-docs-grid { grid-template-columns: 250px minmax(0, 1fr) 210px; }
}
.pm-md { font-size: 15px; line-height: 1.7; color: #d6dcdc; }
.pm-md h1, .pm-md h2, .pm-md h3, .pm-md h4 { position: relative; scroll-margin-top: 90px; }
.pm-md h2.pm-heading { font-size: 22px; margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.pm-md h3.pm-heading { font-size: 18px; margin: 26px 0 10px; }
.pm-md h4.pm-heading { font-size: 15px; margin: 20px 0 8px; }
.pm-md .pm-docs-h1 { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .09); margin-bottom: 20px !important; }
/* the # link appears on hover, like GitHub */
.pm-anchor { position: absolute; left: -22px; top: 0; padding-right: 6px; color: var(--pm-accent); text-decoration: none !important; font-weight: 500; opacity: 0; transition: opacity .15s ease; }
.pm-md .pm-heading:hover .pm-anchor, .pm-anchor:focus { opacity: 1; }
@media (max-width: 899px) { .pm-anchor { display: none; } }
.pm-md p, .pm-md ul, .pm-md ol, .pm-md .pm-table-wrap, .pm-md .pm-code, .pm-md .pm-alert { margin-bottom: 16px; }
.pm-md ol { padding-left: 24px; }
.pm-md ol > li::marker { color: var(--pm-accent); font-weight: 600; }
.pm-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 85%; padding: .2em .45em; border-radius: 6px; background: rgba(122, 186, 186, .1); color: #e6f2f2; }
.pm-md blockquote { padding: 2px 0 2px 16px; border-left: 3px solid rgba(255, 255, 255, .18); color: #9aa6a6; }
.pm-md hr { height: 1px; border: 0; background: rgba(255, 255, 255, .1); margin: 28px 0; }
.pm-md kbd { padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .2); border-bottom-width: 2px; border-radius: 5px; font: 12px ui-monospace, monospace; background: rgba(255, 255, 255, .05); }
/* tables */
.pm-table-wrap { overflow-x: auto; border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; }
.pm-md table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.pm-md th, .pm-md td { padding: 9px 14px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; }
.pm-md tr:last-child td { border-bottom: 0; }
.pm-md th { background: rgba(255, 255, 255, .04); color: #fff; font-weight: 600; }
.pm-md tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
/* task lists */
.pm-md li.pm-task { padding-left: 0; list-style: none; }
.pm-md li.pm-task::before { display: none; }
.pm-md li.pm-task input { margin: 0 8px 0 0; vertical-align: -2px; accent-color: var(--pm-accent); }
/* code blocks */
.pm-code { border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; overflow: hidden; background: #070b0c; }
.pm-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(255, 255, 255, .07); font: 600 11px ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--pm-dim); }
.pm-code-copy { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); background: transparent; color: #c4cccc; font: 600 11.5px var(--pm-font, inherit); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.pm-code-copy:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pm-code-copy.is-done { color: #4ade80; border-color: rgba(74, 222, 128, .4); }
.pm-code-copy svg { width: 13px; height: 13px; }
.pm-docs-body .pm-md .pm-code pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 14px 16px; overflow-x: auto; }
.pm-md pre code { padding: 0; background: none; font-size: 13px; line-height: 1.6; color: #d6dcdc; }
/* code colours (GitHub dark) */
.pm-md .hljs-comment, .pm-md .hljs-quote { color: #8b949e; font-style: italic; }
.pm-md .hljs-keyword, .pm-md .hljs-selector-tag, .pm-md .hljs-meta .hljs-keyword, .pm-md .hljs-doctag { color: #ff7b72; }
.pm-md .hljs-string, .pm-md .hljs-regexp, .pm-md .hljs-meta .hljs-string { color: #a5d6ff; }
.pm-md .hljs-number, .pm-md .hljs-literal, .pm-md .hljs-variable, .pm-md .hljs-template-variable, .pm-md .hljs-attr, .pm-md .hljs-attribute { color: #79c0ff; }
.pm-md .hljs-title, .pm-md .hljs-title.function_, .pm-md .hljs-section { color: #d2a8ff; }
.pm-md .hljs-built_in, .pm-md .hljs-type, .pm-md .hljs-class .hljs-title, .pm-md .hljs-title.class_ { color: #ffa657; }
.pm-md .hljs-name, .pm-md .hljs-selector-id, .pm-md .hljs-selector-class, .pm-md .hljs-tag { color: #7ee787; }
.pm-md .hljs-params, .pm-md .hljs-punctuation { color: #c9d1d9; }
.pm-md .hljs-deletion { color: #ffa198; background: rgba(248, 81, 73, .1); }
.pm-md .hljs-addition { color: #aff5b4; background: rgba(46, 160, 67, .15); }
/* > [!NOTE] style boxes */
.pm-alert { padding: 10px 16px; border-left: 4px solid; border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, .025); color: #d6dcdc; }
.pm-alert > :last-child { margin-bottom: 0; }
.pm-alert-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-weight: 600; }
.pm-alert-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.pm-alert-note { border-color: #4493f8; } .pm-alert-note .pm-alert-title { color: #4493f8; }
.pm-alert-tip { border-color: #3fb950; } .pm-alert-tip .pm-alert-title { color: #3fb950; }
.pm-alert-important { border-color: #ab7df8; } .pm-alert-important .pm-alert-title { color: #ab7df8; }
.pm-alert-warning { border-color: #d29922; } .pm-alert-warning .pm-alert-title { color: #d29922; }
.pm-alert-caution { border-color: #f85149; } .pm-alert-caution .pm-alert-title { color: #f85149; }
/* "On this page" */
.pm-docs-toc { display: none; }
@media (min-width: 1280px) {
  .pm-docs-toc:not([hidden]) { display: block; align-self: start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 0; }
}
.pm-docs-toc-title { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-dim); }
.pm-docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(255, 255, 255, .08); }
.pm-docs-toc li a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.4; color: #9aa6a6; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.pm-docs-toc li.lvl-3 a { padding-left: 26px; font-size: 12.5px; }
.pm-docs-toc li a:hover { color: #fff; }
.pm-docs-toc li a.is-active { color: var(--pm-accent); border-left-color: var(--pm-accent); }

/* ===== Docs v2: plain documentation layout (no card boxes, no shouty labels) ===== */
.pm-docs { padding: 0 0 96px; }
.pm-docs-wrap { max-width: 1360px; }
/* slim top bar */
.pm-docs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pm-docs-path { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pm-docs-store { color: #8f9b9b; font-size: 15px; text-decoration: none; }
.pm-docs-store:hover { color: #fff; }
.pm-docs-slash { color: #4b5555; }
.pm-docs-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #fff; }
.pm-docs-intro { display: none; }
.pm-docs-search { position: relative; display: flex; align-items: center; width: 280px; max-width: 100%; height: 36px; padding: 0 8px 0 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.pm-docs-search:focus-within { border-color: rgba(255, 255, 255, .28); }
.pm-docs-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: #7f8b8b; }
.pm-docs-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.pm-docs-search kbd { padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .14); font: 11px ui-monospace, monospace; color: #8f9b9b; }
/* three plain columns */
.pm-docs-grid { gap: 0; }
@media (min-width: 900px) { .pm-docs-grid { grid-template-columns: 240px minmax(0, 1fr); } }
@media (min-width: 1280px) { .pm-docs-grid { grid-template-columns: 240px minmax(0, 1fr) 200px; } }
.pm-docs-nav { padding: 24px 20px 24px 0; border: 0; border-radius: 0; background: none; }
@media (min-width: 900px) { .pm-docs-nav { border-right: 1px solid rgba(255, 255, 255, .07); top: 0; max-height: 100vh; } }
.pm-docs-sec { margin: 22px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #e9eeee; }
.pm-docs-sec:first-child { margin-top: 0; }
.pm-docs-nav ul { margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .08); }
.pm-docs-nav a { margin-left: -1px; padding: 5px 12px; border-radius: 0; border-left: 1px solid transparent; font-size: 14px; color: #9aa5a5; }
.pm-docs-nav a:hover { background: none; color: #fff; border-left-color: rgba(255, 255, 255, .35); }
.pm-docs-nav a.is-active { background: none; color: #fff; font-weight: 500; border-left-color: var(--pm-accent); }
.pm-docs-body { padding: 32px 0 0; border: 0; border-radius: 0; background: none; }
@media (min-width: 900px) { .pm-docs-body { padding: 36px 48px 0; } }
.pm-docs-body .pm-md { max-width: 780px; }
.pm-docs-crumb { margin: 0 0 10px !important; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8f9b9b; }
.pm-docs-crumb span { margin: 0 4px; color: #4b5555; }
.pm-md .pm-docs-h1 { margin: 0 0 24px !important; padding: 0; border: 0; font-size: 34px !important; font-weight: 700; letter-spacing: -.025em; }
/* normal bullet points (no checkmarks) */
.pm-md ul { list-style: disc; padding-left: 22px; }
.pm-md ul ul { list-style: circle; margin: 4px 0 4px; }
.pm-md ul > li { padding-left: 2px; margin: 5px 0; }
.pm-md ul > li::before { content: none; display: none; }
.pm-md ul > li::marker { color: #6b7777; }
.pm-md li.pm-task { list-style: none; margin-left: -20px; }
/* calmer accents */
.pm-md a { color: #8fd0d0; text-decoration-color: rgba(143, 208, 208, .35); }
.pm-md a:hover { text-decoration-color: currentColor; }
.pm-md code { background: rgba(255, 255, 255, .07); color: #e8eded; }
.pm-md h2.pm-heading { font-size: 23px; border-bottom-color: rgba(255, 255, 255, .07); }
.pm-docs-pager { max-width: 780px; margin-top: 48px; }
.pm-docs-pager a { flex: 0 1 48%; border-radius: 8px; border-color: rgba(255, 255, 255, .1); }
.pm-docs-pager a span { font-size: 12px; color: #8f9b9b; text-transform: none; letter-spacing: 0; }
.pm-docs-pager a:hover { border-color: rgba(255, 255, 255, .3); }
.pm-docs-toc:not([hidden]) { padding: 36px 0 0 24px; }
.pm-docs-toc-title { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #e9eeee; }
.pm-docs-toc ul { border-left-color: rgba(255, 255, 255, .07); }
.pm-docs-toc li a { color: #8f9b9b; }
.pm-docs-toc li a.is-active { color: #fff; border-left-color: var(--pm-accent); }

/* ===== Loading skeleton (store pages) + picture placeholders ===== */
.pm-skel { display: none; }
.pm-store[data-loading] > .pm-container-wide { position: relative; }
.pm-store[data-loading] > .pm-container-wide > :not(.pm-skel) { opacity: 0; transition: opacity .35s ease; animation: pmSkelFailsafeShow .3s 6.5s forwards; }
.pm-store[data-loading] .pm-skel { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: 0 16px; transition: opacity .3s ease; animation: pmSkelFailsafeHide .3s 6.5s forwards; }
.pm-store[data-loading="out"] > .pm-container-wide > :not(.pm-skel) { opacity: 1; }
.pm-store[data-loading="out"] .pm-skel { opacity: 0; pointer-events: none; }
@keyframes pmSkelFailsafeShow { to { opacity: 1; } }
@keyframes pmSkelFailsafeHide { to { opacity: 0; visibility: hidden; } }
/* shapes */
.pm-skel .sk { display: block; border-radius: 8px; background: #17191b; position: relative; overflow: hidden; }
.pm-skel .sk::after, .pm-card-media::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .045), transparent);
  animation: pmShimmer 1.4s ease-in-out infinite;
}
@keyframes pmShimmer { to { transform: translateX(100%); } }
.pm-skel-bar { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 0 0 24px; border: 1px solid rgba(255, 255, 255, .05); border-radius: 12px; background: rgba(16, 18, 19, .8); }
.pm-skel-bar .sk { height: 38px; }
.pm-skel-bar .sk-search { flex: 1 1 auto; max-width: 620px; }
.pm-skel-bar .sk-btn { width: 96px; }
.pm-skel-bar .sk-sq { width: 38px; }
.pm-skel-bar .sk-end { margin-left: auto; }
.pm-skel-tabs { display: flex; gap: 6px; margin: 0 0 24px; }
.pm-skel-tabs .sk { width: 110px; height: 40px; }
.pm-skel-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto 32px; padding: 22px 20px; border: 1px solid rgba(255, 255, 255, .05); border-radius: 12px; background: rgba(16, 18, 19, .8); }
.pm-skel-lines { display: grid; gap: 10px; flex: 1; }
.pm-skel-banner .sk-l1 { width: 220px; max-width: 60%; height: 20px; }
.pm-skel-banner .sk-l2 { width: 320px; max-width: 80%; height: 12px; }
.pm-skel-banner .sk-cta { width: 112px; height: 40px; }
.pm-skel-grid { display: grid; gap: 20px; max-width: 1180px; margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pm-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pm-skel-grid { grid-template-columns: repeat(var(--pm-skel-cols, 3), minmax(0, 1fr)); } }
.pm-skel-card { border: 1px solid rgba(255, 255, 255, .05); border-radius: 12px; overflow: hidden; background: rgba(16, 18, 19, .8); }
.pm-skel-card .sk-media { aspect-ratio: 16 / 10; border-radius: 0; background: #1a1c1e; }
.pm-skel-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.pm-skel-foot .sk-name { width: 45%; height: 14px; }
.pm-skel-foot .sk-price { width: 20%; height: 14px; }
/* product pictures everywhere: soft shimmer until the picture arrives (the picture covers it) */
.pm-card-media { background-color: #16191a; }
.pm-card-media::before { z-index: 0; }
.pm-card-media img { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .pm-skel .sk::after, .pm-card-media::before { animation: none; display: none; } }

/* Gallery without the Swiper script/CSS (slow or blocked CDN, or an old main.js):
   the main picture stays one 16:9 image and the thumbnails stay a row of 4 small pictures */
.pm-gallery .swiper { position: relative; overflow: hidden; }
.pm-gallery .swiper-wrapper { display: flex; }
.pm-gallery .swiper-slide { flex-shrink: 0; }
.pm-gallery-thumbs .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 45px) / 4); margin-right: 15px; }
.pm-gallery-main .swiper:not(.swiper-initialized) .swiper-button-next,
.pm-gallery-main .swiper:not(.swiper-initialized) .swiper-button-prev { display: none; }

/* Hero text animates with plain CSS: it plays the moment the page paints and never waits for the AOS script */
.pm-rise { animation: pmRise .6s cubic-bezier(.2,.7,.2,1) var(--rise-d, 0s) both; }
@keyframes pmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pm-rise { animation: none; } }

/* Login button: centred label + icon, same 40px height as the other header buttons, theme colour */
.pm-login {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px !important; line-height: 1; white-space: nowrap;
  border-radius: var(--pm-radius) !important; border: 1px solid transparent;
  background: var(--pm-accent, #7ABABA) !important; color: #071012 !important;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 0 0 0 rgba(122,186,186,0); transition: background .2s, box-shadow .2s, transform .15s;
}
.pm-login svg { width: 16px; height: 16px; flex: none; }
.pm-login:hover { background: color-mix(in srgb, var(--pm-accent, #7ABABA) 85%, #fff) !important; box-shadow: 0 0 0 4px rgba(122,186,186,.15); }
.pm-login:active { transform: translateY(1px); }

/* ==========================================================================
   Login popup + /login page (login-card.twig)
   Step 1: "Authentication Required" (Cancel / Connect FiveM). Step 2 (.is-auth): "Authenticating" spinner.
   ========================================================================== */
html.pm-lg-lock { overflow: hidden; }
.pm-lg { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; }
.pm-lg[hidden] { display: none; }
.pm-lg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s linear; }
.pm-lg.is-open .pm-lg-backdrop { opacity: 1; }
.pm-lg .pm-lg-card { opacity: 0; transform: scale(.97); transition: opacity .18s linear, transform .18s ease-out; }
.pm-lg.is-open .pm-lg-card { opacity: 1; transform: none; }

.pm-lg-card {
  position: relative; width: 100%; max-width: 450px; border-radius: 10px;
  border: 1px solid #222527; background: #0b0c0d; box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.pm-lg-ask { padding: 22px 24px 20px; }
.pm-lg-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: #8b8f93; cursor: pointer; transition: color .15s, background .15s;
}
.pm-lg-x:hover { color: #fff; background: #1a1c1e; }
.pm-lg-x svg { width: 16px; height: 16px; }
.pm-lg-title { display: flex; align-items: center; gap: 10px; margin: 0 36px 6px 0; font-size: 18px; font-weight: 700; color: #fff; }
.pm-lg-shield { display: grid; color: var(--pm-accent); }
.pm-lg-shield svg { width: 20px; height: 20px; }
.pm-lg-text { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: #9a9ea3; }
.pm-lg-actions { display: flex; justify-content: flex-end; gap: 10px; }
.pm-lg-cancel, .pm-lg-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 6px;
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.pm-lg-cancel { border: 1px solid #222527; background: #050505; color: #a1a5a9 !important; }
.pm-lg-cancel:hover { background: #151719; color: #fff !important; }
.pm-lg-btn { border: 0; background: var(--pm-accent); color: #071012 !important; }
.pm-lg-btn:hover { background: color-mix(in srgb, var(--pm-accent) 85%, #fff); }

/* step 2: Authenticating */
.pm-lg-wait { display: none; padding: 34px 24px 30px; text-align: center; }
.pm-lg-card.is-auth .pm-lg-ask { display: none; }
.pm-lg-card.is-auth .pm-lg-wait { display: block; animation: pmLgIn .2s ease-out; }
@keyframes pmLgIn { from { opacity: 0; } to { opacity: 1; } }
.pm-lg-ring { position: relative; width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #d4d4d8; color: #a1a1aa; }
.pm-lg-ring svg { width: 22px; height: 22px; }
.pm-lg-ring-arc { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-right-color: var(--pm-accent); animation: pmLgSpin .9s linear infinite; }
@keyframes pmLgSpin { to { transform: rotate(360deg); } }
.pm-lg-wait-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff; }
.pm-lg-wait-text { margin: 0 0 14px; font-size: 14px; color: #8b8f93; }
.pm-lg-dots { display: flex; justify-content: center; gap: 5px; }
.pm-lg-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-accent); animation: pmLgDot 1s ease-in-out infinite; }
.pm-lg-dots i:nth-child(2) { animation-delay: .15s; }
.pm-lg-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pmLgDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.pm-lg-page { width: 100%; display: flex; justify-content: center; }
@media (max-width: 420px) { .pm-lg-actions > * { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-lg .pm-lg-card, .pm-lg-backdrop { transition: none; } }
/* keep the header Login button hidden on phones/tablets (the menu has its own) */
@media (max-width: 1023.98px) { .pm-login.pm-hide-mobile { display: none !important; } }
/* Discord version of the login card (options.html) */
.pm-lg-page .pm-lg-popup-only { display: none; }
.pm-lg-discord .pm-lg-shield, .pm-lg-discord .pm-lg-ring { color: #5865f2; }
.pm-lg-discord .pm-lg-ring svg { width: 24px; height: 24px; }
.pm-lg-discord .pm-lg-ring-arc { border-right-color: #5865f2; }
.pm-lg-discord .pm-lg-dots i { background: #5865f2; }
.pm-lg-btn-discord { background: #5865f2; color: #fff !important; }
.pm-lg-btn-discord:hover { background: #4752c4; }
.pm-lg-skip { margin: 0 auto 0 0; }
/* Discord card when Tebex opens options.html as a page: still shown as a popup over the page */
.pm-lg-static { z-index: 10040; }
html:has(.pm-lg-static) { overflow: hidden; }
.pm-lg-under { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 10030; pointer-events: none; background: #0a0d0e; }
/* basket drawer right after a payment (main.js handlePaymentComplete) */
.pm-basket-done { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; text-align: center; }
.pm-basket-done b { font-size: 18px; color: #fff; }
.pm-basket-done span { font-size: 13.5px; color: #8f9a9a; }
/* "Purchase complete" popup (main.js showPurchaseComplete) */
.pm-done-card { max-width: 420px; padding: 34px 26px 24px; text-align: center; }
.pm-done-ring { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: var(--pm-accent);
  border: 2px solid var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 12%, transparent); }
.pm-done-ring svg { width: 30px; height: 30px; }
.pm-lg.is-open .pm-done-ring svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pmDoneTick .45s ease-out .15s forwards; }
@keyframes pmDoneTick { to { stroke-dashoffset: 0; } }
.pm-done-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #fff; }
.pm-done-text { margin: 0 auto 22px; max-width: 320px; font-size: 14px; line-height: 1.55; color: #9a9ea3; }
.pm-done-actions { display: flex; justify-content: center; gap: 10px; }
@media (max-width: 420px) { .pm-done-actions { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .pm-lg.is-open .pm-done-ring svg path { animation: none; stroke-dashoffset: 0; } }