:root {
  --sj-navy: #0b1e3d;
  --sj-navy-light: #142c54;
  --sj-orange: #ff7a1a;
  --sj-orange-dark: #e8650a;
  --sj-text: #1c2536;
  --sj-text-muted: #6b7385;
  --sj-border: #eaecf2;
  --sj-bg: #ffffff;
  --sj-bg-soft: #f7f8fb;
  --sj-radius: 14px;

  /* ---- Premium mobile navigation tokens (visual only — accent color still
     reads from --sj-orange/--sj-navy above so the Admin > Branding color
     customizer keeps working untouched) ---- */
  --sj-glass-bg: rgba(255,255,255,.78);
  --sj-glass-bg-strong: rgba(255,255,255,.92);
  --sj-glass-border: rgba(255,255,255,.4);
  --sj-glass-blur: 18px;
  --sj-shadow-premium: 0 10px 35px rgba(0,0,0,.08);
  --sj-shadow-premium-lg: 0 15px 45px rgba(0,0,0,.1);
  --sj-radius-premium: 18px;
  --sj-ease-premium: cubic-bezier(.22,.61,.36,1);
  --sj-transition-premium: 300ms var(--sj-ease-premium);
}

* { box-sizing: border-box; }
html, body {
  overflow-x: hidden; /* safety net: the hero's full-bleed breakout technique
                         and any other edge-to-edge element must never be
                         able to introduce horizontal scroll on any device */
  max-width: 100%;
}
body {
  font-family: 'Manrope', 'Poppins', system-ui, sans-serif;
  color: var(--sj-text);
  background: var(--sj-bg);
}
a { text-decoration: none; color: inherit; }
.text-orange { color: var(--sj-orange); }

/* ---- Announcement bar ---- */
.sj-announce {
  background: var(--sj-navy);
  color: #fff;
  text-align: center;
  font-size: .82rem;
  padding: 8px 0;
  letter-spacing: .3px;
}

/* ---- Header (premium glassmorphism, sticky + smooth shrink on scroll) ---- */
.sj-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--sj-glass-bg);
  -webkit-backdrop-filter: blur(var(--sj-glass-blur));
  backdrop-filter: blur(var(--sj-glass-blur));
  border-bottom: 1px solid var(--sj-glass-border);
  box-shadow: var(--sj-shadow-premium);
  transition: box-shadow var(--sj-transition-premium), padding var(--sj-transition-premium);
}
/* Added by store.js once the page scrolls past a small threshold — shrinks
   the header padding smoothly instead of jumping, for a premium feel. */
.sj-header .container.py-3 { transition: padding var(--sj-transition-premium); }
.sj-header.sj-header-compact { box-shadow: var(--sj-shadow-premium-lg); }
.sj-header.sj-header-compact .container.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.sj-header .logo { font-weight: 800; font-size: 1.5rem; color: var(--sj-navy); }
.sj-header .logo span { color: var(--sj-orange); }
.sj-header .nav-link { font-weight: 600; color: var(--sj-text); font-size: .92rem; padding: 8px 14px !important; }
.sj-header .nav-link:hover { color: var(--sj-orange); }

/* Balanced, larger logo (mobile hamburger + logo + search layout) */
.sj-logo { font-size: 1.65rem; display: flex; align-items: center; }
.sj-logo-img { max-height: 44px !important; width: auto; }
@media (max-width: 480px) {
  .sj-logo { font-size: 1.3rem; }
  .sj-logo-img { max-height: 34px !important; }
}

/* Mobile header row: hamburger (fixed) — logo (auto) — actions/search (flex) */
@media (max-width: 991px) {
  .sj-header-row { gap: 10px !important; }
  .sj-header-actions { flex: 1; min-width: 0; }
}
.sj-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sj-bg-soft);
  color: var(--sj-navy);
  position: relative;
  transition: all .15s ease;
}
.sj-icon-btn:hover { background: var(--sj-orange); color: #fff; }
.sj-cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--sj-orange); color: #fff;
  font-size: .65rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sj-search-box { position: relative; }
.sj-search-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--sj-border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index: 1050; max-height: 360px; overflow-auto; display: none;
}
.sj-search-suggestions.show { display: block; }
.sj-search-item { display: flex; gap: 10px; padding: 10px 14px; align-items: center; }
.sj-search-item:hover { background: var(--sj-bg-soft); }
.sj-search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }

