/* ════════════════════════════════════════════════════════════
   JANOSCI — Storefront Chrome (all customer pages)
   Navy + Royal Blue + Soft Gold — header / nav / actions
   ════════════════════════════════════════════════════════════ */

:root {
  --js-navy: #0A2540;
  --js-navy-deep: #001f45;
  --js-navy-mid: #0c2d4f;
  --js-royal: #1769e8;
  --js-royal-dark: #1155c7;
  --js-gold: #fbbf24;
  --js-gold-deep: #d97706;
  --js-sky: #edf4ff;
  --js-border: #e4eaf2;
  --js-muted: #64748b;
  --js-text: #0f172a;
  --m-primary: #1769e8;
  --m-primary-light: #3b82f6;
  --m-primary-dark: #1155c7;
  --m-accent: #fbbf24;
  --m-accent-light: #fcd34d;
  --m-navy: #0A2540;
  --jp-navy: #0A2540;
  --jp-royal: #1769e8;
  --jp-amber: #fbbf24;
  --jp-emerald: #1769e8;
  --jp-emerald-light: #3b82f6;
  --jp-emerald-dark: #1155c7;
}

body.app-body {
  background: #f5f7fb;
  color: var(--js-text);
}

/* ── Announcement bar ── */
body.app-body .ann-bar {
  background: var(--js-navy-deep) !important;
  color: #fff !important;
  border-bottom: none !important;
  font-size: 0.78rem;
  font-weight: 500;
  min-height: var(--ann-h, 38px);
}
body.app-body .ann-bar-inner {
  align-items: center;
}
body.app-body .ann-item,
body.app-body .ann-link {
  color: #fff !important;
  opacity: 0.95;
}
body.app-body .ann-item i,
body.app-body .ann-item .text-warning,
body.app-body .ann-bar .fa-bolt,
body.app-body .ann-bar strong {
  color: var(--js-gold) !important;
}
body.app-body .ann-sep {
  opacity: 0.28;
  color: #fff;
}
body.app-body .ann-link:hover {
  color: var(--js-gold) !important;
}

/* ── Main header ── */
body.app-body .site-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--js-border) !important;
  box-shadow: 0 8px 28px rgba(10, 37, 64, 0.08) !important;
}
body.app-body .header-main {
  background: #fff !important;
  align-items: center;
}
body.app-body .header-logo {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.app-body .header-logo-img {
  height: var(--js-header-logo-h, 72px);
  max-width: var(--js-header-logo-max-w, 240px);
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Catalog search */
body.app-body .catalog-search {
  display: flex;
  align-items: stretch;
  height: 46px;
  border: 1.5px solid #d0d7e4 !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.app-body .catalog-search:focus-within {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(23, 105, 232, 0.12);
}
body.app-body .catalog-search-btn,
body.app-body .site-header .catalog-search-btn {
  background: var(--js-royal) !important;
  color: #fff !important;
  border: none !important;
}
body.app-body .catalog-search-btn:hover,
body.app-body .site-header .catalog-search-btn:hover {
  background: var(--js-royal-dark) !important;
}

/* Header actions */
body.app-body .site-header .catalog-action-link {
  color: var(--js-navy) !important;
}
body.app-body .site-header .catalog-action-link:hover {
  color: var(--js-royal) !important;
}
body.app-body .site-header .catalog-action-link > i,
body.app-body .site-header .catalog-action-link > .bi,
body.app-body .site-header .catalog-action-link > .fas {
  color: var(--js-navy) !important;
}
body.app-body .site-header .catalog-action-link:hover > i {
  color: var(--js-royal) !important;
}
body.app-body .site-header .catalog-badge,
body.app-body .site-header .cart-badge,
body.app-body .site-header .wish-badge,
body.app-body .site-header .cart-count {
  background: var(--js-royal) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* ── Nav row — navy band (all pages) ── */
body.app-body .header-nav {
  background: var(--js-navy) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.app-body .btn-all-categories {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  background: var(--js-royal) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.48rem 0.9rem !important;
  border-radius: 8px !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(23, 105, 232, 0.35);
  margin-right: 0.4rem;
}
body.app-body .btn-all-categories:hover {
  background: var(--js-royal-dark) !important;
  color: #fff !important;
}
body.app-body .btn-all-categories i {
  color: #fff !important;
}
body.app-body .nav-links-pro > li > a:not(.btn-all-categories),
body.app-body .nav-links-pro .cat-nav-trigger,
body.app-body .nav-links-pro .expert-menu-trigger,
body.app-body .nav-links-pro .nav-utility-item > a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  border-bottom-color: transparent !important;
}
body.app-body .nav-links-pro > li > a:not(.btn-all-categories):hover,
body.app-body .nav-links-pro .cat-nav-trigger:hover,
body.app-body .nav-links-pro .expert-menu-trigger:hover,
body.app-body .cat-nav-item:hover .cat-nav-trigger {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
body.app-body .nav-links-pro > li > a.active,
body.app-body .cat-nav-trigger.active,
body.app-body .cat-nav-item.is-mega-open .cat-nav-trigger,
body.app-body .cat-nav-item.is-sync-highlight .cat-nav-trigger {
  color: #fff !important;
  border-bottom-color: var(--js-gold) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
body.app-body .nav-chevron {
  opacity: 0.65;
  color: inherit;
}

/* Mega / dropdown panels stay light */
body.app-body .mega-panel,
body.app-body .cat-mega-panel,
body.app-body .expert-dropdown,
body.app-body .user-dropdown {
  background: #fff;
  color: var(--js-text);
}

/* Primary buttons site-wide */
body.app-body .btn-primary,
body.app-body .btn-janosci,
body.app-body a.btn-primary {
  background: var(--js-royal) !important;
  border-color: var(--js-royal) !important;
  color: #fff !important;
}
body.app-body .btn-primary:hover,
body.app-body .btn-janosci:hover {
  background: var(--js-royal-dark) !important;
  border-color: var(--js-royal-dark) !important;
}

/* Auth pages inside storefront shell */
body.auth-shell {
  background: #f5f7fb !important;
}
body.auth-shell .page-wrapper {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem 3rem !important;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(23, 105, 232, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 30%, rgba(251, 191, 36, 0.08), transparent 50%),
    #f5f7fb;
}
body.auth-shell .auth-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(10, 37, 64, 0.12);
  border: 1px solid var(--js-border);
  overflow: hidden;
}
body.auth-shell .auth-brand {
  display: none !important;
}
body.auth-shell .auth-header h1 {
  color: var(--js-navy) !important;
}
body.auth-shell .btn-primary-auth,
body.auth-shell .btn-emerald {
  background: var(--js-royal) !important;
  border-color: var(--js-royal) !important;
  color: #fff !important;
}
body.auth-shell .btn-primary-auth:hover,
body.auth-shell .btn-emerald:hover {
  background: var(--js-royal-dark) !important;
}
body.auth-shell.setup-shell .setup-container,
body.auth-shell .setup-container {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
body.auth-shell .setup-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(10, 37, 64, 0.12);
  border: 1px solid var(--js-border);
  overflow: hidden;
}

/* Footer spacing polish */
body.app-body .site-footer.jp-foot {
  margin-top: 2rem !important;
}

@media (max-width: 991.98px) {
  body.app-body .header-nav,
  body.app-body .header-shop-zone {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  body.app-body .site-header {
    overflow: hidden !important;
  }
}