@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

:root {
  --bg-void: #050308;
  --bg-deep: #0b0712;
  --surface-0: rgba(12, 8, 18, 0.92);
  --surface-1: rgba(19, 13, 28, 0.95);
  --surface-2: rgba(29, 20, 40, 0.98);
  --surface-soft: rgba(255,255,255,.025);
  --border-0: rgba(255, 255, 255, 0.06);
  --border-1: rgba(255, 255, 255, 0.11);
  --border-accent: rgba(198,155,255,.24);
  --text-primary: #f5eefc;
  --text-secondary: #d4c3ea;
  --text-muted: #9c88b8;
  --text-faint: #5f516f;
  --gold: #cfa64a;
  --gold-bright: #f0ca69;
  --gold-pale: #f8e4a6;
  --gold-deep: #8b6727;
  --purple: #8e5bff;
  --purple-bright: #b685ff;
  --purple-deep: #4c2a7a;
  --purple-fog: rgba(142,91,255,.18);
  --danger: #ff5a6e;
  --danger-deep: #7a1c2a;
  --end-ink: #120b1f;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-full: 999px;
  --container: 1200px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.28);
  --shadow-md: 0 12px 40px rgba(0,0,0,.42);
  --shadow-lg: 0 24px 72px rgba(0,0,0,.58);
  --tebex-legal-footer-background-color: #050308;
  --tebex-legal-footer-text-color: #6e6181;
  --tebex-legal-footer-border-color: rgba(255,255,255,.06);
  --tebex-legal-footer-logo-color: #cfa64a;
  --tebex-legal-footer-max-width: 1200px;
  --trs-accent: #5b8def;
  --trs-accent-dark: #3f6fd1;
  --trs-card-bg: rgba(255, 255, 255, 0.04);
  --trs-card-border: rgba(255, 255, 255, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  background: var(--bg-void) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.trs-nav-open,
body.trs-nav-open {
  overflow: hidden !important;
  height: 100% !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% -2%, rgba(240,202,105,.12) 0%, transparent 100%),
    radial-gradient(ellipse 44% 26% at 12% 0%, rgba(142,91,255,.12) 0%, transparent 100%),
    radial-gradient(ellipse 38% 24% at 92% 6%, rgba(182,133,255,.10) 0%, transparent 100%),
    linear-gradient(180deg, #0a0610 0%, #050308 42%, #030205 100%);
  animation: bgPulse 18s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0%   { opacity: 1; }
  50%  { opacity: .9; }
  100% { opacity: 1; }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.86), transparent 90%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.86), transparent 90%);
}

::selection { color: #0f0c04; background: var(--gold-bright); }

.site {
  position: relative;
  z-index: auto !important;
  width: min(var(--container), calc(100% - 40px)) !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 16px 0 60px !important;
}

.site-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: 52px !important;
  margin: 0 0 14px !important;
  padding: 10px 16px !important;
  border-radius: var(--r-full) !important;
  background: linear-gradient(180deg, rgba(18,12,28,.76), rgba(10,7,17,.88)) !important;
  border: 1px solid var(--border-0) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  animation: slideDown .6s var(--ease-out) both;
  position: relative;
  z-index: 20;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-header-top::before {
  content: "THE REALMSAGA";
  margin-right: auto;
  padding-left: 10px;
  color: var(--text-muted);
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.site-header-top:hover::before { color: var(--gold-bright); }
.site-header-top .site-title { display: none !important; }

.trs-login-trigger,
.btn-tertiary,
.btn-tertiary.btn-xsmall,
.user-name,
.open-basket {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 18px !important;
  border-radius: var(--r-full) !important;
  color: #120b07 !important;
  background: linear-gradient(175deg, var(--gold-bright), var(--gold)) !important;
  border: 1px solid rgba(240,202,105,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 20px rgba(207,166,74,.18) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform .2s var(--ease-out), filter .2s ease, box-shadow .2s ease !important;
  position: relative;
  overflow: hidden;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.trs-login-trigger::after,
.user-name::after,
.open-basket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
}

.trs-login-trigger:hover::after,
.user-name:hover::after,
.open-basket:hover::after { transform: translateX(100%); }

.trs-login-trigger::before,
.user-name::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f007";
  font-weight: 900;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

.open-basket::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f291";
  font-weight: 900;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

.trs-login-trigger:hover,
.btn-tertiary:hover,
.user-name:hover,
.open-basket:hover {
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 28px rgba(240,202,105,.18) !important;
}

.trs-login-trigger:active,
.user-name:active,
.open-basket:active { transform: translateY(0) scale(.99) !important; }

.site-header {
  position: relative !important;
  min-height: 420px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 14px !important;
  padding: 60px 20px 110px !important;
  overflow: hidden !important;
  border-radius: var(--r-2xl) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(142,91,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.58)),
    radial-gradient(ellipse 60% 55% at 50% 35%, rgba(142,91,255,.20), transparent 72%),
    url('https://pplx-res.cloudinary.com/image/upload/pplx_search_images/51349b40b920c2f494c76ffb5804e214bf631b71.jpg') center/cover no-repeat,
    linear-gradient(160deg, #1b1028 0%, #0a0711 55%, #040306 100%) !important;
  animation: heroReveal .9s var(--ease-out) .1s both;
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(240,202,105,.10), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.34));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.34));
  pointer-events: none;
  z-index: 1;
}

