:root{
  --bg:#06080f; --text:#e7eefc; --muted:#a7b2cc;
  --neon1:#7cf7d4; --neon2:#8a7cff; --hot:#ff3df2;
  --border:rgba(255,255,255,.12); --shadow:0 18px 55px rgba(0,0,0,.55);
  --danger:#ff6b7a;

  /* shared surface tokens (v3.6.17.44) */
  --wt-border: rgba(255,255,255,.12);
  --wt-border-soft: rgba(255,255,255,.08);
  --wt-border-softer: rgba(255,255,255,.10);
  --wt-surface: rgba(0,0,0,.28);
  --wt-surface-soft: rgba(0,0,0,.22);
  --wt-glow: rgba(124,247,212,.10);
}
*{box-sizing:border-box}
html,body{height:100%;background-color:#000;}

/* Hide the main vertical scrollbar while preserving scrolling */
html, body{
  overflow-y:auto;
  scrollbar-width:none;           /* Firefox */
  -ms-overflow-style:none;        /* IE/Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;                   /* Chrome/Safari */
}


body{
  margin:0;color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(138,124,255,.25), transparent 55%),
    radial-gradient(900px 600px at 80% 30%, rgba(124,247,212,.18), transparent 60%),
    radial-gradient(600px 420px at 60% 90%, rgba(255,61,242,.12), transparent 60%),
    linear-gradient(180deg, rgba(6,8,15,1), rgba(6,8,15,1));
  background-repeat:no-repeat;
  background-attachment:scroll;
  background-size:cover;
}
a{color:var(--neon1);text-decoration:none}
a:hover{text-decoration:underline}
.pixel{font-family:"Press Start 2P", ui-monospace, Menlo, Monaco, Consolas, monospace; letter-spacing:.6px}
.container{width:min(1100px,92vw);margin:0 auto;padding:22px 0 60px}

.crt-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.035), rgba(0,0,0,0) 2px),
    radial-gradient(1200px 900px at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.55) 100%);
  background-size:100% 4px, cover;
  mix-blend-mode:overlay;opacity:.55;
  animation:flicker 7s infinite;
}
@keyframes flicker{0%,100%{opacity:.52}50%{opacity:.60}52%{opacity:.48}55%{opacity:.58}}

.topbar{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(6,8,15,.70);
  border-bottom: 1px solid rgba(124,247,212,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand{width:min(1100px,92vw);margin:0 auto;display:flex;align-items:center;gap:12px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text);text-decoration:none}
.logoMark{
  width:34px;height:34px;display:grid;place-items:center;border-radius:12px;
  border:1px solid var(--wt-border);
  background: radial-gradient(20px 20px at 30% 30%, rgba(124,247,212,.25), transparent 70%),
    radial-gradient(18px 18px at 70% 70%, rgba(138,124,255,.25), transparent 70%), rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px rgba(124,247,212,.10), 0 0 24px rgba(124,247,212,.14);
  font-family:"Press Start 2P";font-size:.72rem;
}
.tagline{color:var(--muted);font-size:.95rem;text-transform:lowercase}
.nav{margin-left:auto;display:flex;gap:16px}
.nav a{color:var(--text);opacity:.9}
.nav a:hover{opacity:1;text-decoration:none}
.nav a i{margin-right:10px;opacity:.9}
.iconbtn{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer}

.hero{
  position:relative;overflow:hidden;border-radius:22px;padding:22px;border:1px solid rgba(138,124,255,.18);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(138,124,255,.35), transparent 60%),
    radial-gradient(700px 500px at 70% 20%, rgba(124,247,212,.22), transparent 60%),
    radial-gradient(650px 450px at 60% 90%, rgba(255,61,242,.16), transparent 60%),
    url("/assets/img/hero-bg.svg") center/cover no-repeat;
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px;box-shadow:var(--shadow);
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(6,8,15,.84), rgba(6,8,15,.40));pointer-events:none}
.hero>*{position:relative;z-index:1}
.kicker{display:inline-block;padding:8px 10px;border-radius:999px;border:1px solid var(--wt-border);background:rgba(0,0,0,.22);font-size:.70rem;margin-bottom:10px}
.titleGlitch{margin:0;font-size:clamp(2rem, 3.2vw, 3.2rem);text-shadow:0 0 14px rgba(124,247,212,.18),0 0 18px rgba(138,124,255,.16)}
.lead{color:var(--muted);font-size:1.05rem;line-height:1.55}

.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--wt-border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.card.neon{border-color:rgba(124,247,212,.26);box-shadow:0 0 0 1px rgba(138,124,255,.14),0 0 24px rgba(124,247,212,.10),0 0 26px rgba(138,124,255,.08),var(--shadow)}
.gridCards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.card.product{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center}
.thumb{border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);overflow:hidden}
.thumb-small{height:110px}
.thumb-large{height:300px}
.thumb-mini{height:42px;width:72px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-detail{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
.price{margin-top:.4rem;font-weight:800;font-size:1.1rem}
.price.big{font-size:1.6rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid rgba(124,247,212,.35);background:rgba(124,247,212,.12);color:var(--text);font-weight:700;cursor:pointer}
.btn-ghost{border-color:rgba(138,124,255,.35);background:rgba(138,124,255,.12)}
.btnSmall{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--wt-border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-weight:700;font-size:.92rem}
.btnSmall.danger{border-color:rgba(255,107,122,.35);background:rgba(255,107,122,.12)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inline{display:inline;margin-left:8px}
label{display:block;margin-top:10px;margin-bottom:6px;color:var(--muted)}
input,textarea,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--wt-border);background:rgba(0,0,0,.25);color:var(--text)}
.alert{background:rgba(255,107,122,.12);border:1px solid rgba(255,107,122,.35);padding:10px 12px;border-radius:14px}
/* Flash states: reserve red for errors, green for success */
.alert.error{background:rgba(255,107,122,.12);border:1px solid rgba(255,107,122,.35)}
.alert.success{background:rgba(46, 204, 113, .14);border:1px solid rgba(46, 204, 113, .38)}
.muted{color:var(--muted)} .small{font-size:.9rem} .narrow{width:min(520px,92vw);margin:0 auto}
.bullets{margin:10px 0 0 18px;color:var(--muted)}
.tableWrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.table th{font-family:"Press Start 2P";font-size:.72rem;text-align:left}
.pill{font-size:.8rem;padding:3px 8px;border:1px solid var(--wt-border);border-radius:999px;color:rgba(231,238,252,.75);background:rgba(0,0,0,.16)}
.right{text-align:right}
.footer{border-top:1px solid rgba(255,255,255,.10);background:rgba(6,8,15,.65);position:relative;z-index:10}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:40}
.sidemenu{position:fixed;top:0;left:0;height:100%;width:min(340px,86vw);background:linear-gradient(180deg, rgba(18,26,40,.98), rgba(10,12,20,.98));border-right:1px solid rgba(124,247,212,.18);z-index:50;transform:translateX(-105%);transition:transform .18s ease;padding:14px;box-shadow:20px 0 60px rgba(0,0,0,.55)}
.sidemenu.open{transform:translateX(0)}
.sidemenu a{display:block;padding:12px 10px;border-radius:12px;color:var(--text)}
.sidemenu a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.sidemenu-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px}
hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:10px 0}

.desktop-only{display:flex}
.mobile-only{display:none}
@media(max-width:900px){
  .hero::after{background:linear-gradient(180deg, rgba(6,8,15,.35), rgba(6,8,15,.10));}

  /* v4.5.1: On mobile, hide the hero tile entirely so Latest News becomes the first panel */
  section.hero{display:none}

  .hero{grid-template-columns:1fr;padding:18px}
  /* Desktop keeps Latest News inside hero-right; mobile shows the external Latest News wrapper */
  .hero-right{display:none}
  .latestNewsMobileWrap{display:block}
  .gridCards,.grid2,.grid3{grid-template-columns:1fr}
  .product-detail{grid-template-columns:1fr}
  .card.product{grid-template-columns:1fr}
  .desktop-only{display:none}
  .mobile-only{display:inline-flex}
}


/* Featured product tile */
.featuredCard{padding:0;overflow:hidden;display:block}
.featuredImage{position:relative;height:280px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18)}
.featuredImage img{width:100%;height:100%;object-fit:cover;display:block}
.featuredImg{box-shadow:inset 0 -4px 0 rgba(255,255,255,.14)}
.featuredBadge{position:absolute;left:14px;bottom:14px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.featuredSoldTag{position:absolute;right:14px;top:14px;padding:8px 12px;border-radius:12px;border:2px solid rgba(0,0,0,.55);background:#d10f2f;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.25);text-transform:uppercase;letter-spacing:1px}

/* Slightly smaller SOLD tag on mobile */
@media (max-width: 640px){
  .featuredSoldTag{right:10px;top:10px;padding:6px 10px;border-radius:10px;font-size:12px}
}
.featuredBody{padding:16px}
.featuredMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.featuredActionsRow{align-items:flex-end}
.featuredActionsBtns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.featuredImage{height:220px}}


/* Latest News tile (homepage) */
.latestNewsCard{display:flex;flex-direction:column;gap:10px}
.latestNewsTitleRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.latestNewsMeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;opacity:.95;font-size:13px}
.latestNewsMeta .dot{opacity:.6}
.latestNewsMetaDivider{margin-top:10px;border-top:3px solid rgba(255,255,255,.18)}
.latestNewsArticleTitle{margin:4px 0 0 0;font-size:16px}
.latestNewsExcerpt{margin:0;line-height:1.45}
.latestNewsEditedText{margin-top:10px;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.4px;opacity:.75;text-transform:uppercase}
.latestNewsEditedText::before{content:"✎ ";opacity:.85}
.latestNewsFoot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.latestNewsCounters{display:flex;gap:10px;flex-wrap:wrap}
.pillCounter{background:rgba(0,0,0,.22)}

/* Latest News placement helper (default hidden; enabled on mobile) */
.latestNewsMobileWrap{display:none;margin-top:0;padding-top:0}

@keyframes latestNewsPulse{0%{transform:scale(1)}50%{transform:scale(1.015)}100%{transform:scale(1)}}

@media(max-width:900px){
  .latestNewsMobileWrap{display:block}
  /* Mobile-only: pulse 3 cycles then stop */
  .latestNewsMobileWrap .latestNewsCard{animation:latestNewsPulse 2.2s ease-in-out 3;animation-fill-mode:forwards;will-change:transform}
  /* Remove any excess top spacing now that hero is hidden */
  .latestNewsMobileWrap > *:first-child{margin-top:0}
}

@media (prefers-reduced-motion: reduce){
  .latestNewsMobileWrap .latestNewsCard{animation:none !important}
}



/* Product gallery */
.galleryRow{display:flex;gap:10px;flex-wrap:wrap}
.galleryThumb{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);border-radius:12px;padding:0;overflow:hidden;cursor:pointer}
.galleryThumb img{display:block;width:92px;height:62px;object-fit:cover}
.galleryThumb:focus{outline:2px solid rgba(124,247,212,.35);outline-offset:2px}


/* Admin gallery drag/drop */
.galleryItem{cursor:grab}
.galleryItem.dragging{opacity:.6;cursor:grabbing}


/* Lightbox */
.noScroll{overflow:hidden}
.lightbox{position:fixed;inset:0;display:none;z-index:9999}
.lightbox.open{display:block}
.lightboxBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.lightboxDialog{position:absolute;inset:0;display:grid;place-items:center;padding:18px}
.lightboxDialog img{max-width:min(1100px, 96vw);max-height:82vh;border-radius:18px;border:1px solid rgba(255,255,255,.14);box-shadow:0 25px 80px rgba(0,0,0,.55);background:rgba(0,0,0,.20)}
.lightboxClose{position:absolute;top:18px;right:18px}
.lightboxClose,.lightboxNav{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);color:inherit;border-radius:14px;padding:10px 12px;cursor:pointer}
.lightboxNav{position:absolute;top:50%;transform:translateY(-50%)}
.lightboxNav.prev{left:18px}
.lightboxNav.next{right:18px}
.lightboxMeta{position:absolute;left:18px;right:18px;bottom:calc(18px + (var(--footerH) * 0.6));display:flex;justify-content:space-between;align-items:center;gap:10px}


/* Admin mobile side menu */
.sideMenu{position:fixed;inset:0;display:none;z-index:9999}
.sideMenu.open{display:block}
.sideMenuBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px)}
.sideMenuPanel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);padding:16px;background:rgba(10,12,18,.92);border-left:1px solid rgba(255,255,255,.12);box-shadow:-25px 0 80px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:10px}
.sideMenuPanel a{padding:12px 10px;border-radius:14px;border:1px solid var(--wt-border-softer);background:rgba(0,0,0,.18);text-decoration:none;color:inherit}
.sideMenuHead{margin-bottom:6px}


/* Section headings: stacked (title on its own line, meta beneath) */
.section-head.section-head-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.section-head.section-head-stack h2{margin:0}

/* Product tiles: keep link styling clean */
a.card.product{ text-decoration:none; color:inherit; }
a.card.product:hover{ text-decoration:none; }


/* Chunky arcade UI bits */
.metaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.pillArcade{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.3px;
  border:2px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.45)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,0,200,.24), transparent 55%),
    radial-gradient(120% 120% at 90% 0%, rgba(0,255,255,.20), transparent 55%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.06) inset;
  text-transform:uppercase;
  font-size:.82rem;
}

.pillArcade i{ opacity:.95; }

