/** Shopify CDN: Minification failed

Line 2080:26 Unexpected ")"
Line 2081:13 Unexpected ")"

**/
/* ============================================================
   section-header.css — SafetyRail Source
   Mega menu: L1 → L2 sidebar → L3 panel → promo image
   ============================================================ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --header-announcement-bg: #1a3a5c;
  --header-announcement-color: #fff;
  --header-nav-bg: #fff;
  --header-nav-border: #e5e7eb;
  --header-nav-color: #100166;
  --header-nav-hover: #1a3a5c;
  --header-nav-font-size: 0.9375rem;
  --header-mega-bg: #fff;
  --header-mega-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --header-mega-border: #e5e7eb;
  --header-mega-link-color: #052f59;
  --header-mega-link-hover: #1a3a5c;
  --header-mega-l2-bg: #f8fafc;
  --header-mega-l2-active-bg: #e8f0fb;
  --header-accent: #1a3a5c;
  --header-cart-badge: #e53e3e;
  --transition-fast: 150ms ease;
  --transition-med: 220ms ease;
  --z-nav: 200;
  --z-mega: 199;
  --z-overlay: 198;
}

/* ── Utility ────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════════════════════════ */
.announcement-bar {
  background: var(--header-announcement-bg);
  color: var(--header-announcement-color);
  font-size: 0.8125rem;
  line-height: 1;
}

.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
}

.announcement-bar__contact {
  display: flex;
  align-items: center;
  gap: 20px;
}

.announcement-bar__contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.announcement-bar__contact-item:hover {
  opacity: 0.8;
}

.announcement-bar__contact-item svg {
  flex-shrink: 0;
}

.announcement-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.announcement-bar__usa {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.announcement-bar__usa img {
  border-radius: 50px;
}

.announcement-bar__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.35);
}

.announcement-bar__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.announcement-bar__social a {
  display: flex;
  align-items: center;
  color: #fff;
  transition: opacity var(--transition-fast);
}

.announcement-bar__social a:hover {
  opacity: 0.75;
}

.announcement-bar__social svg {
  width: 18px;
  height: 18px;
}

/* ── Container ──────────────────────────────────────────── */
/* .container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
} */

/* ══════════════════════════════════════════════════════════
   STICKY HEADER
   ══════════════════════════════════════════════════════════ */
.site-header--sticky .nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    padding 0.3s ease;
  will-change: transform;
}

/* Shadow when header is scrolled (stuck) */
.site-header--sticky .nav.is-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  border-bottom-color: transparent;
}

/* on-scroll-up: hide nav when scrolling down */
.site-header--sticky .nav.is-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}

/* on-scroll-up: show nav when scrolling up */
.site-header--sticky .nav.is-visible {
  transform: translateY(0);
}

/* reduce-on-scroll: compact mode */
.site-header--sticky .nav.is-compact {
  padding-top: 8px;
  padding-bottom: 8px;
}

.site-header--sticky .nav.is-compact .nav__logo-img {
  width: 72px;
  transition: width 0.3s ease;
}

/* Non-sticky fallback — keep nav in normal flow */
.site-header:not(.site-header--sticky) .nav {
  position: relative;
  z-index: var(--z-nav);
}

/* ══════════════════════════════════════════════════════════
   NAV BAR — desktop base
   ══════════════════════════════════════════════════════════ */
.nav {
  background: var(--header-nav-bg);
  border-bottom: 1px solid var(--header-nav-border);
  z-index: var(--z-nav);
  padding: 20px 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  /* height: 70px; */
}

/* Logo */
.nav__logo {
  flex-shrink: 0;
  text-decoration: none;
  color: var(--header-nav-color);
}

.nav__logo-img {
  display: block;
  width: 94px;
  transition: width 0.3s ease;
}

.nav__logo-text {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Mobile toggle — hidden on desktop, no margin-left on base */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
}

.nav__toggle:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 2px;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--header-nav-color);
  border-radius: 2px;
  transition:
    transform var(--transition-med),
    opacity var(--transition-fast);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Main menu list */
.nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  flex: 1;
}

.nav__menu-item {
  position: static;
}

li.nav__menu-item.nav__menu-item--has-dropdown.itg-nav-dropdown {
  position: relative;
}

/* L1 link / button */
.nav__menu-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  font-size: var(--header-nav-font-size);
  font-weight: 600;
  color: var(--header-nav-color);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
  line-height: 1.4;
}

.nav__menu-link:hover,
.nav__menu-link:focus-visible {
  color: var(--header-mega-link-hover);
  background: transparent;
}

.nav__menu-link[aria-expanded="true"] {
  color: var(--header-accent);
  background: transparent;
}

.nav__menu-link:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 2px;
}

.nav__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-med);
}

/* Arrow tap target wraps the chevron — enlarges the touch zone on mobile
   so "arrow_only" submenu trigger mode has a reliable hit area. */
.nav__arrow-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 810px) {
  .nav__arrow-tap {
    padding: 10px 14px;
    margin: -10px -14px -10px 0;
  }
}

.nav__menu-link[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* Nav actions */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Search */
.nav__search {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--header-nav-border);
  border-radius: 6px;
  overflow: hidden;
  background: #f8fafc;
  transition: border-color var(--transition-fast);
}

.nav__search:focus-within {
  border-color: var(--header-accent);
  background: #fff;
}

.nav__search-input {
  border: none;
  background: transparent;
  padding: 12px;
  color: var(--header-nav-color);
  width: 170px;
  outline: none;
}

.nav__search-input::placeholder {
  color: #9ca3af;
}

.nav__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--header-accent);
  border: none;
  padding: 12px;
  cursor: pointer;
  color: #fff;
  transition: background var(--transition-fast);
}

.nav__search-btn:hover {
  background: #0f2844;
}

.nav__search-btn svg {
  fill: #fff;
}