/* ---- Hero / Slider ---- */
.sj-hero {
  background: linear-gradient(120deg, var(--sj-navy) 0%, #12294f 60%, #1a3766 100%);
  border-radius: var(--sj-radius);
  color: #fff;
  padding: 64px 48px;
  position: relative;
  overflow: hidden;
}
.sj-hero::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.25), transparent 70%);
}
.sj-hero h1 { font-weight: 800; font-size: 2.6rem; line-height: 1.15; max-width: 560px; }
.sj-hero p { color: rgba(255,255,255,.75); max-width: 480px; margin: 16px 0 28px; }
.btn-sj-primary {
  background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark));
  border: none; color: #fff; font-weight: 700;
  border-radius: 10px; padding: 12px 26px; display: inline-block;
  transition: all .15s ease;
}
.btn-sj-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,122,26,.3); }
.btn-sj-outline {
  border: 1.5px solid var(--sj-navy); color: var(--sj-navy); font-weight: 700;
  border-radius: 10px; padding: 11px 24px; display: inline-block; background: #fff;
}
.btn-sj-outline:hover { background: var(--sj-navy); color: #fff; }

/* ---- Section headings ---- */
.sj-section-title { font-weight: 800; font-size: 1.5rem; color: var(--sj-navy); }
.sj-section-sub { color: var(--sj-text-muted); font-size: .92rem; }

/* ---- Category cards ---- */
.sj-cat-card {
  border-radius: var(--sj-radius);
  overflow: hidden;
  position: relative;
  aspect-ratio: 1/1;
  background: var(--sj-bg-soft);
  display: flex; align-items: flex-end;
  transition: transform .2s ease;
}
.sj-cat-card:hover { transform: translateY(-4px); }
.sj-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.sj-cat-card .label {
  position: relative; z-index: 2; width: 100%;
  background: linear-gradient(0deg, rgba(11,30,61,.85), transparent);
  color: #fff; padding: 16px; font-weight: 700;
}

/* ---- Product cards ---- */
.sj-product-card {
  border: 1px solid var(--sj-border);
  border-radius: var(--sj-radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
  height: 100%;
}
.sj-product-card:hover { box-shadow: 0 16px 32px rgba(11,30,61,.1); transform: translateY(-3px); }
.sj-product-card .img-wrap { aspect-ratio: 1/1; background: var(--sj-bg-soft); overflow: hidden; position: relative; }
.sj-product-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sj-product-card:hover .img-wrap img { transform: scale(1.05); }
.sj-badge-sale {
  position: absolute; top: 10px; left: 10px;
  background: var(--sj-orange); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px;
}
.sj-product-card .body { padding: 14px; }
.sj-product-card .title { font-weight: 700; font-size: .92rem; color: var(--sj-text); line-height: 1.3; height: 2.4em; overflow: hidden; }
.sj-product-card .price-current { font-weight: 800; color: var(--sj-navy); }
.sj-product-card .price-compare { text-decoration: line-through; color: var(--sj-text-muted); font-size: .82rem; }
.sj-stars { color: var(--sj-orange); font-size: .8rem; }
.sj-add-cart-btn {
  width: 100%; border: none; background: var(--sj-navy); color: #fff;
  font-weight: 700; padding: 9px; border-radius: 8px; font-size: .85rem;
  transition: background .15s ease;
}
.sj-add-cart-btn:hover { background: var(--sj-orange); }

/* ---- Flash sale countdown ---- */
.sj-countdown { display: flex; gap: 10px; }
.sj-countdown .box {
  background: rgba(255,255,255,.12); border-radius: 8px; padding: 8px 12px;
  text-align: center; min-width: 56px;
}
.sj-countdown .box .num { font-weight: 800; font-size: 1.2rem; }
.sj-countdown .box .lbl { font-size: .65rem; text-transform: uppercase; opacity: .7; }

/* ---- Filters sidebar ---- */
.sj-filter-block { border-bottom: 1px solid var(--sj-border); padding-bottom: 16px; margin-bottom: 16px; }
.sj-filter-title { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .4px; color: var(--sj-navy); margin-bottom: 10px; }

/* ---- Footer ---- */
.sj-footer { background: var(--sj-navy); color: rgba(255,255,255,.75); padding: 56px 0 24px; margin-top: 60px; }
.sj-footer h6 { color: #fff; font-weight: 700; margin-bottom: 16px; }
.sj-footer a { color: rgba(255,255,255,.65); display: block; padding: 4px 0; font-size: .88rem; }
.sj-footer a:hover { color: var(--sj-orange); }
.sj-footer .bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; padding-top: 20px; font-size: .8rem; }

/* ---- Skeleton / mini helpers ---- */
.skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =====================================================================
   MOBILE NAVIGATION (hamburger + slide-in drawer)
   Fixes the previously broken/missing mobile nav: below the lg
   breakpoint the desktop nav links and search bar simply disappeared
   with no way to reach them. This restores full navigation access.
   ===================================================================== */

.sj-hamburger {
  width: 40px; height: 40px;
  border: none;
  background: var(--sj-bg-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.sj-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sj-navy);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.sj-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sj-hamburger.is-active span:nth-child(2) { opacity: 0; }
.sj-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Premium search pill: sits in the top navbar (right side) in place of
   a bare search icon. Tapping it reveals the full glass search input below. ---- */
.sj-mobile-search-pill {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--sj-glass-border);
  border-radius: 30px;
  background: rgba(255,255,255,.6);
  box-shadow: var(--sj-shadow-premium);
  color: var(--sj-text-muted);
  font-size: .85rem;
  font-weight: 600;
  transition: all var(--sj-transition-premium);
}
.sj-mobile-search-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-mobile-search-pill i { color: var(--sj-orange); flex-shrink: 0; }
.sj-mobile-search-pill:active,
.sj-mobile-search-pill:focus-visible { transform: scale(.98); border-color: var(--sj-orange); }
@media (max-width: 400px) {
  .sj-mobile-search-pill span { display: none; }
  .sj-mobile-search-pill { justify-content: center; flex: 0 0 44px; padding: 0; }
}

.sj-mobile-search-bar {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--sj-ease-premium), margin-top .3s var(--sj-ease-premium);
}
.sj-mobile-search-bar.show { max-height: 70px; margin-top: 12px; }
.sj-mobile-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 16px;
  background: var(--sj-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--sj-glass-blur));
  backdrop-filter: blur(var(--sj-glass-blur));
  border: 1px solid var(--sj-glass-border);
  border-radius: 30px;
  box-shadow: var(--sj-shadow-premium);
  transition: border-color var(--sj-transition-premium), box-shadow var(--sj-transition-premium);
}
.sj-mobile-search-input-wrap:focus-within {
  border-color: var(--sj-orange);
  box-shadow: 0 0 0 3px rgba(255,122,26,.15), var(--sj-shadow-premium);
}
.sj-mobile-search-icon { color: var(--sj-orange); font-size: .9rem; flex-shrink: 0; }
.sj-mobile-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: .92rem;
  color: var(--sj-text);
}
.sj-mobile-search-submit {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.sj-mobile-search-submit:active { transform: scale(.92); }

.sj-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,30,61,.55);
  backdrop-filter: blur(3px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.sj-mobile-overlay.show { opacity: 1; visibility: visible; }

.sj-mobile-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(340px, 86vw);
  background: #fff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform .35s var(--sj-ease-premium);
  display: flex;
  flex-direction: column;
  box-shadow: 10px 0 40px rgba(0,0,0,.15);
  border-radius: 0 24px 24px 0; /* rounded leading corners for a premium feel */
  overflow: hidden;
}
.sj-mobile-drawer.show { transform: translateX(0); }

