/* ============================================
   MagTek Navigation — Bootstrap 3 shell, responsive system
   ============================================
   Breakpoint intent (mobile-first → up):
   • Compact phone / narrow foldable closed:  ≤360px
   • Phone portrait:                         ~361–480px
   • Phone landscape / short viewport:       max-height 480px + landscape, or 481–767px landscape
   • Tablet portrait:                        768–1024px portrait
   • Tablet landscape / small laptop:      768–1050px landscape
   • “Desktop” single-row nav:               ≥1051px
   • Large desktop / modest ultrawide:       ≥1400px / ≥1920px
   • Very wide / ultrawide:                  ≥2400px or aspect ≥ 21/9
   ============================================ */

/* ============================================
   VIEWPORT / SCROLLBAR — stop horizontal “jitter”
   100vw includes the scrollbar gutter on many browsers; page scroll
   toggles change the layout width and shift centered nav + absolute rail.
   ============================================ */
html {
  scrollbar-gutter: stable;
}

/* Older engines without scrollbar-gutter (keep vertical track reserved) */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* ============================================
   BASE NAVIGATION STYLES
   ============================================ */

/* Skip link — visible on keyboard focus only */
.magtek-skip-link {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  border: 0;
}

.magtek-skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
  padding: 10px 18px;
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  top: max(12px, env(safe-area-inset-top, 0px));
  z-index: 10001;
  background-color: #d21242;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.magtek-skip-link:focus-visible {
  outline: 3px solid #263c50;
  outline-offset: 2px;
}

/* ============================================
   SITE HEADER — layout isolation from page CSS
   Reduces FOUC/shift from global typography, lists, .navbar overrides
   ============================================ */
.magtek-site-header {
  /* Design tokens — spacing/typography scale for nav */
  --magtek-nav-bg: #ffffff;
  --magtek-nav-ink: #1a1a1e;
  --magtek-nav-ink-muted: #5c5c66;
  --magtek-nav-accent: #d21242;
  --magtek-nav-accent-soft: rgba(210, 18, 66, 0.09);
  --magtek-nav-border: #e6e6ea;
  --magtek-nav-radius: 12px;
  --magtek-nav-touch: 44px;
  --magtek-nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.055);

  /* Motion tokens — duration + easing (nav, dropdown, search strip, embeds) */
  --magtek-nav-motion-duration: 0.2s;
  --magtek-nav-motion-duration-input: 0.22s;
  --magtek-nav-motion-duration-md: 0.25s;
  --magtek-nav-motion-duration-slow: 0.3s;
  --magtek-nav-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --magtek-nav-motion-ease-standard: ease;

  position: relative;
  z-index: 1030;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.magtek-site-header *,
.magtek-site-header *::before,
.magtek-site-header *::after {
  box-sizing: border-box;
}

.magtek-site-header .magtek-main-nav.navbar {
  margin-bottom: 0;
  border: none;
}

.magtek-site-header .magtek-main-nav .navbar-nav {
  list-style: none;
  list-style-image: none;
}

.magtek-site-header .magtek-main-nav .navbar-nav > li {
  list-style: none;
}

.magtek-site-header .magtek-main-nav .navbar-nav > li::before {
  content: none;
  display: none;
}

div#___gcse_0 {
  width: 100% !important;
}

