/* ─────────────────────────────────────────────────────────────────────────
   Eternal Network — store theme override for Tebex Exo template.

   Uploaded as an Asset on the Tebex panel and loaded via
   `<link rel="stylesheet" href="/template-assets/eternal-theme.css?updated=951cc4d88987d14fe14d9856c07bd7e5fcb87c070537e0e93472745acd403113">` placed
   in `layout.html` (or `head.twig`) AFTER Exo's default `shared.css`.

   Targets Tebex's standard tiered class names (`.store-product-tiered`,
   `.store-products-tiered`, `.store-category-tiered-header`, `.btn`,
   `.btn-primary`, `.btn-secondary`, `.actions.product-actions`) plus a
   small set of Eternal-specific helpers (`.store-hero-logo`,
   `.store-benefits`, `.store-cart-pill`, `.store-footnote`) used by our
   custom markup additions.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Geist font — matches eternalnetwork.club's typography ────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&display=swap');

html body,
html body input,
html body button,
html body select,
html body textarea {
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Body-wide space background ─────────────────────────────────────────
   Mirrors the SpaceBackground component on eternalnetwork.club: solid dark
   base, three soft nebula glows pinned at fixed positions, plus a tiled
   star field that drifts diagonally. All in fixed pseudo-elements so it
   sits behind every page (homepage, category, basket, checkout) without
   the rest of Exo's markup needing to know about it. */
html, body {
  background-color: #08080f !important;
}
html body {
  position: relative;
  min-height: 100vh;
  color: #e2e3ed;
}

/* Layer 1 — nebula colour glows. Three radial gradients positioned to
   roughly match the eternalnetwork.club hero (purple top-left, cyan
   right-middle, magenta bottom-centre). Fixed so they don't scroll. */
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1100px 700px at 8% 22%, rgba(139, 92, 246, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 1000px 680px at 92% 35%, rgba(34, 211, 238, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 900px 540px at 55% 100%, rgba(168, 85, 247, 0.22) 0%, transparent 65%),
    #08080f;
}

/* Layer 2 — drifting star field. Same transform-only animation we use on
   the main site (compositor-only, no repaints). Inflated past viewport so
   tiles still cover at the animation's end position. */