.site-header::after {
  content: "therealsaga.minecraft.best:19132";
  position: absolute;
  left: 50% !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
  z-index: 4;
  padding: 11px 20px;
  width: max-content;
  max-width: calc(100% - 32px);
  border-radius: var(--r-full);
  color: rgba(245,238,252,.82);
  background: rgba(8,5,14,.48);
  border: 1px solid var(--border-0);
  text-align: center;
  font-family: 'JetBrains Mono', 'DM Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.site-header > * { position: relative; z-index: 2; }

.site-header .site-title {
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.site-title img {
  width: auto !important;
  max-height: 200px !important;
  filter: drop-shadow(0 0 34px rgba(142,91,255,.24)) drop-shadow(0 18px 36px rgba(0,0,0,.58)) !important;
  transition: transform .3s var(--ease-out), filter .3s ease !important;
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.site-title img:hover {
  transform: translateY(-8px) scale(1.02) !important;
  filter: drop-shadow(0 0 52px rgba(182,133,255,.34)) drop-shadow(0 22px 40px rgba(0,0,0,.64)) !important;
  animation-play-state: paused;
}

.site-navigation {
  position: sticky !important;
  top: 12px;
  z-index: 30;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 8px !important;
  border-radius: var(--r-full) !important;
  background: rgba(11,8,18,.88) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(142,91,255,.05) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  animation: slideDown .6s var(--ease-out) .15s both;
  display: block !important;
  overflow: visible !important;
}

.site-navigation ul,
.site-navigation .menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: wrap !important;
}

.menu-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important;
}

.menu-item a,
.menu-item .menu-link,
.menu-link {
  min-height: 46px !important;
  min-width: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 0 20px !important;
  border-radius: var(--r-full) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  transition: all .22s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
  white-space: nowrap !important;
}

.menu-item:nth-child(1) .menu-link::before,
.menu-item:nth-child(1) a::before { content: "\f015"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--purple-bright); }
.menu-item:nth-child(2) .menu-link::before,
.menu-item:nth-child(2) a::before { content: "\f49e"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--gold); }
.menu-item:nth-child(3) .menu-link::before,
.menu-item:nth-child(3) a::before { content: "\f51e"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--purple); }
.menu-item:nth-child(4) .menu-link::before,
.menu-item:nth-child(4) a::before { content: "\f521"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--gold-bright); }
.menu-item:nth-child(5) .menu-link::before,
.menu-item:nth-child(5) a::before { content: "\f05a"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--purple-bright); }

.menu-item a:hover,
.menu-link:hover {
  color: var(--text-secondary) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: var(--border-1) !important;
  transform: translateY(-1px);
}

.menu-link.link-active,
.menu-item a.link-active,
a.link-active {
  color: #130d05 !important;
  background: linear-gradient(175deg, var(--gold-bright), var(--gold)) !important;
  border-color: rgba(240,202,105,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 22px rgba(207,166,74,.22) !important;
}

.menu-item:nth-child(1) a.link-active::before,
.menu-item:nth-child(2) a.link-active::before,
.menu-item:nth-child(3) a.link-active::before,
.menu-item:nth-child(4) a.link-active::before,
.menu-item:nth-child(5) a.link-active::before,
.menu-item:nth-child(1) .menu-link.link-active::before,
.menu-item:nth-child(2) .menu-link.link-active::before,
.menu-item:nth-child(3) .menu-link.link-active::before,
.menu-item:nth-child(4) .menu-link.link-active::before,
.menu-item:nth-child(5) .menu-link.link-active::before {
  color: #130d05 !important;
}

.site-content {
  gap: 14px !important;
  display: block !important;
}

.site-content-widgets {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  grid-template-areas: "main sidebar" !important;
  gap: 14px !important;
  align-items: start !important;
}

.site-content-widgets .store-home,
.site-content-widgets main {
  grid-area: main !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.site-content-widgets .store-sidebar,
.site-content-widgets aside {
  grid-area: sidebar !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.store-home,
.category,
.package,
.card,
.store-product,
.modal-content,
.widget,
.site-footer {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--r-xl) !important;
  background: linear-gradient(180deg, rgba(18,12,28,.94), rgba(10,7,17,.95)) !important;
  border: 1px solid var(--border-0) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: panelReveal .5s var(--ease-out) both;
}

@keyframes panelReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.store-home::before,
.widget::before,
.category::before,
.package::before,
.card::before,
.store-product::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.store-home { padding: 28px !important; margin-top: 0 !important; }

.store-text {
  position: relative !important;
  overflow: hidden !important;
  padding: 32px !important;
  border-radius: var(--r-lg) !important;
  background:
    linear-gradient(180deg, rgba(8,6,14,.58), rgba(7,5,12,.82)),
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(240,202,105,.10), transparent 55%),
    radial-gradient(ellipse 60% 45% at 8% 20%, rgba(142,91,255,.18), transparent 68%),
    url('https://pplx-res.cloudinary.com/image/upload/pplx_search_images/0c2f129f1dd0430ffd1ef354b375a5d42d0ce63e.jpg') center/cover no-repeat,
    rgba(10,9,7,.60) !important;
  border: 1px solid var(--border-0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.store-text::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,.8), transparent 65%);
  mask-image: linear-gradient(135deg, rgba(0,0,0,.8), transparent 65%);
}

.text-content p,
.store-text p {
  position: relative;
  z-index: 1;
  color: var(--text-secondary) !important;
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  margin: 0 0 12px !important;
  font-weight: 400 !important;
}

.text-content strong,
.store-text strong { color: var(--text-primary) !important; font-weight: 600 !important; }

.trs-hero {
  text-align: center;
  padding: 2rem 0 1rem;
}

.trs-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.trs-title span { color: var(--trs-accent); }

.trs-subtitle {
  max-width: 620px;
  margin: 0 auto 2rem;
  opacity: 0.8;
  line-height: 1.6;
}

.trs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto 2rem;
}

.trs-card {
  background: var(--trs-card-bg);
  border: 1px solid var(--trs-card-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.trs-card:hover {
  transform: translateY(-3px);
  border-color: var(--trs-accent);
}

.trs-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.trs-card-head h3 { margin: 0; font-size: 1.15rem; }

.trs-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 88px; height: 88px;
  background: radial-gradient(circle at 100% 0%, rgba(142,91,255,.16), transparent 65%);
  pointer-events: none;
}

.trs-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(182,133,255,.22) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(182,133,255,.06) !important;
}

.trs-card h3 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px !important;
  color: var(--text-primary) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.trs-card p {
  position: relative;
  z-index: 1;
  margin: 6px 0 !important;
  color: var(--text-faint) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
.trs-card-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(91, 141, 239, 0.15);
  color: var(--trs-accent);
}
.trs-card-icon svg { width: 20px; height: 20px; }

