:root {
  --eg-shell-width: min(100% - 48px, 1180px);
  --eg-glass-bg: rgba(22, 21, 34, 0.78);
  --eg-glass-border: rgba(180, 150, 255, 0.14);
  --eg-glass-border-strong: rgba(180, 150, 255, 0.24);
  --eg-text-main: #f7f3ff;
  --eg-text-muted: rgba(236, 232, 255, 0.72);
  --eg-shadow-soft: 0 26px 70px rgba(0, 0, 0, 0.3);
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  background-color: #08080f;
}

body > main,
.site-footer {
  position: relative;
  z-index: 1;
}

main,
.site-main,
.page-main {
  margin-top: 0;
  padding-top: 0;
}

body > main > section.main,
body > main > section.main > .container {
  margin-top: 0;
  padding-top: 0 !important;
}

.main {
  padding-top: 0 !important;
}

.eg-header,
.header,
.navbar {
  top: 0;
  margin-top: 0;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 64%);
  filter: blur(20px);
  opacity: 0.65;
  animation: ambientFloat 18s ease-in-out infinite alternate;
}

.ambient-orb-1 {
  top: 12%;
  left: 6%;
}

.ambient-orb-2 {
  top: 42%;
  right: 4%;
  animation-duration: 24s;
}

.ambient-orb-3 {
  bottom: 8%;
  left: 38%;
  animation-duration: 28s;
}

.ambient-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(196, 181, 253, 0.55);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.45);
  animation: particleDrift 12s ease-in-out infinite alternate;
}

.ambient-particle-1 {
  top: 12%;
  left: 24%;
}

.ambient-particle-2 {
  top: 18%;
  left: 62%;
  animation-duration: 10s;
}

.ambient-particle-3 {
  top: 26%;
  right: 18%;
}

.ambient-particle-4 {
  top: 34%;
  left: 12%;
  animation-duration: 14s;
}

.ambient-particle-5 {
  top: 38%;
  left: 48%;
}

.ambient-particle-6 {
  top: 44%;
  right: 8%;
  animation-duration: 15s;
}

.ambient-particle-7 {
  top: 56%;
  left: 18%;
}

.ambient-particle-8 {
  top: 62%;
  left: 72%;
  animation-duration: 11s;
}

.ambient-particle-9 {
  bottom: 24%;
  left: 42%;
}

.ambient-particle-10 {
  bottom: 18%;
  right: 24%;
  animation-duration: 16s;
}

.ambient-particle-11 {
  bottom: 12%;
  left: 14%;
}

.ambient-particle-12 {
  bottom: 8%;
  right: 12%;
  animation-duration: 13s;
}

.clickable-card {
  position: relative;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    filter 0.18s ease;
}

.clickable-card:hover {
  transform: translateY(-3px);
  border-color: var(--eg-glass-border-strong);
  box-shadow: var(--eg-shadow-soft), 0 0 38px rgba(139, 92, 246, 0.12);
}

.clickable-card:focus-within {
  outline: 2px solid rgba(139, 92, 246, 0.62);
  outline-offset: 4px;
}

.card-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.clickable-card > *:not(.card-stretched-link) {
  position: relative;
  z-index: 1;
}

.clickable-card a:not(.card-stretched-link),
.clickable-card button {
  position: relative;
  z-index: 3;
}

.btn-primary,
.primary-button,
.discord-cta,
.trust-cta,
.process-cta,
.eg-blog-button,
.footer-support-card__btn,
.support-cta__button,
.eg-help-search button,
.help-search button,
.eg-header__cta {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease;
}

.btn-primary::before,
.primary-button::before,
.discord-cta::before,
.trust-cta::before,
.process-cta::before,
.eg-blog-button::before,
.footer-support-card__btn::before,
.support-cta__button::before,
.eg-help-search button::before,
.help-search button::before,
.eg-header__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn-primary:hover::before,
.primary-button:hover::before,
.discord-cta:hover::before,
.trust-cta:hover::before,
.process-cta:hover::before,
.eg-blog-button:hover::before,
.footer-support-card__btn:hover::before,
.support-cta__button:hover::before,
.eg-help-search button:hover::before,
.help-search button:hover::before,
.eg-header__cta:hover::before {
  transform: translateX(120%);
}

.btn-primary:hover,
.primary-button:hover,
.discord-cta:hover,
.trust-cta:hover,
.process-cta:hover,
.eg-blog-button:hover,
.footer-support-card__btn:hover,
.support-cta__button:hover,
.eg-help-search button:hover,
.help-search button:hover,
.eg-header__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.glass-card,
.blog-card,
.help-quick-card,
.eg-help-quick-card,
.profile-card,
.catalog-card,
.footer-support-card,
.eg-help-guide-card,
.eg-help-doc-card,
.eg-blog-featured,
.eg-blog-cluster-card {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.glass-card:hover,
.blog-card:hover,
.help-quick-card:hover,
.eg-help-quick-card:hover,
.profile-card:hover,
.catalog-card:hover,
.footer-support-card:hover,
.eg-help-guide-card:hover,
.eg-help-doc-card:hover,
.eg-blog-featured:hover,
.eg-blog-cluster-card:hover {
  transform: translateY(-3px);
  border-color: var(--eg-glass-border-strong);
  box-shadow: var(--eg-shadow-soft), 0 0 36px rgba(139, 92, 246, 0.1);
}

.eg-header__link.is-current::after,
.eg-header__link:hover::after {
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.32);
}

.eg-discord-promo--compact {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

.eg-discord-promo--compact .discord-banner {
  width: var(--eg-shell-width);
  min-height: 300px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  border-radius: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.18), transparent 38%),
    radial-gradient(circle at 12% 82%, rgba(59, 130, 246, 0.08), transparent 42%),
    linear-gradient(135deg, rgba(24, 23, 36, 0.88), rgba(10, 10, 16, 0.96));
  border: 1px solid var(--eg-glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

.eg-discord-promo--compact .discord-banner::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%);
  pointer-events: none;
}

.eg-discord-promo--compact .discord-content,
.eg-discord-promo--compact .discord-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.discord-visual,
.discord-icon-wrapper,
.discord-hero-icon-wrapper,
.discord-visual-icon-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.discord-hero-icon,
.discord-visual-icon,
.discord-orbit-icon,
.discord-visual > img {
  display: block;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
}

.home-page .eg-discord-promo--home .discord-hero-icon,
.eg-discord-promo--compact .discord-hero-icon {
  filter:
    drop-shadow(0 0 24px rgba(139, 92, 246, 0.42))
    drop-shadow(0 0 70px rgba(109, 93, 246, 0.18)) !important;
}

.eg-discord-promo--compact .discord-kicker {
  width: fit-content;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(180, 150, 255, 0.16);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eg-discord-promo--compact .discord-kicker-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(180, 150, 255, 0.16);
}

.eg-discord-promo--compact .discord-kicker-icon img,
.eg-discord-promo--compact .discord-cta-icon img {
  width: 16px;
  height: 16px;
  display: block;
}

.eg-discord-promo--compact .discord-title {
  margin: 22px 0 0;
  color: var(--eg-text-main);
  font-size: clamp(30px, 3vw, 44px);
  /* Pass 12: line-height was 0.98 — under 1.0, which is shorter than the
     font's own glyph box, so ascenders/diacritics (e.g. the breve on "й")
     got clipped at the top of the line. letter-spacing was -0.05em,
     tight enough at this size to visually glue adjacent words together.
     Both bumped just enough to read cleanly while keeping the same bold,
     tight, dramatic headline feel. */
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 950;
  text-wrap: balance;
  overflow: visible;
}