div#___gcse_0 tbody {
  width: 100% !important;
}
/* Main navigation strip */
.magtek-main-nav {
  background-color: var(--magtek-nav-bg, #ffffff);
  border: none;
  border-bottom: 1px solid var(--magtek-nav-border, #e6e6ea);
  border-radius: 0;
  margin-bottom: 0;
  min-height: 75px;
  height: auto;
  box-shadow: var(--magtek-nav-shadow, 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04));
  overflow: visible;
}

/* Gutters: safe-area + fluid scale (foldables, notched phones, tablets) */
.magtek-main-nav .container {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 380px) {
  .magtek-main-nav .container {
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 480px) {
  .magtek-main-nav .container {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 768px) {
  .magtek-main-nav .container {
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 1024px) {
  .magtek-main-nav .container {
    padding-left: max(2.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(2.5rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 1280px) {
  .magtek-main-nav .container {
    padding-left: max(3.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(3.5rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 1536px) {
  .magtek-main-nav .container {
    padding-left: max(4rem, env(safe-area-inset-left, 0px));
    padding-right: max(4rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 992px) {
  .magtek-main-nav .container {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .magtek-main-nav .container {
    max-width: 1170px;
  }
}

@media (min-width: 1400px) {
  .magtek-main-nav .container {
    /* 100% of .magtek-main-nav — tracks layout viewport, not 100vw (+ scrollbar bug) */
    max-width: min(1320px, calc(100% - 3rem));
  }
}

@media (min-width: 1920px) {
  .magtek-main-nav .container {
    max-width: min(1440px, calc(100% - 5rem));
  }
}

@media (min-width: 2560px) {
  .magtek-main-nav .container {
    max-width: min(1560px, calc(100% - 6rem));
  }
}

/* Ensure navbar uses full width */
.magtek-main-nav {
  width: 100%;
}

/* Remove any default Bootstrap navbar spacing that causes downward extension */
.magtek-main-nav .navbar-collapse {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Open menu: scroll inside panel (short landscape / long lists / foldables) */
@media (max-width: 1050px) {
  .magtek-main-nav .navbar-collapse.in,
  .magtek-main-nav .navbar-collapse.collapsing {
    max-height: min(85dvh, 36rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }
}

/* Ensure navbar-header is compact */
.magtek-main-nav .navbar-header {
  margin: 0;
  padding: 0;
  height: 75px;
}

/* Desktop navigation rules - consolidated below */

/* ============================================
   BRAND/LOGO STYLES
   ============================================ */

/* Logo container — left inset comes from .container padding */
.magtek-main-nav .navbar-brand {
  padding: 10px 15px 10px 0;
  height: 55px;
  line-height: 55px;
  margin: 0;
}

/* Logo image */
.magtek-main-nav .navbar-brand img {
  max-height: 55px;
  width: auto;
  vertical-align: middle;
}

/* ============================================
   MOBILE TOGGLE BUTTON
   ============================================ */

/* Mobile menu toggle — min touch target, no 300ms tap delay */
.magtek-main-nav .navbar-toggle {
  border-color: rgba(26, 26, 30, 0.35);
  border-radius: 10px;
  margin-top: 13px;
  margin-bottom: 13px;
  padding: 10px 11px;
  min-width: var(--magtek-nav-touch, 44px);
  min-height: var(--magtek-nav-touch, 44px);
  touch-action: manipulation;
  transition: background-color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    border-color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    box-shadow var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard);
}

/* Toggle button icon bars */
.magtek-main-nav .navbar-toggle .icon-bar {
  background-color: #333;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

/* Toggle button hover state */
.magtek-main-nav .navbar-toggle:hover,
.magtek-main-nav .navbar-toggle:focus {
  background-color: #f5f5f5;
}

/* ============================================
   NAVIGATION MENU ITEMS
   ============================================ */

/* Main navigation list */
.magtek-main-nav .navbar-nav {
  margin: 0;
}

/* Desktop navigation (min-width: 1051px) - All items on one line, no wrapping */
@media (min-width: 1051px) {
  /* Force exact height to prevent downward extension */
  .magtek-main-nav,
  .magtek-main-nav .container,
  .magtek-main-nav .navbar-header,
  .magtek-main-nav .navbar-collapse {
    height: 75px !important;
    max-height: 75px !important;
    min-height: 75px !important;
  }

  /* Remove any margins/padding that could cause extension */
  .magtek-main-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Container: logo + primary links start at content column left */
  .magtek-main-nav .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Keep navbar-collapse visible and inline with logo */
  .magtek-main-nav .navbar-collapse.collapse {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    text-align: left;
    flex: 0 0 auto;
  }

  /* Logo + primary nav in one row from the left */
  .magtek-main-nav .navbar-header {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    margin-right: 20px;
    flex: 0 0 auto;
  }

  /* Center the main navigation items (not the right-aligned ones) */
  .magtek-main-nav .navbar-nav:not(.navbar-right) {
    float: none;
    display: inline-block;
    margin: 0;
    vertical-align: top;
  }

  /* Ensure nav items don't wrap - float left within the centered nav */
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li {
    float: left;
  }

  .magtek-main-nav .navbar-nav > li > a,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding-top: 18px;
    padding-bottom: 18px;
    line-height: 24px;
  }

  /* Dropdown positioning for desktop */
  .magtek-main-nav .navbar-nav .dropdown-menu {
    text-align: left;
  }

  /* Toolbar (cart / search): flex rail, vertically centered */
  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    float: none;
    margin: 0;
  }

  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li {
    float: none;
  }
}

/* Navigation links */
.magtek-main-nav .navbar-nav > li > a {
  color: var(--magtek-nav-ink, #1a1a1e);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 22px 12px;
  line-height: 28px;
  transition: background-color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    transform var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard);
  white-space: nowrap; /* Prevent text wrapping */
  outline: none;
  border: none;
  position: relative;
  touch-action: manipulation;
}

/* Hardware dropdown root: real button, same visual language as primary links */
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--magtek-nav-ink, #1a1a1e);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 22px 12px;
  line-height: 28px;
  transition: background-color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    transform var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard);
  white-space: nowrap;
  outline: none;
  border: none;
  position: relative;
  touch-action: manipulation;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

/* Navigation link hover state - Modern professional effect */
.magtek-main-nav .navbar-nav > li > a:hover,
.magtek-main-nav .navbar-nav > li > a:focus,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:hover,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:focus {
  color: #d21242;
  background-color: rgba(210, 18, 66, 0.05);
  outline: none;
  border: none;
  transform: translateY(-1px);
}

.magtek-main-nav .navbar-nav > li > a:focus-visible,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:focus-visible {
  outline: 2px solid #d21242;
  outline-offset: 2px;
}

.magtek-main-nav .navbar-nav.navbar-right > li > a:focus-visible {
  outline: 2px solid #d21242;
  outline-offset: 2px;
}

/* Icon toolbar: not text links — no underline animation, no Y-shift */
.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a:hover,
.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a:focus,
.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button:hover,
.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button:focus {
  transform: none;
}

.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a::after,
.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button::after {
  display: none !important;
  content: none !important;
}

/* Qwantum nav — aligned with Content/qwantum.css brand (navy + electric blue) */
.magtek-main-nav .navbar-nav > li#qwantum {
  --qw-nav-navy-dark: #0a1628;
  --qw-nav-navy: #162845;
  --qw-nav-navy-light: #1e3a5f;
  --qw-nav-blue: #3b82f6;
  --qw-nav-blue-mid: #60a5fa;
  --qw-nav-blue-soft: #93c5fd;
  --qw-nav-ink: #1e3a5f;
  --qw-nav-underline: linear-gradient(
    90deg,
    var(--qw-nav-navy) 0%,
    var(--qw-nav-blue) 38%,
    var(--qw-nav-blue-mid) 72%,
    var(--qw-nav-blue-soft) 100%
  );
  --qw-nav-underline-active: linear-gradient(
    90deg,
    var(--qw-nav-navy-dark) 0%,
    var(--qw-nav-navy) 22%,
    var(--qw-nav-blue) 55%,
    var(--qw-nav-blue-mid) 100%
  );
}

/* Rest: navy-tinted label so it reads “Qwantum” vs standard MagTek ink */
.magtek-main-nav .navbar-nav > li#qwantum > a {
  color: var(--qw-nav-ink);
  letter-spacing: -0.02em;
}

.magtek-main-nav .navbar-nav > li#qwantum > a:hover,
.magtek-main-nav .navbar-nav > li#qwantum > a:focus {
  color: var(--qw-nav-blue);
  background: linear-gradient(
    135deg,
    rgba(10, 22, 40, 0.06) 0%,
    rgba(22, 40, 69, 0.05) 42%,
    rgba(59, 130, 246, 0.1) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}

.magtek-main-nav .navbar-nav > li#qwantum > a:focus-visible {
  outline-color: var(--qw-nav-blue-mid);
  outline-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35), 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* Hover underline effect for navigation items */
.magtek-main-nav .navbar-nav > li > a::after,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn::after {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: #d21242;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease);
}

.magtek-main-nav .navbar-nav > li > a:hover::after,
.magtek-main-nav .navbar-nav > li > a:focus::after,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:hover::after,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:focus::after {
  transform: scaleX(1);
}

/* Qwantum underline — gradient + soft glow (matches page CTAs / hero accents) */
.magtek-main-nav .navbar-nav > li#qwantum > a::after {
  height: 2px;
  background: var(--qw-nav-underline);
  background-color: transparent;
  border-radius: 2px;
  filter: drop-shadow(0 1px 6px rgba(59, 130, 246, 0.28));
}

.magtek-main-nav .navbar-nav > li#qwantum > a:hover::after,
.magtek-main-nav .navbar-nav > li#qwantum > a:focus::after {
  filter: drop-shadow(0 2px 10px rgba(59, 130, 246, 0.4));
}

/* Active navigation item - Professional active state */
.magtek-main-nav .navbar-nav > li.active > a,
.magtek-main-nav .navbar-nav > li.active > a:hover,
.magtek-main-nav .navbar-nav > li.active > a:focus,
.magtek-main-nav .navbar-nav > li.dropdown.active > button.dropdown-toggle.magtek-dropdown-toggle-btn,
.magtek-main-nav .navbar-nav > li.dropdown.active > button.dropdown-toggle.magtek-dropdown-toggle-btn:hover,
.magtek-main-nav .navbar-nav > li.dropdown.active > button.dropdown-toggle.magtek-dropdown-toggle-btn:focus {
  color: #d21242;
  background-color: rgba(210, 18, 66, 0.08);
  font-weight: 600;
  outline: none;
  border: none;
}

.magtek-main-nav .navbar-nav > li.active > a::after,
.magtek-main-nav .navbar-nav > li.dropdown.active > button.dropdown-toggle.magtek-dropdown-toggle-btn::after {
  transform: scaleX(1);
  background-color: #d21242;
}

/* Qwantum active — navy-forward type + deeper wash (on-brand with product page) */
.magtek-main-nav .navbar-nav > li#qwantum.active > a,
.magtek-main-nav .navbar-nav > li#qwantum.active > a:focus {
  color: var(--qw-nav-navy-dark);
  font-weight: 600;
  background: linear-gradient(
    135deg,
    rgba(10, 22, 40, 0.09) 0%,
    rgba(22, 40, 69, 0.07) 40%,
    rgba(59, 130, 246, 0.12) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}

.magtek-main-nav .navbar-nav > li#qwantum.active > a:hover {
  color: var(--qw-nav-blue);
  background: linear-gradient(
    135deg,
    rgba(10, 22, 40, 0.07) 0%,
    rgba(59, 130, 246, 0.14) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45);
}

.magtek-main-nav .navbar-nav > li#qwantum.active > a::after {
  height: 3px;
  bottom: 17px;
  background: var(--qw-nav-underline-active);
  background-color: transparent;
  border-radius: 2px;
  filter: drop-shadow(0 2px 14px rgba(59, 130, 246, 0.45));
}

.magtek-main-nav .navbar-nav > li#qwantum.active > a:hover::after {
  filter: drop-shadow(0 3px 18px rgba(59, 130, 246, 0.55));
}

/* ============================================
   DROPDOWN MENU STYLES
   ============================================ */

/* Dropdown toggle */
.magtek-main-nav .navbar-nav .dropdown-toggle .caret {
  margin-left: 6px;
  border-top-color: #333;
  border-bottom-color: #333;
  transition: transform var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease);
}

/* Dropdown toggle hover effect */
.magtek-main-nav .navbar-nav .dropdown-toggle:hover .caret,
.magtek-main-nav .navbar-nav .dropdown.open .dropdown-toggle .caret {
  border-top-color: #d21242;
  border-bottom-color: #d21242;
}

/* Dropdown menu container - Modern professional design */
.magtek-main-nav .navbar-nav .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-top: 8px;
  padding: 8px 0;
  min-width: 240px;
  overflow: hidden;
  animation: dropdownFadeIn var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease);
  transform-origin: top;
}

/* Dropdown animation */
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .magtek-main-nav .navbar-toggle {
    transition: none;
  }

  .magtek-site-header .search-container {
    transition: none;
  }

  .magtek-main-nav .navbar-nav .dropdown-menu {
    animation: none;
  }

  .magtek-main-nav .navbar-nav > li > a,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn,
  .magtek-main-nav .navbar-nav .dropdown-menu > li > a,
  .magtek-main-nav .navbar-nav.navbar-right > li > a,
  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions .magtek-nav-action-btn {
    transition: none;
  }

  .magtek-main-nav .navbar-nav > li > a:hover,
  .magtek-main-nav .navbar-nav > li > a:focus,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:hover,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:focus {
    transform: none;
  }

  .magtek-main-nav .navbar-nav > li > a::after,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn::after {
    transition: none;
  }

  .magtek-main-nav .navbar-nav > li#qwantum > a::after,
  .magtek-main-nav .navbar-nav > li#qwantum.active > a::after {
    filter: none;
  }

  .magtek-main-nav .navbar-nav .dropdown-toggle .caret {
    transition: none;
  }

  .magtek-main-nav .navbar-nav .dropdown-menu > li > a:hover,
  .magtek-main-nav .navbar-nav .dropdown-menu > li > a:focus {
    transform: none;
  }

  /* Site search (GSC / Bing): no lift animation on submit buttons */
  .search-container .gsc-input,
  .search-container .gsc-input-box input[type="text"],
  .search-container .gsc-input-box input.gsc-input,
  .search-container .gsc-search-button,
  .search-container .gsc-search-button-v2,
  .search-container input.gsc-search-button,
  .search-container .bcs-container-searchbox input[type="text"],
  .search-container .bcs-container-searchbox input[type="search"],
  .search-container .bcs-container-searchbox button,
  .search-container .bcs-container-searchbox input[type="submit"] {
    transition: none !important;
  }

  .search-container .gsc-search-button:hover,
  .search-container .gsc-search-button-v2:hover,
  .search-container input.gsc-search-button:hover,
  .search-container .gsc-search-button:active,
  .search-container .gsc-search-button-v2:active,
  .search-container input.gsc-search-button:active,
  .search-container .bcs-container-searchbox button:hover,
  .search-container .bcs-container-searchbox input[type="submit"]:hover,
  .search-container .bcs-container-searchbox button:active,
  .search-container .bcs-container-searchbox input[type="submit"]:active {
    transform: none !important;
  }
}