.sj-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--sj-glass-bg);
  -webkit-backdrop-filter: blur(var(--sj-glass-blur));
  backdrop-filter: blur(var(--sj-glass-blur));
  border-bottom: 1px solid var(--sj-glass-border);
  flex-shrink: 0;
}
.sj-mobile-drawer-header .logo { font-size: 1.35rem !important; font-weight: 800; }
.sj-mobile-drawer-header .logo img { max-height: 38px !important; }
.sj-mobile-drawer-close {
  width: 38px; height: 38px;
  border: none;
  background: var(--sj-bg-soft);
  border-radius: 50%;
  color: var(--sj-navy);
  transition: all .2s var(--sj-ease-premium);
}
.sj-mobile-drawer-close:hover { background: var(--sj-orange); color: #fff; transform: rotate(90deg); }

.sj-mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 12px;
  -webkit-overflow-scrolling: touch;
}

/* Minimal sidebar footer: version / privacy / terms / copyright */
.sj-mobile-drawer-footer {
  flex-shrink: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sj-border);
  background: var(--sj-bg-soft);
  text-align: center;
}
.sj-mobile-drawer-footer-links { font-size: .78rem; font-weight: 600; margin-bottom: 4px; }
.sj-mobile-drawer-footer-links a { color: var(--sj-text-muted); }
.sj-mobile-drawer-footer-links a:hover { color: var(--sj-orange); }
.sj-mobile-drawer-footer-dot { margin: 0 6px; opacity: .5; }
.sj-mobile-drawer-footer-meta { font-size: .7rem; color: var(--sj-text-muted); opacity: .8; display: flex; justify-content: center; gap: 8px; }

/* ---- Premium account card ---- */
.sj-mobile-account-row { padding: 4px 16px 16px; margin-bottom: 8px; }
.sj-mobile-account-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--sj-radius-premium);
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(120deg, var(--sj-orange), var(--sj-navy)) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--sj-shadow-premium);
  transition: transform .25s var(--sj-ease-premium), box-shadow .25s var(--sj-ease-premium);
}
.sj-mobile-account-link:hover { transform: translateY(-2px); box-shadow: var(--sj-shadow-premium-lg); }
.sj-mobile-account-avatar {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark));
  color: #fff; font-size: 1.1rem;
}
.sj-mobile-account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sj-mobile-account-name { font-weight: 700; color: var(--sj-navy); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-mobile-account-sub { font-size: .76rem; color: var(--sj-text-muted); }
.sj-mobile-account-arrow { color: var(--sj-text-muted); font-size: .8rem; transition: transform .25s var(--sj-ease-premium); }
.sj-mobile-account-link:hover .sj-mobile-account-arrow { transform: translateX(3px); color: var(--sj-orange); }

.sj-mobile-nav-section { padding: 8px 0; border-bottom: 1px solid var(--sj-border); margin-bottom: 8px; }
.sj-mobile-nav-section:last-child { border-bottom: none; }

.sj-mobile-nav-link, .sj-mobile-nav-link-flat {
  position: relative;
  display: flex;
  align-items: center;
  padding: 13px 20px;
  margin: 0 8px;
  border-radius: 12px;
  width: calc(100% - 16px);
  color: var(--sj-text);
  font-weight: 600;
  font-size: .95rem;
  min-height: 44px; /* comfortable touch target */
  transition: background .2s var(--sj-ease-premium), color .2s var(--sj-ease-premium), padding-left .2s var(--sj-ease-premium);
}
/* Chevron affordance that nudges forward on hover/tap — a subtle "arrow
   animation" without needing extra markup per link. */
.sj-mobile-nav-link::after, .sj-mobile-nav-link-flat::after {
  content: "\f105"; /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: .75rem;
  color: var(--sj-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all .2s var(--sj-ease-premium);
}
.sj-mobile-nav-link:hover, .sj-mobile-nav-link-flat:hover,
.sj-mobile-nav-link.active, .sj-mobile-nav-link-flat.active {
  background: var(--sj-bg-soft);
  color: var(--sj-orange);
  padding-left: 24px;
}
.sj-mobile-nav-link:hover::after, .sj-mobile-nav-link-flat:hover::after,
.sj-mobile-nav-link.active::after, .sj-mobile-nav-link-flat.active::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--sj-orange);
}
/* Selected item gets an orange gradient left indicator */
.sj-mobile-nav-link.active, .sj-mobile-nav-link-flat.active {
  box-shadow: inset 3px 0 0 0 var(--sj-orange);
  background: linear-gradient(90deg, rgba(255,122,26,.1), transparent);
}