/* Mobile-only close button inside search panel (hidden on desktop) */
.nav__search-close {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-text, #052f59);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.nav__search-close:hover,
.nav__search-close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

.nav__search-close svg {
  fill: currentColor;
  display: block;
}

/* Cart */
.nav__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: var(--header-nav-color);
  border-radius: 6px;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.nav__cart:hover {
  color: var(--header-accent);
  background: #f1f5f9;
}

.nav__cart svg {
  fill: currentColor;
}

.nav__cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: var(--header-cart-badge);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════
   MEGA MENU — 3-zone desktop layout
══════════════════════════════════════════════════════════ */
.nav__menu-item {
  position: relative;
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* background: var(--header-mega-bg); */
  border-top: 2px solid var(--header-accent);
  /* border-bottom: 1px solid var(--header-mega-border); */
  /* box-shadow: var(--header-mega-shadow); */
  z-index: var(--z-mega);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-med),
    transform var(--transition-med);
  pointer-events: none;
  max-width: fit-content;
  min-width: fit-content;
  top: calc(200% + 4px);
  border-radius: 0px 0px 8px 8px;
}

.mega-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* .mega-menu:not([hidden]) { display: block; } */

.mega-menu__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 300px;
  max-height: 520px;
  overflow: hidden;
}

/* Zone base — desktop: equal thirds */
.mega-menu__zone {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-height: fit-content;
  background: var(--header-mega-bg);
  border-bottom-left-radius:10px;
  border-bottom-right-radius: 10px;
}

/* ZONE 1: L2 Sidebar */
.mega-menu__zone--l2 {
  border-right: 1px solid var(--header-mega-border);
  overflow-y: auto;
  padding: 16px 0;
}

.mega-menu__l2-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__l2-item {
  position: relative;
}

.mega-menu__l2-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 20px;
  font-weight: 500;
  color: var(--header-mega-link-color);
  text-decoration: none;
  text-transform: capitalize;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-menu__l2-link:hover,
.mega-menu__l2-link:focus-visible {
  color: var(--header-mega-link-hover);
  background: #e8f0fb;
}

.mega-menu__l2-link:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: -2px;
}

.mega-menu__l2-item.is-active > .mega-menu__l2-link {
  color: var(--header-accent);
  background: var(--header-mega-l2-active-bg);
  font-weight: 600;
  border-left: 3px solid var(--header-accent);
  padding-left: 17px;
}

.mega-menu__l2-chevron {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.45;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.mega-menu__l2-item.is-active > .mega-menu__l2-link .mega-menu__l2-chevron,
.mega-menu__l2-link:hover .mega-menu__l2-chevron {
  opacity: 1;
  transform: translateX(2px);
}

/* ZONE 2: L3 Panel — hidden until an L2 item with children is hovered */
.mega-menu__zone--l3 {
  display: none;
  position: relative;
  overflow-y: auto;
  padding: 15px 20px;
}

/* Revealed by JS when L2 item is hovered */
.mega-menu__zone--l3.has-active {
  display: flex;
}

.mega-menu__l3-panel {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
  align-content: start;
}

.mega-menu__l3-panel.is-active {
  display: flex;
  flex-direction: column;
}

.mega-menu__l3-panel.single-col {
  grid-template-columns: 1fr;
}

.mega-menu__l3-link {
  display: block;
  padding: 8px 10px;
  color: var(--header-mega-link-color);
  text-decoration: none;
  text-transform: capitalize;
  border-radius: 5px;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-menu__l3-link:hover,
.mega-menu__l3-link[aria-current="page"] {
  color: var(--header-mega-link-hover);
  background: #e8f0fb;
}

.mega-menu__l3-link:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 2px;
}

/* ZONE 3: Promo */
.mega-menu__zone--promo {
  border-left: 1px solid var(--header-mega-border);
  padding: 16px;
  display: flex;
  align-items: stretch;
}

.mega-menu__promo-card {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

.mega-menu__promo-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 10px;
  overflow: hidden;
}

.mega-menu__promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.mega-menu__promo-card:hover .mega-menu__promo-img {
  transform: scale(1.04);
}

.mega-menu__promo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  color: #fff;
}

.mega-menu__promo-badge {
  display: inline-block;
  backdrop-filter: blur(4px);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  width: fit-content;
}

.mega-menu__promo-heading {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
}

.mega-menu__promo-cta {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  opacity: 0.9;
}

/* ── Mobile overlay ─────────────────────────────────────── */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--transition-med);
}

.nav__overlay.is-visible {
  opacity: 1;
  display: block;
}
.nav__overlay .mega-menu__zone li a[role="menuitem"] {
  font-size: 16px;
}

