:root {
  --bg: #050607;
  --surface: #090b0d;
  --surface-2: #0d1013;
  --surface-3: #12161a;
  --text: #f4f6f8;
  --text-soft: #c3c8cf;
  --muted: #747b85;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.19);
  --white: #ffffff;
  --success: #65d6a3;
  --warning: #e9bb70;
  --danger: #ee7b83;
  --page: min(1240px, calc(100vw - 40px));
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --pointer-x: 50vw;
  --pointer-y: 28vh;
  color-scheme: dark;
}

.staff-login {
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
}

.staff-login summary {
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.staff-login-fields {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.staff-login-fields label {
  display: grid;
  gap: 7px;
}

.staff-login-fields [hidden] {
  display: none;
}

.staff-login-fields label > span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 700;
}

.staff-login-fields input {
  min-height: 46px;
  padding: 0 14px;
}

.staff-login-button,
.admin-logout {
  min-height: 44px;
  border: 1px solid rgba(124, 92, 255, 0.5);
  border-radius: 10px;
  background: rgba(124, 92, 255, 0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.staff-login-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.admin-logout {
  margin: 0 0 18px auto;
  padding: 0 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 96px;
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  color: var(--text) !important;
  font-family:
    Manrope,
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  letter-spacing: -0.018em;
}

body::before {
  position: fixed !important;
  z-index: -2 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(255, 255, 255, 0.09),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 68%,
      #030405 100%
    ) !important;
}

body::after {
  position: fixed;
  z-index: 65;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    430px circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.105) 0%,
    rgba(255, 255, 255, 0.045) 30%,
    transparent 72%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 180ms ease;
}

body.pointer-glow-active::after {
  opacity: 1;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

.skip-link {
  z-index: 250 !important;
  background: #fff !important;
  color: #050607 !important;
}

/* Floating header */
.site-header {
  position: sticky !important;
  z-index: 80 !important;
  top: 14px !important;
  width: var(--page) !important;
  min-height: 62px !important;
  height: 62px !important;
  margin: 14px auto 0 !important;
  padding: 0 10px 0 18px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 999px !important;
  background: rgba(6, 8, 9, 0.78) !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

.brand-logo {
  width: 130px !important;
  height: auto !important;
  filter: none !important;
}

.desktop-nav {
  gap: 1px !important;
  padding: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

.desktop-nav a,
.mobile-nav a {
  padding: 9px 14px !important;
  border-radius: 999px !important;
  color: #828993 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.035em !important;
}

.desktop-nav a::after,
.desktop-nav a.active::after {
  display: none !important;
}

.desktop-nav a:hover,
.desktop-nav a.active,
.mobile-nav a:hover,
.mobile-nav a.active {
  background: #f4f5f6 !important;
  color: #070809 !important;
  box-shadow: none !important;
}

.header-actions {
  gap: 4px !important;
}

.icon-button,
.cart-button,
.account-button,
.ticket-button,
.admin-button,
.menu-button {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #bdc2c9 !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.icon-button:hover,
.cart-button:hover,
.account-button:hover,
.ticket-button:hover,
.admin-button:hover,
.menu-button:hover {
  border-color: var(--line-strong) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #fff !important;
}

.cart-button strong,
#adminNotificationCount {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-left: 6px !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #060708 !important;
  font-size: 9px !important;
}

#adminNotificationCount[hidden] {
  display: none !important;
}

/* v2.5 — wide hero composition and contained floating modules */
@media (min-width: 1121px) {
  :root {
    --page: min(1560px, calc(100vw - 40px));
  }

  .hero,
  .hero-reference,
  .hero-v2 {
    width: min(1800px, calc(100vw - 24px)) !important;
    grid-template-columns: minmax(0, 680px) minmax(560px, 650px) !important;
    justify-content: center !important;
    gap: clamp(56px, 5vw, 96px) !important;
    padding-inline: clamp(76px, 8vw, 154px) !important;
  }

  .hero-content {
    max-width: 680px !important;
  }

  .hero-visual {
    width: min(100%, 650px) !important;
  }

  .signal-lens {
    width: min(430px, 78vw);
  }
}

.hero-reference::marker {
  display: none;
}

.hero-side-rail {
  position: absolute;
  z-index: 4;
  top: 154px;
  bottom: 82px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: #666d76;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.18em;
  pointer-events: none;
  writing-mode: vertical-rl;
}

.hero-side-rail::before {
  position: absolute;
  inset: 44px 50%;
  width: 1px;
  content: "";
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.16) 18%,
    rgba(255, 255, 255, 0.16) 82%,
    transparent
  );
}

.hero-side-rail span,
.hero-side-rail b {
  position: relative;
  z-index: 1;
  padding: 8px 0;
  background: var(--bg);
}

.hero-side-rail b {
  color: #969da6;
  font-weight: 800;
}

.hero-side-rail-left {
  left: 22px;
  transform: rotate(180deg);
}

.hero-side-rail-right {
  right: 22px;
}

.hero-reference .hero-visual::before,
.hero-reference .hero-visual::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: clamp(70px, 8vw, 138px);
  height: 64%;
  content: "";
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.75;
  transform: translateY(-50%);
}

.hero-reference .hero-visual::before {
  right: calc(100% - 30px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent);
}

.hero-reference .hero-visual::after {
  left: calc(100% - 30px);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.025), transparent);
}

.signal-label {
  top: 5% !important;
  right: 1% !important;
  bottom: auto !important;
  left: auto !important;
  padding: 9px 13px !important;
  background: rgba(5, 7, 8, 0.92) !important;
  color: #e7eaee !important;
  white-space: nowrap;
  transform: none !important;
}

.hero-character-card {
  min-height: 0 !important;
  overflow: hidden !important;
}

.hero-character-card::before {
  display: none !important;
}

.character-stack {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 6px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.character-stack img,
.character-stack img:nth-child(2) {
  width: 100% !important;
  height: auto !important;
  max-width: 46px !important;
  aspect-ratio: 1 !important;
  margin: 0 auto !important;
  padding: 7px !important;
  object-fit: contain !important;
  transform: none !important;
}

.hero-live-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 2px 9px !important;
  align-items: end !important;
}

.hero-live-card small {
  grid-column: 2 !important;
}

@media (max-width: 840px) {
  .hero-side-rail {
    display: none;
  }

  .hero-reference .hero-visual::before,
  .hero-reference .hero-visual::after {
    display: none;
  }
}

@media (max-width: 1120px) {
  .hero-side-rail {
    display: none;
  }
}

@media (max-width: 590px) {
  .character-stack img,
  .character-stack img:nth-child(2) {
    max-width: 38px !important;
  }
}

