/* =========================================================
   RedBack Lasers — Custom Header
   ---------------------------------------------------------
   Loaded on every page via functions.php. Hides below 1200px
   so XStore's native mobile header takes over. Hides XStore's
   desktop header above 1200px.
   All classes are prefixed with .rbh- for total isolation.
   ========================================================= */

:root {
  --rbh-red: #C8102E;
  --rbh-red-dark: #A00D25;
  --rbh-black: #0A0A0A;
  --rbh-text: #0F172A;
  --rbh-muted: #64748B;
  --rbh-light-muted: #94A3B8;
  --rbh-border: #E2E8F0;
  --rbh-bg-soft: #F8FAFC;
  --rbh-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --rbh-banner-h: 36px;
  --rbh-main-h: 72px;
  --rbh-nav-h: 48px;
  --rbh-utility-h: 28px;
  --rbh-total-h: 184px;
}

/* ---------- Breakpoint toggle ----------
   To change where the desktop/mobile switch happens, edit the two
   numbers below (must stay paired: max-width = min-width - 1).
   Currently set to 1024px (covers laptops down to small laptops). */

/* Below 1024px: hide our header. XStore's native mobile header takes over. */
@media (max-width: 1023px) {
  .rbh-header,
  .rbh-header-spacer { display: none !important; }
}

/* At 1024px+: hide XStore's header. Kill its spacing artefacts too. */
@media (min-width: 1024px) {
  #header.site-header { display: none !important; }
  #et-buffer { display: none !important; }
  body { padding-top: 0 !important; }
}

/* ---------- Progressive scaling between 1024px and 1199px ----------
   The nav row is the widest row, so we shrink its type and padding
   to fit more items at tighter viewports. */
@media (max-width: 1199px) and (min-width: 1024px) {
  .rbh-main     { padding: 0 20px; gap: 16px; }
  .rbh-nav-row  { padding: 0 20px; }
  .rbh-utility__inner { padding: 0 20px; gap: 16px; }
  .rbh-banner__inner  { padding: 0 20px; }

  /* Nav links compress first since nav is widest */
  .rbh-nav { gap: 2px; }
  .rbh-nav__link { font-size: 12px; padding: 6px 8px; }
  .rbh-deals-pill { font-size: 12px; padding: 5px 10px; margin-left: 4px; }

  /* Compress right cluster so search keeps its width */
  .rbh-right { gap: 8px; }
  .rbh-phone__eyebrow { font-size: 9px; }
  .rbh-phone__num { font-size: 13px; }
  .rbh-icon-btn { width: 48px; }
}

/* ---------- Scoped base styles (only apply inside .rbh-header) ---------- */
.rbh-header { font-family: var(--rbh-font); }
.rbh-header,
.rbh-header *,
.rbh-header *::before,
.rbh-header *::after { box-sizing: border-box; }