.eg-discord-promo--compact .discord-title span {
  color: #a78bfa;
  text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

.eg-discord-promo--compact .discord-subtitle {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--eg-text-muted);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.58;
}

.eg-discord-promo--compact .discord-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* No subtitle paragraph rendered (see eg_render_discord_promo's empty-text
   guard) — tags sit right under the title, so pull them in tighter than
   the subtitle-present spacing above. */
.eg-discord-promo--compact .discord-title + .discord-tags {
  margin-top: 14px;
}

.eg-discord-promo--compact .discord-tags span {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.12);
  color: rgba(246, 242, 255, 0.84);
  font-size: 14px;
  font-weight: 700;
}

.eg-discord-promo--compact .discord-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.eg-discord-promo--compact .discord-cta {
  min-width: 260px;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #5b4bff, #8b5cf6);
  border: 1px solid rgba(180, 150, 255, 0.24);
  box-shadow: 0 18px 40px rgba(91, 75, 255, 0.24);
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 850;
}

.eg-discord-promo--compact .discord-cta-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
}

.eg-discord-promo--compact .discord-cta-arrow {
  font-size: 22px;
  line-height: 1;
}

.eg-discord-promo--compact .discord-handnote {
  display: none;
}

.eg-discord-promo--compact .discord-visual {
  min-height: 300px;
  pointer-events: none;
}

.eg-discord-promo--compact .discord-orbit-scene {
  position: absolute;
  z-index: 0;
  top: -16px;
  right: -10px;
  width: clamp(360px, 32vw, 520px);
  height: clamp(220px, 20vw, 320px);
  filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.18));
  pointer-events: none;
}

.eg-discord-promo--compact .discord-orbit-scene::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 52% 46%, rgba(139, 92, 246, 0.24), transparent 34%),
    radial-gradient(circle at 68% 42%, rgba(168, 85, 247, 0.16), transparent 42%),
    radial-gradient(circle at 34% 62%, rgba(59, 130, 246, 0.11), transparent 38%);
  filter: blur(4px);
  opacity: 0.95;
}

.eg-discord-promo--compact .discord-orbit {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 32%;
  height: 38%;
  border-radius: 999px;
  border: 2px solid rgba(180, 150, 255, 0.22);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.28), inset 0 0 18px rgba(139, 92, 246, 0.1);
}

.eg-discord-promo--compact .discord-orbit-1 {
  transform: rotate(-10deg);
  border-color: rgba(180, 150, 255, 0.3);
}

.eg-discord-promo--compact .discord-orbit-2 {
  top: 37%;
  left: 2%;
  right: 2%;
  height: 30%;
  transform: rotate(7deg);
  border-color: rgba(139, 92, 246, 0.18);
  opacity: 0.75;
}

.eg-discord-promo--compact .discord-orbit-dot {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #e9d5ff, #8b5cf6 48%, #2e1065 100%);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.65), 0 0 34px rgba(139, 92, 246, 0.25);
}

.eg-discord-promo--compact .discord-orbit-dot-1 {
  left: 12%;
  top: 48%;
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.eg-discord-promo--compact .discord-orbit-dot-2 {
  right: 18%;
  top: 20%;
  width: 11px;
  height: 11px;
  opacity: 0.75;
}

.eg-discord-promo--compact .discord-orbit-dot-3 {
  left: 28%;
  bottom: 14%;
  width: 22px;
  height: 22px;
  opacity: 0.62;
}

.eg-discord-promo--compact .discord-orbit-poly {
  position: absolute;
  right: 2%;
  top: 48%;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(59, 130, 246, 0.06));
  clip-path: polygon(50% 0%, 95% 25%, 80% 82%, 28% 96%, 0% 50%);
  border: 1px solid rgba(180, 150, 255, 0.14);
  opacity: 0.4;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.2));
}

.eg-discord-promo--compact .discord-hero-icon {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 3%;
  width: clamp(220px, 22vw, 340px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.42))
    drop-shadow(0 0 80px rgba(109, 93, 246, 0.18));
  user-select: none;
  pointer-events: none;
}

.discord-server-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.eg-discord-promo--compact .discord-server-card,
.home-page .eg-discord-promo--home .discord-server-card {
  pointer-events: auto;
}