/* Hero */
.hero,
.hero-reference,
.hero-v2 {
  position: relative !important;
  width: var(--page) !important;
  min-height: 760px !important;
  margin: -76px auto 0 !important;
  padding: 170px clamp(24px, 5vw, 74px) 86px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.96fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4vw, 58px) !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.hero::before {
  position: absolute !important;
  z-index: -1 !important;
  top: 88px !important;
  right: -120px !important;
  left: auto !important;
  display: block !important;
  width: 720px !important;
  height: 720px !important;
  content: "" !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.055),
    transparent 66%
  ) !important;
  box-shadow:
    0 0 0 86px rgba(255, 255, 255, 0.012),
    0 0 0 172px rgba(255, 255, 255, 0.008) !important;
  transform: none !important;
}

.hero::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-strong),
    transparent
  );
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: auto !important;
  max-width: 600px !important;
  margin: 0 !important;
  text-align: left !important;
}

.eyebrow {
  width: fit-content !important;
  margin: 0 0 28px !important;
  padding: 7px 11px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #9aa1aa !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
}

.eyebrow span {
  width: 6px !important;
  height: 6px !important;
  background: var(--success) !important;
  box-shadow: 0 0 16px rgba(101, 214, 163, 0.72) !important;
}

.hero-mark {
  display: none !important;
}

.hero h1,
.hero-reference h1 {
  max-width: 720px !important;
  margin: 0 !important;
  color: #f7f8f9 !important;
  font-size: clamp(52px, 5.55vw, 78px) !important;
  font-weight: 530 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.07em !important;
}

.hero h1 em,
.hero-reference h1 em {
  display: block !important;
  margin-top: 10px !important;
  background: linear-gradient(180deg, #fff 18%, #777e87 92%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 430 !important;
}

.hero-content > p,
.hero-reference .hero-content > p {
  max-width: 535px !important;
  margin: 28px 0 0 !important;
  color: #9299a3 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.hero-actions {
  justify-content: flex-start !important;
  margin-top: 32px !important;
  gap: 9px !important;
}

.primary-button,
.secondary-button,
.load-more,
.place-order-button,
.auth-submit,
.modal-buy button {
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.primary-button,
.place-order-button,
.auth-submit,
.modal-buy button {
  background: #f5f6f7 !important;
  color: #060708 !important;
}

.secondary-button,
.load-more {
  background: rgba(255, 255, 255, 0.025) !important;
  color: #d5d9de !important;
}

.primary-button:hover,
.secondary-button:hover,
.load-more:hover,
.place-order-button:hover,
.auth-submit:hover,
.modal-buy button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3) !important;
}

.hero-visual {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 560px) !important;
  min-height: 510px !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.signal-lens {
  position: relative;
  width: min(390px, 78vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.14),
      transparent 5%
    ),
    radial-gradient(
      circle,
      #101317 0 18%,
      #090b0d 18.5% 34%,
      #15191d 34.5% 35%,
      #07090b 35.5% 55%,
      transparent 55.5%
    );
  box-shadow:
    inset 0 0 70px rgba(255, 255, 255, 0.035),
    0 0 80px rgba(255, 255, 255, 0.045);
  transform: perspective(900px) rotateX(var(--lens-y, 0deg))
    rotateY(var(--lens-x, 0deg));
  transition: transform 0.18s ease-out;
}

.signal-lens::before,
.signal-lens::after {
  position: absolute;
  inset: 9%;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.signal-lens::after {
  inset: 24%;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.015);
}

.signal-scan {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  border-radius: 50%;
}

.signal-scan::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent);
  transform-origin: left center;
  animation: lens-scan 12s linear infinite;
}

.signal-core {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #080a0c;
  box-shadow: 0 0 44px rgba(255, 255, 255, 0.08);
}

.signal-core img {
  width: 62px;
  height: 62px;
}

.signal-label {
  position: absolute;
  right: 8%;
  bottom: 13%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(5, 7, 8, 0.78);
  color: #c5cad0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  backdrop-filter: blur(14px);
}

.signal-label i,
.hero-stock-line i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--success) !important;
  box-shadow: 0 0 14px rgba(101, 214, 163, 0.7) !important;
}

.hero-character-card {
  position: absolute !important;
  top: 6% !important;
  left: 0 !important;
  z-index: 4 !important;
  width: 180px !important;
  display: block !important;
  padding: 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: rgba(8, 10, 12, 0.76) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(16px) !important;
}

.character-stack {
  gap: 5px !important;
}

.character-stack img {
  width: 46px !important;
  height: 46px !important;
  padding: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.hero-live-card {
  margin-top: 11px !important;
  padding: 11px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  text-align: left !important;
}

.hero-live-card strong {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

.hero-live-card span,
.hero-live-card small {
  color: #707781 !important;
  font-size: 7px !important;
  letter-spacing: 0.09em !important;
}

.hero-category-row {
  position: absolute !important;
  right: 0 !important;
  bottom: 2% !important;
  z-index: 4 !important;
  width: 190px !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
}

.hero-category-row button {
  min-height: 47px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: rgba(8, 10, 12, 0.82) !important;
  color: #b9bec5 !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.hero-category-row button:hover {
  border-color: var(--line-strong) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateX(-3px) !important;
}

.hero-category-row img {
  width: 30px !important;
  height: 30px !important;
}

.hero-stock-line {
  display: none !important;
}

@keyframes lens-scan {
  to {
    transform: rotate(360deg);
  }
}

/* Compact proof strip */
.trust-strip,
.trust-strip-v2 {
  width: var(--page) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 0.8fr repeat(4, 1fr) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  background: rgba(9, 11, 13, 0.72) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.trust-strip-v2 .trust-label,
.trust-strip-v2 > div {
  min-height: 86px !important;
  padding: 18px !important;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
  background: transparent !important;
}

.trust-strip-v2 .trust-label {
  border-left: 0 !important;
  color: #707781 !important;
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
}

.trust-strip-v2 > div > span {
  color: #555c66 !important;
  font-size: 9px !important;
}

.trust-strip-v2 strong {
  color: #e8eaed !important;
  font-size: 11px !important;
}

.trust-strip-v2 small {
  color: #6e757f !important;
  font-size: 8px !important;
}

/* Shared continuous panels */
.catalog,
.why-us,
.vouches,
.payments,
.discord-cta {
  position: relative !important;
  width: var(--page) !important;
  margin: 18px auto 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 35%),
    rgba(8, 10, 12, 0.8) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}

.catalog::before,
.why-us::before,
.vouches::before,
.payments::before,
.discord-cta::before {
  position: absolute;
  top: -1px;
  left: 8%;
  width: 22%;
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.62),
    transparent
  );
}

