/* ============================================================================
   PRIME ARX — Online shop, light/cards/EUR. Implements brandbook-v2.html
   ============================================================================ */

:root{
  /* Surfaces */
  --c-bg:#F5F5F7; --c-surface:#FFFFFF; --c-elevated:#FAFAFB;
  --c-tinted:#F0EFF3;

  /* Borders */
  --c-border:#E5E7EB; --c-border-soft:#EFEFF2; --c-border-firm:#D1D5DB;

  /* Ink */
  --c-ink:#0F172A; --c-ink-2:#334155; --c-ink-3:#64748B; --c-ink-4:#94A3B8; --c-ink-5:#CBD5E1;

  /* Brand */
  --c-orange:#FF6B1A; --c-orange-2:#FF8542; --c-orange-3:#E55A0F;
  --c-orange-4:#FFE7D6; --c-orange-5:#FFF3EA;

  --c-violet:#7C5CFF; --c-violet-2:#9B82FF; --c-violet-3:#6244E5;
  --c-violet-4:#EFEAFF; --c-violet-5:#F6F3FF;

  /* Semantic */
  --c-success:#22C55E; --c-success-2:#DCFCE7;
  --c-warning:#F59E0B; --c-warning-2:#FEF3C7;
  --c-danger:#EF4444;  --c-danger-2:#FEE2E2;
  --c-star:#FFB800;

  /* Type */
  --f-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;

  /* Spacing 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:80px;
  --s-11:120px; --s-12:160px;

  /* Radius */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:20px; --r-6:24px;
  --r-pill:999px;

  /* Shadows */
  --sh-1:0 1px 2px rgba(15,23,42,.04);
  --sh-2:0 2px 8px rgba(15,23,42,.06);
  --sh-3:0 8px 24px rgba(15,23,42,.08);
  --sh-4:0 16px 48px rgba(15,23,42,.12);
  --sh-orange:0 8px 24px rgba(255,107,26,.25);
  --sh-violet:0 8px 24px rgba(124,92,255,.25);

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:160ms; --dur-2:240ms; --dur-3:400ms;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font:400 15px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
::selection{ background:var(--c-orange-4); color:var(--c-orange-3) }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
  color:var(--c-ink);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.px-shell{ max-width:1240px; margin:0 auto; padding:0 var(--s-5) }
@media(min-width:768px){ .px-shell{ padding:0 var(--s-7) } }
@media(min-width:1280px){ .px-shell{ padding:0 var(--s-8) } }

.px-icon{ flex-shrink:0; pointer-events:none }

/* ============================================================================
   BRAND MARK
   ============================================================================ */
.px-mark-icon{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  filter:drop-shadow(0 4px 10px rgba(255,107,26,.28));
}
.px-mark-icon svg{ width:100%; height:100% }
.px-mark-icon.is-sm{ width:30px; height:30px; filter:drop-shadow(0 2px 4px rgba(255,107,26,.22)) }
.px-mark-icon.is-lg{ width:88px; height:88px }
.px-mark-icon.is-xl{ width:144px; height:144px }

.px-lockup{ display:inline-block; height:40px; color:var(--c-ink); }
.px-lockup svg{ height:100%; width:auto; display:block }
.px-lockup.is-sm{ height:30px }
.px-lockup.is-lg{ height:64px }
.px-lockup.is-xl{ height:100px }

/* ============================================================================
   HEADER
   ============================================================================ */
.px-header{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border-soft);
  position:sticky; top:0; z-index:50;
}

/* Top utility row */
.px-topbar{
  background:var(--c-bg);
  border-bottom:1px solid var(--c-border-soft);
  font-size:.8125rem;
  color:var(--c-ink-2);
}
.px-topbar-inner{
  display:flex;justify-content:space-between;align-items:center;
  height:36px; gap:var(--s-5);
}
.px-topbar-links{ display:flex; gap:var(--s-5); flex-wrap:wrap }
.px-topbar-links a{ color:var(--c-ink-2); transition:color var(--dur-1) var(--ease) }
.px-topbar-links a:hover{ color:var(--c-orange) }
.px-topbar-right{ display:flex; align-items:center; gap:var(--s-3); color:var(--c-ink-3) }
.px-topbar-right a{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--c-ink-3); border-radius:var(--r-2); transition:all var(--dur-1) var(--ease) }
.px-topbar-right a:hover{ background:var(--c-tinted); color:var(--c-ink) }
.px-locale{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border:1px solid var(--c-border); border-radius:var(--r-2);
  font-size:.6875rem; font-weight:500; letter-spacing:.04em; color:var(--c-ink-2);
  text-transform:uppercase;
}
.px-locale strong{ color:var(--c-ink); font-weight:600 }

/* Main row */
.px-main-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s-5);
  padding-top:var(--s-4); padding-bottom:var(--s-4);
}
.px-search{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-pill);
  max-width:560px; width:100%; margin:0 auto;
  transition:all var(--dur-1) var(--ease);
}
.px-search:focus-within{
  border-color:var(--c-orange);
  box-shadow:0 0 0 4px var(--c-orange-5);
}
.px-search svg{ color:var(--c-ink-3) }
.px-search input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent; font:inherit; color:inherit;
}
.px-search input::placeholder{ color:var(--c-ink-4) }
.px-kbd{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 8px; height:22px; border-radius:6px;
  background:var(--c-bg); border:1px solid var(--c-border-soft);
  font:600 11px/1 var(--f-body); color:var(--c-ink-3);
  letter-spacing:.02em;
  flex-shrink:0;
}

.px-action-stack{ display:flex; align-items:center; gap:var(--s-2) }
.px-icon-btn{
  position:relative;
  width:38px; height:38px; border-radius:var(--r-3);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-ink-2); background:transparent;
  transition:all var(--dur-1) var(--ease);
}
.px-icon-btn:hover{ background:var(--c-tinted); color:var(--c-ink) }
.px-icon-btn .px-cart-count,
.px-icon-btn .px-dot{
  position:absolute; top:0; right:0;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--c-orange); color:#fff;
  border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font:700 10px/1 var(--f-body);
  border:2px solid var(--c-surface);
}
.px-cart-count.is-empty{ display:none }
.px-wishlist-count{
  position:absolute; top:0; right:0;
  min-width:18px; height:18px; padding:0 5px;
  background:#BE123C; color:#fff;
  border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font:700 10px/1 var(--f-body);
  border:2px solid var(--c-surface);
}
.px-wishlist-count.is-empty{ display:none }
.px-icon-btn .px-dot.is-violet{ background:var(--c-violet) }
.px-icon-btn .px-dot.is-danger{ background:var(--c-danger) }
.px-account-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px 4px 4px;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-pill); font-size:.875rem; font-weight:500; color:var(--c-ink);
  transition:all var(--dur-1) var(--ease);
}
.px-account-chip:hover{ background:var(--c-orange-5); border-color:var(--c-orange-4); color:var(--c-orange-3) }
.px-account-chip .px-avatar{
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5CFF);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font:600 11px/1 var(--f-body);
}
.px-account-chip.is-guest{ padding:6px 14px; gap:6px }

/* Bottom nav row */
.px-nav{
  display:flex; align-items:center; gap:4px;
  border-top:1px solid var(--c-border-soft);
  padding:8px 0;
  overflow:visible; /* dropdowns must escape this row */
}
@media(max-width:1100px){
  .px-nav{ overflow-x:auto; overflow-y:visible; scrollbar-width:none }
  .px-nav::-webkit-scrollbar{ display:none }
}
.px-nav-item{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-2);
  font-size:.875rem; font-weight:500; color:var(--c-ink-2);
  white-space:nowrap;
  transition:all var(--dur-1) var(--ease);
}
.px-nav-item:hover{ background:var(--c-tinted); color:var(--c-ink) }
.px-nav-item.is-active,
.px-nav-item[aria-expanded="true"]{ background:var(--c-tinted); color:var(--c-ink) }
.px-nav-item.is-cta{
  background:var(--c-orange); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(255,107,26,.25);
}
.px-nav-item.is-cta:hover{ background:var(--c-orange-3); color:#fff }
.px-nav-item.is-violet{
  background:var(--c-violet-4); color:var(--c-violet-3);
}
.px-nav-item.is-violet:hover{ background:var(--c-violet-5); color:var(--c-violet-3) }
.px-nav-spacer{ flex:1 }

/* Store mark dot */
.px-store-mark{
  width:14px; height:14px; border-radius:4px; flex-shrink:0;
  display:inline-block;
}
.px-store-mark.steam   { background:#1B2838 }
.px-store-mark.epic    { background:#2A2A2A }
.px-store-mark.gog     { background:#86328A }
.px-store-mark.ea      { background:#FF4747 }
.px-store-mark.ubi     { background:#0085FF }
.px-store-mark.battle  { background:#00AEFF }
.px-store-mark.origin  { background:#F56C2D }
.px-store-mark.ink     { background:var(--c-ink) }

/* Dropdown panels (Genres, Platforms) */
.px-dropdown{ position:relative }
.px-dropdown-panel{
  position:absolute; top:100%; left:0;
  min-width:680px; max-width:900px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-top:0;
  border-radius:0 0 var(--r-4) var(--r-4);
  box-shadow:var(--sh-3);
  padding:var(--s-5);
  z-index:60;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.px-dropdown.is-open .px-dropdown-panel,
.px-dropdown:hover .px-dropdown-panel,
.px-dropdown:focus-within .px-dropdown-panel{
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.px-dropdown-title{
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-ink-3);
  margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--c-border-soft);
  display:flex; align-items:center; gap:var(--s-2);
}
.px-dropdown-grid{
  display:grid; grid-template-columns:repeat(3,minmax(200px,1fr));
  gap:2px;
}
@media(max-width:900px){ .px-dropdown-grid{ grid-template-columns:repeat(2,1fr) } }
.px-dp-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--r-2);
  color:var(--c-ink); font-size:.875rem; font-weight:500;
  white-space:nowrap;
  transition:background var(--dur-1) var(--ease);
}
.px-dp-link > span:first-of-type:not(.px-store-mark){
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis;
}
.px-dp-link:hover{ background:var(--c-orange-5); color:var(--c-orange-3) }
.px-dp-link .px-dp-count{
  margin-left:auto;
  font-size:.75rem; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--c-ink-3);
}
.px-dp-link:hover .px-dp-count{ color:var(--c-orange) }
.px-dp-link svg{ width:16px; height:16px; flex-shrink:0 }
.px-dropdown-foot{
  margin-top:var(--s-4); padding-top:var(--s-4);
  border-top:1px solid var(--c-border-soft);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8125rem; color:var(--c-ink-3);
}
.px-dropdown-foot a{
  color:var(--c-orange); font-weight:500; display:inline-flex; align-items:center; gap:4px;
}
.px-dropdown-foot a:hover{ color:var(--c-orange-3) }

/* Mobile menu toggle */
.px-mobile-toggle{ display:none }
@media(max-width:880px){
  .px-mobile-toggle{ display:inline-flex }
  .px-nav{ display:none }
  .px-search{ max-width:none }
  .px-account-chip span:not(.px-avatar){ display:none }
  .px-account-chip{ padding:4px; border:0; background:transparent }
  .px-main-row{ grid-template-columns:auto 1fr auto; gap:var(--s-3) }
  .px-topbar{ display:none }
  .px-dropdown-panel{ position:fixed; left:var(--s-3); right:var(--s-3); min-width:0; width:auto }
}

/* ─── Phone: search drops to second row, action stack stays compact ─── */
@media(max-width:720px){
  .px-main-row{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo actions"
      "search search";
    gap:var(--s-3);
    padding-top:var(--s-3); padding-bottom:var(--s-3);
  }
  .px-main-row > .px-lockup{ grid-area:logo; height:34px }
  .px-main-row > .px-search{ grid-area:search; max-width:none; margin:0 }
  .px-main-row > .px-action-stack{ grid-area:actions; gap:2px }
  .px-icon-btn{ width:36px; height:36px }
  .px-search input{ font-size:16px } /* prevent iOS zoom on focus */
  /* Optional secondary icon hidden at narrow widths */
  .px-action-stack .px-icon-btn[aria-label="Wishlist"]{ display:none }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.px-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-3);
  font-family:var(--f-body); font-weight:500; font-size:.9375rem; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:all var(--dur-1) var(--ease);
}
.px-btn-primary{
  background:var(--c-orange); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(255,107,26,.25);
}
.px-btn-primary:hover{ background:var(--c-orange-3); color:#fff }
.px-btn-violet{ background:var(--c-violet); color:#fff }
.px-btn-violet:hover{ background:var(--c-violet-3); color:#fff }
.px-btn-ghost{
  background:var(--c-surface); color:var(--c-ink); border-color:var(--c-border);
}
.px-btn-ghost:hover{ background:var(--c-tinted); border-color:var(--c-border-firm); color:var(--c-ink) }
.px-btn-tinted{ background:var(--c-orange-5); color:var(--c-orange-3) }
.px-btn-tinted:hover{ background:var(--c-orange-4); color:var(--c-orange-3) }
.px-btn-dark{ background:var(--c-ink); color:#fff }
.px-btn-dark:hover{ background:#0A1120; color:#fff }
.px-btn-lg{ padding:14px 24px; font-size:1rem; border-radius:var(--r-3) }
.px-btn-sm{ padding:7px 12px; font-size:.8125rem; border-radius:var(--r-2) }
.px-btn-block{ width:100% }

/* ============================================================================
   PRICE
   ============================================================================ */
.px-price{
  font-family:var(--f-display); font-weight:700;
  color:var(--c-ink); letter-spacing:-.01em;
  font-size:1.25rem; line-height:1;
}
.px-price-frac{ font-size:.6em; font-weight:600; color:var(--c-ink-3); margin-left:1px }

/* ============================================================================
   PILLS / TAGS
   ============================================================================ */
.px-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:500;
  border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-ink-2);
  white-space:nowrap;
}
.px-pill-orange{ background:var(--c-orange-5); border-color:var(--c-orange-4); color:var(--c-orange-3) }
.px-pill-violet{ background:var(--c-violet-5); border-color:var(--c-violet-4); color:var(--c-violet-3) }
.px-pill-success{ background:var(--c-success-2); border-color:transparent; color:#15803D }
.px-pill-discount{
  background:var(--c-orange); border-color:var(--c-orange); color:#fff;
  font-weight:700; padding:2px 6px; font-size:11px;
}

/* ============================================================================
   CARDS / LAYOUT BLOCKS
   ============================================================================ */
.px-section{ padding:var(--s-9) 0 }
.px-section.is-first{ padding-top:var(--s-7) }
.px-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:var(--s-6); gap:var(--s-4);
}
.px-section-head h2{
  font-size:clamp(1.5rem,2.5vw,2rem);
  letter-spacing:-.02em; color:var(--c-ink);
}
.px-section-head .px-eyebrow{
  font-family:var(--f-body);
  font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-orange);
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:6px;
}
.px-section-head a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.875rem; font-weight:500;
  color:var(--c-ink-2);
}
.px-section-head a:hover{ color:var(--c-orange) }

.px-grid{ display:grid; gap:var(--s-4) }
.px-grid-2{ grid-template-columns:repeat(2,1fr) }
.px-grid-3{ grid-template-columns:1fr }
.px-grid-4{ grid-template-columns:repeat(2,1fr) }
@media(min-width:720px){
  .px-grid-3{ grid-template-columns:repeat(3,1fr) }
  .px-grid-4{ grid-template-columns:repeat(4,1fr); gap:var(--s-5) }
}

/* ============================================================================
   HERO PROMO
   ============================================================================ */
.px-hero{
  position:relative;
  margin:var(--s-7) 0 0;
  border-radius:var(--r-5);
  background-color:#1A1A2E;
  /* background-image is set inline in template (overlay + key art) */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:var(--s-10) var(--s-9);
  color:#fff; overflow:hidden;
  min-height:420px;
  display:flex; align-items:center;
}
.px-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 85% 25%, rgba(255,107,26,.30), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(124,92,255,.25), transparent 55%);
}
.px-hero-content{ position:relative; z-index:1; max-width:580px }
.px-hero h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem,4vw,3.25rem);
  letter-spacing:-.02em; color:#fff; line-height:1.05;
  margin-bottom:var(--s-5);
}
.px-hero h1 em{ font-style:normal; color:var(--c-orange-2) }
.px-hero p{
  color:rgba(255,255,255,.8); max-width:48ch;
  font-size:1.0625rem; margin-bottom:var(--s-6);
}
.px-hero-art{
  position:absolute; right:0; top:0; bottom:0; width:55%;
  background-position:center right; background-size:cover; background-repeat:no-repeat;
  z-index:0; opacity:.85;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 50%);
          mask-image:linear-gradient(90deg, transparent, black 50%);
}
@media(max-width:880px){
  .px-hero-art{ display:none }
  .px-hero-content{ max-width:none }
}

