/* =========================================================
   Nikko-Kikai unified global header
   Based on Vertical MC catalog header / 2026-09-07
   Scoped for machintools top test. Telephone CTA intentionally omitted.
   ========================================================= */
body.mach-page{
  --nk-gold:#b9934c;
  --nk-nav-h:72px;
  --nk-nav-small:58px;
  --nk-ease:cubic-bezier(.2,.75,.2,1);
  margin:0;
}
body.mach-page .g-nav,
body.mach-page .g-nav *,
body.mach-page .drawer,
body.mach-page .drawer *{box-sizing:border-box}

body.mach-page .g-nav{
  position:fixed;inset:0 0 auto;z-index:1400;height:var(--nk-nav-h);
  display:flex;align-items:center;color:#fff;background:rgba(12,13,15,.78);
  border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);transition:.25s;
}
body.mach-page .g-nav.is-compact{height:var(--nk-nav-small);background:rgba(12,13,15,.95)}
body.mach-page .g-wrap{width:min(1380px,calc(100% - 32px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
body.mach-page .brand{display:inline-flex;align-items:center;gap:11px;color:#fff!important;text-decoration:none!important;white-space:nowrap}
body.mach-page .brand img{height:28px;width:auto;display:block;transition:height .25s}
body.mach-page .g-nav.is-compact .brand img{height:24px}
body.mach-page .brand-name{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:800;line-height:1.2}
body.mach-page .brand-name small{font-size:11px;color:rgba(255,255,255,.90);font-weight:700}
body.mach-page .nav-right,body.mach-page .nav-links,body.mach-page .lang-switch{display:flex;align-items:center}
body.mach-page .nav-right{gap:12px}
body.mach-page .nav-links{gap:3px}
body.mach-page .dd{position:relative}
body.mach-page .dd>a{display:inline-flex;align-items:center;min-height:38px;padding:0 10px;border-radius:999px;color:rgba(255,255,255,.9)!important;text-decoration:none!important;font-size:12px;font-weight:700;white-space:nowrap}
body.mach-page .dd>a:hover,body.mach-page .dd.is-open>a{background:rgba(255,255,255,.09)}
body.mach-page .dd>a[aria-current="page"]{color:#f1d99e!important}
body.mach-page .dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;padding:8px;visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;background:rgba(19,20,22,.98);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);transition:.18s}
body.mach-page .dd.is-open .dd-menu{visibility:visible;opacity:1;transform:none;pointer-events:auto}
body.mach-page .dd-menu a{display:flex;align-items:center;min-height:42px;padding:8px 12px;border-radius:9px;color:rgba(255,255,255,.82)!important;text-decoration:none!important;font-size:13px;font-weight:500;white-space:nowrap}
body.mach-page .dd-menu a:hover{background:rgba(185,147,76,.18);color:#fff!important}
body.mach-page .lang-switch{gap:2px;padding:3px;border:1px solid rgba(255,255,255,.15);border-radius:999px}
body.mach-page .lang-switch a{padding:5px 8px;border-radius:999px;color:rgba(255,255,255,.84)!important;text-decoration:none!important;font-size:10px;font-weight:800}
body.mach-page .lang-switch a[aria-current="page"]{color:#111!important;background:#fff}
body.mach-page .nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:999px;color:#17130c!important;text-decoration:none!important;background:linear-gradient(135deg,#e4c47f,var(--nk-gold));font-size:12px;font-weight:800;white-space:nowrap}
body.mach-page .sp-toggle{display:none;min-height:40px;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;background:transparent;font:inherit;font-size:12px;font-weight:800;cursor:pointer}

body.mach-page .drawer{position:fixed;inset:0;z-index:1350;visibility:hidden;opacity:0;pointer-events:none;background:rgba(0,0,0,.48);transition:.25s}
body.mach-page .drawer.is-open{visibility:visible;opacity:1;pointer-events:auto}
body.mach-page .drawer-panel{position:absolute;top:var(--nk-nav-small);right:0;width:min(88vw,370px);height:calc(100% - var(--nk-nav-small));padding:18px;overflow:auto;color:#fff;background:#151619;transform:translateX(100%);transition:.28s var(--nk-ease);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.mach-page .drawer.is-open .drawer-panel{transform:none}
body.mach-page .drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
body.mach-page .drawer-head span{color:var(--nk-gold);font-size:11px;font-weight:900;letter-spacing:.16em}
body.mach-page .drawer-close{padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;background:transparent;font:inherit;cursor:pointer}
body.mach-page .drawer details{border-bottom:1px solid rgba(255,255,255,.1)}
body.mach-page .drawer summary{position:relative;padding:16px 34px 16px 2px;list-style:none;font-size:14px;font-weight:800;cursor:pointer}
body.mach-page .drawer summary::-webkit-details-marker{display:none}
body.mach-page .drawer summary:after{content:"+";position:absolute;right:4px;color:var(--nk-gold);font-size:20px}
body.mach-page .drawer details[open] summary:after{content:"−"}
body.mach-page .drawer details div{padding:0 0 12px 12px}
body.mach-page .drawer details a{display:block;padding:10px 12px;border-radius:9px;color:rgba(255,255,255,.7)!important;text-decoration:none!important;font-size:13px}
body.mach-page .drawer details a:hover{background:rgba(255,255,255,.06);color:#fff!important}
body.mach-page .drawer-actions{display:grid;gap:8px;margin-top:20px}
body.mach-page .drawer-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;color:#17130c!important;text-decoration:none!important;background:var(--nk-gold);font-weight:800}

@media(max-width:1180px){
  body.mach-page .nav-links,body.mach-page .lang-switch,body.mach-page .nav-cta{display:none}
  body.mach-page .sp-toggle{display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:560px){
  body.mach-page .g-wrap{width:calc(100% - 20px);gap:10px}
  body.mach-page .brand{gap:8px;min-width:0}
  body.mach-page .brand img{height:24px}
  body.mach-page .brand-name{display:block;max-width:60vw;overflow:hidden;text-overflow:ellipsis;font-size:12px}
  body.mach-page .brand-name small{font-size:9px;margin-left:5px}
  body.mach-page .sp-toggle{padding:0 11px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  body.mach-page .g-nav,body.mach-page .brand img,body.mach-page .dd-menu,body.mach-page .drawer,body.mach-page .drawer-panel{transition:none!important}
}


/* 2026-09-08 dropdown usability fix */
body.mach-page .dd{position:relative}
body.mach-page .dd::after{
  content:"";position:absolute;left:-4px;right:-4px;top:100%;
  height:14px;display:none;background:transparent;pointer-events:auto
}
body.mach-page .dd.is-open::after{display:block}


/* 2026-09-08 header isolation / theme collision protection */
/* Page-specific themes (apple / grinders-silver / edm-copper etc.) must not recolor the global header. */
html body.mach-page #nkGNav.g-nav{
  height:var(--nk-nav-h) !important;
  color:#fff !important;
  background:rgba(12,13,15,.88) !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
html body.mach-page #nkGNav.g-nav.is-compact{
  height:var(--nk-nav-small) !important;
  background:rgba(12,13,15,.97) !important;
}
html body.mach-page #nkGNav .brand,
html body.mach-page #nkGNav .brand:visited,
html body.mach-page #nkGNav .brand:hover,
html body.mach-page #nkGNav .brand-name{
  color:#fff !important;
}
html body.mach-page #nkGNav .brand-name small{
  color:rgba(255,255,255,.90) !important;
  opacity:1 !important;
}
html body.mach-page #nkGNav .nav-links > .dd > a,
html body.mach-page #nkGNav .nav-links > .dd > a:visited,
html body.mach-page #nkGNav .nav-links > .dd > a:hover{
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
}
html body.mach-page #nkGNav .nav-links > .dd > a[aria-current="page"]{
  color:#f1d99e !important;
}
html body.mach-page #nkGNav .nav-links > .dd > a:hover,
html body.mach-page #nkGNav .nav-links > .dd.is-open > a{
  background:rgba(255,255,255,.09) !important;
  border-color:transparent !important;
}
html body.mach-page #nkGNav .dd-menu{
  background:rgba(19,20,22,.99) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.35) !important;
}
html body.mach-page #nkGNav .dd-menu a,
html body.mach-page #nkGNav .dd-menu a:visited{
  color:rgba(255,255,255,.86) !important;
  background:transparent !important;
}
html body.mach-page #nkGNav .dd-menu a:hover{
  color:#fff !important;
  background:rgba(185,147,76,.18) !important;
}
html body.mach-page #nkGNav .lang-switch{
  border-color:rgba(255,255,255,.18) !important;
  background:transparent !important;
}
html body.mach-page #nkGNav .lang-switch a,
html body.mach-page #nkGNav .lang-switch a:visited{
  color:rgba(255,255,255,.84) !important;
  background:transparent !important;
  border:0 !important;
}
html body.mach-page #nkGNav .lang-switch a[aria-current="page"]{
  color:#111 !important;
  background:#fff !important;
}
html body.mach-page #nkGNav .nav-cta,
html body.mach-page #nkGNav .nav-cta:visited{
  color:#17130c !important;
  background:linear-gradient(135deg,#e4c47f,var(--nk-gold)) !important;
}
html body.mach-page #nkGNav .sp-toggle{
  color:#fff !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.22) !important;
}
html body.mach-page #nkDrawer.drawer{
  display:block !important;
  z-index:1350 !important;
  background:rgba(0,0,0,.48) !important;
}
html body.mach-page #nkDrawer .drawer-panel{
  top:var(--nk-nav-small) !important;
  height:calc(100% - var(--nk-nav-small)) !important;
  color:#fff !important;
  background:#151619 !important;
  border-left:0 !important;
}
html body.mach-page #nkDrawer summary,
html body.mach-page #nkDrawer .drawer-head,
html body.mach-page #nkDrawer .drawer-close{
  color:#fff !important;
}
html body.mach-page #nkDrawer details a,
html body.mach-page #nkDrawer details a:visited{
  color:rgba(255,255,255,.76) !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.10) !important;
}
html body.mach-page #nkDrawer details a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
}
html body.mach-page #nkDrawer .drawer-actions a,
html body.mach-page #nkDrawer .drawer-actions a:visited{
  color:#17130c !important;
  background:var(--nk-gold) !important;
}