.eg-discord-promo--compact .discord-server-card {
  position: absolute;
  z-index: 3;
  top: 160px;
  right: 0;
  width: min(100%, 320px);
  min-height: 126px;
  padding: 18px 22px;
  border-radius: 24px;
  background: rgba(16, 16, 24, 0.72);
  border: 1px solid rgba(180, 150, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 44px rgba(0, 0, 0, 0.28),
    0 0 0 rgba(139, 92, 246, 0);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Pass 12: subtle levitation — transform/box-shadow/filter only, never
     touches layout (this is already position:absolute, so it can't
     shift surrounding content even mid-animation). Slow (7s) and a few
     px of travel on purpose, glow peaks exactly at the highest point of
     the float and softens as it sinks back down. */
  animation: discordCardLevitate 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes discordCardLevitate {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 20px 44px rgba(0, 0, 0, 0.28),
      0 0 0 rgba(139, 92, 246, 0);
  }
  50% {
    transform: translateY(-7px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 28px 56px rgba(0, 0, 0, 0.3),
      0 12px 36px rgba(139, 92, 246, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eg-discord-promo--compact .discord-server-card {
    animation: none !important;
  }
}

.eg-discord-promo--compact .discord-server-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
}

.eg-discord-promo--compact .discord-server-logo {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(180, 150, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.eg-discord-promo--compact .discord-server-logo img {
  width: 34px;
  height: 34px;
}

.eg-discord-promo--compact .discord-server-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #f6f2ff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
}

.eg-discord-promo--compact .online-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.48);
}

.eg-discord-promo--compact .online-text {
  color: rgba(209, 250, 229, 0.84);
  font-size: 13px;
  font-weight: 700;
}

.eg-discord-promo--compact .discord-server-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(180, 150, 255, 0.1);
}

.eg-discord-promo--compact .discord-server-stats strong {
  display: block;
  color: #f6f2ff;
  font-size: 16px;
  font-weight: 850;
}

.eg-discord-promo--compact .discord-server-stats span {
  display: block;
  margin-top: 4px;
  color: rgba(236, 232, 255, 0.62);
  font-size: 13px;
  line-height: 1.35;
}

.site-footer {
  padding: clamp(72px, 9vw, 120px) 0 clamp(32px, 5vw, 54px);
  background: transparent;
}

.site-footer .container,
.eg-discord-promo .container {
  width: var(--eg-shell-width);
  max-width: none;
  padding: 0;
  margin-inline: auto;
}

.footer-shell {
  padding: clamp(34px, 5vw, 56px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 88% 12%, rgba(139, 92, 246, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(18, 17, 27, 0.86), rgba(9, 9, 14, 0.96));
  border: 1px solid rgba(180, 150, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 34px 90px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.footer-brand p,
.footer-description {
  max-width: 360px;
  color: rgba(236, 232, 255, 0.68);
  line-height: 1.6;
}

.footer-links-grid,
.footer-columns {
  margin-top: clamp(48px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.footer-links-grid h4,
.footer-columns h4 {
  margin: 0 0 18px;
  color: #f7f3ff;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-links-grid a,
.footer-columns a {
  display: inline-block;
  margin: 0 0 12px;
  color: rgba(236, 232, 255, 0.62);
  text-decoration: none;
  transition: color 0.16s ease;
}

.footer-links-grid a:hover,
.footer-columns a:hover {
  color: #c4b5fd;
}

.footer-support-card {
  padding: 28px;
  border-radius: 26px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(180, 150, 255, 0.14);
}

.footer-support-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-bottom {
  margin-top: clamp(38px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid rgba(180, 150, 255, 0.1);
}

.footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(236, 232, 255, 0.48);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes ambientFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(34px, -28px, 0) scale(1.08);
  }
}

@keyframes particleDrift {
  from {
    transform: translateY(0);
    opacity: 0.25;
  }

  to {
    transform: translateY(-18px);
    opacity: 0.75;
  }
}

@media (max-width: 1100px) {
  .eg-discord-promo--compact .discord-banner {
    grid-template-columns: 1fr;
  }

  .eg-discord-promo--compact .discord-visual {
    min-height: 360px;
    margin-top: 8px;
  }

  .eg-discord-promo--compact .discord-orbit-scene {
    left: 50%;
    right: auto;
    top: -10px;
    width: min(100%, 560px);
    height: 360px;
    transform: translateX(-50%);
  }

  .eg-discord-promo--compact .discord-hero-icon {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: clamp(280px, 58vw, 420px);
  }

  .eg-discord-promo--compact .discord-server-card {
    left: 50%;
    right: auto;
    top: 210px;
    transform: translateX(-50%);
    width: min(100%, 420px);
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-links-grid,
  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  :root {
    --eg-shell-width: min(100% - 32px, 1180px);
  }

  .eg-discord-promo--compact .discord-banner {
    padding: 28px;
    border-radius: 26px;
  }

  .eg-discord-promo--compact .discord-tags {
    gap: 10px;
  }

  .eg-discord-promo--compact .discord-cta {
    width: 100%;
    min-width: 0;
  }

  .eg-discord-promo--compact .discord-server-stats {
    grid-template-columns: 1fr;
  }

  .ambient-orb {
    width: 280px;
    height: 280px;
  }
}

@media (max-width: 560px) {
  .footer-links-grid,
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

.site-footer {
  width: 100%;
  margin: 0;
  padding: 72px 0 54px;
  background: transparent;
  color: #f7f3ff;
}

.site-footer .container {
  width: min(100% - 48px, var(--eg-container, 1432px));
  max-width: none;
  padding: 0;
  margin-inline: auto;
}

.footer-shell {
  position: relative;
  overflow: hidden;
  padding: 48px 56px 28px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 16%, rgba(139, 92, 246, 0.12), transparent 34%),
    radial-gradient(circle at 12% 72%, rgba(168, 155, 255, 0.07), transparent 30%),
    linear-gradient(135deg, rgba(18, 17, 27, 0.88), rgba(9, 9, 14, 0.98));
  border: 1px solid rgba(180, 150, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 34px 90px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 56px;
  align-items: start;
  padding-bottom: 0;
}

.footer-logo {
  gap: 12px;
  color: #fff;
}

.footer-logo__mark {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(180, 150, 255, 0.16);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.18);
}

.footer-logo__text {
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}

.footer-description,
.footer-brand p {
  max-width: 290px;
  color: rgba(236, 232, 255, 0.68);
  font-size: 15px;
  line-height: 1.65;
}

.footer-section-label {
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(180, 150, 255, 0.13);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: rgba(168, 155, 255, 0.36);
  background: rgba(139, 92, 246, 0.16);
}

.footer-links-grid,
.footer-columns {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 0;
}

.footer-links-grid h4,
.footer-columns h4 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.footer-links-grid ul,
.footer-columns ul {
  display: grid;
  gap: 9px;
}

.footer-links-grid a,
.footer-columns a,
.footer-col ul li a {
  margin: 0;
  color: rgba(236, 232, 255, 0.62);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
}

.footer-links-grid a:hover,
.footer-links-grid a:focus-visible,
.footer-columns a:hover,
.footer-columns a:focus-visible,
.footer-col ul li a:hover,
.footer-col ul li a:focus-visible {
  color: #f0abfc;
}

.footer-support-card {
  padding: 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 16%, rgba(139, 92, 246, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(180, 150, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 58px rgba(0, 0, 0, 0.2);
}

.footer-support-card__eyebrow {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.footer-support-card__title {
  color: rgba(236, 232, 255, 0.72);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0;
}

.footer-support-card__text {
  color: rgba(236, 232, 255, 0.58);
  font-size: 14px;
  line-height: 1.6;
}

.footer-support-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d5df6, #8b5cf6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 36px rgba(109, 93, 246, 0.26),
    0 0 28px rgba(139, 92, 246, 0.28);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

/* Pass 11: .footer-support-card__icon inherited the generic .icon-glass
   sizing (72px, style.css) meant for large standalone icon tiles — far
   too big for a 50px-tall button row, and its faint violet glass fill
   nearly disappeared against this button's own bright violet gradient.
   Sized down to fit the row and switched to a dark chip so the icon has
   real contrast against the gradient instead of blending into it. */
.footer-support-card__btn .footer-support-card__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  background: rgba(7, 7, 12, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 14px rgba(46, 16, 101, 0.4);
  flex: 0 0 auto;
}

.footer-support-card__btn .footer-support-card__icon img {
  width: 17px;
  height: 17px;
}

.footer-support-card__btn:hover,
.footer-support-card__btn:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 22px 46px rgba(109, 93, 246, 0.32),
    0 0 34px rgba(139, 92, 246, 0.34);
}

.footer-bottom {
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(180, 150, 255, 0.1);
}

.footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(236, 232, 255, 0.48);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-copy {
  color: rgba(236, 232, 255, 0.48);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-copy a {
  color: #c4b5fd;
}

.footer-payment-pill {
  min-height: 32px;
  border-radius: 999px;
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

@media (min-width: 901px) {
  .footer-shell {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 280px;
    gap: 30px 34px;
    align-items: start;
    padding-right: 40px;
    padding-left: 40px;
  }

  .footer-top {
    display: contents;
  }

  .footer-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-support-card {
    grid-column: 3;
    grid-row: 1;
  }

  .footer-links-grid,
  .footer-columns {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    grid-template-columns: 0.92fr 1.06fr 1.18fr 0.84fr;
    gap: 20px;
  }

  .footer-links-grid a,
  .footer-columns a,
  .footer-col ul li a {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .footer-support-card {
    padding: 24px 22px;
  }

  .footer-bottom {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .site-footer {
    padding: 58px 0 42px;
  }

  .site-footer .container {
    width: min(100% - 32px, 1180px);
  }

  .footer-shell {
    padding: 34px 28px 26px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-links-grid,
  .footer-columns {
    margin-top: 36px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .footer-shell {
    padding: 28px 20px 22px;
    border-radius: 24px;
  }

  .footer-links-grid,
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-description,
  .footer-brand p {
    max-width: none;
  }

  .footer-payments {
    width: 100%;
    justify-content: flex-start;
  }
}

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

/* Commerce/service pages: premium EGIRLZ layer.
   This block is intentionally visual-only and does not touch WooCommerce form logic. */
.cartmain,
.checkoutmain {
  padding-top: 0 !important;
}

.eg-commerce-page,
.woocommerce-account main,
.woocommerce-cart main,
.woocommerce-checkout main {
  margin-top: 0 !important;
}

.my-account-wrapper.eg-commerce-page,
.eg-cart.eg-commerce-page,
.eg-empty-cart.eg-commerce-page,
.eg-checkout-page.eg-commerce-page,
.eg-ty.eg-commerce-page {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--header-height, 64px));
  padding-top: clamp(82px, 8vw, 112px);
  padding-bottom: clamp(42px, 6vw, 84px);
  /* Cleanup: the 2nd/3rd stops here used to be an off-palette blue
     (rgba(59,130,246,...)) and a hot pink/magenta (rgba(236,72,153,...)) —
     this shared background sits behind checkout/cart/account/thank-you,
     so the stray hues were the source of the "colors feel random" / "no
     pink" complaint. Replaced both with the same violet/lavender family
     used on profile and catalog. */
  background:
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, 0.12), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(109, 93, 246, 0.08), transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(168, 155, 255, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(7, 7, 10, 0.96), rgba(7, 7, 10, 0.9));
  color: #f7f3ff;
}

.eg-cart.eg-commerce-page,
.eg-empty-cart.eg-commerce-page,
.eg-checkout-page.eg-commerce-page,
.eg-ty.eg-commerce-page {
  isolation: isolate;
}

.eg-cart.eg-commerce-page::before,
.eg-empty-cart.eg-commerce-page::before,
.eg-checkout-page.eg-commerce-page::before,
.eg-ty.eg-commerce-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 181, 253, 0.08), transparent 22%),
    radial-gradient(circle at 86% 8%, rgba(139, 92, 246, 0.08), transparent 26%);
  opacity: 0.92;
}

.my-account-wrapper.eg-commerce-page {
  max-width: min(100% - 32px, 1180px);
  padding-inline: 0;
}

.my-account-wrapper.eg-commerce-page .egirlz-account-content,
.my-account-wrapper.eg-commerce-page .woocommerce-MyAccount-content {
  border-radius: 28px;
}

.eg-auth-wrap {
  padding-top: clamp(18px, 3vw, 34px) !important;
  padding-bottom: clamp(32px, 5vw, 72px) !important;
}

.eg-auth-card {
  width: min(100% - 32px, 460px) !important;
  max-width: 460px !important;
  padding: clamp(28px, 4vw, 42px) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.18), transparent 42%),
    rgba(17, 16, 27, 0.86) !important;
  border: 1px solid rgba(180, 150, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 32px 90px rgba(0, 0, 0, 0.36),
    0 0 70px rgba(139, 92, 246, 0.1) !important;
}

.eg-auth-avatar {
  overflow: hidden;
}

.eg-auth-avatar__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.eg-auth-subtitle {
  max-width: 320px;
  margin: 8px auto 0 !important;
  color: rgba(236, 232, 255, 0.62) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.eg-auth-trust-row,
.eg-empty-cart__trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(100% - 32px, 620px);
  margin: 18px auto 0;
}

.eg-auth-trust-row span,
.eg-empty-cart__trust span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 150, 255, 0.12);
  color: rgba(246, 242, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
}

.eg-cart.eg-commerce-page {
  width: min(100% - 32px, 1120px);
  max-width: 1120px;
  padding-inline: 0;
}

.eg-empty-cart.eg-commerce-page {
  width: min(100% - 32px, 1120px);
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 0;
}

.eg-cart__header,
.eg-empty-cart__hero,
.eg-checkout-stepper,
.eg-ty-hero {
  margin-top: 0 !important;
}

.eg-empty-cart__title {
  letter-spacing: -0.045em;
}

.eg-empty-cart__cta,
.eg-cart__checkout-btn,
.eg-auth-submit,
.eg-checkout-card #payment #place_order,
.eg-checkout-page #place_order,
.eg-ty-btn,
.support-cta__button,
.footer-support-card__btn,
.discord-cta {
  will-change: transform;
}

.eg-empty-cart__cta:hover,
.eg-cart__checkout-btn:hover,
.eg-auth-submit:hover,
.eg-checkout-card #payment #place_order:hover,
.eg-checkout-page #place_order:hover,
.eg-ty-btn:hover,
.support-cta__button:hover,
.footer-support-card__btn:hover,
.discord-cta:hover {
  transform: translateY(-1px);
}

.eg-cart__item,
.eg-cart__summary-card,
.eg-empty-cart__hero,
.eg-empty-cart__girl-card,
.eg-checkout-card,
.eg-ty-card,
.eg-help-quick-card,
.eg-help-guide-card,
.eg-help-doc-card {
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.eg-empty-cart__girl-card:hover,
.eg-help-quick-card:hover,
.eg-help-guide-card:hover,
.eg-help-doc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(180, 150, 255, 0.24);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(139, 92, 246, 0.12);
}

.eg-checkout-page.eg-commerce-page {
  width: min(100% - 32px, 1200px);
  max-width: 1200px;
  padding-inline: 0;
  padding-top: clamp(24px, 3vw, 42px);
}

/* Conversion intro above the coupon pill/stepper — same gradient-title
   treatment used on the cart page header, centered since this intro block
   sits above the full two-column layout rather than beside item count.
   Named eg-checkout-intro (not eg-checkout-header) to avoid colliding with
   the pre-existing "Old header / breadcrumb — hidden when stepper present"
   .eg-checkout-header { display: none; } rule in style.css. */
.eg-checkout-intro {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(20px, 3vw, 30px);
  animation: eg-co-fadeUp 0.5s ease both;
}

.eg-checkout-intro-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 900;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #fff, #d4b5ff 60%, #b17eff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eg-checkout-intro-subtitle {
  margin: 0;
  color: #a99cc8;
  font-size: 14px;
  line-height: 1.55;
}

.eg-checkout-stepper {
  padding-top: 0 !important;
  gap: 8px;
}

.eg-step__icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.eg-step__line--done {
  background: linear-gradient(90deg, #6d5df6, #8b5cf6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.22);
}

.eg-checkout-trust {
  border-color: rgba(180, 150, 255, 0.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.08), transparent 55%),
    rgba(255, 255, 255, 0.035);
}

.eg-checkout-trust-item {
  color: rgba(246, 242, 255, 0.76);
  font-weight: 750;
}

.eg-checkout-col--right {
  position: sticky;
  top: 84px;
}

.eg-ty.eg-commerce-page {
  width: min(100% - 32px, 1080px);
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 0;
}

.eg-ty--attention .eg-ty-title {
  background: linear-gradient(135deg, #fff, #fecdd3 55%, #fb7185);
  -webkit-background-clip: text;
  background-clip: text;
}

.eg-ty--attention .eg-ty-tg-btn {
  background: linear-gradient(135deg, #fb7185, #8b5cf6);
}

.eg-ty-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eg-ty-actions .eg-ty-btn {
  min-width: 0;
  text-align: center;
}

.eg-ty-timeline-dot span {
  font-size: 12px;
  font-weight: 950;
}

.card-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.eg-blog-card,
.clickable-card {
  position: relative;
}

.eg-blog-card > *:not(.card-stretched-link) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.eg-blog-card .interactive-inside {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.eg-help-page {
  margin-top: 0 !important;
}

.eg-help-hero {
  padding-top: clamp(82px, 8vw, 112px);
}

.eg-help-page .eg-discord-promo--help {
  width: min(100% - 48px, 980px);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .my-account-wrapper.eg-commerce-page,
  .eg-cart.eg-commerce-page,
  .eg-empty-cart.eg-commerce-page,
  .eg-checkout-page.eg-commerce-page,
  .eg-ty.eg-commerce-page {
    width: min(100% - 24px, 100%);
    padding-top: 78px;
    padding-bottom: 48px;
  }

  .eg-checkout-col--right {
    position: static;
  }

  .eg-checkout-page.eg-commerce-page {
    padding-top: 28px;
  }

  .eg-checkout-stepper {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 24px;
    scrollbar-width: none;
  }

  .eg-checkout-stepper::-webkit-scrollbar {
    display: none;
  }

  .eg-step__line {
    flex-basis: 32px;
  }

  .eg-ty-actions {
    grid-template-columns: 1fr;
  }

  .eg-help-page .eg-discord-promo--help {
    width: min(100% - 32px, 980px);
  }
}

@media (max-width: 560px) {
  .eg-auth-trust-row,
  .eg-empty-cart__trust {
    justify-content: flex-start;
  }

  .eg-checkout-stepper {
    gap: 6px;
  }

  .eg-step__line {
    flex-basis: 22px;
    margin-inline: 0;
  }

  .eg-step__label {
    max-width: 76px;
    white-space: normal;
    text-align: center;
  }
}

/* Commerce/account pages: full-width premium architecture v2.
   The page owns the atmosphere; only .eg-commerce-shell constrains content. */
.cartmain,
.checkoutmain {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* .cartmain/.checkoutmain both stay transparent so the shared, fixed
   .eg-site-background (violet glows/particles) shows through instead of
   being flattened by an opaque section background — this was the "dark
   overlay" on the cart page, and the same rule was blocking the background
   on checkout (section.checkoutmain had background: #07070b, fully opaque,
   painted in front of the fixed global background). */
.cartmain,
.checkoutmain {
  background: transparent;
}

.cartmain > .container,
.checkoutmain > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-account .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-order-received .site-main,
.woocommerce-account .entry-content,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-order-received .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eg-commerce-page,
.my-account-wrapper.eg-commerce-page,
.eg-cart.eg-commerce-page,
.eg-empty-cart.eg-commerce-page,
.eg-checkout-page.eg-commerce-page,
.eg-ty.eg-commerce-page {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - var(--header-height, 64px));
  margin: 0 !important;
  padding: clamp(42px, 6vw, 78px) 0 clamp(48px, 7vw, 90px) !important;
  overflow-x: clip;
  isolation: isolate;
  color: #f7f3ff;
  background:
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, 0.13), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(109, 93, 246, 0.08), transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(124, 92, 255, 0.07), transparent 36%),
    linear-gradient(180deg, #07070b 0%, #0a0711 46%, #07070b 100%);
  box-sizing: border-box;
}

.eg-commerce-page *,
.eg-commerce-page *::before,
.eg-commerce-page *::after {
  box-sizing: border-box;
}

.eg-commerce-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 181, 253, 0.09), transparent 22%),
    radial-gradient(circle at 86% 8%, rgba(124, 92, 255, 0.08), transparent 26%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.025), transparent 32%, rgba(139, 92, 246, 0.035) 74%, transparent);
  opacity: 0.96;
}

/* Override pink/magenta spots for empty cart page */
.eg-empty-cart.eg-commerce-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, 0.13), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(109, 93, 246, 0.09), transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(184, 168, 255, 0.06), transparent 36%),
    linear-gradient(180deg, #07070b 0%, #0a0711 46%, #07070b 100%);
}

.eg-empty-cart.eg-commerce-page::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 181, 253, 0.09), transparent 22%),
    radial-gradient(circle at 85% 8%, rgba(124, 92, 255, 0.08), transparent 26%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.025), transparent 32%, rgba(139, 92, 246, 0.035) 74%, transparent);
}

