/* WolFox unified storefront surface — navy / cyan / green, no purple */
:root {
  --wfx-brand-navy: #173f60;
  --wfx-brand-navy-strong: #12334f;
  --wfx-brand-cyan: #2aa9b2;
  --wfx-brand-green: #38b88c;
  --wfx-brand-bg: #0b1725;
  --wfx-brand-panel: #10243a;
  --wfx-brand-panel-2: #15314b;
  --wfx-brand-text: #eef8fb;
  --wfx-brand-muted: #a9c0ce;
  --wfx-brand-line: rgba(112, 205, 214, .22);
}

html[data-wfx-mode="dark"], html[data-wfx-mode="dark"] body {
  background: var(--wfx-brand-bg) !important;
  color: var(--wfx-brand-text) !important;
}
html[data-wfx-mode="dark"] body::after {
  background: var(--wfx-brand-cyan) !important;
  opacity: .08 !important;
}
html[data-wfx-mode="dark"] body::before { opacity: .08 !important; }

.wfx-header {
  background: rgba(11, 23, 37, .92) !important;
  border-bottom-color: var(--wfx-brand-line) !important;
}
.wfx-brand-icon,
.wfx-brand-logo-img {
  background: linear-gradient(135deg, var(--wfx-brand-navy-strong), var(--wfx-brand-cyan)) !important;
  border-color: rgba(112, 205, 214, .45) !important;
  box-shadow: 0 9px 25px rgba(20, 105, 126, .28) !important;
}
.wfx-brand-name, .wfx-hero-title, .wfx-card h2,
.wfx-main-content h1, .wfx-main-content h2, .wfx-main-content h3 {
  color: var(--wfx-brand-text) !important;
}
.wfx-brand-sub, .wfx-hero-subtitle, .wfx-stat-lbl, .muted {
  color: var(--wfx-brand-muted) !important;
}

.wfx-nav-desktop, .wfx-pages-menu {
  background: rgba(16, 36, 58, .92) !important;
  border-color: var(--wfx-brand-line) !important;
}
.wfx-nav-btn:hover, .wfx-nav-btn.active,
.wfx-pages-menu-item:hover, .wfx-pages-menu-item.active {
  background: rgba(42, 169, 178, .16) !important;
  border-color: rgba(42, 169, 178, .35) !important;
  color: #f4feff !important;
}

.wfx-hero, .wfx-card, .wfx-product, .wfx-stat,
.wfx-panel, .wfx-order-card, .wfx-account-card, .wfx-info-card {
  background: linear-gradient(145deg, rgba(16, 36, 58, .98), rgba(11, 28, 46, .98)) !important;
  border-color: var(--wfx-brand-line) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .20) !important;
}
.wfx-hero::before { background: rgba(42, 169, 178, .12) !important; }

.wfx-btn, .btn, button.wfx-btn {
  min-height: 44px;
  border-radius: 11px !important;
  border: 1px solid rgba(102, 190, 209, .40) !important;
  background: var(--wfx-brand-navy) !important;
  color: #f2fbff !important;
  box-shadow: 0 7px 17px rgba(8, 34, 55, .28) !important;
  font-weight: 800 !important;
}
.wfx-btn:hover, .btn:hover, button.wfx-btn:hover {
  background: #205b82 !important;
  border-color: #55c4cf !important;
  transform: translateY(-1px) !important;
}
.wfx-btn.primary, .wfx-product-buy, .btn.primary {
  background: linear-gradient(135deg, #1d587a, #1d7d88) !important;
  border-color: #4dbbc1 !important;
  color: #f5ffff !important;
}
.wfx-btn.success, .btn.success { background: #185d55 !important; border-color: #42bd9e !important; }
.wfx-btn.ghost, .btn.ghost, .btn.alt { background: #102d46 !important; border-color: var(--wfx-brand-line) !important; color: #c8e5ed !important; }
.wfx-btn.danger, .btn.danger { background: #73394a !important; border-color: #d47a91 !important; }

.wfx-input, input, select, textarea {
  background: #0c1e31 !important;
  color: var(--wfx-brand-text) !important;
  border-color: rgba(112, 205, 214, .28) !important;
}
.wfx-input:focus, input:focus, select:focus, textarea:focus {
  border-color: #52c6cf !important;
  box-shadow: 0 0 0 3px rgba(42, 169, 178, .16) !important;
}
::placeholder { color: #7895a5 !important; }

.wfx-product-price, .wfx-stat-val, .wfx-section-eyebrow, .wfx-footer-socials a { color: #76d8d0 !important; }
.wfx-product-buy { color: #f5ffff !important; }
.wfx-alert.success, .alert.success { background: rgba(56, 184, 140, .12) !important; border-color: rgba(56, 184, 140, .35) !important; color: #b8f2d9 !important; }
.wfx-alert.error, .alert.error, .alert.danger { background: rgba(190, 70, 94, .13) !important; border-color: rgba(220, 112, 135, .35) !important; color: #ffd2db !important; }

img.wfx-brand-logo-img { object-fit: contain !important; padding: 3px !important; }
@media (max-width: 620px) {
  .wfx-main-content { width: min(100% - 24px, 1180px) !important; padding-top: 26px !important; }
  .wfx-btn, .btn { width: 100%; }
}