html body::after {
  content: "";
  position: fixed;
  inset: -700px;
  z-index: -1;
  pointer-events: none;
  /* ~30 stars per tile → roughly 2-3x denser than before. Tile is 600px,
     so a 1920×1080 viewport sees ~6 tiles → ~180 visible stars. Tuned to
     match the eternalnetwork.club hero density, not to overwhelm it. */
  background-image:
    radial-gradient(1.2px 1.2px at 5% 8%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(173, 216, 255, 0.8), transparent 100%),
    radial-gradient(1px 1px at 18% 32%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 22% 64%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.1px 1.1px at 27% 42%, rgba(173, 216, 255, 0.75), transparent 100%),
    radial-gradient(1.3px 1.3px at 32% 84%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.6px 1.6px at 38% 26%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1px 1px at 41% 9%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 45% 73%, rgba(173, 216, 255, 0.75), transparent 100%),
    radial-gradient(1.7px 1.7px at 50% 56%, rgba(173, 216, 255, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 53% 38%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.1px 1.1px at 58% 12%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 62% 91%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 14%, rgba(173, 216, 255, 0.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 68% 60%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.7px 1.7px at 71% 67%, rgba(173, 216, 255, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 74% 31%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.4px 1.4px at 76% 47%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.6px 1.6px at 79% 78%, rgba(173, 216, 255, 0.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 82% 21%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 86% 5%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.7px 1.7px at 88% 53%, rgba(173, 216, 255, 0.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 91% 92%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 94% 38%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.5px 1.5px at 96% 70%, rgba(173, 216, 255, 0.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 88%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 14% 76%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.1px 1.1px at 35% 53%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 47% 25%, rgba(173, 216, 255, 0.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 90% 14%, rgba(255, 255, 255, 0.65), transparent 100%);
  background-size: 600px 600px;
  background-repeat: repeat;
  animation: store-star-drift 180s linear infinite;
  will-change: transform;
  opacity: 1;
}
@keyframes store-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(600px, 600px, 0); }
}

/* ─── Second star layer (parallax) ───────────────────────────────────────
   The body::after handles star layer A drifting south-east. This second
   layer drifts north-west at a different speed, so the two together give
   the same parallax effect the eternalnetwork.club hero has. The element
   is injected by header.twig (one fixed div with no content). */
.en-stars-layer-b {
  position: fixed;
  inset: -560px;
  z-index: -1;
  pointer-events: none;
  /* Sparse but BRIGHT stars — these are the foreground "twinkle" layer
     that gives the parallax. Smaller tile (480px) so they cycle faster
     than layer A. */
  background-image:
    radial-gradient(1.8px 1.8px at 6% 14%, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(1.6px 1.6px at 16% 22%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(2px 2px at 24% 56%, rgba(173, 216, 255, 0.9), transparent 100%),
    radial-gradient(1.4px 1.4px at 33% 73%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.7px 1.7px at 38% 12%, rgba(173, 216, 255, 0.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 8%, rgba(173, 216, 255, 0.85), transparent 100%),
    radial-gradient(1.9px 1.9px at 53% 41%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.6px 1.6px at 60% 64%, rgba(173, 216, 255, 0.85), transparent 100%),
    radial-gradient(1.8px 1.8px at 66% 88%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 41%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(2px 2px at 80% 17%, rgba(173, 216, 255, 0.9), transparent 100%),
    radial-gradient(1.7px 1.7px at 85% 56%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 76%, rgba(173, 216, 255, 0.85), transparent 100%),
    radial-gradient(1.7px 1.7px at 28% 81%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.4px 1.4px at 96% 32%, rgba(255, 255, 255, 0.8), transparent 100%);
  background-size: 480px 480px;
  background-repeat: repeat;
  animation: store-star-drift-b 140s linear infinite;
  will-change: transform;
  opacity: 1;
}
@keyframes store-star-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-480px, 480px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .en-stars-layer-b { animation: none !important; }
}

/* ─── Floating pill navbar (header.twig) ─────────────────────────────────
   Mirrors the React `Navbar.tsx` component: fixed at top-center, animated
   gradient ring behind a glassy pill, logo + nav links + actions inside.

   The pill is `pointer-events: auto` while its outer wrapper is
   `pointer-events: none`, so clicks pass through the empty space around
   it (matching the React component's behaviour). */
/* Bulletproof pill nav positioning. We address the header by id
   (`#header`) which is what Exo's templates use, so this carries id
   specificity (0,1,0,0) and beats any `body.is-navigation-* .site-header`
   rule Exo might apply. Every single layout property is `!important` so
   inheriting/cascading rules from shared.css/generic.css can't override. */
header#header,
header#header.site-header,
header#header.en-floating-nav,
header#header.site-header.en-floating-nav {
  position: fixed !important;
  top: 16px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  float: none !important;
}

/* Re-enable pointer events on the actual interactive children. */
header#header .en-nav-shell,
header#header .en-nav-pill,
header#header .en-nav-pill * {
  pointer-events: auto !important;
}

.en-nav-shell {
  position: relative;
  pointer-events: auto;
}

/* Soft gradient ring around the pill — purple → cyan → magenta. */
.en-nav-ring {
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  background: linear-gradient(
    120deg,
    rgba(167, 139, 250, 0.45),
    rgba(34, 211, 238, 0.35),
    rgba(217, 70, 239, 0.45)
  );
  opacity: 0.7;
  filter: blur(1px);
  pointer-events: none;
}

header#header .en-nav-shell {
  position: relative !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
header#header .en-nav-pill {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.5rem 0.5rem !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(10, 10, 24, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo */
.en-nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.25rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.en-nav-logo:hover {
  background: rgba(255, 255, 255, 0.06);
}
.en-nav-logo img {
  height: 40px !important;
  width: 40px !important;
  object-fit: contain;
  border-radius: 9999px;
  transition: filter 0.2s ease;
}
.en-nav-logo:hover img {
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6));
}

/* Vertical dividers between sections */
.en-nav-divider {
  width: 1px;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0.25rem;
}

/* Nav links */
.en-nav-links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.en-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.en-nav-link:hover {
  color: #fff;
}
.en-nav-link-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.en-nav-link-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 1.5rem;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  transform: translateX(-50%);
}

/* ─── PlayerSearch — mirrors the React component on the live site ─────── */
.en-nav-search {
  position: relative;
  display: flex;
  align-items: center;
}
.en-nav-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.en-nav-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.en-nav-search-input {
  height: 32px;
  width: 11rem;
  padding: 0 0.75rem 0 2rem;
  font-size: 13px;
  font-family: inherit;
  color: #e2e3ed;
  background: rgba(21, 21, 37, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.en-nav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.en-nav-search-input:focus {
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3);
  background: rgba(21, 21, 37, 0.85);
}

.en-nav-search-spinner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #a78bfa;
  display: none;
}
.en-nav-search-spinner.is-loading {
  display: inline-block;
  animation: en-spinner-rotate 0.7s linear infinite;
}
@keyframes en-spinner-rotate {
  to { transform: translateY(-50%) rotate(360deg); }
}

.en-nav-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 16rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 32, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 60;
}

.en-nav-search-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  color: #e2e3ed;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.en-nav-search-item:hover,
.en-nav-search-item-active {
  background: rgba(255, 255, 255, 0.06);
}
.en-nav-search-item img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}
.en-nav-search-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.en-nav-search-empty {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 880px) {
  .en-nav-search { display: none; }
}

/* ─── ServerStatus — mirrors the React component on the live site ─────── */
.en-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.en-nav-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4);
  animation: en-pulse-glow 2s ease-in-out infinite;
}
.en-nav-status-dot.is-online { background: #34d399; }
.en-nav-status-dot.is-offline { background: #f87171; }
@keyframes en-pulse-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.en-nav-status-count {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 720px) {
  .en-nav-status { display: none; }
}

/* ─── Profile dropdown — mirrors React component on the live site ─────── */
.en-nav-profile {
  position: relative;
}
.en-nav-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}
.en-nav-profile-trigger:hover {
  background: rgba(255, 255, 255, 0.10);
}
.en-nav-profile-trigger img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.en-nav-profile-name { display: none; }
@media (min-width: 1024px) {
  .en-nav-profile-name { display: inline; }
}

.en-nav-profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 12rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.7);
  z-index: 60;
}
.en-nav-profile-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.en-nav-profile-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.en-nav-profile-item-danger {
  color: #f87171;
}
.en-nav-profile-item-danger:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