/* ============================================================================
   SHORTCUT TILES (Top sellers / Steam picks / Pre-orders)
   ============================================================================ */
.px-tiles{
  display:grid; grid-template-columns:1fr; gap:var(--s-4);
  margin-top:var(--s-5);
}
@media(min-width:720px){ .px-tiles{ grid-template-columns:repeat(3,1fr) } }
.px-tile{
  display:flex; flex-direction:column; justify-content:space-between;
  border-radius:var(--r-4);
  padding:var(--s-5); height:140px;
  color:#fff; position:relative; overflow:hidden;
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.px-tile:hover{ transform:translateY(-2px); box-shadow:var(--sh-3) }
.px-tile-eyebrow{ font-size:.6875rem; opacity:.8; letter-spacing:.06em; text-transform:uppercase }
.px-tile-name{ font-family:var(--f-display); font-weight:700; font-size:1.125rem; letter-spacing:-.01em }
.px-tile.is-orange{ background:linear-gradient(135deg,#FF8542 0%,#C73509 100%) }
.px-tile.is-steam{ background:linear-gradient(135deg,#1B2838 0%,#0E1A28 100%) }
.px-tile.is-violet{ background:linear-gradient(135deg,#A78BFA 0%,#6244E5 100%) }

/* ============================================================================
   PRODUCT CARD
   ============================================================================ */
.px-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  transition:all var(--dur-2) var(--ease);
}
.px-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-3);
  border-color:var(--c-violet-4);
}
.px-card-cover{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:var(--s-3);
  background:#222 center/cover no-repeat;
}
.px-card-cover::after{
  content:""; position:absolute; inset:auto 0 0 0; height:50%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events:none;
}
.px-card-flag{
  position:absolute; top:var(--s-3); left:var(--s-3); z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px;
  background:var(--c-violet); color:#fff;
  border-radius:var(--r-2);
  font-size:11px; font-weight:600;
  box-shadow:0 4px 8px rgba(0,0,0,.18);
}
.px-card-flag.is-orange{ background:var(--c-orange) }
.px-card-discount{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:2;
  background:var(--c-orange); color:#fff;
  padding:4px 8px; border-radius:var(--r-2);
  font:700 12px/1 var(--f-display);
}
.px-card-body{ padding:var(--s-4) var(--s-4) var(--s-3); flex:1 }
.px-card-title{
  font-family:var(--f-display); font-weight:600;
  font-size:.9375rem; letter-spacing:-.01em;
  color:var(--c-ink); line-height:1.3;
  margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}
.px-card-title a{ color:inherit }
.px-card-title a:hover{ color:var(--c-orange) }
.px-card-meta{
  display:flex; align-items:center; gap:6px;
  font-size:.75rem; color:var(--c-ink-3);
}
.px-card-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--s-3) var(--s-4) var(--s-4);
  border-top:1px solid var(--c-border-soft);
  gap:var(--s-3);
}
.px-card-pricewrap{ display:flex; flex-direction:column; gap:2px }
.px-card-was{
  font-size:.75rem; color:var(--c-ink-4); text-decoration:line-through;
}

/* ============================================================================
   SHOP / CATALOG ARCHIVE
   ============================================================================ */
.px-shop-head{
  padding:var(--s-9) 0 var(--s-6);
}
.px-shop-head h1{
  font-size:clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing:-.025em;
  margin-bottom:var(--s-2);
}
.px-shop-sub{
  color:var(--c-ink-3);
  font-size:1rem;
  margin:0 0 var(--s-5);
  max-width:60ch;
}

.px-active-filters{
  display:flex; flex-wrap:wrap; gap:6px;
  align-items:center;
  padding:var(--s-3) 0 0;
}
.px-active-filters-label{
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--c-ink-3);
  margin-right:var(--s-2);
}
.px-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 12px;
  background:var(--c-orange-5); color:var(--c-orange-3);
  border:1px solid var(--c-orange-4);
  border-radius:var(--r-pill);
  font-size:.8125rem; font-weight:500;
  transition:all var(--dur-1) var(--ease);
}
.px-chip:hover{ background:var(--c-orange-4); color:var(--c-orange-3) }
.px-chip svg{ opacity:.7 }
.px-active-filters-clear{
  font-size:.8125rem; font-weight:500;
  color:var(--c-ink-3);
  margin-left:6px;
  transition:color var(--dur-1) var(--ease);
}
.px-active-filters-clear:hover{ color:var(--c-orange) }

.px-shop-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-6);
  padding-bottom:var(--s-10);
}
@media(min-width:900px){
  .px-shop-layout{ grid-template-columns:260px 1fr; gap:var(--s-7) }
}

/* Filter sidebar */
.px-shop-filters{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-5);
  align-self:start;
  position:sticky; top:var(--s-7);
  max-height:calc(100vh - var(--s-9));
  overflow-y:auto;
}
@media(max-width:899px){
  .px-shop-filters{ position:static; max-height:none }
}
.px-shop-filters-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:var(--s-4); margin-bottom:var(--s-4);
  border-bottom:1px solid var(--c-border-soft);
}
.px-shop-filters-head h3{
  font-size:.875rem; font-weight:600; letter-spacing:0;
  color:var(--c-ink); margin:0;
  display:flex; align-items:center; gap:8px;
}
.px-shop-filters-head h3 svg{ color:var(--c-orange) }
.px-filter-clear{
  font-size:.75rem; color:var(--c-ink-3);
  font-weight:500;
  transition:color var(--dur-1) var(--ease);
}
.px-filter-clear:hover{ color:var(--c-orange) }

.px-filter-group + .px-filter-group{
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--c-border-soft);
}
.px-filter-title{
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-ink-3);
  margin:0 0 var(--s-3);
  display:flex; align-items:center; gap:8px;
}
.px-filter-active-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--c-orange); color:#fff;
  border-radius:var(--r-pill);
  font-size:11px; font-weight:700;
  letter-spacing:0;
}
.px-filter-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1px;
}
.px-filter-list .is-hidden{ display:none }
.px-filter-list.is-expanded .is-hidden{ display:block }

.px-filter-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:var(--r-2);
  font-size:.875rem; color:var(--c-ink-2);
  transition:background var(--dur-1) var(--ease);
}
.px-filter-item:hover{ background:var(--c-tinted); color:var(--c-ink) }
.px-filter-item.is-active{ color:var(--c-ink); background:var(--c-orange-5) }
.px-filter-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.px-filter-count{
  font-size:.6875rem; color:var(--c-ink-4);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.px-filter-item.is-active .px-filter-count{ color:var(--c-orange) }
.px-filter-check{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--c-border-firm);
  flex-shrink:0; position:relative;
  background:var(--c-surface);
  transition:all var(--dur-1) var(--ease);
}
.px-filter-item.is-active .px-filter-check{
  background:var(--c-orange); border-color:var(--c-orange);
}
.px-filter-item.is-active .px-filter-check::after{
  content:""; position:absolute;
  left:5px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.px-filter-toggle{
  margin-top:var(--s-3);
  background:none; border:0;
  padding:6px 0;
  font-size:.75rem; font-weight:500;
  color:var(--c-orange);
  cursor:pointer;
}
.px-filter-toggle:hover{ color:var(--c-orange-3) }

/* Toolbar above grid */
.px-shop-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s-5); gap:var(--s-4);
  flex-wrap:wrap;
}
.px-shop-toolbar-count{
  color:var(--c-ink-3); font-size:.875rem;
}
.px-shop-toolbar-count strong{ color:var(--c-ink); font-weight:600 }
.px-shop-sort{ display:flex; align-items:center; gap:8px }
.px-shop-sort label{
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--c-ink-3);
}
.px-shop-sort select{
  appearance:none; -webkit-appearance:none;
  background:var(--c-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center / 12px;
  border:1px solid var(--c-border);
  border-radius:var(--r-2);
  padding:8px 32px 8px 14px;
  font:500 .875rem/1 var(--f-body);
  color:var(--c-ink); cursor:pointer;
  transition:all var(--dur-1) var(--ease);
}
.px-shop-sort select:hover{ border-color:var(--c-border-firm); background-color:var(--c-tinted) }
.px-shop-sort select:focus{ outline:0; border-color:var(--c-orange); box-shadow:0 0 0 3px var(--c-orange-5) }

.px-shop-grid{ margin-bottom:var(--s-7) }
@media(min-width:900px){
  .px-shop-grid{ grid-template-columns:repeat(3,1fr) }
}
@media(min-width:1200px){
  .px-shop-grid{ grid-template-columns:repeat(4,1fr) }
}

/* Pagination */
.px-pagination{
  display:flex; gap:6px; justify-content:center;
  margin:var(--s-7) 0 var(--s-5); flex-wrap:wrap;
}
.px-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:var(--r-2);
  background:var(--c-surface); border:1px solid var(--c-border);
  font:500 .875rem/1 var(--f-body); color:var(--c-ink-2);
  transition:all var(--dur-1) var(--ease);
  gap:4px;
}
.px-pagination .page-numbers:hover{ background:var(--c-tinted); color:var(--c-ink); border-color:var(--c-border-firm) }
.px-pagination .page-numbers.current{
  background:var(--c-orange); color:#fff; border-color:var(--c-orange);
  pointer-events:none;
}
.px-pagination .page-numbers.dots{ background:transparent; border:0; color:var(--c-ink-4); pointer-events:none }
.px-pagination .is-flipped{ transform:rotate(180deg) }

/* Empty state */
.px-shop-empty{
  text-align:center;
  padding:var(--s-11) var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
}
.px-shop-empty-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  background:var(--c-tinted); color:var(--c-ink-3);
  border-radius:50%;
  margin-bottom:var(--s-5);
}
.px-shop-empty h2{ font-size:1.5rem; margin-bottom:var(--s-3) }
.px-shop-empty p{ color:var(--c-ink-3); margin-bottom:var(--s-5); max-width:42ch; margin-left:auto; margin-right:auto }

/* ============================================================================
   SINGLE PRODUCT PAGE
   ============================================================================ */
.px-product{ padding-bottom:var(--s-11) }

/* Hero */
.px-product-hero{
  position:relative;
  margin:var(--s-5) 0 0;
  border-radius:var(--r-5);
  min-height:380px;
  overflow:hidden;
  display:flex; align-items:flex-end;
  padding:var(--s-9) var(--s-7) var(--s-7);
  color:#fff;
  background-color:#1A1A2E;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media(min-width:900px){ .px-product-hero{ min-height:440px; padding:var(--s-10) var(--s-8) var(--s-8) } }
.px-product-hero-content{ position:relative; z-index:1; width:100%; max-width:780px }
.px-product-hero h1{
  font-size:clamp(1.75rem, 4vw, 3.25rem);
  letter-spacing:-.025em;
  line-height:1.05;
  margin:var(--s-4) 0 var(--s-4);
  color:#fff;
  max-width:24ch;
}
.px-product-genres{ display:flex; flex-wrap:wrap; gap:6px }
.px-pill-on-dark{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
  backdrop-filter:blur(8px);
}
.px-product-meta{
  display:flex; flex-wrap:wrap;
  gap:6px var(--s-4);
  font-size:.875rem;
  color:rgba(255,255,255,.85);
}
.px-product-meta-item{
  display:inline-flex; align-items:center; gap:6px;
}
.px-product-meta-item svg{ opacity:.7 }

/* Specs strip */
.px-product-specs{
  margin-top:var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-5) var(--s-6);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-5);
}
@media(min-width:720px){ .px-product-specs{ grid-template-columns:repeat(4,1fr) } }
.px-spec{ display:flex; align-items:center; gap:12px }
.px-spec-icon{
  width:40px; height:40px; border-radius:var(--r-2);
  background:var(--c-tinted); color:var(--c-ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.px-spec-label{
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-ink-3); margin-bottom:2px;
}
.px-spec-value{
  font-size:.9375rem; font-weight:500; color:var(--c-ink);
  display:flex; align-items:center; gap:6px;
}

/* Two-column layout */
.px-product-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-7);
  margin-top:var(--s-7);
}
@media(min-width:900px){
  .px-product-layout{ grid-template-columns:1fr 380px; }
}

/* Sections */
.px-product-section{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-7);
  margin-bottom:var(--s-5);
}
.px-product-section h2{
  font-size:1.5rem; letter-spacing:-.02em;
  margin-bottom:var(--s-3);
  display:flex; align-items:center; gap:10px;
}
.px-product-section h2 svg{ color:var(--c-orange) }
.px-section-sub{
  color:var(--c-ink-3); margin:0 0 var(--s-5);
  font-size:.9375rem;
}
.px-product-prose{
  color:var(--c-ink-2); line-height:1.7;
}
.px-product-prose p{ margin:0 0 var(--s-4) }
.px-product-prose p:last-child{ margin-bottom:0 }

/* Region warning */
.px-region-warning{
  display:flex; gap:12px; align-items:flex-start;
  padding:var(--s-4) var(--s-5);
  background:#FEF3C7;
  border:1px solid #FDE68A;
  border-radius:var(--r-3);
  color:#78350F;
  font-size:.9375rem;
  line-height:1.55;
  margin-bottom:var(--s-5);
}
.px-region-warning svg{ color:#D97706; flex-shrink:0; margin-top:2px }
.px-region-warning strong{ color:#451A03; font-weight:700 }

/* Activation guide — clean numbered steps */
.px-activation-steps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s-3);
}
.px-activation-steps li{
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding:var(--s-4) var(--s-5);
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
}
.px-activation-step-num{
  flex-shrink:0;
  width:36px; height:36px; border-radius:var(--r-2);
  background:linear-gradient(135deg, var(--c-orange), var(--c-orange-3));
  color:#fff;
  font-family:var(--f-display);
  font-weight:700; font-size:.9375rem;
  display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:-.02em;
}
.px-activation-steps p{
  margin:6px 0 0;
  font-size:.9375rem;
  color:var(--c-ink); line-height:1.55;
}
.px-activation-help{
  margin-top:var(--s-4);
  display:flex; align-items:center; gap:8px;
  margin-top:var(--s-4); padding:var(--s-3) var(--s-4);
  background:var(--c-orange-5);
  border-radius:var(--r-2);
  font-size:.8125rem; color:var(--c-orange-3);
}
.px-activation-help a{ color:var(--c-orange-3); border-bottom:1px solid var(--c-orange-4); font-weight:500 }
.px-activation-help a:hover{ color:var(--c-orange) }

/* System requirements */
.px-sysreqs{
  display:grid; grid-template-columns:1fr; gap:var(--s-4);
}
@media(min-width:720px){ .px-sysreqs.has-many{ grid-template-columns:repeat(2,1fr) } }
.px-sysreqs-card{
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
  padding:var(--s-5);
}
.px-sysreqs-title{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-ink-3);
  margin:0 0 var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--c-border-soft);
}
.px-sysreqs-title::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--c-orange);
}
.px-sysreqs-list{ margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.px-sysreqs-list > div{
  display:grid; grid-template-columns:110px 1fr; gap:var(--s-4); align-items:baseline;
}
@media(max-width:600px){ .px-sysreqs-list > div{ grid-template-columns:1fr; gap:2px } }
.px-sysreqs-list dt{
  font-size:.75rem; font-weight:600;
  color:var(--c-ink-3);
  text-transform:uppercase; letter-spacing:.04em;
  margin:0;
}
.px-sysreqs-list dd{
  margin:0;
  font-size:.875rem; color:var(--c-ink);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  line-height:1.5;
  word-break:break-word;
}

/* Languages */
.px-langs{ display:flex; flex-wrap:wrap; gap:6px }

/* Gallery — videos (with play badge) + main cover + screenshots */
.px-product-gallery{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3);
}
@media(min-width:720px){ .px-product-gallery{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:1100px){ .px-product-gallery{ grid-template-columns:repeat(4,1fr) } }
.px-gallery-item{
  aspect-ratio:16/10;
  border-radius:var(--r-3);
  overflow:hidden;
  display:block;
  border:1px solid var(--c-border-soft);
  position:relative;
  background:var(--c-bg);
  cursor:zoom-in;
}
.px-gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-2) var(--ease);
}
.px-gallery-item:hover img{ transform:scale(1.04) }
.px-gallery-item.is-video{ cursor:pointer }
.px-gallery-item.is-main{ outline:2px solid var(--c-orange); outline-offset:-2px }
.px-gallery-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.px-gallery-play::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.45));
}
.px-gallery-play svg{
  position:relative; z-index:1;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.85);
  border-radius:50%;
  width:48px; height:48px; padding:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease);
}
.px-gallery-item.is-video:hover .px-gallery-play svg{
  transform:scale(1.08);
  background:var(--c-orange);
  border-color:#fff;
}
.px-gallery-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border-radius:var(--r-2);
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  backdrop-filter:blur(4px);
}
.px-gallery-badge--main{ background:var(--c-orange) }