/* Override pink/magenta spots for thank-you page only */
.eg-ty.eg-commerce-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, 0.13), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(109, 93, 246, 0.08), transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(184, 168, 255, 0.06), transparent 36%),
    linear-gradient(180deg, #07070b 0%, #0a0711 46%, #07070b 100%);
}

.eg-ty.eg-commerce-page::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 181, 253, 0.09), transparent 22%),
    radial-gradient(circle at 85% 8%, rgba(124, 92, 255, 0.08), transparent 26%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.025), transparent 32%, rgba(139, 92, 246, 0.035) 74%, transparent);
}

.eg-commerce-shell {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1180px);
  max-width: 1180px;
  margin-inline: auto;
  min-width: 0;
}

.eg-account-shell--auth {
  width: min(100% - 48px, 1080px);
  max-width: 1080px;
}

.eg-ty-shell {
  width: min(100% - 48px, 1080px);
  max-width: 1080px;
}

.eg-auth-wrap {
  min-height: auto !important;
  padding: clamp(16px, 3vw, 34px) 0 clamp(32px, 5vw, 72px) !important;
  /* form-login.php's own inline <style> sets display:flex with no
     flex-direction, so its two children (.eg-auth-card and the trust
     badges row that used to live here) were laid out as a ROW and
     centered as a pair -- reading as "trust badges to the right of the
     form" instead of stacked below it. Force column so anything inside
     stacks vertically and centers on its own line, and drop the inline
     overflow:hidden, which combined with the squashed min-height above
     was hard-clipping the two blurred glow orbs right at this box's own
     edges -- the "rectangular cut glow" complaint. Nothing inside needs
     scroll containment: the orbs are decorative/pointer-events:none, and
     the page already clips horizontal overflow site-wide via
     .eg-commerce-page's overflow-x:clip. */
  flex-direction: column !important;
  overflow: visible !important;
}

