@font-face {
  font-family: 'Matcha Style';
  src: url('../fonts/matcha-style.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Custom Variables */
:root {
  --background: #030405;
  --foreground: #ffffff;
  --primary: #dddddd;
  --primary-rgb: 222, 222, 222;
  --ice: #c4c4c4;
  --ice-rgb: 195, 195, 195;
  --steel: #898989;
  --panel: #090b0f;
  --panel-soft: #10141a;
  --line: rgba(221, 221, 221, 0.14);
  --metal-1: #f8fafc;
  --metal-2: #afafaf;
  --metal-3: #545454;
  --nav-active: #e5b95c;
}

/* Cartoon glove, soft trailing light and gold dust. */
.dk-cursor-layer,
.dk-cursor-layer * { pointer-events: none !important; }
.dk-cursor-layer { position: fixed; inset: 0; z-index: 2147483646; overflow: hidden; opacity: 0; contain: layout style paint; transition: opacity .12s ease; }
.dk-cursor-spotlight { position: absolute; top: 0; left: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,219,151,.17) 0%, rgba(255,215,136,.075) 28%, rgba(255,210,125,.025) 48%, transparent 70%); opacity: .7; will-change: transform; transition: opacity .25s ease; }
.dk-cursor-aura { position: absolute; top: 0; left: 0; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; background: radial-gradient(circle, rgba(255,241,205,.2), rgba(255,216,143,.06) 42%, transparent 70%); opacity: .7; will-change: transform; transition: opacity .2s ease; }
.dk-cursor-hand { position: absolute; top: 0; left: 0; width: 36px; height: 44px; will-change: transform; }
.dk-cursor-hand img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 53% 4.7%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.65)) drop-shadow(0 0 4px rgba(255,226,166,.45)); transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), filter .2s ease; }
.dk-cursor-layer.is-hovering .dk-cursor-hand img { transform: rotate(-6deg) scale(1.12); filter: drop-shadow(0 2px 2px rgba(0,0,0,.65)) drop-shadow(0 0 7px rgba(255,218,147,.7)); }
.dk-cursor-layer.is-hovering .dk-cursor-spotlight,
.dk-cursor-layer.is-hovering .dk-cursor-aura,
.dk-cursor-layer.is-pressed .dk-cursor-spotlight,
.dk-cursor-layer.is-dragging .dk-cursor-aura { opacity: 1; }
.dk-cursor-layer.is-pressed .dk-cursor-hand img { transform: rotate(3deg) scale(.92, .84); }
.dk-cursor-layer.is-dragging .dk-cursor-hand img { transform: rotate(-12deg) scale(.96); }
.dk-cursor-spark,
.dk-cursor-ripple { position: absolute; top: 0; left: 0; }
.dk-cursor-spark { width: 3px; height: 3px; border-radius: 50%; background: #ffe9bd; box-shadow: 0 0 7px rgba(255,218,145,.8); }
.dk-cursor-spark.is-dragging { width: 9px; height: 9px; border-radius: 0; background: linear-gradient(135deg, #fff, #efbe63); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.dk-cursor-ripple { width: 20px; height: 20px; border: 1px solid rgba(255,229,178,.85); border-radius: 50%; box-shadow: 0 0 14px rgba(255,212,135,.28); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.dk-cursor-active,
  html.dk-cursor-active * { cursor: none !important; }
  html.dk-cursor-active .dk-cursor-layer { opacity: 1; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .dk-cursor-layer { display: none; }
}

/* Pending products remain visibly inactive, including on hover. */
[data-buy-id]:disabled {
  background-color: #1c1c1c;
  color: #c3c3c3;
  cursor: not-allowed;
}

[data-buy-id]:disabled:hover {
  background-color: #303030;
  color: #e6e6e6;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(var(--ice-rgb), 0.13), transparent 28rem),
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.08), transparent 24rem),
    linear-gradient(135deg, #030405 0%, #070a0f 42%, #020203 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
  opacity: 0.18;
}

[data-i18n="hero.title"] {
  white-space: pre-line;
}

.dk-theme .text-primary {
  color: var(--primary) !important;
}

.dk-theme .bg-primary {
  background: linear-gradient(135deg, var(--metal-1) 0%, var(--metal-2) 48%, var(--metal-3) 100%) !important;
}

.dk-theme .border-primary {
  border-color: rgba(var(--primary-rgb), 0.72) !important;
}

.dk-theme .ring-primary\/30 {
  --tw-ring-color: rgba(var(--primary-rgb), 0.3) !important;
}

.dk-theme a.bg-primary,
.dk-theme button.bg-primary,
.dk-theme .bg-primary.text-white,
.dk-theme .group-hover\:bg-primary:hover {
  color: #050608 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,0.75);
}

.site-nav {
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.92), rgba(3, 4, 5, 0.78)) !important;
  border-color: var(--line) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.brand-logo img,
.site-footer img[alt="DK Scripts"] {
  filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.32));
}

.brand-logo:hover img {
  animation: logo-glint 1.8s ease both;
}

.nav-category-item {
  position: relative;
  padding: 8px 0;
}

.nav-category-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 2px;
  color: #d1d5db;
  font-family: 'Matcha Style', 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: color .22s ease;
}

.nav-category-icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--nav-icon) center / contain no-repeat; mask: var(--nav-icon) center / contain no-repeat; opacity: .8; transition: opacity .2s ease; }
.nav-category-link:hover .nav-category-icon,
.nav-category-link.active .nav-category-icon { opacity: 1; }
.site-cart-trigger { display: grid; place-items: center; min-width: 40px; min-height: 40px; }
.site-cart-icon { display: block; width: 26px; height: 26px; object-fit: contain; opacity: .85; transition: opacity .2s ease; }
.site-cart-trigger:hover .site-cart-icon { opacity: 1; }

@media (min-width: 768px) and (max-width: 1023px) {
  .nav-category-menu { gap: 16px; }
  .nav-category-link { gap: 4px; font-size: 17px; }
  .nav-category-icon { flex-basis: 20px; width: 20px; height: 20px; }
  .nav-actions { gap: 10px; }
}