/* Buy card — sticky right rail */
.px-buy-card-wrap{
  align-self:start;
}
.px-buy-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-6);
  position:sticky;
  top:calc(var(--s-7) + 60px); /* below sticky header */
  box-shadow:var(--sh-2);
}
@media(max-width:899px){
  .px-buy-card{ position:static; padding-bottom:var(--s-9); /* room for mobile bar */ }
}
.px-buy-card-was{
  font-size:.8125rem; color:var(--c-ink-4);
  text-decoration:line-through;
  margin-bottom:4px;
}
.px-buy-card-was-inline{
  font-size:.75rem; color:var(--c-ink-4);
  text-decoration:line-through;
  margin-left:6px;
  text-decoration-color:var(--c-ink-4);
}
.px-buy-card-priceline{
  display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;
}
.px-buy-card-price .px-price{
  font-size:2.5rem;
  letter-spacing:-.02em;
}
.px-buy-card-price .px-price-frac{
  font-size:.45em;
}
.px-buy-card-discount{
  display:inline-flex; align-items:center;
  background:var(--c-orange); color:#fff;
  padding:5px 10px; border-radius:var(--r-2);
  font-size:.75rem; font-weight:700;
  letter-spacing:.02em;
}
.px-buy-card-save{
  display:flex; align-items:center; gap:6px;
  margin-top:var(--s-3);
  padding:8px 12px;
  background:var(--c-success-2); color:#15803D;
  border-radius:var(--r-2);
  font-size:.8125rem; font-weight:500;
}
.px-buy-card-save svg{ color:var(--c-success) }
.px-buy-card-form{ margin-top:var(--s-5) }
.px-buy-card-cta{
  width:100%; padding:14px var(--s-5);
  font-size:1rem; gap:8px;
}
/* Dedicated white-price chip inside the orange CTA */
.px-buy-card-cta-price{
  display:inline-flex; align-items:baseline;
  font-weight:700;
  margin-left:4px; padding-left:10px;
  border-left:1px solid rgba(255,255,255,.35);
  color:#fff !important;
}
.px-buy-card-cta-price .px-price,
.px-buy-card-cta-price .px-price-int,
.px-buy-card-cta-price .px-price-frac{ color:#fff !important }
.px-buy-card-cta-price .px-price-frac{ opacity:.85; font-weight:600 }
/* Same in mobile sticky bar */
.px-product-mobile-bar .px-btn .px-price,
.px-product-mobile-bar .px-btn .px-price-int,
.px-product-mobile-bar .px-btn .px-price-frac{ color:#fff !important }

.px-buy-card-actions{
  display:flex; gap:8px; margin-top:var(--s-3);
}
.px-buy-card-actions .px-btn{ flex:1; padding:9px; font-size:.8125rem }
.px-buy-card-actions .px-action-save[aria-pressed="true"]{
  background:var(--c-rose-2,#FFE4E6);
  border-color:#FECDD3;
  color:#BE123C;
}
.px-buy-card-actions .px-action-save[aria-pressed="true"] svg{ fill:currentColor }
.px-buy-card-trust{
  list-style:none; margin:var(--s-5) 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--c-border-soft);
  padding-top:var(--s-5);
}
.px-buy-card-trust li{
  display:flex; align-items:center; gap:10px;
  font-size:.8125rem; color:var(--c-ink-2);
}
.px-buy-card-trust li svg{
  color:var(--c-orange);
  flex-shrink:0;
}
.px-buy-card-trust li:nth-child(2) svg{ color:var(--c-violet) }
.px-buy-card-trust li:nth-child(3) svg{ color:var(--c-success) }

/* Mobile sticky bottom bar */
.px-product-mobile-bar{
  display:none;
}
@media(max-width:899px){
  .px-product-mobile-bar{
    display:flex; align-items:center; gap:var(--s-3);
    position:fixed; left:0; right:0; bottom:0; z-index:48;
    background:var(--c-surface);
    border-top:1px solid var(--c-border);
    padding:var(--s-3) var(--s-4);
    box-shadow:0 -4px 20px rgba(15,23,42,.08);
  }
  .px-product-mobile-bar-price{
    flex:1; min-width:0;
    display:flex; align-items:baseline; gap:6px;
  }
  .px-product-mobile-bar-price .px-price{ font-size:1.5rem }
  .px-product-mobile-bar-price .px-price-frac{ font-size:.55em }
  .px-product-mobile-bar form{ flex-shrink:0 }
  .px-product-mobile-bar .px-btn{ padding:11px 18px; font-size:.875rem }
}

/* ============================================================================
   CART
   ============================================================================ */
.px-cart{ padding-top:var(--s-7); padding-bottom:var(--s-11) }
.px-cart-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s-6); flex-wrap:wrap; gap:var(--s-4);
}
.px-cart-head h1{
  font-size:clamp(1.5rem,3vw,2.25rem);
  letter-spacing:-.02em; margin:0;
}
.px-cart-continue{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.875rem; font-weight:500;
  color:var(--c-ink-2);
  transition:color var(--dur-1) var(--ease);
}
.px-cart-continue:hover{ color:var(--c-orange) }
.px-cart-continue .is-flipped{ transform:rotate(180deg) }

.px-cart-layout{
  display:grid; grid-template-columns:1fr; gap:var(--s-7);
}
@media(min-width:900px){
  .px-cart-layout{ grid-template-columns:1fr 360px }
}

.px-cart-items{
  display:flex; flex-direction:column;
  gap:var(--s-3);
}

/* Single cart row */
.px-cart-row{
  display:grid;
  grid-template-columns:96px 1fr auto auto;
  gap:var(--s-4);
  align-items:center;
  padding:var(--s-4);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
  transition:all var(--dur-1) var(--ease);
}
.px-cart-row:hover{ border-color:var(--c-border-firm); box-shadow:var(--sh-1) }
.px-cart-cover{
  width:96px; aspect-ratio:16/10;
  border-radius:var(--r-2);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  flex-shrink:0;
}
.px-cart-info{ min-width:0 }
.px-cart-title{
  font-family:var(--f-display);
  font-size:.9375rem; font-weight:600;
  letter-spacing:-.01em; color:var(--c-ink);
  margin:0 0 6px;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.px-cart-title a{ color:inherit }
.px-cart-title a:hover{ color:var(--c-orange) }
.px-cart-meta{
  display:flex; flex-wrap:wrap;
  gap:4px var(--s-3);
  font-size:.75rem; color:var(--c-ink-3);
}
.px-cart-meta-item{
  display:inline-flex; align-items:center; gap:5px;
}
.px-cart-meta-item svg{ opacity:.7 }
.px-cart-price{
  font-family:var(--f-display);
  font-weight:700; font-size:1.125rem;
  color:var(--c-ink);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.px-cart-price del{
  display:block; font-size:.75rem; font-weight:400;
  color:var(--c-ink-4);
}
.px-cart-remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-2);
  color:var(--c-ink-3);
  transition:all var(--dur-1) var(--ease);
}
.px-cart-remove:hover{
  background:var(--c-danger-2);
  color:var(--c-danger);
}

@media(max-width:600px){
  .px-cart-row{
    grid-template-columns:64px 1fr auto;
    grid-template-areas: "thumb info remove" "thumb price price";
    gap:var(--s-3) var(--s-4);
  }
  .px-cart-cover{ width:64px; grid-area:thumb }
  .px-cart-info{ grid-area:info }
  .px-cart-price{ grid-area:price; text-align:left; font-size:1rem }
  .px-cart-remove{ grid-area:remove }
}

/* Coupon */
.px-cart-coupon{
  margin-top:var(--s-4);
  padding:var(--s-4);
  background:var(--c-surface);
  border:1px dashed var(--c-border-firm);
  border-radius:var(--r-3);
}
.px-cart-coupon label{
  display:flex; align-items:center; gap:8px;
  font-size:.8125rem; font-weight:600;
  color:var(--c-ink); margin-bottom:var(--s-3);
}
.px-cart-coupon label svg{ color:var(--c-orange) }
.px-cart-coupon-row{
  display:flex; gap:8px;
}
.px-cart-coupon-row input{
  flex:1;
  padding:10px 14px;
  border:1px solid var(--c-border);
  border-radius:var(--r-2);
  font:inherit; font-size:.875rem;
  color:var(--c-ink);
  background:var(--c-surface);
  transition:all var(--dur-1) var(--ease);
}
.px-cart-coupon-row input:focus{
  outline:0;
  border-color:var(--c-orange);
  box-shadow:0 0 0 3px var(--c-orange-5);
}
.px-cart-coupon-row .px-btn{ flex-shrink:0 }

/* Totals card (sticky right rail) */
.px-cart-totals-wrap{ align-self:start }
.px-cart-totals{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-6);
  position:sticky;
  top:calc(var(--s-7) + 60px);
  box-shadow:var(--sh-2);
}
@media(max-width:899px){ .px-cart-totals{ position:static } }
.px-cart-totals h2{
  font-size:1.125rem;
  margin-bottom:var(--s-4);
  letter-spacing:-.01em;
}
.px-cart-totals-list{
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s-3);
}
.px-cart-totals-list > div{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.9375rem;
}
.px-cart-totals-list dt{
  color:var(--c-ink-2);
  display:inline-flex; align-items:center; gap:6px;
  margin:0;
}
.px-cart-totals-list dt svg{ color:var(--c-orange) }
.px-cart-totals-list dd{
  margin:0; color:var(--c-ink); font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
}
.px-coupon-row dt{ color:var(--c-success) }
.px-coupon-remove{
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-ink-4);
  border-radius:50%;
  transition:all var(--dur-1) var(--ease);
}
.px-coupon-remove:hover{ background:var(--c-danger-2); color:var(--c-danger) }

.px-cart-totals-final{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:var(--s-4); margin-top:var(--s-4);
  border-top:1px solid var(--c-border);
  font-family:var(--f-display);
  font-weight:600;
  font-size:1rem;
  color:var(--c-ink);
}
.px-cart-totals-final-amount{
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.px-cart-pay-cta{
  width:100%; margin-top:var(--s-5);
  padding:14px var(--s-5); font-size:1rem;
  gap:8px;
}

/* Empty cart */
.px-cart-empty{
  text-align:center;
  max-width:560px;
  margin:0 auto;
  padding:var(--s-11) 0;
  display:flex; flex-direction:column; align-items:center;
}
.px-cart-empty-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px;
  background:var(--c-orange-5);
  color:var(--c-orange);
  border-radius:50%;
  margin-bottom:var(--s-5);
}
.px-cart-empty h1{
  font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.02em;
  margin:0 0 var(--s-3);
}
.px-cart-empty p{
  font-size:1rem; color:var(--c-ink-2);
  max-width:48ch; margin:0 0 var(--s-6);
  line-height:1.6;
}
.px-cart-empty-actions{
  display:flex; gap:var(--s-3); flex-wrap:wrap; justify-content:center;
  margin-bottom:var(--s-9);
}
.px-cart-empty-recover{ padding-top:var(--s-3); padding-bottom:var(--s-9) }

/* Hide some default WC notices that the form spits */
.woocommerce-cart-form .button[name="update_cart"]{ display:none }

/* ============================================================================
   CHECKOUT
   ============================================================================ */
.px-checkout{ padding-top:var(--s-7); padding-bottom:var(--s-11) }
.px-checkout-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s-7); flex-wrap:wrap; gap:var(--s-4);
}
.px-checkout-head h1{
  font-size:clamp(1.5rem,3vw,2.25rem);
  letter-spacing:-.02em; margin:0;
  display:flex; align-items:center; gap:10px;
}
.px-checkout-head h1 svg{ color:var(--c-orange) }

.px-checkout-layout{
  display:grid; grid-template-columns:1fr; gap:var(--s-7);
}
@media(min-width:900px){
  .px-checkout-layout{ grid-template-columns:1fr 380px }
}

.px-checkout-section{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-7);
  margin-bottom:var(--s-5);
}
.px-checkout-section-head{
  display:flex; gap:var(--s-4); align-items:flex-start;
  margin-bottom:var(--s-6);
}
.px-checkout-step{
  width:36px; height:36px; flex-shrink:0;
  border-radius:50%;
  background:var(--c-orange-5); color:var(--c-orange-3);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display);
  font-size:1rem; font-weight:700;
}
.px-checkout-section-head h2{
  font-size:1.25rem; letter-spacing:-.01em;
  margin:0 0 4px;
}
.px-checkout-section-head p{
  margin:0; color:var(--c-ink-3); font-size:.875rem;
}

/* Hide WC's default H3 since we use our own headings */
.px-checkout-section h3{
  font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-ink-3); margin:var(--s-4) 0 var(--s-3);
}

/* Reset WC form fields */
.px-checkout-form .form-row{
  display:flex; flex-direction:column;
  margin:0 0 var(--s-4);
  width:100%;
}
.px-checkout-form .form-row label{
  font-size:.8125rem; font-weight:500; color:var(--c-ink-2);
  margin-bottom:6px;
  display:flex; align-items:center; gap:4px;
}
.px-checkout-form .form-row .required{
  color:var(--c-orange);
  text-decoration:none;
}
.px-checkout-form .form-row.form-row-first,
.px-checkout-form .form-row.form-row-last{
  width:calc(50% - var(--s-2));
  display:inline-flex;
}
.px-checkout-form .form-row.form-row-first{ margin-right:var(--s-3) }
@media(max-width:600px){
  .px-checkout-form .form-row.form-row-first,
  .px-checkout-form .form-row.form-row-last{ width:100%; margin-right:0 }
}
.px-checkout-form .form-row .input-text,
.px-checkout-form .form-row select,
.px-checkout-form .form-row textarea,
.px-checkout-form input[type="text"],
.px-checkout-form input[type="email"],
.px-checkout-form input[type="tel"],
.px-checkout-form input[type="password"],
.px-checkout-form input[type="number"]{
  width:100%;
  padding:13px 16px;
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
  font:inherit; font-size:.9375rem; line-height:1.4;
  color:var(--c-ink);
  box-shadow:inset 0 1px 0 rgba(15,23,42,.02);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  appearance:none; -webkit-appearance:none;
}
.px-checkout-form .form-row .input-text::placeholder,
.px-checkout-form .form-row textarea::placeholder,
.px-checkout-form input::placeholder{
  color:var(--c-ink-3); opacity:.7;
}
.px-checkout-form .form-row .input-text:hover,
.px-checkout-form .form-row select:hover,
.px-checkout-form .form-row textarea:hover{
  border-color:var(--c-border);
  background:var(--c-surface);
}
.px-checkout-form .form-row .input-text:focus,
.px-checkout-form .form-row select:focus,
.px-checkout-form .form-row textarea:focus,
.px-checkout-form input[type="text"]:focus,
.px-checkout-form input[type="email"]:focus,
.px-checkout-form input[type="tel"]:focus{
  outline:0;
  background:var(--c-surface);
  border-color:var(--c-orange);
  box-shadow:0 0 0 4px var(--c-orange-5);
}
.px-checkout-form .form-row textarea{
  min-height:96px; resize:vertical;
}
.px-checkout-form .form-row.woocommerce-invalid .input-text,
.px-checkout-form .form-row.woocommerce-invalid select{
  border-color:#EF4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}
.px-checkout-form .form-row.woocommerce-validated .input-text{
  border-color:rgba(34,197,94,.5);
}

/* Country select via Select2 */
.px-checkout-form .select2-container .select2-selection--single{
  height:auto; padding:9px 16px;
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
  background:var(--c-bg);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.px-checkout-form .select2-container--open .select2-selection--single,
.px-checkout-form .select2-container--focus .select2-selection--single{
  background:var(--c-surface);
  border-color:var(--c-orange) !important;
  box-shadow:0 0 0 4px var(--c-orange-5);
}
.px-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0; line-height:1.5; color:var(--c-ink);
  font-size:.9375rem;
}
.px-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:42px; right:8px;
}
.select2-dropdown{
  border:1px solid var(--c-border) !important;
  border-radius:var(--r-3) !important;
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.select2-search--dropdown .select2-search__field{
  border:1px solid var(--c-border-soft) !important;
  border-radius:var(--r-2) !important;
  padding:8px 12px !important;
  font-size:.875rem;
}
.select2-results__option--highlighted[aria-selected]{
  background:var(--c-orange) !important;
}

/* Hide additional info / order notes block (we disable the field too) */
.px-checkout-form .woocommerce-additional-fields,
.px-checkout-form #order_comments_field{ display:none !important }

/* WC review section */
.px-checkout-review #payment{
  background:transparent; padding:0;
}