.trs-card-label {
  font-size: 0.85rem;
  opacity: 0.65;
  margin: 0.25rem 0;
}

.trs-ip {
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.trs-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--trs-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.trs-copy:hover { background: var(--trs-accent-dark); }
.trs-copy:active { transform: scale(0.97); }
.trs-copy.is-copied { background: #2ecc71; }
.trs-copy-icon { width: 16px; height: 16px; }

.trs-actions { margin-top: 1rem; }

.trs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.trs-btn.secondary {
  background: #5865F2;
  color: #fff;
}
.trs-btn:hover { transform: translateY(-2px); }
.trs-btn-icon { width: 20px; height: 20px; }
.trs-ip:hover {
  background: rgba(240,202,105,.13) !important;
  border-color: rgba(240,202,105,.28) !important;
}

.trs-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }

.trs-btn,
.btn-primary,
.btn-secondary,
button,
input[type="submit"] {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 24px !important;
  border-radius: var(--r-full) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  transition: transform .2s var(--ease-out), box-shadow .2s ease, filter .2s ease !important;
  position: relative;
  overflow: hidden;
}

.trs-btn,
.btn-primary {
  color: #140d06 !important;
  background: linear-gradient(175deg, var(--gold-bright), var(--gold)) !important;
  border: 1px solid rgba(240,202,105,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 24px rgba(240,202,105,.14) !important;
}

.trs-btn::before,
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.24) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}

.trs-btn:hover::before,
.btn-primary:hover::before { transform: translateX(120%); }

.trs-btn.secondary {
  color: var(--text-secondary) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}

.trs-btn:hover,
.btn-primary:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 30px rgba(240,202,105,.18) !important;
}

.trs-btn:active,
.btn-primary:active,
button:active { transform: translateY(0) scale(.98) !important; }

.trs-extra-description { display: none !important; }

/* ============================================================
   AÑADIR AL CESTO — texto en español (oculta el inglés)
   ============================================================ */
.add.btn-primary {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.add.btn-primary::after {
  content: "Añadir al cesto";
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  position: relative;
  z-index: 1;
}
.add.btn-primary::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f291"; /* carrito */
  font-weight: 900;
  font-size: 13px;
  position: relative;
  z-index: 1;
  background: none !important;
  inset: auto !important;
  transform: none !important;
}

.store-products-list,
.category-list,
.package-list,
.packages,
.products,
.category-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 16px !important;
}

.store-product,
.package,
.category,
.card {
  min-width: 0 !important;
}

.store-product {
  padding: 16px !important;
  transition: transform .25s var(--ease-out), border-color .25s ease, box-shadow .25s ease !important;
}

.store-product:hover,
.package:hover,
.category:hover,
.card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(182,133,255,.22) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.46), 0 0 0 1px rgba(182,133,255,.06) !important;
}

.store-product .image-link,
.package .image,
.category .image {
  display: block !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.02)) !important;
}

.store-product img,
.store-product .image,
.package img,
.category img,
.card img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  transition: transform .3s var(--ease-out), filter .3s ease !important;
}

.store-product:hover img,
.package:hover img,
.category:hover img,
.card:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) contrast(1.03);
}

.product-title,
.product-title a,
.package-title,
.package-title a,
.category-title,
.category-title a,
.card-title,
h1, h2, h3, h4 {
  color: var(--text-primary) !important;
  font-family: 'Syne', sans-serif !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

.product-title,
.product-title a,
.package-title,
.package-title a,
.card-title { font-size: 18px !important; font-weight: 700 !important; }

.category-title,
.category-title a { font-size: 17px !important; font-weight: 700 !important; }

.price,
.package-price,
.category-count,
.product-price {
  color: var(--gold-bright) !important;
  font-weight: 700 !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 18px !important;
}

.actions,
.product-actions,
.package-actions,
.category-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.actions > *,
.product-actions > *,
.package-actions > *,
.category-actions > * {
  min-width: 0 !important;
}

.actions .btn,
.actions .btn-primary,
.actions button,
.actions input[type="submit"],
.product-actions .btn,
.product-actions .btn-primary,
.product-actions button,
.package-actions .btn,
.package-actions .btn-primary,
.package-actions button {
  flex: 1 1 160px !important;
  max-width: 100% !important;
  width: auto !important;
}

.store-product .info,
.store-product .content,
.package .info,
.package .content,
.category .info,
.category .content,
.card .content {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* ============================================================
   FICHA DE PRODUCTO INDIVIDUAL (store-product-full)
   Layout dos columnas en escritorio
   ============================================================ */
.store-product-full {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "image  title"
    "image  actions"
    "descr  descr" !important;
  gap: 14px 28px !important;
  padding: 24px !important;
  align-items: start !important;
}

.store-product-full .product-title {
  grid-area: title !important;
  margin: 0 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.12 !important;
}

.store-product-full > .image {
  grid-area: image !important;
  width: 100% !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.02) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  padding: 8px !important;
}

.store-product-full .product-actions {
  grid-area: actions !important;
  align-items: center !important;
  padding: 16px !important;
  border-radius: var(--r-lg) !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--border-0) !important;
}

.store-product-full .product-actions .price {
  width: 100% !important;
  margin: 0 0 4px !important;
}

.store-product-full .product-actions .price strong {
  font-size: 30px !important;
  color: var(--gold-bright) !important;
  text-shadow: 0 0 24px rgba(240,202,105,.28);
}

.store-product-full .descr {
  grid-area: descr !important;
  margin-top: 8px !important;
  padding: 20px 22px !important;
  border-radius: var(--r-lg) !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--border-0) !important;
}

/* Lista de ítems del kit en dos columnas */
.store-product-full .descr.text-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 24px !important;
}

.store-product-full .descr p {
  margin: 0 !important;
  padding: 7px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text-secondary) !important;
}

.back-to-top.btn-tertiary {
  margin-top: 14px !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}
.back-to-top.btn-tertiary::before {
  content: "\f060";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  margin-right: 4px;
}