.eg-account-shell--auth .eg-auth-card {
  max-width: 480px !important;
}

/* .my-account-wrapper.eg-commerce-page is unique to this page (cart/
   checkout/thank-you use their own .eg-cart/.eg-checkout-page/.eg-ty root
   classes), so flexing it as a column here is safe for both the auth and
   logged-in dashboard states -- a single block child stacks the same way
   in a column flex container as it would with normal block flow. */
.my-account-wrapper.eg-commerce-page {
  display: flex;
  flex-direction: column;
  /* The shared .eg-commerce-page rule above sets
     min-height: calc(100vh - header) so cart/checkout/thank-you always
     fill the viewport. On the auth/login screen that backfired: once the
     viewport got taller than the card's natural height (tall window,
     browser zoom-out), this min-height force-stretched the box, and the
     margin-block:auto centering that used to live here on the card's
     wrapper absorbed 100% of that extra height as growing top/bottom
     margin -- the card stayed centered, but the gap down to the footer
     kept inflating with viewport height instead of staying constant
     ("gap grows on zoom out"). Overriding back to auto makes this box's
     height track its own content again, same single-selector specificity
     as the shared rule but declared later, so spacing now comes only
     from the bounded clamp() paddings already set on .eg-auth-wrap and
     on the shared rule itself -- constant regardless of viewport height. */
  min-height: auto !important;
}

