/* ============================================
   Header
   ============================================ */
.mobile-nav-lang-switcher,
.mobile-drawer-nav {
  display: none !important;
}
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-h, 4.625rem);
  z-index: 1000;
  background: var(--header-bg, #000000);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;
}
.site-header::before {
  display: none;
}
.site-header.scrolled {
  height: 4.25rem;
  background: var(--header-bg, rgba(0, 0, 0, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-header .nav-list > .nav-item > a,
.site-header.scrolled .nav-list > .nav-item > a {
  color: #ffffff;
}
.site-header .nav-list > .nav-item > a .nav-chevron,
.site-header.scrolled .nav-list > .nav-item > a .nav-chevron {
  border-top-color: #ffffff;
}
.site-header .nav-list > .nav-item > a:hover,
.site-header .nav-list > .current-menu-item > a,
.site-header .nav-list > .nav-item:hover > a,
.site-header.scrolled .nav-list > .nav-item > a:hover,
.site-header.scrolled .nav-list > .current-menu-item > a,
.site-header.scrolled .nav-list > .nav-item:hover > a {
  color: var(--accent, #d71a18) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.site-header .nav-list > .current-menu-item > a .nav-chevron,
.site-header .nav-list > .nav-item:hover > a .nav-chevron,
.site-header.scrolled .nav-list > .current-menu-item > a .nav-chevron,
.site-header.scrolled .nav-list > .nav-item:hover > a .nav-chevron {
  border-top-color: var(--accent, #d71a18) !important;
}

/* Contact Us Red Pill Button */
.btn-header-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 1.375rem;
  background: var(--accent, #d71a18);
  color: #ffffff !important;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 10px rgba(215, 26, 24, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.btn-header-contact:hover {
  background: #ff2a28;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 16px rgba(215, 26, 24, 0.5);
}
.site-header .header-inner {
  width: var(--site-container-w) !important;
  max-width: var(--container-max-width, 100rem) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}
.site-logo,
.header-cta {
  flex: none;
}
.site-logo img,
.site-logo .custom-logo {
  height: 2rem !important;
  width: auto !important;
  max-width: 12rem;
  display: block;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.scrolled .site-logo img,
.site-header.scrolled .site-logo .custom-logo {
  height: 1.85rem !important;
}
.site-logo span {
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 2px;
}

/* Navigation */
.main-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  margin-inline: 1.5rem;
}
.nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(1.2rem, 1.5vw, 1.95rem);
}
.nav-list a {
  display: flex;
  align-items: center;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.nav-list > .nav-item > a {
  padding: 0.5rem 0.85rem;
  font-size: 1.05rem;
  white-space: nowrap;
  gap: 0.4rem;
}
@media (min-width: 2561px) {
  .main-nav {
    margin-inline: 3rem;
  }
  .nav-list {
    gap: 3.2rem;
  }
  .nav-list > .nav-item > a {
    padding: 0.65rem 1.5rem;
    font-size: 1.15rem;
  }
}
.nav-list > .nav-item > a:hover,
.nav-list > .current-menu-item > a,
.nav-list > .nav-item.active > a,
.nav-list > .nav-item:hover > a {
  color: var(--accent, #d71a18) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nav-list > .current-menu-item > a .nav-chevron,
.nav-list > .nav-item.active > a .nav-chevron,
.nav-list > .nav-item:hover > a .nav-chevron {
  border-top-color: var(--accent, #d71a18) !important;
}

/* ---- Dropdown & Mega Menu ---- */
.nav-item { 
  position: relative; 
  height: 100%;
  display: flex;
  align-items: center;
}

/* Chevron arrow for parent items */
.nav-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  vertical-align: middle;
  border-left: 0.28rem solid transparent;
  border-right: 0.28rem solid transparent;
  border-top: 0.32rem solid currentColor;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, border-top-color 0.2s ease;
  opacity: 0.85;
}
.nav-item:hover > a .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
  border-top-color: var(--accent, #d71a18);
}

/* --- Dropdown General --- */
.nav-item .sub-menu,
.nav-item .mega-menu {
  margin-top: 0;
}

/* Standard Clean Dropdown Menu - Aligned with Deep Gray Canvas Language */
.nav-item .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(6px);
  width: max-content;
  min-width: 14.375rem;
  background: var(--home-dark-bg, #515151) !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
  padding: 0.85rem 0.5rem !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 100;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  box-sizing: border-box;
}
.nav-item .sub-menu::before {
  content: '';
  position: absolute;
  top: -1.875rem;
  left: -0.75rem;
  right: -0.75rem;
  height: 2rem;
  background: transparent;
}
.nav-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-item .sub-menu li {
  position: relative;
  width: 100%;
  margin: 0;
  border-bottom: none !important;
  text-align: left;
}
.nav-item .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  color: #ffffff !important;
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem !important;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent !important;
  line-height: 1.35;
  box-sizing: border-box;
}
.nav-item .sub-menu a > span:first-child {
  min-width: 0;
  white-space: nowrap;
}
.sub-menu-chevron {
  justify-self: end;
  width: 0.375rem;
  height: 0.375rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.nav-item .sub-menu .sub-menu {
  top: -0.5rem;
  left: calc(100% + 0.5rem);
  transform: translateY(8px);
  min-width: 15rem;
}
.nav-item .sub-menu .sub-menu::before {
  top: 0;
  right: auto;
  left: -0.875rem;
  width: 1rem;
  height: 100%;
}
.nav-item .sub-menu li:hover > .sub-menu,
.nav-item .sub-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-item .sub-menu a:hover,
.nav-item .sub-menu .current-menu-item > a,
.nav-item .sub-menu li:hover > a {
  background: rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Mega Menu (Products - Deep Gray Canvas with Transparent Items and Dark Pill Hover) */
.nav-item.has-mega {
  position: static;
}

.nav-item .mega-menu {
  position: fixed;
  top: calc(var(--header-h) - 2px);
  left: 0;
  width: 100vw;
  background: var(--home-dark-bg, #515151) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s, top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 999;
  padding: 0;
}
.site-header.scrolled .nav-item .mega-menu {
  top: 4.625rem;
}

/* Seamless 100px Top Hover Bridge (Zero gap from Products text down to mega menu) */
.nav-item.has-mega > a {
  position: relative;
}

.nav-item.has-mega > a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -1.5rem;
  right: -1.5rem;
  height: 3.25rem;
  background: transparent;
  z-index: 1001;
}

.nav-item .mega-menu::before {
  content: '';
  position: absolute;
  top: -6.25rem;
  left: 0;
  width: 100%;
  height: 6.875rem;
  background: transparent;
  pointer-events: auto;
}

.nav-item:hover > .mega-menu,
.nav-item .mega-menu:hover,
.nav-item .mega-menu:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner Container Constraint */
.mega-menu-inner {
  display: flex;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: hidden;
  min-height: 0;
  margin: 0 auto;
  width: min(100% - 3rem, var(--max-width));
  padding: 2rem 0;
  box-sizing: border-box;
}

/* Three-Column Cascade Mega Menu Layout */
.mega-col-primary {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding-right: 1.5rem;
  box-sizing: border-box;
}
.mega-primary-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-primary-item {
  margin: 0.25rem 0;
  padding: 0;
  border-bottom: none !important;
}
.mega-primary-item:last-child {
  margin-bottom: 0;
}
.mega-primary-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 1.25rem;
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent !important;
  box-sizing: border-box;
}
.nav-list .mega-primary-link {
  display: grid;
}
.mega-primary-link span {
  min-width: 0;
  line-height: 1.35;
  white-space: nowrap;
}
.mega-primary-link:hover,
.mega-primary-item.active .mega-primary-link {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.primary-arrow {
  position: static;
  margin: 0;
  justify-self: end;
  width: 1rem;
  height: 1rem;
  opacity: 0.75;
  stroke: #ffffff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mega-primary-link:hover .primary-arrow,
.mega-primary-item.active .primary-arrow {
  opacity: 1;
  stroke: #ffffff !important;
  transform: translateX(2px);
}

/* Col 2 & Col 3 Wrapper */
.mega-col-wrapper {
  flex: 1 1 auto;
  display: flex;
  position: relative;
  min-width: 0;
}
.mega-primary-panel {
  display: none;
  width: 100%;
}
.mega-primary-panel.active {
  display: flex;
  animation: megaFadeIn 0.2s ease-out;
}

/* Col 2: Level-2 Subcategories List */
.mega-col-secondary {
  flex: 0 0 32%;
  width: 32%;
  max-width: 32%;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.mega-sec-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b8b8b8;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: none !important;
}
.mega-secondary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-secondary-item {
  margin: 0.25rem 0;
  border-bottom: none !important;
}
.mega-secondary-item:last-child {
  border-bottom: none;
}
.mega-secondary-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 1.25rem;
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent !important;
  box-sizing: border-box;
}
.nav-list .mega-secondary-link {
  display: grid;
}
.mega-secondary-link span {
  min-width: 0;
  line-height: 1.35;
  white-space: nowrap;
}
.mega-secondary-link:hover,
.mega-secondary-item.active .mega-secondary-link {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  font-weight: 400;
}
.sec-arrow {
  position: static;
  margin: 0;
  justify-self: end;
  width: 1rem;
  height: 1rem;
  opacity: 0.75;
  stroke: #ffffff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mega-secondary-link:hover .sec-arrow,
.mega-secondary-item.active .sec-arrow {
  opacity: 1;
  stroke: #ffffff !important;
  transform: translateX(2px);
}

/* Col 3: Level-3 Single Featured Product Showcase (+20% Height with Vertical Padding) */
.mega-col-tertiary {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 1.5rem 0 2.5rem;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.mega-tertiary-panel {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.mega-tertiary-panel.active {
  display: flex;
  animation: megaFadeIn 0.22s ease-out;
}
.mega-single-showcase {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0 !important;
  box-sizing: border-box;
}
.mega-showcase-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 0.5rem 0;
}
.mega-showcase-img {
  height: 22.5rem !important;
  max-height: 22.5rem !important;
  width: auto !important;
  max-width: 90% !important;
  object-fit: contain !important;
  padding: 0.35rem 0 !important;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
  box-sizing: border-box;
}
.mega-showcase-link:hover .mega-showcase-img {
  transform: scale(1.05) translateY(-3px);
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.2));
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
.mega-sub-list a:hover {
  color: var(--accent);
  padding-left: 0.5rem;
  background: none;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  margin: 0;
  transform: translateX(-50%);
  transform-origin: center center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, top 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 18px; }
.menu-toggle span:nth-child(3) { top: 24px; }
.menu-toggle.open span:nth-child(1) {
  top: 18px;
  transform: translateX(-50%) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scale(0);
}
.menu-toggle.open span:nth-child(3) {
  top: 18px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Header CTA & Theme Mode Switcher */
.header-cta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* ==========================================================================
   TranslatePress Language Switcher Dropdown Menu (Desktop)
   ========================================================================== */
.header-lang-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
}

.header-lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: #ffffff !important;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.header-lang-icon {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  fill: #ffffff !important;
  color: #ffffff !important;
  opacity: 0.9;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, fill 0.25s ease;
}

.header-lang-trigger:hover .header-lang-icon,
.header-lang-menu:hover .header-lang-icon {
  opacity: 1;
  transform: scale(1.1);
  fill: #ffffff !important;
}

.header-lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 8rem;
  background: rgba(15, 17, 23, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.625rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
  pointer-events: none;
  z-index: 1050;
}

/* Hover bridge to keep mouse interaction stable */
.header-lang-dropdown::before {
  content: '';
  position: absolute;
  top: -0.625rem;
  left: 0;
  right: 0;
  height: 0.625rem;
  background: transparent;
}

.header-lang-menu:hover .header-lang-dropdown,
.header-lang-menu:focus-within .header-lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.header-lang-item {
  margin: 0;
  padding: 0;
}

.header-lang-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #cbd5e1 !important;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.header-lang-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}

.header-lang-item.is-active .header-lang-link {
  color: #ffffff !important;
  font-weight: 600;
  background: rgba(215, 26, 24, 0.18);
}

.header-lang-check {
  color: var(--accent, #d71a18);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Ensure default TranslatePress floating switchers are fully hidden */
.trp-floating-switcher,
.trp-floater-ls {
  display: none !important;
}
.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  outline: none;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle-btn:hover {
  background: transparent;
  color: var(--accent, #d71a18);
  transform: scale(1.15);
}
.theme-toggle-btn .theme-icon {
  position: absolute;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.theme-toggle-btn .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  color: #facc15;
}
.theme-toggle-btn .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* When in Dark Mode */
[data-theme="dark"] .theme-toggle-btn,
.dark-theme .theme-toggle-btn {
  background: transparent;
  color: #b8b8b8;
}
[data-theme="dark"] .theme-toggle-btn:hover,
.dark-theme .theme-toggle-btn:hover {
  background: transparent;
  color: #facc15;
  transform: scale(1.15);
}
[data-theme="dark"] .theme-toggle-btn .icon-sun,
.dark-theme .theme-toggle-btn .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-toggle-btn .icon-moon,
.dark-theme .theme-toggle-btn .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.header-cta .btn { font-size: 0.88rem; padding: 0.6875rem 1.5rem; border-radius: 0.5rem; }