/*
  ELK RIVER GUNS — SIMPLE NAV HEADER  (erg3-)
  2026-04-21

  Container IDs (Elementor element classes):
    dee7000  outer wrapper  (full-width sticky bar)
    5a44ea6  header row     (boxed, flex row: logo|nav|actions)
    b307173  logo column
    86cf7f6  nav column
    a3c0c01  actions column (search · cart · hamburger)

  erg3- HTML widget classes are directly in the DOM and work fine.
  Container layout uses Elementor element-ID classes since _css_classes
  are cached and not yet rendering.
*/


/* ══════════════════════════════════════════════════
   1. OUTER WRAPPER — sticky bar
   .elementor-element-dee7000
══════════════════════════════════════════════════ */
.elementor-location-header {
  position: sticky !important;
  top: 0;
  z-index: 9990;
}

.admin-bar .elementor-location-header { top: 32px !important; }
@media (max-width: 782px) {
  .admin-bar .elementor-location-header { top: 46px !important; }
}

.elementor-element-dee7000 {
  background: linear-gradient(180deg, #0d1117 0%, #080c11 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 0 rgba(200,168,75,.18),
    0 8px 24px rgba(0,0,0,.55);
  transition: background .18s ease, box-shadow .18s ease;
  gap: 0 !important;
  row-gap: 0 !important;
  /* CRITICAL: Elementor applies overflow:hidden to containers by default via
     theme style. That clips absolutely-positioned sub-menus. We need visible
     so desktop dropdowns paint outside the header bar. */
  overflow: visible !important;
}

/* Same fix on the nav column — it has its own overflow:hidden that clips
   dropdowns inside its box. */
.elementor-element-86cf7f6 {
  overflow: visible !important;
}

/* Strip Elementor default vertical padding on all inner containers */
.elementor-element-dee7000 .e-con,
.elementor-element-dee7000 .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════
   2. HEADER ROW — logo | nav | actions
   .elementor-element-5a44ea6 (boxed, flex row)
══════════════════════════════════════════════════ */
.elementor-element-5a44ea6 > .e-con-inner,
.elementor-element-5a44ea6.e-con-boxed > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px;
  gap: 16px;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

@media (max-width: 1024px) {
  .elementor-element-5a44ea6 > .e-con-inner { height: 58px; padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 768px) {
  .elementor-element-5a44ea6 > .e-con-inner { height: 54px; padding-left: 16px !important; padding-right: 16px !important; }
}


/* ══════════════════════════════════════════════════
   3. LOGO COLUMN
   .elementor-element-b307173
══════════════════════════════════════════════════ */
.elementor-element-b307173 {
  flex: 0 0 auto !important;
  width: auto !important;
}

.elementor-element-b307173 img {
  display: block !important;
  width: auto !important;
  max-width: 175px !important;
  max-height: 46px !important;
  height: auto !important;
  object-fit: contain;
  transition: opacity .15s ease;
}

.elementor-element-b307173 a:hover img { opacity: .82; }


/* ══════════════════════════════════════════════════
   4. NAV COLUMN — desktop only
   .elementor-element-86cf7f6
══════════════════════════════════════════════════ */
.elementor-element-86cf7f6 {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center;
  overflow: hidden;
}

/* Elementor nav-menu widget wrappers */
.elementor-element-dee7000 .elementor-nav-menu--main {
  display: flex !important;
  align-items: center;
}

.elementor-element-dee7000 .elementor-nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Top-level nav links */
.elementor-element-dee7000 .elementor-nav-menu > .menu-item > a {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 13px;
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: #d8dce4;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .14s ease;
}

/* Gold underline on hover / active */
.elementor-element-dee7000 .elementor-nav-menu > .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--erg-cta, #C8A84B);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor-element-dee7000 .elementor-nav-menu > .menu-item > a:hover,
.elementor-element-dee7000 .elementor-nav-menu > .menu-item.current-menu-item > a,
.elementor-element-dee7000 .elementor-nav-menu > .menu-item.current-menu-ancestor > a {
  color: #f2f4f6;
}

.elementor-element-dee7000 .elementor-nav-menu > .menu-item > a:hover::after,
.elementor-element-dee7000 .elementor-nav-menu > .menu-item.current-menu-item > a::after,
.elementor-element-dee7000 .elementor-nav-menu > .menu-item.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Chevron on items with sub-menus — use Elementor's own .sub-arrow SVG
   (caret-down) instead of drawing our own. Tame its size/opacity and
   animate the rotate on hover. */
.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children > a .sub-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  opacity: .6;
  transition: transform .14s ease, opacity .14s ease;
}
.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children > a .sub-arrow svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children:hover > a .sub-arrow,
.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children > a.highlighted .sub-arrow {
  opacity: 1;
  transform: rotate(180deg);
}

/* Tightens the nav in the band just above the drawer breakpoint (1221–1400),
   buying clearance where logo + nav + actions are most compressed. Was scoped
   to <=1100px, which after the 2026-08-31 breakpoint change sat entirely inside
   the drawer range and never applied. */
@media (min-width: 1221px) and (max-width: 1400px) {
  .elementor-element-dee7000 .elementor-nav-menu > .menu-item > a {
    padding: 0 8px;
    font-size: 12px;
  }
}


/* ══════════════════════════════════════════════════
   5. DROPDOWN PANELS
══════════════════════════════════════════════════ */
.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children {
  position: relative;
}

.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children > .sub-menu {
  /* display:block is required to override Elementor's widget-nav-menu.min.css
     which sets `.elementor-nav-menu ul { display:none }` — that rule wins on
     the `display` cascade, so opacity/visibility alone keeps it hidden. */
  display: block !important;
  position: absolute;
  /* No gap — the menu-item's gold ::after underline reads as the connector
     to the dropdown panel. Any gap here + a gold border-top creates a
     visible "double gold bar". */
  top: 100%;
  left: 0;
  min-width: 190px;
  background: #0e1318;
  /* Side + bottom border only — the menu-item underline already provides
     the gold accent at the top edge. */
  border: 1px solid rgba(255,255,255,.10);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 6px 0;
  list-style: none;
  margin: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity .15s ease,
    visibility .15s ease,
    transform .15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 9985;
}

.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children:hover > .sub-menu,
.elementor-element-dee7000 .elementor-nav-menu > .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.elementor-element-dee7000 .sub-menu .menu-item a {
  display: block;
  padding: 9px 18px;
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: #b8bec8;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease, padding-left .12s ease;
}

.elementor-element-dee7000 .sub-menu .menu-item a:hover {
  color: var(--erg-cta, #C8A84B);
  background: rgba(200,168,75,.06);
  padding-left: 24px;
}

/* "All [X] →" tail link — gold accent, top separator, arrow.
   Mark the WP menu item with a CSS class of "menu-item--all" (done in
   Appearance → Menus → Screen Options → CSS Classes). */
.elementor-element-dee7000 .sub-menu .menu-item--all {
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.elementor-element-dee7000 .sub-menu .menu-item--all > a {
  color: var(--erg-cta, #C8A84B);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11.5px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.elementor-element-dee7000 .sub-menu .menu-item--all > a::after {
  content: ' \2192';  /* right arrow */
  display: inline-block;
  margin-left: 6px;
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor-element-dee7000 .sub-menu .menu-item--all > a:hover {
  color: #e6c676;
  background: rgba(200,168,75,.10);
  padding-left: 24px; /* keep consistent with other hover */
}

.elementor-element-dee7000 .sub-menu .menu-item--all > a:hover::after {
  transform: translateX(4px);
}

/* Dropdown width tuning per top-level parent. Elementor nav renders the
   top-level li as .menu-item-{ID} — we don't have stable IDs across envs,
   so scope by the .sub-menu count of children when possible, and provide
   a generous min-width that fits "Red Dots & Holographics" label. */
.elementor-element-dee7000 .menu-item-has-children > .sub-menu {
  min-width: 220px;
  max-width: 300px;
}

/* Accessories dropdown wants a touch more room for "Cleaning & Range Supplies" */
.elementor-element-dee7000 .menu-item-has-children.menu-item--accessories > .sub-menu {
  min-width: 250px;
}


/* ══════════════════════════════════════════════════
   6. ACTIONS COLUMN — search · cart · hamburger
   .elementor-element-a3c0c01
══════════════════════════════════════════════════ */
.elementor-element-a3c0c01 {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 2px;
}

/* Search toggle button */
.erg3-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #c8ccd4;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}

.erg3-search-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.erg3-search-toggle svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WooCommerce cart — icon only, no border, no dollar amount
   Actual button: .elementor-menu-cart__toggle_button.elementor-button */
.elementor-element-dee7000 .elementor-menu-cart__toggle_wrapper {
  position: relative;
}

.elementor-element-dee7000 .elementor-menu-cart__toggle_button,
.elementor-element-dee7000 .elementor-menu-cart__toggle_button.elementor-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #c8ccd4 !important;
  box-shadow: none !important;
  text-decoration: none;
  position: relative;
  transition: color .14s ease, background .14s ease !important;
}

.elementor-element-dee7000 .elementor-menu-cart__toggle_button:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}

/* Hide dollar amount text in header cart icon (scoped to toggle only,
   so "View cart" / "Checkout" buttons in the side-cart panel stay visible) */
.elementor-element-dee7000 .elementor-menu-cart__toggle_button .elementor-button-text {
  display: none !important;
}

/* Cart SVG — fill-based Elementor icon, just control size */
.elementor-element-dee7000 .elementor-menu-cart__toggle_button svg.e-font-icon-svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  display: block;
}

/* Gold count bubble — actual class is .elementor-button-icon-qty */
.elementor-element-dee7000 .elementor-button-icon-qty {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--erg-cta, #C8A84B) !important;
  color: #11151a !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1;
  border: none !important;
}

/* Make icon span position:relative so badge can absolute-position */
.elementor-element-dee7000 .elementor-button-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ══════════════════════════════════════════════════
   7. HAMBURGER (mobile only)
══════════════════════════════════════════════════ */
.erg3-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background .14s ease;
}

.erg3-hamburger:hover { background: rgba(255,255,255,.07); }

.erg3-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #c8ccd4;
  border-radius: 2px;
  transition:
    transform .22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .15s ease,
    background .14s ease;
}

