/* ==========================================================================
   Zonzia Global — black & red storefront theme.
   Loaded AFTER app.css only when SITE=zonzia. The storefront is built on
   CSS variables, so re-pointing the brand palette here reskins everything;
   the header/category-nav are additionally flipped to a dark "black & red" look.
   ========================================================================== */
:root {
  --hf-navy: #15171c;       /* primary dark  (was navy)   */
  --hf-navy-2: #2b2f38;
  --hf-orange: #e1182a;     /* accent / CTA  (was orange) */
  --hf-orange-2: #a50f1d;
  --hf-ink: #1c1f26;

  --bs-primary: #15171c;
  --bs-primary-rgb: 21, 23, 28;
  --bs-link-color: #15171c;
  --bs-link-color-rgb: 21, 23, 28;
  --bs-link-hover-color: #e1182a;
}

/* Pure-black top bar */
.top-bar { background: #000; }

/* Dark header + category nav */
.site-header { background: #0d0e11; box-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.cat-nav { background: #0d0e11; border-top: 1px solid rgba(255, 255, 255, .07); }
.cat-nav .nav-link { color: #d8dbe0; }
.cat-nav .nav-link:hover,
.cat-nav .nav-item.show .nav-link { color: var(--hf-orange); }
.header-action { color: #e7e9ec; }
.header-action:hover { color: var(--hf-orange); }
.site-header .text-navy { color: #fff !important; }   /* mobile menu toggle */

/* Zonzia logo (square, black bg) sits cleanly on the dark header */
.site-header .logo img { height: 50px; width: auto; border-radius: 8px; }

/* Brand wordmark fallback: "Zonzia" white, "Global" red */
.brand-word { color: #fff; }
.brand-word .b,
.brand-word span { color: var(--hf-orange); }

/* Search: dark-friendly input + red action button */
.search-wrap .form-control { border-color: rgba(255, 255, 255, .16); }
.search-wrap .btn { background: var(--hf-orange); border-color: var(--hf-orange); }
.search-wrap .btn:hover { background: var(--hf-orange-2); border-color: var(--hf-orange-2); }

/* Mega menu on the dark header */
.mega-menu { background: #16181d; }
.mega-menu .dropdown-item { color: #d8dbe0; }
.mega-menu .dropdown-item:hover { background: #1f2228; color: var(--hf-orange); }

/* Red focus ring to match */
.form-control:focus,
.form-select:focus { box-shadow: 0 0 0 .2rem rgba(225, 24, 42, .15); }