/* The hard horizontal seam between the auth card and the footer traced
   back to style.css's generic .site-footer::before -- a 320px circle
   blurred 120px and pulled up via top:-110px so its glow bleeds into
   whatever sits above the footer. .site-footer also has overflow:hidden
   (style.css), so that upward bleed gets hard-clipped in a dead-straight
   line exactly at the footer's own top edge instead of fading out --
   confirmed by toggling this pseudo-element off and watching the band
   disappear pixel-for-pixel. Scoped via the adjacent-sibling combinator
   (.my-account-wrapper.eg-commerce-page is unique to this page, and
   footer.php always renders right after main in the DOM), so every other
   page keeps this glow untouched. The page already has its own ambient
   glow from the global .eg-site-background layer plus .eg-auth-card's
   own glow, so the footer doesn't need a second, clipped one here. */
.my-account-wrapper.eg-commerce-page + .site-footer::before {
  content: none;
  display: none;
}

.my-account-wrapper.eg-commerce-page .egirlz-account-content,
.my-account-wrapper.eg-commerce-page .woocommerce-MyAccount-content {
  width: 100%;
  max-width: none;
}

.eg-account-nav {
  width: 100%;
}

.eg-cart__shell,
.eg-empty-cart__shell,
.eg-checkout-shell,
.eg-ty-shell {
  display: block;
}

.eg-cart__layout,
.eg-checkout-form {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: clamp(24px, 3vw, 38px);
  align-items: start;
}

.eg-checkout-form {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
}

.eg-cart__items-col,
.eg-checkout-col,
.eg-checkout-card,
.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.eg-ty-grid,
.eg-ty-card {
  min-width: 0;
}

.eg-cart__summary-col,
.eg-checkout-col--right {
  position: sticky;
  top: calc(var(--header-height, 64px) + 24px);
}

.eg-empty-cart.eg-commerce-page .eg-empty-cart__hero,
.eg-cart.eg-commerce-page .eg-cart__item,
.eg-cart.eg-commerce-page .eg-cart__summary-card,
.eg-checkout-page.eg-commerce-page .eg-checkout-card,
.eg-ty.eg-commerce-page .eg-ty-card,
.my-account-wrapper.eg-commerce-page .egirlz-account-content,
.my-account-wrapper.eg-commerce-page .woocommerce-MyAccount-content {
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 0%, rgba(139, 92, 246, 0.12), transparent 38%),
    rgba(18, 17, 28, 0.84);
  border: 1px solid rgba(180, 150, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.eg-empty-cart.eg-commerce-page .eg-empty-cart__hero {
  padding: clamp(42px, 6vw, 70px) clamp(22px, 4vw, 44px);
  margin-bottom: clamp(24px, 4vw, 38px);
}

/* Cart-only premium glass refinement (scoped to .eg-cart, does not affect
   checkout/account/thank-you which share the rule above). */
.eg-cart.eg-commerce-page .eg-cart__item {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.1), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(168, 155, 255, 0.06), transparent 46%),
    rgba(18, 17, 28, 0.78);
  border-color: rgba(180, 150, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 50px rgba(0, 0, 0, 0.3);
}

.eg-cart.eg-commerce-page .eg-cart__summary-card {
  background:
    radial-gradient(circle at 82% 0%, rgba(139, 92, 246, 0.16), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(168, 155, 255, 0.08), transparent 46%),
    rgba(18, 17, 28, 0.88);
  border-color: rgba(180, 150, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 80px rgba(0, 0, 0, 0.34),
    0 0 60px rgba(139, 92, 246, 0.08);
}

.eg-empty-cart.eg-commerce-page,
.eg-cart.eg-commerce-page {
  font-family: "Muller", sans-serif;
}

.eg-empty-cart.eg-commerce-page .eg-empty-cart__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eg-commerce-page img,
.eg-commerce-page svg,
.eg-commerce-page video {
  max-width: 100%;
}

.eg-commerce-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.qty),
.eg-commerce-page textarea,
.eg-commerce-page select,
.eg-commerce-page .woocommerce input.input-text,
.eg-commerce-page .woocommerce textarea,
.eg-commerce-page .woocommerce select {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(180, 150, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #f7f3ff !important;
  padding: 0 16px;
  outline: none;
}

.eg-commerce-page textarea {
  min-height: 120px;
  padding-top: 14px;
  resize: vertical;
}

/* The shared field skin above (higher-specificity .eg-commerce-page
   input:not(...) selector) overrides form-login.php's own
   ".eg-field input { padding: 15px 16px 15px 48px; }" down to a flat
   "0 16px", wiping out the left clearance for the decorative icon inside
   .eg-field -- text and icon were rendering on top of each other on the
   login/register screen. Restore just the left padding, scoped to the
   auth fields only, so cart/checkout/other .eg-commerce-page inputs that
   don't have an .eg-field-icon keep their normal 16px padding. */
.eg-commerce-page .eg-field input {
  padding-left: 48px !important;
}

.eg-commerce-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.qty):focus,
.eg-commerce-page textarea:focus,
.eg-commerce-page select:focus {
  border-color: rgba(139, 92, 246, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.eg-commerce-page button:not(.eg-auth-tab):not(.eg-qty-btn):not(.plus):not(.minus):not(.eg-ty-tip-btn):not(.eg-account-nav__link):not(.eg-topup-preset):not(.eg-topup-submit):not(.eg-balance-panel__btn),
.eg-commerce-page .button,
.eg-commerce-page input[type="submit"],
.eg-commerce-page .checkout-button,
.eg-commerce-page .eg-cart__checkout-btn,
.eg-commerce-page .eg-empty-cart__cta,
.eg-commerce-page .eg-ty-btn {
  min-height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6d5df6, #8b5cf6);
  color: #fff !important;
  font-weight: 900;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 0 28px rgba(139, 92, 246, 0.28),
    0 18px 40px rgba(91, 75, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

.eg-commerce-page button:not(.eg-auth-tab):not(.eg-qty-btn):not(.plus):not(.minus):not(.eg-ty-tip-btn):not(.eg-account-nav__link):not(.eg-topup-preset):not(.eg-topup-submit):not(.eg-balance-panel__btn):hover,
.eg-commerce-page .button:hover,
.eg-commerce-page input[type="submit"]:hover,
.eg-commerce-page .checkout-button:hover,
.eg-commerce-page .eg-cart__checkout-btn:hover,
.eg-commerce-page .eg-empty-cart__cta:hover,
.eg-commerce-page .eg-ty-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 0 34px rgba(139, 92, 246, 0.36),
    0 20px 48px rgba(91, 75, 255, 0.22);
}

.eg-commerce-page .eg-auth-tab,
.eg-commerce-page .eg-cart__coupon-btn,
.eg-commerce-page .eg-cart__remove-btn,
.eg-commerce-page .eg-qty-btn,
.eg-commerce-page .quantity .plus,
.eg-commerce-page .quantity .minus {
  min-height: 0;
}

.eg-commerce-page .eg-ty-btn--outline {
  background: transparent;
  border: 1px solid rgba(180, 150, 255, 0.24);
  color: #d8ccff !important;
  box-shadow: none;
}

.eg-commerce-page .eg-ty-btn--ghost {
  background: transparent;
  color: rgba(236, 232, 255, 0.62) !important;
  box-shadow: none;
}

.eg-commerce-page .eg-ty-btn--outline:hover,
.eg-commerce-page .eg-ty-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.eg-commerce-page .woocommerce-notices-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
}

.eg-commerce-page .woocommerce-error,
.eg-commerce-page .woocommerce-info,
.eg-commerce-page .woocommerce-message {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(180, 150, 255, 0.14) !important;
  border-left: 3px solid #8b5cf6 !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(139, 92, 246, 0.11), transparent 34%),
    rgba(18, 17, 28, 0.86) !important;
  color: rgba(247, 243, 255, 0.9) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  list-style: none !important;
}

.eg-commerce-page .woocommerce-error {
  border-left-color: #fb7185 !important;
}

.eg-commerce-page .woocommerce-message {
  border-left-color: #45f882 !important;
}

.eg-checkout-stepper,
.eg-ty-timeline,
.eg-ty-timeline-skeleton {
  max-width: 100%;
}

.eg-checkout-page.eg-commerce-page .eg-checkout-stepper {
  padding-top: 0 !important;
}

.eg-ty.eg-commerce-page .eg-ty-hero {
  padding-top: 0;
}

.eg-ty.eg-commerce-page .eg-ty-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 26px);
}