.erg3-hamburger:hover .erg3-hamburger__bar { background: #fff; }
.erg3-hamburger.is-open .erg3-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.erg3-hamburger.is-open .erg3-hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.erg3-hamburger.is-open .erg3-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════════
   8. SEARCH BAR (slides open below header)
══════════════════════════════════════════════════ */
.erg3-search-bar {
  overflow: hidden;
  max-height: 0;
  background: #0b0f14;
  /* border appears only when open */
  border-top: 0px solid rgba(255,255,255,.05);
  transition: max-height .22s cubic-bezier(0.22, 1, 0.36, 1), border-top-width .22s;
}

.erg3-search-bar.is-open {
  border-top-width: 1px;
}

.erg3-search-bar.is-open { max-height: 76px; border-top-width: 1px; }

.erg3-search-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 32px;
}

.erg3-search-bar__inner > form {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  overflow: hidden;
  padding: 0 4px 0 18px;
  transition: border-color .14s ease;
}

.erg3-search-bar__inner > form:focus-within {
  border-color: rgba(200,168,75,.45);
}

.erg3-search-bar input[type="search"] {
  flex: 1 1 auto;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  color: #f2f4f6;
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 14px;
  padding: 0;
}

.erg3-search-bar input[type="search"]::placeholder { color: rgba(255,255,255,.35); }