.sj-mobile-accordion-toggle {
  width: calc(100% - 16px);
  margin: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  background: none;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--sj-navy);
  text-align: left;
  min-height: 44px;
  transition: background .2s var(--sj-ease-premium);
}
.sj-mobile-accordion-toggle:hover { background: var(--sj-bg-soft); }
.sj-mobile-accordion-toggle i.fa-chevron-down { transition: transform .25s var(--sj-ease-premium); font-size: .8rem; color: var(--sj-text-muted); }
.sj-mobile-accordion-toggle[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); color: var(--sj-orange); }

.sj-mobile-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--sj-ease-premium);
  background: transparent;
}
.sj-mobile-accordion-panel .sj-mobile-nav-link { padding-left: 44px; font-weight: 500; width: calc(100% - 16px); }
.sj-mobile-accordion-panel .sj-mobile-nav-link:hover,
.sj-mobile-accordion-panel .sj-mobile-nav-link.active { padding-left: 48px; }
.sj-mobile-accordion-nested { margin: 4px 0; border-radius: 12px; background: var(--sj-bg-soft); }
.sj-mobile-accordion-nested > .sj-mobile-accordion-toggle { padding-left: 20px; font-weight: 600; width: 100%; margin: 0; font-size: .9rem; }
.sj-mobile-accordion-nested .sj-mobile-accordion-panel .sj-mobile-nav-link { padding-left: 40px; }

/* ---- Categories scroll-area bug fix ----
   The outer "Categories" panel gets an independently scrollable, capped
   area (instead of a JS-measured max-height). Nested subcategory panels
   can then expand freely without ever being clipped by a stale parent
   max-height value — they simply add scrollable content to this region,
   while the header/login card and footer above/below stay fixed and the
   sidebar itself never needs to scroll as a whole. */
.sj-mobile-category-scroll-area.is-open {
  max-height: min(48vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.sj-mobile-category-scroll-area::-webkit-scrollbar { width: 5px; }
.sj-mobile-category-scroll-area::-webkit-scrollbar-thumb { background: var(--sj-border); border-radius: 10px; }
.sj-mobile-category-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--sj-orange); }
.sj-mobile-category-scroll-area { scrollbar-width: thin; scrollbar-color: var(--sj-border) transparent; }

/* Body scroll lock while the drawer is open */
body.sj-drawer-open { overflow: hidden; }

@media (min-width: 992px) {
  .sj-mobile-drawer, .sj-mobile-overlay { display: none; }
}

/* =====================================================================
   FLOATING BOTTOM NAVIGATION (Cart / Wishlist / Profile) — iOS-style
   premium tab bar, glassmorphism, floating above the bottom edge.
   ===================================================================== */
.sj-bottom-nav {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 70px;
  border-radius: 30px;
  background: var(--sj-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--sj-glass-blur));
  backdrop-filter: blur(var(--sj-glass-blur));
  border: 1px solid var(--sj-glass-border);
  box-shadow: 0 18px 40px rgba(11,30,61,.18);
  transition: transform var(--sj-transition-premium), box-shadow var(--sj-transition-premium);
}
.sj-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  color: var(--sj-text-muted);
  font-size: .68rem;
  font-weight: 700;
  transition: color .2s var(--sj-ease-premium), transform .2s var(--sj-ease-premium);
}
.sj-bottom-nav-item:active { transform: scale(.9); }
.sj-bottom-nav-icon {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  border-radius: 50%;
  transition: all .2s var(--sj-ease-premium);
}
.sj-bottom-nav-icon .sj-cart-badge { top: -6px; right: -8px; width: 16px; height: 16px; font-size: .6rem; }