/* ---------- Sticky header shell ---------- */
.rbh-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--rbh-border);
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
  will-change: transform;
}
.rbh-header.is-hidden { transform: translateY(-100%); }
.rbh-header.is-slim   { box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.rbh-header:has(.rbh-search :focus),
.rbh-header:has(.dgwt-wcas-suggestions-wrapp) { transform: none !important; }
body.rbh-search-active .rbh-header { transform: none !important; }

/* ---------- Banner ---------- */
.rbh-banner {
  background: var(--rbh-black);
  color: #fff;
  font-size: 13px;
  overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease;
  max-height: 48px; opacity: 1;
}
.rbh-header.is-slim .rbh-banner { max-height: 0; opacity: 0; }
.rbh-banner__inner {
  padding: 0 32px;
  height: var(--rbh-banner-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.rbh-banner__dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--rbh-red); }
.rbh-banner__text { font-weight: 600; letter-spacing: .02em; }
.rbh-banner__sep  { color: rgba(255,255,255,.5); }
.rbh-banner__link { color: rgba(255,255,255,.9); text-decoration: none; }
.rbh-banner__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Main row ---------- */
.rbh-main {
  background: #fff;
  padding: 0 32px;
  height: var(--rbh-main-h);
  display: flex; align-items: center; gap: 24px;
}
.rbh-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.rbh-logo img { height: 44px; width: auto; display: block; }

/* Search fills remaining horizontal space, caps at 640px */
.rbh-search { position: relative; flex: 1 1 0; min-width: 0; max-width: 640px; }
.rbh-search .dgwt-wcas-search-wrapp,
.rbh-search .dgwt-wcas-search-form,
.rbh-search .dgwt-wcas-sf-wrapp { width: 100%; max-width: 100%; margin: 0; }
.rbh-search .dgwt-wcas-search-input {
  height: 44px;
  border: 2px solid var(--rbh-text);
  border-radius: 8px;
  font-family: var(--rbh-font);
  font-size: 14px;
  background: #fff;
  box-shadow: none;
}
.rbh-search .dgwt-wcas-search-input:focus { border-color: var(--rbh-red); outline: none; }
.rbh-search .dgwt-wcas-search-input::placeholder { color: var(--rbh-muted); opacity: 1; }

/* ---------- Right cluster ---------- */
.rbh-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.rbh-phone { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.rbh-phone__icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rbh-red);
  display: grid; place-items: center;
  transition: background .2s ease;
  flex-shrink: 0;
}
.rbh-phone__icon svg { color: #fff; }
.rbh-phone:hover .rbh-phone__icon { background: var(--rbh-red-dark); }
.rbh-phone__labels { display: flex; flex-direction: column; line-height: 1.2; }
.rbh-phone__eyebrow { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rbh-muted); font-weight: 600; }
.rbh-phone__num     { display: block; font-size: 14px; font-weight: 700; color: var(--rbh-text); white-space: nowrap; }
.rbh-divider { width: 1px; height: 32px; background: var(--rbh-border); flex-shrink: 0; margin-left: 4px; }

.rbh-icon-btn {
  width: 56px;
  display: grid;
  grid-template-rows: 24px auto;
  row-gap: 4px;
  align-items: center;
  justify-items: center;
  color: #334155; text-decoration: none;
  transition: color .2s ease;
  cursor: pointer; flex-shrink: 0;
  background: transparent; border: 0; padding: 0;
  font-family: var(--rbh-font);
  line-height: 1;
}
.rbh-icon-btn > svg {
  display: block;
  width: 20px; height: 20px;
  grid-row: 1;
  align-self: center;
}
.rbh-icon-btn:hover { color: var(--rbh-red); }
.rbh-icon-btn__label { grid-row: 2; font-size: 10px; font-weight: 600; line-height: 1; }

/* FunnelKit cart widget — scaled and re-coloured for our desktop header.
   Keeps FunnelKit's own classes intact so their click + count binding works. */