.erg3-search-bar__inner > form button[type="submit"] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  border-radius: 50%;
  transition: color .12s ease;
}

.erg3-search-bar__inner > form button[type="submit"]:hover { color: #fff; }

.erg3-search-bar__inner > form button[type="submit"] svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.erg3-search-bar__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.40);
  cursor: pointer;
  border-radius: 50%;
  transition: color .12s ease, background .12s ease;
}

.erg3-search-bar__close:hover { color: #fff; background: rgba(255,255,255,.08); }

.erg3-search-bar__close svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  .erg3-search-bar__inner { padding: 12px 16px; }
}


/* ══════════════════════════════════════════════════
   9. MOBILE DRAWER OVERLAY
══════════════════════════════════════════════════ */
.erg3-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.erg3-drawer-overlay.is-open { opacity: 1; visibility: visible; }


/* ══════════════════════════════════════════════════
   10. MOBILE DRAWER PANEL
══════════════════════════════════════════════════ */
.erg3-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 88vw);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: #0c1016;
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.erg3-drawer.is-open { transform: translateX(0); }

.erg3-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.erg3-drawer__logo img {
  display: block;
  max-height: 34px;
  width: auto;
}

.erg3-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #b8bec8;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.erg3-drawer__close:hover { background: rgba(255,255,255,.12); color: #fff; }

.erg3-drawer__close svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.erg3-drawer__nav {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 4px 0 20px;
}

.erg3-drawer__nav > li {
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.erg3-drawer__nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #d8dce4;
  text-decoration: none;
  transition: color .12s ease, background .12s ease;
}

.erg3-drawer__nav > li > a:hover {
  color: var(--erg-cta, #C8A84B);
  background: rgba(200,168,75,.04);
}

.erg3-drawer__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: .45;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease, opacity .18s ease;
}

.erg3-drawer__nav > li.is-open .erg3-drawer__arrow {
  transform: rotate(90deg);
  opacity: .85;
}

.erg3-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  background: rgba(0,0,0,.18);
  display: none;
}

.erg3-drawer__nav > li.is-open .erg3-drawer__sub { display: block; }

.erg3-drawer__sub a {
  display: block;
  padding: 10px 18px 10px 30px;
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #8e96a2;
  text-decoration: none;
  transition: color .12s ease;
}

