.section-title,
.section-title h2 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center !important;
  margin: 0 auto 0.25rem;
  text-wrap: balance;
}

.section-subtitle,
.section-subtitle p {
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
  text-align: center !important;
  margin: 0 auto 1.25rem;
  max-width: 36rem;
}
/* Global monochrome button system */
:root {
  --mono-button-bg-top: #ffffff;
  --mono-button-bg-bottom: #eceff2;
  --mono-button-text: #858b93;
  --mono-button-text-hover: #5f656d;
  --mono-button-border: rgba(255, 255, 255, 0.78);
}

.btn,
button:not(.btn-close):not(.navbar-toggler):not(.y3kp7):not(.r7qn8):not(.carousel-control-prev):not(.carousel-control-next),
input[type="button"],
input[type="submit"],
input[type="reset"],
a[class*="btn"] {
  color: var(--mono-button-text) !important;
  background: linear-gradient(180deg, var(--mono-button-bg-top) 0%, var(--mono-button-bg-bottom) 100%) !important;
  border-color: var(--mono-button-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(255, 255, 255, 0.06) !important;
  text-shadow: none !important;
}

.btn:hover,
button:not(.btn-close):not(.navbar-toggler):not(.y3kp7):not(.r7qn8):not(.carousel-control-prev):not(.carousel-control-next):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a[class*="btn"]:hover {
  color: var(--mono-button-text-hover) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f5f6 100%) !important;
  border-color: rgba(255, 255, 255, 0.94) !important;
  filter: brightness(1.02);
}

.btn:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
a[class*="btn"]:focus-visible {
  outline: 2px solid rgba(235, 238, 242, 0.95) !important;
  outline-offset: 3px !important;
}

.btn:disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  opacity: 0.48 !important;
}

/* Cursor-following silver atmosphere */
:root {
  --cursor-x: 50vw;
  --cursor-y: 35vh;
  --cursor-glow-opacity: 0;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--cursor-glow-opacity);
  background:
    radial-gradient(
      520px circle at var(--cursor-x) var(--cursor-y),
      rgba(255, 255, 255, 0.13) 0%,
      rgba(218, 222, 228, 0.075) 24%,
      rgba(180, 185, 192, 0.03) 48%,
      transparent 72%
    );
  transition: opacity 180ms ease;
}

#app,
body > header,
body > footer,
body > .flex-wrapper {
  position: relative;
  z-index: 1;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
}


/* =========================================================
   CrownXenith global black + silver palette
   ========================================================= */
:root {
  --cx-black: #050505;
  --cx-black-soft: #0d0d0f;
  --cx-silver-dark: #8f959d;
  --cx-silver: #c0c0c0;
  --cx-silver-light: #e5e7eb;
  --cx-white: #ffffff;
  --cl-accent: var(--cx-silver) !important;
  --cl-accent-rgb: 192, 192, 192 !important;
  --cl-border: rgba(192, 192, 192, 0.24) !important;
  --cl-border-rgb: 192, 192, 192 !important;
}

/* Silver borders across interactive surfaces and cards */
.card,
.modal-content,
.dropdown-menu,
.accordion-item,
.list-group-item,
.form-control,
.form-select,
.choices__inner,
[class*="card"],
[class*="panel"],
[class*="box"] {
  border-color: rgba(192, 192, 192, 0.22) !important;
}

/* Icons inherit black/silver from their control; standalone icons are silver. */
button svg,
.btn svg,
a[class*="btn"] svg,
[role="button"] svg {
  color: currentColor !important;
  fill: currentColor;
}

main svg:not(.text-danger):not(.text-success),
footer svg,
header svg {
  color: var(--cx-silver-light);
}

/* Black/silver button hierarchy */
.btn,
button:not(.btn-close):not(.navbar-toggler):not(.carousel-control-prev):not(.carousel-control-next),
input[type="button"],
input[type="submit"],
input[type="reset"],
a[class*="btn"] {
  background: linear-gradient(180deg, #f4f5f6 0%, #b9bec5 100%) !important;
  color: #080808 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.16), 0 7px 20px rgba(0,0,0,.24) !important;
}

.btn:hover,
button:not(.btn-close):not(.navbar-toggler):not(.carousel-control-prev):not(.carousel-control-next):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a[class*="btn"]:hover {
  background: #050505 !important;
  color: #ffffff !important;
  border-color: #c0c0c0 !important;
}

/* Keep close/navigation controls dark and readable. */
.btn-close,
.navbar-toggler,
.carousel-control-prev,
.carousel-control-next {
  color: #e5e7eb !important;
  border-color: rgba(192,192,192,.35) !important;
}

/* Product page variation cards: solid silver, high contrast. */
.b3kp8 {
  background: linear-gradient(145deg, #e7e9ec 0%, #b8bdc4 100%) !important;
  border: 1px solid #f3f4f6 !important;
  color: #080808 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.22) !important;
  transform: translateY(0);
}

.b3kp8:hover:not(:disabled) {
  background: linear-gradient(145deg, #ffffff 0%, #c8ccd2 100%) !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
}

.b3kp8.w7tz2,
.w7tz2 {
  background: linear-gradient(145deg, #ffffff 0%, #d5d8dc 100%) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px #111111, inset 0 1px 0 #ffffff, 0 8px 24px rgba(0,0,0,.3) !important;
}

.b3kp8 .n5cw1,
.b3kp8 .j8rk4,
.b3kp8 .v2qm7,
.b3kp8 .y1nf8 {
  color: #080808 !important;
}

.b3kp8 .j8rk4,
.b3kp8 .v2qm7,
.b3kp8 .y1nf8 {
  opacity: .66;
}

.b3kp8 .p4xs6 {
  color: #ffffff !important;
  background: #090909 !important;
  border: 1px solid #5f656d !important;
}

.b3kp8.w7tz2 .p4xs6,
.w7tz2 .p4xs6 {
  color: #050505 !important;
  background: #ffffff !important;
  border-color: #050505 !important;
}

/* Product quantity and purchase controls */
.a8jw5,
.l6du3 {
  border-color: rgba(192,192,192,.38) !important;
}

.s2tq9,
.q9fa7,
.j7we4 {
  border-color: #c0c0c0 !important;
}

.e3rt1 {
  background: #050505 !important;
  color: #ffffff !important;
  border-color: #c0c0c0 !important;
}

.e3rt1:hover:not(:disabled) {
  background: #d1d5db !important;
  color: #050505 !important;
  border-color: #ffffff !important;
}

.u0gy4 {
  background: linear-gradient(180deg, #f3f4f6 0%, #b8bdc4 100%) !important;
  color: #050505 !important;
  border-color: #ffffff !important;
}

.u0gy4:hover:not(:disabled) {
  background: #050505 !important;
  color: #ffffff !important;
  border-color: #c0c0c0 !important;
}

/* Accent text, links, active states and progress indicators */
a:hover,
.text-primary,
.link-primary,
.active > a,
.nav-link.active {
  color: #e5e7eb !important;
}

progress,
.shop-range,
input[type="range"] {
  accent-color: #c0c0c0 !important;
}

.o5xa4 {
  background: linear-gradient(90deg, #8f959d, #f3f4f6) !important;
}