/* Hide the redundant Product/Subtotal/Total table — same info lives in the
   sticky right summary, so the middle column stays focused on payment. */
.px-checkout-review .woocommerce-checkout-review-order-table{
  display:none;
}

/* Payment methods — modern radio cards */
.px-checkout-review .wc_payment_methods{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s-3);
}
.px-checkout-review .wc_payment_method{
  position:relative;
  background:var(--c-surface);
  border:1.5px solid var(--c-border-soft);
  border-radius:var(--r-3);
  padding:0;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  overflow:hidden;
}
.px-checkout-review .wc_payment_method:hover{
  border-color:var(--c-border);
  background:#fff;
}
.px-checkout-review .wc_payment_method.active,
.px-checkout-review .wc_payment_method:has(input:checked){
  border-color:var(--c-orange);
  background:#fff;
  box-shadow:0 0 0 3px var(--c-orange-5), 0 1px 3px rgba(15,23,42,.04);
}
/* Hide WC's bubble/triangle pointer */
.px-checkout-review .wc_payment_method > input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
.px-checkout-review .wc_payment_method label{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  font-weight:600; color:var(--c-ink);
  font-size:.9375rem; line-height:1.3;
  cursor:pointer;
  margin:0;
}
/* Custom radio dot before the label */
.px-checkout-review .wc_payment_method label::before{
  content:"";
  width:20px; height:20px; flex-shrink:0;
  border-radius:50%;
  border:2px solid var(--c-border);
  background:var(--c-surface);
  transition:all var(--dur-1) var(--ease);
}
.px-checkout-review .wc_payment_method:has(input:checked) label::before{
  border-color:var(--c-orange);
  background:radial-gradient(circle, var(--c-orange) 0 5px, #fff 6px 100%);
}
.px-checkout-review .wc_payment_method label img{ display:none }

/* Card brand badges injected after the label text */
.px-checkout-review .wc_payment_method label::after{
  content:"VISA  ·  Mastercard";
  margin-left:auto;
  padding:4px 10px;
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-pill);
  font:600 .6875rem/1 var(--f-body);
  letter-spacing:.06em;
  color:var(--c-ink-3);
  text-transform:uppercase;
  white-space:nowrap;
}
.px-checkout-review .wc_payment_method:has(input:checked) label::after{
  background:var(--c-orange-5);
  border-color:rgba(255,107,26,.25);
  color:var(--c-orange-3);
}

/* Description / "We accept ..." panel — classic flat gray box */
.px-checkout-review .payment_box,
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box{
  position:relative;
  box-sizing:border-box;
  width:auto;
  margin:0 18px 16px;
  padding:14px 16px;
  background:var(--c-bg);
  border:0;
  border-radius:var(--r-2);
  font-size:.875rem; line-height:1.5;
  color:var(--c-ink-2);
}
.px-checkout-review .payment_box::before,
.px-checkout-review .payment_box::after,
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after{
  display:none !important; content:none !important;
}
.px-checkout-review .payment_box p{ margin:0 }
.px-checkout-review .payment_box p:not(:last-child){ margin-bottom:6px }

.woocommerce-terms-and-conditions-wrapper{
  padding-top:var(--s-4);
  border-top:1px solid var(--c-border-soft);
  margin-top:var(--s-4);
}
.woocommerce-terms-and-conditions-wrapper label{
  font-size:.8125rem; color:var(--c-ink-2); line-height:1.5;
}

/* Place order button */
.px-checkout-review #place_order,
.woocommerce-checkout-payment #place_order{
  width:100%; margin-top:var(--s-5);
  padding:14px var(--s-5);
  background:var(--c-orange); color:#fff;
  border:0; border-radius:var(--r-3);
  font-family:var(--f-body); font-weight:500;
  font-size:1rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(255,107,26,.25);
  transition:all var(--dur-1) var(--ease);
}
.px-checkout-review #place_order:hover,
.woocommerce-checkout-payment #place_order:hover{
  background:var(--c-orange-3);
}

/* Custom Terms / Privacy / Refund consent checkbox */
.px-checkout-consent{
  margin:var(--s-5) 0 0;
  padding:var(--s-4);
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.px-checkout-consent:has(input:checked){
  background:var(--c-orange-5);
  border-color:rgba(255,107,26,.3);
}
.px-checkout-consent-label{
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer;
  font-size:.875rem; line-height:1.5; color:var(--c-ink-2);
  margin:0;
}
.px-checkout-consent-label input[type="checkbox"]{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.px-checkout-consent-box{
  flex-shrink:0; margin-top:1px;
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  border-radius:6px;
  color:transparent;
  transition:all var(--dur-1) var(--ease);
}
.px-checkout-consent-label:hover .px-checkout-consent-box{
  border-color:var(--c-orange);
}
.px-checkout-consent-label input:focus-visible + .px-checkout-consent-box{
  box-shadow:0 0 0 4px var(--c-orange-5);
}
.px-checkout-consent-label input:checked + .px-checkout-consent-box{
  background:var(--c-orange); border-color:var(--c-orange); color:#fff;
}
.px-checkout-consent-text a{
  color:var(--c-ink);
  font-weight:500;
  border-bottom:1px solid var(--c-border);
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.px-checkout-consent-text a:hover{
  color:var(--c-orange);
  border-bottom-color:var(--c-orange);
}
.px-checkout-consent-required{
  color:var(--c-orange); margin-left:2px;
}

/* Right summary — fix sticky: let the wrap stretch the full grid row, then
   the inner card sticks to the top until the parent ends. */
.px-checkout-summary-wrap{
  align-self:stretch;
  height:100%;
}
.px-checkout-summary{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-6);
  position:sticky;
  top:calc(var(--s-7) + 60px);
  box-shadow:var(--sh-2);
}
@media(max-width:899px){
  .px-checkout-summary-wrap{ height:auto }
  .px-checkout-summary{ position:static }
}
.px-checkout-summary h2{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:1.125rem; letter-spacing:-.01em;
  margin:0 0 var(--s-4);
}
.px-checkout-summary-count{
  font-family:var(--f-body);
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-ink-3);
}

.px-checkout-items{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s-3);
  max-height:280px; overflow-y:auto;
}
.px-checkout-item{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:var(--s-3);
  align-items:center;
}
.px-checkout-item-cover{
  width:48px; aspect-ratio:1;
  border-radius:var(--r-2);
  background-size:cover; background-position:center;
  position:relative;
}
.px-checkout-item-qty{
  position:absolute; top:-4px; right:-4px;
  background:var(--c-ink); color:#fff;
  font-size:10px; font-weight:700;
  padding:1px 6px;
  border-radius:var(--r-pill);
  border:2px solid var(--c-surface);
}
.px-checkout-item-info{ min-width:0 }
.px-checkout-item-title{
  font-size:.8125rem; font-weight:500;
  color:var(--c-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.35;
  margin-bottom:2px;
}
.px-checkout-item-meta{
  font-size:.6875rem; color:var(--c-ink-3);
  display:flex; align-items:center; gap:5px;
}
.px-checkout-item-price{
  font-family:var(--f-display);
  font-weight:700; font-size:.9375rem;
  color:var(--c-ink);
  white-space:nowrap;
}

/* ============================================================================
   MY ACCOUNT — fully custom dashboard
   ============================================================================ */
.px-account{ padding:var(--s-7) 0 var(--s-11) }

/* HERO STRIP */
.px-account-hero{
  position:relative;
  background:linear-gradient(115deg, #1A1A2E 0%, #2D1B4E 50%, #4A1B6B 100%);
  border-radius:var(--r-5);
  padding:var(--s-9) var(--s-7);
  color:#fff;
  overflow:hidden;
}
.px-account-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,107,26,.35), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(124,92,255,.30), transparent 55%);
}
.px-account-hero-row{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:var(--s-5);
  margin-bottom:var(--s-7);
  flex-wrap:wrap;
}
.px-account-avatar{
  width:64px; height:64px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#6244E5);
  color:#fff; font-family:var(--f-display); font-weight:700;
  font-size:1.75rem; letter-spacing:-.02em;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.2);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.px-account-greeting{ flex:1; min-width:0 }
.px-account-eyebrow{
  display:block; font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.6);
  margin-bottom:4px;
}
.px-account-greeting h1{
  font-size:clamp(1.5rem,3vw,2.25rem);
  letter-spacing:-.02em; margin:0; color:#fff;
  line-height:1.1;
}
.px-account-greeting h1 em{
  font-style:normal;
  color:var(--c-orange-2);
}
.px-account-signout{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#fff!important;
}
.px-account-signout:hover{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}
@media(max-width:600px){
  .px-account-signout span{ display:none }
  .px-account-signout{ padding:9px }
}

/* STATS */
.px-account-stats{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-3);
}
@media(min-width:720px){ .px-account-stats{ grid-template-columns:repeat(4,1fr) } }
.px-account-stat{
  display:flex; align-items:center; gap:12px;
  padding:var(--s-4);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-3);
  backdrop-filter:blur(10px);
}
.px-account-stat-icon{
  width:40px; height:40px; flex-shrink:0;
  border-radius:var(--r-2);
  background:var(--c-orange-5); color:var(--c-orange);
  display:inline-flex; align-items:center; justify-content:center;
}
.px-account-stat-num{
  display:block;
  font-family:var(--f-display);
  font-weight:700; font-size:1.25rem;
  color:#fff; letter-spacing:-.02em;
  line-height:1.1;
}
.px-account-stat-num bdi{ font-weight:700 }
.px-account-stat-num .woocommerce-Price-amount{ color:#fff!important }
.px-account-stat-label{
  display:block;
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:rgba(255,255,255,.6);
  margin-top:2px;
}

/* PILL NAV */
.px-account-nav{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:var(--s-5) 0 var(--s-7);
  padding:6px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-pill);
  overflow-x:auto;
  scrollbar-width:none;
}
.px-account-nav::-webkit-scrollbar{ display:none }
.px-account-nav-item{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500;
  color:var(--c-ink-2);
  white-space:nowrap;
  transition:all var(--dur-1) var(--ease);
}
.px-account-nav-item:hover{ background:var(--c-tinted); color:var(--c-ink) }
.px-account-nav-item.is-active{
  background:var(--c-orange); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(255,107,26,.25);
}
.px-account-nav-item.is-active:hover{ background:var(--c-orange-3); color:#fff }
.px-account-nav-logout{
  margin-left:auto;
  color:var(--c-ink-3)!important;
}
.px-account-nav-logout:hover{ color:var(--c-danger)!important; background:var(--c-danger-2)!important }

/* ============================================================================
   ADDRESSES — My Account
   ============================================================================ */
.px-addr{ display:flex; flex-direction:column; gap:var(--s-5) }
.px-addr-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--s-4); flex-wrap:wrap;
}
.px-addr-head .px-eyebrow{
  font-family:var(--f-body);
  font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-orange);
  display:inline-flex; align-items:center; gap:6px;
}
.px-addr-head h2{
  font-size:clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing:-.02em; margin:8px 0 6px;
}
.px-addr-head p{
  margin:0; color:var(--c-ink-3);
  font-size:.9375rem; line-height:1.55;
  max-width:60ch;
}
.px-addr-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8125rem; font-weight:500;
  color:var(--c-ink-3);
  margin-bottom:4px;
  transition:color var(--dur-1) var(--ease);
}
.px-addr-back:hover{ color:var(--c-orange) }
.px-addr-back .is-flipped{ transform:rotate(180deg) }

.px-addr-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--s-5);
  align-items:center;
  padding:var(--s-6);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  box-shadow:var(--sh-1);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.px-addr-card:hover{
  border-color:var(--c-border-firm);
  box-shadow:var(--sh-2);
}
.px-addr-card.is-empty{
  background:linear-gradient(180deg, var(--c-orange-5), var(--c-surface));
  border-color:var(--c-orange-4);
  border-style:dashed;
}
.px-addr-card-icon{
  width:56px; height:56px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-orange-5);
  color:var(--c-orange);
  border-radius:var(--r-3);
}
.px-addr-card.is-empty .px-addr-card-icon{
  background:var(--c-surface);
  border:1px dashed var(--c-orange-4);
}
.px-addr-card-body{ min-width:0 }
.px-addr-card-body h3{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:1.0625rem; letter-spacing:-.01em;
  margin:0 0 6px;
}
.px-addr-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px;
  background:var(--c-success-2);
  color:#15803D;
  border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.px-addr-pill svg{ stroke-width:3 }
.px-addr-card-text{
  margin:0; padding:0;
  color:var(--c-ink-2);
  font-style:normal;
  font-size:.9375rem; line-height:1.55;
  white-space:pre-line;
}
.px-addr-card-text--muted{ color:var(--c-ink-3) }
.px-addr-card-actions{
  display:flex; align-items:center;
  flex-shrink:0;
}
@media(max-width:680px){
  .px-addr-card{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon body"
      "actions actions";
    row-gap:var(--s-4);
  }
  .px-addr-card-icon{ grid-area:icon }
  .px-addr-card-body{ grid-area:body }
  .px-addr-card-actions{ grid-area:actions }
  .px-addr-card-actions .px-btn{ width:100% }
}

/* Edit form */
.px-addr-form-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  box-shadow:var(--sh-1);
  padding:var(--s-7);
}
.px-addr-form .woocommerce-address-fields__field-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 var(--s-4);
}
@media(max-width:680px){
  .px-addr-form .woocommerce-address-fields__field-wrapper{
    grid-template-columns:1fr;
  }
}
.px-addr-form .form-row{
  width:100% !important;
  margin-right:0 !important;
}
.px-addr-form .form-row.form-row-wide,
.px-addr-form .form-row#billing_address_1_field,
.px-addr-form .form-row#billing_address_2_field,
.px-addr-form .form-row#billing_email_field,
.px-addr-form .form-row#billing_phone_field,
.px-addr-form .form-row#billing_company_field,
.px-addr-form .form-row#billing_country_field{
  grid-column:1 / -1;
}
.px-addr-form-actions{
  display:flex; flex-wrap:wrap; gap:var(--s-3);
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--c-border-soft);
}

/* CONTENT */
.px-account-content{ min-height:240px }

/* DASHBOARD QUICKLINKS */
.px-account-quicklinks{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-4);
  margin-bottom:var(--s-7);
}
@media(min-width:720px){ .px-account-quicklinks{ grid-template-columns:repeat(3,1fr) } }
.px-account-quick{
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  transition:all var(--dur-2) var(--ease);
}
.px-account-quick:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-3);
  border-color:var(--c-orange-4);
}
.px-account-quick-icon{
  width:48px; height:48px; flex-shrink:0;
  border-radius:var(--r-3);
  background:var(--c-tinted);
  display:inline-flex; align-items:center; justify-content:center;
}
.px-account-quick > div{ flex:1; min-width:0 }
.px-account-quick h3{
  font-size:1rem; margin:0 0 2px;
  letter-spacing:-.01em;
}
.px-account-quick p{
  font-size:.8125rem; color:var(--c-ink-3);
  margin:0; line-height:1.45;
}
.px-account-quick > svg:last-child{ color:var(--c-ink-4); flex-shrink:0 }
.px-account-quick:hover > svg:last-child{ color:var(--c-orange) }

/* SECTIONS */
.px-account-section{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-6);
  margin-bottom:var(--s-5);
}
.px-account-section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:var(--s-5);
}
.px-account-section-head h2{
  font-size:1.25rem; letter-spacing:-.01em; margin:0;
}
.px-account-section-head a{
  font-size:.8125rem; font-weight:500; color:var(--c-orange);
  display:inline-flex; align-items:center; gap:4px;
}
.px-account-section-head a:hover{ color:var(--c-orange-3) }

.px-account-empty{
  text-align:center; padding:var(--s-9) var(--s-5);
  display:flex; flex-direction:column; align-items:center;
}
.px-account-empty > svg{ color:var(--c-ink-4); margin:0 0 var(--s-4) }
.px-account-empty h3{ font-size:1.125rem; margin:0 0 var(--s-3) }
.px-account-empty p{ color:var(--c-ink-3); max-width:42ch; margin:0 0 var(--s-5) }