/* Right-side actions (login / avatar / cart) */
.en-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.en-nav-login {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0c0c16;
  text-decoration: none;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.en-nav-login:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.en-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}
.en-nav-user:hover {
  background: rgba(255, 255, 255, 0.10);
}
.en-nav-user img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.en-nav-user-name { display: none; }
@media (min-width: 1024px) {
  .en-nav-user-name { display: inline; }
}

.en-nav-cart-wrap {
  position: relative;
}
.en-nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}
.en-nav-cart:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.en-nav-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(120deg, #a78bfa, #d946ef);
  color: #0c0c16;
  font-size: 0.65rem;
  font-weight: 800;
  border: 1.5px solid #08080f;
}

/* Cart dropdown menu */
.en-nav-cart-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 18rem;
  padding: 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 12, 26, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  z-index: 60;
  color: #e2e3ed;
}
.en-nav-cart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.en-nav-cart-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.en-nav-cart-header-count {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 227, 237, 0.45);
}

.en-nav-cart-items {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  max-height: 14rem;
  overflow-y: auto;
}
.en-nav-cart-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.4rem;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}
.en-nav-cart-item:hover { background: rgba(255, 255, 255, 0.04); }
.en-nav-cart-item-info { flex: 1 1 auto; min-width: 0; }
.en-nav-cart-item-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.en-nav-cart-item-price {
  font-size: 0.75rem;
  color: rgba(226, 227, 237, 0.6);
  margin-top: 0.15rem;
}
.en-nav-cart-item-remove {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: rgba(248, 113, 113, 0.08);
  color: rgba(248, 113, 113, 0.85);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.en-nav-cart-item-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #fff;
  transform: rotate(90deg);
}