.catalog {
  padding: clamp(30px, 4.6vw, 58px) !important;
}

.section-heading,
.vouches-heading {
  margin-bottom: 28px !important;
  padding-bottom: 25px !important;
  align-items: end !important;
  border-bottom: 1px solid var(--line) !important;
}

.section-kicker {
  color: #777e88 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0.17em !important;
}

.section-heading h2,
.why-us h2,
.vouches h2,
.payments h2,
.discord-cta h2 {
  margin-top: 8px !important;
  color: #f2f4f5 !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  font-weight: 520 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}

.section-heading > p,
.vouches-heading > p,
.why-copy > p,
.payments > div > p,
.discord-cta > p {
  color: #7f8791 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.catalog-toolbar {
  grid-template-columns: minmax(0, 1fr) 190px !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.search-field,
.catalog-toolbar select,
.mobile-filter-button {
  min-height: 48px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.022) !important;
  color: #c5cad0 !important;
  box-shadow: none !important;
}

.search-field:focus-within,
.catalog-toolbar select:focus {
  border-color: var(--line-strong) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.search-field input {
  background: transparent !important;
  color: #eef0f2 !important;
}

.search-field kbd {
  border: 1px solid var(--line) !important;
  background: #0b0d0f !important;
  color: #676e78 !important;
}

.category-tabs {
  gap: 5px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.category-tabs::-webkit-scrollbar {
  display: none !important;
}

.category-tab {
  min-height: 35px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #777e88 !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.category-tab:hover,
.category-tab.active {
  border-color: #e7e9eb !important;
  background: #e7e9eb !important;
  color: #08090a !important;
}

.category-tab > span,
.category-tab:hover > span,
.category-tab.active > span {
  display: none !important;
}

.catalog-layout {
  grid-template-columns: 236px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.filter-panel,
.catalog .filter-panel {
  position: sticky !important;
  top: 94px !important;
  max-height: calc(100vh - 116px) !important;
  padding: 13px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: rgba(5, 7, 8, 0.62) !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
}

.filter-panel::-webkit-scrollbar {
  width: 4px !important;
}

.filter-panel::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.filter-panel-head {
  padding: 3px 3px 13px !important;
  border-bottom: 1px solid var(--line) !important;
}

.filter-panel-head span,
.filter-label {
  color: #5f6670 !important;
  font-size: 7px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.filter-panel-head h3 {
  color: #eceef0 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.filter-panel-head button {
  border: 0 !important;
  background: transparent !important;
  color: #747b85 !important;
}

.sidebar-sections,
.subcategory-filters {
  gap: 3px !important;
}

.sidebar-section {
  min-height: 38px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #797f88 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  column-gap: 8px !important;
}

.sidebar-section > span,
.sidebar-section:hover > span,
.sidebar-section.active > span {
  display: none !important;
}

.sidebar-section::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  content: "";
  display: block !important;
  border: 0 !important;
  border-radius: 50%;
  background: #3e444d;
  box-shadow: none !important;
}

.sidebar-section::after {
  display: none !important;
}

.sidebar-section:hover,
.sidebar-section.active {
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sidebar-section.active::before {
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.32);
}

.sidebar-section b {
  font-size: 10px !important;
  font-weight: 650 !important;
}

.sidebar-section small {
  min-width: 22px !important;
  height: 19px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #666d76 !important;
  font-size: 8px !important;
}

.filter-option {
  min-height: 35px !important;
  padding: 0 7px !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #737a84 !important;
}

.filter-option:hover,
.filter-option:has(input:checked) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #eef0f2 !important;
}

.filter-check {
  width: 15px !important;
  height: 15px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #070809 !important;
}

.filter-option input:checked + .filter-check {
  background: #fff !important;
}

.switch-row,
.filter-card {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #bec3c9 !important;
  box-shadow: none !important;
}

.switch-row small,
.filter-card p {
  color: #676e77 !important;
}

.filter-card {
  margin-top: 12px !important;
  padding: 14px !important;
}

.filter-card span,
.filter-card strong,
.filter-card a {
  color: #dfe2e5 !important;
}

.results-line {
  margin: 0 0 10px !important;
  color: #747b84 !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.live-dot {
  color: var(--success) !important;
}

.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.product-card {
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: rgba(7, 9, 11, 0.86) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.product-card::before,
.product-card::after {
  display: none !important;
}

.product-card:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34) !important;
}

.product-art,
.product-image {
  min-height: 170px !important;
  margin: 6px 6px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, var(--card-a), var(--card-b)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08) !important;
}

.product-art img,
.product-image img {
  max-width: 66% !important;
  max-height: 66% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.38)) !important;
}

.quick-add {
  right: 9px !important;
  bottom: 9px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 7px !important;
  background: rgba(5, 7, 8, 0.8) !important;
  color: #fff !important;
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
  backdrop-filter: blur(10px) !important;
}

.quick-add:hover {
  background: #fff !important;
  color: #070809 !important;
}

.product-copy {
  padding: 14px !important;
}

.product-category {
  color: #717882 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
}

.product-card h3,
.product-title {
  min-height: 40px !important;
  margin: 7px 0 10px !important;
  color: #eef0f2 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.025em !important;
}

.product-facts {
  gap: 4px !important;
  margin-bottom: 10px !important;
}

.product-facts span {
  padding: 4px 6px !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #6d747e !important;
  font-size: 8px !important;
}

.product-stock,
.status-pill,
.cart-line-stock {
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #8c939c !important;
}

.product-stock {
  min-height: 33px !important;
  margin-bottom: 12px !important;
  padding: 0 8px !important;
}

.product-stock span,
.product-stock strong {
  color: inherit !important;
  font-size: 8px !important;
}

.product-stock.stock-live,
.status-pill.stock-live,
.cart-line-stock.stock-live {
  border-color: rgba(101, 214, 163, 0.2) !important;
  background: rgba(101, 214, 163, 0.055) !important;
  color: #72d9aa !important;
}

.product-stock.stock-low,
.status-pill.stock-low,
.cart-line-stock.stock-low {
  border-color: rgba(233, 187, 112, 0.2) !important;
  background: rgba(233, 187, 112, 0.055) !important;
  color: #e4bc7d !important;
}

.product-footer {
  padding-top: 11px !important;
  border-top: 1px solid var(--line) !important;
}

.product-footer p small {
  color: #626973 !important;
  font-size: 7px !important;
}

.product-footer p strong {
  color: #fff !important;
  font-size: 16px !important;
}

.product-footer > span {
  color: #818892 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.empty-state {
  border: 1px dashed var(--line-strong) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: #d8dbe0 !important;
}