/* ============================================================
   PRODUCTO NO DISPONIBLE
   El template JS añade data-soldout="true" al .store-product
   (ver script al final). Atenúa botón + badge.
   ============================================================ */
.store-product[data-soldout="true"] > .image,
.store-product[data-soldout="true"] .image-link {
  position: relative !important;
  filter: grayscale(.55) brightness(.7);
}

.store-product[data-soldout="true"]::after {
  content: "AGOTADO";
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  background: linear-gradient(175deg, var(--danger), var(--danger-deep));
  border: 1px solid rgba(255,90,110,.4);
  box-shadow: 0 8px 22px rgba(255,90,110,.28);
}

.store-product[data-soldout="true"] .add.btn-primary {
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  opacity: .5 !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-1) !important;
  box-shadow: none !important;
}

.store-product[data-soldout="true"] .add.btn-primary::after {
  content: "No disponible";
}
.store-product[data-soldout="true"] .add.btn-primary::before {
  content: "\f05e"; /* círculo prohibido */
}

.no-products {
  position: relative;
  z-index: 1;
  margin: 16px 0 0 !important;
  padding: 14px 16px 14px 40px !important;
  border-radius: var(--r-md) !important;
  color: var(--text-muted) !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px dashed rgba(182,133,255,.18) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

.no-products::before {
  content: "\f54e";
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--purple-bright);
  font-size: 14px;
}

.store-sidebar { display: grid !important; gap: 12px !important; }
.widget { min-height: 100px; }

.widget-title {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  color: var(--text-muted) !important;
  background: rgba(0,0,0,.14) !important;
  border-bottom: 1px solid var(--border-0) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.widget-title::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f521";
  font-weight: 900;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0;
  opacity: .8;
}

.widget-recent .widget-title::before { content: "\f1da"; color: var(--purple-bright); }