/* Dropdown menu items - Modern professional styling */
.magtek-main-nav .navbar-nav .dropdown-menu > li > a {
  color: #333;
  font-size: 15px;
  padding: 14px 24px;
  line-height: 1.5;
  transition: background-color var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    color var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    border-left-color var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    transform var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease);
  position: relative;
  display: block;
  border-left: 3px solid transparent;
}

/* Dropdown item divider - Subtle professional separator */
.magtek-main-nav .navbar-nav .dropdown-menu > li:not(:last-child) > a {
  border-bottom: 1px solid #f0f0f0;
}

/* First and last dropdown items - Rounded corners */
.magtek-main-nav .navbar-nav .dropdown-menu > li:first-child > a {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.magtek-main-nav .navbar-nav .dropdown-menu > li:last-child > a {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: none;
}

/* Dropdown menu item hover — transform only (stable padding, no layout reflow) */
.magtek-main-nav .navbar-nav .dropdown-menu > li > a:hover,
.magtek-main-nav .navbar-nav .dropdown-menu > li > a:focus {
  background-color: rgba(210, 18, 66, 0.08);
  color: #d21242;
  border-left-color: #d21242;
  transform: translateX(4px);
}

/* Active dropdown item - Professional active state */
.magtek-main-nav .navbar-nav .dropdown-menu > li.active > a {
  background-color: rgba(210, 18, 66, 0.12);
  color: #d21242;
  font-weight: 600;
  border-left-color: #d21242;
}

/* ============================================
   RIGHT RAIL — cart & search (unified icon buttons)
   ============================================ */

.magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions {
  margin-right: 0;
}

/* Reset generic nav-link padding on toolbar (overrides > li > a above) */
.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a.magtek-nav-action-btn,
.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  color: #2c2c2e;
  background: transparent;
  text-decoration: none;
  line-height: 0;
  font-size: 0;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  box-shadow: none;
  transition: background-color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    color var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard),
    box-shadow var(--magtek-nav-motion-duration) var(--magtek-nav-motion-ease-standard);
  touch-action: manipulation;
}