.en-nav-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: rgba(226, 227, 237, 0.7);
}
.en-nav-cart-total strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.en-nav-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.en-nav-cart-view {
  padding: 0.6rem 0.85rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(226, 227, 237, 0.85);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.en-nav-cart-view:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.en-nav-cart-checkout-form {
  margin: 0;
}
.en-nav-cart-checkout {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-radius: 0.55rem;
  background: linear-gradient(120deg, #a78bfa, #8b5cf6 50%, #d946ef);
  color: #0c0c16;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(167, 139, 250, 0.55);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.en-nav-cart-checkout:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.en-nav-cart-empty {
  padding: 1.5rem 0.5rem 0.5rem;
  text-align: center;
  color: rgba(226, 227, 237, 0.55);
}
.en-nav-cart-empty svg {
  margin: 0 auto 0.6rem;
  color: rgba(167, 139, 250, 0.5);
}
.en-nav-cart-empty p {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.en-nav-cart-empty span {
  font-size: 0.78rem;
  color: rgba(226, 227, 237, 0.45);
}

/* Reset Exo's old `.site-header-inner` rules — the pill replaces all of it. */
.en-floating-nav .site-header-inner,
.en-floating-nav h1.site-title,
.en-floating-nav .actions,
.en-floating-nav .user-actions {
  display: none !important;
}

/* Hide leftover bits from any other Exo header path. */
.toggle-navigation,
.site-sale-banner {
  display: none !important;
}

/* Add top padding to the main content so it clears the floating nav. */
.site-content.site-content-widgets {
  padding-top: 7rem !important;
}

/* Mobile — hide nav links + dividers, keep just logo + login. */
@media (max-width: 720px) {
  .en-nav-links,
  .en-nav-divider {
    display: none;
  }
}

/* Site footer — keep tidy on the dark bg. */
.site-footer {
  background: rgba(8, 8, 15, 0.6) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ─── Hide Exo's default nav and "Home/Packages/About" links ─────────────
   We're a single-category credits store; there's nowhere else for the user
   to go from the nav, so we suppress it entirely. The site-wide header
   logo + login + basket buttons stay visible (they're useful), but the
   navigation row beneath the header is cut. */
.site-navigation,
nav.navigation,
.site-header .navigation,
.site-header nav,
nav.is-navigation-horizontal,
nav.is-navigation-vertical {
  display: none !important;
}

/* ─── Force full-width content, no sidebar ──────────────────────────────
   Exo's "Vertical Nav in Sidebar" mode and the "home-categories-enabled"
   body class both apply layout containers (grid/flex) that squash our
   content into a narrow column. Nuke every layout property that could
   constrain width, on every container that wraps our content. Also strip
   any background colour Exo paints on these containers so the cards
   float directly on the page's space backdrop instead of inside a paler
   wrapper rectangle. */
html body .site,
html body .site-inner,
html body main,
html body .site-main,
html body .site-content,
html body .site-content-widgets,
html body .site-content.site-content-widgets {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  float: none !important;
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Re-center the page wrapper at a sensible max width. Higher specificity
   so it wins against the override block above. */
html body .site-content.site-content-widgets {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 7rem 1.5rem 5rem !important;
  position: relative !important;
}

/* Hide every sidebar/widget surface Exo might render. Note: NOT matching
   `*-widgets-*` broadly because `site-content-widgets` is OUR container. */
.site-sidebar,
aside.site-sidebar,
.site-widgets-area,
.site-aside,
.sidebar,
.site .sidebar,
.home-categories {
  display: none !important;
}

/* Force our products grid full-width too — belt + braces. */
.store-category-tiered,
.store-products-tiered {
  width: 100% !important;
  max-width: 100% !important;
}

/* Page wrapper */
.site-content.site-content-widgets {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 7rem 1.5rem 5rem;
  color: #e2e3ed;
}

/* ─── Hero header ─── */
.store-category-tiered-header {
  text-align: center;
  margin-bottom: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.store-hero-logo {
  position: relative;
  width: min(360px, 70vw);
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 28px 60px rgba(167, 139, 250, 0.32));
}
.store-hero-logo-img {
  height: auto !important;
  width: 100% !important;
  display: block;
}

.store-hero-tagline {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: rgba(226, 227, 237, 0.7);
  max-width: 60ch;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

/* Hide the default `<h2>` if Tebex's template still emits one (we use the
   logo image as the heading instead). */
.store-category-tiered-header > h2 { display: none; }

/* ─── Side action rail (login / cart / support) ─── */
/* Vertical floating column, fixed mid-right of the viewport. Mirrors the
   layout pattern used by enchantedmc and similar Tebex stores. */
.store-side-rail {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.store-side-rail-btn {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: rgba(12, 12, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(226, 227, 237, 0.7);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.store-side-rail-btn svg {
  width: 22px;
  height: 22px;
}
.store-side-rail-btn:hover {
  background: rgba(20, 20, 38, 0.95);
  border-color: rgba(167, 139, 250, 0.45);
  color: #fff;
  transform: translateX(-2px);
  box-shadow: 0 18px 40px -16px rgba(167, 139, 250, 0.5);
}

/* Cart count badge */
.store-side-rail-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(120deg, #a78bfa, #d946ef);
  color: #0c0c16;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0;
  border: 1.5px solid #08080f;
}

/* On phones, drop the rail to the bottom-right as a horizontal row */
@media (max-width: 560px) {
  .store-side-rail {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    transform: none;
    flex-direction: row;
  }
  .store-side-rail-btn:hover {
    transform: translateY(-2px);
  }
}

/* ─── Product grid ─── */
/* 3 + 3 + 1 layout: two rows of three regular cards, then a wide
   featured card spanning the full row. Fixed-column grid (not auto-fit)
   so the featured card can reliably `grid-column: 1 / -1` itself across
   whatever the current breakpoint exposes. */
.store-products-tiered {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

/* ─── Card ─── */
.store-product-tiered {
  position: relative;
  display: flex !important;
  flex-direction: column;
  padding: 2.25rem 1.75rem 1.75rem !important;
  background: rgba(12, 12, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.15rem;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Featured (wide) card — last row, full width, horizontal layout.
   Image gets more room (up to 380px) so the artwork dominates; the
   info column on the right takes whatever's left, capped narrower so
   text doesn't sprawl. */
.store-product-featured {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center;
  gap: 3rem;
  padding: 2.5rem 3rem !important;
}
.store-product-featured .image,
.store-product-featured img.image {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
  margin: 0;
  aspect-ratio: 1 / 1;
}
/* Text body fills remaining horizontal space, all elements centered. */
.store-product-featured .store-product-body {
  flex: 1 1 auto !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  text-align: center;
  gap: 0.5rem;
  min-width: 0;
}
.store-product-featured .product-title {
  font-size: 3.25rem;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.7rem;
  margin: 0.3rem 0 0.4rem;
}
.store-product-featured .product-title-sub {
  font-size: 1rem;
  letter-spacing: 0.2em;
}
.store-product-featured .bonus-slot {
  justify-content: center !important;
  margin-bottom: 0.5rem;
}
.store-product-featured .bonus {
  font-size: 0.9rem;
  padding: 0.45rem 1.1rem;
}
/* Stack price + Buy button vertically; button takes the column width. */
.store-product-featured .actions,
.store-product-featured .product-actions {
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  margin-top: 0.85rem !important;
  padding-top: 0;
}
.store-product-featured .price {
  align-items: center !important;
  flex: 0 0 auto;
}
.store-product-featured .price strong { font-size: 2.5rem; }
.store-product-featured .price del { font-size: 1rem; }
.store-product-featured .price-currency { font-size: 0.85rem; }
.store-product-featured .btn {
  width: 100% !important;
  flex: 0 0 auto !important;
  padding: 1.1rem 2.25rem !important;
  font-size: 1.05rem !important;
}

/* Top accent — thin gradient line at the card's top edge */
.store-product-tiered::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(167, 139, 250, 0.55) 35%,
    rgba(34, 211, 238, 0.45) 65%,
    transparent 100%
  );
  pointer-events: none;
}

/* Soft gradient outline that fades in on hover */
.store-product-tiered::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.55),
    rgba(34, 211, 238, 0.3) 50%,
    rgba(217, 70, 239, 0.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.store-product-tiered:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.18);
  box-shadow: 0 30px 60px -22px rgba(167, 139, 250, 0.4);
}
.store-product-tiered:hover::after {
  opacity: 1;
}

/* ─── Card image (gem icon) ─── */
.store-product-tiered .image,
.store-product-tiered img.image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 200px !important;
  max-height: 200px !important;
  margin: 0 auto 1.25rem;
  filter: drop-shadow(0 14px 26px rgba(167, 139, 250, 0.28));
  overflow: hidden;
}
.store-product-tiered img.image { object-fit: contain; }
/* Custom uploaded artwork: fit the slot strictly, preserve aspect ratio. */
.store-product-tiered .image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}
/* Featured-card image overrides live in the .store-product-featured
   block higher up in this file (300px). No second rule needed here. */

/* ─── Bonus badge (above title) ─── */
/* The slot is always rendered with a fixed height so cards without a bonus
   still reserve the same vertical space — keeps Buy buttons aligned across
   cards. The pill itself only appears when bonus is present. */
.store-product-tiered .bonus-slot {
  height: 1.65rem;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-product-tiered .bonus {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, #a78bfa, #d946ef);
  padding: 0.28rem 0.8rem;
  border-radius: 9999px;
  box-shadow: 0 8px 18px -8px rgba(217, 70, 239, 0.55);
  white-space: nowrap;
}

/* ─── Tier ribbon (BEST SELLER / BEST VALUE / NEW), top-right corner ─── */
.store-product-tiered .ribbon {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
  border-radius: 0.45rem;
  background: rgba(34, 211, 238, 0.15);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.35);
  backdrop-filter: blur(8px);
}
.store-product-tiered .ribbon.is-best {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.4);
}
.store-product-tiered .ribbon.is-new {
  background: rgba(217, 70, 239, 0.18);
  color: #f0abfc;
  border-color: rgba(217, 70, 239, 0.4);
}

/* ─── Title ─── */
.store-product-tiered .product-title {
  font-size: 2.25rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 0.6rem;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.store-product-tiered .product-title-sub {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(226, 227, 237, 0.65);
}

.store-product-tiered .descr {
  font-size: 0.875rem;
  color: rgba(226, 227, 237, 0.55);
  text-align: center;
  margin-bottom: 1.25rem;
}
.store-product-tiered .descr:empty { display: none; }

/* ─── Actions block (price + buy button) ─── */
.store-product-tiered .actions,
.store-product-tiered .product-actions {
  margin-top: auto !important;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
}

/* ─── Price ─── */
.store-product-tiered .price {
  text-align: center;
  margin: 0;
  font-size: 0.875rem;
  color: rgba(226, 227, 237, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.store-product-tiered .price strong {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
}
.store-product-tiered .price del {
  font-size: 0.8rem;
  color: rgba(226, 227, 237, 0.5);
  /* Always rendered (with `&nbsp;` when there's no bonus) so the price block
     keeps a constant height. `is-empty` hides the strike-through line on
     the placeholder so it doesn't read as "no original price". */
  min-height: 1em;
}
.store-product-tiered .price del.is-empty {
  text-decoration: none;
  visibility: hidden;
}
.store-product-tiered .price-currency {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226, 227, 237, 0.6);
  margin-top: 0.05rem;
}

/* ─── Buttons ─── */
.store-product-tiered .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 0.7rem;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.store-product-tiered .btn.wide { width: 100%; }

.store-product-tiered .btn-primary {
  background: linear-gradient(120deg, #a78bfa 0%, #8b5cf6 50%, #d946ef 100%);
  color: #0c0c16;
  box-shadow: 0 14px 30px -12px rgba(167, 139, 250, 0.65);
}
.store-product-tiered .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -12px rgba(167, 139, 250, 0.85);
}

.store-product-tiered .btn-secondary {
  background: rgba(34, 211, 238, 0.12);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.4);
}
.store-product-tiered .btn-secondary:hover {
  background: rgba(34, 211, 238, 0.18);
}

.store-product-tiered .btn-tertiary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 227, 237, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.store-product-tiered .btn[disabled],
.store-product-tiered .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ─── Info modal ─────────────────────────────────────────────────────────
   Opened from the side-rail "?" button. Backdrop blurs the page; the
   panel itself uses the same gradient ring + glassy background as the
   pill nav so it reads as part of the same family. */
.store-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 8, 15, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: store-info-fade 0.2s ease-out;
}
@keyframes store-info-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.store-info-modal {
  position: relative;
  width: min(540px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.25rem 2rem 1.75rem;
  background: linear-gradient(rgba(12, 12, 26, 0.95), rgba(15, 15, 30, 0.95)) padding-box,
              linear-gradient(135deg, rgba(167, 139, 250, 0.5), rgba(34, 211, 238, 0.3) 50%, rgba(217, 70, 239, 0.45)) border-box;
  border: 1px solid transparent;
  border-radius: 1.15rem;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  animation: store-info-slide 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  color: #e2e3ed;
}
@keyframes store-info-slide {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.store-info-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.55rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.store-info-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: rotate(90deg);
}

.store-info-header {
  margin-bottom: 1.5rem;
}
.store-info-header h2 {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  background-image: linear-gradient(90deg, #a78bfa 0%, #22d3ee 50%, #d946ef 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.store-info-header p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(226, 227, 237, 0.6);
  line-height: 1.5;
}

.store-info-section {
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.store-info-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.store-info-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.store-info-section p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(226, 227, 237, 0.85);
  line-height: 1.6;
}
.store-info-section a {
  color: #c4b5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.store-info-section a:hover {
  color: #fff;
}

.store-info-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.65rem 1.1rem;
  background: #5865F2;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 0.65rem;
  box-shadow: 0 16px 32px -12px rgba(88, 101, 242, 0.6);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.store-info-discord:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 22px 40px -12px rgba(88, 101, 242, 0.85);
}

@media (max-width: 480px) {
  .store-info-modal {
    padding: 1.75rem 1.25rem 1.25rem;
  }
}

/* ─── Secondary info trigger under hero tagline ─────────────────────── */
.store-hero-info {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  color: rgba(226, 227, 237, 0.65);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.store-hero-info:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.3);
  color: #fff;
}
.store-hero-info svg {
  opacity: 0.7;
}

/* ─── Basket / checkout page ─────────────────────────────────────────── */
.store-basket {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.store-basket-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.store-basket-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg, #a78bfa 0%, #22d3ee 50%, #d946ef 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.store-basket-sub {
  font-size: 0.95rem;
  color: rgba(226, 227, 237, 0.6);
  margin: 0;
}

.store-basket-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.store-basket-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(12, 12, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.store-basket-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.35), rgba(34, 211, 238, 0.25), transparent);
  pointer-events: none;
}
.store-basket-item:hover {
  border-color: rgba(167, 139, 250, 0.18);
}

.store-basket-item-image {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(167, 139, 250, 0.25));
}
.store-basket-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-basket-item-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
}
.store-basket-item-sub {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(226, 227, 237, 0.6);
  margin-left: 0.4rem;
}
.store-basket-item-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: rgba(226, 227, 237, 0.55);
}
.store-basket-item-meta:empty { display: none; }
.store-basket-item-qty {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  font-weight: 700;
}
.store-basket-item-discount {
  color: rgba(226, 227, 237, 0.4);
}
.store-basket-summary-discount {
  color: #34d399;
  font-weight: 700;
}

.store-basket-item-price {
  text-align: right;
  font-size: 0.8rem;
  color: rgba(226, 227, 237, 0.6);
}
.store-basket-item-price strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
}
.store-basket-item-price span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(226, 227, 237, 0.45);
}