.nav-category-link:hover {
  color: #fff;
}
.nav-category-link.active { color: var(--nav-active); text-shadow: 0 0 14px rgba(229,185,92,.16); }

.nav-category-link[data-nav-submenu-trigger] {
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.nav-category-link[data-nav-submenu-trigger]:hover,
.nav-category-link[data-nav-submenu-trigger].active,
.nav-category-item.open .nav-category-link[data-nav-submenu-trigger] {
  border-color: rgba(var(--primary-rgb), .36);
  background: rgba(255,255,255,.055);
}

.nav-subcategory-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 60;
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 7px;
  border: 1px solid rgba(var(--primary-rgb), .18);
  border-radius: 10px;
  background: rgba(8, 10, 13, .98);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .18s ease, transform .18s ease;
}

.nav-category-item:hover .nav-subcategory-menu,
.nav-category-item:focus-within .nav-subcategory-menu,
.nav-category-item.open .nav-subcategory-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-subcategory-menu a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #dddddd;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.055);
}

.nav-subcategory-menu a:hover,
.nav-subcategory-menu a.active {
  color: #050608;
  background: linear-gradient(135deg, var(--metal-1), var(--metal-2));
}

.language-switch {
  position: relative;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.language-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 86px;
  padding: 6px;
  border: 1px solid rgba(var(--primary-rgb), .18);
  border-radius: 10px;
  background: rgba(8, 10, 13, .98);
  box-shadow: 0 18px 44px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}

.language-menu button,
.language-chip {
  width: 100%;
  border: 0;
  outline: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: #949494;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.language-menu button:hover,
.language-menu button.active,
.language-chip.active {
  color: #050608;
  background: linear-gradient(135deg, var(--metal-1), var(--metal-2));
}

.language-switch.mobile {
  justify-content: space-between;
}

.language-switch.mobile .language-chip {
  width: auto;
  min-width: 44px;
  text-align: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}

.mobile-menu-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}

.mobile-menu-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;
  z-index: 95;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  border-bottom: 1px solid rgba(var(--primary-rgb), .14);
  background:
    linear-gradient(180deg, rgba(9, 12, 16, .98), rgba(3, 4, 6, .98));
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
}

.mobile-menu-link,
.mobile-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #dddddd;
  font-size: 14px;
  font-weight: 900;
  padding: 0 14px;
}

.mobile-menu-link.active,
.mobile-menu-link:hover,
.mobile-submenu-link.active,
.mobile-submenu-link:hover {
  color: #050608;
  background: linear-gradient(135deg, var(--metal-1), var(--metal-2));
}

.mobile-menu-link.nav-category-mobile { justify-content: flex-start; gap: 10px; font-family: 'Matcha Style', 'Poppins', sans-serif; font-size: 20px; font-weight: 400; line-height: 1; }
.mobile-menu-link.nav-category-mobile.active { color: var(--nav-active); background: rgba(229,185,92,.08); border-color: rgba(229,185,92,.28); }
.nav-category-mobile.active .nav-category-icon,
.nav-category-mobile:hover .nav-category-icon { opacity: 1; }

.mobile-submenu-list {
  display: grid;
  gap: 8px;
  margin: -2px 0 6px 14px;
  padding-left: 12px;
  border-left: 1px solid rgba(var(--primary-rgb), .22);
}

.mobile-submenu-link {
  min-height: 44px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

#desktop-session-container,
.session-login-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.music-hud {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 238px;
  flex: 0 0 auto;
  height: 42px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(8, 10, 13, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
}

.music-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  color: #dddddd;
  background: rgba(255,255,255,.045);
}

.music-btn:hover {
  color: #050608;
  background: linear-gradient(135deg, var(--metal-1), var(--metal-2));
}

.music-play {
  color: #050608;
  background: linear-gradient(135deg, var(--metal-1), var(--metal-2));
}

.music-meta {
  min-width: 66px;
  max-width: 74px;
  display: grid;
  line-height: 1.05;
}

.music-meta span {
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-meta small {
  margin-top: 3px;
  color: #898989;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.music-volume {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 62px;
  color: #898989;
}

.music-volume input {
  width: 48px;
  height: 4px;
  accent-color: var(--primary);
  cursor: pointer;
}

@media (max-width: 640px) {
  .site-nav {
    z-index: 90;
  }

  #desktop-session-container {
    display: none;
  }

  .site-nav .brand-logo .w-14 {
    width: 48px;
    height: 48px;
  }

  .site-nav .flex.items-center.justify-between.h-16 {
    gap: 10px;
  }

  .music-hud {
    top: auto !important;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    z-index: 60;
    max-width: 360px;
    margin: 0 auto;
    min-width: 0;
    justify-content: center;
  }

  .music-meta {
    min-width: 74px;
    max-width: 96px;
  }

  .music-volume {
    min-width: 58px;
  }

  .music-volume input {
    width: 44px;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #030405;
}

::-webkit-scrollbar-thumb {
  background: #1f1f1f;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 7s cubic-bezier(.45,0,.25,1) infinite;
}

@keyframes logo-glint {
  0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), 0.28)); }
  45% { transform: scale(1.07) rotate(-2deg); filter: drop-shadow(0 0 18px rgba(var(--primary-rgb), 0.65)) drop-shadow(0 0 32px rgba(var(--ice-rgb), 0.22)); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.38)); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

main > section:first-child {
  animation: fade-up .55s ease both;
}

.product-card {
  transition: transform .35s ease, filter .35s ease;
}


.hero-product::before,
.home-script-card::before,
.feature-card::before {
  display: none;
}

.hero-product:hover::before,
.home-script-card:hover::before,
.feature-card:hover::before {
  transform: none;
}

.trust-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(9, 11, 15, .74);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.trust-pill p {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.trust-pill span {
  color: #898989;
  font-size: 11px;
  font-weight: 600;
}

.catalog-search {
  height: 40px;
}

.catalog-search-icon,
.catalog-search svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 2;
  color: #6f6f6f;
  pointer-events: none;
  transform: translateY(-50%) !important;
}