/* Active (current-page) tab: orange gradient icon pill */
.sj-bottom-nav-item.active {
  color: var(--sj-orange);
}
.sj-bottom-nav-item.active .sj-bottom-nav-icon {
  background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark));
  color: #fff;
  box-shadow: 0 8px 18px rgba(255,122,26,.35);
  transform: translateY(-2px);
}

@media (min-width: 992px) {
  .sj-bottom-nav { display: none; }
}

/* Keep page content clear of the floating bottom nav on mobile */
@media (max-width: 991px) {
  body { padding-bottom: 96px; }
}

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.sj-breadcrumb { font-size: .85rem; color: var(--sj-text-muted); }
.sj-breadcrumb a { color: var(--sj-text-muted); }
.sj-breadcrumb a:hover { color: var(--sj-orange); }
.sj-breadcrumb .sep { margin: 0 6px; opacity: .5; }
.sj-breadcrumb .current { color: var(--sj-navy); font-weight: 600; }

/* =====================================================================
   SHOP FILTERS (shared by desktop sidebar + mobile drawer)
   ===================================================================== */
.sj-filter-radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: .88rem;
  cursor: pointer;
  color: var(--sj-text);
}
.sj-filter-radio-row input { accent-color: var(--sj-orange); }
.sj-filter-radio-row-cat { font-weight: 600; padding-left: 4px; }
.sj-filter-radio-row-sub { padding-left: 18px; font-size: .84rem; color: var(--sj-text-muted); }

.sj-filter-cat-group { border-bottom: 1px dashed var(--sj-border); padding-bottom: 4px; margin-bottom: 4px; }
.sj-filter-cat-group:last-child { border-bottom: none; }
.sj-filter-cat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 8px 4px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--sj-navy);
}
.sj-filter-cat-toggle i { font-size: .75rem; color: var(--sj-text-muted); transition: transform .25s ease; }
.sj-filter-cat-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* Independently scrollable nested lists — fixes subcategories not
   scrolling properly; the outer category list and the sidebar itself
   are NOT scroll containers, only these inner panels are. */
.sj-filter-category-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.sj-filter-subcat-scroll {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sj-filter-subcat-scroll.is-open {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.sj-filter-brand-scroll {
  max-height: 220px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
/* Nice thin scrollbar for the scrollable filter panels */
.sj-filter-category-scroll::-webkit-scrollbar,
.sj-filter-subcat-scroll::-webkit-scrollbar,
.sj-filter-brand-scroll::-webkit-scrollbar { width: 6px; }
.sj-filter-category-scroll::-webkit-scrollbar-thumb,
.sj-filter-subcat-scroll::-webkit-scrollbar-thumb,
.sj-filter-brand-scroll::-webkit-scrollbar-thumb { background: #d8dce6; border-radius: 10px; }
.sj-filter-category-scroll::-webkit-scrollbar-thumb:hover,
.sj-filter-subcat-scroll::-webkit-scrollbar-thumb:hover,
.sj-filter-brand-scroll::-webkit-scrollbar-thumb:hover { background: var(--sj-orange); }

/* ---- Mobile "Filters" trigger button (with active-filter count badge) ---- */
.sj-filter-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--sj-navy);
  background: #fff;
  color: var(--sj-navy);
  font-weight: 700;
  font-size: .88rem;
}
.sj-filter-count-badge {
  background: var(--sj-orange);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Mobile filter drawer: slide-in from the right, max 85% width,
   never covers the full screen so products stay partially visible ---- */
.sj-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,30,61,.5);
  backdrop-filter: blur(2px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.sj-filter-overlay.show { opacity: 1; visibility: visible; }

.sj-filter-drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(400px, 85vw); /* explicit 85% cap, per spec */
  background: #fff;
  z-index: 1050;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
}
.sj-filter-drawer.show { transform: translateX(0); }

.sj-filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--sj-border);
  flex-shrink: 0;
}
.sj-filter-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 100px; /* bottom padding clears the sticky action bar */
  -webkit-overflow-scrolling: touch;
}

/* Sticky Apply/Clear bar pinned to the bottom of the drawer */
.sj-filter-sticky-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: min(400px, 85vw);
  margin-left: auto;
  background: #fff;
  border-top: 1px solid var(--sj-border);
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.sj-filter-clear-btn {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: 1.5px solid var(--sj-border);
  background: #fff;
  color: var(--sj-text);
  font-weight: 700;
}
.sj-filter-apply-btn {
  flex: 2;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(255,122,26,.3);
}

@media (min-width: 992px) {
  .sj-filter-overlay, .sj-filter-drawer { display: none; }
}

/* =====================================================================
   MODERN PAGINATION (preserves all filters across pages)
   ===================================================================== */
.sj-pagination-wrap { display: flex; justify-content: center; }
.sj-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.sj-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--sj-border);
  background: #fff;
  color: var(--sj-navy);
  font-weight: 600;
  font-size: .88rem;
  transition: all .15s ease;
}
.sj-page-link:hover { border-color: var(--sj-orange); color: var(--sj-orange); }
.sj-page-item.active .sj-page-link {
  background: var(--sj-navy);
  border-color: var(--sj-navy);
  color: #fff;
}
.sj-page-item.disabled .sj-page-link {
  opacity: .4;
  pointer-events: none;
}
.sj-page-ellipsis span { padding: 0 6px; color: var(--sj-text-muted); }