.store-basket-item-remove {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 0.55rem;
  color: rgba(248, 113, 113, 0.85);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.store-basket-item-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #fff;
  transform: rotate(90deg);
}

/* Summary card */
.store-basket-summary {
  background: rgba(12, 12, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.15rem;
  padding: 1.5rem 1.75rem;
}
.store-basket-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: rgba(226, 227, 237, 0.7);
}
.store-basket-summary-total {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.05rem;
  color: #fff;
}
.store-basket-summary-total strong {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.store-basket-checkout-form {
  margin: 1rem 0 0.85rem;
}
.store-basket-checkout {
  width: 100%;
  padding: 1rem 1.25rem !important;
  font-size: 1rem !important;
}
.store-basket-continue-shopping {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(226, 227, 237, 0.5);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}
.store-basket-continue-shopping:hover {
  color: #c4b5fd;
}
.store-basket-secure {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(226, 227, 237, 0.4);
  line-height: 1.5;
}

/* Empty state */
.store-basket-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(226, 227, 237, 0.55);
}
.store-basket-empty svg {
  margin: 0 auto 1.25rem;
  color: rgba(167, 139, 250, 0.5);
}
.store-basket-empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.store-basket-empty p {
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
}
.store-basket-empty-cta {
  display: inline-flex !important;
  width: auto !important;
  padding: 0.85rem 2rem !important;
}

