/**
 * Desktop Navigation Styles v2.0
 * Multi-site compatible navigation styling
 * 
 * @version 2.0.0
 * @date January 23, 2026
 * @requires CSS Variables (defined inline per site)
 * @requires navigation-core-v2.0.js
 * 
 * CSS Variables Used:
 * --site-color-primary
 * --site-color-bg-nav
 * --site-color-bg-hover
 * --site-color-border
 * --site-font-size-base
 * --site-font-weight-medium
 * --site-spacing-sm
 * --site-spacing-md
 * --site-spacing-lg
 * --site-border-radius-sm
 * --nav-panel-width
 * --nav-z-index
 * --nav-transition
 */


/* ===============================
   NAVIGATION DROPDOWN STYLES
   Consolidated from snippets (Phase 2)
   =============================== */
  @media only screen and (min-width: 768px) {
    .dn-nav-dropdown-container > nav.dn-nav-dropdown {
        border: 1px solid gray !important;
    }
}

div.dn-nav-dropdown-container-large.nav-transform-dropdown {
  position: fixed !important;
  z-index: var(--nav-z-index) !important;
  background-color: var(--site-color-bg-nav) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  transition: opacity var(--nav-transition) ease-in-out, visibility var(--nav-transition) ease-in-out !important;
  max-width: none !important;
  min-width: var(--nav-panel-width) !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  border: 0px solid var(--site-color-border) !important;
  border-radius: var(--site-border-radius-sm) !important;
}

div.dn-nav-dropdown-container-large.nav-transform-dropdown nav.dn-nav-dropdown {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

.nav-transform-dropdown-content {
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
  min-height: auto !important;
  height: auto !important;
  align-items: flex-start !important;
  background: var(--site-color-bg-nav) !important;
}

/* Left Panel */
.nav-transform-left-panel {
  width: var(--nav-panel-width) !important;
  border-right: 1px solid var(--site-color-border) !important;
  padding: 0 !important;
  background: var(--site-color-bg-light) !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--site-border-radius-sm) 0 0 var(--site-border-radius-sm) !important;
}

.nav-transform-left-panel ul {
  flex: 0 1 auto !important;
  width: 100% !important;
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
}

.nav-transform-left-panel a:hover,
.nav-transform-left-panel a.active {
  background-color: var(--site-color-bg-hover) !important;
}

/* Active state persists when right panel is visible */
.nav-transform-category-link.active {
  background-color: var(--site-color-bg-hover) !important;
}

/* Right Panel */
.nav-transform-right-panel {
  width: var(--nav-panel-width) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  border-left: 0px solid var(--site-color-border) !important;
  align-self: flex-start !important;
  transition: opacity var(--nav-transition) ease-in, visibility var(--nav-transition) ease-in !important;
  overflow: hidden !important;
  background: var(--site-color-bg-nav) !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 var(--site-border-radius-sm) var(--site-border-radius-sm) 0 !important;
}

.nav-transform-right-panel[style*="overflow: visible"],
.nav-transform-right-panel[style*="overflow:visible"] {
  overflow: visible !important;
}