/* ══════════════════════════════════════════════════════════
   1024px — compress search input
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav__search-input {
    width: 140px;
  }
}

/* ══════════════════════════════════════════════════════════
   901–1100px — hide promo zone only
   ══════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1100px) {
  .mega-menu__zone--promo {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   ≤ 900px — mobile drawer + accordion mega menu
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav__toggle {
    display: flex;
  }

  .nav__search-btn {
    padding: 6px;
  }

  .nav__menu {
    display: flex;
    align-content: flex-start;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    left: -100%;
    width: min(320px, 85vw);
    height: 100dvh;
    background: #fff;
    overflow-y: auto;
    z-index: calc(var(--z-nav) + 1);
    padding: 80px 0 24px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    transition: left var(--transition-med);
  }

  .nav__menu .nav__dropdown-link {
    white-space: initial;
  }

  .nav__menu.is-open {
    left: 0;
  }

  /* .nav__overlay      { display: block; } */

  .nav__menu-item {
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
  }

  .nav__menu-link,
  .nav__menu-link--parent {
    width: 100%;
    padding: 14px 20px;
    border-radius: 0;
    font-size: 1rem;
    justify-content: space-between;
  }

  .mega-menu {
    position: static;
    border: none;
    border-top: 1px solid #f0f0f0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    transition: none;
    max-height: none;
    min-width:auto;
  }

  .mega-menu.is-open {
    display: block;
  }

  .mega-menu__inner {
    flex-direction: column;
    min-height: 0;
    max-height: none;
    padding: 0;
  }

  /* Reset all zone widths — overrides the desktop 33.33% */
  .mega-menu__zone {
    width: 100%;
  }

  .mega-menu__zone--l2 {
    flex: none;
    background: #fff;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 0;
    overflow: visible;
  }

  .mega-menu__zone--l3 {
    display: none;
    padding: 0;
  }

  .mega-menu__zone--promo {
    display: none;
  }

  .mega-menu__l2-item {
    border-bottom: 1px solid #f5f5f5;
  }

  .mega-menu__l2-link {
    padding: 12px 20px 12px 32px;
    border-radius: 0;
    white-space: normal;
  }

  .mega-menu__l2-item.is-active > .mega-menu__l2-link {
    border-left: none;
    padding-left: 32px;
    background: #f1f5f9;
  }

  .mega-menu__l3-panel {
    display: none;
    grid-template-columns: 1fr;
    padding: 4px 0 4px 16px;
    background: #f8fafc;
    border-top: 1px solid #eee;
  }

  .mega-menu__l3-panel.is-active {
    display: grid;
  }

  .mega-menu__l3-link {
    padding: 9px 20px 9px 36px;
    border-radius: 0;
    font-size: 0.84rem;
    white-space: normal;
  }

  /* On tablet/mobile: .nav__search stays in the DOM and measurable (NOT
     display:none) so Searchanise can bind to the input at page load and
     compute the dropdown anchor correctly. It's parked off-screen with
     transform+visibility until JS adds .is-open to slide it in. */
  /* Mobile/tablet: hide the inline desktop search form; when user taps
     the trigger icon, JS adds .is-open which slides the form in as a
     top panel. Input is then focusable → keyboard opens → typing fires
     Searchanise's full-screen overlay (#snize-instant-search-results). */
  .nav__search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1200;
    box-sizing: border-box;
    transform: translateY(-110%);
    transition:
      transform 0.25s ease,
      visibility 0s linear 0.25s,
      opacity 0.2s ease;
    pointer-events: none;

    /* Hard-hide when closed — prevents the form from briefly appearing
       during sticky-header transform transitions on scroll. The sticky
       nav adds/removes transform on scroll, which changes whether this
       fixed-positioned form is viewport-relative or nav-relative, and
       can cause a visible flash mid-transition. visibility:hidden +
       opacity:0 force the browser to never paint the form unless
       .is-open is explicitly applied. */
    visibility: hidden;
    opacity: 0;
  }

  .nav__search.is-open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    /* Delay the visibility transition to 0s when opening so the panel
       becomes visible instantly (transform handles the slide-in). */
    transition:
      transform 0.25s ease,
      visibility 0s linear 0s,
      opacity 0.2s ease;
  }

  .nav__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    font-size: 16px;
    /* prevents iOS focus auto-zoom */
    color: var(--color-text, #052f59);
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-family-body);
    outline: none;
  }

  .nav__search-input:focus {
    border-color: var(--header-accent, #052f59);
    background: #fff;
  }

  .nav__search-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 8px;
    background: var(--header-accent, #052f59);
  }

  /* Show mobile close button inside the panel */
  .nav__search-close {
    display: inline-flex;
  }

  .mega-menu__l2-item.is-active
    > .mega-menu__l2-link
    svg.mega-menu__l2-chevron {
    transform: rotate(90deg);
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE HEADER LAYOUT FIX — ≤ 768px
   ──────────────────────────────────────────────────────────
   Root cause of Image 2 breakage:
   1. .mega-menu__zone { width: 33.33% } leaked into the mobile
      accordion context, compressing all zones to a third width.
   2. .nav__actions { margin-left: auto } + flex gap pushed the
      logo off-center once the hamburger appeared.
   3. Announcement bar text/icons were too wide to fit one row
      at narrow widths, causing chaotic wrapping.

   Fix strategy:
   - Switch .nav__inner to CSS Grid: [toggle][logo][actions]
     so logo is always pixel-perfectly centred.
   - Collapse announcement bar gracefully into 2 rows.
   - Force mega zones to 100% width with !important to beat
     the 33.33% desktop rule without restructuring specificity.
   ══════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) {
  /* ────────────────────────────────────────────────────────
     ANNOUNCEMENT BAR
     Two rows: [phone | email | Made in USA] / [social icons]
     Prevents the wrapping seen in Image 2.
  ──────────────────────────────────────────────────────── */
  .announcement-bar__inner {
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    justify-content: space-between;
    align-items: center;
  }

  .announcement-bar__contact {
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }

  .announcement-bar__contact-item {
    gap: 4px;
  }

  /* .announcement-bar__contact-item span {
    font-size: 0.72rem;
    white-space: nowrap;
  } */
  .announcement-bar__contact-item svg {
    max-width: 15px;
    min-width: 15px;
  }

  .announcement-bar__right {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* .announcement-bar__usa span {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  } */
  .announcement-bar__usa img {
    width: 16px !important;
    height: auto !important;
  }

  .announcement-bar__social {
    gap: 6px;
  }

  .announcement-bar__social svg {
    width: 24px;
    height: 24px;
  }

  /* ────────────────────────────────────────────────────────
     NAV INNER — grid layout: hamburger | logo | cart
     Replaces flex so logo is always truly centred regardless
     of icon count on either side.
  ──────────────────────────────────────────────────────── */
  .nav__inner {
    display: grid;
    /* Fixed 44px columns for icons, auto centre for logo */
    grid-template-columns: 44px 1fr 44px;
    grid-template-areas: "toggle logo actions";
    align-items: center;
    gap: 0;
    height: 64px;
    /* Override container padding for tighter mobile fit */
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Hamburger → left slot */
  .nav__toggle {
    grid-area: toggle;
    display: flex;
    margin-left: 0;
    margin-right: 0;
    padding: 8px 6px;
    justify-self: start;
    align-self: center;
  }

  /* Logo → centre slot, horizontally centred */
  .nav__logo {
    grid-area: logo;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
  }

  .nav__logo-img {
    max-height: 60px;
    width: auto;
  }

  .nav__logo-text {
    font-size: 1rem;
    text-align: center;
  }

  /* Actions → right slot; remove desktop margin-left:auto */
  .nav__actions {
    grid-area: actions;
    margin-left: 0;
    justify-self: end;
    align-self: center;
    gap: 0;
  }

  /* Cart icon */
  .nav__cart {
    padding: 6px;
  }

  .nav__cart svg {
    width: 22px;
    height: 22px;
  }

  .nav__cart-count {
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    font-size: 0.6rem;
  }

  /* ────────────────────────────────────────────────────────
     MEGA MENU ZONE FIX
     Critical: width:33.33% from desktop rule breaks the mobile
     accordion because zones render at one-third drawer width.
     Force 100% here with !important to win the cascade.
  ──────────────────────────────────────────────────────── */
  .mega-menu__zone {
    width: 100% !important;
    flex: none !important;
  }

  /* Belt-and-suspenders: ensure L3 + promo stay hidden */
  .mega-menu__zone--l3,
  .mega-menu__zone--promo {
    display: none !important;
  }

  /* Mobile drawer: padding-top clears the 64px nav */
  .nav__menu {
    padding-top: 15px;
  }

  /* Sticky: compact mode adjustments for mobile */
  .site-header--sticky .nav.is-compact .nav__inner {
    height: 52px;
  }

  .site-header--sticky .nav.is-compact .nav__logo-img {
    max-height: 44px;
    width: auto;
  }
}

/* ══════════════════════════════════════════════════════════
   VERY SMALL — ≤ 480px
   Stack announcement bar vertically
   ══════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {
  .announcement-bar__inner {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
  }

  .announcement-bar__contact,
  .announcement-bar__right {
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }

  /* No room for vertical divider in stacked layout */
  .announcement-bar__divider {
    display: none;
  }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .site-header {
    position: static;
  }

  .announcement-bar,
  .nav__toggle,
  .nav__actions {
    display: none;
  }
}

.nav__dropdown {
  position: absolute;
  top: calc(200% + 4px);
  left: 0;
  width: max-content;
  max-width: max-content;
  background: var(--header-mega-bg);
  border: 1px solid var(--header-mega-border);
  border-top: 2px solid var(--header-accent);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--header-mega-shadow);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: var(--z-mega);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-med),
    transform var(--transition-med);
  pointer-events: none;
}