/* Responsive — stack on phones */
@media (max-width: 560px) {
  .store-basket-item {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 0.85rem 1rem;
  }
  .store-basket-item-image { width: 56px; height: 56px; }
  .store-basket-item-price {
    grid-column: 2;
    text-align: left;
  }
  .store-basket-item-remove {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
  }
}

/* ─── Shared button styling — applies inside .site-content AND inside
   .popup-content (Tebex injects basket into a `.popup-content` element
   detached from .site-content, so we need the popup scope too). The
   `:where()` keeps specificity low so individual scopes (e.g. card Buy
   buttons inside .store-product-tiered) can still override. */
:where(.site-content, .popup-content, body) button.btn,
:where(.site-content, .popup-content, body) a.btn,
:where(.site-content, .popup-content, body) input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 0.7rem;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
:where(.site-content, .popup-content, body) .btn.wide {
  width: 100%;
}
:where(.site-content, .popup-content, body) .btn-primary {
  background: linear-gradient(120deg, #a78bfa 0%, #8b5cf6 50%, #d946ef 100%) !important;
  color: #0c0c16 !important;
  /* Outer glow + subtle inner top highlight makes the button feel
     extruded and tappable, like real raised UI. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 30px -12px rgba(167, 139, 250, 0.65);
}
:where(.site-content, .popup-content, body) .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 18px 38px -12px rgba(167, 139, 250, 0.85);
}
:where(.site-content, .popup-content, body) .btn-secondary {
  background: rgba(34, 211, 238, 0.12);
  color: #67e8f9 !important;
  border: 1px solid rgba(34, 211, 238, 0.4);
}
:where(.site-content, .popup-content, body) .btn-secondary:hover {
  background: rgba(34, 211, 238, 0.18);
}
:where(.site-content, .popup-content, body) .btn-tertiary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 227, 237, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
:where(.site-content, .popup-content, body) .btn[disabled],
:where(.site-content, .popup-content, body) .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ─── Username step ──────────────────────────────────────────────────── */
.store-username {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.store-username-card {
  position: relative;
  padding: 2.5rem 2.25rem;
  background: rgba(12, 12, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.15rem;
  overflow: hidden;
  text-align: center;
}
.store-username-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.55), rgba(34, 211, 238, 0.45), transparent);
  pointer-events: none;
}

.store-username-icon {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(34, 211, 238, 0.16));
  color: #c4b5fd;
}