.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a.magtek-nav-action-btn:hover,
.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a.magtek-nav-action-btn:focus,
.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn:hover,
.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn:focus {
  color: #d21242;
  background-color: rgba(210, 18, 66, 0.09);
  box-shadow: inset 0 0 0 1px rgba(210, 18, 66, 0.12);
  outline: none;
}

.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn:focus-visible,
.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a.magtek-nav-action-btn:focus-visible {
  outline: 2px solid #d21242;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(210, 18, 66, 0.15);
}

.magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn[aria-expanded="true"] {
  color: #d21242;
  background-color: rgba(210, 18, 66, 0.11);
  box-shadow: inset 0 0 0 1px rgba(210, 18, 66, 0.22);
}

.magtek-site-header .magtek-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}

.magtek-site-header .magtek-nav-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  flex-shrink: 0;
}

/* Collapsed menu: icon row reads as one toolbar strip */
@media (max-width: 767px) {
  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 15px 14px;
    margin-top: 0;
    border-top: 1px solid #ececee;
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  }

  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a.magtek-nav-action-btn,
  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 12px;
    border-bottom: none;
  }

  .magtek-main-nav .navbar-nav:not(.navbar-right) > li:last-child > a {
    border-bottom: none;
  }
}

@media (max-width: 1050px) and (min-width: 768px) {
  .magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > a.magtek-nav-action-btn,
  .magtek-site-header .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions > li > button.magtek-nav-action-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
}