/* Tag pill variant (slightly louder) */
.pillTag{
  border-color: rgba(0,255,255,.28);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 0 18px rgba(0,255,255,.18);
}

/* Make section heads feel more arcade */
.section-head.section-head-stack{
  padding:10px 0 2px 0;
}
.section-head.section-head-stack h2{
  line-height:1.05;
  text-shadow: 0 0 18px rgba(255,0,200,.18), 0 0 18px rgba(0,255,255,.12);
}

/* Product tiles: chunkier hover */
a.card.product{
  transform: translateZ(0);
}
a.card.product:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}



/* Product page spacing + sizing refinements */
.productLayout{
  row-gap: 28px;
}

.productTitle{
  font-size: 1.6rem; /* slightly smaller, still chunky */
}

.metaRow{
  margin-top: 8px;
}

.productImageWrap{
  margin-top: 18px;
}


/* Product page spacing refinement (tighter but still airy) */
.productLayout{
  row-gap: 14px; /* was ~28px */
}

.productTitle{
  margin-bottom: 6px;
}

.metaRow{
  margin-top: 4px;
  margin-bottom: 10px;
}

.productImageWrap{
  margin-top: 0px;
}

/* Gallery spacing after main image */
.galleryRow{
  margin-top: 10px;
}


/* Safety: ensure no decorative icon is injected before product titles */
.productTitle::before{
  content: none !important;
}


/* Product gallery: 3 thumbnails per row on mobile, aligned to main image width */
.galleryRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.galleryThumb{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.galleryThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

/* Mobile: force a neat 3-up grid that matches the main image width */
@media (max-width: 640px){
  .galleryRow{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
    width:100%;
  }
  .galleryThumb{
    width:100%;
  }
  .galleryThumb img{
    aspect-ratio: 1 / 1;
  }
}

/* Pills row: use leftover space for favourite */
.metaRowPills{ width:100%; }
.pillForm{ display:inline-flex; }


/* Favourite active state */
button.pillFav.isOn, a.pillFav.isOn, .pillFav.isOn{
  border-color: rgba(255,0,200,.35);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 0 22px rgba(255,0,200,.22);
}
.pillFav.isOn i{ filter: drop-shadow(0 0 10px rgba(255,0,200,.35)); }


/* Arcade click animation for favourite */
@keyframes arcadePop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.06); }
  70%{ transform: scale(0.98); }
  100%{ transform: scale(1); }
}
.pillFav.arcadePop{ animation: arcadePop .22s ease-out; }
.pillFav.isLoading{ opacity: .85; }


/* Ensure favourite pill matches SKU pill text colour */
.pillArcade,
.pillArcade i,
.pillFav,
.pillFav i{
  color:#fff;
}

/* Remove default button styles bleeding through */
button.pillArcade{
  background-color: inherit;
  font: inherit;
}


/* Desktop gallery thumbnail sizing (keep thumbs small; mobile uses 3-up grid) */
.galleryRow{
  align-items:start;
}
.galleryThumb{
  width: 110px;
  height: 110px;
}
@media (min-width: 641px){
  .galleryThumb img{ aspect-ratio: 1 / 1; }
}


/* Admin nav alignment: line options up with the Admin logo */
.adminSidebar .nav,
.adminSidebar nav,
.adminNav,
.admin-nav{
  padding-left: 18px;
  padding-right: 18px;
}
.adminSidebar .brand,
.adminBrand,
.admin-logo{
  padding-left: 18px;
  padding-right: 18px;
}


/* Admin nav link padding normalize */
.adminSidebar a,
.adminNav a,
.admin-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
}


/* Pill normalization: make <span>, <a>, <button> render identically */
.pillArcade{
  font-family: inherit;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a.pillArcade{
  text-decoration:none;
}
button.pillArcade{
  appearance:none;
  -webkit-appearance:none;
  border:0; /* base reset; pillArcade border below still applies */
  background: none;
}
/* Re-apply pill border/background after button reset */
button.pillArcade, a.pillArcade{
  border:2px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.45)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,0,200,.24), transparent 55%),
    radial-gradient(120% 120% at 90% 0%, rgba(0,255,255,.20), transparent 55%);
}


/* Pills left-aligned (SKU + Favourite together) */
.metaRowPills{
  justify-content:flex-start;
}


/* Pill buttons match anchor/span pills exactly */
button.pillArcade{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:.82rem;
  line-height:1;
  cursor:pointer;
  color:#fff;
}


/* Subtle pulse when favourited */
@keyframes favGlow {
  0% {
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      0 0 0 2px rgba(255,255,255,.06) inset,
      0 0 14px rgba(255,0,200,.14);
  }
  100% {
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      0 0 0 2px rgba(255,255,255,.06) inset,
      0 0 22px rgba(255,0,200,.24);
  }
}

button.pillFav.isOn, a.pillFav.isOn, .pillFav.isOn{
  animation: favGlow 1.2s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce){
  button.pillFav.isOn, a.pillFav.isOn, .pillFav.isOn{ animation: none; }
}


/* Account favourites list */
.favItem{ position:relative; }
.favItem.dragging{ opacity:.7; transform: scale(0.99); }
.noDecor{ text-decoration:none; color:inherit; display:block; }
.noDecor:hover{ text-decoration:none; }


/* Tiny toast for saves */
#wtToast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  border: 2px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.45)),
    radial-gradient(120% 120% at 10% 0%, rgba(255,0,200,.20), transparent 55%),
    radial-gradient(120% 120% at 90% 0%, rgba(0,255,255,.18), transparent 55%);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 9999;
}
#wtToast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.favHandle:active{ cursor: grabbing; }


/* Favourites: mobile reorder buttons */
.favMoveBtns{ display:none; gap:8px; align-items:center; }
@media (max-width: 640px){
  .favMoveBtns{ display:inline-flex; }
  /* Drag handle still visible, but drag is disabled on mobile in JS */
}


/* Subtle vibration on reorder */
@keyframes vibrate {
  0% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
  75% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
.vibrate{
  animation: vibrate 140ms linear 1;
}
@media (prefers-reduced-motion: reduce){
  .vibrate{ animation:none; }
}

/* Move buttons left in the meta row */
.favMoveBtns{
  display:inline-flex;
  gap:8px;
  align-items:center;
}


/* Favourites thumbnail sizing fix */
.favItem .thumbWrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}
.favItem .thumbImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ensure consistent card spacing */
.favItem .cardTitle{ margin-top: 8px; }


/* Favourites: align Remove button left on desktop, keep mobile as-is */
@media (min-width: 641px){
  .favRemove{
    margin-left: 0 !important;
  }
}

/* Neon modal */
.neonModalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.neonModal{
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,0,200,.25), transparent 55%),
    radial-gradient(120% 120% at 90% 0%, rgba(0,255,255,.22), transparent 55%),
    linear-gradient(180deg, #0b0b12, #05050a);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 22px 24px;
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  color: #fff;
  text-align: center;
}
.neonModal h3{
  margin: 0 0 10px 0;
}
.neonModal p{
  margin: 0 0 18px 0;
}
.neonModal .pillArcade{
  margin: 0 6px;
}

/* Product title refinement */
.productTitle{
  font-size: 1.35rem;
  line-height: 1.65;
}
@media (min-width: 900px){
  .productTitle{
    font-size: 1.55rem;
    line-height: 1.6;
  }
}