.store-username-title {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.store-username-sub {
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(226, 227, 237, 0.6);
}

.store-username-form {
  text-align: left;
}
.store-username-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(226, 227, 237, 0.55);
  margin-bottom: 0.5rem;
}

.store-username-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}
.store-username-input-prefix {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(226, 227, 237, 0.4);
  pointer-events: none;
}

.store-username-input {
  width: 100%;
  height: 48px;
  padding: 0 1rem 0 2.5rem;
  background: rgba(21, 21, 37, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  color: #e2e3ed;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.store-username-input::placeholder {
  color: rgba(226, 227, 237, 0.35);
}
.store-username-input:focus {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(21, 21, 37, 0.85);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3);
}

.store-username-submit {
  width: 100%;
  padding: 0.95rem 1.25rem !important;
  font-size: 0.95rem !important;
}

.store-username-help {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(226, 227, 237, 0.4);
}

/* ─── Footnote ─── */
.store-footnote {
  margin: 3rem auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(226, 227, 237, 0.4);
  max-width: 50ch;
  letter-spacing: 0.01em;
}

/* ─── No-packages fallback ─── */
.store-category-tiered > p {
  text-align: center;
  color: rgba(226, 227, 237, 0.5);
  padding: 3rem 0;
}

/* ─── Responsive ─── */
/* 3 cols (default) → 2 cols at ≤900px → 1 col at ≤560px. The featured
   card always spans `1 / -1`, so it stays full-width at every breakpoint. */
@media (max-width: 900px) {
  .store-products-tiered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
@media (max-width: 560px) {
  .site-content.site-content-widgets {
    padding-top: 5.5rem;
  }
  .store-products-tiered {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Featured collapses to a vertical card on small screens — same as the
     other cards but slightly larger image. */
  .store-product-featured {
    flex-direction: column !important;
    gap: 1rem;
    padding: 2.25rem 1.75rem 1.75rem !important;
  }
  .store-product-featured .image,
  .store-product-featured img.image {
    max-width: 144px;
    margin: 0 auto 1rem;
  }
  .store-product-featured .store-product-body {
    align-items: center;
    text-align: center;
  }
  .store-product-featured .product-title { flex-direction: column; }
  .store-product-featured .actions,
  .store-product-featured .product-actions { flex-direction: column; gap: 0.85rem; }
  .store-product-featured .price { align-items: center; }
  .store-product-featured .btn { width: 100%; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .store-product-tiered,
  .store-product-tiered::after,
  .store-product-tiered .btn,
  .store-cart-pill {
    transition: none !important;
  }
}