.woocommerce-account .eg-ty {
  width: 100%;
  max-width: none;
}

.woocommerce-account .site-footer .container,
.woocommerce-cart .site-footer .container,
.woocommerce-checkout .site-footer .container,
.woocommerce-order-received .site-footer .container,
.cartmain + .site-footer .container,
.checkoutmain + .site-footer .container {
  width: min(100% - 48px, 1180px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 980px) {
  .eg-commerce-page,
  .my-account-wrapper.eg-commerce-page,
  .eg-cart.eg-commerce-page,
  .eg-empty-cart.eg-commerce-page,
  .eg-checkout-page.eg-commerce-page,
  .eg-ty.eg-commerce-page {
    padding-top: clamp(28px, 7vw, 48px) !important;
    padding-bottom: 56px !important;
  }

  .eg-cart__layout,
  .eg-checkout-form,
  .eg-ty.eg-commerce-page .eg-ty-grid {
    grid-template-columns: 1fr;
  }

  .eg-cart__summary-col,
  .eg-checkout-col--right {
    position: static;
  }

  .eg-empty-cart.eg-commerce-page .eg-empty-cart__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eg-checkout-stepper {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .eg-checkout-stepper::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .eg-commerce-shell,
  .eg-account-shell--auth,
  .eg-ty-shell {
    width: min(100% - 28px, 1180px);
  }

  .eg-empty-cart.eg-commerce-page .eg-empty-cart__hero,
  .eg-cart.eg-commerce-page .eg-cart__summary-card,
  .eg-checkout-page.eg-commerce-page .eg-checkout-card,
  .eg-ty.eg-commerce-page .eg-ty-card,
  .my-account-wrapper.eg-commerce-page .egirlz-account-content,
  .my-account-wrapper.eg-commerce-page .woocommerce-MyAccount-content {
    border-radius: 22px;
    padding: 22px;
  }

  .eg-cart__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .eg-cart__coupon-row,
  .eg-order-pay-coupon__row,
  .eg-ty-tip-custom {
    flex-direction: column;
  }

  .eg-cart__coupon-btn,
  .eg-order-pay-coupon__button,
  .eg-ty-tip-submit {
    width: 100% !important;
    min-width: 0 !important;
  }

  .eg-ty-timeline,
  .eg-ty-timeline-skeleton {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .woocommerce-account .site-footer .container,
  .woocommerce-cart .site-footer .container,
  .woocommerce-checkout .site-footer .container,
  .woocommerce-order-received .site-footer .container,
  .cartmain + .site-footer .container,
  .checkoutmain + .site-footer .container {
    width: min(100% - 28px, 1180px);
  }
}

@media (max-width: 430px) {
  .eg-empty-cart.eg-commerce-page .eg-empty-cart__grid {
    grid-template-columns: 1fr;
  }

  .eg-cart__trust,
  .eg-checkout-trust,
  .eg-ty-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Checkout: login prompt + coupon accordion ──────────────────────────
   Scoped to .eg-checkout-page only (not cart/account) so this never
   touches the cart's own coupon/login notices. The underlying WooCommerce
   login form/toggle link/JS handler are left in the DOM untouched — this
   only hides the prompt visually, per the task's explicit "visually hide,
   don't break functionality" instruction. Login is still reachable from
   the header account icon. */
.eg-checkout-page .woocommerce-form-login-toggle {
  display: none !important;
}

/* Coupon notice: replaced the full-width generic info bar with a compact
   pill — reads as a small optional accordion trigger instead of a
   site-wide notice competing with the form above it. */
.eg-checkout-page .woocommerce-form-coupon-toggle {
  margin: 0 0 16px !important;
}

.eg-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  padding: 9px 16px 9px 13px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(177, 126, 255, 0.22) !important;
  border-left: 1px solid rgba(177, 126, 255, 0.22) !important;
  background: rgba(125, 84, 255, 0.08) !important;
  box-shadow: none !important;
  font-size: 13px;
  color: rgba(247, 243, 255, 0.7);
}

.eg-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b17eff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.91-6.91a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7' cy='7' r='1.3' fill='%23b17eff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.eg-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: #b17eff !important;
  font-weight: 700;
  text-decoration: none;
}

.eg-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover {
  text-decoration: underline;
}

.eg-checkout-page .eg-coupon-toggle-sub {
  display: block;
  margin-top: 6px;
  margin-left: 4px;
  font-size: 12px;
  color: rgba(247, 243, 255, 0.45);
}

/* Expanded coupon form: compact, matches the pill it opens from rather
   than the wide default Woo block. */
.eg-checkout-page .checkout_coupon.woocommerce-form-coupon {
  max-width: 420px;
}

/* Coupon slot inside the order summary card (relocated via JS — see
   form-checkout.php). Sits between the totals table and the payment
   section, so it gets its own breathing room + soft dividers on both
   sides instead of inheriting the old "floating pill above the stepper"
   spacing. */
.eg-checkout-card--order .eg-checkout-coupon-slot {
  margin: 18px 0 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(177, 126, 255, 0.1);
}

.eg-checkout-card--order .eg-checkout-coupon-slot .woocommerce-form-coupon-toggle {
  margin: 0 !important;
}

.eg-checkout-card--order .eg-checkout-coupon-slot .checkout_coupon.woocommerce-form-coupon {
  max-width: 100%;
  margin-top: 12px;
}

/* Subtle microtrust line — replaces the old 3-pill badge strip. Small,
   muted, integrated under the place-order button instead of a separate
   bordered block. Same claims as before, just calmer. */
.eg-checkout-microtrust {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(247, 243, 255, 0.42);
  letter-spacing: 0.01em;
}

.eg-checkout-microtrust-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
}

.eg-checkout-microtrust-dot--safe {
  background: #45f882;
  box-shadow: 0 0 6px rgba(69, 248, 130, 0.5);
}

.eg-checkout-microtrust-sep {
  margin: 0 7px;
  color: rgba(177, 126, 255, 0.4);
}

/* Visual field grouping inside the left contacts card — purely additive
   labels anchored to the existing WooCommerce field-row ids (no template
   override, no change to field markup/names/validation). Mirrors the same
   field set on the "pay for order" retry page (form-pay.php), which renders
   the same billing keys through woocommerce_form_field() and gets the same
   #{key}_field ids. */
.eg-checkout-card #billing_first_name_field,
.eg-checkout-card #billing_tg_field,
.eg-checkout-card #billing_quest_field {
  position: relative;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(177, 126, 255, 0.1);
}