@media (max-width: 575px) {
  .sj-pagination { gap: 4px; }
  .sj-page-link { min-width: 36px; height: 36px; padding: 0 8px; font-size: .82rem; }
}

@media (max-width: 767px) {
  .sj-hero { padding: 40px 24px; }
  .sj-hero h1 { font-size: 1.9rem; }
}

/* =====================================================================
   HERO BANNER SLIDER (full-width, edge-to-edge, admin-managed)
   ===================================================================== */

/* Breaks the slider out of the parent .container without touching the
   shared header/footer markup that every other page also relies on. */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.sj-hero-slider {
  position: relative;
  height: 640px;
  max-height: 78vh;
  overflow: hidden;
  background: var(--sj-navy);
}

.sj-hero-track { position: relative; width: 100%; height: 100%; }

.sj-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  display: flex;
  align-items: center;
  overflow: hidden; /* clips the zooming background layer so it never overflows the slide bounds */
}
.sj-hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* The actual image layer is a separate absolutely-positioned div, always
   sized with background-size: cover (so it NEVER stretches or shows gaps
   on any aspect ratio, from ultra-wide desktop to narrow tall mobile).
   The Ken Burns zoom animates a CSS transform: scale() on this layer
   instead of animating background-size — transform-scaling an
   already-"cover"-fitted layer preserves correct fitting at every frame,
   which fixes the previous bug where percentage-based background-size
   animation could leave letterboxed gaps on portrait/mobile screens. */
.sj-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
.sj-hero-slide.active .sj-hero-bg {
  animation: sjKenBurns 9s ease-in-out forwards;
}
@keyframes sjKenBurns {
  from { transform: scale(1.0); }
  to { transform: scale(1.12); }
}
/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sj-hero-slide.active .sj-hero-bg { animation: none; }
}

.sj-hero-overlay { position: absolute; inset: 0; z-index: 1; }

.sj-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
}
.sj-hero-slide.align-left .sj-hero-content { align-items: flex-start; text-align: left; }
.sj-hero-slide.align-center .sj-hero-content { align-items: center; text-align: center; }
.sj-hero-slide.align-right .sj-hero-content { align-items: flex-end; text-align: right; }

.sj-hero-content > * { max-width: 620px; }

.sj-hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(14px);
}
.sj-hero-badge-sale { background: var(--sj-orange); color: #fff; }
.sj-hero-badge-new { background: #16a34a; color: #fff; }
.sj-hero-badge-limited { background: #dc2626; color: #fff; }

.sj-hero-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1.12;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(24px);
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.sj-hero-subheading {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(20px);
}
.sj-hero-description {
  font-size: 1.02rem;
  opacity: 0;
  transform: translateY(20px);
  margin-bottom: 4px;
}
.sj-hero-description, .sj-hero-subheading { opacity: .92; }

.sj-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  opacity: 0;
  transform: translateY(20px);
  flex-wrap: wrap;
}
.sj-hero-slide.align-center .sj-hero-buttons { justify-content: center; }
.sj-hero-slide.align-right .sj-hero-buttons { justify-content: flex-end; }

/* Staggered entrance animation, triggered via .animate-in added by JS */
.sj-hero-slide.animate-in .sj-hero-badge,
.sj-hero-slide.animate-in .sj-hero-heading,
.sj-hero-slide.animate-in .sj-hero-subheading,
.sj-hero-slide.animate-in .sj-hero-description,
.sj-hero-slide.animate-in .sj-hero-buttons {
  animation: sjHeroFadeUp .8s ease forwards;
}
.sj-hero-slide.animate-in .sj-hero-badge { animation-delay: .05s; }
.sj-hero-slide.animate-in .sj-hero-heading { animation-delay: .15s; }
.sj-hero-slide.animate-in .sj-hero-subheading { animation-delay: .28s; }
.sj-hero-slide.animate-in .sj-hero-description { animation-delay: .38s; }
.sj-hero-slide.animate-in .sj-hero-buttons { animation-delay: .5s; }
@keyframes sjHeroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.sj-hero-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .2px;
  transition: all .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.sj-hero-btn-solid.sj-hero-btn-primary { background: linear-gradient(135deg, var(--sj-orange), var(--sj-orange-dark)); color: #fff; border: none; }
.sj-hero-btn-solid.sj-hero-btn-secondary { background: #fff; color: var(--sj-navy); border: none; }
.sj-hero-btn-outline { background: transparent; border: 1.5px solid currentColor; }
.sj-hero-btn-ghost { background: rgba(255,255,255,.12); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.35); }
.sj-hero-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.28); color: inherit; }

.sj-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  opacity: 0;
}
.sj-hero-slider:hover .sj-hero-arrow { opacity: 1; }
.sj-hero-arrow:hover { background: var(--sj-orange); }
.sj-hero-prev { left: 24px; }
.sj-hero-next { right: 24px; }

.sj-hero-dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.sj-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.45);
  transition: all .25s ease;
  cursor: pointer;
}
.sj-hero-dot.active { background: var(--sj-orange); width: 28px; border-radius: 6px; }