/* EDIT ACCOUNT FORM — Profile / Password cards with our input styling */
.px-account-form-hint{
  font-size:.8125rem; color:var(--c-ink-3); font-weight:500;
}
.px-account-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-4) var(--s-4);
}
@media(max-width:600px){
  .px-account-form-grid{ grid-template-columns:1fr }
}
.px-account-form-row{ display:flex; flex-direction:column; min-width:0 }
.px-account-form-row--wide{ grid-column:1 / -1 }
.px-account-form-row label{
  font-size:.8125rem; font-weight:500; color:var(--c-ink-2);
  margin-bottom:6px;
  display:inline-flex; align-items:center; gap:4px;
}
.px-account-form-req{ color:var(--c-orange); font-weight:600 }
.px-account-form-row input{
  width:100%;
  padding:13px 16px;
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
  font:inherit; font-size:.9375rem; line-height:1.4;
  color:var(--c-ink);
  box-shadow:inset 0 1px 0 rgba(15,23,42,.02);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  appearance:none; -webkit-appearance:none;
}
.px-account-form-row input::placeholder{ color:var(--c-ink-3); opacity:.7 }
.px-account-form-row input:hover{
  border-color:var(--c-border);
  background:var(--c-surface);
}
.px-account-form-row input:focus{
  outline:none;
  border-color:var(--c-orange);
  background:var(--c-surface);
  box-shadow:0 0 0 4px var(--c-orange-5);
}
.px-account-form-row input[aria-invalid="true"]{
  border-color:var(--c-danger);
  box-shadow:0 0 0 4px var(--c-danger-2, #FEE2E2);
}
.px-account-form-help{
  margin-top:6px;
  font-size:.75rem; color:var(--c-ink-3); line-height:1.4;
}
.px-account-form-actions{
  display:flex; justify-content:flex-end; gap:var(--s-3); flex-wrap:wrap;
  padding-top:var(--s-3);
}
@media(max-width:600px){
  .px-account-form-actions{ flex-direction:column-reverse }
  .px-account-form-actions .px-btn{ width:100% }
}

/* ORDERS LIST */
.px-orders-list{
  display:flex; flex-direction:column; gap:var(--s-3);
}
.px-order-card{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:var(--s-4);
  padding:var(--s-4);
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-3);
  transition:all var(--dur-1) var(--ease);
}
.px-order-card:hover{
  background:var(--c-surface);
  border-color:var(--c-border-firm);
  box-shadow:var(--sh-1);
}
.px-order-cover{
  width:80px; aspect-ratio:1;
  border-radius:var(--r-2);
  background-size:cover; background-position:center;
}
.px-order-info{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.px-order-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-3);
}
.px-order-num{
  font-family:var(--f-display);
  font-weight:700; font-size:1rem;
  color:var(--c-ink); letter-spacing:-.01em;
}
.px-order-date{
  font-size:.75rem; color:var(--c-ink-3);
}
.px-order-titles{
  font-size:.875rem; color:var(--c-ink-2);
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.px-order-foot{
  display:flex; align-items:center; gap:var(--s-3);
  flex-wrap:wrap;
  font-size:.75rem; color:var(--c-ink-3);
  margin-top:auto;
}
.px-order-status{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--c-tinted); color:var(--c-ink-2);
}
.px-order-status.is-completed{ background:var(--c-success-2); color:#15803D }
.px-order-status.is-processing{ background:var(--c-warning-2); color:#B45309 }
.px-order-status.is-on-hold{ background:#DBEAFE; color:#1E40AF }
.px-order-status.is-cancelled,
.px-order-status.is-failed,
.px-order-status.is-refunded{ background:var(--c-danger-2); color:#B91C1C }
.px-order-total{
  margin-left:auto;
  font-family:var(--f-display);
  font-weight:700; color:var(--c-ink); font-size:.9375rem;
}

/* MY KEYS */
.px-keys-toolbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:var(--s-5); gap:var(--s-4);
  flex-wrap:wrap;
}
.px-keys-search{
  padding:10px 14px;
  border:1px solid var(--c-border);
  border-radius:var(--r-pill);
  font:inherit; font-size:.875rem;
  background:var(--c-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 12px center / 14px;
  padding-left:36px;
  min-width:240px;
  transition:all var(--dur-1) var(--ease);
}
.px-keys-search:focus{
  outline:0;
  border-color:var(--c-orange);
  box-shadow:0 0 0 3px var(--c-orange-5);
}

.px-keys-list{
  display:flex; flex-direction:column; gap:var(--s-3);
}
.px-key-row{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:var(--s-4);
  align-items:center;
  padding:var(--s-4);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
}
.px-key-row[hidden]{ display:none }
.px-key-cover{
  width:88px; aspect-ratio:1;
  border-radius:var(--r-2);
  background-size:cover; background-position:center;
  background-color:var(--c-ink);
}
.px-key-info{ min-width:0 }
.px-key-title{
  font-family:var(--f-display);
  font-size:1rem; font-weight:600;
  color:var(--c-ink); letter-spacing:-.01em;
  margin:0 0 6px;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.px-key-meta{
  display:flex; flex-wrap:wrap; gap:4px var(--s-3);
  font-size:.75rem; color:var(--c-ink-3);
  margin-bottom:var(--s-3);
  align-items:center;
}
.px-key-meta-item{ display:inline-flex; align-items:center; gap:5px }
.px-key-status{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.px-key-status.is-delivered{ background:var(--c-success-2); color:#15803D }
.px-key-status.is-pending{ background:var(--c-warning-2); color:#B45309 }

.px-key-code-row{
  display:flex; gap:8px; align-items:stretch;
  max-width:520px;
}
.px-key-code{
  flex:1; min-width:0;
  padding:8px 12px;
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-2);
  font-family:ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size:.8125rem; font-weight:500;
  color:var(--c-ink);
  letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center;
}
.px-key-code.is-pending{
  font-family:var(--f-body);
  color:var(--c-ink-3);
  font-style:italic;
  letter-spacing:0;
  font-weight:400;
}
.px-key-copy{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:var(--c-orange-5);
  border:1px solid var(--c-orange-4);
  border-radius:var(--r-2);
  color:var(--c-orange-3);
  font-size:.8125rem; font-weight:500;
  cursor:pointer;
  transition:all var(--dur-1) var(--ease);
  flex-shrink:0;
}
.px-key-copy:hover{ background:var(--c-orange-4); color:var(--c-orange-3) }
.px-key-copy.is-copied{ background:var(--c-success-2); border-color:transparent; color:#15803D }
.px-key-copy.is-copied svg{ color:#15803D }

.px-key-actions{
  display:flex; flex-direction:column; gap:6px;
  align-items:stretch; flex-shrink:0;
}

@media(max-width:720px){
  .px-key-row{
    grid-template-columns:64px 1fr;
    grid-template-areas: "cover info" "actions actions";
  }
  .px-key-cover{ width:64px; grid-area:cover }
  .px-key-info{ grid-area:info }
  .px-key-actions{ grid-area:actions; flex-direction:row }
  .px-key-actions .px-btn{ flex:1; justify-content:center }
}

.px-keys-empty{
  text-align:center;
  padding:var(--s-11) var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
}
.px-keys-empty .px-cart-empty-icon{ background:var(--c-violet-5); color:var(--c-violet) }
.px-keys-empty h2{
  font-size:1.5rem; margin-bottom:var(--s-3);
}
.px-keys-empty p{
  color:var(--c-ink-3); margin:0 auto var(--s-6);
  max-width:48ch; line-height:1.6;
}

/* AUTH v2 — glass card on cinematic dark backdrop */
.px-authv2{
  position:relative;
  min-height:100vh;
  background:#0A0A14;
  color:#fff;
  overflow:hidden;
  display:flex; flex-direction:column;
  margin:0;
}
/* When wrapped inside main.px-main of header.php — neutralise body padding */
.px-main:has(.px-authv2){ padding:0; margin:0 }
/* Hide site header/footer chrome on the auth screen for full immersion */
body:has(.px-authv2) .px-header,
body:has(.px-authv2) .px-footer{ display:none }

/* Decorative backdrop layers */
.px-authv2-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.px-authv2-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 70%);
}
.px-authv2-glow{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.6;
}
.px-authv2-glow--1{ top:-15%; left:-10%; width:560px; height:560px; background:#FF6B1A }
.px-authv2-glow--2{ bottom:-20%; right:-10%; width:680px; height:680px; background:#7C5CFF }

.px-authv2-thumb{
  position:absolute;
  border-radius:var(--r-3);
  background-size:cover; background-position:center;
  opacity:.18; filter:blur(2px) saturate(.7);
  transform-origin:center;
}
.px-authv2-thumb--1{ top:8%; left:6%;  width:140px; height:200px; transform:rotate(-8deg) }
.px-authv2-thumb--2{ top:14%; right:7%; width:180px; height:120px; transform:rotate(6deg) }
.px-authv2-thumb--3{ bottom:18%; left:9%; width:160px; height:240px; transform:rotate(4deg) }
.px-authv2-thumb--4{ bottom:14%; right:6%; width:200px; height:140px; transform:rotate(-7deg) }
.px-authv2-thumb--5{ top:42%; left:2%; width:110px; height:160px; transform:rotate(10deg) }
.px-authv2-thumb--6{ bottom:42%; right:2%; width:120px; height:170px; transform:rotate(-12deg) }
@media(max-width:900px){ .px-authv2-thumb{ display:none } }

/* Top bar */
.px-authv2-topbar{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:var(--s-4);
  padding:var(--s-5) var(--s-7);
}
.px-authv2-back{
  justify-self:start;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill);
  color:rgba(255,255,255,.75);
  font-size:.8125rem; font-weight:500;
  transition:all var(--dur-1) var(--ease);
}
.px-authv2-back:hover{ background:rgba(255,255,255,.12); color:#fff }
.px-authv2-back .is-flipped{ transform:rotate(180deg) }
.px-authv2-logo{
  justify-self:center;
  height:34px; display:inline-block;
}
.px-authv2-logo svg{ height:100%; width:auto }
.px-authv2-shop-cta{
  justify-self:end;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill);
  color:rgba(255,255,255,.75);
  font-size:.8125rem; font-weight:500;
  transition:all var(--dur-1) var(--ease);
}
.px-authv2-shop-cta:hover{ background:rgba(255,255,255,.12); color:#fff }
@media(max-width:600px){
  .px-authv2-topbar{ grid-template-columns:auto 1fr auto; padding:var(--s-4) var(--s-5) }
  .px-authv2-back span,
  .px-authv2-shop-cta span{ display:none }
  .px-authv2-back, .px-authv2-shop-cta{ padding:8px }
}

/* Stage with centered card */
.px-authv2-stage{
  position:relative; z-index:1;
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-7) var(--s-5) var(--s-9);
}
.px-authv2-card{
  position:relative;
  width:100%; max-width:480px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-5);
  padding:var(--s-7) var(--s-7) var(--s-5);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation:px-auth-rise .5s cubic-bezier(.16,1,.3,1);
}
@keyframes px-auth-rise{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:translateY(0) }
}

/* Lock badge */
.px-authv2-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  background:#0A0A14;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.7);
}
.px-authv2-badge-pulse{
  width:6px; height:6px; border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 0 3px rgba(34,197,94,.25);
  animation:px-pulse 1.6s infinite;
}

/* Tabs */
.px-authv2-tabs{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4px; padding:4px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-pill);
  margin:var(--s-4) 0 var(--s-6);
}
.px-authv2-tab{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px;
  background:transparent; border:0;
  font:500 .8125rem/1 var(--f-body);
  color:rgba(255,255,255,.5);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:color var(--dur-1) var(--ease);
}
.px-authv2-tab[aria-selected="true"]{ color:#fff }
.px-authv2-tab:hover{ color:rgba(255,255,255,.85) }
.px-authv2-tabs-indicator{
  position:absolute;
  top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px);
  background:linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-3) 100%);
  border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(255,107,26,.4);
  transition:transform var(--dur-2) cubic-bezier(.4,.0,.2,1);
  pointer-events:none;
}
.px-authv2[data-tab="register"] .px-authv2-tabs-indicator{
  transform:translateX(100%);
  background:linear-gradient(135deg, var(--c-violet) 0%, var(--c-violet-3) 100%);
  box-shadow:0 4px 12px rgba(124,92,255,.4);
}

/* Panes */
.px-authv2-pane{
  display:none;
}
.px-authv2-pane.is-active{
  display:block;
  animation:px-pane-fade .35s ease;
}
@keyframes px-pane-fade{
  from{ opacity:0; transform:translateY(6px) }
  to  { opacity:1; transform:translateY(0) }
}
.px-authv2-pane-head{ margin-bottom:var(--s-5); text-align:center }
.px-authv2-pane-head h1{
  font-size:clamp(1.5rem,3vw,1.875rem);
  letter-spacing:-.02em;
  color:#fff;
  margin:0;
  line-height:1.15;
}
.px-authv2-pane-head h1 em{
  font-style:normal; font-weight:500;
  display:block; margin-top:6px;
  font-size:.8em;
  color:rgba(255,255,255,.55);
}

/* Form */
.px-authv2-form{ display:flex; flex-direction:column; gap:var(--s-3) }
.px-authv2-field{ display:flex; flex-direction:column }
.px-authv2-field label{
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.px-authv2-field label svg{ color:var(--c-orange-2); opacity:.8 }
.px-authv2-field input{
  padding:13px 16px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2);
  font:500 .9375rem/1 var(--f-body);
  color:#fff;
  transition:all var(--dur-1) var(--ease);
}
.px-authv2-field input::placeholder{ color:rgba(255,255,255,.3) }
.px-authv2-field input:focus{
  outline:0;
  border-color:var(--c-orange);
  background:rgba(0,0,0,.5);
  box-shadow:0 0 0 4px rgba(255,107,26,.18);
}
.px-authv2-field small{
  font-size:.75rem; color:rgba(255,255,255,.45);
  margin-top:4px;
}

/* Row (remember + forgot) */
.px-authv2-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--s-3);
  margin-top:6px;
}
.px-authv2-remember{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8125rem; color:rgba(255,255,255,.7);
  cursor:pointer;
}
.px-authv2-remember input{ accent-color:var(--c-orange); width:14px; height:14px }
.px-authv2-forgot{
  font-size:.8125rem; font-weight:500;
  color:var(--c-orange-2);
}
.px-authv2-forgot:hover{ color:var(--c-orange) }

/* CTA */
.px-authv2-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  padding:14px var(--s-5);
  margin-top:var(--s-3);
  background:linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-3) 100%);
  color:#fff;
  border:0; border-radius:var(--r-3);
  font:500 1rem/1 var(--f-body);
  cursor:pointer;
  position:relative; overflow:hidden;
  box-shadow:0 8px 24px rgba(255,107,26,.35);
  transition:all var(--dur-2) var(--ease);
}
.px-authv2-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(255,107,26,.45);
}
.px-authv2-cta--violet{
  background:linear-gradient(135deg, var(--c-violet) 0%, var(--c-violet-3) 100%);
  box-shadow:0 8px 24px rgba(124,92,255,.35);
}
.px-authv2-cta--violet:hover{ box-shadow:0 12px 28px rgba(124,92,255,.45) }
.px-authv2-cta-icon{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.px-authv2-cta > svg:last-child{
  margin-left:auto;
  transition:transform var(--dur-1) var(--ease);
}
.px-authv2-cta:hover > svg:last-child{ transform:translateX(3px) }

/* Legal text */
.px-authv2-legal{
  font-size:.75rem; line-height:1.55;
  color:rgba(255,255,255,.5);
  margin:var(--s-2) 0 0;
}
.px-authv2-legal a{
  color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.px-authv2-legal a:hover{ color:#fff }

/* Inline back-to-home link inside the auth form */
.px-authv2-home-link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%;
  margin-top:var(--s-3);
  padding:10px 12px;
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2);
  font-size:.8125rem; font-weight:500;
  color:rgba(255,255,255,.65);
  transition:all var(--dur-1) var(--ease);
}
.px-authv2-home-link:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}
.px-authv2-home-link .is-flipped{ transform:rotate(180deg) }