/* 2026-09-08 canonical ID collision protection */
/* Page-specific themes (apple / grinders-silver / edm-copper etc.) must not recolor the global header. */
html body.mach-page #gNav.g-nav{
  height:var(--nk-nav-h) !important;
  color:#fff !important;
  background:rgba(12,13,15,.88) !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
html body.mach-page #gNav.g-nav.is-compact{
  height:var(--nk-nav-small) !important;
  background:rgba(12,13,15,.97) !important;
}
html body.mach-page #gNav .brand,
html body.mach-page #gNav .brand:visited,
html body.mach-page #gNav .brand:hover,
html body.mach-page #gNav .brand-name{
  color:#fff !important;
}
html body.mach-page #gNav .brand-name small{
  color:rgba(255,255,255,.90) !important;
  opacity:1 !important;
}
html body.mach-page #gNav .nav-links > .dd > a,
html body.mach-page #gNav .nav-links > .dd > a:visited,
html body.mach-page #gNav .nav-links > .dd > a:hover{
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
}
html body.mach-page #gNav .nav-links > .dd > a[aria-current="page"]{
  color:#f1d99e !important;
}
html body.mach-page #gNav .nav-links > .dd > a:hover,
html body.mach-page #gNav .nav-links > .dd.is-open > a{
  background:rgba(255,255,255,.09) !important;
  border-color:transparent !important;
}
html body.mach-page #gNav .dd-menu{
  background:rgba(19,20,22,.99) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.35) !important;
}
html body.mach-page #gNav .dd-menu a,
html body.mach-page #gNav .dd-menu a:visited{
  color:rgba(255,255,255,.86) !important;
  background:transparent !important;
}
html body.mach-page #gNav .dd-menu a:hover{
  color:#fff !important;
  background:rgba(185,147,76,.18) !important;
}
html body.mach-page #gNav .lang-switch{
  border-color:rgba(255,255,255,.18) !important;
  background:transparent !important;
}
html body.mach-page #gNav .lang-switch a,
html body.mach-page #gNav .lang-switch a:visited{
  color:rgba(255,255,255,.84) !important;
  background:transparent !important;
  border:0 !important;
}
html body.mach-page #gNav .lang-switch a[aria-current="page"]{
  color:#111 !important;
  background:#fff !important;
}
html body.mach-page #gNav .nav-cta,
html body.mach-page #gNav .nav-cta:visited{
  color:#17130c !important;
  background:linear-gradient(135deg,#e4c47f,var(--nk-gold)) !important;
}
html body.mach-page #gNav .sp-toggle{
  color:#fff !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.22) !important;
}
html body.mach-page #drawer.drawer{
  display:block !important;
  z-index:1350 !important;
  background:rgba(0,0,0,.48) !important;
}
html body.mach-page #drawer .drawer-panel{
  top:var(--nk-nav-small) !important;
  height:calc(100% - var(--nk-nav-small)) !important;
  color:#fff !important;
  background:#151619 !important;
  border-left:0 !important;
}
html body.mach-page #drawer summary,
html body.mach-page #drawer .drawer-head,
html body.mach-page #drawer .drawer-close{
  color:#fff !important;
}
html body.mach-page #drawer details a,
html body.mach-page #drawer details a:visited{
  color:rgba(255,255,255,.76) !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.10) !important;
}
html body.mach-page #drawer details a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
}
html body.mach-page #drawer .drawer-actions a,
html body.mach-page #drawer .drawer-actions a:visited{
  color:#17130c !important;
  background:var(--nk-gold) !important;
}