.sj-hero-scroll-indicator {
  position: absolute;
  bottom: 20px;
  right: 28px;
  z-index: 3;
  color: rgba(255,255,255,.6);
  font-size: 1.1rem;
  animation: sjBounce 2s infinite;
}
@keyframes sjBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.sj-hero-countdown { margin: 18px 0 0; opacity: 0; transform: translateY(20px); }
.sj-hero-slide.animate-in .sj-hero-countdown { animation: sjHeroFadeUp .8s ease forwards; animation-delay: .45s; }

@media (max-width: 991px) {
  .sj-hero-slider { height: 520px; }
  .sj-hero-heading { font-size: 2.3rem; }
  .sj-hero-content { padding: 0 28px; }
  .sj-hero-arrow { opacity: 1; width: 40px; height: 40px; }
}
@media (max-width: 575px) {
  .sj-hero-slider { height: 440px; max-height: 70vh; }
  .sj-hero-heading { font-size: 1.7rem; }
  .sj-hero-subheading { font-size: 1.05rem; }
  .sj-hero-buttons { width: 100%; }
  .sj-hero-btn { flex: 1 1 auto; text-align: center; padding: 12px 18px; }
  .sj-hero-prev, .sj-hero-next { display: none; }
  .sj-hero-scroll-indicator { display: none; }
}


/* =====================================================================
   RESPONSIVE HARDENING + BRAND LOCKUP + PAYMENT EXPERIENCE (2026-08)
   ===================================================================== */