.nav__dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__dropdown:not([hidden]) {
  display: block;
}

.nav__dropdown-link {
  display: block;
  padding: 9px 18px;
  color: var(--header-mega-link-color);
  text-decoration: none;
  text-transform: capitalize;
  /* white-space: nowrap; */
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
  white-space: nowrap;
}

.nav__dropdown-link:hover,
.nav__dropdown-link[aria-current="page"] {
  color: var(--header-mega-link-hover);
  background: #e8f0fb;
}

/* Mobile: normal dropdown becomes inline accordion */
@media (max-width: 900px) {
  .nav__dropdown {
    position: static;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    padding: 0;
    min-width: 0;
  }

  .nav__dropdown.is-open {
    display: block;
  }

  .nav__dropdown-link {
    padding: 11px 20px 11px 36px;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f5f5;
  }
}

.shopify-section-header {
  position: relative;
  width: 100%;
  z-index: 999;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.shopify-section-header.sticky_header {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.8s ease;
}

/* Smooth entry animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE SEARCH — icon trigger + full-screen overlay
   Pattern: Shopify Horizon / Dawn — tap icon, input slides
   down from top, backdrop dims page, Esc/X/backdrop close.
   ══════════════════════════════════════════════════════════ */

/* Icon trigger (hidden on desktop, shown on ≤900px) */
.nav__search-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  color: var(--header-nav-color, #052f59);
  border-radius: 6px;
  transition: background var(--transition-fast, 0.2s ease);
  min-height: 44px;
  min-width: 44px;
}

.nav__search-trigger:hover,
.nav__search-trigger:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

.nav__search-trigger:focus-visible {
  outline: 2px solid var(--header-accent, #052f59);
  outline-offset: 2px;
}

.nav__search-trigger svg {
  fill: currentColor;
  display: block;
}

@media (max-width: 900px) {
  .nav__search-trigger {
    display: inline-flex;
  }
}

/* ══════════════════════════════════════════════════════════
   SEARCHANISE (Snize) Search & Filter app — on-brand styling

   On mobile/tablet (≤900px), Searchanise takes over with its
   full-screen instant-search overlay (#snize-instant-search-results).
   We brand it to match SafetyRail's design system:
     - Brand accent color for links/buttons
     - Body font-family
     - Consistent spacing + border-radius
     - Suppress the filter/sort popups (not used on this theme)

   On desktop (>900px), Searchanise renders as a dropdown anchored
   to #nav-search-input — inherits theme font/color naturally.
   ══════════════════════════════════════════════════════════ */

/* Suppress Searchanise's standalone filter/sort modals (not used). */
/* #snize-modal-mobile-filters-dialog,
#snize-modal-mobile-sortby-dialog {
  display: none !important;
} */

#snize_results.snize-mobile-design.snize-new-version div.snize-main-panel-dropdown>a {
    margin-left: 6px;
}

#snize_results.snize-mobile-design div.snize-main-panel-dropdown > a {
    background-color: #ffffff !important;
}
#snize_results.snize-mobile-design div.snize-main-panel-dropdown > a {
    color: #000000 !important;
}
/* Prevent Searchanise from locking page scroll via body class */
body.snize-no-scroll {
  overflow: auto !important;
}

/* ── All Searchanise result containers: base branding ── */
.snize-ac-results,
.snize-ac-results-mobile,
#snize-instant-search-results {
  font-family: var(--font-family-body, inherit) !important;
  color: var(--color-text, #052f59) !important;
  -webkit-overflow-scrolling: touch !important;
  /* left: 1012px !important; */
}