.erg3-drawer__sub a:hover { color: var(--erg-cta, #C8A84B); }

.erg3-drawer__footer {
  flex-shrink: 0;
  padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.erg3-drawer__cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: var(--erg-cta, #C8A84B);
  color: #11151a;
  border-radius: 999px;
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .14s ease;
}

.erg3-drawer__cart-link:hover { background: #d4b65c; }

.erg3-drawer__cart-link svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.erg3-drawer__footer-links {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.erg3-drawer__footer-links a {
  font-family: var(--erg-body, "Montserrat", sans-serif);
  font-size: 12px;
  color: rgba(255,255,255,.38);
  text-decoration: none;
  padding: 4px 10px;
  transition: color .12s ease;
}

.erg3-drawer__footer-links a:hover { color: rgba(255,255,255,.70); }


/* ══════════════════════════════════════════════════
   11. MOBILE / DRAWER BREAKPOINT ≤ 1220px

   Raised 900 → 1220 on 2026-08-31. The desktop nav grew to 7 top-level items
   (770px of <ul> at 9px item padding) and needs ~1220px of viewport before the
   logo + nav + actions columns stop colliding. The nav <ul> has overflow:visible,
   so past that point it does NOT wrap or clip — it silently slides UNDER the
   search toggle. Measured at vw 1100: the search button overlapped the last menu
   item by 78px while the hamburger was still hidden, so every viewport between
   ~901px and ~1220px (small laptops, landscape tablets) rendered a broken header
   with no way to reach the menu. Those widths now get the drawer.

   ⚠️ If a top-level item is ever added or removed, re-measure and move this
   number with it. See project memory reference-erg-header-templates.md.
══════════════════════════════════════════════════ */
@media (max-width: 1220px) {
  /* Hide desktop nav column */
  .elementor-element-86cf7f6 {
    display: none !important;
  }

  /* Show hamburger */
  .erg3-hamburger {
    display: flex;
  }

  .erg3-search-toggle {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 1221px) {
  /* Never show drawer on desktop */
  .erg3-drawer,
  .erg3-drawer-overlay {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════
   12. SCROLL-SHRINK (JS adds .is-scrolled to dee7000 wrapper)
   Note: JS adds class to .erg3-header-wrap — targeting via
   .elementor-element-dee7000.is-scrolled
══════════════════════════════════════════════════ */
.elementor-element-dee7000.is-scrolled {
  background: linear-gradient(180deg, #090d12 0%, #060910 100%) !important;
  box-shadow:
    0 1px 0 0 rgba(200,168,75,.13),
    0 4px 18px rgba(0,0,0,.70);
}

.elementor-element-dee7000.is-scrolled .elementor-element-5a44ea6 > .e-con-inner {
  height: 56px;
}

@media (max-width: 768px) {
  .elementor-element-dee7000.is-scrolled .elementor-element-5a44ea6 > .e-con-inner {
    height: 50px;
  }
}

/* =========================================================
   BRAND RAIL INSIDE A DROPDOWN  (added 2026-08-19)

   Brand landing pages (/benelli/, /sig-sauer/, /staccato/) live INSIDE the
   Firearms dropdown rather than as another top-level nav item. Two classes,
   both set in Appearance → Menus → Screen Options → CSS Classes:

     menu-item--brandhead   a non-clickable "SHOP BY BRAND" label + divider
     menu-item--brand       the brand links themselves, indented under it

   The head item's URL is "#" and pointer-events are off, so it reads as a
   section label instead of a dead link. It sits BELOW the "All Firearms"
   tail link, so the category list still reads top-to-bottom uninterrupted.
   ========================================================= */

.elementor-element-dee7000 .sub-menu .menu-item--brandhead {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.elementor-element-dee7000 .sub-menu .menu-item--brandhead > a {
  pointer-events: none;
  cursor: default;
  color: rgba(242,244,246,.42);
  font-family: var(--erg-head, "Oswald", sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-top: 2px;
  padding-bottom: 6px;
}

/* Never let the label pick up the generic hover treatment. */
.elementor-element-dee7000 .sub-menu .menu-item--brandhead > a:hover {
  color: rgba(242,244,246,.42);
  background: none;
  padding-left: 18px;
}

.elementor-element-dee7000 .sub-menu .menu-item--brand > a {
  padding-left: 18px;
  color: #cfd5dd;
}

/* Small gold tick so brand rows read as a set, not more categories. */
.elementor-element-dee7000 .sub-menu .menu-item--brand > a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(200,168,75,.55);
  vertical-align: middle;
  transition: background .12s ease, transform .12s ease;
}

.elementor-element-dee7000 .sub-menu .menu-item--brand > a:hover::before {
  background: var(--erg-cta, #C8A84B);
  transform: scale(1.25);
}