/* Neon modal animation (scale + fade) */
.neonModalBackdrop{
  opacity: 0;
  transition: opacity 180ms ease;
}
.neonModalBackdrop.isOpen{
  display: flex;
  opacity: 1;
}
.neonModal{
  transform: translateY(6px) scale(.96);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.neonModalBackdrop.isOpen .neonModal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Arcade modal layout helpers (reusable across the site)
   Use alongside: .neonModalBackdrop + .neonModal
*/
.wtArcadeModal{
  max-width: 820px;
  text-align: left;
  padding: 18px 18px 0 18px;
  max-height: 82vh;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  --wtArcadeHeaderH: 54px;
  --wtArcadeActionsH: 64px;
}
@media (max-width: 700px){
  .wtArcadeModal{
    max-height: 72vh;
    padding: 14px 14px 0 14px;
    min-height: 240px;
    --wtArcadeHeaderH: 50px;
  }
}
.wtArcadeModalHeader{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wtArcadeHeaderH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wtArcadeModalHeaderInner{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .5px;
}
.wtArcadeModalBody{
  padding: calc(var(--wtArcadeHeaderH) + 14px) 12px 12px 12px;
  overflow: auto;
}
.wtArcadeModalActions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.wtModalActionBtn{
  min-height: 40px;
}
.wtModalActionBtnFullRow{
  width: 100%;
}
.wtArcadeModal--center{
  text-align: center;
}




/* Modal skin: "nice bkg modal" purple+green arcade gradient */
:root{
  --wtModalBkg:
    radial-gradient(1200px 700px at 20% 10%, rgba(138,124,255,.28), transparent 55%),
    radial-gradient(900px 600px at 80% 30%, rgba(124,247,212,.20), transparent 60%),
    radial-gradient(650px 450px at 60% 90%, rgba(255,61,242,.14), transparent 62%),
    linear-gradient(180deg, #0b0b12, #05050a);
}

/* ============================================================
   Global Modal Template (non-confirmation modals)
   Goal: use the "nice layout modal" structure everywhere (fixed header/footer)
         AND apply the "nice bkg modal" gradient background everywhere.
   Confirmation modals are excluded via ID scoping (#wtConfirmModal).
   ============================================================ */

/* Apply the background skin to feature modals (exclude confirm modal explicitly) */
#wtConfirmModal .neonModal{ /* keep confirm modals unchanged */ }

.neonModal.wtGuidesModal,
.neonModal.wtRadioModal,
.neonModal.wtStockModal,
.neonModal.wtVisitorModal,
.neonModal.wtLedModal,
.neonModal.wtNotifDevicesModal{
  background: var(--wtModalBkg);
}

/* Core layout shell: fixed header + scrollable body + footer actions */
.neonModal.wtGuidesModal,
.neonModal.wtRadioModal,
.neonModal.wtStockModal,
.neonModal.wtVisitorModal,
.neonModal.wtLedModal,
.neonModal.wtNotifDevicesModal{
  max-width: 820px;
  text-align: left;
  padding: 18px 18px 0 18px;
  max-height: 82vh;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  --wtArcadeHeaderH: 54px;
  --wtArcadeActionsH: 64px;
}
@media (max-width: 700px){
  .neonModal.wtGuidesModal,
  .neonModal.wtRadioModal,
  .neonModal.wtStockModal,
  .neonModal.wtVisitorModal,
  .neonModal.wtLedModal,
  .neonModal.wtNotifDevicesModal{
    max-height: 72vh;
    padding: 14px 14px 0 14px;
    min-height: 240px;
    --wtArcadeHeaderH: 50px;
  }
}

/* Fixed header bar (template) */
.wtGuidesModalHeader,
.wtRadioModalHeader,
.wtStockModalHeader,
.wtVisitorModalHeader{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--wtArcadeHeaderH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1500;
  background: rgba(10,10,16,.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Visitor header stays non-interactive (original behaviour) */
.wtVisitorModalHeader{ pointer-events: none; }
.wtVisitorModalHeader *{ pointer-events: none; }

.wtGuidesModalHeaderInner,
.wtRadioModalHeaderInner,
.wtStockModalHeaderInner,
.wtVisitorModalHeaderInner{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .5px;
  line-height: 1;
}
.wtGuidesModalHeaderInner i,
.wtRadioModalHeaderInner i,
.wtStockModalHeaderInner i,
.wtVisitorModalHeaderInner i{
  display: grid;
  place-items: center;
  line-height: 1;
  opacity: .95;
}

/* Align existing close-X buttons to the template header */
.wtGuidesModalHeader .wtModalCloseX,
.wtRadioModalHeader .wtModalCloseX,
.wtStockModalHeader .wtModalCloseX{
  margin-left: 12px;
}

/* Scrollable body (template) */
.wtGuidesModalBody,
.wtRadioModalBody,
.wtStockModalBody,
.wtVisitorModalBody,
#wtVisitorModalBody{
  padding: calc(var(--wtArcadeHeaderH) + 14px) 12px 12px 12px;
  overflow: auto;
}

/* Footer actions (template) */
.wtGuidesModalActions,
.wtRadioModalActions,
.wtStockModalActions,
.wtVisitorModalActions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

/* Ensure footer buttons feel consistent */
.wtGuidesModalActions .wtModalActionBtn,
.wtRadioModalActions .wtModalActionBtn,
.wtStockModalActions .wtModalActionBtn,
.wtVisitorModalActions .wtModalActionBtn{
  min-height: 40px;
}

/* Click-catcher layer for neon modals (close-on-backdrop) */
.wtModalClickCatcher{
  position: absolute;
  inset: 0;
}




/* Admin: clickable visitor rows */
body.admin .wtOnlineRow--clickable{ cursor:pointer; }
body.admin .wtOnlineRow--clickable:focus{ outline: 2px solid rgba(0,255,255,.35); outline-offset: 2px; }
body.admin .wtOnlineRow--clickable:hover{ filter: brightness(1.05); }

/* Admin: visitor details modal */
body.admin .wtVisitorModal{
  max-width: 820px;
  text-align: left;
  /* Remove bottom padding so the action bar can sit flush to the modal edge */
  padding: 18px 18px 0 18px;
  max-height: 82vh;
  /* Prevent "squashed" layout while async visitor details load */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  --wtVisitorHeaderH: 54px;
}
@media (max-width: 700px){
  body.admin .wtVisitorModal{
    max-height: 72vh;
    /* Remove bottom padding so the action bar can sit flush to the modal edge */
    padding: 14px 14px 0 14px;
    min-height: 360px;
    --wtVisitorHeaderH: 50px;
  }
}

/* Visitor modal: header (acts like the global header) */
body.admin .wtVisitorModalHeader{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wtVisitorHeaderH);
  display:flex;
  align-items:center;
  z-index: 1500;
  pointer-events: none;
  /* Slightly lighter than the action bar to feel integrated */
  background: rgba(10,10,16,.48);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body.admin .wtVisitorModalHeaderInner{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 0 18px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: none;
}
@media (max-width: 700px){
  body.admin .wtVisitorModalHeaderInner{ padding: 0 14px; }
}

/* Font Awesome <i> renders glyph via ::before; normalize its box for consistent centering */
body.admin .wtVisitorModalHeaderInner i,
body.admin .wtVisitorModalHeaderInner svg{
  opacity: .95;
  display: grid;
  place-items: center;
  line-height: 1;
}
body.admin .wtVisitorModalHeaderInner i::before{
  display: block;
  line-height: 1;
}

/* Optical centering: nudge title down slightly (mobile needs a touch more) */
body.admin .wtVisitorModalHeaderInner span{
  font-size: 15px;
  line-height: 1;
  display: block;
  transform: translateY(2px);
  padding-bottom: 2px; /* lifts text slightly without affecting icon */
}
@media (max-width: 700px){
  body.admin .wtVisitorModalHeaderInner span{
    transform: translateY(3px);
    padding-bottom: 2px;
  }
}

body.admin .wtVisitorModalBody{
  flex: 1;
  overflow: auto;
  /* Let content scroll behind the header */
  /* Extra breathing room above first section (e.g. Identity) */
  padding-top: calc(var(--wtVisitorHeaderH) + 50px);
  margin-top: calc(-1 * var(--wtVisitorHeaderH));
  padding-right: 6px;
  /* Natural space above the action bar when scrolled to the bottom */
  padding-bottom: 20px;
  min-height: 240px;

  /* Hide scrollbar but keep scroll behaviour */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
body.admin .wtVisitorModalBody::-webkit-scrollbar{ width:0; height:0; }

/* Prevent the bottom of the scrollable content from looking "cut off" with extra margin */
body.admin .wtVisitorModalBody > :last-child{ margin-bottom: 0 !important; }
body.admin .wtVisitorModalBody p:last-child{ margin-bottom: 0 !important; }

/* Center the loading placeholder within the modal body */
body.admin .wtVisitorModalBody.isLoading{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}

/* Section title spacing (skip the very first title, e.g. "Identity") */
body.admin .wtVisitorModalBody .wtVisitorSectionTitle{
  margin-top:  25px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.admin .wtVisitorModalBody .wtVisitorSectionTitle:first-child{ margin-top: 0; }
body.admin .wtVisitorModalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
body.admin .wtVisitorModalTitle{
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}
body.admin .wtVisitorModalSub{
  margin-top: 4px;
}
body.admin .wtVisitorKV{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap: 8px 12px;
  margin-top: 14px;
}
@media (max-width: 700px){
  body.admin .wtVisitorKV{ grid-template-columns: 1fr; }
}
body.admin .wtVisitorKV .k{ color: rgba(255,255,255,.72); font-size: 12px; }
body.admin .wtVisitorKV .v{ font-size: 13px; word-break: break-word; }
body.admin .wtVisitorModalActions{
  position: sticky;
  bottom: 0;
  /* Higher stacking context to ensure buttons remain clickable on mobile */
  z-index: 2000;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* No "floating" gap above the divider */
  margin-top: 0;
  padding-top: 12px;
  /* Keep the space under the buttons, but move it into the action bar itself */
  padding-bottom: 18px;
  /* Divider should span the full modal width */
  border-top: 1px solid rgba(255,255,255,.12);
  margin-left: -18px;
  margin-right: -18px;
  padding-left: 18px;
  padding-right: 18px;
  background: rgba(10,10,16,.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  /*
    NOTE: the site uses border-box sizing.
    With negative side margins + inner padding to make the divider span the
    full modal width, we must expand the element width so it truly reaches
    the modal edges on both sides.
  */
  box-sizing: border-box;
  width: calc(100% + 36px);
  max-width: none;
}
@media (max-width: 700px){
  body.admin .wtVisitorModalActions{
    /* Match the smaller modal padding on mobile */
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
    box-sizing: border-box;
    width: calc(100% + 28px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    align-items: stretch;
  }
  body.admin .wtVisitorModalActions .wtModalActionBtnFullRow{ grid-column: 1 / -1; }
}
body.admin .wtVisitorModalActions .wtModalActionBtn{
  width: auto;
  flex: 0 0 205px;
  padding: 12px 12px;
  font-size: 14px;
  touch-action: manipulation;
}

@media (max-width: 700px){
  body.admin .wtVisitorModalActions .wtModalActionBtn{
    width: 100%;
    flex: none;
  }
}

body.admin .wtVisitorModalActions .wtModalActionBtn i,
body.admin .wtVisitorModalActions .wtModalActionBtn svg{
  margin-right: 4px;
}

/* Visitor modal: loading placeholder */
body.admin .wtVisitorModalLoading{
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  transform: translateY(-6px);
}
body.admin .wtVisitorModalLoadingTop{
  display:flex;
  align-items:center;
  gap: 12px;
  justify-content:center;
}
body.admin .wtVisitorModalLoadingText .t{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.2;
  text-align:center;
}
body.admin .wtVisitorModalLoadingText .m{
  margin-top: 2px;
}
body.admin .wtVisitorModalSkeleton{
  margin: 14px auto 0 auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
body.admin .wtVisitorModalSkeleton .line{
  height: 12px;
  border-radius: 999px;
  opacity: .9;
  background: linear-gradient(90deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.14) 30%,
    rgba(255,255,255,.07) 60%
  );
  background-size: 200% 100%;
  animation: wtShimmer 1100ms ease-in-out infinite;
}
body.admin .wtVisitorModalSkeleton .w70{ width: 70%; }
body.admin .wtVisitorModalSkeleton .w80{ width: 80%; }
body.admin .wtVisitorModalSkeleton .w86{ width: 86%; }
body.admin .wtVisitorModalSkeleton .w92{ width: 92%; }
@keyframes wtShimmer{
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Small spinner */
.wtSpinner{
  display:inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.9);
  border-radius: 50%;
  animation: wtSpin 700ms linear infinite;
  vertical-align: -2px;
}
/* Larger spinner variant (used in admin modals) */
.wtSpinnerLg{
  width: 18px;
  height: 18px;
  border-width: 2px;
  vertical-align: -3px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
@keyframes wtSpin{ to { transform: rotate(360deg); } }

/* Utility: hide elements (used for modal action state toggles) */
.isHidden{ display:none !important; }
/* Share modal grid (no overflow) */
.shareGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 6px 0;
  width: 100%;
}
@media (max-width: 700px){
  .shareGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px){
  /* if there's room, allow 3 across without overflow */
  .shareGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shareBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  text-decoration:none;
  min-width: 0;
  box-sizing: border-box;
}
.shareBtn span{
  font-weight:900;
  letter-spacing:.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Product title: Orbitron (arcade but readable) */
.productTitle{
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 1.55rem; /* ~15% up */
  line-height: 1.6;
}
@media (min-width: 900px){
  .productTitle{
    font-size: 1.78rem; /* ~15% up */
    line-height: 1.55;
  }
}



/* === v3.5.11.5 Typography refinements === */
/* Product title on product.php */
.pixel.productTitle, .productTitle{
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.45px;
  font-size: 1.59rem; /* ~7% down */
  line-height: 1.65;
}
@media (min-width: 900px){
  .pixel.productTitle, .productTitle{
    letter-spacing: 0.6px;
    font-size: 1.70rem; /* ~7% down */
    line-height: 1.6;
  }
}

/* Product tile titles on products.php */
.grid3 a.card.product h3{
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 1.02rem; /* ~7% down from default */
}

/* Product tiles: responsive truncation + tooltip */
.grid3 a.card.product h3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4; /* desktop default */
  line-clamp: 2;
  cursor: help;
}

@media (max-width: 640px){
  .grid3 a.card.product h3{
    -webkit-line-clamp: 1; /* 1 line on mobile */
    line-clamp: 1;
  }
}

/* Fixed background layer to prevent seams/lines on long pages */
/* Featured product title (index) matches product/product list titles */
.featuredCard h2,
.featuredCard h2 a{
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Featured badge icon vertical alignment fix */
.featuredBadge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.featuredBadge i{
  position: relative;
  top: -1px; /* nudge star up slightly */
}

/* Featured rotation fade */
.featuredCard.wtFade{
  opacity: 0.6;
  transform: translateY(1px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Favourite pulse */
.wtPulse{ animation: wtPulse 420ms ease-in-out; }
@keyframes wtPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

/* Toast notifications */
.wtToastContainer{
  position: fixed;
  z-index: 99999;
  left: 12px;
  right: 12px;
  top: 12px;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

/* Mobile: pin to the bottom without changing desktop layout */
@media(max-width: 859px){
  .wtToastContainer{
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    flex-direction: column-reverse; /* newest sits closest to the bottom */
  }
  .wtToast{
    transform: translateY(10px) scale(.98);
  }
  .wtToast.show{ transform: translateY(0) scale(1); }
}
@media(min-width: 860px){
  .wtToastContainer{ left: auto; right: 18px; width: 360px; }
}
.wtToast{
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-10px) scale(.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.wtToast.show{ transform: translateY(0) scale(1); opacity: 1; }
.wtToast .icon{
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.wtToast.ok{ border-color: rgba(46, 204, 113, .35); }
.wtToast.ok .icon{ border-color: rgba(46, 204, 113, .45); }
.wtToast.bad{ border-color: rgba(231, 76, 60, .35); }
.wtToast.bad .icon{ border-color: rgba(231, 76, 60, .45); }
.wtToast .msg{ color: #fff; font-weight: 800; }
.wtToast .small{ color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600; margin-top: 1px; }
.wtToast .close{
  margin-left: auto;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.8);
  font-size: 16px;
  cursor: pointer;
}

.isDisabled{ opacity:.55; pointer-events:none; }




.galleryThumb.isActive{outline:2px solid rgba(124,247,212,.55);box-shadow:0 0 0 3px rgba(124,247,212,.12)}


/* Product tiles: taller thumbs (mobile only) */
.productsGrid .thumb-small{height:140px}
@media(max-width:620px){.productsGrid .thumb-small{height:170px}}



/* Stylish empty state (favourites) */
.neonEmpty{
  border:1px solid var(--wt-border);
  background: linear-gradient(135deg, rgba(255,0,153,.10), rgba(0,255,255,.08));
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.neonEmptyInner{display:flex;gap:14px;align-items:center}
.neonEmptyIcon{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(124,247,212,.10), 0 0 24px rgba(124,247,212,.12);
}
.neonEmptyTitle{font-weight:900;font-size:18px;color:#fff}
.neonEmptySub{color:rgba(255,255,255,.78);margin-top:2px}
@media(max-width:620px){
  .neonEmptyInner{align-items:flex-start}
  .neonEmptyIcon{width:50px;height:50px}
}


/* Favourites count pill (keep icon + number + label tidy) */
.favCountPill{display:inline-flex;align-items:center;gap:4px}
.favCountPill .favCountText{display:inline-flex;align-items:baseline;gap:2px}
.favCountPill .favCountWord{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.92em}

@keyframes wtPopIn{
  from{transform:translateY(6px) scale(.98);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.neonEmpty.popIn{animation:wtPopIn .18s ease-out both}





/* Favourites count pill spacing (robust) */
#favCountPill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:auto !important;
}

#favCountPill i{ margin:0 !important; }
#favCountPill .favCountText{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:4px !important;
}

#favCountPill .favCountWord{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.92em}

@keyframes wtPillPulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
#favCountPill.wtPulse{animation:wtPillPulse .22s ease-out}


/* Fixed footer overlay (like header) + safe bottom spacing */
:root{--footerH:72px}
/* Footer overlay */
#siteFooter.siteFooter{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  width:100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,0,0,.52);
  border-top:1px solid var(--wt-border);
  box-shadow: 0 -10px 30px rgba(0,0,0,.55);
}

/* Neon top border glow */
#siteFooter.siteFooter::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, rgba(255,0,153,.0), rgba(255,0,153,.75), rgba(0,255,255,.75), rgba(255,0,153,.0));
  filter: blur(.2px);
  pointer-events:none;
}

/* Keep footer inner layout intact */
#siteFooter .footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:14px 0 10px 0;
}

#siteFooter .footer-brand{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#siteFooter .footer-right{text-align:right;white-space:nowrap}
@media(max-width:620px){
  #siteFooter .footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:14px 0 10px 0;
}

  #siteFooter .footer-right{text-align:left}
}

/* Footer title + tagline spacing */
#siteFooter .footer-brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}



/* Footer spacing tune (override): reduce bottom padding reserved for fixed footer */
/* --- Bugfix: mobile sidemenu overlay + image flicker guard --- */
/* NOTE: do NOT set transform here (menu open/close uses transform). */
#sidemenu{
  position:fixed;
  z-index:2000;
  isolation:isolate;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#sidemenuBackdrop{
  position:fixed;
  z-index:1990;
}
/* Ensure page content can't outrank overlays */
main, .page, .pageContent, .contentWrap{
  position:relative;
  z-index:1;
}
/* Mobile GPU flicker guard for product images */
#mainProductImage, .galleryThumb img{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* Bugfix: sidemenu compositing without overriding its translateX transform */
#sidemenu > *{
  transform: translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Admin: hide drawer button on desktop (safety) */
@media(min-width:900px){body.admin #openMenuBtn{display:none !important}}

/* Lightbox footer-safe layout */
.lightbox{z-index:20000}
.lightboxClose{z-index:20001}



/* --- Lightbox reliability + footer clearance (v3.5.16.28) --- */
.lightbox{z-index:20000; isolation:isolate}
.lightboxBackdrop{cursor:zoom-out}
/* Let backdrop receive taps outside image (dialog covers full screen) */
.lightboxDialog{pointer-events:none; position:absolute; inset:0}
.lightboxDialog img,
.lightboxClose,
.lightboxNav,
.lightboxMeta{pointer-events:auto}

.lightboxClose{z-index:3}
.lightboxNav{position:absolute; top:50%; transform:translateY(-50%); z-index:3}
.lightboxNav.prev{left:18px}
.lightboxNav.next{right:18px}
#lightboxImg{position:relative; z-index:2; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden}
.lightboxMeta{position:absolute; left:18px; right:18px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  bottom: calc(18px + (var(--footerH) * 0.6) + 12px);
  z-index:3;
}
/* Reduce iOS flicker from backdrop-filter */
@media(max-width:900px){
  .lightboxBackdrop{backdrop-filter:none; -webkit-backdrop-filter:none}
}



/* --- Lightbox centering + visible close button (v3.5.16.29) --- */
.lightboxDialog{
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightboxClose{
  position:absolute;
  top:18px;
  right:18px;
  z-index:4;
}
#lightboxImg{
  display:block;
  margin:0 auto;
  max-width: min(92vw, 1100px);
  max-height: calc(100vh - (var(--footerH) * 0.6) - 110px);
  height:auto;
}
@media(max-width:900px){
  #lightboxImg{
    max-width: 100vw;
    width: 100vw;
    max-height: calc(100vh - (var(--footerH) * 0.6) - 120px);
  }
}

/* Cart UI */
.pillTiny{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);
  font-size:12px;
  line-height:1;
}
.cartRow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}
.qtyBox{display:inline-flex; align-items:center; gap:8px}
.qtyNum{min-width:18px; text-align:center; font-weight:700}
.priceBox{font-weight:800}



/* --- Cart page layout (v3.5.17.15) --- */
.cartLayout{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items:start;
}
.cartSide{position:sticky; top: calc(var(--headerH) + 12px);}
.cartSummary .pillHot{
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(90deg, rgba(255,0,204,.25), rgba(0,255,255,.18));
}
.cartSummaryBody{margin-top:12px}
.summaryLine{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 2px;
}
.summaryLine.big{padding-top:12px}
.summaryValue{font-weight:900; letter-spacing:.5px}
.summaryDivider{
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  margin:6px 0;
}
.summaryHint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  display:flex; gap:10px; align-items:flex-start;
}
.summaryHint i{margin-top:2px; opacity:.9}
.summaryActions{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.cartTips .btnArcade{margin-top:8px}
/* Cart item tiles */
.cartItem .tileHead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cartItem .cartRemoveBtn{border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35)}
.cartItem .cartRow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.cartItem .qtyBox{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
}
.cartItem .qtyNum{min-width:22px; text-align:center; font-weight:900; letter-spacing:.5px}
.cartItem .priceBox{font-weight:900; font-size:18px; letter-spacing:.4px}
/* Responsive */
@media(max-width: 900px){
  .cartLayout{grid-template-columns: 1fr}
  .cartSide{position:static}
}



/* --- Cart page layout (v3.5.17.16) --- */
.cartSummaryTop{margin-top: 10px}
.cartSummaryTopGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:stretch;
}
.cartSummaryTopStats{padding-right: 4px}
.cartSummaryTopActions{display:flex; flex-direction:column; gap:10px}
.hintTitle{font-weight:900; letter-spacing:.4px}
.cartList{display:grid; gap: 14px; margin-top: 14px}
.cartItem{padding-bottom: 14px}
.cartItem .cartRow{display:flex; justify-content:flex-end; margin-top: 10px}
@media(max-width: 900px){
  .cartSummaryTopGrid{grid-template-columns: 1fr}
}



/* --- Cart condensed list (v3.5.17.27) --- */
.cartListTile{margin-top:14px}
.cartListRows{margin-top:10px; border-radius:16px; overflow:hidden; border:1px solid var(--wt-border-softer)}
.cartRowItem{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 12px;
  background: var(--wt-surface);
  border-bottom: 1px solid var(--wt-border-soft);
}
.cartRowItem:last-child{border-bottom:0}
.cartRowLink{color:inherit; text-decoration:none; display:block}
.cartRowItem:hover{background: rgba(0,0,0,.38)}
.cartRowTop{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.cartRowName{
  font-family: var(--fontOrbitron, 'Orbitron', system-ui, sans-serif);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
  line-height: 1.25;
}
.cartRowSku{
  opacity:.8;
  font-size:12px;
  letter-spacing:.4px;
}
.cartRowDesc{
  margin-top:6px;
  opacity:.85;
  font-size: 13px;
  line-height: 1.35;
}
.cartRowSide{
  display:flex;
  align-items:center;
  gap: 10px;
}
.cartRowPrice{
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 15px;
  white-space: nowrap;
}
.clamp2{
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
@media(max-width: 480px){
  .cartRowItem{grid-template-columns: 1fr}
  .cartRowSide{justify-content:space-between}
}



/* --- Cart list tweaks (v3.5.17.28) --- */
.cartRowItem{cursor:default}
.cartRowNameLink{
  font-family: var(--fontOrbitron, 'Orbitron', system-ui, sans-serif);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
}
.cartRowNameLink:hover{ text-decoration: underline; text-underline-offset: 3px; }
.cartRowPrice{font-size: 14px}
.btnArcade.btnSmall{
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 12px;
  letter-spacing: .6px;
}
@media(max-width: 480px){
  .cartRowSide{justify-content:space-between}
}



/* --- Cart arcade micro-animations (v3.5.17.29) --- */
@keyframes wtPop {
  0%{ transform: scale(1); }
  45%{ transform: scale(0.98); }
  100%{ transform: scale(1); }
}
@keyframes wtBuzz {
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-1px); }
  50%{ transform: translateX(1px); }
  75%{ transform: translateX(-1px); }
  100%{ transform: translateX(0); }
}
.wtPop{ animation: wtPop 220ms ease-out; }
.wtBuzz{ animation: wtBuzz 180ms linear; }

@media(max-width: 480px){
  .cartRowNameLink{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



/* --- Cart mobile overflow fix (v3.5.17.30) --- */
.cartListTile, .cartListRows, .cartRowItem { max-width: 100%; box-sizing: border-box; }
.cartRowMain{ min-width: 0; }
.cartRowTop{ min-width: 0; }
.cartRowNameLink{ min-width: 0; display: inline-block; max-width: 100%; }
.cartRowDesc{ min-width: 0; }
@media(max-width: 480px){
  .cartRowItem{ overflow: hidden; }
}


/* --- Add to cart disabled (v3.5.17.33) --- */
.btnDisabled{
  opacity: .65;
  filter: grayscale(20%);
  cursor: not-allowed !important;
}
.btnDisabled:hover{ transform: none !important; }


/* --- Favourite pill active state --- */
.pillFav.isFav{
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 22px rgba(255,0,170,.25);
}



/* --- Favourite pill glow + pulse (v3.5.17.44) --- */
.pillArcade.pillFav.isFav,
#favBtn.pillArcade.pillFav.isFav,
.pillArcade.pillFav.pillFavOn{
 
}
.pillPulse{
  animation: wtPillPulse .42s ease-out;
}
@keyframes wtPillPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}



/* --- Favourite glow by data attribute (v3.5.17.49) --- */
.pillArcade.pillFav[data-fav="1"],
#favBtn.pillArcade.pillFav[data-fav="1"]{
 
}


/* --- Cart buttons (chunky arcade) v3.5.17.51 --- */
.btnArcade{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.8rem 1rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none;
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btnArcade:active{ transform: translateY(1px) scale(.99); }
.btnArcadePrimary{
  background: linear-gradient(90deg, rgba(0,255,255,.14), rgba(255,0,170,.14));
  box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 0 28px rgba(0,255,255,.18), 0 0 28px rgba(255,0,170,.14);
}
.btnArcadeDanger{
  background: linear-gradient(90deg, rgba(255,80,80,.14), rgba(255,0,170,.10));
  box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 0 26px rgba(255,80,80,.18);
}
.btnArcade:hover{
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 0 34px rgba(0,255,255,.22), 0 0 34px rgba(255,0,170,.18);
}
.btnArcadeDanger:hover{
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 0 32px rgba(255,80,80,.22);
}

/* --- Cart empty tile --- */
.cartEmptyTile{
  margin-top: 14px;
}
.cartEmptyTile .titleOrbitron{
  margin: .7rem 0 .4rem;
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}
.cartEmptyTile .muted{
  opacity: .82;
  line-height: 1.5;
  max-width: 48ch;
}


/* --- Cart pill buttons + layout (v3.5.17.53) --- */
.cartActionBtns{
  display:flex;
  flex-direction:row; /* side-by-side on all layouts */
  gap:12px;
  width:100%;
}
.cartActionBtns .pillBtn{
  flex:1 1 0;
  justify-content:center;
}
@media (min-width: 900px){
  .cartActionBtns{ gap:14px; }
}

/* Pill button sizing: make them the primary focus */
.pillBtn{
  border:none;
  cursor:pointer;
  padding:1.05rem 1.1rem; /* taller */
  min-height:56px;
  border-radius:18px;
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}
@media (min-width: 900px){
  .pillBtn{
    min-height:62px;
    font-size:1.02rem; /* slightly larger on desktop */
  }
}
.pillBtn:active{ transform: translateY(1px) scale(.99); }
.pillBtnPrimary{
  background: linear-gradient(90deg, rgba(0,255,255,.16), rgba(255,0,170,.14));
  box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 0 26px rgba(0,255,255,.18), 0 0 26px rgba(255,0,170,.14);
}
.pillBtnDanger{
  background: linear-gradient(90deg, rgba(255,80,80,.16), rgba(255,0,170,.10));
  box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 0 22px rgba(255,80,80,.18);
}
.pillBtnPrimary:hover{ filter: brightness(1.06); }
.pillBtnDanger:hover{ filter: brightness(1.06); }

/* Account dashboard: Manage Device Tokens button (match Checkout vibe, smaller, no glow, no hover motion) */
.wtNotifManageBtn{
  /* ~25% smaller than default pillBtn */
  padding: .8rem .85rem;
  min-height: 46px;
  font-size: .86rem;

  /* Half the border thickness vs default primary (2px -> 1px) */
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.wtNotifManageBtn:hover{
  /* remove hover animation/brightness */
  filter: none;
}
.wtNotifManageBtn:active{
  /* remove press animation */
  transform: none;
}

/* Ensure cart empty state matches list tile */
.cartListTile.emptyState .titleOrbitron{
  margin-top:.7rem;
}


50%{ transform: translateY(160px); }
  100%{ transform: translateY(-10px); }
}



/* --- Cart empty-state centering fix (v3.5.17.58) --- */
.cartListTile.emptyState{
  text-align: center;
}
.cartListTile.emptyState .cartEmptyTitle{
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* --- Cart empty fallback tile (v3.5.17.59) --- */




/* --- Performance hotfix (v3.6.5) ---
   Android/Chrome can stutter/flicker when many images are promoted to GPU layers.
   Prefer lazy-loading + content-visibility so offscreen tiles don't paint.
*/
.productGrid .productTile,
.cartList .cartItemRow{
  content-visibility: auto;
  contain-intrinsic-size: 320px 420px;
}
/* Ensure images don't trigger layout shifts */
.productTileMedia img,
.productPrimary img,
.galleryThumb img{
  display:block;
  width:100%;
  height:auto;
}


/* --- WT fixed background layer (v3.6.6) ---
   Mobile Chrome/Safari often stutter/flicker with background-attachment: fixed.
   Instead, render the background on a fixed pseudo-element behind everything.
*/
html, body{
  background: #000; /* prevent white flash */
}




/* === WT Fixed Background (v3.6.8) ===
   Some browsers can hide body::before when using negative z-index.
   Use html::before as the fixed backdrop layer instead.
*/
html, body {
  height: 100%;
  background: #000;
}
html{
  position: relative;
}
body{
  background: transparent !important;
  position: relative;
  z-index: 0;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(138,124,255,.25), transparent 55%),
    radial-gradient(900px 600px at 80% 30%, rgba(124,247,212,.18), transparent 60%),
    radial-gradient(600px 420px at 60% 90%, rgba(255,61,242,.12), transparent 60%),
    linear-gradient(180deg, rgba(6,8,15,1), rgba(6,8,15,1));

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  transform: translateZ(0);
  will-change: transform;
}






/* Footer clearance spacer (v3.6.16.1) */
.footerClearance{
  height: calc(var(--footerH, 72px) + 10px + env(safe-area-inset-bottom, 0px));
}


/* WT admin background sync v3.6.17
   Ensure admin uses the same fixed gradient backdrop layer as the public site,
   without background-attachment: fixed on the scroll container (mobile flicker).
*/
body.admin{
  background: transparent !important;
}
@media(min-width:900px){
  body.admin #menuBtn{ display:none !important; }
}

body.admin .sideMenu{display:none !important;}


/* WT admin scanlines v3.6.17.1
   Apply the same scanline overlay to admin pages as the public site
*/
body.admin .tile,
body.admin .card,
body.admin .panel,
body.admin .box,
body.admin .tableWrap,
body.admin .adminCard,
body.admin .adminPanel{
  background: rgba(10, 12, 18, 0.88) !important;
  border-color: rgba(138,124,255,.28) !important;
  backdrop-filter: blur(3px) !important;
}

/* Buttons / pills */
body.admin .btn,
body.admin button,
body.admin a.btn,
body.admin .pillArcade,
body.admin .pill,
body.admin .iconbtn{
  background: rgba(18, 22, 34, 0.92) !important;
  color: rgba(255,255,255,0.96) !important;
  border-color: rgba(124,247,212,.38) !important;
}
body.admin .btn:hover,
body.admin button:hover,
body.admin a.btn:hover,
body.admin .pillArcade:hover,
body.admin .iconbtn:hover{
  background: rgba(24, 30, 46, 0.96) !important;
}

/* Inputs */
body.admin input,
body.admin select,
body.admin textarea{
  background: rgba(8, 10, 16, 0.96) !important;
  color: rgba(255,255,255,0.96) !important;
  border-color: rgba(138,124,255,.40) !important;
}
body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus{
  outline: none !important;
  border-color: rgba(124,247,212,.55) !important;
  box-shadow: 0 0 0 2px rgba(124,247,212,.16) !important;
}




/* WT admin tiles match cartListTile (cartListRows) v3.6.17.6
   Make admin panels/cards/tiles use the same opacity + border treatment as cart.php list tile.
   Scoped to body.admin so public site stays unchanged.
*/
body.admin .tile,
body.admin .card,
body.admin .panel,
body.admin .box,
body.admin .tableWrap,
body.admin .adminCard,
body.admin .adminPanel{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.22) !important; /* matches cart feel */
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(3px) !important;
}

/* Buttons / pills: keep solid but slightly less loud */
body.admin .btn,
body.admin button,
body.admin a.btn,
body.admin .btnArcade,
body.admin .pillArcade,
body.admin .pill,
body.admin .iconbtn{
  background: rgba(0,0,0,.30) !important;
  color: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
body.admin .btn:hover,
body.admin button:hover,
body.admin a.btn:hover,
body.admin .btnArcade:hover,
body.admin .pillArcade:hover,
body.admin .iconbtn:hover{
  background: rgba(0,0,0,.40) !important;
}

/* Inputs: readable but still in-family */
body.admin input,
body.admin select,
body.admin textarea{
  background: rgba(0,0,0,.32) !important;
  color: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
}
body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus{
  outline: none !important;
  border-color: rgba(124,247,212,.55) !important;
  box-shadow: 0 0 0 2px rgba(124,247,212,.14) !important;
}



/* Products list: inline add-to-cart pill button */
.pillBtnCart{
  cursor:pointer;
  white-space:nowrap;
  padding:10px 12px;
  line-height:1;
}
.pillBtnCart i{ margin-right:8px; }
.pillBtnCart.btnDisabled{
  opacity:.6;
  cursor:not-allowed;
}
.prodTileTitle{ margin:0; }
.prodTitleLink{ color:inherit; text-decoration:none; }
.prodTitleLink:hover{ text-decoration:underline; }


@media (max-width: 900px){
  .grid3{grid-template-columns:minmax(0,1fr);}
}


/* Products list: clamp titles to one line */
.prodTileTitle{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prodTileTitle a{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Ensure product tiles do NOT expand due to long titles */
.card.product,
.card.product *{
  max-width:100%;
}

.prodTileTitle{
  max-width:100%;
  min-width:0;
}

.prodTileTitle a{
  max-width:100%;
  min-width:0;
}


/* Prevent grid columns from expanding to min-content (needed for ellipsis) */
.grid3 > *{ min-width:0; }
.grid3 > .card.product{ min-width:0; }
.card.product{ min-width:0; }


/* v3.6.17.15 product tile overflow fixes (products.php) */
.card.product{ overflow:hidden; }
.card.product > *{ min-width:0; }
.card.product img{ max-width:100%; height:auto; display:block; }

/* Ensure title ellipsis actually applies within grid constraints */
.prodTileTitle{ display:block; min-width:0; }
.prodTileTitle a{ display:block; width:100%; min-width:0; }

/* Clamp description to 2 lines */
.prodTileDesc{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
  max-width:100%;
  word-break: break-word;
}

/* Prevent actions row from forcing horizontal overflow */
.prodTileActions{ flex-wrap:wrap; }
.prodTileActions .price{ flex:1 1 auto; min-width:0; }
.prodTileActions .pillBtnCart{ flex:0 0 auto; max-width:100%; }

/* If the button wraps to a new line, keep it aligned right */
.prodTileActions .pillBtnCart{ margin-left:auto; }


/* v3.6.17.16 full-bleed product tile image (products.php) */
.card.product{ padding:0 !important; overflow:hidden; }
.card.product .prodTileBody{ padding:14px; }
.prodTileMedia{
  display:block;
  width:100%;
  margin:0;
}
.prodTileImg{
  display:block;
  width:100%;
  height:180px;
  object-fit:cover;
}
@media (min-width: 901px){
  .prodTileImg{ height:220px; }
}


/* v3.6.17.17: ensure products.php tile layout is image-on-top on ALL breakpoints */
.card.product{
  display:block !important;
}
.card.product .prodTileMedia{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.card.product .prodTileBody{
  padding-top: 10px; /* tighter gap below image */
}

/* Reduce gap between image and title specifically */
.card.product .prodTileBody .metaRow{ margin-bottom:6px; }
.card.product .prodTileTitle{ margin-top:2px !important; }



/* v3.6.17.18: normalize product tile image heights on desktop */
.prodTileMedia{ display:block; width:100%; overflow:hidden; }
.prodTileImg{ display:block; width:100%; height:180px; object-fit:cover; }
@media (min-width: 901px){
  .prodTileImg{ height:220px; }
}




/* v3.6.17.19: override generic card img rule so product tile images stay uniform height */
.card.product .prodTileImg{
  height:240px !important;
  object-fit:cover;
}
@media (min-width: 901px){
  .card.product .prodTileImg{
    height:300px !important;
  }
}



/* v3.6.17.20: description clamp desktop vs mobile */
@media (min-width: 901px){
  .prodTileDesc{
    -webkit-line-clamp: 4;
  }
}

/* Primary product image sizing (match product tiles) */
.productPrimaryImg{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:14px;
}
@media (max-width: 768px){
  .productPrimaryImg{
    height:240px;
  }
}

/* Fix squashed primary image on desktop */
.productHero,
.productHeroMedia,
.productHeroMediaInner{
  min-height: unset;
  height: auto;
}

.productPrimaryImg{
  display:block;
  width:100%;
  height:300px;
  max-height:none;
  object-fit:cover;
}

@media (max-width:768px){
  .productPrimaryImg{
    height:240px;
  }
}


/* v3.6.17.23: primary product image height matches products tiles */
@media (max-width: 768px){
  .thumb-large{ height:240px; }
}


/* v3.6.17.25: responsive visibility helpers */
@media (max-width: 900px){
  .desktopOnly{ display:none !important; }
}
@media (min-width: 901px){
  .mobileOnly{ display:none !important; }
}


/* v3.6.17.26: cart counter badge styling (matches arcade pills) */
.pillCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  margin-left:8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.55)),
    radial-gradient(120% 120% at 20% 10%, rgba(255,0,200,.30), transparent 60%),
    radial-gradient(120% 120% at 80% 10%, rgba(0,255,210,.22), transparent 60%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 16px rgba(255,61,242,.18);
}

.pillCount.pillCount--on{
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 18px rgba(0,255,210,.22), 0 0 22px rgba(255,61,242,.22);
}


/* v3.6.17.27: favourites tiles layout fix */
.favItem{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.favMedia{ padding:12px 12px 0 12px; }
.favThumb{
  height:220px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--wt-border-softer);
}
.favThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.favBody{ padding:10px 12px 0 12px; }
.favTitle{ margin:0 0 6px 0; font-family: var(--font-arcade, 'Orbitron', ui-sans-serif, system-ui); font-size:16px; line-height:1.25; }
.favDesc{
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  -webkit-line-clamp:3;
}
@media (min-width: 901px){
  .favThumb{ height:240px; }
  .favDesc{ -webkit-line-clamp:4; }
}
.favActions{
  margin-top:auto;
  padding:10px 12px 12px 12px;
  gap:10px;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.10);
}
.favMoveBtns{ display:inline-flex; gap:8px; }
.favRemove{ padding:8px 12px; }


/* v3.6.17.28: favourites title/desc clamping */
.favTitle{
  margin:0 0 6px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.favDesc{
  margin:0 0 10px 0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  -webkit-line-clamp:3; /* mobile default */
}

@media (min-width: 901px){
  .favDesc{
    -webkit-line-clamp:4;
  }
}


/* v3.6.17.29: favourites truncation fixes */
.favTitle a{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.favDesc{
  max-width:100%;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  color: rgba(255,255,255,.78);
}

/* Mobile: 3 lines */
@media (max-width: 900px){
  .favDesc{ -webkit-line-clamp:3; }
}

/* Desktop: 4 lines */
@media (min-width: 901px){
  .favDesc{ -webkit-line-clamp:4; }
}


/* v3.6.17.30: Products page tile action bar (match favourites look) */
.card.product{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.prodTileBody{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0; /* prevent overflow pushing width */
}

.prodTileActions{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--wt-border);
}

.prodTileActions .price{
  font-weight:800;
  letter-spacing:.02em;
}


/* v3.6.17.31: full-bleed divider + pinned action row under padded body */
.prodTileActionsRow{
  margin-top:auto;
  padding:10px 14px 14px;
  border-top:1px solid var(--wt-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


/* v3.6.17.32: product detail actions bar (match favourites/products action divider) */
.prodDetailActions{
  margin-top:14px;
  padding-top:5px;
  border-top:1px solid var(--wt-border);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.prodDetailActionsLeft{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.prodDetailActionsRight{
  display:flex;
  align-items:center;
}

@media (min-width: 901px){
  .prodDetailActions{
    justify-content:space-between;
  }
  .prodDetailActionsRight{
    margin-left:auto;
  }
}


/* v3.6.17.35: desktop gallery 3-up grid (match mobile) */
@media (min-width: 641px){
  .galleryRow{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
    width:100%;
  }
  .galleryThumb{
    width:100%;
    height:auto;
  }
  .galleryThumb img{
    width:100%;
    height:auto;
    aspect-ratio: 1 / 1;
    object-fit:cover;
  }
}






/* slightly taller than products tiles */
.card.product.favItem img.favImg{
  height:210px;
}

@media (min-width: 901px){
  .card.product.favItem img.favImg{
    height:240px;
  }
}



/* kill any inherited padding/margins anywhere above the image */
.card.product.favItem,
.card.product.favItem > *{
  margin:0 !important;
}

/* the media wrapper must span full width */
.card.product.favItem .favMediaBleed{
  margin:0 !important;
  padding:0 !important;
}

/* force image to ignore any grid or box constraints */
.card.product.favItem .favMediaBleed img.favImg{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 !important;
  padding:0 !important;
  border-radius:0;
}

/* ensure body + actions regain spacing */
.card.product.favItem .favBody,
.card.product.favItem .favActions{
  padding:14px;
}

/* v3.6.17.43: consolidated favourites tile styles (match products.php) */
.card.product.favItem{
  /* cancel generic .card.product grid layout on favourites */
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  align-items:stretch !important;

  padding:0 !important;
  overflow:hidden;
}

/* ensure zero spacing above the media so it can be true full-bleed */
.card.product.favItem,
.card.product.favItem > *{
  margin:0 !important;
}

.card.product.favItem .favMediaBleed,
.card.product.favItem .favImgLink{
  display:block;
  width:100%;
  margin:0 !important;
  padding:0 !important;
}

.card.product.favItem img.favImg{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 !important;
  padding:0 !important;

  object-fit:cover;
  height:210px; /* slightly taller than products tiles */
}

@media (min-width: 901px){
  .card.product.favItem img.favImg{ height:240px; }
}

.card.product.favItem .tileImgDivider{
  height:1px;
  margin:0;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 10px var(--wt-glow);
}

/* restore interior padding for content + actions */
.card.product.favItem .favBody,
.card.product.favItem .favActions{
  padding:14px;
}

.card.product.favItem .favBody{
  padding-top:10px;
}

.card.product.favItem .favActions{
  padding-top:12px;
  border-top:1px solid var(--wt-border);
}

/* Shared UI primitives (v3.6.17.44) – grouped selectors to reduce duplication */
:where(.pillArcade, .btn, .btnSm, .btnTiny){
  border-color: var(--wt-border);
}
:where(.cartRowItem){
  background: var(--wt-surface);
}


/* Checkbox/radio pills: tighter spacing (v3.6.18.0.2) */
.wtPillCheck{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.wtPillCheck input[type="checkbox"],
.wtPillCheck input[type="radio"]{
  margin:0;
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.wtPillCheck span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1.15;
  min-width:0;
}

/* Products: mod tag filter pills (compact, still arcade) (v3.6.18.11) */
.pillGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
  padding-top:6px;
}

/* Products: mod tag grid is deliberately capped (v3.6.18.12)
   - Mobile: 2 columns
   - Desktop: 3 columns (right-aligned beside other filters)
*/
.pillGrid.wtModTagGrid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  /* Keep pills tight vertically and horizontally (global label margins are reset on pills) */
  /* A touch of air so rows don't feel glued together */
  column-gap:6px;
  row-gap:6px;
  padding-top:0;
  align-content:start;
}
@media (min-width: 901px){
  /* Keep 3-up grid on desktop, but ensure each pill has enough width for longer labels */
  .pillGrid.wtModTagGrid{ grid-template-columns:repeat(3, minmax(150px, 1fr)); }
}

@media (min-width: 901px){
  /* Products: make mod-tag pills a touch chunkier on desktop (v3.6.18.14) */
  .wtProductsFiltersMods .pillArcade.wtPillFilter{
    padding:7px 10px;
    font-size:.84rem;
    border-radius:14px;
  }
  .wtProductsFiltersMods .pillArcade.wtPillFilter input[type="checkbox"],
  .wtProductsFiltersMods .pillArcade.wtPillFilter input[type="radio"]{
    width:14px;
    height:14px;
  }
}

.pillArcade.wtPillFilter{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  /* Prevent global label spacing (margin-top/bottom) from creating gaps in the grid */
  margin:0;
  padding:6px 8px;
  border-radius:13px;
  border-width:1px;
  font-size:.82rem;
  letter-spacing:.15px;
  text-transform:none;
  box-shadow:
    0 3px 12px rgba(0,0,0,.26),
    0 0 0 2px rgba(255,255,255,.05) inset;
}

.pillArcade.wtPillFilter{ gap:6px; }

/* Tighten inner content spacing + vertical alignment */
.pillArcade.wtPillFilter span{
  display:inline-flex;
  align-items:center;
  gap:0;
  line-height:1.15;
}

/* Checked state: a little glow without shouting */
.pillArcade.wtPillFilter:has(input:checked){
  border-color: rgba(0,255,255,.35);
  box-shadow:
    0 4px 14px rgba(0,0,0,.32),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 0 18px rgba(0,255,255,.14);
}

.pillArcade.wtPillFilter input:checked + span{
  text-shadow: 0 0 12px rgba(0,255,255,.18);
}

/* Tighter checkbox size inside the compact pills */
.pillArcade.wtPillFilter input[type="checkbox"],
.pillArcade.wtPillFilter input[type="radio"]{
  width:14px;
  height:14px;
}

/* Blank disabled pills used to fill out grid rows (v3.6.18.12) */
.pillArcade.wtPillFilter.wtPillPlaceholder{
  opacity:0.14;
  pointer-events:none;
  cursor:not-allowed;
}
.pillArcade.wtPillFilter.wtPillPlaceholder:before{
  content:"\00a0";
}

/* Desktop-only fillers (hide on mobile so 2-col rows stay clean) */
.wtDesktopOnly{ display:none !important; }
@media (min-width: 901px){
  .wtDesktopOnly{ display:flex !important; }
}

/* Mobile-only fillers (hide on desktop so 3-col rows stay clean) */
.wtMobileOnly{ display:flex !important; }
@media (min-width: 901px){
  .wtMobileOnly{ display:none !important; }
}

/* Products: filter layout (v3.6.18.14)
   Mobile order: Console → Mods → Sort/Actions
   Desktop: Console + Sort/Actions on the left, Mods on the right.
*/
.wtProductsFilters{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.wtProductsFiltersActions{
  margin-top:10px;
}

.wtProductsFiltersMods > label{
  /* Only the section header label, not each pill (pills are also <label> elements) */
  margin-top:10px;
  margin-bottom:4px;
}

@media (min-width: 901px){
  .wtProductsFilters{
    display:grid;
    grid-template-columns: minmax(560px, 1fr) 500px;
    grid-template-areas:
      "console mods"
      "sortactions mods";
    column-gap:14px;
    row-gap:12px;
    align-items:start;
  }
  .wtProductsFiltersConsole{ grid-area:console; }
  .wtProductsFiltersSortActions{ grid-area:sortactions; }
  .wtProductsFiltersMods{
    grid-area:mods;
    justify-self:end;
    align-self:start;
    max-width:500px;
  }
}

@media (min-width: 1200px){
  /* Products: widen mods column slightly on larger desktops (v3.6.18.20) */
  .wtProductsFilters{
    grid-template-columns: minmax(560px, 1fr) 530px;
  }
  .wtProductsFiltersMods{
    max-width:530px;
  }
}



/* Products: mobile accordion filters (v4.0.2)
   - Mobile: each filter section can expand/collapse; default collapsed.
   - Desktop: no layout change (toggles hidden; bodies always shown).
*/
.wtFilterToggle{
  width:100%;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:inherit;
  cursor:pointer;
}
.wtFilterToggle i{ transition: transform 180ms ease; }

@media (max-width: 900px){
  .wtFilterBody{ display:none; }
  .wtFilterSection.is-open .wtFilterBody{ display:block; margin-top:10px; }
  .wtFilterSection.is-open .wtFilterToggle i{ transform: rotate(180deg); }

  /* Hide duplicate labels on mobile (toggle provides the section heading) */
  .wtProductsFiltersConsole label{ display:none; }
  .wtProductsFiltersSortActions label{ display:none; }
  .wtProductsFiltersMods > label{ display:none; }
}

@media (min-width: 901px){
  /* Desktop: keep everything visible; hide mobile toggles */
  .wtFilterBody{ display:block !important; }
  .wtFilterToggle{ display:none !important; }
}

/* Admin Settings: Management links as responsive grid (v3.6.18.6) */
.wtSectionTitle{
  margin:18px 0 10px 0;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.wtSectionTitle:after{
  content:"";
  flex:1;
  height:1px;
  background:currentColor;
  opacity:0.18;
}
.wtMgmtGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}
.wtMgmtGrid .btn{
  width:100%;
  justify-content:center;
}
.wtMgmtGrid .wtMgmtPlaceholder{
  pointer-events:none;
}
.wtMgmtGrid .wtMgmtDesktopOnly{
  display:none;
}
@media (min-width: 901px){
  .wtMgmtGrid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .wtMgmtGrid .wtMgmtDesktopOnly{ display:inline-flex; }
}
/* ==========================================================
   Desktop: widen mod filter pills without breaking layout
   Baseline: v3.6.18.20
   ========================================================== */
@media (min-width: 901px) {

  /* Desktop: 50/50 split */
  .wtProductsFilters{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
    overflow: visible !important;

    padding-left: 20px;
    padding-right: 20px;
  }

  /* Reset any old sizing/positioning that causes “tucked right” */
  .wtProductsFiltersConsole,
  .wtProductsFiltersSortActions,
  .wtProductsFiltersMods{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    margin: 0 !important;
  }

  /* Left column stacked */
  .wtProductsFiltersConsole{ grid-column: 1; grid-row: 1; }
  .wtProductsFiltersSortActions{ grid-column: 1; grid-row: 2; }

  /* Right column spans both rows */
  .wtProductsFiltersMods{ grid-column: 2; grid-row: 1 / span 2; }

  /* Make the grid fill the right column */
  .pillGrid.wtModTagGrid{
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: stretch;
    gap: 8px;
  }

  /* Make each pill fill its grid cell */
  .pillGrid.wtModTagGrid .pillArcade.wtPillFilter{
    width: 100% !important;
    box-sizing: border-box;
  }
}
@media (min-width: 901px) {
  .pillArcade.wtPillFilter {
    font-size: 0.85rem;   /* was effectively ~0.95–1rem */
    line-height: 1.1;     /* keeps vertical centering tidy */
  }
}

/* Products: desktop tweak for 4-column mod pill grid (v4.0.5)
   - Reduce left filter column / selects on desktop so the right panel can show 4 pills across.
   - Mobile unchanged.
*/
@media (min-width: 901px){
  /* Narrow the left column a bit; give the mods column more room */
  .wtProductsFilters{
    grid-template-columns: 460px 1fr !important;
  }

  /* Drop-downs don't need to be full-width on desktop */
  .wtProductsFiltersConsole select,
  .wtProductsFiltersSortActions select{
    max-width: 260px;
  }

  /* Force 4-across pill grid in the right panel */
  .pillGrid.wtModTagGrid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* Products: ensure right mods panel stretches to fill column (v4.0.6)
   Fix: when forcing 4-column pill grid, the mods container could stay capped/max-width and hug the right edge,
   leaving a large empty gap. Desktop only; mobile unchanged.
*/
@media (min-width: 901px){
  .wtProductsFiltersMods{
    max-width: none !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
}


/* Products: give mods panel more horizontal room for 4-wide pills (v4.0.7)
   - Reduce left column width + column gap on desktop so the right panel is genuinely wider.
*/
@media (min-width: 901px){
  .wtProductsFilters{
    grid-template-columns: 400px 1fr !important;
    column-gap: 10px !important;
  }
}


/* Products: more room + less wrap for 4-wide mod pills (v4.0.8)
   - Desktop only.
*/
@media (min-width: 901px){
  /* Give the mods column even more space */
  .wtProductsFilters{
    grid-template-columns: 360px 1fr !important;
    column-gap: 8px !important;
  }

  /* Tighten pill styling so labels fit without wrapping */
  .pillGrid.wtModTagGrid{
    column-gap: 6px;
    row-gap: 6px;
  }
  .pillGrid.wtModTagGrid .pillArcade.wtPillFilter{
    padding: 6px 8px;
    font-size: 0.80rem;
    line-height: 1.05;
  }
}


/* Products: rebalance desktop filter widths to consume remaining space (v4.0.9)
   - Slightly widen left panel and dropdowns while preserving 4-wide mod pills.
*/
@media (min-width: 901px){
  /* Widen left column modestly */
  .wtProductsFilters{
    grid-template-columns: 410px 1fr !important;
  }

  /* Allow dropdowns to breathe a bit more */
  .wtProductsFiltersConsole select,
  .wtProductsFiltersSortActions select{
    max-width: 310px;
  }
}


/* Products: reclaim horizontal space from desktop filter container padding (v4.0.10)
   - Reduce unused right-side padding so the mods pill grid has more room.
   - Desktop only; mobile unchanged.
*/
@media (min-width: 901px){
  .wtProductsFilters{
    padding-right: 0 !important;
    padding-left: 12px !important;
  }
}


/* Products: widen right mods panel slightly for pill breathing room (v4.0.11)
   - Desktop only.
   - Goal: ~+10px effective width per pill by reclaiming column balance.
*/
@media (min-width: 901px){
  /* Nudge more space to the right panel */
  .wtProductsFilters{
    grid-template-columns: 390px 1fr !important;
  }

  /* Slightly relax internal pill padding without changing visual size too much */
  .pillGrid.wtModTagGrid .pillArcade.wtPillFilter{
    padding-left: 9px;
    padding-right: 9px;
  }
}


/* Products: widen desktop dropdowns further to consume remaining space (v4.0.12)
   - Desktop only.
   - +40px width for console + sort dropdowns.
*/
@media (min-width: 901px){
  .wtProductsFiltersConsole select,
  .wtProductsFiltersSortActions select{
    max-width: 350px;
  }
}


/* Products: final desktop dropdown width tweak (v4.0.13)
   - Desktop only.
*/
@media (min-width: 901px){
  .wtProductsFiltersConsole select,
  .wtProductsFiltersSortActions select{
    max-width: 380px;
  }
}


/* Products: mobile accordion smooth animation + single-open behavior (v4.0.16)
   - Mobile only
*/
@media (max-width: 900px){
  .wtFilterBody{
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 260ms ease, opacity 180ms ease;
    opacity: 0;
  }

  .wtFilterSection.is-open .wtFilterBody{
    max-height: 600px; /* large enough for content */
    opacity: 1;
    margin-top: 10px;
  }

  .wtFilterToggle i{
    transition: transform 200ms ease;
  }

  .wtFilterSection.is-open .wtFilterToggle i{
    transform: rotate(180deg);
  }
}


/* Products: fix mobile accordion animation (v4.0.17)
   - Do not toggle display; animate max-height instead
*/
@media (max-width: 900px){
  .wtFilterBody{
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 260ms ease, opacity 180ms ease;
  }

  .wtFilterSection.is-open .wtFilterBody{
    opacity: 1;
  }
}

/* Products: AJAX loading state (v4.1.0) */
#wtProductsResults.is-loading{
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 120ms ease;
}


/* v4.3.1: tighten spacing between dropdowns in products filter tile (desktop only) */
@media (min-width: 901px){
  .wtProductsFiltersConsole,
  .wtProductsFiltersSortActions{
    margin-bottom: 8px !important;
  }
  .wtProductsFiltersConsole .wtFilterBody > div,
  .wtProductsFiltersSortActions .wtFilterBody > div{
    margin-bottom: 0 !important;
  }
}


/* v4.3.3: desktop product grid placeholders to fill last row */
.wtProductPlaceholder{
  pointer-events:none;
  opacity:.45;
}
.wtProductPlaceholder .prodTileMedia,
.wtProductPlaceholder .prodTileBody,
.wtProductPlaceholder .prodTileActionsRow{
  visibility:hidden;
}
/* Keep card dimensions but show a subtle empty tile */
.wtProductPlaceholder.card.product{
  min-height: 240px;
}

/* v4.3.4: fade-in animation for newly appended product cards */
@keyframes wtFadeInUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.wtFadeInCard{
  animation: wtFadeInUp .28s ease-out both;
}


/* v4.3.10: further tighten desktop spacing between Console select and Sort section in products filter tile */
@media (min-width: 901px){
  /* Reduce overall vertical rhythm inside filter tile */
  .wtProductsFilters{
    row-gap: 8px !important;
    gap: 8px !important;
  }

  /* Ensure filter sections don't add extra bottom margin */
  .wtProductsFiltersConsole,
  .wtProductsFiltersSortActions{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Tighten label-to-select spacing */
  .wtProductsFiltersConsole label,
  .wtProductsFiltersSortActions label{
    margin-bottom: 4px !important;
  }

  /* Tighten any default spacing between blocks within bodies */
  .wtProductsFiltersConsole .wtFilterBody,
  .wtProductsFiltersSortActions .wtFilterBody{
    padding-top: 0 !important;
  }

  /* If the layout uses grid/stack, make sure adjacent blocks don't push apart */
  .wtProductsFiltersConsole .wtFilterBody > div,
  .wtProductsFiltersSortActions .wtFilterBody > div{
    margin: 0 !important;
  }
}


/* v4.3.11: reclaim extra vertical space (desktop) caused by global label margins */
@media (min-width: 901px){
  /* Global label has margin-top:10px; kill it for the Sort label so it hugs the Console select above */
  .wtProductsFiltersSortActions label{
    margin-top: 0 !important;
  }

  /* Also reduce top margin for any label inside the filter tile just in case */
  .wtProductsFilters label{
    margin-top: 6px;
  }

  /* Ensure selects don't introduce unexpected spacing */
  .wtProductsFiltersConsole select,
  .wtProductsFiltersSortActions select{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}



/* v4.4.2 – hide "Filter By Features" label on mobile only */
@media (max-width: 900px) {
  .wtProductsFiltersMods > .wtFilterBody > label {
    display: none;
  }
}


/* v4.5.3 – news article comments */
.newsCommentsList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.newsComment{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.12);
}

.newsCommentMeta{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
}

.newsCommentBody{
  line-height:1.6;
}
/* Admin: Online Visitors tile */
.wtAdminTileHeading{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 900;
  letter-spacing: 0;
}
.wtOnlineSummary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
  margin-top:2px;
  width:100%;
}

/* Chunky arcade-style counter bar (admin online visitors) */
.wtOnlineStat{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.28));
  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}
.wtOnlineStatIcon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.wtOnlineStatIcon i{
  font-size:16px;
  opacity:0.95;
}
.wtOnlineStatBody{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:8px;
  line-height:1.05;
  flex-wrap:nowrap;
}
.wtOnlineStatNumber{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}
.wtOnlineStatLabel{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  opacity: 0.75;
  white-space: nowrap;
}

/* Subtle status tint via an outer glow (no hard-coded colours) */
.wtOnlineStat--active{ box-shadow: 0 8px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.02), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.35); }
.wtOnlineStat--idle{ opacity: 0.98; }
.wtOnlineStat--bots .wtOnlineStatIcon i{ opacity: 0.85; }
.wtOnlineStat--unique .wtOnlineStatIcon i{ opacity: 0.9; }

@media (max-width: 700px){
  .wtOnlineSummary{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:8px;
  }
  .wtOnlineStat{
    width:100%;
    justify-content:center;
    padding:10px 8px;
    border-radius:14px;
  }
  .wtOnlineStatLabel{
    display:none;
  }
  .wtOnlineStatNumber{
    font-size:17px;
  }
}
.wtOnlineList{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.wtOnlineLegendPill{
  margin-top:10px;
  width:100%;
  justify-content:center;
}
.wtOnlineLegendText{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
  text-align:center;
  white-space: normal;
}

@media (max-width: 700px){
  .wtOnlineLegendPill{ padding:10px 8px; }
  .wtOnlineLegendText{ font-size: 10px; }
}
.wtOnlineRow{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(0,0,0,0.18);
}
.wtOnlineRow--current{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}
.wtOnlineHeader{
  display:grid;
  grid-template-columns: 1fr 18px;
  column-gap:8px;
  align-items:center;
  min-width:0;
}

.wtOnlineHeaderStatus{
  width:18px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  line-height:1;
}

@media (max-width: 700px){
  .wtOnlineHeader{
    grid-template-columns: 1fr 18px;
  }
}
.wtOnlineName{
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 100%;
}

.wtOnlineVisitorDivider{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: -3px 0 4px 0;
}
.wtOnlineId{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0;
}
.wtOnlineDetails{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.wtOnlineDetail{
  display:grid;
  grid-template-columns: 18px 1fr;
  column-gap:8px;
  align-items:center;
}
.wtOnlineDetailIcon{
  width:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  line-height:1;
}
.wtOnlineDetailText{
  min-width:0;
}
.wtOnlineDot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 10px;
  margin-top:0;
  background:#777;
  box-shadow:0 0 0 2px rgba(0,0,0,0.35);
}

@media (max-width: 720px){
  .wtOnlineHeader{
    grid-template-columns: 1fr 18px;
  }
}
.wtOnlineDot--active{ background:#2ecc71; }
.wtOnlineDot--idle{ background:#f39c12; }
.wtOnlineDot--offline{ background:#777; }

/* =========================================================
   Mobile override: shrink counter icons/badges ~25%
   Markup: .wtOnlineSummary .wtOnlineStatIcon i (Font Awesome)
   ========================================================= */
@media (max-width: 700px) {

  /* shrink the icon "badge" box */
  .wtOnlineSummary .wtOnlineStatIcon {
    width: 32px;      /* adjust if you want a touch smaller/larger */
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  /* shrink the Font Awesome icon inside */
  .wtOnlineSummary .wtOnlineStatIcon i {
    font-size: 12px;  /* ~25% smaller than typical 15–16px */
    line-height: 1;
  }

}

/* =========================================================
   Mobile: bring labels back + switch counters to 2x2 grid
   Markup: .wtOnlineSummary > .wtOnlineStat
   ========================================================= */
@media (max-width: 700px) {

  /* 2x2 grid instead of 4x1 */
  .wtOnlineSummary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  /* Ensure each pill stretches nicely in its grid cell */
  .wtOnlineSummary .wtOnlineStat {
    width: 100%;
    justify-content: flex-start;
  }

  /* Re-enable labels on mobile */
  .wtOnlineSummary .wtOnlineStatLabel {
    display: inline;
    opacity: 0.85;
    margin-left: 6px; /* label sits next to number */
  }

  /* Keep number + label on one line on mobile */
  .wtOnlineSummary .wtOnlineStatBody {
    display: flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
  }

  /* Optional: slightly smaller label than number */
  .wtOnlineSummary .wtOnlineStatLabel {
    font-size: 0.85em;
  }
}
/* =========================================================
   Desktop: normalise + slightly narrower pills, left-aligned
   ========================================================= */
@media (min-width: 701px) {

  .wtOnlineSummary {
    display: flex;
    gap: 10px;
  }

  /* Force pill layout + size */
  .wtOnlineSummary .wtOnlineStat {
    display: flex;              /* <-- important: makes justify-content work */
    align-items: center;
    justify-content: flex-start;/* left align icon + text */
    flex: 0 1 150px;            /* smaller pills (adjust 130–160px) */
    min-width: 0;
  }

  /* Keep body inline and tidy */
  .wtOnlineSummary .wtOnlineStatBody {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }

  /* (Optional) stop the icon badge from forcing width */
  .wtOnlineSummary .wtOnlineStatIcon {
    flex: 0 0 auto;
  }
}

/* =========================================================
   Admin: hide "Live view updates every 3s" legend
   ========================================================= */
span.muted.small {
  display: none;
}

/* =========================================================
   Admin (Dashboard): Visitor Statistics tile pills
   - These are re-homed .wtOnlineStat elements (bots + humans)
   - Keep them aligned + sized independently of .wtOnlineSummary
   ========================================================= */
#wtVisitorStatsPills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  justify-content:flex-start;
  align-items:stretch;
}

/* Ensure pills don’t stretch full-width on desktop */
@media (min-width: 701px){
  #wtVisitorStatsPills .wtOnlineStat{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex: 0 1 150px;
    max-width:150px;
    width:150px;
    min-width:0;
  }
  #wtVisitorStatsPills .wtOnlineStatBody{
    display:flex;
    align-items:baseline;
    gap:6px;
    white-space:nowrap;
  }
}

/* Mobile: show labels + 2x1 grid that matches tile width */
@media (max-width: 700px){
  #wtVisitorStatsPills{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
    width:100%;
  }
  #wtVisitorStatsPills .wtOnlineStat{
    width:100%;
    max-width:none;
    justify-content:flex-start;
  }
  #wtVisitorStatsPills .wtOnlineStatBody{
    display:flex;
    align-items:baseline;
    gap:0;
    white-space:nowrap;
  }
  /* Re-enable label text (the base mobile rule hides it) */
  #wtVisitorStatsPills .wtOnlineStatLabel{
    display:inline;
    opacity:0.85;
    margin-left:6px;
    font-size:0.85em;
  }
}

/* Admin Settings: spacer block between section card and next section title */
.admin .wtSectionSpacer {
  height: 17px;
}


/* Arcade-style toggle switches (Admin) */
.admin .toggleRow{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;}
.admin .toggleLabel{font-weight:600;line-height:1.2;}
.admin .toggleRow input{position:absolute;opacity:0;pointer-events:none;}
.admin .toggleSwitch{width:64px;height:32px;background:#1b1b1b;border:2px solid var(--wt-border);border-radius:6px;position:relative;box-shadow:inset 0 0 0 2px #000;flex:0 0 auto;}
.admin .toggleSwitch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;background:var(--wt-accent,#00ff9c);border:2px solid #000;border-radius:4px;transition:transform .15s ease;}
.admin .toggleRow input:checked + .toggleSwitch::after{transform:translateX(30px);}
.admin .formRow.disabled{opacity:.55;}



/* ---- Notifications (User) ---- */

/* Patch 039: Mobile-center the "other device" notification helper card */
@media (max-width: 700px){
  .wtNotifOtherDevice{
    justify-content: center !important;
    text-align: center;
  }
  .wtNotifOtherDevice .wtNotifOtherDeviceText{
    text-align: center;
    width: 100%;
  }
  .wtNotifOtherDevice #wtNotifAddThisDeviceBtn{
    margin-left: auto;
    margin-right: auto;
  }
}


/* Patch 030: Tighten spacing and make Manage Device Tokens flush-right on desktop */
@media (min-width: 701px){
  .wtNotifStatusActions{
    margin-top: 10px !important;
    gap: 8px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  .wtNotifStatusActions .wtNotifDeviceActions{
    justify-content: flex-end !important;
    justify-self: end !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }
  .wtNotifManageBtn{
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}


/* Patch 026: Mobile indented notification options container */
.wtNotifPrefsIndent{ padding-left: 0; }

@media (max-width: 700px){
  /* Create an indented 'sub-list' of options under the main enable pill */
  .wtNotifPrefsIndent{
    padding-left: 20px;
  }
  .wtNotifPrefsIndent .wtNotifPrefs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wtNotifPrefsIndent .wtNotifRow{
    margin: 0;
    flex: 1 1 220px; /* auto flex to fill width */
    min-width: 0;
  }
}


/* Patch 024: Mobile spacing + Manage button mobile full-width + remove icon on mobile + desktop flush right */
@media (max-width: 700px){
  /* Tighten spacing between notification option pills to match desktop */
  .wtNotifPrefs{ gap: 8px; margin-top: 6px; }
  .wtNotifPrefs .wtNotifRow{ margin: 0; padding: 6px 10px; }
  /* Manage Device Tokens button: full width on mobile, no icon */
  .wtNotifDeviceActions{ justify-content: stretch !important; }
  .wtNotifManageBtn{ width: 100%; display: flex; justify-content: center; text-align: center; }
  .wtNotifManageBtn i{ display: none !important; }
}

@media (min-width: 701px){
  /* Ensure Manage Device Tokens sits flush to the right edge of the notification card content */
  .wtNotifStatusActions{ padding-right: 0 !important; margin-right: 0 !important; }
  .wtNotifStatusActions .wtNotifDeviceActions{ padding-right: 0 !important; margin-right: 0 !important; }
  .wtNotifManageBtn{ margin-right: 0 !important; }
}

.wtNotifUserPanel{ margin-top:10px; }
.wtNotifRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  margin:4px 0;
}
.wtNotifRow--placeholder{
  opacity: .28;
  pointer-events: none;
}
.wtNotifRow input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color: #00ff9a;
}
.wtNotifPrefs{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-top:6px;
}

@media (max-width: 700px){
  .wtNotifPrefs{ grid-template-columns: 1fr; }
}

@media (min-width: 701px){
  /* Desktop: 3-across grid */
  .wtNotifPrefs{ grid-template-columns: repeat(3, 1fr); }
  .wtNotifPrefs .wtNotifRow{ margin: 0; min-height: 40px; }
  .wtNotifRow--placeholder{ min-height: 44px; }
}

.wtNotifPrefs.isDisabled{ opacity:.55; filter: grayscale(.15); }

.wtNotifOtherDevice{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wtNotifOtherDeviceText{ margin: 0; }
.wtNotifDeviceActions{ margin-top: 10px; display:flex; justify-content:flex-end; }
.wtNotifStatusActions{ margin-top: 10px; display:flex; flex-direction: column; gap: 10px; width: 100%; }
.wtNotifUserPanel.isLoading{ opacity: .72; filter: grayscale(.08); }

/* While loading prefs: hide controls and show a big loader */
.wtNotifLoading{ display: none; }
.wtNotifUserPanel.isLoading .wtNotifControls{ display: none; }
.wtNotifUserPanel.isLoading .wtNotifLoading{ display: grid; }

.wtNotifLoading{
  place-items: center;
  gap: 10px;
  padding: 18px 12px;
  margin: 10px 0 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.wtNotifLoadingText{ opacity: .9; letter-spacing: .5px; }
.wtNotifLoadingSpinner{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(0,255,154,.95);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  animation: wtSpin .9s linear infinite;
}
@keyframes wtSpin{ to{ transform: rotate(360deg); } }
.wtNotifOtherDevice.isLinking{ box-shadow: 0 0 0 2px rgba(0,255,154,.14) inset, 0 0 24px rgba(0,255,154,.08); }
.wtNotifOtherDevice.isLinking .btn{ pointer-events:none; }
@media (max-width: 700px){
  .wtNotifDeviceActions{ justify-content: stretch; }
  .wtNotifDeviceActions .btnSecondary{ width: 100%; }
}

@media (min-width: 701px){
  /* Desktop: status + manage button as a full-width 2x1 grid */
  .wtNotifStatusActions{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px;
  }
  .wtNotifStatusActions .wtNotifStatus{ margin: 0; }
  .wtNotifStatusActions .wtNotifDeviceActions{ margin-top: 0; justify-content: flex-end; }
  .wtNotifStatusActions{ padding-right: 0; }
  .wtNotifStatusActions .wtNotifDeviceActions{ justify-self: end; padding-right: 0; margin-right: 0; }
  .wtNotifManageBtn{ margin-right: 0 !important; }
}

.wtNotifDevicesBody{
  margin-top: 10px;
}
.wtNotifDevicesTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
}
.wtNotifDevicesTable th,
.wtNotifDevicesTable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.wtNotifDevicesTable th{
  text-align: left;
  font-size: 12px;
  opacity: .85;
  background: rgba(0,0,0,.22);
  position: sticky;
  top: 0;
}
.wtNotifDevicesTable tr:last-child td{ border-bottom: 0; }
.wtNotifTokenMeta{ display:flex; flex-direction: column; gap: 2px; }
.wtNotifTokenMeta .muted{ opacity: .75; }
.wtNotifTokenPill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); font-size: 12px; }
.wtNotifTokenPill.on{ box-shadow: 0 0 0 2px rgba(0,255,140,.08) inset; }
.wtNotifTokenPill.off{ opacity: .75; }

.wtNotifDevicesModal .wtArcadeModalBody{ padding-left: 6px; padding-right: 6px; }
.wtNotifDevicesIntro{ margin-top: 0; }



/* Patch 031: Fine-tune notification actions spacing */
@media (min-width: 701px){
  .wtNotifManageBtn{ margin-right: -5px !important; }
}


/* Patch 032: Shared account card action-row styling (matches Notifications action row) */
.wtActionRow{ width: 100%; }

@media (min-width: 701px){
  .wtActionRow{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .wtActionRowLeft{ min-height: 1px; } /* keeps the 1fr column without affecting layout */
  .wtActionRowActions{ justify-self: end; }
}

/* Mobile: action buttons should span full width, centered text */
@media (max-width: 700px){
  .wtActionRowActions{ justify-content: stretch !important; }
  .wtPwUpdateBtn{ width: 100%; display:flex; justify-content:center; text-align:center; }
}

/* Patch 033: Remove negative right margin from Update Password button */
@media (min-width: 701px){
  .wtPwUpdateBtn{ margin-right: 0 !important; }
}

/* Patch 034: Remove top spacing from Update Password action row */
@media (min-width: 701px){
  .wtPwStatusActions{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Patch 035: Add top spacing to Update Password button on desktop */
@media (min-width: 701px){
  .wtPwUpdateBtn{
    margin-top: 10px !important;
    padding-top: calc(10px + var(--btn-pad-top, 0px)) !important;
  }
}

/* Patch 036: Ensure no top spacing on Update Password button on mobile */
@media (max-width: 700px){
  .wtPwUpdateBtn{
    margin-top: 0 !important;
    padding-top: initial !important;
  }
}

/* Patch 037: Restore top spacing on Update Password button on mobile */
@media (max-width: 700px){
  .wtPwUpdateBtn{
    margin-top: 10px !important;
    padding-top: calc(10px + var(--btn-pad-top, 0px)) !important;
  }
}

/* Patch 038: Remove ONLY external top spacing from Update Password button on mobile */
@media (max-width: 700px){
  .wtPwUpdateBtn{
    margin-top: 0 !important;
  }
}

.shareBtn {
	margin-right: 7px;
}

/* Price feels more “insert coin” */
.price.big{
  font-size: 3rem;
  margin-top: -8px;
  letter-spacing: .5px;
  text-shadow: 0 0 16px rgba(0,255,255,.16), 0 0 16px rgba(255,0,200,.12);
  padding-bottom: 0px;
  margin-bottom: 0px;
}


/* Account registration extras */
.wtRegPrefs{margin:14px 0;padding:12px;border:1px solid var(--wt-border);border-radius:16px;background:rgba(0,0,0,.18); margin-top: 25px;}
.wtRegPrefsTitle{font-family:"Press Start 2P", monospace;font-size:11px;display:flex;align-items:center;gap:10px;margin-bottom:10px;opacity:.95}
.wtCheckRow{display:flex;align-items:flex-start;gap:10px;margin:8px 0;font-size:14px}
.wtCheckRow input{margin-top:3px}
.wtTosPanel{margin-top:14px}
.wtTosTitle{font-family:"Press Start 2P", monospace;font-size:11px;display:flex;align-items:center;gap:10px;margin-bottom:10px; margin-top: 25px;}
.wtTosTitleIcon {font-size:16px}
.wtTosBody{max-height:220px;overflow:auto;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);font-size:13px;line-height:1.5;white-space:normal}
.wtTosAgree{margin-top:10px}


/* Registration: notification preference grid */
.wtNotifRegGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin-top:10px;
}
.wtNotifRegSpan2{grid-column:span 2;}
.wtNotifRegHint{margin-top:8px; opacity:.85; text-align: center; line-height: 20px;}
@media (max-width: 700px){
  .wtNotifRegGrid{grid-template-columns:1fr;}
  .wtNotifRegSpan2{grid-column:auto;}
}

/* Registration/UI: better checkbox rows (override global input width rules) */
.wtCheckRow{align-items:center;gap:10px;}
.wtCheckRow input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex:0 0 auto;margin:0 7px; margin-right: 0px; margin-left: 2px; border-radius:6px;border:1px solid rgba(255,255,255,0.20);background:rgba(0,0,0,0.22);box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12);cursor:pointer;position:relative;}
.wtCheckRow input[type="checkbox"]:hover{border-color: rgba(255,255,255,0.32);}
.wtCheckRow input[type="checkbox"]:focus{outline:none;border-color: rgba(255,255,255,0.42);}
.wtCheckRow input[type="checkbox"]:checked{border-color: rgba(255,255,255,0.35);background:rgba(0,0,0,0.28);}
.wtCheckRow input[type="checkbox"]:checked::after{content:"";position:absolute;left:8px;top:3px;width:5px;height:10px;border-right:2px solid rgba(255,255,255,0.92);border-bottom:2px solid rgba(255,255,255,0.92);transform:rotate(45deg);}
.wtCheckRow span{line-height:1.3;}
.wtNotifRegGrid .wtCheckRow{padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,0.10);background:rgba(0,0,0,0.14);} 
.wtNotifRegGrid .wtCheckRow:hover{border-color: rgba(255,255,255,0.18);background:rgba(0,0,0,0.18);} 


/* ===============================
   Global Checkbox Style (Default)
   WeekendTechieWebsite
   =============================== */

input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin:0 7px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.20);
  background:rgba(0,0,0,0.22);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12);
  cursor:pointer;
  position:relative;
}

input[type="checkbox"]:hover{
  border-color: rgba(255,255,255,0.32);
}

input[type="checkbox"]:focus{
  outline:none;
  border-color: rgba(255,255,255,0.42);
}

input[type="checkbox"]:checked{
  border-color: rgba(255,255,255,0.35);
  background:rgba(0,0,0,0.28);
}

input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:8px;
  top:3px;
  width:5px;
  height:10px;
  border-right:2px solid rgba(255,255,255,0.92);
  border-bottom:2px solid rgba(255,255,255,0.92);
  transform:rotate(45deg);
}

/* Label alignment helper (recommended wrapper) */
.wtCheckRow{
  display:flex;
  align-items:center;
  gap:10px;
}


/* Register page: mobile spacing tweaks */
@media (max-width: 700px){
  .wtRegisterCard .grid2{
    margin-top: 0;
    padding-top: 0;
	gap: 0px;
  }
  .wtCheckRow{
	  display:flex;
	  align-items:center;
	  gap:10px;
	}
	h2 {
		font-size: 16px;
		line-height: 20px;
	}
	h2 i {
		font-size: 28px;
	}
}

/* Register page: captcha panel */
.wtCaptchaPanel{
  margin-top: 14px;
}
.wtCaptchaGrid{
  margin-top: 10px;
}

/* Register page: Cloudflare Turnstile panel */
.wtTurnstilePanel{
  margin-top: 14px;
}
.wtTurnstileHeader{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wtTurnstileTitle{
  display:flex;
  align-items:center;
  gap:10px;
}
.wtTurnstileWrap{
  display:flex;
  justify-content:flex-start;
}

/* Register page: honeypot field (hidden from humans, caught server-side) */
.wtHpField{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* Register page: notification grid columns (desktop only) */
.wtRegisterCard .wtNotifPrefs{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Button: Danger / Reset */
.btnDanger{
  border-color: rgba(255,90,90,.45);
  background: rgba(255,90,90,.12);
}
.btnDanger:hover{
  border-color: rgba(255,90,90,.65);
  background: rgba(255,90,90,.18);
}


/* Register: actions layout */
.wtRegActions{
  display:grid;
  grid-template-columns: auto auto;
  gap:7px;
  justify-content:end;
  align-items:end;
  margin-top:20px;
}

.wtRegActions .btn{
  white-space:nowrap;
  min-width: 170px;
}

@media (max-width: 700px){
  .wtRegActions{
    grid-template-columns: 1fr 1fr;
    width:100%;
  }
  .wtRegActions .btn{
    width:100%;
    min-width: 0;
  }
}

/* Register: mobile grid2 top spacing */
@media (max-width: 700px){
  .grid2{ padding-top:0 !important; margin-top:0 !important; }
}


/* Register: notification options (desktop) */
@media (min-width: 701px){
  .wtRegPrefs .wtNotifPrefs{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px 12px;
  }
}


/* Register: captcha styling */
.wtCaptchaPanel{
  margin-top:25px;
  margin-bottom: 14px;
}
.wtCaptchaHeader{

  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.wtCaptchaTitle{
  font-family:"Press Start 2P", monospace;
  font-size:16px;
  align-items:center;
  gap:10px;
  opacity:.95;
  width: 100%;
}
.wtCaptchaEquation{
  font-family:"Press Start 2P", monospace;
  font-size:11px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.18);
  white-space:nowrap;
}
.wtCaptchaInputRow{
  display:flex;
  align-items:center;
  gap:12px;
}
.wtCaptchaLabel{
  font-size:13px;
  opacity:.9;
  white-space:nowrap;
}
.wtCaptchaInput{
  max-width:180px;
}
@media (max-width: 700px){
  .wtCaptchaHeader{ flex-direction:column; align-items:flex-start; }
  .wtCaptchaInputRow{ width:100%; }
  .wtCaptchaInput{ width:100%; max-width:none; }
}


/* Register: disabled notification options look inactive */
.wtNotifOpt:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.wtNotifOpt:disabled + span{
  opacity:0.55;
}
.wtNotifOpt:disabled{
  pointer-events:none;
}
.wtNotifRow.wtCheckRow:has(.wtNotifOpt:disabled){
  opacity:0.55;
}


/* Register: captcha solve row */
.wtCaptchaSolveRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
}
.wtCaptchaEquals{
  font-family:"Press Start 2P", monospace;
  font-size:11px;
  opacity:0.9;
}
.wtCaptchaSolveRow .wtCaptchaInput{
  width: auto;
  min-width: 50px;
  max-width: 50px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.18);
  font-family:"Press Start 2P", monospace;
  font-size:11px;
  line-height:1;
  text-align:center;
}
.wtCaptchaSolveRow .wtCaptchaInput::placeholder{
  opacity:0.55;
}

@media (max-width: 700px){
  .wtCaptchaHeader{ width:100%; }
  .wtCaptchaSolveRow{ width:100%; justify-content:flex-start; flex-wrap:wrap; margin-top: 10px; }
}


/* Register: disabled notification rows */
.wtNotifDisabled{
  opacity:0.45;
}
.wtNotifDisabled:hover{
  background:rgba(0,0,0,0.14);
  border-color: rgba(255,255,255,0.10);
}

input.wtCaptchaInput {
	width: 50px;
	max-width: 50px;
}

.wtTosTitleIcon i {
	font-size: 22px;
	margin-bottom: 2px;
}

.wtCaptchaText {
	font-size: 14px; 
	font-weight: bold;
}