.rbh-fkcart-wrap { cursor: pointer; color: #334155; }
.rbh-fkcart-wrap .fkcart-shortcode-container,
.rbh-fkcart-wrap .fkcart-mini-toggler {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1;
}
.rbh-fkcart-wrap .fkcart-shortcode-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Scale FunnelKit's natural 40×40 svg down to match our other icons + force dark colour */
.rbh-fkcart-wrap svg {
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
  fill: currentColor !important;
}
.rbh-fkcart-wrap:hover { color: var(--rbh-red); }
/* Red count pill — 14×14px with 9px font, proportioned to the 22px icon.
   !important on every property because FunnelKit's base CSS sets
   absolute sizes with high specificity. */
.rbh-fkcart-wrap .fkcart-shortcode-count,
.rbh-fkcart-wrap .fkcart-item-count {
  position: absolute !important;
  top: -4px !important;
  right: -7px !important;
  min-width: 14px !important;
  width: auto !important;
  height: 14px !important;
  padding: 0 4px !important;
  background: var(--rbh-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ---------- Nav row ---------- */
.rbh-nav-row {
  background: #fff;
  border-top: 1px solid #F1F5F9;
  padding: 0 32px;
  height: var(--rbh-nav-h);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rbh-nav { display: flex; align-items: center; gap: 4px; }
.rbh-nav__item { position: relative; }
.rbh-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;   /* centre the text + chevron horizontally */
  text-align: center;        /* centre the text when it wraps to 2 lines */
  gap: 4px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  line-height: 1.2;
  color: var(--rbh-text);
  text-decoration: none;
  transition: background .2s ease;
}
.rbh-nav__link:hover { background: #F1F5F9; }
.rbh-nav__chevron { width: 12px; height: 12px; }
.rbh-deals-pill,
.rbh-deals-pill:hover,
.rbh-deals-pill:focus,
.rbh-deals-pill:visited {
  color: #fff !important;
  text-decoration: none;
}
.rbh-deals-pill {
  margin-left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--rbh-red);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: background .2s ease;
}
.rbh-deals-pill svg { color: #fff !important; }
.rbh-deals-pill:hover { background: var(--rbh-red-dark); }

/* ---------- Mega menu ---------- */
.rbh-nav__item .rbh-mega { display: none; }
.rbh-nav__item:hover .rbh-mega,
.rbh-nav__item:focus-within .rbh-mega { display: block; }

.rbh-mega {
  position: absolute;
  left: 50%;
  top: 100%;
  --rbh-shift: -50%;
  transform: translateX(var(--rbh-shift));
  background: #fff;
  border: 1px solid var(--rbh-black);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  z-index: 50;
  animation: rbhFadeIn .18s ease-out both;
  max-width: calc(100vw - 40px);
}
.rbh-mega--image  { width: 680px; }
.rbh-mega--wide   { width: 560px; }
.rbh-mega--narrow { width: 360px; }

@keyframes rbhFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Content row: left column (shop-all + list) + optional image on the right */
.rbh-mega__content { display: flex; align-items: stretch; }
.rbh-mega__left    { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.rbh-mega__shop-all {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  font-size: 14px; font-weight: 700;
  color: var(--rbh-red);
  background: #fff;
  border-bottom: 1px solid #F1F5F9;
  text-decoration: none;
  transition: background .2s ease;
}
.rbh-mega__shop-all:hover { background: var(--rbh-bg-soft); color: var(--rbh-red); }

.rbh-mega__list {
  list-style: none; margin: 0; padding: 8px 0;
  font-size: 14px;
  flex: 1 1 auto;
}
.rbh-mega__list--two-col { column-count: 2; column-gap: 0; }
.rbh-mega__list li { break-inside: avoid; }
.rbh-mega__list a {
  display: block;
  padding: 8px 24px;
  color: var(--rbh-text);
  text-decoration: none;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.rbh-mega__list a:hover { background: var(--rbh-bg-soft); color: var(--rbh-red); }

/* Two-column list gets a bit more air and a hairline between rows */
.rbh-mega__list--two-col a {
  padding: 11px 24px;
  border-bottom: 1px solid #F1F5F9;
}

/* Image — full height of the dropdown, starts from the very top.
   Thin black line separates it from the left column. */
.rbh-mega__image {
  width: 320px;
  flex-shrink: 0;
  align-self: stretch;
  background-size: cover;
  background-position: center;
  background-color: #F1F5F9;
  min-height: 280px;
  border-left: 1px solid var(--rbh-black);
}

/* Red tagline — smaller font, tighter padding, separated from content above by a thin black line */
.rbh-mega__tagline {
  background: var(--rbh-red);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
  padding: 6px 20px;
  border-top: 1px solid var(--rbh-black);
}

/* ---------- Utility strip ---------- */
.rbh-utility {
  background: var(--rbh-bg-soft);
  border-top: 1px solid var(--rbh-border);
  overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease;
  max-height: 48px; opacity: 1;
}
.rbh-header.is-slim .rbh-utility { max-height: 0; opacity: 0; }
.rbh-utility__inner {
  padding: 0 32px;
  height: var(--rbh-utility-h);
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
  font-size: 10px;
  color: var(--rbh-muted);
  letter-spacing: .02em;
}
.rbh-utility__item { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.rbh-utility__item strong { font-weight: 500; color: #334155; }
.rbh-utility__stars { display: inline-flex; color: #EAB308; }
.rbh-utility__sep  { color: var(--rbh-border); }
.rbh-utility__pipe { color: var(--rbh-border); margin: 0 2px; }
a.rbh-utility__item:hover strong { color: var(--rbh-red); }

/* ---------- Page content spacer ---------- */
.rbh-header-spacer { height: var(--rbh-total-h); }