.section-title,
.section-title h2 {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto 8px;
  text-align: center !important;
  text-wrap: balance;
}

.section-subtitle,
.section-subtitle p {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 auto 20px;
  max-width: 36rem;
  text-align: center !important;
}

/* VeaX global visual overrides. */
.btn-primary {
  --bs-btn-color: #0a0a0a;
  --bs-btn-hover-color: #0a0a0a;
  --bs-btn-active-color: #0a0a0a;
  --bs-btn-disabled-color: #0a0a0a;
}

:root {
  --bs-border-color: rgba(245, 190, 15, 0.16);
  --bs-border-color-translucent: rgba(245, 190, 15, 0.16);
}

.form-control,
.form-select { border-color: rgba(245, 190, 15, 0.22); }
.form-control:focus,
.form-select:focus {
  border-color: rgba(245, 190, 15, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(245, 190, 15, 0.08);
}
.card,
.bg-gray { border: 1px solid rgba(245, 190, 15, 0.14) !important; }
hr { border-color: rgba(245, 190, 15, 0.18); opacity: 1; }
.fb__item > div,
.cp-item,
.cp-summary { border-color: rgba(245, 190, 15, 0.14) !important; }
.vx-pulse { border-color: rgba(245, 190, 15, 0.30) !important; }

/* Keep the navbar as a stable floating island on every page. */
.nb-shell { padding: 14px 24px !important; }
.nb-frame {
  border-radius: 9999px !important;
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.96), rgba(6, 6, 6, 0.94)) !important;
  border: 1px solid rgba(245, 190, 15, 0.22) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  max-width: 1240px !important;
}
.nb-shell.is-island.has-bg .nb-frame {
  border-color: rgba(245, 190, 15, 0.32) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(245, 190, 15, 0.1) !important;
}
.nb-inner { min-height: 64px !important; padding: 0 24px !important; }

/* Preserve a dense two-column mobile catalog and a thumb-friendly product CTA. */
@media (max-width: 767px) {
  .products .col-12 { width: 50%; padding-left: 5px; padding-right: 5px; }
  .products.row { --bs-gutter-x: 0; }
  .nb-shell { padding: 9px 10px !important; }
  .nb-inner { padding: 0 13px !important; min-height: 56px !important; }
  .pf-price-block { margin-bottom: 18px; padding-bottom: 18px; }
  .pf-actions,
  .pf-buy-row {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(to top, #0a0a0a 65%, rgba(10, 10, 10, 0));
    padding: 12px 0 14px;
    margin: 0 -4px;
  }
  .vx-notify__row { flex-direction: column; }
  .vx-notify__row button { width: 100%; }
}

/* Stronger navbar contrast. */
.nb-links .nb-link {
  color: rgba(255, 255, 255, 0.76) !important;
  font-weight: 550 !important;
  font-size: 13px !important;
}
.nb-links .nb-link:hover { color: #ffffff !important; }
.nb-cart { color: rgba(255, 255, 255, 0.82) !important; }
.nb-cart:hover { color: #ffffff !important; }
.vx-search__input::placeholder { color: rgba(255, 255, 255, 0.48) !important; }
.vx-lang button { color: rgba(255, 255, 255, 0.68) !important; }
.vx-lang button.is-on { color: #000 !important; }

/* Keep the home page compact enough to reveal products quickly. */
.hero { min-height: 58vh !important; padding-top: 40px !important; }
.hero__title { font-size: clamp(2rem, 5.2vw, 3.6rem) !important; line-height: 1.06 !important; }
.hero__subtitle { font-size: 15px !important; }

/* Three cards on regular desktop, four only on very wide displays. */
.products .col-lg-4 { width: 33.3333%; }
@media (min-width: 1200px) { .products .col-lg-4 { width: 33.3333%; } }
@media (min-width: 1700px) { .products .col-lg-4 { width: 25%; } }
@media (max-width: 767px) { .products .col-12 { width: 50%; } }
.products .mb-4 { margin-bottom: 1rem !important; }
.products.row { --bs-gutter-x: 1rem; }

/* Tighten supporting marketing sections without compressing product cards. */
.component.container.py-20,
section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.section-title h2 { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; }
.section-subtitle p { font-size: 14px !important; }

/* Compact real-time stats strip. */
[data-component-id^="stats"] { padding: 0 0 26px !important; }
[data-component-id^="stats"] .section-title,
[data-component-id^="stats"] .section-subtitle { display: none !important; }
[data-component-id^="stats"] .row {
  --bs-gutter-x: 1px;
  --bs-gutter-y: 1px;
  border: 1px solid rgba(245, 190, 15, 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(245, 190, 15, 0.16);
}
[data-component-id^="stats"] .row > * { width: 50%; padding: 0 !important; }
@media (min-width: 768px) { [data-component-id^="stats"] .row > * { width: 25%; } }
[data-component-id^="stats"] .card,
[data-component-id^="stats"] .stat,
[data-component-id^="stats"] .row > * > * {
  border: 0 !important;
  border-radius: 0 !important;
  background: #0e0e0e !important;
  padding: 14px 10px !important;
  text-align: center;
  height: 100%;
}
[data-component-id^="stats"] svg,
[data-component-id^="stats"] i { display: none !important; }
[data-component-id^="stats"] .h1,
[data-component-id^="stats"] h3,
[data-component-id^="stats"] .stat__value {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
[data-component-id^="stats"] p,
[data-component-id^="stats"] .stat__label {
  font-size: 11px !important;
  margin: 2px 0 0 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Consistent keyboard focus across theme-native controls. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(245, 190, 15, 0.9) !important;
  outline-offset: 3px !important;
}

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