/* ============================================
   RESPONSIVE — phones, foldables, tablets, desktop+
   ============================================ */

/* ≤1050px: collapsible “drawer” nav */
@media (max-width: 1050px) {
  .magtek-main-nav {
    min-height: 58px;
  }

  .magtek-main-nav .navbar-header {
    height: auto !important;
    min-height: 58px;
    max-height: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .magtek-main-nav .navbar-brand {
    padding: 8px 12px 8px 0;
    line-height: 1.15;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  .magtek-main-nav .navbar-brand img {
    max-height: 42px;
  }

  .magtek-main-nav .navbar-toggle {
    flex: 0 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .magtek-main-nav .navbar-nav > li > a,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* Tablet portrait — roomier rows */
@media (min-width: 768px) and (max-width: 1050px) and (orientation: portrait) {
  .magtek-main-nav .navbar-nav > li > a,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding: 16px 18px;
    font-size: 15.5px;
  }

  .magtek-main-nav .navbar-nav .dropdown-menu > li > a {
    padding: 13px 22px;
    font-size: 15px;
  }
}

/* Tablet landscape — tighter bar before desktop breakpoint */
@media (min-width: 768px) and (max-width: 1050px) and (orientation: landscape) {
  .magtek-main-nav {
    min-height: 56px;
  }

  .magtek-main-nav .navbar-header {
    min-height: 56px;
  }

  .magtek-main-nav .navbar-brand img {
    max-height: 40px;
  }

  .magtek-main-nav .navbar-nav > li > a,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding: 13px 15px;
    font-size: 14.5px;
  }
}

@media (max-width: 767px) {
  .magtek-main-nav .navbar-collapse {
    border-top: 1px solid var(--magtek-nav-border, #e6e6ea);
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li.dropdown > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding: 14px 16px;
    min-height: var(--magtek-nav-touch, 44px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .magtek-main-nav .navbar-nav:not(.navbar-right) > li:last-child > a {
    border-bottom: none;
  }

  .magtek-main-nav .navbar-nav:not(.navbar-right) > li.dropdown:last-child > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    border-bottom: none;
  }

  .magtek-main-nav .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0;
    background-color: #f3f4f6;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .magtek-main-nav .navbar-nav .dropdown-menu > li > a {
    padding: 12px 16px 12px 28px;
    color: var(--magtek-nav-ink-muted, #5c5c66);
    min-height: var(--magtek-nav-touch, 44px);
    display: flex;
    align-items: center;
  }

  .magtek-main-nav .navbar-nav.navbar-right:not(.magtek-nav-actions) {
    margin-top: 0;
  }
}

/* Small phones & narrow foldable outer display */
@media (max-width: 360px) {
  .magtek-main-nav {
    min-height: 54px;
  }

  .magtek-main-nav .navbar-header {
    min-height: 54px;
  }

  .magtek-main-nav .navbar-brand img {
    max-height: 36px;
  }

  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
  }
}

/* Phone landscape & short viewports (games, video, split-screen) */
@media (max-width: 896px) and (max-height: 460px) and (orientation: landscape) {
  .magtek-main-nav {
    min-height: 52px;
  }

  .magtek-main-nav .navbar-header {
    min-height: 52px;
  }

  .magtek-main-nav .navbar-brand {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .magtek-main-nav .navbar-brand img {
    max-height: 34px;
  }

  .magtek-main-nav .navbar-toggle {
    margin-top: 6px;
    margin-bottom: 6px;
    min-width: var(--magtek-nav-touch, 44px);
    min-height: var(--magtek-nav-touch, 44px);
  }

  .magtek-main-nav .navbar-collapse.in,
  .magtek-main-nav .navbar-collapse.collapsing {
    max-height: min(92dvh, 28rem);
  }

  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Unfolded foldable / “phablet” band */
@media (min-width: 520px) and (max-width: 767px) {
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Touch hardware: ensure primary rows meet minimum target */
@media (pointer: coarse) {
  .magtek-site-header .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-site-header .magtek-main-nav .navbar-nav:not(.navbar-right) > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    min-height: max(44px, var(--magtek-nav-touch, 44px));
  }

  .magtek-site-header .magtek-main-nav .navbar-nav .dropdown-toggle {
    min-height: var(--magtek-nav-touch, 44px);
    display: flex;
    align-items: center;
  }
}

/* Desktop (min-width: 1200px) - Maintain compact single-line layout */
@media (min-width: 1200px) {
  .magtek-main-nav,
  .magtek-main-nav .container,
  .magtek-main-nav .navbar-header,
  .magtek-main-nav .navbar-collapse {
    height: 75px !important;
    min-height: 75px !important;
    max-height: 75px !important;
  }

  .magtek-main-nav .navbar-brand {
    padding: 10px 15px 10px 0;
    line-height: 55px;
    height: 55px;
  }

  .magtek-main-nav .navbar-brand img {
    max-height: 55px;
  }

  .magtek-main-nav .navbar-nav > li > a,
  .magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding: 22px 12px;
    font-size: 16px;
  }
}

/* Large desktop — subtle air between items */
@media (min-width: 1536px) {
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding-left: 14px;
    padding-right: 14px;
  }

  .magtek-main-nav .navbar-nav.navbar-right.magtek-nav-actions {
    gap: 6px;
  }
}

/* Ultrawide / very wide — deepen bar, generous gutters (container padding already scales) */
@media (min-width: 1920px) {
  .magtek-site-header {
    --magtek-nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 18px 44px rgba(0, 0, 0, 0.065);
  }
}

@media (min-width: 2400px) {
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > a,
  .magtek-main-nav .navbar-nav:not(.navbar-right) > li > button.dropdown-toggle.magtek-dropdown-toggle-btn {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16.5px;
  }
}

@media (min-aspect-ratio: 21/9) and (min-width: 2000px) {
  .magtek-main-nav .container {
    padding-left: max(4.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(4.5rem, env(safe-area-inset-right, 0px));
  }
}

/* ============================================
   ACCESSIBILITY & FOCUS STATES
   ============================================ */

/* Focus states for keyboard navigation - outline removed */
.magtek-main-nav .navbar-nav > li > a:focus,
.magtek-main-nav .navbar-nav > li > button.dropdown-toggle.magtek-dropdown-toggle-btn:focus {
  outline: none;
}

.magtek-main-nav .navbar-toggle:focus {
  outline: 2px solid #d21242;
  outline-offset: 2px;
}

/* Screen reader only text */
.magtek-main-nav .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================
   SEARCH CONTAINER STYLES - MODERN DESIGN
   ============================================
   
   The search container is positioned directly below the navigation bar.
   It is hidden by default and shown when the user clicks the search icon
   in the navigation. It contains both Google Custom Search and Bing
   Custom Search functionality.
   
   Modernized with:
   - Single, clean border design
   - Professional rounded corners
   - Smooth transitions and hover effects
   - Modern button styling
   ============================================ */

/* Search container - positioned below navigation */
.search-container {
  display: none; /* Hidden by default, shown when search icon is clicked */
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 999;
  position: relative;
}

/* Search container when active/visible - Centered */
.search-container.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.magtek-site-header .search-container {
  border-bottom-color: #e8e8ea;
  transition: box-shadow var(--magtek-nav-motion-duration-input) var(--magtek-nav-motion-ease-standard),
    border-color var(--magtek-nav-motion-duration-input) var(--magtek-nav-motion-ease-standard);
}

.magtek-site-header .search-container.active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.06);
}

/* Search icon - hidden, only used for structure */
.search-container .search-icon {
  display: none;
}

/* Search field container - Modern unified design, centered */
.search-container .search-field {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: min(600px, 100%);
  margin: 0 auto;
  padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));
}