.eg-checkout-card #billing_first_name_field {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.eg-checkout-card #billing_first_name_field::before,
.eg-checkout-card #billing_tg_field::before,
.eg-checkout-card #billing_quest_field::before {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7db0;
}

.eg-checkout-card #billing_first_name_field::before {
  content: "Контакты";
}

.eg-checkout-card #billing_tg_field::before {
  content: "Удобная связь";
}

.eg-checkout-card #billing_quest_field::before {
  content: "Детали встречи";
}

/* ── Cart/checkout pages: restore full site ambient atmosphere ────────
   Cart/checkout/account/order-received all use the shared global
   .eg-site-background (header.php) at a dimmed "soft" density. That is
   intentionally left untouched for account/thank-you. This rule re-boosts
   it back to the same density used on home/catalog/profile when the
   cart/checkout page itself is present, using the EXISTING global
   background component (no new background system invented), and without
   touching header.php or any shared/other-page styling. */
@supports selector(:has(a)) {
  body:has(.eg-cart.eg-commerce-page) .eg-site-background[data-density="soft"] #eg-particles-canvas,
  body:has(.eg-empty-cart.eg-commerce-page) .eg-site-background[data-density="soft"] #eg-particles-canvas,
  body:has(.eg-checkout-page.eg-commerce-page) .eg-site-background[data-density="soft"] #eg-particles-canvas {
    opacity: 0.78;
  }

  body:has(.eg-cart.eg-commerce-page) .eg-site-background[data-density="soft"] .eg-bg-orb,
  body:has(.eg-empty-cart.eg-commerce-page) .eg-site-background[data-density="soft"] .eg-bg-orb,
  body:has(.eg-checkout-page.eg-commerce-page) .eg-site-background[data-density="soft"] .eg-bg-orb {
    opacity: 0.48;
  }
}

/* ── Cart add-ons / extra services (data-driven, see templates/cart.php) ── */
.eg-cart__addons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eg-cart__addons-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eg-cart__addons-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.eg-cart__addons-subtitle {
  margin: 0;
  font-size: 13px;
  color: #a99cc8;
}

.eg-cart__addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.eg-cart__addon-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24, 14, 51, 0.6), rgba(16, 8, 32, 0.42));
  border: 1px solid rgba(177, 126, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.eg-cart__addon-card:hover {
  border-color: rgba(177, 126, 255, 0.26);
  box-shadow: 0 14px 32px rgba(7, 4, 21, 0.35), 0 0 18px rgba(125, 84, 255, 0.08);
}

.eg-cart__addon-img {
  width: 100%;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(177, 126, 255, 0.14);
  display: block;
}

.eg-cart__addon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eg-cart__addon-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #efe8ff;
  line-height: 1.3;
}

.eg-cart__addon-price {
  font-size: 12.5px;
  font-weight: 600;
  color: #b17eff;
}

.eg-cart__addon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(177, 126, 255, 0.12);
  border: 1px solid rgba(177, 126, 255, 0.22);
  color: #d8cdff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.eg-cart__addon-btn:hover {
  background: linear-gradient(135deg, #6600ff, #8a33ff);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 500px) {
  .eg-cart__addons-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ── Per-item tariff add-ons accordion (real plan checkboxes / invite-friend
   data, see eg_get_plan_addon_catalog() in inc/ajax.php). Scoped to the cart
   page only; spans the full item card width regardless of the item's
   img/info/pricing column count. ── */
.eg-cart.eg-commerce-page .eg-cart__addons-accordion {
  grid-column: 2 / -1;
  margin-top: 0;
}

.eg-cart.eg-commerce-page .eg-cart__addons-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, .16), rgba(139, 92, 246, .07)),
    rgba(18, 15, 32, .74);
  border: 1px solid rgba(168, 139, 250, .24);
  color: rgba(248, 244, 255, .92);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 12px 26px rgba(0, 0, 0, .18),
    0 0 18px rgba(139, 92, 246, .08);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.eg-cart.eg-commerce-page .eg-cart__addons-toggle:hover {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, .24), rgba(139, 92, 246, .11)),
    rgba(20, 16, 34, .78);
  border-color: rgba(168, 139, 250, .40);
  color: #fff;
}

.eg-cart.eg-commerce-page .eg-cart__addons-chevron {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.eg-cart.eg-commerce-page .eg-cart__addons-toggle.is-open .eg-cart__addons-chevron {
  transform: rotate(180deg);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addons {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease,
    margin-top 0.22s ease;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addons.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addons-inner {
  overflow: hidden;
  min-height: 0;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addons-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 680px);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 0%, rgba(139, 92, 246, 0.12), transparent 50%),
    rgba(12, 11, 20, 0.84);
  border: 1px solid rgba(168, 132, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 24px rgba(139, 92, 246, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-label:hover {
  background: rgba(177, 126, 255, 0.08);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-check {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(177, 126, 255, 0.28);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-check::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 8px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
  background: linear-gradient(135deg, #6d5df6, #8b5cf6);
  clip-path: polygon(10% 45%, 35% 70%, 90% 10%, 100% 22%, 38% 92%, 0% 58%);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-input:checked + .eg-cart__tariff-addon-check {
  border-color: rgba(139, 92, 246, 0.7);
  background: rgba(139, 92, 246, 0.16);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-input:checked + .eg-cart__tariff-addon-check::after {
  opacity: 1;
  transform: scale(1);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-input:focus-visible + .eg-cart__tariff-addon-check {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-name {
  font-size: 13px;
  font-weight: 750;
  color: rgba(242, 236, 255, .88);
  line-height: 1.3;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-desc {
  font-size: 12px;
  color: #8a7db0;
  line-height: 1.3;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-price {
  font-size: 13px;
  font-weight: 800;
  color: #b17eff;
  white-space: nowrap;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addons-error {
  margin: 8px 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: #ff7a93;
}

/* Admin/WP_DEBUG-only diagnostic, shown when a booking cart item's plan_slug
   doesn't match any current real plan on the product (see templates/cart.php
   $tariff_legacy_notice). Never shown to ordinary customers. */
.eg-cart.eg-commerce-page .eg-cart__tariff-legacy-notice {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 122, 147, 0.08);
  border: 1px dashed rgba(255, 122, 147, 0.32);
  color: #ff9fb2;
  font-size: 12px;
  font-weight: 600;
}

.eg-cart.eg-commerce-page .eg-cart__tariff-addon-input:disabled ~ * {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .eg-cart.eg-commerce-page .eg-cart__tariff-addons {
    transition: none;
  }

  .eg-cart.eg-commerce-page .eg-cart__addons-chevron {
    transition: none;
  }
}

@media (max-width: 640px) {
  .eg-cart.eg-commerce-page .eg-cart__tariff-addon-label {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .eg-cart.eg-commerce-page .eg-cart__tariff-addon-price {
    grid-column: 2;
    margin-top: 2px;
  }
}

/* ── Account header balance control (overrides) ──────────────────────────── */
/* eg-header-balance-control CSS lives in eg-wallet.css */