/* Feature rail */
.why-us {
  min-height: 620px !important;
  padding: clamp(34px, 5vw, 64px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1fr) !important;
  gap: clamp(42px, 7vw, 92px) !important;
  align-items: center !important;
  overflow: hidden !important;
}

.why-us::after {
  position: absolute;
  right: -130px;
  bottom: -210px;
  width: 520px;
  height: 520px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  box-shadow:
    0 0 0 74px rgba(255, 255, 255, 0.01),
    0 0 0 148px rgba(255, 255, 255, 0.007);
  pointer-events: none;
}

.text-link,
.vouch-discord-link,
.filter-card a {
  color: #e0e3e6 !important;
  text-decoration: none !important;
}

.feature-slider {
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  box-shadow: none !important;
}

.feature-slider-topline {
  padding: 4px 4px 11px !important;
  color: #676e78 !important;
  font-size: 8px !important;
}

.feature-card {
  min-height: 420px !important;
  padding: 28px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(
      circle at 84% 14%,
      rgba(255, 255, 255, 0.07),
      transparent 29%
    ),
    #0b0e10 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.feature-icon {
  border: 1px solid var(--line-strong) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.feature-number {
  color: #555c66 !important;
}

.feature-card h3 {
  color: #f1f3f4 !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 520 !important;
  letter-spacing: -0.05em !important;
}

.feature-card p,
.feature-card-foot span,
.feature-card-foot b {
  color: #818892 !important;
}

.feature-card-foot {
  border-color: var(--line) !important;
}

.feature-slider-controls button,
.feature-dot {
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #c6cbd1 !important;
  box-shadow: none !important;
}

.feature-slider-controls button:hover,
.feature-dot.active {
  background: #fff !important;
  color: #070809 !important;
}

/* Feedback, payments, support */
.vouches,
.payments {
  padding: clamp(34px, 5vw, 62px) !important;
}

.vouch-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.vouch-card,
.vouch-empty {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.vouch-card p,
.vouch-empty p {
  color: #808791 !important;
}

.vouch-card .stars {
  color: #e9ebed !important;
}

.payments {
  display: grid !important;
  grid-template-columns: 0.72fr 1fr !important;
  align-items: center !important;
  gap: 58px !important;
}

.payment-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 7px !important;
}

.payment-grid span {
  min-height: 52px !important;
  padding: 0 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #c3c8ce !important;
}

.discord-cta {
  min-height: 420px !important;
  padding: 72px 30px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  overflow: hidden !important;
  text-align: center !important;
}

.discord-cta::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 62px rgba(255, 255, 255, 0.01),
    0 0 0 124px rgba(255, 255, 255, 0.007);
  pointer-events: none;
}

.discord-cta > span {
  color: #747b85 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0.18em !important;
}

.cta-ring {
  display: none !important;
}

/* Footer */
footer {
  width: var(--page) !important;
  margin: 18px auto 0 !important;
  padding: 48px 16px 38px !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
  color: #737a84 !important;
}

footer strong {
  color: #d6dade !important;
}

footer a,
footer p,
footer small {
  color: #727983 !important;
}

footer a:hover {
  color: #fff !important;
}

/* Drawers and dialogs */
.backdrop {
  background: rgba(0, 0, 0, 0.74) !important;
  backdrop-filter: blur(9px) !important;
}

.cart-drawer,
.product-modal,
.checkout-modal,
.auth-modal,
.admin-modal,
.ticket-modal {
  border: 1px solid var(--line-strong) !important;
  border-radius: 16px !important;
  background: #080a0c !important;
  color: var(--text) !important;
  box-shadow: 0 38px 130px rgba(0, 0, 0, 0.7) !important;
}

.drawer-head,
.modal-head,
.checkout-head,
.auth-head,
.admin-head {
  border-color: var(--line) !important;
}

.drawer-head h2,
.modal-title,
.checkout-head h2,
.auth-card h2,
.admin-shell h2,
.ticket-shell h2,
.checkout-shell h3 {
  color: #f1f3f5 !important;
}

.drawer-head button,
.checkout-close,
.modal-close,
.auth-close,
.admin-close {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #c5cad0 !important;
}

.cart-item,
.checkout-form-card,
.checkout-review,
.checkout-protection,
.checkout-reference,
.checkout-consent,
.payment-option,
.verification-option,
.auth-card,
.admin-order,
.admin-detail,
.customer-ticket-head,
.ticket-flow-note,
.ticket-delivery {
  border-color: var(--line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.022) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.cart-item-art,
.checkout-item-art,
.modal-art {
  border-color: var(--line) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, var(--card-a), var(--card-b)) !important;
}

input,
textarea,
select {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #06080a !important;
  color: #eef0f2 !important;
}

input::placeholder,
textarea::placeholder {
  color: #5f6670 !important;
}

.payment-option:has(input:checked),
.verification-option:has(input:checked),
.admin-order.active {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #fff !important;
}