/* Widgets en español (oculta inglés, inyecta español) */
.widget-top-donator .widget-title,
.widget-recent .widget-title { font-size: 0 !important; }
.widget-top-donator .widget-title::after,
.widget-recent .widget-title::after {
  font-family: 'Syne', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.widget-top-donator .widget-title::after { content: "Mejor Cliente"; }
.widget-recent .widget-title::after { content: "Pagos Recientes"; }

.widget-content { position: relative; z-index: 1; padding: 18px !important; }

.widget .empty {
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.widget-top-donator .widget-content {
  text-align: center !important;
}
.widget-top-donator .avatar {
  width: 64px !important;
  height: auto !important;
  margin: 0 auto 8px !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.widget-top-donator .username {
  text-align: center !important;
  color: var(--gold-bright) !important;
}
.widget-top-donator p {
  margin: 6px 0 0 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.purchase {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
}

.purchase + .purchase {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

.purchase .avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.03) !important;
}

.purchase .info p {
  margin: 2px 0 0 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.purchase .info time {
  color: var(--text-faint) !important;
  font-size: 11px !important;
}
.purchase .info .price strong {
  color: var(--gold-bright) !important;
  font-size: 12.5px !important;
}

.username {
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

input,
select,
textarea {
  color: var(--text-primary) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--border-0) !important;
  border-radius: var(--r-md) !important;
  outline: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(182,133,255,.42) !important;
  box-shadow: 0 0 0 3px rgba(182,133,255,.10) !important;
}

.site-footer { margin: 16px 0 0 !important; padding: 16px 20px !important; }

.site-footer-inner {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.we-accept {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.we-accept li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.028);
  border: 1px solid var(--border-0);
  transition: border-color .2s ease, background .2s ease;
  list-style: none !important;
}

.we-accept li:hover { background: rgba(255,255,255,.048); border-color: var(--border-1); }

.we-accept img {
  display: block !important;
  width: auto !important;
  max-width: 54px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  filter: grayscale(1) brightness(.7) !important;
  transition: filter .2s ease !important;
}

.we-accept li:hover img { filter: grayscale(0) brightness(.92) !important; }

.copyright {
  margin: 0 !important;
  color: var(--text-faint) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* ============================================================
   MODALES GENÉRICOS DEL TEMPLATE
   ============================================================ */
.modal-content,
.popup .inner,
.popup-content {
  position: relative;
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 20px 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(17,11,26,.98), rgba(7,5,12,.98)) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(182,133,255,.08) !important;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.modal-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,202,105,.35), transparent);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
}

.popup-close,
.modal-close,
.close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: unset !important;
  padding: 0 !important;
  border-radius: var(--r-full) !important;
  border: 1px solid rgba(240,202,105,.18) !important;
  background: rgba(0,0,0,.34) !important;
  color: var(--gold-bright) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  filter: none !important;
  transition: color .18s ease, border-color .18s ease !important;
  z-index: 3 !important;
}

.popup-close:hover,
.modal-close:hover,
.close:hover {
  color: #fff6d7 !important;
  border-color: rgba(240,202,105,.34) !important;
  transform: none !important;
  filter: none !important;
}

.tebex-template-preview-banner {
  padding: 8px 16px !important;
  background: rgba(4,4,6,.96) !important;
  border-top: 1px solid var(--border-0) !important;
  color: var(--text-faint) !important;
  font-size: 12px !important;
}

.tebex-template-preview-banner .info,
.tebex-template-preview-banner .links,
.tebex-template-preview-banner a { color: var(--text-secondary) !important; font-weight: 600 !important; }

.category:nth-child(1), .package:nth-child(1), .store-product:nth-child(1) { animation-delay: .05s; }
.category:nth-child(2), .package:nth-child(2), .store-product:nth-child(2) { animation-delay: .10s; }
.category:nth-child(3), .package:nth-child(3), .store-product:nth-child(3) { animation-delay: .15s; }
.category:nth-child(4), .package:nth-child(4), .store-product:nth-child(4) { animation-delay: .20s; }
.category:nth-child(5), .package:nth-child(5), .store-product:nth-child(5) { animation-delay: .25s; }
.category:nth-child(6), .package:nth-child(6), .store-product:nth-child(6) { animation-delay: .30s; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(182,133,255,.22); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(182,133,255,.36); }

.trs-burger { display: none !important; }
.trs-nav-overlay { display: none; }

@media (max-width: 980px) {
  .site { width: calc(100% - 24px) !important; padding-top: 12px !important; }

  .site-navigation {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 10000000010 !important;
    width: min(360px, 92vw) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 80px 16px 32px !important;
    border-radius: 0 !important;
    background: #2a1f3d !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: -24px 0 72px rgba(0,0,0,.78) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateX(110%) !important;
    transition: transform .38s var(--ease-out) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    animation: none !important;
    will-change: transform;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-navigation.is-open,
  body.show-navigation .site-navigation,
  html.trs-nav-open .site-navigation,
  body.trs-nav-open .site-navigation {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  body:not(.show-navigation):not(.trs-nav-open) .site-navigation {
    transform: translateX(110%) !important;
  }

  .site-navigation::after {
    content: "MENÚ";
    position: absolute;
    top: 24px;
    left: 24px;
    color: var(--gold-bright);
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .28em;
    pointer-events: none;
  }

  .site-navigation ul,
  .site-navigation .menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .menu-item { width: 100% !important; }

  .menu-item a,
  .menu-item .menu-link,
  .menu-link {
    width: 100% !important;
    min-width: unset !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    border-radius: var(--r-md) !important;
    justify-content: flex-start !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #ddd4f0 !important;
    font-size: 14px !important;
    gap: 14px !important;
    font-weight: 600 !important;
  }

  .menu-item:nth-child(1) a::before,
  .menu-item:nth-child(2) a::before,
  .menu-item:nth-child(3) a::before,
  .menu-item:nth-child(4) a::before,
  .menu-item:nth-child(5) a::before,
  .menu-item:nth-child(1) .menu-link::before,
  .menu-item:nth-child(2) .menu-link::before,
  .menu-item:nth-child(3) .menu-link::before,
  .menu-item:nth-child(4) .menu-link::before,
  .menu-item:nth-child(5) .menu-link::before {
    font-size: 15px;
  }

  .menu-item a:hover,
  .menu-link:hover {
    background: rgba(182,133,255,.14) !important;
    border-color: rgba(182,133,255,.28) !important;
    color: #fff !important;
    transform: translateX(4px) !important;
  }

  .menu-link.link-active,
  .menu-item a.link-active {
    background: linear-gradient(165deg, var(--gold-bright), var(--gold)) !important;
    color: #120d05 !important;
    border-color: rgba(240,202,105,.32) !important;
    box-shadow: 0 4px 16px rgba(240,202,105,.16) !important;
  }

  .menu-item:nth-child(1) a.link-active::before,
  .menu-item:nth-child(2) a.link-active::before,
  .menu-item:nth-child(3) a.link-active::before,
  .menu-item:nth-child(4) a.link-active::before,
  .menu-item:nth-child(5) a.link-active::before,
  .menu-item:nth-child(1) .link-active::before,
  .menu-item:nth-child(2) .link-active::before,
  .menu-item:nth-child(3) .link-active::before,
  .menu-item:nth-child(4) .link-active::before,
  .menu-item:nth-child(5) .link-active::before {
    color: #120d05 !important;
  }

  .trs-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 499;
    background: rgba(0,0,0,.60);
    opacity: 0;
    transition: opacity .35s ease;
    cursor: pointer;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .trs-nav-overlay.is-open,
  body.show-navigation .trs-nav-overlay,
  html.trs-nav-open .trs-nav-overlay,
  body.trs-nav-open .trs-nav-overlay {
    display: block !important;
    opacity: 1 !important;
  }

  body:not(.show-navigation):not(.trs-nav-open) .trs-nav-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .trs-burger {
    display: inline-flex !important;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 600;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: var(--r-full) !important;
    background: rgba(20,13,33,.98) !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px !important;
    transition: transform .2s var(--ease-out), border-color .2s ease !important;
    min-height: unset !important;
    font-size: unset !important;
    overflow: visible !important;
  }

  .trs-burger:hover {
    transform: scale(1.06) !important;
    border-color: rgba(240,202,105,.32) !important;
    filter: none !important;
    box-shadow: var(--shadow-md) !important;
  }

  .trs-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #e8dff5;
    border-radius: 2px;
    transition: all .3s var(--ease-out);
    pointer-events: none;
  }

  .trs-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: var(--gold-bright);
  }

  .trs-burger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .trs-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--gold-bright);
  }

  .site-header-top {
    min-height: 50px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
    padding-right: 58px !important;
  }

  .site-header-top::before {
    content: "REALMSAGA";
    padding-left: 8px;
    letter-spacing: .18em;
  }

  .site-header {
    min-height: 320px !important;
    border-radius: 22px !important;
    margin-bottom: 12px !important;
    padding: 50px 20px 90px !important;
  }

  .site-title img { max-height: 160px !important; }

  .site-content-widgets {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "sidebar" !important;
  }

  .site-content-widgets .store-home,
  .site-content-widgets main {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .site-content-widgets .store-sidebar,
  .site-content-widgets aside {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* Ficha de producto vuelve a una columna en móvil/tablet */
  .store-product-full {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "image"
      "actions"
      "descr" !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .store-product-full .descr.text-content {
    grid-template-columns: 1fr !important;
  }

  .trs-grid,
  .store-products-list,
  .category-list,
  .package-list,
  .packages,
  .products,
  .category-grid {
    grid-template-columns: 1fr !important;
  }

  .store-product,
  .package,
  .category,
  .card { overflow: hidden !important; }

  .actions,
  .product-actions,
  .package-actions,
  .category-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .actions .btn,
  .actions .btn-primary,
  .actions button,
  .actions input[type="submit"],
  .product-actions .btn,
  .product-actions .btn-primary,
  .product-actions button,
  .package-actions .btn,
  .package-actions .btn-primary,
  .package-actions button {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .modal-content,
  .popup .inner,
  .popup-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px !important;
    padding: 18px 14px 16px !important;
    border-radius: 18px !important;
  }

  .modal-content img,
  .popup .inner img,
  .popup-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 560px) {
  .site { width: calc(100% - 16px) !important; padding-bottom: 36px !important; }

  .site-header-top { padding: 8px 12px !important; }
  .site-header-top::before { font-size: 9px; letter-spacing: .14em; }

  .trs-login-trigger,
  .btn-tertiary.btn-xsmall,
  .user-name,
  .open-basket {
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 10.5px !important;
  }

  .site-header {
    min-height: 280px !important;
    padding: 40px 16px 84px !important;
  }

  .site-header::after {
    font-size: 10.5px;
    padding: 10px 14px;
    border-radius: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
    bottom: 14px !important;
  }

  .site-title img { max-height: 130px !important; animation: none; }

  .store-home { padding: 16px !important; }
  .store-text { padding: 20px !important; }

  .trs-title { font-size: 36px !important; }
  .trs-subtitle,
  .text-content p,
  .store-text p { font-size: 14px !important; }

  .trs-card { min-height: 134px !important; padding: 18px !important; }

  .trs-actions { flex-direction: column !important; }
  .trs-btn { width: 100% !important; justify-content: center !important; }

  .site-footer-inner { flex-direction: column !important; align-items: flex-start !important; }

  .trs-burger {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .product-title,
  .product-title a,
  .package-title,
  .package-title a,
  .category-title,
  .category-title a {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  .price,
  .package-price,
  .product-price { font-size: 17px !important; }

  .store-product,
  .package,
  .category,
  .card { padding: 14px !important; }

  .store-product-full .product-actions .price strong { font-size: 26px !important; }

  .modal-content,
  .popup .inner,
  .popup-content {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100vh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    margin: 5px !important;
    padding: 16px 12px 14px !important;
  }

  .popup-close,
  .modal-close,
  .close {
    top: 8px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
  }
}

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

/* ============================================================
   CARRITO TEBEX
   ============================================================ */
.login-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000000020 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.login-popup[hidden] {
  display: none !important;
}

.login-popup .popup-scroll-cont {
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.login-popup .login-popup-content,
.login-popup.popup .login-popup-content,
.login-popup .popup-content.login-popup-content {
  width: min(430px, calc(100vw - 32px)) !important;
  max-width: min(430px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  margin: 0 !important;
  padding: 42px 32px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  overflow: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(240, 202, 105, .18) !important;
  background: linear-gradient(180deg, rgba(17, 11, 26, .98), rgba(7, 5, 12, .98)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .58), 0 0 0 1px rgba(182, 133, 255, .08) !important;
  text-align: center !important;
}

.login-popup .login-popup-content::before,
.login-popup .login-popup-content::after {
  display: none !important;
}

.login-popup .popup-close {
  top: 12px !important;
  right: 12px !important;
  z-index: 4 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(240, 202, 105, .22) !important;
  background: rgba(0, 0, 0, .42) !important;
  color: var(--gold-bright) !important;
}

.login-popup .login-popup-content h2 {
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.login-popup .login-popup-content .field {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.login-popup .login-popup-content input[type="text"],
.login-popup .login-popup-content input[name="ign"] {
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(0, 0, 0, .30) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-align: center !important;
  outline: none !important;
}

.login-popup .login-popup-content input[type="text"]::placeholder,
.login-popup .login-popup-content input[name="ign"]::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.login-popup .login-popup-content input[type="text"]:focus,
.login-popup .login-popup-content input[name="ign"]:focus {
  border-color: rgba(240, 202, 105, .46) !important;
  box-shadow: 0 0 0 3px rgba(240, 202, 105, .12) !important;
}

.login-popup .login-popup-content .btn-primary,
.login-popup .login-popup-content button[type="submit"] {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 999px !important;
  color: #140d06 !important;
  background: linear-gradient(175deg, var(--gold-bright), var(--gold)) !important;
  border: 1px solid rgba(240, 202, 105, .36) !important;
  box-shadow: 0 14px 34px rgba(240, 202, 105, .16) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.basket-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000000020 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.basket-popup[hidden] {
  display: none !important;
}

.basket-popup .popup-scroll-cont {
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: 18px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.basket-popup .basket-popup-content,
.basket-popup.popup .basket-popup-content,
.basket-popup .popup-content.basket {
  width: min(460px, calc(100vw - 36px)) !important;
  max-width: min(460px, calc(100vw - 36px)) !important;
  height: calc(100vh - 36px) !important;
  height: calc(100dvh - 36px) !important;
  max-height: calc(100vh - 36px) !important;
  max-height: calc(100dvh - 36px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid rgba(240, 202, 105, .18) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(182, 133, 255, .13), transparent 34%),
    linear-gradient(180deg, rgba(18, 11, 29, .98), rgba(6, 4, 10, .99)) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .68), 0 0 0 1px rgba(182, 133, 255, .08) !important;
}

.basket-popup .basket-popup-content::before,
.basket-popup .basket-popup-content::after {
  display: none !important;
}

.basket-popup .popup-close {
  top: 14px !important;
  right: 14px !important;
  z-index: 8 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(240, 202, 105, .22) !important;
  background: rgba(0, 0, 0, .42) !important;
  color: var(--gold-bright) !important;
}

.basket-popup .basket-header,
.basket-popup .basket-second-header,
.basket-popup .basket-content,
.basket-popup .basket-checkout {
  flex: none !important;
}

.basket-popup .basket-header {
  padding: 24px 64px 16px 24px !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .025) !important;
}

.basket-popup .basket-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-primary) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}

.basket-popup .basket-title::before {
  width: 22px !important;
  height: 22px !important;
  background-color: var(--gold-bright) !important;
}

.basket-popup .basket-second-header {
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

.basket-popup .basket-second-header .total strong,
.basket-popup .basket-second-header .currency {
  color: var(--gold-bright) !important;
  font-weight: 800 !important;
}

.basket-popup .basket-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.basket-popup .basket-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px !important;
}

.basket-popup .basket-item {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "info price"
    "qty remove" !important;
  align-items: center !important;
  gap: 12px 14px !important;
  width: 100% !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.basket-popup .basket-item .info {
  grid-area: info !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.basket-popup .basket-item .title,
.basket-popup .basket-item .title a {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
}

.basket-popup .basket-item .options {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.basket-popup .basket-item .price {
  grid-area: price !important;
  justify-self: end !important;
  color: var(--gold-bright) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.basket-popup .basket-item .price strong {
  color: inherit !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.basket-popup .basket-item .quantity-field {
  grid-area: qty !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.basket-popup .quantity-field button,
.basket-popup .quantity-field .decrease,
.basket-popup .quantity-field .increase {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(240, 202, 105, .28) !important;
  background: linear-gradient(175deg, var(--gold-bright), var(--gold)) !important;
  color: #140d06 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(240, 202, 105, .14) !important;
}

.basket-popup .quantity-field input.quantity,
.basket-popup .quantity-field input[type="number"] {
  width: 48px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(0, 0, 0, .28) !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.basket-popup .basket-item .remove {
  grid-area: remove !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #b892ff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.basket-popup .basket-item .remove::before,
.basket-popup .basket-item .remove::after {
  display: none !important;
}

.basket-popup .basket-checkout {
  margin: 0 !important;
  padding: 18px 24px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(0, 0, 0, .22) !important;
}

.basket-popup .basket-checkout h3 {
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

.basket-popup .basket-checkout .total,
.basket-popup .basket-checkout .total strong {
  color: var(--gold-bright) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

.basket-popup .basket-checkout .checkout,
.basket-popup .basket-checkout button.checkout {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  color: #140d06 !important;
  background: linear-gradient(175deg, var(--gold-bright), var(--gold)) !important;
  border: 1px solid rgba(240, 202, 105, .36) !important;
  box-shadow: 0 14px 34px rgba(240, 202, 105, .16) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.basket-popup .basket-empty {
  margin: auto !important;
  padding: 48px 24px !important;
  color: var(--text-secondary) !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  .basket-popup .popup-scroll-cont {
    padding: 10px !important;
    align-items: flex-end !important;
  }

  .basket-popup .basket-popup-content,
  .basket-popup.popup .basket-popup-content,
  .basket-popup .popup-content.basket {
    width: 100% !important;
    max-width: 100% !important;
    height: min(86vh, 720px) !important;
    height: min(86dvh, 720px) !important;
    max-height: min(86vh, 720px) !important;
    max-height: min(86dvh, 720px) !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .basket-popup .basket-header {
    padding: 20px 58px 14px 18px !important;
    min-height: 66px !important;
  }

  .basket-popup .basket-second-header,
  .basket-popup .basket-checkout {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .basket-popup .basket-items {
    padding: 12px !important;
  }

  .basket-popup .basket-item {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "info"
      "price"
      "qty"
      "remove" !important;
    align-items: start !important;
  }

  .basket-popup .basket-item .price,
  .basket-popup .basket-item .remove {
    justify-self: start !important;
  }
}

/* ============================================================
   FINAL UI POLISH: close buttons, product cards, login
   ============================================================ */
:root {
  --bg-void: #030205;
  --bg-deep: #08050d;
  --surface-0: rgba(10, 7, 15, .94);
  --surface-1: rgba(16, 10, 25, .96);
  --surface-2: rgba(24, 16, 35, .98);
  --border-0: rgba(255, 255, 255, .075);
  --border-1: rgba(240, 202, 105, .16);
  --text-primary: #f7f1ff;
  --text-secondary: #cdbde2;
  --text-muted: #9d8ab8;
  --gold: #d3aa4d;
  --gold-bright: #f2cf6b;
  --purple: #8d5cff;
  --purple-bright: #bb8dff;
}

.popup-close,
.modal-close,
.close,
.site-navigation > .popup-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(240, 202, 105, .24) !important;
  background: rgba(8, 5, 13, .86) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.popup-close::before,
.popup-close::after,
.modal-close::before,
.modal-close::after,
.close::before,
.close::after,
.site-navigation > .popup-close::before,
.site-navigation > .popup-close::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 15px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #f5d574 !important;
  transform-origin: center !important;
  text-indent: 0 !important;
}

.popup-close::before,
.modal-close::before,
.close::before,
.site-navigation > .popup-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.popup-close::after,
.modal-close::after,
.close::after,
.site-navigation > .popup-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.popup-close:hover,
.modal-close:hover,
.close:hover,
.site-navigation > .popup-close:hover {
  border-color: rgba(245, 213, 116, .46) !important;
  background: rgba(24, 15, 35, .96) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

.site-navigation > .popup-close.mobile-only {
  display: none !important;
}

@media (max-width: 980px) {
  .site-navigation > .popup-close.mobile-only {
    top: 18px !important;
    right: 18px !important;
    z-index: 4 !important;
  }

  .site-navigation.is-open > .popup-close.mobile-only,
  body.show-navigation .site-navigation > .popup-close.mobile-only,
  html.trs-nav-open .site-navigation > .popup-close.mobile-only,
  body.trs-nav-open .site-navigation > .popup-close.mobile-only {
    display: inline-flex !important;
  }
}

.site-content-widgets {
  grid-template-columns: minmax(0, 1fr) 270px !important;
  gap: 18px !important;
}

.store-home,
.widget,
.store-product,
.store-product-tiered,
.package,
.category,
.card {
  background:
    linear-gradient(180deg, rgba(18, 12, 27, .94), rgba(8, 5, 12, .97)) !important;
  border-color: rgba(255, 255, 255, .075) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.store-products-list,
.store-products-images,
.store-products-tiered,
.category-list,
.package-list,
.packages,
.products,
.category-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.store-product:not(.store-product-full),
.store-product-tiered,
.package {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.store-product:not(.store-product-full) .image-link,
.store-product-tiered .image-link,
.store-product-tiered > a:first-child,
.package .image,
.category .image {
  width: 100% !important;
  height: clamp(150px, 21vw, 220px) !important;
  max-height: 220px !important;
  margin: 0 0 10px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(240, 202, 105, .11), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12)) !important;
}

.store-product:not(.store-product-full) .image,
.store-product:not(.store-product-full) img.image,
.store-product:not(.store-product-full) .image-link img,
.store-product-tiered .image,
.store-product-tiered img,
.package img,
.category img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  border-radius: 11px !important;
  background: transparent !important;
}

.store-product:not(.store-product-full):hover img,
.store-product-tiered:hover img,
.package:hover img,
.category:hover img {
  transform: scale(1.025) !important;
}

.store-product:not(.store-product-full) .product-title,
.store-product:not(.store-product-full) .product-title a,
.store-product-tiered .product-title,
.store-product-tiered .product-title a {
  min-height: 34px !important;
  margin: 0 !important;
  color: #f8f2ff !important;
  font-size: 14px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.store-product:not(.store-product-full) .price,
.store-product-tiered .price {
  margin-top: auto !important;
  color: #f2cf6b !important;
  font-size: 13px !important;
  text-align: left !important;
}

.store-product:not(.store-product-full) .price strong,
.store-product-tiered .price strong {
  font-size: 18px !important;
  font-weight: 900 !important;
}

.store-product:not(.store-product-full) .actions,
.store-product-tiered .actions,
.package-actions {
  margin-top: 0 !important;
  gap: 8px !important;
  align-items: center !important;
}

.store-product:not(.store-product-full) .add.btn-primary,
.store-product-tiered .add.btn-primary,
.package-actions .btn-primary {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px rgba(240, 202, 105, .12) !important;
}

.store-product:not(.store-product-full) .add.btn-primary::after,
.store-product-tiered .add.btn-primary::after {
  font-size: 11px !important;
  letter-spacing: .02em !important;
}

.store-product:not(.store-product-full) .add.btn-primary::before,
.store-product-tiered .add.btn-primary::before {
  font-size: 11px !important;
}

.store-product-full > .image,
.store-product-full .image-link,
.store-product-full .media-slider {
  max-height: 420px !important;
  overflow: hidden !important;
}

.store-product-full > .image,
.store-product-full .image-link img,
.store-product-full img.image {
  object-fit: contain !important;
}

.store-product:not(.store-product-full) > img.image,
.store-product:not(.store-product-full) > .image:not(.image-default),
.store-product-tiered > img.image,
.store-product-tiered > .image:not(.image-default) {
  width: 100% !important;
  height: clamp(150px, 21vw, 220px) !important;
  max-height: 220px !important;
  margin: 0 0 10px !important;
  padding: 8px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(240, 202, 105, .11), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12)) !important;
}

.login-popup .login-popup-content,
.login-popup.popup .login-popup-content,
.login-popup .popup-content.login-popup-content {
  padding: 44px 28px 28px !important;
  border-radius: 20px !important;
  border-color: rgba(240, 202, 105, .18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 91, 255, .16), transparent 42%),
    linear-gradient(180deg, rgba(18, 12, 28, .98), rgba(7, 5, 12, .99)) !important;
}

.login-popup .login-popup-content h2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 24px !important;
}

.login-popup .login-popup-content h2::before {
  content: "THE REALMSAGA" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(182, 133, 255, .32) !important;
  background: rgba(142, 91, 255, .18) !important;
  color: #cdaeff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
}

.login-popup .login-popup-content input[type="text"],
.login-popup .login-popup-content input[name="ign"] {
  height: 50px !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, .28) !important;
  border-color: rgba(255, 255, 255, .11) !important;
}

.login-popup .login-popup-content .btn-primary,
.login-popup .login-popup-content button[type="submit"] {
  min-height: 50px !important;
  border-radius: 16px !important;
}

@media (min-width: 1180px) {
  .store-products-images,
  .store-products-tiered {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .site-content-widgets {
    grid-template-columns: 1fr !important;
  }

  .store-products-list,
  .store-products-images,
  .store-products-tiered,
  .category-list,
  .package-list,
  .packages,
  .products,
  .category-grid {
    grid-template-columns: 1fr !important;
  }

  .store-product:not(.store-product-full) .image-link,
  .store-product-tiered .image-link,
  .store-product-tiered > a:first-child,
  .package .image,
  .category .image {
    height: clamp(140px, 52vw, 210px) !important;
  }
}

@media (max-width: 980px) {
  .site-content-widgets {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "main"
      "sidebar" !important;
    gap: 14px !important;
  }

  .site-content-widgets .store-home,
  .site-content-widgets main {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .site-content-widgets .store-sidebar,
  .site-content-widgets aside {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* ============================================================
   NAV ICONS BY ROUTE
   ============================================================ */
.site-navigation .menu-link::before,
.site-navigation .menu-item > a::before,
.site-navigation .log-out > a::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  min-width: 14px !important;
  font-family: "Font Awesome 6 Free" !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--purple-bright) !important;
}

.site-navigation .menu-link[href="/"]::before,
.site-navigation .menu-link[href$="therealsaga.tebex.io/"]::before {
  content: "\f015" !important;
  color: var(--purple-bright) !important;
}

.site-navigation .menu-link[href*="/category/permisos"]::before {
  content: "\f084" !important;
  color: #d7bb68 !important;
}

.site-navigation .menu-link[href*="/category/rangos"]::before {
  content: "\f51e" !important;
  color: var(--gold-bright) !important;
}

.site-navigation .menu-link[href*="/category/mejora-de-rango"]::before {
  content: "\f062" !important;
  color: #c89cff !important;
}

.site-navigation .menu-link[href*="/category/objetos"]::before {
  content: "\f1b2" !important;
  color: var(--gold) !important;
}

.site-navigation .menu-link[href*="/category/kits"]::before {
  content: "\f466" !important;
  color: #b685ff !important;
}

.site-navigation .log-out > a[href*="/checkout/logout"]::before,
.site-navigation a[href*="/checkout/logout"]::before {
  content: "\f2f5" !important;
  color: #f2cf6b !important;
}

.site-navigation .menu-link.link-active::before,
.site-navigation .menu-item > a.link-active::before,
.site-navigation a.link-active::before {
  color: #130d05 !important;
}

.user-name::before {
  content: "\f2f5" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}