/* Navigation & Menu */
:root { --site-header-height: 116px; --admin-bar-adjust: 0px; }
body.admin-bar { --admin-bar-adjust: 32px; }
.has-fixed-site-header { padding-top: calc(var(--site-header-height) + var(--admin-bar-adjust)); }
body.has-fixed-site-header { scroll-padding-top: calc(var(--site-header-height) + var(--admin-bar-adjust)); }
.admin-bar.has-fixed-site-header .site-header { top: var(--admin-bar-adjust); }
.site-header { background-color:#fff; box-shadow:var(--shadow-sm); position:fixed; top:0; left:0; right:0; z-index:100; width:100%; }
#top_nav.navbar { padding:0; border:0; width:100%; }
#top_nav .container { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:1rem 0; }
.navbar-header { display:flex; align-items:center; gap:1.25rem; flex:0 0 auto; }
.navbar-toggle { display:none; position:relative; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:0; border-radius:999px; background:transparent; cursor:pointer; transition:transform 0.25s ease, box-shadow 0.25s ease; }
.navbar-toggle::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(226,232,240,0.7)); box-shadow:0 10px 25px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.75); transition:inherit; }
.navbar-toggle:focus { outline:none; }
.navbar-toggle:hover::before { box-shadow:0 16px 28px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.9); }
.navbar-toggle[aria-expanded="true"]::before { background:radial-gradient(circle at 30% 30%, rgba(248,250,255,1), rgba(199,210,254,0.85)); box-shadow:0 18px 32px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.9); }
.navbar-toggle:focus-visible { outline:2px solid rgba(37,99,235,0.65); outline-offset:4px; }
.navbar-toggle-box { position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:24px; height:18px; z-index:1; }
.navbar-toggle-line { display:block; width:100%; height:3px; background:var(--dark-color, #111827); border-radius:999px; transform-origin:center; transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, background-color 0.3s ease; }
.navbar-toggle:hover .navbar-toggle-line,
.navbar-toggle:focus-visible .navbar-toggle-line { background:var(--primary-color, #2563eb); }
.navbar-toggle[aria-expanded="true"] .navbar-toggle-line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] .navbar-toggle-line:nth-child(2) { transform:scaleX(0.55); opacity:0; }
.navbar-toggle[aria-expanded="true"] .navbar-toggle-line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.navbar-brand-wrapper { display:flex; align-items:flex-start; gap:0.85rem; }
.navbar-brand-media { display:flex; align-items:center; justify-content:center; }
.navbar-brand, .navbar-brand-wrapper .custom-logo-link { display:inline-flex; align-items:center; text-decoration:none; color:var(--dark-color, #1f2937); font-weight:600; font-size:1.2rem; letter-spacing:0.04em; transition:color var(--transition-base); }
.navbar-brand:hover, .navbar-brand:focus, .navbar-brand-wrapper .custom-logo-link:hover, .navbar-brand-wrapper .custom-logo-link:focus { color:var(--primary-color, #2563eb); outline:none; }
.navbar-brand-img, .navbar-brand-wrapper .custom-logo-link img { height:64px; width:auto; display:block; }
.navbar-brand-name { display:flex; flex-direction:column; justify-content:center; gap:0.25rem; }
.navbar-brand-link { text-decoration:none; color:var(--dark-color, #111827); line-height:1.25; }
.navbar-brand-link:hover, .navbar-brand-link:focus { color:var(--primary-color, #2563eb); outline:none; }
.brand-name-line { display:block; font-weight:600; letter-spacing:0.08em; color:inherit; }
.brand-name-line--primary { font-size:1.05rem; font-weight:700; letter-spacing:0.12em; }
.brand-name-line--secondary { font-size:0.82rem; letter-spacing:0.22em; color:rgba(55,65,81,0.72); }
.navbar-brand-name::after { content:""; display:block; width:42px; height:2px; background:linear-gradient(90deg, var(--primary-color, #2563eb), rgba(37,99,235,0)); border-radius:999px; margin-top:0.35rem; }

.navbar-collapse { flex:1 1 auto; display:flex; justify-content:flex-end; align-items:center; }
.navbar-collapse.collapse { transition:max-height 0.3s ease, visibility 0.3s ease, opacity 0.25s ease; }
.navbar-collapse.collapse:not(.show) { opacity:1; visibility:visible; max-height:none; }

.nav-menu { list-style:none; display:flex; align-items:center; margin:0; padding:0; gap:1.5rem; }
.nav-menu > li { position:relative; }
.nav-menu > li > a { text-decoration:none; color:var(--dark-color, #1f2937); font-weight:500; display:inline-flex; align-items:center; gap:0.35rem; padding:0.5rem 0; transition:color var(--transition-base); }
.nav-menu > li > a:hover, .nav-menu > li > a:focus { color:var(--primary-color, #2563eb); outline:none; }
.nav-menu > li > a::after { content:''; position:absolute; left:50%; bottom:0; height:2px; width:0; background-color:var(--primary-color, #2563eb); transition:width 0.25s ease, transform 0.25s ease; transform:translate(-50%, 0); }
.nav-menu > li > a:hover::after, .nav-menu > li > a:focus::after, .nav-menu > li > a[aria-current]::after, .nav-menu > li.current-menu-item > a::after { width:100%; }
.nav-menu > li.products-dropdown .products-root-link { text-decoration:none; color:var(--dark-color, #1f2937); font-weight:500; display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; transition:color var(--transition-base); justify-content:space-between; width:100%; }
.nav-menu > li.products-dropdown .products-root-label { flex:1; }
.nav-menu > li.products-dropdown .products-root-indicator { width:1.25rem; height:1.25rem; display:inline-flex; align-items:center; justify-content:center; position:relative; color:currentColor; transition:transform 0.3s ease; cursor:pointer; flex-shrink:0; }
.nav-menu > li.products-dropdown .products-root-indicator::before { content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform 0.3s ease; }
.nav-menu > li.products-dropdown .products-root-link:visited { color:var(--dark-color, #1f2937); }
.nav-menu > li.products-dropdown .products-root-link:hover,
.nav-menu > li.products-dropdown .products-root-link:focus { color:var(--primary-color, #2563eb); outline:none; }
.nav-menu > li.products-dropdown.open .products-root-indicator::before,
.nav-menu > li.products-dropdown .products-root-link[aria-expanded="true"] .products-root-indicator::before { transform:rotate(-135deg); }
.nav-menu .sub-menu { list-style:none; margin:0; padding:0.5rem 0 0; position:absolute; top:100%; left:0; min-width:200px; background:#fff; box-shadow:var(--shadow-md); border-radius:8px; border:1px solid rgba(15,23,42,0.08); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity 0.38s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1), visibility 1s ease; z-index:20; }
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu .sub-menu li { width:100%; }
.nav-menu .sub-menu a { display:block; padding:0.55rem 1rem; color:var(--dark-color, #1f2937); text-decoration:none; transition:background-color 0.2s ease, color 0.2s ease; }
.nav-menu .sub-menu a:hover, .nav-menu .sub-menu a:focus { background-color:rgba(37,99,235,0.08); color:var(--primary-color, #2563eb); outline:none; }

#top_nav.navbar .products-dropdown { position:relative; }

@media (max-width:1100px){
  #top_nav .container { gap:1.25rem; }
  .nav-menu { gap:1rem; }
}

@media (max-width:782px){
  :root { --site-header-height: 140px; }
  body.admin-bar { --admin-bar-adjust: 46px; }
  #top_nav .container { flex-direction:column; align-items:stretch; gap:0; }
  .navbar-header { width:100%; justify-content:space-between; gap:0.75rem; padding:0.75rem 1rem; }
  .navbar-toggle { display:flex; }
  .navbar-brand-wrapper { margin-left:0; gap:0.6rem; align-items:center; }
  .navbar-brand-name { gap:0.15rem; align-items:flex-start; }
  .brand-name-line--primary { font-size:0.98rem; letter-spacing:0.1em; }
  .brand-name-line--secondary { font-size:0.72rem; letter-spacing:0.16em; }
  .navbar-collapse { width:100%; flex-basis:100%; }
  .navbar-collapse.collapse { width:100%; max-height:0; overflow:hidden; opacity:0; visibility:hidden; }
  .navbar-collapse.collapse.show { display:block; max-height:480px; overflow:auto; opacity:1; visibility:visible; padding-bottom:0.75rem; }
  .navbar-collapse.collapse:not(.show) .nav-menu { display:none; }
  .navbar-collapse.collapse.show .nav-menu { display:flex; }
  .nav-menu { flex-direction:column; align-items:flex-start; width:100%; gap:0; padding:0.75rem 0; border-top:1px solid rgba(15,23,42,0.08); }
  .nav-menu > li { width:100%; }
  .nav-menu > li > a { width:100%; padding:0.75rem 0.75rem; }
  .nav-menu > li > a::after { display:none; }
  .nav-menu .sub-menu { position:static; transform:none; border:none; box-shadow:none; width:100%; padding:0; opacity:1; visibility:visible; display:none; }
  .nav-menu li.open > .sub-menu { display:block; }
  .nav-menu .sub-menu a { padding:0.65rem 1.5rem; }
}

@media (max-width:480px){
  .navbar-toggle { width:44px; height:44px; }
  .navbar-toggle-box { width:22px; height:16px; }
  .navbar-brand-img, .navbar-brand-wrapper .custom-logo-link img { height:54px; }
  .brand-name-line--primary { font-size:0.9rem; }
  .brand-name-line--secondary { font-size:0.66rem; letter-spacing:0.12em; }
}