.nav-transform-right-panel ul {
  flex: 1 !important;
  width: 100% !important;
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-transform-right-panel li {
  margin: 0 !important;
  padding: 0 !important;
  display: list-item !important;
  visibility: visible !important;
}

.nav-transform-right-panel a {
  display: block !important;
  padding: var(--site-spacing-md) 0 !important;
  color: var(--site-color-text-primary) !important;
  text-decoration: none !important;
  transition: background var(--nav-transition) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-transform-right-panel a:hover {
  background-color: var(--site-color-bg-hover) !important;
}

/* Fade Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

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

/* Show/Hide States */
div.dn-nav-dropdown-container-large.nav-transform-dropdown.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: auto !important;
}

div.dn-nav-dropdown-container-large.nav-transform-dropdown:not(.show) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Link Menu Styles (Contact/About) */
div.dn-nav-dropdown-container-large.nav-link-menu,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large {
  position: fixed !important;
  z-index: var(--nav-z-index) !important;
  background-color: var(--site-color-bg-nav) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  transition: none !important;
  max-width: none !important;
  min-width: var(--nav-panel-width) !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  border: 0px solid var(--site-color-border) !important;
  border-radius: var(--site-border-radius-sm) !important;
  /* Start off-screen - platform will override with inline styles */
  top: -9999px;
  left: -9999px;
}

div.dn-nav-dropdown-container-large.nav-link-menu nav.dn-nav-dropdown,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large nav.dn-nav-dropdown,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large nav.dn-nav-dropdown {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu .dn-links-list-container,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large .dn-links-list-container,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large .dn-links-list-container {
  padding: 0 !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu .dn-links-list,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large .dn-links-list,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large .dn-links-list {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu .dn-links-list li,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large .dn-links-list li,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large .dn-links-list li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu .dn-links-list a,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large .dn-links-list a,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large .dn-links-list a {
  display: block !important;
  padding: var(--site-spacing-sm) var(--site-spacing-lg) !important;
  font-size: var(--site-font-size-base) !important;
  font-weight: var(--site-font-weight-medium) !important;
  text-decoration: none !important;
  text-align: left !important;
  transition: color var(--nav-transition), background-color var(--nav-transition) !important;
  white-space: nowrap !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu .dn-links-list a:hover,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large .dn-links-list a:hover,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large .dn-links-list a:hover {
  color: var(--site-color-primary) !important;
  background-color: var(--site-color-bg-hover) !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu.show,
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large.show,
div.dn-nav-dropdown-container-large#nav_dropdown_about_large.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: auto !important;
}

div.dn-nav-dropdown-container-large.nav-link-menu:not(.show),
div.dn-nav-dropdown-container-large#nav_dropdown_contact_large:not(.show),
div.dn-nav-dropdown-container-large#nav_dropdown_about_large:not(.show) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Dynamic Menu Vertical Spacing */
.nav-transform-left-panel a {
  padding: var(--site-spacing-sm) var(--site-spacing-lg) !important;
}

.nav-transform-right-panel a {
  padding: var(--site-spacing-sm) var(--site-spacing-lg) !important;
}

/* Dynamically Created Elements */
.nav-transform-category-item {
  margin: 0 !important;
  padding: 0 !important;
}

.nav-transform-category-link,
.nav-transform-category-item a {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: var(--site-spacing-sm) var(--site-spacing-lg) !important;
  font-size: var(--site-font-size-base) !important;
  font-weight: var(--site-font-weight-medium) !important;
  color: var(--site-color-text-primary) !important;
  text-decoration: none !important;
  transition: color var(--nav-transition) !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.nav-transform-category-link:hover,
.nav-transform-category-item a:hover {
  color: var(--site-color-primary) !important;
}

.nav-transform-subcategory-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--site-spacing-sm) var(--site-spacing-lg) !important;
  font-size: var(--site-font-size-base) !important;
  font-weight: var(--site-font-weight-medium) !important;
  color: var(--site-color-text-primary) !important;
  text-decoration: none !important;
  transition: color var(--nav-transition) !important;
  white-space: nowrap !important;
}

.nav-transform-subcategory-link:hover {
  color: var(--site-color-primary) !important;
}

/* Right Panel Link Overrides (for standard template) */
.nav-transform-right-panel li {
  margin: 0 !important;
  padding: 0 !important;
}

.nav-transform-right-panel a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--site-spacing-sm) var(--site-spacing-lg) !important;
  font-size: var(--site-font-size-base) !important;
  font-weight: var(--site-font-weight-medium) !important;
  color: var(--site-color-text-primary) !important;
  text-decoration: none !important;
  transition: color var(--nav-transition) !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

.nav-transform-right-panel a:hover {
  color: var(--site-color-primary) !important;
}

/* Checkout Template Override (block display, background hover) */
.dn-checkout-page .nav-transform-category-link,
.dn-checkout-page .nav-transform-category-item a {
  display: block !important;
  transition: background var(--nav-transition) !important;
}

.dn-checkout-page .nav-transform-category-link:hover,
.dn-checkout-page .nav-transform-category-item a:hover {
  background-color: var(--site-color-bg-hover) !important;
}

.dn-checkout-page .nav-transform-subcategory-link {
  display: block !important;
  transition: background var(--nav-transition) !important;
}

.dn-checkout-page .nav-transform-right-panel a {
  display: block !important;
  transition: background var(--nav-transition) !important;
}


/* ===============================
   Navigation Wrap Detection
   =============================== */

/* ===============================
   Navigation Wrap Detection
   Switch to mobile nav when navigation wraps OR screen width < 768px
   =============================== */

/* When navigation wraps OR screen is small, show mobile nav and hide desktop nav */
/* These rules override platform's media queries when nav-wrapped class is present */
header.nav-wrapped .dn-small-header {
  display: block !important;
}

/* Hide entire large header container (includes both header and nav) */
header.nav-wrapped .dn-large-header-container {
  display: none !important;
}

/* Also hide individual components for extra safety */
header.nav-wrapped .dn-large-header {
  display: none !important;
}

header.nav-wrapped .dn-nav-main-container {
  display: none !important;
}

/* Ensure nav-wrapped class works even inside media query contexts */
@media only screen and (min-width: 768px) {
  header.nav-wrapped .dn-small-header {
    display: block !important;
  }

  header.nav-wrapped .dn-large-header-container {
    display: none !important;
  }

  header.nav-wrapped .dn-large-header {
    display: none !important;
  }

  header.nav-wrapped .dn-nav-main-container {
    display: none !important;
  }
}

/* Fix mobile dropdown positioning - ensure it appears correctly at all screen widths */
/* When nav-wrapped is active (whether due to wrap or small screen), ensure mobile nav works */

/* Ensure small header container can contain positioned dropdown */
header.nav-wrapped .dn-small-header-fixed-container {
  position: relative !important;
}

/* Mobile dropdown positioning - platform typically uses fixed positioning for mobile dropdowns */
/* We need to ensure it works at all screen widths when nav-wrapped is active */
header.nav-wrapped .dn-nav-main-dropdown-container.dn-nav-main-dropdown-small {
  position: fixed !important;
  /* Let platform's dropdownMenu behavior set top/left, but ensure it's visible */
  z-index: 1000 !important;
  /* Ensure dropdown doesn't get positioned at 0,0 */
  /* Platform will position it via JavaScript relative to hamburger menu */
}

/* Ensure mobile dropdown is visible and properly styled when nav is wrapped */
header.nav-wrapped #main_nav_dropdown.dn-nav-main-dropdown-container.dn-nav-main-dropdown-small {
  display: block !important;
  visibility: visible !important;
}

/* Ensure all nav items in mobile dropdown are visible */
header.nav-wrapped #main_nav_dropdown .dn-nav-item {
  display: block !important;
}

/* At screen widths >= 768px when nav is wrapped, ensure mobile dropdown positioning works */
@media only screen and (min-width: 768px) {
  header.nav-wrapped .dn-nav-main-dropdown-container.dn-nav-main-dropdown-small {
    /* Override any platform CSS that might position this incorrectly at wider screens */
    position: fixed !important;
    z-index: 1000 !important;
  }
}


/* ===============================
   Breadcrumb Section Styling
   =============================== */

/* ===============================
   Breadcrumb Section Styling
   =============================== */

#breadcrumbs .dn-breadcrumb-section .dn-page-section-content {
  @media (min-width: 0px) {
    margin: 5px 2% !important;
  }

  @media (min-width: 768px) {
    margin: 5px 5% !important;
  }
}