/* Password match indicator (shown under the confirm-password field) */
.px-authv2-match{
  display:block;
  margin-top:6px;
  font-size:.75rem;
  font-weight:500;
}
.px-authv2-match.is-error{ color:#FCA5A5 }
.px-authv2-match.is-ok{ color:#86EFAC }
.px-authv2-field input[aria-invalid="true"]{
  border-color:rgba(239,68,68,.5);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

/* Switch tab CTA inside form */
.px-authv2-switch{
  margin:var(--s-5) 0 0;
  text-align:center;
  font-size:.8125rem;
  color:rgba(255,255,255,.55);
}
.px-authv2-switch button{
  background:none; border:0; padding:0; margin-left:6px;
  color:var(--c-orange-2);
  font:inherit; font-weight:500;
  cursor:pointer;
}
.px-authv2-switch button:hover{ color:var(--c-orange) }

/* Trust footer */
.px-authv2-trust{
  display:flex; flex-wrap:wrap; gap:var(--s-3);
  justify-content:center;
  padding:var(--s-5) 0 0;
  margin-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.06);
}
.px-authv2-trust > div{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.6875rem;
  color:rgba(255,255,255,.5);
}
.px-authv2-trust svg{ color:var(--c-orange-2); flex-shrink:0 }

/* WC notices on auth */
.px-authv2 .woocommerce-error,
.px-authv2 .woocommerce-message,
.px-authv2 .woocommerce-info{
  list-style:none; margin:0 0 var(--s-4); padding:12px 14px;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.28);
  border-radius:var(--r-2);
  color:#FCA5A5;
  font-size:.875rem;
  line-height:1.5;
}
.px-authv2 .woocommerce-message{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.28);
  color:#86EFAC;
}
.px-authv2 .woocommerce-info{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.28);
  color:#93C5FD;
}

/* Solo card variant — used by lost-password / reset-password / confirmation */
.px-authv2--solo .px-authv2-card{ padding-top:var(--s-7) }

.px-authv2-card--confirm{ text-align:center }
.px-authv2-card--confirm .px-authv2-pane-head h1{ margin-top:var(--s-3) }
.px-authv2-confirm-art{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:var(--s-2);
}
.px-authv2-confirm-steps{
  display:flex; flex-direction:column; gap:var(--s-3);
  margin:var(--s-5) 0 var(--s-6);
  text-align:left;
}
.px-authv2-confirm-step{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-4);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-3);
}
.px-authv2-confirm-step-num{
  width:28px; height:28px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-3) 100%);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 .8125rem/1 var(--f-display);
  box-shadow:0 4px 12px rgba(255,107,26,.35);
}
.px-authv2-confirm-step strong{
  display:block; color:#fff;
  font-size:.875rem; font-weight:600;
  margin-bottom:2px;
}
.px-authv2-confirm-step span{
  display:block; color:rgba(255,255,255,.55);
  font-size:.8125rem; line-height:1.5;
}

/* WC notices in account context */
.woocommerce-MyAccount-content > .woocommerce-error,
.woocommerce-MyAccount-content > .woocommerce-message,
.woocommerce-MyAccount-content > .woocommerce-info{
  margin-bottom:var(--s-5);
}

/* ============================================================================
   THANK-YOU PAGE — receipt-bar + fulfilment timeline + key tickets
   Three states share the same shell: ready / pending / failed
   ============================================================================ */
.px-thankyou{ padding:var(--s-6) 0 var(--s-11); max-width:880px; margin:0 auto; }

/* RECEIPT-BAR — terminal-print style header strip */
.px-receipt-bar{
  display:flex; align-items:center; gap:var(--s-5);
  padding:14px var(--s-5);
  background:var(--c-ink); color:#fff;
  border-radius:var(--r-3) var(--r-3) 0 0;
  font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  position:relative; overflow:hidden;
}
.px-receipt-bar::before{
  content:""; position:absolute; inset:auto 0 0 0;
  height:3px;
  background:repeating-linear-gradient(90deg,
    var(--c-orange) 0, var(--c-orange) 8px,
    transparent 8px, transparent 14px);
}
.px-receipt-bar--ready::before{ background:repeating-linear-gradient(90deg, #22C55E 0, #22C55E 8px, transparent 8px, transparent 14px); }
.px-receipt-bar--failed::before{ background:repeating-linear-gradient(90deg, var(--c-danger) 0, var(--c-danger) 8px, transparent 8px, transparent 14px); }
.px-receipt-bar-state{ display:inline-flex; align-items:center; gap:8px }
.px-receipt-pulse{
  width:8px; height:8px; border-radius:50%; background:var(--c-orange);
  box-shadow:0 0 0 3px rgba(255,107,26,.25);
  animation:px-pulse 1.4s infinite;
}
.px-receipt-pulse.is-green{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.25); animation:none }
.px-receipt-pulse.is-red  { background:var(--c-danger); box-shadow:0 0 0 3px rgba(239,68,68,.25); animation:none }
@keyframes px-pulse{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.3); opacity:.7 }
}
.px-receipt-bar-num{
  margin-left:auto;
  display:inline-flex; align-items:baseline; gap:6px;
  color:rgba(255,255,255,.6);
  font-weight:500;
}
.px-receipt-bar-num strong{
  color:#fff; font-family:var(--f-display);
  font-size:1rem; font-weight:700;
  letter-spacing:-.01em;
}
.px-receipt-bar-time{
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.5);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* FULFILMENT TIMELINE — horizontal stepper */
.px-fulfil-timeline{
  list-style:none; margin:0; padding:var(--s-7) var(--s-6);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-top:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--s-3);
  position:relative;
}
.px-fulfil-step{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  position:relative;
}
.px-fulfil-step:not(:last-child)::after{
  content:""; position:absolute;
  top:14px; left:calc(50% + 18px); right:calc(-50% + 18px);
  height:2px;
  background:var(--c-border);
  z-index:0;
}
.px-fulfil-step.is-done:not(:last-child)::after{ background:var(--c-success) }
.px-fulfil-dot{
  position:relative; z-index:1;
  width:30px; height:30px; border-radius:50%;
  background:var(--c-surface);
  border:2px solid var(--c-border);
  color:var(--c-ink-3);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.px-fulfil-step.is-done .px-fulfil-dot{
  background:var(--c-success); border-color:var(--c-success); color:#fff;
}
.px-fulfil-step.is-active .px-fulfil-dot{
  background:var(--c-orange-5); border-color:var(--c-orange); color:var(--c-orange);
}
.px-fulfil-label{
  font-size:.75rem; font-weight:600;
  color:var(--c-ink-3);
  line-height:1.35;
  max-width:14ch;
}
.px-fulfil-step.is-done .px-fulfil-label{ color:var(--c-ink-2) }
.px-fulfil-step.is-active .px-fulfil-label{ color:var(--c-orange-3) }
@media(max-width:680px){
  .px-fulfil-timeline{ flex-direction:column; gap:var(--s-3); padding:var(--s-5); }
  .px-fulfil-step{ flex-direction:row; gap:var(--s-3); text-align:left; align-items:center }
  .px-fulfil-step::after{ display:none!important }
  .px-fulfil-label{ max-width:none }
}

/* PENDING NOTICE */
.px-pending-notice{
  margin:var(--s-3) 0 var(--s-7);
  padding:var(--s-6);
  background:var(--c-orange-5);
  border:1px solid var(--c-orange-4);
  border-radius:var(--r-4);
}
.px-pending-notice-text h2{
  font-size:1.375rem; letter-spacing:-.02em;
  color:var(--c-ink); margin:0 0 var(--s-2);
}
.px-pending-notice-text p{
  margin:0; color:var(--c-ink-2);
  font-size:.9375rem; line-height:1.65;
}
.px-pending-notice-text p strong{ color:var(--c-ink); font-weight:600 }
.px-pending-notice-foot{
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px dashed var(--c-orange-4);
}
.px-pending-notice-meta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8125rem; color:var(--c-ink-3);
  flex-wrap:wrap;
}
.px-pending-notice-meta svg{ color:var(--c-orange); flex-shrink:0 }
.px-pending-notice-meta a{
  color:var(--c-orange-3); border-bottom:1px solid var(--c-orange-4); font-weight:500;
}

/* VICTORY HEADLINE — only on ready state */
.px-thankyou-victory{
  margin:var(--s-7) 0 var(--s-5);
  text-align:center;
}
.px-thankyou-victory h1{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  letter-spacing:-.025em;
  margin:0 0 var(--s-2);
  line-height:1.1;
}
.px-thankyou-victory h1 em{
  font-style:normal;
  background:linear-gradient(135deg, var(--c-orange-2), var(--c-orange-3));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.px-thankyou-victory p{
  margin:0;
  color:var(--c-ink-3);
  font-size:.9375rem;
}
.px-thankyou-victory p strong{ color:var(--c-ink); font-weight:600 }

/* KEY TICKETS — cinematic per-key card */
.px-thankyou-keys-v2{
  display:flex; flex-direction:column; gap:var(--s-5);
  margin:var(--s-5) 0 var(--s-7);
}
.px-key-ticket{
  position:relative;
  border-radius:var(--r-4);
  overflow:hidden;
  background-color:#1A1A2E;
  background-size:cover; background-position:center;
  color:#fff;
  border:1px solid var(--c-border);
  box-shadow:var(--sh-3);
}
.px-key-ticket.is-waiting{ background-color:#2D1B4E }

.px-key-ticket-head{
  position:relative; z-index:1;
  padding:var(--s-6) var(--s-6) var(--s-5);
}
.px-key-ticket-store{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.7);
  margin-bottom:var(--s-3);
}
.px-key-ticket-store .px-store-mark{ border:1px solid rgba(255,255,255,.3) }
.px-key-ticket-title{
  font-family:var(--f-display);
  font-size:1.5rem; font-weight:700;
  letter-spacing:-.02em;
  color:#fff; margin:0;
  max-width:32ch;
}

/* perforation between header and body — like a real ticket */
.px-key-ticket-perf{
  position:relative;
  height:14px;
  margin:0 -1px;
  background:
    radial-gradient(circle at 0 7px, transparent 7px, transparent 7px),
    radial-gradient(circle at 100% 7px, transparent 7px, transparent 7px);
}
.px-key-ticket-perf::before,
.px-key-ticket-perf::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:14px;
  background:var(--c-bg);
  border-radius:50%;
}
.px-key-ticket-perf::before{ left:-7px }
.px-key-ticket-perf::after { right:-7px }

.px-key-ticket-body{
  position:relative; z-index:1;
  padding:var(--s-5) var(--s-6) var(--s-6);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  border-top:1px dashed rgba(255,255,255,.15);
}
.px-key-ticket.is-waiting .px-key-ticket-body{
  background:rgba(0,0,0,.35);
}

.px-key-ticket-code-block{
  margin-bottom:var(--s-4);
}
.px-key-ticket-code-block:last-child{ margin-bottom:0 }
.px-key-ticket-code-label{
  display:inline-block;
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.6);
  margin-bottom:6px;
}
.px-key-ticket-code{
  display:block; width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,.95);
  border:0; border-radius:var(--r-2);
  font-family:ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size:1rem; font-weight:700;
  color:var(--c-ink);
  letter-spacing:.06em;
  cursor:text; user-select:all;
  margin-bottom:var(--s-3);
  text-align:center;
}
.px-key-ticket-code:focus{
  outline:0;
  box-shadow:0 0 0 3px var(--c-orange);
}
.px-key-ticket-image{
  display:block; max-width:100%;
  border-radius:var(--r-2);
  margin-bottom:var(--s-3);
  background:#fff;
}
.px-key-ticket-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.px-key-ticket-actions .px-key-copy{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.25);
  color:#fff;
  padding:9px 14px;
}
.px-key-ticket-actions .px-key-copy:hover{ background:rgba(255,255,255,.28); color:#fff }
.px-key-ticket-actions .px-key-copy.is-copied{ background:rgba(34,197,94,.25); color:#86EFAC; border-color:rgba(34,197,94,.4) }
.px-key-ticket-redeem{ flex:1; min-width:140px; justify-content:center }

.px-key-ticket-waiting{
  display:flex; align-items:center; gap:12px;
  padding:14px;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.2);
  border-radius:var(--r-2);
  font-size:.875rem;
  color:rgba(255,255,255,.85);
}
.px-key-ticket-waiting svg{ color:var(--c-orange-2) }

/* Step-by-step guide collapsible */
.px-key-ticket-guide{
  margin-top:var(--s-4);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2);
}
.px-key-ticket-guide summary{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  font-size:.8125rem; font-weight:500;
  color:rgba(255,255,255,.85);
  cursor:pointer;
  list-style:none;
}
.px-key-ticket-guide summary::-webkit-details-marker{ display:none }
.px-key-ticket-guide .px-thankyou-guide-chev{
  margin-left:auto;
  color:rgba(255,255,255,.5);
  transition:transform var(--dur-1) var(--ease);
}
.px-key-ticket-guide[open] .px-thankyou-guide-chev{ transform:rotate(180deg) }
.px-key-ticket-guide > div{
  padding:0 14px 14px;
  font-size:.8125rem;
  color:rgba(255,255,255,.7);
  line-height:1.7;
}
.px-key-ticket-guide > div p{ margin:0 0 var(--s-2) }
.px-key-ticket-guide > div p:last-child{ margin-bottom:0 }

/* RECEIPT FOOTER — mini totals + actions */
.px-receipt-foot{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  padding:var(--s-5) var(--s-6);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-5);
}
@media(min-width:720px){ .px-receipt-foot{ grid-template-columns:1.4fr 1fr; align-items:center } }
.px-receipt-foot-totals{
  display:flex; flex-direction:column; gap:8px;
}
.px-receipt-foot-totals > div{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.875rem;
  padding:6px 0;
  border-bottom:1px dashed var(--c-border-soft);
}
.px-receipt-foot-totals > div:last-child{
  border-bottom:0;
  padding-top:10px;
  margin-top:4px;
  border-top:2px dashed var(--c-border-firm);
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.125rem;
  color:var(--c-ink);
}
.px-receipt-foot-totals span{ color:var(--c-ink-3) }
.px-receipt-foot-totals strong{ color:var(--c-ink); font-weight:500 }
.px-receipt-foot-cta{
  display:flex; flex-direction:column; gap:8px;
}
.px-receipt-foot-cta .px-btn{ justify-content:center }

/* FAILED STATE — illustrated card */
.px-thankyou-failed{
  margin-top:0;
  padding:var(--s-9) var(--s-7);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:0 0 var(--r-4) var(--r-4);
  border-top:0;
  display:flex; gap:var(--s-7); align-items:center;
  flex-wrap:wrap;
}
.px-thankyou-failed-art{
  flex-shrink:0;
  width:120px; height:120px;
}
.px-thankyou-failed-body{ flex:1; min-width:240px }
.px-thankyou-failed-body h1{
  font-size:clamp(1.5rem,3vw,2.25rem);
  letter-spacing:-.02em;
  margin:0 0 var(--s-3);
  line-height:1.15;
}
.px-thankyou-failed-body > p{
  margin:0 0 var(--s-5);
  color:var(--c-ink-2);
  font-size:1rem; line-height:1.6;
  max-width:50ch;
}
.px-failed-reasons{
  margin-bottom:var(--s-5);
  background:var(--c-bg);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-2);
  max-width:50ch;
}
.px-failed-reasons summary{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  font-size:.875rem; font-weight:500;
  color:var(--c-ink); cursor:pointer;
  list-style:none;
}
.px-failed-reasons summary::-webkit-details-marker{ display:none }
.px-failed-reasons summary svg:first-child{ color:var(--c-warning) }
.px-failed-reasons summary .px-thankyou-guide-chev{
  margin-left:auto; color:var(--c-ink-3);
  transition:transform var(--dur-1) var(--ease);
}
.px-failed-reasons[open] summary .px-thankyou-guide-chev{ transform:rotate(180deg) }
.px-failed-reasons ul{
  list-style:disc; margin:0; padding:0 14px 14px 32px;
  font-size:.875rem; color:var(--c-ink-2);
  line-height:1.7;
}
.px-failed-reasons li{ margin-bottom:6px }
.px-failed-reasons li::marker{ color:var(--c-orange) }
.px-failed-actions{ display:flex; gap:var(--s-3); flex-wrap:wrap }

/* ============================================================================
   STATIC INFO PAGES — about / faq / contacts / refund / terms / privacy / cookies / how-to-buy
   ============================================================================ */
.px-page{ padding:var(--s-5) 0 var(--s-11) }
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.8125rem; color:var(--c-ink-3);
}
.crumb .px-icon{ width:14px; height:14px; color:var(--c-ink-4) }
.crumb a{ color:var(--c-ink-2); text-decoration:none }
.crumb a:hover{ color:var(--c-orange) }
.crumb .sep{ color:var(--c-ink-5) }
.crumb .current{ color:var(--c-ink); font-weight:500 }
.px-page-crumb{ padding:var(--s-3) 0 var(--s-2) }