/* Navbar form container for search - Remove all default styling */
.search-container .navbar-form {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

/* ============================================
   GOOGLE CUSTOM SEARCH - MODERN OVERRIDE
   ============================================ */

/* Remove ALL default borders and styling from GCS wrapper */
.search-container .gsc-control-cse,
.search-container .gsc-control-wrapper-cse,
.search-container .gsc-search-box,
.search-container .gsc-input-box {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modern search input - Single clean border, compact size */
.search-container .gsc-input,
.search-container .gsc-input-box input[type="text"],
.search-container .gsc-input-box input.gsc-input {
  border: 1px solid #d1d5db !important;
  border-radius: 8px 0 0 8px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  width: 100% !important;
  max-width: 100% !important;
  background-color: #ffffff !important;
  color: #333 !important;
  transition: border-color var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    box-shadow var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    background-color var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease) !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: 42px !important;
  line-height: 1.4 !important;
}

/* Focus state - Magtek red accent */
.search-container .gsc-input:focus,
.search-container .gsc-input-box input[type="text"]:focus,
.search-container .gsc-input-box input.gsc-input:focus {
  border-color: #d21242 !important;
  box-shadow: 0 0 0 3px rgba(210, 18, 66, 0.1) !important;
  background-color: #ffffff !important;
}

/* Placeholder styling */
.search-container .gsc-input::placeholder,
.search-container .gsc-input-box input::placeholder {
  color: #9ca3af !important;
  font-size: 15px !important;
}

/* Modern search button - Magtek red, compact size */
.search-container .gsc-search-button,
.search-container .gsc-search-button-v2,
.search-container input.gsc-search-button {
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  background: linear-gradient(135deg, #d21242 0%, #b01035 100%) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    box-shadow var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    transform var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease),
    color var(--magtek-nav-motion-duration-md) var(--magtek-nav-motion-ease) !important;
  height: 42px !important;
  min-width: 42px !important;
  box-shadow: 0 2px 6px rgba(210, 18, 66, 0.2) !important;
  margin: 0 !important;
  outline: none !important;
}

/* Search button hover - Magtek red effect */
.search-container .gsc-search-button:hover,
.search-container .gsc-search-button-v2:hover,
.search-container input.gsc-search-button:hover {
  background: linear-gradient(135deg, #e91e47 0%, #d21242 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(210, 18, 66, 0.3) !important;
}

/* Search button active */
.search-container .gsc-search-button:active,
.search-container .gsc-search-button-v2:active,
.search-container input.gsc-search-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(210, 18, 66, 0.25) !important;
}

/* Search button icon - Modern magnifying glass */
.search-container .gsc-search-button svg,
.search-container .gsc-search-button-v2 svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
}

/* Remove GCS table structure borders */
.search-container .gsc-input-box table,
.search-container .gsc-input-box tbody,
.search-container .gsc-input-box tr,
.search-container .gsc-input-box td {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ============================================
   BING CUSTOM SEARCH - MODERN OVERRIDE
   ============================================ */

/* Remove ALL default borders from Bing search */
.search-container .bcs-container-searchbox,
.search-container .bcs-container-searchbox * {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Modern Bing search input */
.search-container .bcs-container-searchbox input[type="text"],
.search-container .bcs-container-searchbox input[type="search"] {
  border: 2px solid #e0e0e0 !important;
  border-radius: 12px 0 0 12px !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  width: 100% !important;
  background-color: #ffffff !important;
  color: #333 !important;
  transition: border-color var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease),
    box-shadow var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease),
    background-color var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease) !important;
  outline: none !important;
  box-shadow: none !important;
  height: 52px !important;
  line-height: 1.5 !important;
}