/* ===================================================================
   DESKTOP NAVIGATION - DROPDOWN BORDERS
   =================================================================== */

/* ===================================================================
   DESKTOP NAVIGATION - LIST MENUS (Contact, About)
   Note: Main styling in Standard custom_body snippet.html
   More specific selectors there override these
   =================================================================== */


/* ===================================================================
   DESKTOP NAVIGATION - LIST MENUS (Contact, About)
   =================================================================== */

/* ===================================================================
   DESKTOP NAVIGATION - 4TH LEVEL SUPPORT
   Nested subcategories in right panel (matches mobile nav pattern)
   =================================================================== */

.nav-transform-right-panel .nav-transform-nested-list,
ul.nav-transform-nested-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.nav-transform-right-panel .nav-transform-nested-link,
a.nav-transform-nested-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  padding: 8px 20px 8px 45px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  white-space: nowrap !important;
  position: relative !important;
}

.nav-transform-right-panel .nav-transform-nested-link:before,
a.nav-transform-nested-link:before {
  content: "∟" !important;
  position: absolute !important;
  left: 28px !important;
  color: #999 !important;
  font-size: 14px !important;
  font-weight: normal !important;
}

.nav-transform-right-panel .nav-transform-nested-link:hover,
a.nav-transform-nested-link:hover {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--site-color-accent, #f94520) !important;
}


/* ===================================================================
   DESKTOP NAVIGATION - 4TH LEVEL SUPPORT
   =================================================================== */

/* ===================================================================
   MOBILE MENU - STEP 2: BASIC STYLES
   Multi-level mobile navigation menu
   Can be safely removed by deleting this entire block
   =================================================================== */

/* Mobile Menu Container */
.sl-mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 85vw;
  max-width: 400px;
  height: 100vh;
  height: 100dvh;
  /* iOS: Use dynamic viewport height */
  background: white;
  z-index: 10000;
  transition: left 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.sl-mobile-menu.active {
  left: 0;
}

/* Mobile Menu Overlay */
.sl-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sl-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Menu Level Container */
.sl-menu-level {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sl-menu-level.sl-level-active {
  transform: translateX(0);
}

.sl-menu-level.sl-level-prev {
  transform: translateX(-30%);
}

/* Level Header */
.sl-level-header {
  display: flex;
  align-items: center;