.catalog-search input {
  height: 40px;
  line-height: 40px;
}

.feature-card,
.home-script-card {
  position: relative;
  overflow: hidden;
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb), .1), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.feature-card {
  min-height: 260px;
  padding: 28px;
}

.feature-card:hover,
.home-script-card:hover {
  border-color: rgba(var(--primary-rgb), .42);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
}

.feature-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(var(--primary-rgb), .09);
  border: 1px solid rgba(var(--primary-rgb), .16);
  margin-bottom: 24px;
}

.feature-card h3 {
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
  margin: 0 0 12px;
}

.feature-card p {
  color: #949494;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.product-card > a {
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--primary-rgb), .08), transparent 14rem),
    var(--panel) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.product-card > a:hover {
  border-color: rgba(var(--primary-rgb), .35) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

/* Glassmorphism utility */
.glass {
  background: rgba(9, 11, 15, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}

.dk-theme .bg-\[\#0a0a0a\],
.dk-theme .bg-\[\#050505\],
.dk-theme .bg-\[\#070707\],
.dk-theme .bg-\[\#111\] {
  background-color: var(--panel) !important;
}

.dk-theme .border-white\/5,
.dk-theme .border-white\/10 {
  border-color: var(--line) !important;
}

.dk-theme input,
.dk-theme textarea {
  background: rgba(8, 10, 13, 0.92) !important;
}

.dk-theme .rounded-2xl,
.dk-theme .rounded-3xl {
  border-radius: 14px !important;
}

.dk-theme a,
.dk-theme button {
  transition-duration: .28s !important;
}


.site-footer {
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.98), rgba(2, 3, 4, 1)) !important;
  border-color: var(--line) !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Marquee / Infinite Slider animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 60s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* Customer feedback and community */
.community-container { max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.reviews-section { padding: 112px 0; background: #08090c; }
.reviews-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 42px; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; color: #b5b5b5; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.section-kicker::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.reviews-heading h2, .discord-panel h2 { max-width: 680px; margin-top: 18px; color: #f6f7fa; font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.reviews-heading > p { max-width: 280px; color: #999999; font-size: 14px; line-height: 1.7; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.review-card { min-width: 0; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 26px; background: #101217; border: 1px solid rgba(224, 224, 224, .08); border-radius: 16px; }
.review-card blockquote { color: #e3e6ec; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.review-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: baseline; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.07); }
.review-author { color: #fff; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.review-meta time { color: #8c8c8c; font-size: 12px; white-space: nowrap; }
.more-reviews { margin-top: 18px; }
.more-reviews summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; margin: 0 auto; padding: 13px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #e0e0e0; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.more-reviews summary::-webkit-details-marker { display: none; }
.more-reviews summary:hover { background: rgba(255,255,255,.06); }
.more-reviews[open] summary span:last-child { transform: rotate(45deg); }
.more-reviews-grid { margin-top: 18px; }
.discord-community { padding: 32px 0 112px; background: #08090c; }
.discord-panel { position: relative; min-height: 370px; display: grid; grid-template-columns: 1.3fr .7fr; overflow: hidden; border: 1px solid rgba(162, 162, 162, .22); border-radius: 24px; background: radial-gradient(ellipse at 88% 35%, rgba(108, 108, 108, .23), transparent 48%), #121212; }
.discord-panel-copy { z-index: 1; padding: 60px; }
.discord-kicker { color: #b5b5b5; }
.discord-panel h2 { max-width: 580px; }
.discord-panel-copy > p { max-width: 560px; margin-top: 20px; color: #b5b5b5; font-size: 15px; line-height: 1.8; }
.discord-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.discord-join { display: inline-flex; align-items: center; gap: 12px; padding: 15px 20px; border-radius: 10px; background: #6c6c6c; color: #fff; font-size: 14px; font-weight: 700; transition: background .2s, transform .2s; }
.discord-join:hover { background: #808080; }
.discord-join svg { width: 17px; height: 17px; }
.discord-support { color: #c8c8c8; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.discord-support:hover { color: #fff; }
.discord-visual { position: relative; display: grid; place-items: center; min-height: 300px; }
.discord-orbit { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(180, 180, 180, .16); border-radius: 50%; }
.discord-orbit-two { width: 350px; height: 350px; border-color: rgba(180, 180, 180, .08); }
.discord-symbol { display: grid; place-items: center; width: 154px; height: 154px; border: 1px solid rgba(203, 203, 203, .25); border-radius: 38px; background: linear-gradient(145deg, #868686, #545454); color: white; box-shadow: 0 20px 70px rgba(69, 69, 69, .3); transform: rotate(-8deg); }
.discord-symbol svg { width: 82px; height: auto; }
@media (max-width: 800px) { .reviews-heading { align-items: start; flex-direction: column; gap: 16px; } .reviews-heading > p { max-width: 520px; } .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .discord-panel-copy { padding: 42px; } .discord-panel { grid-template-columns: 1fr .6fr; } .discord-symbol { width: 115px; height: 115px; border-radius: 30px; } .discord-symbol svg { width: 62px; } }
@media (max-width: 600px) { .community-container { padding: 0 18px; } .reviews-section { padding: 76px 0; } .reviews-grid { grid-template-columns: 1fr; } .review-card { min-height: 145px; padding: 22px; } .discord-community { padding: 0 0 76px; } .discord-panel { grid-template-columns: 1fr; } .discord-panel-copy { padding: 36px 26px 10px; } .discord-visual { min-height: 235px; } .discord-orbit { width: 190px; height: 190px; } .discord-orbit-two { width: 260px; height: 260px; } }


/* Scrollable reviews and compact footer */
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #4f4f4f transparent; padding-bottom: 8px; }
.reviews-track:focus-visible { outline: 2px solid #b5b5b5; outline-offset: 4px; border-radius: 16px; }
.reviews-track .review-card { scroll-snap-align: start; }
.reviews-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.reviews-hint { color: #8c8c8c; font-size: 12px; }
.reviews-arrows { display: flex; gap: 8px; }
.reviews-arrows button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #e8e8e8; background: #13161c; font-size: 20px; transition: background .2s, opacity .2s; }
.reviews-arrows button:hover:not(:disabled) { background: #303030; }
.reviews-arrows button:disabled { opacity: .35; cursor: not-allowed; }
.compact-footer { padding: 24px 0 18px; }
.compact-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.compact-footer-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: white; font-size: 14px; font-weight: 700; }
.compact-footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.compact-footer-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px 20px; }
.compact-footer-nav a { color: #a2a2a2; font-size: 12px; }
.compact-footer-nav a:hover { color: white; }
.compact-footer-legal { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); color: #727272; font-size: 11px; }
@media (max-width: 800px) { .reviews-track { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (max-width: 600px) { .reviews-track { grid-auto-columns: 88%; } .compact-footer-main { align-items: flex-start; flex-direction: column; gap: 16px; } .compact-footer-nav { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .reviews-track { scroll-behavior: auto; } }


/* Two continuous review rows. */
.reviews-carousel { display: grid; gap: 14px; }
.reviews-all-wrap { display: flex; justify-content: center; margin-top: 26px; }
.reviews-all-link { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: #13161c; color: #e8e8e8; font-size: 13px; font-weight: 600; transition: background .2s; }
.reviews-all-link:hover { background: #303030; }
.reviews-all-link svg { width: 16px; height: 16px; }
.review-marquee { overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.review-marquee-track { display: flex; width: max-content; animation: review-marquee-left 65s linear infinite; }
.review-marquee-reverse { animation-name: review-marquee-right; animation-duration: 70s; }
.review-marquee-group { display: flex; gap: 14px; padding-right: 14px; }
.review-marquee-group .review-card { flex: 0 0 360px; width: 360px; height: 220px; }
.review-marquee:hover .review-marquee-track, .review-marquee:focus-within .review-marquee-track, .reviews-carousel.is-paused .review-marquee-track { animation-play-state: paused; }
.reviews-carousel.is-paused .review-marquee { overflow-x: auto; }
@keyframes review-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes review-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.discord-community-card { display: block; min-height: 0; padding: 36px; border-radius: 18px; border-color: rgba(255,255,255,.13); background: radial-gradient(ellipse at 60% 50%, rgba(103, 103, 103, .11), transparent 57%), #101010; }
.discord-card-content { display: flex; align-items: center; gap: 24px; }
.discord-server-logo { width: 80px; height: 80px; flex: 0 0 80px; object-fit: contain; border-radius: 16px; background: #1c1c1c; padding: 6px; }
.discord-card-text { flex: 1; min-width: 0; }
.discord-label { color: #b6b6b6; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.discord-community-card h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.035em; margin: 8px 0; }
.discord-card-text p { color: #a3a3a3; font-size: 13px; line-height: 1.6; }
.discord-counts { display: flex; gap: 28px; flex: 0 0 auto; }
.discord-counts[hidden], .discord-counts-note[hidden] { display: none; }
.discord-counts div { display: flex; flex-direction: column; gap: 2px; }
.discord-counts strong { color: #f5f6fa; font-size: 25px; font-weight: 800; }
.discord-counts span { color: #aeaeae; font-size: 11px; white-space: nowrap; }
.discord-counts i { display: inline-block; width: 6px; height: 6px; background: #63d2a1; border-radius: 50%; vertical-align: middle; }
.discord-community-card .discord-join { flex: 0 0 auto; background: linear-gradient(135deg, #363636, #212121); border: 1px solid #6f6f6f; transition: box-shadow .2s ease, border-color .2s ease; }
.discord-community-card .discord-join:hover { background: linear-gradient(135deg, #363636, #212121); border-color: #a3a3a3; box-shadow: inset 0 0 0 40px rgba(255,255,255,.08); }
.discord-counts-note { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); color: #989898; font-size: 11px; }
@media (max-width: 800px) { .discord-card-content { flex-wrap: wrap; } .discord-card-text { flex-basis: calc(100% - 104px); } .discord-counts { margin-left: 104px; } }
@media (max-width: 600px) { .review-marquee-group .review-card { width: min(310px, 80vw); flex-basis: min(310px, 80vw); } .discord-community-card { padding: 24px; } .discord-card-content { gap: 16px; } .discord-server-logo { width: 60px; height: 60px; flex-basis: 60px; } .discord-card-text { flex-basis: calc(100% - 76px); } .discord-counts { margin-left: 0; } .discord-community-card .discord-join { margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { .review-marquee { overflow-x: auto; } .review-marquee-track { animation: none; } .review-marquee-group[aria-hidden="true"] { display: none; } }


/* DK Store homepage introduction */
.store-hero { position: relative; overflow: hidden; padding: 150px 24px 100px; background: radial-gradient(ellipse at 76% 48%, rgba(116, 116, 116, .16), transparent 34%), #06080b; }
.store-hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 75px; }
.store-hero-copy { position: relative; z-index: 1; }
.store-hero-eyebrow { display: flex; align-items: center; gap: 11px; color: #bfbfbf; font-size: 11px; font-weight: 700; letter-spacing: .19em; }
.store-hero-eyebrow > span:first-child { width: 28px; height: 1px; background: #aeaeae; }
.store-hero-separator { color: #646464; }
.store-hero h1 { margin-top: 24px; max-width: 700px; color: #f8f9fb; font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.04; }
.store-hero-description { max-width: 580px; margin-top: 25px; color: #a9a9a9; font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.8; }
.store-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; margin-top: 34px; padding: 16px 22px; border-radius: 12px; background: #eaeaea; color: #141414; font-size: 14px; font-weight: 700; transition: background .2s, transform .2s; }
.store-hero-cta:hover { background: #fff; }
.store-hero-cta svg { width: 18px; height: 18px; }
.store-hero-categories { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 48px; }
.store-hero-categories span { padding: 8px 12px; border: 1px solid rgba(221, 221, 221, .12); border-radius: 8px; color: #b9b9b9; background: rgba(255,255,255,.025); font-size: 11px; font-weight: 600; }
.store-hero-art { position: relative; padding: 22px; }
.store-art-frame { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.08; max-height: 480px; overflow: hidden; padding: 23px; border: 1px solid rgba(221, 221, 221, .17); border-radius: 20px; background: linear-gradient(145deg, #1a1a1a 0%, #0b0e13 55%, #161616 100%); box-shadow: 0 32px 90px rgba(0,0,0,.32); }
.store-art-frame::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent); }
.store-art-glow { position: absolute; width: 65%; aspect-ratio: 1; top: 15%; left: 17%; border-radius: 50%; background: rgba(185, 185, 185, .13); filter: blur(65px); }
.store-art-top, .store-art-bottom { z-index: 1; display: flex; justify-content: space-between; gap: 12px; color: #989898; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.store-art-center { z-index: 1; display: grid; justify-items: center; gap: 8px; }
.store-art-center img { width: min(60%, 250px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 24px rgba(217, 217, 217, .23)); }
.store-art-center span { color: #dadada; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.store-art-tag { position: absolute; z-index: 2; padding: 10px 13px; border: 1px solid rgba(221, 221, 221, .16); border-radius: 8px; background: #1a1a1a; color: #d3d3d3; box-shadow: 0 8px 30px rgba(0,0,0,.25); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.store-art-tag-one { top: 5%; right: 0; }
.store-art-tag-two { bottom: 8%; left: 0; }
@media (max-width: 900px) { .store-hero-inner { gap: 28px; } .store-hero-art { padding: 14px; } .store-art-top, .store-art-bottom { font-size: 8px; } }
@media (max-width: 700px) { .store-hero { padding: 120px 20px 70px; } .store-hero-inner { grid-template-columns: 1fr; gap: 32px; } .store-hero h1 { font-size: clamp(2.65rem, 11vw, 4.2rem); } .store-hero-categories { margin-top: 30px; } .store-hero-art { max-width: 420px; width: 100%; margin: 0 auto; } .store-art-frame { max-height: 350px; } }

/* Centered text-only homepage banner */
.store-hero-inner { display: flex; justify-content: center; text-align: center; }
.store-hero-copy { width: 100%; max-width: 850px; }
.store-hero-eyebrow, .store-hero-categories { justify-content: center; }
.store-hero h1, .store-hero-description { margin-left: auto; margin-right: auto; }

/* Simple centered heading for the review carousel. */
.reviews-heading { justify-content: center; text-align: center; margin-bottom: 38px; }
.reviews-heading h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3rem); }
@media (max-width: 800px) { .reviews-heading { align-items: center; } }


/* Shared background across the storefront and account pages. */
body.dk-theme {
  background-color: #07090d;
  background-image:
    linear-gradient(rgba(205, 205, 205, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205, 205, 205, .025) 1px, transparent 1px),
    radial-gradient(ellipse 65% 900px at 50% 0%, rgba(183, 183, 183, .19) 0%, rgba(127, 127, 127, .10) 35%, transparent 76%),
    linear-gradient(180deg, #080b10 0%, #0f0f0f 40%, #07090d 100%);
  background-size: 80px 80px, 80px 80px, 100% 100%, 100% 100%;
  background-attachment: scroll;
}
body.dk-theme::before { display: none; }
.home-page { isolation: isolate; }
.home-page .store-hero,
.home-page .home-featured,
.home-page .reviews-section,
.home-page .discord-community { background: transparent; }
.home-page .store-hero-inner { position: relative; z-index: 1; }
.home-page .reviews-section { position: relative; }
.home-page .reviews-section .community-container,
.home-page .discord-community .community-container { position: relative; z-index: 1; }
@media (max-width: 700px) {
  body.dk-theme { background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%; }
}


.list-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.list-page-status { color: #a2a2a2; font-size: 12px; }
.list-page-buttons { display: flex; gap: 8px; }
.list-page-buttons a, .list-page-buttons button { display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #e5e7eb; background: rgba(255,255,255,.04); font-size: 12px; font-weight: 600; }
.list-page-buttons a:hover, .list-page-buttons button:hover { background: rgba(255,255,255,.1); }

.visibility-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border: 1px solid; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.visibility-toggle.is-public { color: #86efac; background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.28); }
.visibility-toggle.is-public:hover { background: rgba(34,197,94,.22); }
.visibility-toggle.is-private { color: #fca5a5; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.28); }
.visibility-toggle.is-private:hover { background: rgba(239,68,68,.22); }

/* Product list selection control */
.featured-toggle { appearance: none; display: inline-grid; place-content: center; width: 23px; height: 23px; margin: 0; vertical-align: middle; border: 1px solid #636363; border-radius: 7px; background: #1c1c1c; cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s; }
.featured-toggle:hover { border-color: #c9c9c9; background: #2a2a2a; }
.featured-toggle:checked { background: #dfdfdf; border-color: #dfdfdf; }
.featured-toggle:checked::after { content: ''; width: 7px; height: 11px; border: solid #171717; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.featured-toggle:focus-visible { outline: 2px solid #b7b7b7; outline-offset: 3px; }


/* Product upload areas */
.upload-section { padding: 28px; }
.upload-heading h2 { color: #f6f7f9; font-size: 20px; font-weight: 700; }
.upload-heading p { margin-top: 8px; color: #a3a3a3; font-size: 14px; line-height: 1.6; }
.upload-current { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #9c9c9c; font-size: 13px; }
.upload-current svg { width: 17px; height: 17px; color: #bababa; }
.upload-current strong { color: #eaeaea; font-weight: 600; }
.upload-build-status { margin-top: 14px; color: #cbd5e1; font-size: 13px; overflow-wrap: anywhere; }
.upload-build-status[data-state="failed"] { color: #fda4af; }
.upload-build-status[data-state="done"] { color: #86efac; }
.upload-form { margin-top: 22px; }
.upload-progress { margin-top: 18px; }
.upload-progress[hidden] { display: none; }
.upload-progress-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #e5e7eb; font-size: 12px; font-weight: 600; }
.upload-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.upload-progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #dedede; transition: width .18s ease; }
.upload-progress[data-state="processing"] .upload-progress-track > span { width: 35%; animation: dk-upload-processing 1.5s ease-in-out infinite alternate; }
.upload-progress[data-state="failed"] .upload-progress-track > span { background: #f87171; }
.upload-progress[data-state="done"] .upload-progress-track > span { width: 100%; background: #4ade80; animation: none; }
@keyframes dk-upload-processing { from { transform: translateX(-90%); } to { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .upload-progress[data-state="processing"] .upload-progress-track > span { animation: none; width: 100%; } }
.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 185px; padding: 24px; text-align: center; border: 1px dashed #555555; border-radius: 14px; background: rgba(174, 174, 174, .035); cursor: pointer; transition: border-color .2s, background .2s; }
.drop-zone:hover, .drop-zone.is-dragging, .drop-zone:focus-within { border-color: #b6b6b6; background: rgba(174, 174, 174, .08); }
.drop-zone:focus-within { outline: 2px solid #b7b7b7; outline-offset: 3px; }
.drop-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border: 1px solid rgba(221, 221, 221, .12); border-radius: 12px; background: #212121; color: #cdcdcd; }
.drop-icon svg { width: 21px; height: 21px; }
.drop-title { color: #cdcdcd; font-size: 13px; line-height: 1.6; }
.drop-title strong { color: #f2f6fb; font-weight: 700; }
.drop-hint, .upload-limit { color: #8d8d8d; font-size: 12px; line-height: 1.6; }
.upload-selection { margin-top: 12px; color: #dadada; font-size: 13px; overflow-wrap: anywhere; }
.upload-selection:empty { display: none; }
.upload-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 12px 17px; border: 1px solid #676767; border-radius: 10px; background: #2d2d2d; color: #f3f6fa; font-size: 13px; font-weight: 700; transition: background .2s; }
.upload-button:hover { background: #3f3f3f; }
.upload-button svg { width: 16px; height: 16px; }
.upload-limit { margin-top: 14px; }
.gallery-current { margin-top: 24px; }
.gallery-label { margin-bottom: 12px; color: #aeaeae; font-size: 12px; font-weight: 600; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; }
.selected-gallery:not(:empty) { margin-top: 16px; }
.gallery-item { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #161616; }
.gallery-item img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #1b1b1b; }
.gallery-item figcaption { padding: 9px 10px 4px; color: #eaeaea; font-size: 11px; font-weight: 700; }
.gallery-item:not(.gallery-selected-item) figcaption { padding-bottom: 10px; }
.gallery-file-name { display: block; overflow: hidden; padding: 0 10px; color: #a5a5a5; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.gallery-item-actions { display: flex; gap: 6px; padding: 9px 10px 10px; }
.gallery-item-actions button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #d2d2d2; }
.gallery-item-actions button:hover { background: #343434; }
.gallery-item-actions svg { width: 14px; height: 14px; }
@media (max-width: 600px) { .upload-section { padding: 20px; } .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Featured product selector */
.feature-choice { position: relative; display: inline-flex; cursor: pointer; vertical-align: middle; }
.feature-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.feature-choice-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(193, 193, 193, .12); border-radius: 11px; color: #888888; background: rgba(162, 162, 162, .06); transition: color .2s, background .2s, border-color .2s; }
.feature-choice-icon svg { width: 19px; height: 19px; }
.feature-choice:hover .feature-choice-icon { color: #e1e1e1; border-color: rgba(205, 205, 205, .3); background: rgba(162, 162, 162, .12); }
.feature-choice input:checked + .feature-choice-icon { color: #e7ca80; background: rgba(210,175,93,.14); border-color: rgba(229,196,118,.35); }
.feature-choice input:checked + .feature-choice-icon svg { fill: currentColor; }
.feature-choice input:focus-visible + .feature-choice-icon { outline: 2px solid #c4c4c4; outline-offset: 3px; }


/* Navbar blends into the page and becomes defined while scrolling. */
.site-nav {
  isolation: isolate;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  backdrop-filter: none !important;
  transition: box-shadow .3s ease;
}
.site-nav::before, .site-nav::after {
  content: '';
  position: absolute;
  inset: 0 0 -16px;
  z-index: -1;
  pointer-events: none;
}
.site-nav::before { background: linear-gradient(180deg, rgba(4,6,9,.88) 0%, rgba(4,6,9,.55) 38%, rgba(4,6,9,.18) 75%, transparent 100%); }
.site-nav::after { background: linear-gradient(180deg, rgba(4,6,9,.96) 0%, rgba(4,6,9,.78) 38%, rgba(4,6,9,.32) 75%, transparent 100%); opacity: 0; transition: opacity .3s ease; }
.site-nav.is-scrolled { box-shadow: none; backdrop-filter: none !important; }
.site-nav.is-scrolled::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .site-nav, .site-nav::after { transition: none; } }


/* Product catalog and recent buyers */
.catalog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.catalog-content { min-width: 0; }
.catalog-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4f6f9; font-size: 15px; font-weight: 700; line-height: 1.45; }
.catalog-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #b6b6b6; font-size: 12px; font-weight: 600; }
.catalog-card-link svg { width: 14px; height: 14px; }
.product-card a:hover .catalog-card-link { color: #fff; }
.recent-buyers { padding: 18px; border: 1px solid rgba(221, 221, 221, .10); border-radius: 14px; background: rgba(13,17,23,.8); }
.recent-buyers-heading { display: flex; align-items: center; gap: 9px; color: #eaeaea; }
.recent-buyers-heading > svg { width: 17px; height: 17px; color: #aaaaaa; flex-shrink: 0; }
.recent-buyers-heading h2 { font-size: 13px; font-weight: 700; }
.recent-buyers-list { display: grid; gap: 14px; margin-top: 19px; }
.recent-buyers-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.recent-buyer-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid rgba(221, 221, 221, .09); border-radius: 9px; color: #b6b6b6; background: rgba(255,255,255,.04); }
.recent-buyer-icon svg { width: 15px; height: 15px; }
.recent-buyer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9d9d9; font-size: 12px; }
.recent-buyers-empty { margin-top: 14px; color: #939393; font-size: 12px; line-height: 1.6; }
.product-recent-buyers { margin-top: 18px; }
@media (max-width: 800px) { .catalog-layout { grid-template-columns: 1fr; } .catalog-sidebar { order: 1; } .catalog-content { order: 0; } }


/* Shared FiveM background */
body.dk-theme {
  background-color: #07090d;
  background-image: linear-gradient(180deg, rgba(4, 6, 10, .42), rgba(4, 6, 10, .68)), url('../../Fondo.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* Store footer and legal documents */
.site-footer.store-footer { background: radial-gradient(ellipse at 50% 120%, rgba(116, 116, 116, .22), transparent 58%), linear-gradient(180deg, #161616, #080b10 82%) !important; border: 0; padding: 28px 24px 16px; }
.store-footer-inner { max-width: 1600px; margin: 0 auto; }
.store-footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 20px; }
.store-footer-brand { display: inline-flex; align-items: center; gap: 10px; color: #f7f8fb; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.store-footer-brand img { width: 32px; height: 32px; object-fit: contain; }
.store-footer-brand > span > span { color: #b6b6b6; }
.store-footer-brand-col p { max-width: 270px; margin-top: 9px; color: #9c9c9c; font-size: 12px; line-height: 1.5; }
.store-footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.store-footer-group h2 { margin-bottom: 3px; color: #eef1f6; font-size: 12px; font-weight: 700; }
.store-footer-group a { display: inline-flex; align-items: center; gap: 8px; color: #a5a5a5; font-size: 12px; line-height: 1.5; transition: color .2s; }
.store-footer-group a:hover { color: #fff; }
.store-footer-group svg { width: 14px; height: 14px; }
.store-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); color: #939393; font-size: 11px; }
.store-footer-bottom > span { color: #707070; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.legal-main { padding: 132px 24px 90px; }
.legal-container { max-width: 1050px; margin: 0 auto; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; color: #b5b5b5; font-size: 13px; }
.legal-back:hover { color: #fff; }
.legal-back svg { width: 16px; height: 16px; }
.legal-language[hidden] { display: none !important; }
.legal-header { padding: 42px 0 35px; }
.legal-header > p:first-child { color: #a4a4a4; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.legal-header h1 { margin-top: 14px; color: #f5f7fa; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.045em; }
.legal-header h1 + p { max-width: 680px; margin-top: 16px; color: #b5b5b5; font-size: 15px; line-height: 1.7; }
.legal-header time { display: inline-block; margin-top: 20px; color: #909090; font-size: 12px; }
.legal-document { padding: 5px 34px; border: 1px solid rgba(213, 213, 213, .12); border-radius: 18px; background: rgba(12,16,22,.88); }
.legal-document section { padding: 27px 0; }
.legal-document section + section { border-top: 1px solid rgba(255,255,255,.07); }
.legal-document h2 { color: #f0f3f7; font-size: 17px; font-weight: 700; }
.legal-document p { max-width: 820px; margin-top: 10px; color: #bababa; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.legal-contact { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 22px 24px; border: 1px solid rgba(213, 213, 213, .1); border-radius: 16px; background: rgba(28, 28, 28, .8); }
.legal-contact > svg { width: 22px; height: 22px; flex-shrink: 0; color: #bcbcbc; }
.legal-contact > div { flex: 1; }
.legal-contact strong { color: #eef2f7; font-size: 13px; }
.legal-contact p { margin-top: 4px; color: #a8a8a8; font-size: 12px; }
.legal-contact a { color: #e5e5e5; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 800px) { .store-footer-main { grid-template-columns: repeat(3,minmax(0,1fr)); } .store-footer-brand-col { grid-column: 1/-1; } }
@media (max-width: 600px) { .site-footer.store-footer { padding: 26px 20px 16px; } .store-footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .legal-main { padding: 115px 18px 65px; } .legal-header { padding: 32px 0 25px; } .legal-document { padding: 0 20px; } .legal-document section { padding: 22px 0; } .legal-contact { flex-wrap: wrap; } .legal-contact a { flex-basis: 100%; } }


/* Resource categories and featured products */
.home-explore { padding: 80px 24px 60px; }
.home-explore-inner { max-width: 1600px; margin: 0 auto; }
.home-explore header { text-align: center; margin-bottom: 38px; }
.home-explore header h2, .featured-carousel-header h2 { color: #f5f7fa; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.home-explore header p, .featured-carousel-header p { margin: 12px auto 0; max-width: 640px; color: #b4b4b4; font-size: 14px; line-height: 1.75; }
.home-explore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.home-explore-grid article { padding-top: 20px; border-top: 1px solid rgba(221, 221, 221, .17); }
.home-explore-title { display: flex; align-items: center; gap: 12px; }
.home-explore-title > span { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #262626; color: #b4b4b4; }
.home-explore-title svg { width: 20px; height: 20px; }
.home-explore-title h3 { color: #f2f4f8; font-size: 16px; font-weight: 700; }
.home-explore-grid article > p { min-height: 66px; margin: 12px 0; color: #b3b3b3; font-size: 13px; line-height: 1.7; }
.home-explore-grid article > a { display: inline-flex; align-items: center; gap: 7px; color: #b4b4b4; font-size: 13px; font-weight: 700; }
.home-explore-grid article > a:hover { color: #e7e7e7; }
.home-explore-grid article > a svg { width: 15px; height: 15px; }
.featured-carousel-section { padding: 60px 0 90px; }
.featured-carousel-header { max-width: 800px; margin: 0 auto 38px; padding: 0 24px; text-align: center; }
.featured-carousel-header > a { display: inline-block; margin-top: 14px; color: #c2c2c2; font-size: 13px; font-weight: 600; }
.featured-carousel-header > a:hover { color: #fff; }
.featured-marquee { overflow: hidden; max-width: 1600px; margin: 0 auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.featured-marquee-track { display: flex; width: max-content; animation: featured-scroll 58s linear infinite; }
.featured-marquee-group { display: flex; gap: 18px; padding-right: 18px; }
.featured-marquee-item { flex: 0 0 300px; width: 300px; }
.featured-marquee:hover .featured-marquee-track, .featured-marquee:focus-within .featured-marquee-track { animation-play-state: paused; }
.featured-marquee:focus-visible { outline: 2px solid #c4c4c4; outline-offset: 3px; }
@keyframes featured-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.store-product-card { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; border: 1px solid rgba(221, 221, 221, .12); border-radius: 14px; background: #151515; }
.store-product-image { display: block; aspect-ratio: 16/9; overflow: hidden; background: #1d1d1d; }
.store-product-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.store-product-image:hover img { opacity: .85; }
.store-product-info { display: flex; flex: 1; flex-direction: column; gap: 9px; min-width: 0; padding: 16px; }
.store-product-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.store-product-title-row h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3f6fa; font-size: 14px; font-weight: 700; }
.store-product-title-row h3 a { color: inherit; }
.store-product-price { flex-shrink: 0; color: #c5c5c5; font-size: 13px; font-weight: 700; white-space: nowrap; }
.store-product-price-note { margin-top: -5px; color: #989898; font-size: 10px; }
.store-product-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 38px; color: #b3b3b3; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.store-product-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 5px; }
.store-product-buy { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px; border-radius: 9px; background: #b2b2b2; color: #161616; font-size: 12px; font-weight: 700; transition: background .2s; }
.store-product-buy:hover:not(:disabled) { background: #cecece; }
.store-product-buy svg { width: 15px; height: 15px; flex-shrink: 0; }
.store-product-buy:disabled { background: #272727; color: #acacac; cursor: not-allowed; }
.store-product-buy:disabled:hover { background: #303030; }
.store-product-details { display: grid; place-items: center; width: 38px; min-height: 38px; flex-shrink: 0; border: 1px solid rgba(181, 181, 181, .35); border-radius: 9px; color: #c5c5c5; background: rgba(181, 181, 181, .08); }
.store-product-details:hover { color: #fff; background: rgba(181, 181, 181, .16); }
.store-product-details svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .home-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-explore { padding: 60px 18px 35px; } .home-explore-grid { gap: 20px; } .home-explore-title h3 { font-size: 14px; } .home-explore-grid article > p { min-height: 0; } .featured-carousel-section { padding: 45px 0 65px; } .featured-marquee-item { flex-basis: 280px; width: 280px; } }
@media (prefers-reduced-motion: reduce) { .featured-marquee { overflow-x: auto; } .featured-marquee-track { animation: none; } .featured-marquee-group[aria-hidden="true"] { display: none; } }


.product-switches { display: flex; flex-wrap: wrap; gap: 12px; }
.product-switch { position: relative; display: inline-flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid rgba(206, 206, 206, .12); border-radius: 10px; background: rgba(22, 22, 22, .8); color: #dcdcdc; font-size: 13px; font-weight: 600; cursor: pointer; }
.product-switch:hover { border-color: rgba(206, 206, 206, .26); background: rgba(34, 34, 34, .9); }
.product-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.product-switch-track { display: block; position: relative; flex-shrink: 0; width: 34px; height: 20px; border: 1px solid #5f5f5f; border-radius: 999px; background: #2f2f2f; transition: background .2s, border-color .2s; }
.product-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ababab; transition: transform .2s, background .2s; }
.product-switch input:checked + .product-switch-track { border-color: #c4c4c4; background: #c0c0c0; }
.product-switch input:checked + .product-switch-track::after { transform: translateX(14px); background: #212121; }
.product-switch input:focus-visible + .product-switch-track { outline: 2px solid #c4c4c4; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .product-switch-track, .product-switch-track::after { transition: none; } }

.login-discord-btn { display: block; padding: 16px 24px; border-radius: 12px; background: #d0d0d0; color: #111; font-size: 14px; font-weight: 700; transition: background .2s; }
.login-discord-btn:hover { background: #f0f0f0; }


/* Black and silver gradients */
.store-hero-cta, .store-product-buy:not(:disabled), .login-discord-btn {
  background: linear-gradient(135deg, #f0f0f0 0%, #c7c7c7 52%, #969696 100%);
  color: #111;
}
.store-hero-cta:hover, .store-product-buy:hover:not(:disabled), .login-discord-btn:hover {
  background: linear-gradient(135deg, #fff 0%, #dedede 52%, #b5b5b5 100%);
}
.store-product-card { background: linear-gradient(145deg, #202020 0%, #151515 54%, #0d0d0d 100%); }
.store-product-buy:disabled { background: linear-gradient(135deg, #292929, #191919); }
.home-explore-title > span, .drop-icon { background: linear-gradient(145deg, #363636, #1a1a1a); color: #dedede; }
.review-card, .recent-buyers { background: linear-gradient(145deg, #1b1b1b, #101010 70%); }
.discord-community-card { background: radial-gradient(ellipse at 60% 50%, rgba(145,145,145,.10), transparent 55%), linear-gradient(130deg, #191919, #090909); }
.product-switch input:checked + .product-switch-track { background: linear-gradient(135deg, #ededed, #969696); border-color: #c5c5c5; }

.legal-contents { margin-bottom: 20px; padding: 22px 26px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(17,17,17,.84); }
.legal-contents h2 { color: #efefef; font-size: 13px; font-weight: 700; }
.legal-contents div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 14px; }
.legal-contents a { color: #bcbcbc; font-size: 12px; line-height: 1.5; }
.legal-contents a:hover { color: #fff; text-decoration: underline; }
.legal-document section { scroll-margin-top: 90px; }
@media (max-width: 600px) { .legal-contents { padding: 20px; } .legal-contents div { grid-template-columns: 1fr; } }