.px-page-hero{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-6);
  padding:var(--s-9) var(--s-7);
  margin:var(--s-3) 0 var(--s-7);
  border-radius:var(--r-5);
  position:relative; overflow:hidden;
}
@media(min-width:720px){
  .px-page-hero{ grid-template-columns:1.5fr 1fr; align-items:center; gap:var(--s-7) }
}
.px-page-hero--orange { background:linear-gradient(135deg,#FFF3EA 0%,#FFE7D6 100%); border:1px solid var(--c-orange-4) }
.px-page-hero--violet { background:linear-gradient(135deg,#F6F3FF 0%,#EFEAFF 100%); border:1px solid var(--c-violet-4) }
.px-page-hero--mint   { background:linear-gradient(135deg,#ECFDF5 0%,#D1FAE5 100%); border:1px solid #A7F3D0 }
.px-page-hero--sky    { background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%); border:1px solid #BFDBFE }
.px-page-hero--rose   { background:linear-gradient(135deg,#FFF1F2 0%,#FFE4E6 100%); border:1px solid #FECDD3 }
.px-page-hero--gray   { background:linear-gradient(135deg,#F8FAFC 0%,#F1F5F9 100%); border:1px solid var(--c-border) }

.px-page-hero-text{ position:relative; z-index:1 }
.px-page-hero-eyebrow{
  display:inline-block;
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-ink-3);
  margin-bottom:var(--s-3);
}
.px-page-hero h1{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  letter-spacing:-.025em;
  margin:0 0 var(--s-3);
  line-height:1.1;
  color:var(--c-ink);
}
.px-page-hero-lead{
  font-size:1.0625rem;
  color:var(--c-ink-2);
  line-height:1.55;
  margin:0 0 var(--s-3);
  max-width:50ch;
}
.px-page-hero-meta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; color:var(--c-ink-3);
  font-variant-numeric:tabular-nums;
}
.px-page-hero-art{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  width:100%;
}
.px-page-hero-art svg{
  width:100%; max-width:240px;
  max-height:240px; height:auto;
  overflow:hidden;
}
@media(max-width:720px){
  .px-page-hero-art{ width:auto; max-width:none; margin:0 auto; }
  .px-page-hero-art svg{ width:200px; max-height:180px }
}

/* PROSE — clean editorial styling for the_content() */
.px-page-body{
  max-width:760px; margin:0 auto;
}
.px-prose{
  color:var(--c-ink-2);
  font-size:1rem;
  line-height:1.7;
}
.px-prose > * + *{ margin-top:var(--s-4) }
.px-prose h2{
  font-size:clamp(1.375rem,2vw,1.75rem);
  letter-spacing:-.02em;
  color:var(--c-ink);
  margin:var(--s-9) 0 var(--s-3);
  padding-top:var(--s-5);
  border-top:1px solid var(--c-border-soft);
}
.px-prose h2:first-child,
.px-prose > section:first-child h2{ margin-top:0; padding-top:0; border-top:0 }
.px-prose h3{
  font-size:1.125rem; font-weight:600;
  letter-spacing:-.01em;
  color:var(--c-ink);
  margin:var(--s-6) 0 var(--s-2);
}
.px-prose p{ margin:0 0 var(--s-4); max-width:none }
.px-prose p:last-child{ margin-bottom:0 }
.px-prose strong{ color:var(--c-ink); font-weight:600 }
.px-prose a{
  color:var(--c-orange-3);
  border-bottom:1px solid var(--c-orange-4);
  transition:all var(--dur-1) var(--ease);
}
.px-prose a:hover{ color:var(--c-orange); border-color:var(--c-orange) }
.px-prose ul,
.px-prose ol{ margin:0 0 var(--s-4); padding-left:24px }
.px-prose li{ margin-bottom:8px; line-height:1.6 }
.px-prose li::marker{ color:var(--c-orange); font-weight:600 }
.px-prose hr{
  border:0; height:1px; background:var(--c-border-soft);
  margin:var(--s-7) 0;
}
.px-prose blockquote{
  margin:var(--s-5) 0;
  padding:var(--s-4) var(--s-5);
  border-left:3px solid var(--c-orange);
  background:var(--c-orange-5);
  border-radius:0 var(--r-3) var(--r-3) 0;
  font-style:normal; color:var(--c-ink);
}
.px-prose blockquote p{ margin:0 }
.px-prose code{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.875em;
  background:var(--c-tinted);
  padding:2px 6px; border-radius:4px;
  color:var(--c-ink);
}

/* Lead paragraph — first p of prose can be larger if .lead */
.px-prose .lead,
.px-prose > p:first-child:not(.normal){
  font-size:1.125rem;
  color:var(--c-ink-2);
  line-height:1.6;
}

/* Callout block */
.px-prose .px-callout{
  display:flex; gap:12px; align-items:flex-start;
  padding:var(--s-4) var(--s-5);
  background:var(--c-orange-5);
  border:1px solid var(--c-orange-4);
  border-radius:var(--r-3);
  margin:var(--s-5) 0;
  color:var(--c-ink-2);
  font-size:.9375rem;
}
.px-prose .px-callout::before{
  content:"!";
  width:24px; height:24px; flex-shrink:0;
  background:var(--c-orange); color:#fff;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
}
.px-prose .px-callout--success{ background:var(--c-success-2); border-color:#A7F3D0 }
.px-prose .px-callout--success::before{ background:var(--c-success); content:"✓" }
.px-prose .px-callout--info{ background:#DBEAFE; border-color:#BFDBFE }
.px-prose .px-callout--info::before{ background:#3B82F6; content:"i"; font-style:italic }
.px-prose .px-callout--danger{ background:var(--c-danger-2); border-color:#FECACA }
.px-prose .px-callout--danger::before{ background:var(--c-danger); content:"×" }

/* Storefront card grid (used in About / How-to-buy) */
.px-storefront-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-3);
  margin:var(--s-5) 0;
}
@media(min-width:720px){ .px-storefront-grid{ grid-template-columns:repeat(4,1fr) } }
.px-storefront-card{
  display:flex; flex-direction:column; gap:6px;
  padding:var(--s-4);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
  text-decoration:none!important;
  border-bottom:1px solid var(--c-border)!important;
  transition:all var(--dur-1) var(--ease);
}
.px-storefront-card:hover{
  background:var(--c-tinted);
  border-color:var(--c-border-firm)!important;
  transform:translateY(-1px);
}
.px-storefront-card .px-store-mark{ width:18px; height:18px; border-radius:5px }
.px-storefront-card strong{
  color:var(--c-ink); font-size:.9375rem;
  font-weight:600; letter-spacing:-.01em;
}
.px-storefront-card span{
  font-size:.8125rem; color:var(--c-ink-3);
  font-variant-numeric:tabular-nums;
}

/* Genre pills strip */
.px-genre-strip{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:var(--s-4) 0;
}
.px-genre-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  background:var(--c-tinted);
  border:1px solid var(--c-border-soft)!important;
  border-radius:var(--r-pill);
  color:var(--c-ink-2)!important;
  font-size:.8125rem; font-weight:500;
  text-decoration:none!important;
  transition:all var(--dur-1) var(--ease);
}
.px-genre-pill:hover{
  background:var(--c-orange-5);
  color:var(--c-orange-3)!important;
  border-color:var(--c-orange-4)!important;
}
.px-genre-pill span{
  font-size:.6875rem;
  color:var(--c-ink-4);
  font-variant-numeric:tabular-nums;
}

/* Numbered step list (How to buy) */
.px-prose-steps{
  list-style:none; padding:0; margin:var(--s-5) 0;
  display:flex; flex-direction:column; gap:var(--s-3);
}
.px-prose-steps li{
  display:flex; gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
  align-items:flex-start;
}
.px-prose-step-num{
  width:36px; height:36px; flex-shrink:0;
  background:linear-gradient(135deg,var(--c-orange),var(--c-orange-3));
  color:#fff; border-radius:var(--r-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display);
  font-weight:700; font-size:.9375rem;
  letter-spacing:-.01em;
}
.px-prose-steps strong{
  display:block;
  font-size:1rem; color:var(--c-ink);
  margin-bottom:4px;
  font-weight:600;
}
.px-prose-steps p{
  font-size:.9375rem; color:var(--c-ink-2);
  margin:0!important; line-height:1.55;
}

/* Per-storefront activation guide */
.px-guides{
  display:flex; flex-direction:column; gap:var(--s-2);
  margin:var(--s-5) 0;
}
.px-guide{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
}
.px-guide summary{
  display:flex; align-items:center; gap:12px;
  padding:var(--s-3) var(--s-4);
  cursor:pointer;
  list-style:none;
}
.px-guide summary::-webkit-details-marker{ display:none }
.px-guide summary strong{
  color:var(--c-ink); font-weight:600;
  font-size:.9375rem;
}
.px-guide summary .px-store-mark{ width:18px; height:18px; border-radius:5px }
.px-guide-chev{
  margin-left:auto; color:var(--c-ink-3);
  transition:transform var(--dur-1) var(--ease);
}
.px-guide[open] .px-guide-chev{ transform:rotate(180deg) }
.px-guide ol{
  margin:0; padding:0 var(--s-5) var(--s-4) calc(var(--s-5) + 24px);
  font-size:.9375rem; color:var(--c-ink-2);
  border-top:1px solid var(--c-border-soft);
  padding-top:var(--s-3); margin-top:var(--s-2);
}
.px-guide li{ margin-bottom:8px; line-height:1.55 }
.px-guide li::marker{ color:var(--c-orange); font-weight:600 }

/* FAQ accordion */
.px-faq-list{
  display:flex; flex-direction:column; gap:8px;
  margin:var(--s-4) 0;
}
.px-faq-item{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
  transition:border-color var(--dur-1) var(--ease);
}
.px-faq-item[open]{ border-color:var(--c-orange-4) }
.px-faq-item summary{
  display:flex; align-items:center; gap:12px;
  padding:var(--s-4) var(--s-5);
  cursor:pointer;
  list-style:none;
  font-size:1rem; font-weight:600;
  color:var(--c-ink);
}
.px-faq-item summary::-webkit-details-marker{ display:none }
.px-faq-item summary > span{ flex:1 }
.px-faq-item summary .px-guide-chev{ color:var(--c-ink-3) }
.px-faq-answer{
  padding:0 var(--s-5) var(--s-5);
  color:var(--c-ink-2);
  font-size:.9375rem; line-height:1.65;
}
.px-faq-answer p{ margin:0 0 var(--s-3) }
.px-faq-answer p:last-child{ margin-bottom:0 }

/* Contact card grid */
.px-contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-4);
  margin:var(--s-5) 0;
}
@media(min-width:720px){ .px-contact-grid{ grid-template-columns:repeat(3,1fr) } }
.px-contact-card{
  padding:var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  text-align:center;
}
.px-contact-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:var(--r-3);
  margin:0 auto var(--s-3);
}
.px-contact-card h3{
  font-size:1rem; font-weight:600;
  margin:0 0 4px;
  color:var(--c-ink);
}
.px-contact-card p{
  margin:0 0 var(--s-3);
  font-size:.875rem; color:var(--c-ink-3);
  line-height:1.5;
}
.px-contact-card a{
  font-weight:600; color:var(--c-orange-3);
  border-bottom:1px solid var(--c-orange-4);
  font-size:.9375rem;
}
.px-contact-card a:hover{ color:var(--c-orange) }
.px-contact-card small{
  display:block;
  font-size:.75rem; color:var(--c-ink-4);
  font-variant-numeric:tabular-nums;
}

/* Two-column comparison (Do / Don't) */
.px-prose .px-do-dont{
  display:grid; grid-template-columns:1fr; gap:var(--s-3);
  margin:var(--s-5) 0;
}
@media(min-width:720px){ .px-prose .px-do-dont{ grid-template-columns:1fr 1fr } }
.px-prose .px-do,
.px-prose .px-dont{
  padding:var(--s-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
}
.px-prose .px-do{ border-color:#A7F3D0; background:#F0FDF4 }
.px-prose .px-dont{ border-color:#FECACA; background:#FEF2F2 }
.px-prose .px-do h4,
.px-prose .px-dont h4{
  font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  margin:0 0 var(--s-3);
  display:flex; align-items:center; gap:8px;
}
.px-prose .px-do h4{ color:#15803D }
.px-prose .px-dont h4{ color:#B91C1C }
.px-prose .px-do ul,
.px-prose .px-dont ul{ margin:0; padding-left:18px }
.px-prose .px-do li::marker{ color:#22C55E }
.px-prose .px-dont li::marker{ color:#EF4444 }

/* Footer CTA at end of page */
.px-page-footer-cta{
  display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center;
  justify-content:space-between;
  padding:var(--s-7) var(--s-7);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-4);
  margin:var(--s-9) 0 0;
}
.px-page-footer-cta h3{
  font-size:1.125rem; margin:0 0 6px; letter-spacing:-.01em;
  color:var(--c-ink);
}
.px-page-footer-cta p{
  margin:0; color:var(--c-ink-3);
  font-size:.9375rem;
}
.px-page-footer-cta-btns{
  display:flex; gap:var(--s-3); flex-wrap:wrap;
}
.px-prose .px-btn{ border-bottom:0 }
.px-prose .px-btn-primary,
.px-prose .px-btn-primary:hover{ color:#fff }
.px-prose .px-btn-primary .px-icon{ color:#fff }
.px-prose .px-btn-violet,
.px-prose .px-btn-violet:hover,
.px-prose .px-btn-dark,
.px-prose .px-btn-dark:hover{ color:#fff }
.px-prose .px-btn-ghost,
.px-prose .px-btn-ghost:hover{ color:var(--c-ink) }

/* Definition table — used in Cookie / Privacy for tabular data */
.px-prose .px-deftable{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
  margin:var(--s-4) 0;
}
.px-prose .px-deftable th,
.px-prose .px-deftable td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--c-border-soft);
  vertical-align:top;
}
.px-prose .px-deftable th{
  font-weight:600; color:var(--c-ink);
  font-size:.75rem; text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--c-bg);
  white-space:nowrap;
}
.px-prose .px-deftable td:first-child{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.8125rem;
  color:var(--c-ink);
  font-weight:500;
  word-break:break-word;
}
@media(max-width:720px){
  .px-prose .px-deftable{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    border:1px solid var(--c-border-soft);
    border-radius:var(--r-2);
  }
  .px-prose .px-deftable thead,
  .px-prose .px-deftable tbody,
  .px-prose .px-deftable tr{ display:table; width:100%; table-layout:fixed }
  .px-prose .px-deftable th,
  .px-prose .px-deftable td{
    font-size:.8125rem; padding:8px 10px;
    white-space:normal;
  }
  .px-prose .px-deftable td:first-child{
    word-break:break-all;
    font-size:.6875rem;
  }
}

/* ============================================================================
   LIGHTBOX — for the product media gallery (images + YouTube videos)
   ============================================================================ */
.px-lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.93);
  display:none;
  flex-direction:column;
  padding:var(--s-5);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
}
.px-lightbox.is-open{ display:flex }
.px-lightbox-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--s-4);
  color:#fff;
}
.px-lightbox-counter{
  font-size:.875rem; font-weight:500;
  color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums;
}
.px-lightbox-close{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all var(--dur-1) var(--ease);
}
.px-lightbox-close:hover{ background:rgba(255,255,255,.2) }
.px-lightbox-stage{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.px-lightbox-media{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.px-lightbox-stage img,
.px-lightbox-stage iframe{
  border-radius:var(--r-3);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.px-lightbox-stage img{
  max-width:100%; max-height:100%;
  object-fit:contain;
}
.px-lightbox-stage iframe{
  width:min(1280px, 92vw);
  height:min(720px, 78vh);
  border:0; background:#000;
}
@media(max-width:900px){
  .px-lightbox-stage iframe{
    width:96vw;
    height:calc(96vw * 9 / 16);
    max-height:70vh;
  }
}
.px-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all var(--dur-1) var(--ease);
}
.px-lightbox-nav:hover{ background:rgba(255,255,255,.22) }
.px-lightbox-nav.prev{ left:var(--s-3) }
.px-lightbox-nav.next{ right:var(--s-3) }
.px-lightbox-nav[disabled]{ opacity:.3; cursor:default }
.px-lightbox-thumbs{
  display:flex; gap:6px;
  margin-top:var(--s-4);
  overflow-x:auto;
  padding:6px 2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.px-lightbox-thumbs::-webkit-scrollbar{ display:none }
.px-lightbox-thumbs button{
  flex-shrink:0;
  width:88px; aspect-ratio:16/10;
  background-size:cover; background-position:center;
  border:2px solid transparent;
  border-radius:var(--r-2);
  cursor:pointer;
  position:relative;
  opacity:.65;
  transition:opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.px-lightbox-thumbs button:hover{ opacity:1 }
.px-lightbox-thumbs button.is-active{
  opacity:1; border-color:var(--c-orange);
}
.px-lightbox-thumbs button.is-video::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.45) center/16px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><polygon points='6 4 20 12 6 20'/></svg>");
  border-radius:inherit;
}
@media(max-width:600px){
  .px-lightbox{ padding:var(--s-3) }
  .px-lightbox-nav{ width:38px; height:38px }
  .px-lightbox-nav.prev{ left:6px }
  .px-lightbox-nav.next{ right:6px }
  .px-lightbox-thumbs button{ width:64px }
}

/* ============================================================================
   TOAST — small notification on Save / Share / Copy actions
   ============================================================================ */
.px-toast{
  position:fixed; left:50%; bottom:calc(var(--s-7) + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  z-index:999;
  background:var(--c-ink); color:#fff;
  padding:10px 18px; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  display:inline-flex; align-items:center; gap:8px;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.px-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.px-toast svg{ color:var(--c-orange-2) }

/* ============================================================================
   FOOTER
   ============================================================================ */
.px-footer{
  background:var(--c-ink);
  color:#CBD5E1;
  margin-top:var(--s-6);
}
.px-footer-top{
  padding:var(--s-10) 0 var(--s-9);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.px-footer-grid{
  display:grid; gap:var(--s-7);
  grid-template-columns:1fr;
}
@media(min-width:720px){
  .px-footer-grid{ grid-template-columns:1.4fr repeat(4, 1fr); gap:var(--s-8) }
}
.px-footer .px-lockup{
  color:#fff;
  height:48px;
  margin:0 0 var(--s-4);
  display:inline-block;
}
.px-footer-company{
  font-style:normal;
  font-size:.8125rem;
  line-height:1.65;
  color:#94A3B8;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:var(--s-4);
  margin-top:var(--s-4);
  display:flex; flex-direction:column; gap:2px;
}
.px-footer-company strong{
  color:#fff;
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:2px;
}
.px-footer-blurb{
  font-size:.875rem; line-height:1.6; color:#94A3B8;
  max-width:36ch; margin:0 0 var(--s-5);
}
.px-newsletter{
  display:flex; gap:8px; max-width:340px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill); padding:4px 4px 4px 16px;
}
.px-newsletter input{
  flex:1; background:transparent; border:0; outline:0;
  color:#fff; font:inherit; font-size:.875rem; padding:8px 0;
}
.px-newsletter input::placeholder{ color:#64748B }
.px-newsletter button{
  background:var(--c-orange); color:#fff;
  padding:8px 16px; border-radius:var(--r-pill);
  font:500 .8125rem/1 var(--f-body);
  display:inline-flex; align-items:center; gap:6px;
}
.px-newsletter button:hover{ background:var(--c-orange-3) }

.px-footer-col h4{
  color:#fff; font-family:var(--f-display); font-size:.875rem;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin:0 0 var(--s-4);
}
.px-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.px-footer-col a{
  color:#94A3B8; font-size:.875rem;
  transition:color var(--dur-1) var(--ease);
}
.px-footer-col a:hover{ color:var(--c-orange-2) }

.px-footer-stores{
  padding:var(--s-6) 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.px-footer-stores-inner{
  display:flex; flex-wrap:wrap; gap:var(--s-6);
  align-items:center; justify-content:space-between;
}
.px-store-row{
  display:flex; flex-wrap:wrap; gap:var(--s-5);
  align-items:center;
}
.px-store-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8125rem; font-weight:500;
  color:#94A3B8; padding:8px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-pill);
  transition:all var(--dur-1) var(--ease);
}
.px-store-chip:hover{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16) }

.px-footer-bottom{
  padding:var(--s-6) 0;
  display:flex; flex-wrap:wrap; gap:var(--s-4);
  justify-content:space-between; align-items:center;
  font-size:.8125rem; color:#94A3B8;
  font-weight:500;
}
.px-footer-bottom a{ color:#94A3B8 }
.px-footer-bottom a:hover{ color:#fff }
.px-pay-strip{
  display:flex; gap:var(--s-2); align-items:center;
}
.px-pay{
  height:24px; padding:4px 10px; border-radius:6px;
  background:#fff; color:#0F172A;
  font:700 11px/1 var(--f-display); letter-spacing:-.01em;
  display:inline-flex; align-items:center;
}
.px-pay.is-dark{ background:rgba(255,255,255,.1); color:#fff }

/* ============================================================================
   HOW IT WORKS — replaces the AI-template trust strip
   ============================================================================ */
.px-howto{
  margin-top:var(--s-9);
  padding:var(--s-9) var(--s-7);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-5);
}
.px-howto-head{ text-align:center; max-width:42ch; margin:0 auto var(--s-9) }
.px-howto-head .px-eyebrow{
  font-weight:600;
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-orange); display:inline-block; margin-bottom:var(--s-3);
}
.px-howto-head h2{
  font-size:clamp(1.625rem,3vw,2.25rem);
  letter-spacing:-.025em; margin:0;
}
.px-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:var(--s-8);
}
@media(min-width:720px){ .px-steps{ grid-template-columns:repeat(3,1fr); gap:var(--s-7) } }
.px-step{
  text-align:center;
  padding:0 var(--s-3);
}
.px-step-num{
  display:inline-block;
  font-size:.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--c-ink-3);
  margin-bottom:var(--s-3);
  font-variant-numeric:tabular-nums;
}
.px-step-icon{
  width:64px; height:64px; border-radius:var(--r-3);
  background:var(--c-orange-5); color:var(--c-orange);
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 auto var(--s-4);
}
.px-step-icon svg{ width:28px; height:28px }
.px-step:nth-child(2) .px-step-icon{ background:var(--c-violet-5); color:var(--c-violet) }
.px-step:nth-child(3) .px-step-icon{ background:var(--c-success-2); color:#15803D }
.px-step h3{
  font-size:1.125rem; font-weight:600;
  margin:0 0 var(--s-2);
  color:var(--c-ink);
}
.px-step p{
  margin:0 auto;
  font-size:.9375rem; color:var(--c-ink-2); line-height:1.6;
  max-width:32ch;
}

/* ============================================================================
   SEO — collapsible long-form copy
   ============================================================================ */
.px-seo{
  margin:var(--s-10) 0 0;
  padding:var(--s-9) 0 var(--s-8);
  border-top:1px solid var(--c-border);
}
.px-seo-card{ max-width:780px; margin:0 auto }
.px-seo-card > h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:-.02em; margin:0 0 var(--s-5);
}
.px-seo-card h3{
  font-size:1.0625rem; font-weight:600;
  margin:var(--s-7) 0 var(--s-3); color:var(--c-ink);
}
.px-seo-content{
  font-size:1rem; line-height:1.7; color:var(--c-ink-2);
  position:relative;
  max-height:200px; overflow:hidden;
  transition:max-height 600ms cubic-bezier(.2,.7,.2,1);
}
.px-seo-content.is-open{ max-height:6000px }
.px-seo-content::after{
  content:""; position:absolute; inset:auto 0 0 0; height:120px;
  background:linear-gradient(transparent, var(--c-bg) 75%);
  pointer-events:none;
  transition:opacity 200ms;
}
.px-seo-content.is-open::after{ opacity:0 }
.px-seo-content p{ margin:0 0 var(--s-4) }
.px-seo-content a{ color:var(--c-orange); border-bottom:1px solid var(--c-orange-4) }
.px-seo-content a:hover{ color:var(--c-orange-3); border-color:var(--c-orange-3) }
.px-seo-toggle{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:var(--s-4);
  padding:10px 18px; border-radius:var(--r-pill);
  background:var(--c-surface); border:1px solid var(--c-border);
  font:500 .875rem/1 var(--f-body); color:var(--c-ink-2);
  cursor:pointer;
  transition:all var(--dur-1) var(--ease);
}
.px-seo-toggle:hover{
  background:var(--c-tinted); border-color:var(--c-border-firm); color:var(--c-ink);
}
.px-seo-toggle svg{ transition:transform var(--dur-2) var(--ease) }
.px-seo-toggle.is-open svg{ transform:rotate(180deg) }

/* ============================================================================
   LEGAL NOTE in footer
   ============================================================================ */
.px-footer-legal{
  font-size:.75rem; color:#64748B; line-height:1.7;
  max-width:980px; margin:0 auto;
  padding:var(--s-5) 0 var(--s-6);
  text-align:center;
}
.px-footer-legal strong{ color:#CBD5E1; font-weight:600 }

/* ============================================================================
   MOBILE NAV (slide-in)
   ============================================================================ */
.px-mobile-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.4);
  z-index:99; opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease);
}
.px-mobile-overlay.is-open{ opacity:1; pointer-events:auto }
.px-mobile-panel{
  position:fixed; top:0; right:-100%; bottom:0;
  width:min(360px, 90vw);
  background:var(--c-surface);
  z-index:100;
  padding:var(--s-5);
  transition:right var(--dur-2) var(--ease);
  overflow-y:auto;
}
.px-mobile-panel.is-open{ right:0 }
.px-mobile-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s-5);
}
.px-mobile-section{ margin-bottom:var(--s-6) }
.px-mobile-section h5{
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--c-ink-3);
  margin:0 0 var(--s-3);
}
.px-mobile-section ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.px-mobile-section a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-2);
  font-size:.9375rem; color:var(--c-ink);
}
.px-mobile-section a:hover{ background:var(--c-tinted); color:var(--c-orange-3) }
.px-mobile-section a .count{
  margin-left:auto; font-size:.75rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--c-ink-3);
}

/* ============================================================================
   TOASTS — bottom-right notification stack (replaces inline WC notices)
   ============================================================================ */
.px-noti-host{
  position:fixed; right:24px; bottom:24px; z-index:200;
  display:flex; flex-direction:column-reverse; gap:10px;
  pointer-events:none;
  max-width:min(420px, calc(100vw - 32px));
}
.px-toast-fragment{ display:none !important }

/* Hide WC's inline notice blocks everywhere; auth-screen exception below. */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{ display:none !important }
.px-authv2 .woocommerce-notices-wrapper,
.px-authv2 .woocommerce-message,
.px-authv2 .woocommerce-error,
.px-authv2 .woocommerce-info{ display:block !important }

.px-noti{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-3);
  box-shadow:var(--sh-3, 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.08));
  font-size:.875rem; line-height:1.45; color:var(--c-ink);
  transform:translateX(110%); opacity:0;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.px-noti.is-in{ transform:translateX(0); opacity:1 }
.px-noti.is-out{ transform:translateX(110%); opacity:0 }
.px-noti-icon{
  flex-shrink:0; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--c-tinted); color:var(--c-ink-2);
  margin-top:1px;
}
.px-noti-msg{ flex:1; min-width:0; word-wrap:break-word }
.px-noti-msg a{
  color:var(--c-orange-3); font-weight:500;
  border-bottom:1px solid var(--c-orange-4);
}
.px-noti-msg a:hover{ color:var(--c-orange); border-color:var(--c-orange) }
.px-noti-close{
  flex-shrink:0;
  width:24px; height:24px; padding:0;
  border:0; background:transparent; cursor:pointer;
  color:var(--c-ink-3); border-radius:var(--r-1);
  display:inline-flex; align-items:center; justify-content:center;
  margin:-2px -4px -2px 0;
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.px-noti-close:hover{ background:var(--c-tinted); color:var(--c-ink) }

.px-noti--success .px-noti-icon{ background:var(--c-success-2, #DCFCE7); color:var(--c-success, #16A34A) }
.px-noti--error   .px-noti-icon{ background:var(--c-danger-2, #FEE2E2);  color:var(--c-danger, #DC2626) }
.px-noti--notice  .px-noti-icon{ background:var(--c-orange-5);           color:var(--c-orange-3) }

.px-noti--success{ border-color:#A7F3D0 }
.px-noti--error  { border-color:#FECACA }

@media (max-width:520px){
  .px-noti-host{ left:16px; right:16px; bottom:16px; max-width:none }
  .px-noti{ transform:translateY(110%) }
  .px-noti.is-in{ transform:translateY(0) }
  .px-noti.is-out{ transform:translateY(110%) }
}

/* ====================================================================
   Wishlist page — empty state + saved-games grid
   ==================================================================== */
.px-wishlist-target{ margin:0 0 32px }

.px-wishlist-loading{
  padding:80px 24px;
  text-align:center;
  color:var(--c-ink-2);
  font:500 15px/1.4 var(--f-body);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
}

.px-wishlist-empty{
  padding:64px 24px;
  text-align:center;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
}
.px-wishlist-empty-icon{
  width:80px; height:80px;
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--c-orange-5), #FEE7D5);
  color:var(--c-orange-3);
  border-radius:50%;
}
.px-wishlist-empty h2{
  margin:0 0 10px;
  font:700 22px/1.2 var(--f-display);
  color:var(--c-ink);
}
.px-wishlist-empty p{
  margin:0 auto 24px;
  max-width:440px;
  color:var(--c-ink-2);
  font:400 15px/1.5 var(--f-body);
}

.px-wishlist-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  margin:0 0 20px;
  padding:0 0 16px;
  border-bottom:1px solid var(--c-line);
}
.px-wishlist-head h2{
  margin:0;
  font:700 22px/1.2 var(--f-display);
  color:var(--c-ink);
}
.px-wishlist-head h2 span{
  color:var(--c-ink-2);
  font-weight:500;
}
.px-wishlist-clear{
  background:transparent;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:8px 14px;
  font:600 13px/1 var(--f-body);
  color:var(--c-ink-2);
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.px-wishlist-clear:hover{
  border-color:#FECACA;
  color:#BE123C;
  background:#FEF2F2;
}

/* Wishlist page breaks out of the narrow .px-page-body prose width */
.page-wishlist .px-page-body{ max-width:1280px }

.px-wishlist-grid{
  display:grid;
  gap:var(--s-4);
  grid-template-columns:repeat(2, minmax(0, 1fr));
  margin:0;
}
@media(min-width:720px){
  .px-wishlist-grid{
    gap:var(--s-5);
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media(min-width:1100px){
  .px-wishlist-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
  /* 1-3 saved games — keep cards at a comfortable size, centered */
  .px-wishlist-grid:has(> .px-card:only-child){
    grid-template-columns:minmax(0, 320px);
    justify-content:center;
  }
  .px-wishlist-grid:has(> .px-card:first-child:nth-last-child(2)){
    grid-template-columns:repeat(2, minmax(0, 280px));
    justify-content:center;
  }
  .px-wishlist-grid:has(> .px-card:first-child:nth-last-child(3)){
    grid-template-columns:repeat(3, minmax(0, 280px));
    justify-content:center;
  }
}

@media (max-width:520px){
  .px-wishlist-empty{ padding:48px 18px }
  .px-wishlist-empty-icon{ width:64px; height:64px; margin-bottom:16px }
  .px-wishlist-empty-icon svg{ width:32px; height:32px }
  .px-wishlist-head{ flex-direction:column; align-items:flex-start; gap:10px }
}

/* ====================================================================
   Cookie consent — floating card
   ==================================================================== */
.px-cookie{
  position:fixed;
  left:24px; right:24px; bottom:24px;
  z-index:9000;
  max-width:560px;
  margin:0 auto;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:0 24px 48px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
  transform:translateY(140%);
  opacity:0;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  will-change:transform, opacity;
}
.px-cookie[hidden]{ display:none }
.px-cookie.is-visible{ transform:translateY(0); opacity:1 }
.px-cookie.is-leaving{ transform:translateY(140%); opacity:0 }

.px-cookie-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon body"
    "icon actions";
  gap:14px;
  padding:18px 20px;
  align-items:start;
}
.px-cookie-icon{
  grid-area:icon;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--c-orange-5), #FEE7D5);
  color:var(--c-orange-3);
  border-radius:50%;
  flex-shrink:0;
}
.px-cookie-body{ grid-area:body; min-width:0 }
.px-cookie-title{
  margin:0 0 4px;
  font:700 15px/1.3 var(--f-display);
  color:var(--c-ink);
}
.px-cookie-text{
  margin:0;
  font:400 13px/1.5 var(--f-body);
  color:var(--c-ink-2);
}
.px-cookie-text a{
  color:var(--c-orange);
  font-weight:600;
  text-decoration:none;
}
.px-cookie-text a:hover{ text-decoration:underline }

.px-cookie-actions{
  grid-area:actions;
  display:flex; gap:10px;
  flex-wrap:wrap;
}
.px-cookie-actions .px-btn{
  padding:9px 16px;
  font-size:13px;
  white-space:nowrap;
}

@media (max-width:520px){
  .px-cookie{ left:12px; right:12px; bottom:12px }
  .px-cookie-inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "icon"
      "body"
      "actions";
    gap:10px;
    padding:16px;
  }
  .px-cookie-icon{ width:36px; height:36px }
  .px-cookie-actions{ width:100% }
  .px-cookie-actions .px-btn{ flex:1 }
}