/* Product titles + suggestion labels — brand typography */
.snize-ac-results .snize-title,
.snize-ac-results-mobile .snize-title,
#snize-instant-search-results .snize-title {
  font-family: var(--font-family-heading, inherit) !important;
  color: var(--color-accent-2, #062f5a) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}

/* Section labels (Suggestions, Products, Collections, Other Pages) */
.snize-ac-results .snize-label,
.snize-ac-results-mobile .snize-label,
#snize-instant-search-results .snize-label {
  font-family: var(--font-family-body, inherit) !important;
  color: var(--color-text, #052f59) !important;
  opacity: 0.6;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Suggestions — on-brand hover */
.snize-suggestion,
.snize-category,
.snize-page {
  color: var(--color-accent-2, #062f5a) !important;
  transition: background 0.15s ease;
}

.snize-suggestion:hover,
.snize-suggestion:focus,
.snize-category:hover,
.snize-category:focus,
.snize-page:hover,
.snize-page:focus {
  background: rgba(6, 47, 90, 0.06) !important;
}

/* "View All Search Results" link — brand accent */
.snize-view-all-link {
  color: var(--color-accent-1, #115995) !important;
  font-weight: 700 !important;
}

.snize-view-all-link:hover {
  background: rgba(17, 89, 149, 0.08) !important;
} 

/* Product description text */
.snize-ac-results .snize-description,
.snize-ac-results-mobile .snize-description {
  color: var(--color-text, #052f59) !important;
  opacity: 0.72;
}

/* Product labels / tags (e.g., "Buy Online") — inherit brand accent */
-label {
  font-family: var(--font-family-body, inherit) !important;
  border-radius: 3px !important;
}

/* Back / close button inside Searchanise mobile overlay */
.snize-close-button-arrow,
.snize-clear-button {
  color: var(--color-accent-2, #062f5a) !important;
}

/* When our theme search is open, hide Searchanise's own close ×
   — it floats in empty space since we hide the top panel.
   Our .nav__search-close handles closing. */
body.srail-search-open .snize-close-button-arrow {
  display: none !important;
}

/* Input inside Searchanise's mobile overlay — match our style */
.snize-mobile-input-style,
#snize-mobile-search-input {
  font-family: var(--font-family-body, inherit) !important;
  font-size: 16px !important;
  /* prevents iOS auto-zoom */
  color: var(--color-text, #052f59) !important;
}

/* Desktop dropdown polish: ensure it appears above our sticky nav */

/* Mobile overlay: full-screen + brand accents */
@media (max-width: 900px) {
  .snize-ac-results-mobile,
  #snize-instant-search-results {
    z-index: 9999 !important;
  }

  /* Header bar of the mobile takeover — brand background */
  .snize-mobile-top-panel {
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SEARCHANISE — Mobile search bridge
   When our theme search is open (body.srail-search-open), hide
   Searchanise's own mobile search bar and reposition its results
   overlay directly below our theme's fixed search form.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Hide Searchanise's mobile search bar (input + clear button).
     Off-screen via position:fixed rather than visibility:hidden so
     Chrome Android still fires focus events on the child input — a
     zero-height visibility:hidden parent silently blocks .focus() in
     Chrome, preventing the focus-dance activation that Searchanise
     requires before it will render results. */
  body.srail-search-open li.snize-mobile-top-panel {
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Reposition the results overlay below our theme's search bar.
     Our .nav__search form height: 44px input + 12px padding top/bottom
     + env(safe-area-inset-top) = 68px + safe area. */
  body.srail-search-open #snize-instant-search-results {
    top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    /* height: calc(100dvh - 68px - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - 68px - env(safe-area-inset-top, 0px)) !important; */
    overflow-y: auto !important;
    border-radius: 0 !important;
  }

  body.srail-search-open #snize-instant-search-results > ul {
    overflow-y: auto !important;
    max-height: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Our search form must sit above Searchanise's overlay (z:9999) */
  body.srail-search-open .nav__search.is-open {
    z-index: 10000 !important;
  }

  /* Hide results overlay until the user has actually typed a query.
     Prevents the empty Searchanise panel from flashing on click.
     JS toggles .srail-search-has-query on <body> via the input bridge. */
  body.srail-search-open:not(.srail-search-has-query) #snize-instant-search-results {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.srail-search-open.srail-search-has-query #snize-instant-search-results {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.2s ease !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SEARCHANISE — Autocomplete results design
   Comprehensive on-brand styling for the instant-search
   dropdown (desktop) and overlay (mobile). Uses theme tokens
   from css-variables.liquid so colours, fonts, radii, and
   spacing stay in sync with the rest of SafetyRail's design.
   ══════════════════════════════════════════════════════════ */

/* ── Shared: search-term highlight ─────────────────────── */
.snize-ac-results .snize-highlight,
#snize-instant-search-results .snize-highlight,
.snize-ac-results b,
.snize-ac-results strong,
#snize-instant-search-results b,
#snize-instant-search-results strong {
  font-weight: 700 !important;
  color: var(--color-accent-2, #062f5a) !important;
  background: none !important;
}

/* ── Shared: "No results" state ────────────────────────── */
.snize-no-results,
.snize-ac-results .snize-no-results,
#snize-instant-search-results .snize-no-results {
  text-align: center !important;
  padding: 32px 16px !important;
  color: var(--color-text, #052f59) !important;
  opacity: 0.55 !important;
  font-size: 15px !important;
  font-family: var(--font-family-body, inherit) !important;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP — .snize-ac-results dropdown (> 900px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  .snize-ac-results {
    background: var(--color-white, #fff) !important;
    border: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
    border-top: 2px solid var(--header-accent, #1a3a5c) !important;
    border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
    font-family: var(--font-family-body, inherit) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  .snize-ac-results::-webkit-scrollbar { width: 5px; }
  .snize-ac-results::-webkit-scrollbar-track { background: transparent; }
  .snize-ac-results::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }

  .snize-ac-results .snize-label {
    font-family: var(--font-family-body, inherit) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--color-text, #052f59) !important;
    opacity: 0.45 !important;
    padding: 14px 20px 6px !important;
    margin: 0 !important;
    border-top: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
  }

  .snize-ac-results .snize-label:first-child {
    border-top: none !important;
  }


  .snize-ac-results .snize-suggestion a,
  .snize-ac-results .snize-category a,
  .snize-ac-results .snize-page a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    font-size: var(--font-size-body-14, 14px) !important;
    color: var(--color-text, #052f59) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    line-height: 1.4 !important;
  }

  .snize-ac-results .snize-suggestion a:hover,
  .snize-ac-results .snize-category a:hover,
  .snize-ac-results .snize-page a:hover {
    background: var(--color-gray, #f5f5f5) !important;
    color: var(--color-accent-2, #062f5a) !important;
  }

  .snize-ac-results .snize-suggestion a::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.06-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.31-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z' fill='%239ca3af'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
  }
  .snize-search-results-content li span.snize-thumbnail img.snize-flip-image,
  .snize-search-results-content li:hover span.snize-thumbnail img {
    opacity: 1 !important;
  }
  #snize-search-results-grid-mode span.snize-thumbnail img.snize-flip-image{
    display: none !important;
  }
  .snize-ac-results  {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .snize-ac-results :last-of-type {
    border-bottom: none !important;
  }

  .snize-ac-results  a.snize-view-link,
  .snize-ac-results  > a {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    color: inherit !important;
  }

  .snize-ac-results  a.snize-view-link:hover,
  .snize-ac-results  > a:hover {
    background: var(--color-gray, #f5f5f5) !important;
  }

  .snize-ac-results  .snize-item-image,
  .snize-ac-results  .snize-thumbnail-wrapper img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    border-radius: var(--radius-sm, 6px) !important;
    border: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
    background: #fff !important;
    flex-shrink: 0 !important;
  }

  .snize-ac-results  .snize-thumbnail-wrapper {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: var(--radius-sm, 6px) !important;
  }

  .snize-ac-results  .snize-overhidden {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .snize-ac-results  .snize-title {
    font-family: var(--font-family-heading, inherit) !important;
    font-size: var(--font-size-body-14, 14px) !important;
    font-weight: 600 !important;
    color: var(--color-accent-2, #062f5a) !important;
    line-height: 1.35 !important;
    margin: 0 0 2px !important;
    text-transform: var(--title-text-transform, capitalize) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    padding: 0 !important;
  }

  .snize-ac-results  .snize-price {
    font-size: var(--font-size-body-14, 14px) !important;
    font-weight: 700 !important;
    color: var(--color-accent-1, #115995) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .snize-ac-results  .snize-price-old,
  .snize-ac-results  .snize-price del {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-text, #052f59) !important;
    opacity: 0.5 !important;
    text-decoration: line-through !important;
    margin-left: 6px !important;
  }

  .snize-ac-results  .snize-description {
    font-size: 12px !important;
    color: var(--color-text, #052f59) !important;
    opacity: 0.55 !important;
    line-height: 1.4 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .snize-ac-results .snize-view-all-link {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
  }

  .snize-ac-results .snize-view-all-link a {
    display: block !important;
    text-align: center !important;
    padding: 13px 20px !important;
    font-size: var(--font-size-body-14, 14px) !important;
    font-weight: 700 !important;
    color: var(--color-white, #fff) !important;
    background: var(--color-accent-2, #062f5a) !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    letter-spacing: 0.02em !important;
  }

  .snize-ac-results .snize-view-all-link a:hover {
    background: var(--color-accent-1, #115995) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE / TABLET — #snize-instant-search-results (≤ 900px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  #snize-instant-search-results {
    background: var(--color-white, #fff) !important;
    font-family: var(--font-family-body, inherit) !important;
  }

  #snize-instant-search-results > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #snize-instant-search-results li.snize-label {
    font-family: var(--font-family-body, inherit) !important;
    /* font-size: 10px !important; */
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--color-text, #052f59) !important;
    opacity: 0.45 !important;
    padding: 16px 16px 8px !important;
    margin: 0 !important;
    border-top: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
    background: var(--color-white, #fff) !important;
  }

  #snize-instant-search-results li.snize-label:first-child,
  body.srail-search-open #snize-instant-search-results li.snize-label:nth-child(2) {
    border-top: none !important;
  }

  #snize-instant-search-results li.snize-suggestion,
  #snize-instant-search-results li.snize-category,
  #snize-instant-search-results li.snize-page {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
  }

  #snize-instant-search-results li.snize-suggestion a,
  #snize-instant-search-results li.snize-category a,
  #snize-instant-search-results li.snize-page a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 16px !important;
    min-height: var(--touch-target-min, 44px) !important;
    font-size: 15px !important;
    color: var(--color-text, #052f59) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: background 0.15s ease !important;
  }

  #snize-instant-search-results li.snize-suggestion a:active,
  #snize-instant-search-results li.snize-category a:active,
  #snize-instant-search-results li.snize-page a:active {
    background: var(--color-gray, #f5f5f5) !important;
  }

  #snize-instant-search-results li {
    border-bottom: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
    margin: 0 !important;
    /* padding: 0 !important; */
  }

  #snize-instant-search-results li:last-of-type {
    border-bottom: none !important;
  }

  #snize-instant-search-results li a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    min-height: 80px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.15s ease !important;
  }

  #snize-instant-search-results li a:active {
    background: var(--color-gray, #f5f5f5) !important;
  }

  #snize-instant-search-results li .snize-item-image,
  #snize-instant-search-results li .snize-thumbnail-wrapper img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    border-radius: var(--radius-sm, 6px) !important;
    border: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
    background: #fff !important;
    flex-shrink: 0 !important;
  }

  #snize-instant-search-results li .snize-thumbnail-wrapper {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: var(--radius-sm, 6px) !important;
  }

  #snize-instant-search-results li .snize-overhidden {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #snize-instant-search-results li .snize-title {
    font-family: var(--font-family-heading, inherit) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-accent-2, #062f5a) !important;
    line-height: 1.35 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    text-transform: var(--title-text-transform, capitalize) !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #snize-instant-search-results li .snize-price {
    font-size: var(--font-size-body-14, 14px) !important;
    font-weight: 700 !important;
    color: var(--color-accent-1, #115995) !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }

  #snize-instant-search-results li .snize-price-old,
  #snize-instant-search-results li .snize-price del {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-text, #052f59) !important;
    opacity: 0.5 !important;
    text-decoration: line-through !important;
    margin-left: 6px !important;
  }

  #snize-instant-search-results li .snize-description {
    font-size: 13px !important;
    color: var(--color-text, #052f59) !important;
    opacity: 0.55 !important;
    line-height: 1.4 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #snize-instant-search-results li.snize-view-all-link {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--color-white, #fff) !important;
    border-top: 1px solid var(--color-black-10, rgba(0, 0, 0, 0.1)) !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 12px 16px !important;
  }

  #snize-instant-search-results li.snize-view-all-link a {
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--color-white, #fff) !important;
    background: var(--color-accent-2, #062f5a) !important;
    text-decoration: none !important;
    border-radius: var(--radius-sm, 6px) !important;
    letter-spacing: 0.02em !important;
    transition: background 0.2s ease !important;
    min-height: var(--touch-target-min, 44px) !important;
    line-height: calc(var(--touch-target-min, 44px) - 28px) !important;
  }

  #snize-instant-search-results li.snize-view-all-link a:active {
    background: var(--color-accent-1, #115995) !important;
  }

  #snize-instant-search-results::-webkit-scrollbar { width: 4px; }
  #snize-instant-search-results::-webkit-scrollbar-track { background: transparent; }
  #snize-instant-search-results::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
  }
}

/* ── Very small screens: tighter product layout ── */
@media (max-width: 420px) {
  #snize-instant-search-results li .snize-item-image,
  #snize-instant-search-results li .snize-thumbnail-wrapper img,
  #snize-instant-search-results li .snize-thumbnail-wrapper {
    width: 52px !important;
    height: 52px !important;
  }

  #snize-instant-search-results li .snize-title {
    font-size: 14px !important;
  }

  #snize-instant-search-results li a {
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  #snize-instant-search-results li .snize-description {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SEARCHANISE — Search Results PAGE overrides
   /pages/search-results-page

   Searchanise injects product cards () via JS.
   Our JS (initSearchResultsPage in utils.js) detects this and
   adds:
     • data-snize-results="true" on <body>
     • class "snize-results-active" on the Shopify section wrapper

   CSS below uses BOTH the JS-added hooks AND direct Searchanise
   selectors for maximum reliability.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Grey page background ─────────────────────────────
   JS adds .snize-results-active to the section wrapper.
   :has() is a CSS-only fallback for older JS or race conditions. */
   
.snize-search-results-main-content ul.snize-search-results-content::before{
  display:none !important;
}
.snize-results-active {
  background-color: var(--color-gray) !important;
}

.shopify-section-page:has(),
.section:has() {
  background-color: var(--color-gray) !important;
}

/* ── 2. Product card — lift + shadow on hover ────────────
   Matches Home Page .product-card behavior. */
body[data-snize-results] li {
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

body[data-snize-results] li:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 24px rgba(6, 47, 90, 0.12) !important;
}

/* ── 3. Link wrapper ─────────────────────────────────── */
body[data-snize-results]  .snize-view-link {
  text-decoration: none !important;
  color: var(--color-text, #052f59) !important;
  display: block !important;
}

/* ── 4. Card inner — CSS Grid so Quick View overlays image ─
   .snize-overhidden uses display:contents, promoting its
   children (.snize-title, .snize-description, .snize-buttons-bottom)
   to direct grid items of .snize-item.  This lets
   .snize-buttons-bottom share the same grid cell as the image. */
body[data-snize-results]  .snize-item {
  /* display: grid !important; */  
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
}

body[data-snize-results]  .snize-overhidden {
  /* display: contents !important; */
}
body[data-snize-results]  .snize-buttons-bottom {
    overflow: hidden; 
    height: 46px;
    position: relative;
    margin-top: -46px;
}
body[data-snize-results]
  #snize-search-results-grid-mode
  li
  .snize-button {
  left: 0;
  margin-left: 0;
  top: -45px;
  top: 100%;
  opacity: 0;
  transition: all .3s ease-in;
}
body[data-snize-results]
  #snize-search-results-grid-mode li:hover .snize-button{
  top: 0;
  opacity: 1;
}
body[data-snize-results] div.snize div.snize-main-panel {
  background: #fff;
}
body[data-snize-results] .rte {
  overflow-x: hidden; 
    /* margin-top: 20px;   */
}
/* ── 5. Image area ───────────────────────────────────── */
body[data-snize-results]  .snize-thumbnail-wrapper,
#snize-search-results-list-mode span.snize-thumbnail {
  grid-row: 1 / 2 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: var(--radius-sm) !important;
}

body[data-snize-results]  .snize-item-image {
  /* width: 100% !important; */
  /* display: block !important; */
  transition: transform 0.4s ease !important;
  margin: 0 !important;
}

body[data-snize-results]
  :hover
  .snize-item-image:not(.snize-flip-image) {
  transform: scale(1.05) !important;
}

/* ── 6. Quick View — peeks in from image bottom on hover ─
   Exactly like Home Page .product-card__cta:
     • Same grid cell as the image (row 1, col 1)
     • align-self:end pins it to the bottom
     • Hidden: translateY(100%) + opacity 0
     • Hover:  translateY(0)   + opacity 1            */
body[data-snize-results]  .snize-buttons-bottom {
  grid-row: 1 / 2 !important;
  grid-column: 1 / -1 !important;
  align-self: end !important;
  z-index: 5 !important;
  transform: translateY(100%) !important;
  opacity: 0 !important;
  transition:
    transform 0.3s ease,
    opacity 0.25s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

body[data-snize-results] :hover .snize-buttons-bottom {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-snize-results]  .snize-quick-view-button {
  background-color: var(--color-accent-1, #115995) !important;
  color: var(--color-white, #fff) !important;
  width: 100% !important;
  padding: 12px 28px !important;
  font-size: var(--font-size-body-16, 16px) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
  box-sizing: border-box !important;
}

body[data-snize-results]  .snize-quick-view-button:hover {
  opacity: 0.9 !important;
}

/* ── 7. Title — matches .product-card__title ─────────── */
body[data-snize-results]  .snize-title {
  grid-row: 2 / 3 !important;
  grid-column: 1 / -1 !important;
  font-family: var(--font-family-heading, inherit) !important;
  color: var(--color-accent-2, #062f5a) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  font-size: var(--font-size-body-18, 18px) !important;
  text-align: center !important;
  text-transform: var(--title-text-transform, capitalize) !important;
  text-decoration: none !important;
  padding: var(--spacing-sm, 8px) var(--spacing-xs, 4px) 4px !important;
  display: block !important;
}

/* ── 8. Description — muted secondary text ───────────── */
body[data-snize-results]  .snize-description {
  grid-row: 3 / 4 !important;
  grid-column: 1 / -1 !important;
  font-family: var(--font-family-body, inherit) !important;
  color: var(--color-text, #052f59) !important;
  opacity: 0.65 !important;
  font-size: var(--font-size-body-14, 14px) !important;
  line-height: 1.55 !important;
  text-align: center !important;
  padding: 0 var(--spacing-sm, 8px) var(--spacing-sm, 8px) !important;
  display: block !important;
}

/* ── 9. Register mark ® ™ superscript ────────────────── */
body[data-snize-results]  sup {
  font-size: 0.55em !important;
  vertical-align: super !important;
  line-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   SEARCHANISE — Search Results LIST MODE layout
   When the user toggles list view (#snize-search-results-list-mode),
   cards render as horizontal rows: fixed-width image on the left,
   title + description + price stacked on the right, left-aligned.
   Overrides the grid-mode rules above (which are scoped to all cards
   via body[data-snize-results] ); we match specificity
   by adding #snize-search-results-list-mode to every selector.
   ══════════════════════════════════════════════════════════ */

/* Row layout — override the grid layout used for grid mode */
body[data-snize-results] #snize-search-results-list-mode  .snize-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  text-align: left !important;
  padding: var(--spacing-md, 15px) !important;
  background: var(--color-white, #fff) !important;
  border-radius: var(--radius-sm) !important;
  /* width: 100% !important; */
}
#snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode.snize-two-columns li,
div.snize div.snize-search-results-categories li.snize-category{
  background: var(--color-white, #fff) !important;
}

/* Restore normal flow for .snize-overhidden (grid mode uses display:contents
   to promote its children into the .snize-item grid; list mode needs it
   to be a real flex column holding title/description/price). */
body[data-snize-results] #snize-search-results-list-mode  .snize-overhidden {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 4px !important;
  text-align: left !important;
  margin: 0 !important;
}
  body[data-snize-results] #snize-search-results-list-mode  .snize-buttons-bottom{
    align-self: start !important;
  }
  body[data-snize-results] #snize-search-results-list-mode li .snize-button{
    margin: 0 !important;
  }
/* Thumbnail — fixed width on the left, pulled out of its grid cell */
body[data-snize-results] #snize-search-results-list-mode  .snize-thumbnail-wrapper ,
#snize-search-results-list-mode span.snize-thumbnail{
  flex-shrink: 0 !important;
  grid-row: auto !important;
  grid-column: auto !important;
  align-self: flex-start !important;
}

body[data-snize-results] #snize-search-results-list-mode  .snize-item-image {
  width: 100% !important;
  height: 100% !important;
}

/* Title — left-aligned, no padding reset */
body[data-snize-results] #snize-search-results-list-mode  .snize-title {
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 var(--spacing-xs, 5px) !important;
  grid-row: auto !important;
  grid-column: auto !important;
}

/* Description — left-aligned, no clamp here (list has more room) */
body[data-snize-results] #snize-search-results-list-mode  .snize-description {
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 var(--spacing-sm, 10px) !important;
  min-height: 4.5em;
}
body[data-snize-results] li, .snize-suggestion, .snize-category, .snize-page {
    background: transparent !important;
}

/* body[data-snize-results].page-search-results-page .snize-buttons.snize-buttons-bottom {
    display: none  !important;
} */

body[data-snize-results].page-search-results-page .snize-buttons.snize-buttons-bottom{
  opacity:1 !important;
}

.snize-results-active{
  #snize-search-results-list-mode li{
    padding: 10px 0 0 0;
  }
}

/* Hover: keep the lift effect but lighter (rows shouldn't jump as much) */
body[data-snize-results] #snize-search-results-list-mode li:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(6, 47, 90, 0.1) !important;
}

.snize-results-active{
  #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode ul, #snize_results.snize-mobile-design.snize-new-version #snize-search-results-list-mode ul, #snize_results.snize-mobile-design.snize-new-version div.disabled-opacity {
    margin: 0;
    width: 100%;
    gap: 10px;
  }
  #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode span.snize-thumbnail img {
    max-height: 100%;
    width: 100%;
  }
} 
/* ── Responsive: stack image narrower on small screens ── */
@media (max-width: 820px) {
  .snize-results-active{
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode ul, #snize_results.snize-mobile-design.snize-new-version #snize-search-results-list-mode ul, #snize_results.snize-mobile-design.snize-new-version div.disabled-opacity {
      margin: 0;
      width: 100%;
      gap: 10px;
    }
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode.snize-two-columns li {
      width: calc(50% - 10px * 1/2) !important;
    }
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode li span.snize-title {
      font-size: 14px !important;
      min-height: fit-content;
    }
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode span.snize-thumbnail {
      padding: 0;
    }
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode span.snize-thumbnail img {
      max-height: 100%;
      width: 100%;
    }
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-list-mode span.snize-thumbnail {
      margin: 0 ;
    }
  }
}
@media (max-width: 600px) {
  body[data-snize-results] #snize-search-results-list-mode  .snize-item {
    padding: 12px !important;
  }

  body[data-snize-results] #snize-search-results-list-mode  .snize-thumbnail-wrapper,
  #snize-search-results-list-mode span.snize-thumbnail {
    max-width: 110px !important;
  }

  body[data-snize-results] #snize-search-results-list-mode  .snize-title ,
  body[data-snize-results] #snize-search-results-list-mode  .snize-description {
    font-size: var(--font-size-body-14, 14px) !important;
  }
}

@media (max-width: 380px) {
  body[data-snize-results] #snize-search-results-list-mode  .snize-thumbnail-wrapper,
  #snize-search-results-list-mode span.snize-thumbnail {
    max-width: 88px !important;
  }
}
@media (max-width: 380px) {
  .snize-results-active{
    #snize_results.snize-mobile-design.snize-new-version #snize-search-results-grid-mode.snize-two-columns li {
      width: 100% !important;
    }
  }
}