.payment-icon,
.checkout-head-icon {
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

.checkout-card-label,
.payment-group-label,
.checkout-field-note,
.checkout-review .checkout-section-title span,
.checkout-review .checkout-reference > span {
  color: #78808a !important;
}

.checkout-review .checkout-section-title h3,
.checkout-review .checkout-item h4,
.checkout-review .checkout-item > strong,
.checkout-review .checkout-totals strong,
.checkout-review .checkout-totals .checkout-total,
.checkout-review .checkout-totals .checkout-total strong,
.checkout-review .checkout-reference strong,
.checkout-review .checkout-consent,
.checkout-review .checkout-consent label {
  color: #f0f2f4 !important;
}

.checkout-review .checkout-item small,
.checkout-review .checkout-totals > div,
.checkout-review .checkout-reference small,
.checkout-review .checkout-consent p,
.checkout-review .checkout-validation,
.checkout-review .checkout-disclaimer,
.checkout-payment-marks {
  color: #858c96 !important;
}

.checkout-review .checkout-totals,
.checkout-review .checkout-totals .checkout-total {
  border-color: var(--line) !important;
}

.checkout-review .checkout-section-title button {
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #d8dce1 !important;
}

.checkout-review .checkout-consent a {
  color: #e6e8eb !important;
}

.checkout-review .place-order-button {
  background: #f4f5f6 !important;
  color: #070809 !important;
  box-shadow: none !important;
}

.checkout-review .place-order-button:disabled {
  background: #8b8d8f !important;
  color: #242526 !important;
  opacity: 0.72 !important;
}

.toast {
  border: 1px solid #fff !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #070809 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.admin-actions button {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #dfe2e6 !important;
}

.admin-actions button:hover {
  border-color: var(--line-strong) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.admin-actions button:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

@media (max-width: 1120px) {
  :root {
    --page: min(960px, calc(100vw - 28px));
  }

  .desktop-nav a {
    padding-inline: 10px !important;
  }

  .account-button,
  .ticket-button,
  .admin-button {
    padding-inline: 9px !important;
  }

  .hero,
  .hero-reference,
  .hero-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr) !important;
    gap: 40px !important;
  }

  .signal-lens {
    width: 340px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .why-us {
    grid-template-columns: 1fr !important;
  }
  .why-copy {
    max-width: 650px !important;
  }
  .vouch-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 840px) {
  :root {
    --page: calc(100vw - 22px);
  }
  html {
    scroll-padding-top: 78px;
  }

  .site-header {
    top: 8px !important;
    min-height: 54px !important;
    height: 54px !important;
    margin-top: 8px !important;
    padding-left: 13px !important;
  }

  .desktop-nav,
  .header-actions > .icon-button,
  .header-actions > .account-button,
  .header-actions > .ticket-button,
  .header-actions > .admin-button {
    display: none !important;
  }
  .menu-button {
    display: grid !important;
  }

  .mobile-nav {
    top: 62px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 13px !important;
    background: rgba(7, 9, 11, 0.96) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.54) !important;
    backdrop-filter: blur(18px) !important;
  }

  .hero,
  .hero-reference,
  .hero-v2 {
    min-height: 920px !important;
    padding: 130px 18px 60px !important;
    grid-template-columns: 1fr !important;
    gap: 54px !important;
  }

  .hero-content {
    max-width: 650px !important;
  }
  .hero h1,
  .hero-reference h1 {
    font-size: clamp(48px, 10vw, 72px) !important;
  }
  .hero-visual {
    min-height: 460px !important;
  }
  .trust-strip,
  .trust-strip-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trust-strip-v2 .trust-label {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
    justify-content: center !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .trust-strip-v2 > div {
    border-top: 1px solid var(--line) !important;
  }

  .catalog {
    padding: 28px 18px !important;
  }
  .section-heading,
  .vouches-heading {
    align-items: start !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .catalog-toolbar {
    grid-template-columns: 1fr !important;
  }
  .mobile-filter-button {
    display: flex !important;
  }
  .catalog-layout {
    grid-template-columns: 1fr !important;
  }

  .filter-panel,
  .catalog .filter-panel {
    position: fixed !important;
    z-index: 95 !important;
    top: 0 !important;
    left: 0 !important;
    width: min(340px, 92vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 15px 15px 0 !important;
    background: #080a0c !important;
  }

  .filter-panel:not(.open) {
    transform: translateX(-105%) !important;
  }
  .filter-panel.open {
    transform: translateX(0) !important;
  }

  .why-us,
  .vouches,
  .payments,
  .discord-cta {
    padding: 34px 20px !important;
  }
  .payments {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 590px) {
  :root {
    --page: calc(100vw - 14px);
  }
  .brand-logo {
    width: 112px !important;
  }
  .cart-button span {
    display: none !important;
  }

  .hero,
  .hero-reference,
  .hero-v2 {
    min-height: 860px !important;
    padding-top: 112px !important;
  }

  .hero h1,
  .hero-reference h1 {
    font-size: clamp(42px, 12.5vw, 58px) !important;
  }
  .hero-content > p,
  .hero-reference .hero-content > p {
    font-size: 14px !important;
  }
  .hero-actions {
    width: 100% !important;
    flex-direction: column !important;
  }
  .hero-actions a {
    width: 100% !important;
  }
  .signal-lens {
    width: min(300px, 82vw);
  }
  .signal-core {
    width: 88px;
    height: 88px;
  }
  .signal-core img {
    width: 50px;
    height: 50px;
  }
  .hero-character-card {
    width: 155px !important;
    left: 0 !important;
  }
  .character-stack img {
    width: 38px !important;
    height: 38px !important;
  }
  .hero-category-row {
    width: 158px !important;
    right: 0 !important;
  }

  .trust-strip,
  .trust-strip-v2 {
    grid-template-columns: 1fr !important;
  }
  .trust-strip-v2 > div {
    border-left: 0 !important;
  }
  .product-grid,
  .vouch-grid,
  .payment-grid {
    grid-template-columns: 1fr !important;
  }
  .product-art,
  .product-image {
    min-height: 205px !important;
  }
  .feature-card {
    min-height: 460px !important;
    padding: 22px !important;
  }

  .checkout-modal,
  .auth-modal,
  .admin-modal,
  .ticket-modal,
  .product-modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }
}

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

/* Wide catalog pass: use the desktop canvas and make filters easy to scan. */
@media (min-width: 981px) {
  :root {
    --page: calc(100vw - 16px);
  }

  .catalog {
    padding: clamp(30px, 3vw, 52px) !important;
  }

  .catalog-toolbar {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .search-field,
  .catalog-toolbar select {
    min-height: 56px !important;
    padding-inline: 17px !important;
    font-size: 13px !important;
  }

  .category-tabs {
    gap: 10px !important;
    margin-bottom: 28px !important;
  }

  .category-tab {
    min-height: 54px !important;
    padding: 0 24px !important;
    font-size: 13px !important;
    letter-spacing: 0.01em !important;
  }

  .catalog-layout {
    grid-template-columns: clamp(340px, 23vw, 410px) minmax(0, 1fr) !important;
    gap: clamp(22px, 2vw, 34px) !important;
  }

  .filter-panel,
  .catalog .filter-panel {
    padding: 26px !important;
    border-radius: 16px !important;
  }

  .filter-panel-head {
    padding: 4px 3px 18px !important;
  }

  .filter-panel-head span,
  .filter-label {
    font-size: 9px !important;
  }

  .filter-panel-head h3 {
    margin-top: 7px !important;
    font-size: 23px !important;
  }

  .filter-group {
    padding-block: 16px !important;
  }

  .sidebar-sections,
  .subcategory-filters {
    gap: 6px !important;
  }

  .sidebar-section {
    min-height: 54px !important;
    padding: 0 15px !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  .sidebar-section b {
    font-size: 14px !important;
  }

  .sidebar-section small {
    min-width: 32px !important;
    height: 25px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  .filter-option,
  .subcategory-filters label {
    min-height: 50px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
  }

  .subcategory-filters {
    max-height: 390px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    overscroll-behavior: contain !important;
  }

  .filter-name {
    font-size: 13px !important;
  }

  .filter-option > small {
    font-size: 10px !important;
  }

  .filter-check {
    width: 19px !important;
    height: 19px !important;
  }

  .switch-row {
    min-height: 72px !important;
    padding: 14px 15px !important;
  }

  .switch-row b {
    font-size: 13px !important;
  }

  .switch-row small {
    font-size: 10px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  body::after {
    display: none;
  }
}

/* v3.4 — readable storefront typography and larger interaction targets. */
@media (min-width: 981px) {
  .site-header {
    min-height: 74px !important;
    height: 74px !important;
    padding: 0 12px 0 22px !important;
  }

  .brand-logo {
    width: 150px !important;
  }

  .desktop-nav {
    gap: 3px !important;
    padding: 4px !important;
  }

  .desktop-nav a {
    padding: 11px 17px !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
  }

  .desktop-nav a:hover,
  .desktop-nav a.active {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    color: #fff !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .icon-button,
  .cart-button,
  .account-button,
  .ticket-button,
  .admin-button {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
    letter-spacing: 0.035em !important;
  }

  .icon-button {
    min-width: 46px !important;
    padding: 0 !important;
    font-size: 20px !important;
  }

  .cart-button strong,
  #adminNotificationCount {
    min-width: 21px !important;
    height: 21px !important;
    font-size: 11px !important;
  }

  .hero-side-rail {
    width: 48px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }

  .hero-side-rail-left {
    left: 26px !important;
  }

  .hero-side-rail-right {
    right: 26px !important;
  }

  .eyebrow {
    margin-bottom: 30px !important;
    padding: 10px 15px !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }

  .hero-content > p,
  .hero-reference .hero-content > p {
    max-width: 590px !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
  }

  .hero-actions {
    gap: 12px !important;
    margin-top: 36px !important;
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    min-height: 54px !important;
    padding: 0 23px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }

  .trust-strip-v2 .trust-label,
  .trust-strip-v2 > div {
    min-height: 108px !important;
    padding: 22px !important;
  }

  .trust-strip-v2 .trust-label {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .trust-strip-v2 > div > span {
    font-size: 11px !important;
  }

  .trust-strip-v2 strong {
    font-size: 15px !important;
  }

  .trust-strip-v2 small {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .section-kicker {
    font-size: 11px !important;
  }

  .section-heading > p {
    max-width: 560px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .search-field,
  .catalog-toolbar select {
    min-height: 62px !important;
    padding-inline: 20px !important;
    font-size: 15px !important;
  }

  .search-field > span {
    font-size: 21px !important;
  }

  .search-field input {
    font-size: 15px !important;
  }

  .search-field kbd {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .results-line {
    margin-bottom: 14px !important;
    font-size: 11px !important;
  }

  .product-art,
  .product-image {
    min-height: 190px !important;
  }

  .product-copy {
    padding: 19px !important;
  }

  .product-category {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .product-card h3,
  .product-title {
    min-height: 50px !important;
    margin: 9px 0 13px !important;
    font-size: 18px !important;
    line-height: 1.38 !important;
  }

  .product-facts {
    gap: 7px !important;
    margin-bottom: 14px !important;
  }

  .product-facts span {
    padding: 7px 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .product-stock {
    min-height: 44px !important;
    margin-bottom: 15px !important;
    padding: 0 12px !important;
  }

  .product-stock span,
  .product-stock strong {
    font-size: 12px !important;
  }

  .product-footer {
    padding-top: 14px !important;
  }

  .product-footer p small {
    font-size: 10px !important;
  }

  .product-footer p strong {
    font-size: 21px !important;
  }

  .product-footer > span {
    font-size: 12px !important;
  }

  .quick-add {
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  .why-copy > p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .text-link {
    font-size: 14px !important;
  }

  .feature-slider {
    padding: 12px !important;
    background: transparent !important;
  }

  .feature-slider-topline {
    padding: 6px 7px 14px !important;
    font-size: 12px !important;
  }

  .feature-card {
    min-height: 450px !important;
    padding: 34px !important;
  }

  .feature-eyebrow,
  .feature-number {
    font-size: 12px !important;
  }

  .feature-card p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .feature-card-foot span,
  .feature-card-foot b {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .feature-slider-controls button,
  .feature-dots button {
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .feature-slider-controls button:hover,
  .feature-dots button.active {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
}

@media (max-width: 980px) {
  .mobile-nav a {
    padding: 13px 16px !important;
    font-size: 14px !important;
  }

  .eyebrow {
    font-size: 11px !important;
  }

  .hero-content > p,
  .hero-reference .hero-content > p,
  .section-heading > p,
  .why-copy > p,
  .feature-card p {
    font-size: 15px !important;
  }

  .primary-button,
  .secondary-button {
    min-height: 52px !important;
    font-size: 12px !important;
  }

  .trust-strip-v2 .trust-label {
    font-size: 11px !important;
  }

  .trust-strip-v2 strong {
    font-size: 14px !important;
  }

  .trust-strip-v2 small {
    font-size: 11px !important;
  }

  .product-category,
  .product-stock span,
  .product-stock strong,
  .product-footer > span {
    font-size: 11px !important;
  }

  .product-card h3,
  .product-title {
    font-size: 17px !important;
  }

  .product-facts span {
    font-size: 11px !important;
  }
}

/* Mobile interaction layer: one reachable navigation and full-height dialogs. */
@media (max-width: 840px) {
  :root {
    --page: calc(100vw - 16px);
  }

  html {
    scroll-padding-top: 76px;
  }

  .site-header {
    width: var(--page) !important;
    padding: 0 7px 0 12px !important;
  }

  .brand {
    min-width: 0;
  }

  .brand-logo {
    width: min(112px, 30vw) !important;
  }

  .header-actions {
    min-width: 0;
    margin-left: auto;
  }

  .cart-button,
  .menu-button {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }

  .cart-button strong {
    margin: 0 !important;
  }

  .mobile-nav {
    top: 62px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 72px);
    padding: 9px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-nav a {
    min-height: 48px;
  }

  .mobile-nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 5px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
  }

  .mobile-nav-actions button {
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  .mobile-nav-actions button:first-child,
  .mobile-nav-actions button:last-child:not([hidden]) {
    grid-column: 1 / -1;
  }

  .mobile-nav-actions button[hidden] {
    display: none;
  }

  #mobileAdminNotificationCount {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: #050607;
    font-size: 10px;
  }

  #mobileAdminNotificationCount[hidden] {
    display: none;
  }

  .cart-drawer {
    width: 100% !important;
    height: 100dvh !important;
  }

  .drawer-head {
    min-height: 76px;
    height: auto;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  .cart-items {
    padding: 10px 16px;
    overscroll-behavior: contain;
  }

  .cart-summary {
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  }

  .checkout-modal,
  .auth-modal,
  .admin-modal,
  .ticket-modal,
  .product-modal {
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: max(64px, calc(env(safe-area-inset-top) + 54px)) 16px
      max(24px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 0 !important;
    transform: translateY(14px) !important;
    -webkit-overflow-scrolling: touch;
  }

  .checkout-modal.open,
  .auth-modal.open,
  .admin-modal.open,
  .ticket-modal.open,
  .product-modal.open {
    transform: none !important;
  }

  .checkout-close,
  .auth-modal > .modal-close,
  .admin-modal > .modal-close,
  .ticket-modal > .modal-close,
  .product-modal > .modal-close {
    position: fixed !important;
    z-index: 10 !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(5, 6, 7, 0.94) !important;
  }

  .product-modal {
    display: block !important;
    padding: 0 0 max(24px, env(safe-area-inset-bottom)) !important;
  }

  .product-modal .modal-art {
    min-height: 220px !important;
    height: 32dvh !important;
    max-height: 290px !important;
  }

  .product-modal .modal-copy {
    padding: 26px 18px 18px !important;
  }

  .modal-copy h2,
  .admin-ticket-head h3,
  .customer-ticket-head h3,
  .checkout-reference strong,
  .order-reference strong {
    overflow-wrap: anywhere;
  }

  .checkout-shell,
  .admin-layout,
  .admin-ticket-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .checkout-review,
  .checkout-form-card,
  .admin-detail,
  .ticket-flow-note,
  .ticket-delivery,
  .account-security,
  .ticket-conversation {
    min-width: 0;
  }

  .checkout-fields,
  .customer-auth-actions,
  .admin-ticket-tools,
  .admin-list-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-list-head {
    display: grid !important;
    align-items: stretch !important;
  }

  .admin-ticket-tools {
    display: grid !important;
  }

  .admin-ticket-head,
  .customer-ticket-head {
    flex-wrap: wrap;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  a,
  label,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .filter-panel,
  .catalog .filter-panel {
    width: min(360px, 94vw) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

@media (max-width: 520px) {
  .product-grid,
  .vouch-grid,
  .payment-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .product-art,
  .product-image {
    min-height: 190px !important;
  }

  .hero,
  .hero-reference,
  .hero-v2 {
    min-height: auto !important;
    padding: 105px 12px 42px !important;
    gap: 34px !important;
  }

  .hero-visual {
    min-height: 380px !important;
  }

  .catalog,
  .why-us,
  .vouches,
  .payments,
  .faq,
  .discord-cta {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  footer {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .footer-brand,
  footer > small {
    grid-column: 1 !important;
  }
}

/* v3.5 — bounded rendering cost for long storefront sessions. */
body::after {
  display: none !important;
}

.hero::after,
.hero-reference::after,
.hero-v2::after,
.signal-scan::before,
.feature-progress i,
.modal-art i {
  animation: none !important;
}

.site-header,
.signal-label,
.hero-character-card,
.hero-live-card,
.hero-category-row button,
.trust-strip,
.trust-strip-v2,
.catalog,
.why-us,
.vouches,
.payments,
.discord-cta,
.quick-add {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header {
  background: rgba(6, 8, 9, 0.97) !important;
}

.trust-strip,
.trust-strip-v2,
.catalog,
.why-us,
.vouches,
.payments,
.discord-cta {
  background-color: rgba(9, 11, 13, 0.96) !important;
}

.product-image,
.product-art img,
.product-card:hover .product-image,
.product-card.out-of-stock .product-image,
.cart-product-image,
.character-stack img,
.modal-product-image {
  filter: none !important;
}

.backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.74) !important;
}

.product-card,
.feature-slide,
.vouch-card {
  content-visibility: auto;
  contain: layout paint style;
}

.product-card {
  contain-intrinsic-size: auto 430px;
}

.feature-slide {
  contain-intrinsic-size: auto 440px;
}

/* v3.5 — site-wide readability and checkout accessibility pass. */
body {
  font-size: 16px;
  text-rendering: optimizeLegibility;
}

body small {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

p,
li,
dd,
blockquote {
  line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
  color: #929aa4 !important;
  opacity: 1;
}

.desktop-nav a,
.mobile-nav a,
.mobile-nav-actions button,
.cart-button,
.account-button,
.ticket-button,
.admin-button,
.primary-button,
.secondary-button,
.quick-add,
.load-more,
.support-actions a {
  font-size: 14px !important;
}

.desktop-nav a,
.mobile-nav a,
.mobile-nav-actions button,
.primary-button,
.secondary-button,
.quick-add,
.load-more,
.support-actions a {
  min-height: 44px !important;
}

.eyebrow,
.section-kicker,
.hero-side-rail,
.feature-eyebrow,
.feature-number,
.feature-slider-topline,
.discord-cta > span,
.filter-panel-head span,
.filter-label,
.results-line {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.hero-live-card span,
.hero-live-card small,
.hero-stock-line,
.hero-category-row button,
.showcase-topbar,
.showcase-featured-copy > span,
.showcase-featured-art > span,
.showcase-grid small,
.showcase-grid article > span,
.showcase-float-stock small,
.showcase-float-rating span {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.showcase-featured-copy p,
.showcase-featured-copy a,
.showcase-grid strong,
.showcase-float-stock b {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.trust-strip-v2 .trust-label,
.trust-strip-v2 > div > span {
  font-size: 12px !important;
}

.trust-strip-v2 strong {
  font-size: 15px !important;
}

.trust-strip-v2 small {
  font-size: 13px !important;
}

.search-field input,
.catalog-toolbar select {
  font-size: 16px !important;
}

.search-field kbd,
.filter-panel-head button,
.sidebar-section small,
.filter-option > small,
.switch-row small {
  font-size: 12px !important;
}

.sidebar-section,
.sidebar-section b,
.filter-option,
.filter-name,
.subcategory-filters label,
.switch-row b {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.sidebar-section small {
  min-width: 34px !important;
  height: 28px !important;
}

.product-category,
.product-facts span,
.product-stock span,
.product-stock strong,
.product-footer p small,
.product-footer > span,
.status-pill {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.product-card h3,
.product-title {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

.feature-card p,
.vouches-heading > p,
.vouch-card blockquote,
.vouch-empty p,
.payments > div > p,
.faq-heading > p,
.faq-list details p,
.discord-cta > p,
.footer-brand p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.feature-card-foot span,
.feature-card-foot b,
.vouch-card-head div span,
.vouch-card-foot,
.payment-grid span,
.discord-cta > small,
footer a,
footer p,
footer small {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.faq-list summary {
  min-height: 56px;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* Cart: readable product information and full-size controls. */
.drawer-head > div > span,
.order-reference span {
  font-size: 12px !important;
}

.drawer-head h2 {
  font-size: 24px !important;
}

.drawer-head button,
.modal-close,
.checkout-close {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
}

.cart-item {
  gap: 14px;
  padding-block: 16px;
}

.cart-item h4 {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.cart-item small,
.cart-line-stock {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.cart-quantity button {
  width: 40px;
  height: 40px;
  font-size: 18px !important;
}

.cart-quantity span {
  min-width: 32px;
  font-size: 14px !important;
}

.cart-remove {
  min-height: 40px;
  padding-inline: 8px;
  font-size: 13px !important;
}

.cart-summary > div,
.cart-summary p,
.cart-catalog-offline span {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.order-reference strong {
  font-size: 13px !important;
  overflow-wrap: anywhere;
}

.checkout-button {
  min-height: 56px !important;
  font-size: 15px !important;
}

/* Checkout: no essential information is rendered as microcopy. */
.checkout-modal {
  line-height: 1.5;
}

.checkout-head p {
  color: #b0b7c0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.checkout-card-label,
.payment-group-label,
.verification-options legend,
.checkout-review .checkout-section-title span,
.checkout-review .checkout-reference > span {
  color: #b7bec7 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.08em !important;
}

.checkout-fields {
  gap: 16px;
}

.checkout-fields label > span {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 8px;
  overflow: visible;
  clip-path: none;
  color: #d3d8de !important;
  font-size: 14px !important;
  font-weight: 750;
  line-height: 1.4;
}

.checkout-fields input,
.checkout-modal input,
.checkout-modal select,
.checkout-modal textarea {
  min-height: 54px !important;
  font-size: 16px !important;
}

.checkout-field-note {
  color: #aeb6c0 !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.checkout-form-card .payment-option {
  min-height: 92px;
  padding: 16px;
}

.payment-option strong,
.verification-option strong {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.payment-option small,
.verification-option small {
  color: #b4bbc4 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.verification-option {
  min-height: 70px;
  padding: 15px;
}

.checkout-protection {
  padding: 16px;
}

.checkout-protection strong {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.checkout-protection small {
  color: #b4bbc4 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.checkout-review .checkout-section-title h3 {
  font-size: 26px !important;
  line-height: 1.25 !important;
}

.checkout-review .checkout-section-title button {
  min-height: 44px !important;
  padding-inline: 15px;
  font-size: 14px !important;
}

.checkout-review .checkout-item {
  min-height: 72px;
  gap: 14px;
}

.checkout-review .checkout-item h4 {
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.checkout-review .checkout-item small {
  color: #afb6bf !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.checkout-review .checkout-item > strong {
  font-size: 15px !important;
}

.checkout-review .checkout-totals > div {
  color: #b7bec7 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.03em !important;
}

.checkout-review .checkout-totals strong {
  font-size: 16px !important;
}

.checkout-review .checkout-totals .checkout-total {
  font-size: 16px !important;
}

.checkout-review .checkout-totals .checkout-total strong {
  font-size: clamp(32px, 4vw, 42px) !important;
}

.checkout-review .checkout-reference strong {
  font-size: 14px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

.checkout-review .checkout-reference small,
.checkout-review .checkout-consent label,
.checkout-review .checkout-consent p,
.checkout-review .checkout-validation,
.checkout-review .checkout-disclaimer {
  color: #b2bac4 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.checkout-review .checkout-consent input {
  width: 22px;
  height: 22px;
}

.checkout-review .place-order-button {
  min-height: 62px !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
}

.checkout-payment-marks {
  color: #aab2bc !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

/* Product, account, ticket and admin dialogs use the same readable scale. */
.product-meta,
.detail-grid span,
.modal-copy > small {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.modal-copy > p,
.detail-grid strong {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.modal-buy button,
.auth-secondary-button,
.auth-link-button,
.staff-login-button,
.admin-logout,
.danger-button,
.admin-export-button,
.admin-actions button,
.admin-pagination button {
  min-height: 46px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.auth-card > p,
.admin-shell > p,
.ticket-flow-note,
.ticket-delivery,
.ticket-refund p,
.ticket-empty-copy,
.admin-empty,
.admin-detail > span {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.account-email-status span,
.password-reset-panel label,
.account-security-fields label,
.ticket-conversation label,
.ticket-selector,
.admin-ticket-tools label,
.ticket-refund-form label,
.admin-note,
.staff-login-fields label > span {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.auth-modal input,
.auth-modal select,
.auth-modal textarea,
.admin-modal input,
.admin-modal select,
.admin-modal textarea,
.ticket-modal input,
.ticket-modal select,
.ticket-modal textarea {
  min-height: 50px !important;
  font-size: 16px !important;
}

.session-card span,
.session-card time,
.admin-notifications li span,
.admin-pagination span,
.ticket-history span,
.ticket-message time,
.admin-order span,
.admin-order small,
.admin-ticket-head span,
.admin-ticket-meta dt,
.customer-ticket-head span,
.manual-payment-destination span,
.manual-payment-destination small {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.admin-order strong,
.admin-ticket-meta dd,
.admin-ticket-items li,
.ticket-history p,
.ticket-message p,
.manual-payment-destination > div,
.ticket-delivery p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.manual-payment-destination code {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.toast {
  max-width: min(92vw, 520px);
  font-size: 14px !important;
  line-height: 1.45 !important;
}

@media (max-width: 1050px) {
  .checkout-shell {
    gap: 24px !important;
  }

  .checkout-review {
    position: relative !important;
  }
}

@media (max-width: 840px) {
  .checkout-modal,
  .auth-modal,
  .admin-modal,
  .ticket-modal {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .checkout-form-card,
  .checkout-review,
  .auth-card,
  .admin-detail,
  .ticket-flow-note,
  .ticket-delivery {
    padding: 20px !important;
  }

  .checkout-form-card .payment-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .payment-group-label,
  .payment-option-wide {
    grid-column: 1 !important;
  }

  .checkout-review .checkout-section-title {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 16px;
  }

  .cart-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .cart-item-actions {
    grid-column: 2;
    justify-items: start;
  }

  .checkout-review .checkout-item {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  .checkout-review .checkout-item > strong {
    grid-column: 2;
    justify-self: start;
  }

  .checkout-review .checkout-section-title {
    gap: 12px;
  }

  .checkout-review .checkout-totals > div,
  .manual-payment-destination > div,
  .customer-ticket-head,
  .admin-ticket-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .checkout-card-label,
  .payment-group-label,
  .verification-options legend,
  .checkout-review .checkout-section-title span,
  .checkout-review .checkout-reference > span {
    letter-spacing: 0.04em !important;
  }
}