.sj-header { position: sticky; top: 0; z-index: 1035; }
.sj-header-shell { padding-top: 12px; padding-bottom: 12px; }
.sj-header-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; min-height:52px; }
.sj-brand-lockup { display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--sj-navy); }
.sj-brand-name { font-family:'Poppins','Manrope',sans-serif; font-weight:800; font-size:1.18rem; line-height:1; letter-spacing:-.035em; white-space:nowrap; }
.sj-logo-img { width:auto; max-width:54px; max-height:42px !important; object-fit:contain; flex:0 0 auto; }
.sj-desktop-nav { justify-content:center; min-width:0; }
.sj-desktop-nav .nav-link { white-space:nowrap; padding-inline:9px !important; }
.sj-mega-menu { min-width:min(640px,90vw); }
.sj-header-right { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.sj-header-right .sj-search-box { width:clamp(190px,20vw,320px); flex:0 1 320px; }
.sj-mobile-search-button { border:0; }
.sj-brand-lockup-drawer .sj-brand-name { font-size:1.05rem; }

@media (min-width:992px) and (max-width:1199.98px) {
  .sj-header-row { gap:10px; }
  .sj-brand-name { font-size:1rem; }
  .sj-logo-img { max-width:44px; max-height:36px !important; }
  .sj-desktop-nav .nav-link { font-size:.82rem; padding-inline:6px !important; }
  .sj-header-right .sj-search-box { width:190px; }
}

@media (max-width:991.98px) {
  .sj-header-shell { padding-top:9px; padding-bottom:9px; }
  .sj-header-row { grid-template-columns:44px minmax(0,1fr) 44px; gap:6px !important; min-height:46px; }
  .sj-hamburger, .sj-mobile-search-button { width:42px; height:42px; flex:0 0 42px; }
  .sj-brand-lockup { justify-self:center; justify-content:center; max-width:calc(100vw - 118px); gap:7px; }
  .sj-brand-name { font-size:clamp(.92rem,4vw,1.12rem); overflow:hidden; text-overflow:ellipsis; }
  .sj-logo-img { max-width:38px; max-height:34px !important; }
  .sj-header-right { justify-self:end; }
  .sj-mobile-search-bar { margin-top:8px; }
  main.container { width:100%; max-width:100%; padding-left:14px; padding-right:14px; }
  .row { --bs-gutter-x:1rem; }
  .sj-card, .border.rounded { border-radius:14px !important; }
  .table-responsive { -webkit-overflow-scrolling:touch; }
  img, svg, video, iframe { max-width:100%; }
}

@media (max-width:575.98px) {
  .sj-announce { font-size:.72rem; line-height:1.35; padding:7px 12px; }
  main.container { padding-top:18px !important; padding-left:12px; padding-right:12px; }
  h1 { font-size:clamp(1.7rem,8vw,2.25rem); }
  h2 { font-size:clamp(1.45rem,7vw,1.9rem); }
  h3 { font-size:clamp(1.25rem,6vw,1.65rem); }
  .btn, .form-control, .form-select { min-height:42px; }
  .sj-product-card .body { padding:11px; }
  .sj-product-card .title { font-size:.84rem; }
  .sj-pagination-wrap { width:100%; overflow-x:auto; justify-content:flex-start; padding-bottom:4px; scrollbar-width:none; }
  .sj-pagination-wrap::-webkit-scrollbar { display:none; }
  .sj-pagination { flex-wrap:nowrap; min-width:max-content; margin-inline:auto; }
}

/* Pagination is compact on every viewport and never pushes the page wider. */
.sj-pagination-wrap { max-width:100%; }
.sj-pagination { max-width:100%; }
.sj-page-link { white-space:nowrap; }

/* Checkout payment selector */
.sj-payment-card { background:#fff; }
.sj-payment-option { display:grid; grid-template-columns:auto 42px 1fr; align-items:center; gap:12px; padding:14px; border:1.5px solid var(--sj-border); border-radius:14px; margin-bottom:10px; cursor:pointer; transition:.2s ease; }
.sj-payment-option:has(input:checked) { border-color:var(--sj-orange); box-shadow:0 0 0 3px rgba(255,122,26,.1); background:#fffaf6; }
.sj-payment-option.is-disabled { opacity:.55; cursor:not-allowed; }
.sj-payment-option-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--sj-bg-soft); color:var(--sj-orange); font-size:1.05rem; }
.sj-payment-option strong, .sj-payment-option small { display:block; }
.sj-payment-option small { color:var(--sj-text-muted); margin-top:2px; }
.sj-bank-transfer-panel { display:none; margin-top:12px; padding:16px; border-radius:14px; background:var(--sj-bg-soft); border:1px solid var(--sj-border); }
.sj-bank-transfer-panel.show { display:block; }
.sj-bank-details { display:grid; gap:10px; }
.sj-bank-details > div { display:grid; grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr) auto; align-items:center; gap:10px; padding-bottom:9px; border-bottom:1px dashed #dfe3ea; }
.sj-bank-details span { color:var(--sj-text-muted); font-size:.78rem; }
.sj-bank-details strong { word-break:break-word; }
.sj-copy-btn { border:1px solid var(--sj-border); background:#fff; border-radius:9px; padding:6px 9px; color:var(--sj-navy); font-size:.78rem; font-weight:700; }
@media (max-width:575.98px) {
  .sj-bank-details > div { grid-template-columns:1fr auto; }
  .sj-bank-details > div > span { grid-column:1/-1; }
  .sj-payment-option { grid-template-columns:auto 38px 1fr; padding:12px 10px; gap:9px; }
  .sj-payment-option-icon { width:38px; height:38px; }
}


/* =====================================================================
   STICKY NAV + SEARCH IDENTITY UPGRADE (2026-08-17)
   Announcement bar scrolls normally; the main navigation remains pinned
   to the top edge on mobile and desktop.
   ===================================================================== */
.sj-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1090 !important;
  width: 100%;
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(11,30,61,.07);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.sj-header.sj-header-scrolled {
  box-shadow: 0 10px 30px rgba(11,30,61,.12);
  border-bottom-color: transparent;
}
.sj-brand-lockup { text-decoration:none; }
.sj-brand-name { font-weight:800 !important; }
@media (max-width: 991.98px) {
  .sj-header { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

/* =====================================================================
   FINAL FIXED NAVBAR + CLEAN MOBILE DRAWER (2026-08-17)
   - Main navbar always remains visible while page content scrolls below it.
   - Announcement bar scrolls away naturally.
   - Mobile drawer contains navigation only: no duplicate navbar/branding row.
   - Scrolled state gets a glossy blurred lower edge.
   ===================================================================== */
.sj-header {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--sj-fixed-header-top, 0px) !important;
  z-index: 1090 !important;
  background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid rgba(255,255,255,.66) !important;
  box-shadow: 0 1px 0 rgba(11,30,61,.05);
  transition: top .16s ease, box-shadow .24s ease, background-color .24s ease, border-color .24s ease;
}
.sj-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.96) 22%, rgba(11,30,61,.15) 50%, rgba(255,255,255,.96) 78%, transparent);
  box-shadow: 0 8px 22px rgba(11,30,61,.10), 0 2px 8px rgba(255,255,255,.75);
  transition: opacity .22s ease;
}
.sj-header.sj-header-scrolled {
  background: rgba(255,255,255,.86) !important;
  border-bottom-color: rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 34px rgba(11,30,61,.14), 0 2px 10px rgba(11,30,61,.07) !important;
}
.sj-header.sj-header-scrolled::after { opacity: 1; }
.sj-header-spacer { width: 100%; height: var(--sj-fixed-header-height, 0px); }

/* Sidebar is a menu, not a second navbar. */
.sj-mobile-drawer { padding-top: 0; }
.sj-mobile-drawer-header { display: none !important; }
.sj-mobile-drawer-close-floating {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(246,248,252,.96);
  box-shadow: 0 5px 18px rgba(11,30,61,.08);
}
.sj-mobile-drawer-body { padding-top: 68px; }

@media (max-width: 991.98px) {
  .sj-header { -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important; }
}

/* =====================================================================
   MOBILE DRAWER STACKING FIX (2026-08-17)
   Keep the sticky site navbar underneath the opened mobile menu.
   The drawer and its backdrop must always sit above .sj-header (z-index 1090).
   ===================================================================== */
@media (max-width: 991.98px) {
  .sj-mobile-overlay {
    z-index: 1190 !important;
  }

  .sj-mobile-drawer {
    z-index: 1200 !important;
  }

  .sj-mobile-drawer-close-floating {
    z-index: 1202 !important;
  }
}