/* Bing input focus */
.search-container .bcs-container-searchbox input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Bing search button */
.search-container .bcs-container-searchbox button,
.search-container .bcs-container-searchbox input[type="submit"] {
  border: none !important;
  border-radius: 0 12px 12px 0 !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease),
    box-shadow var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease),
    transform var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease),
    color var(--magtek-nav-motion-duration-slow) var(--magtek-nav-motion-ease) !important;
  height: 52px !important;
  min-width: 52px !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
  outline: none !important;
}

.search-container .bcs-container-searchbox button:hover,
.search-container .bcs-container-searchbox input[type="submit"]:hover {
  background: linear-gradient(135deg, #4f96ff 0%, #3b82f6 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Hide Bing search verticals and results divs by default */
.search-container #bcs-verticals-div,
.search-container #bcs-results-div {
  display: none;
}

/* ============================================
   SEARCH CONTAINER RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .search-container {
    padding: 12px 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .search-container .search-field {
    padding: 0 max(10px, env(safe-area-inset-left, 0px)) 0 max(10px, env(safe-area-inset-right, 0px));
    max-width: 100%;
  }

  .search-container .gsc-input,
  .search-container .bcs-container-searchbox input {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 10px 14px !important;
    height: 42px !important;
  }

  .search-container .gsc-search-button,
  .search-container .bcs-container-searchbox button {
    padding: 10px 18px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}

/* Short landscape: search strip stays compact */
@media (max-width: 896px) and (max-height: 460px) and (orientation: landscape) {
  .search-container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Large / ultrawide: search field can breathe */
@media (min-width: 1536px) {
  .search-container .search-field {
    max-width: min(720px, 100%);
  }
}

/* Dual-screen foldables — harmless where unsupported */
@media (horizontal-viewport-segments: 2) {
  .magtek-site-header .magtek-main-nav .navbar-collapse.in,
  .magtek-site-header .magtek-main-nav .navbar-collapse.collapsing {
    max-height: min(72dvh, 34rem);
  }
}

/* magtek.css (LayOutCSS) sets .container { max-width: unset !important } — wins over rules above */
.magtek-site-header .magtek-main-nav > .container {
  max-width: 100% !important;
}
@media (min-width: 992px) {
  .magtek-site-header .magtek-main-nav > .container {
    max-width: 970px !important;
  }
}
@media (min-width: 1200px) {
  .magtek-site-header .magtek-main-nav > .container {
    max-width: 1170px !important;
  }
}
@media (min-width: 1400px) {
  .magtek-site-header .magtek-main-nav > .container {
    max-width: min(1320px, calc(100% - 3rem)) !important;
  }
}
@media (min-width: 1920px) {
  .magtek-site-header .magtek-main-nav > .container {
    max-width: min(1440px, calc(100% - 5rem)) !important;
  }
}
@media (min-width: 2560px) {
  .magtek-site-header .magtek-main-nav > .container {
    max-width: min(1560px, calc(100% - 6rem)) !important;
  }
}