/* ===================================================================
   AOC HEADER  ·  v3.0.0
   MOBILE-FIRST. The drawer is the default state — the desktop mega-nav
   only switches ON at a min-width. This is the fix for the horizontal
   scroll: nothing 720px-wide can ever render on a 390px screen.
   Breakpoint classes (.aoc-bp-767 / -880 / -1024) only move the switch
   point; with no class at all the header is still correct.
=================================================================== */

/* -------------------------------------------------------------
   TOPBAR
------------------------------------------------------------- */
.aoc-w-header .topbar{background:var(--ink);color:#CFC6B4;font-family:var(--mono);font-size:11px;}
.aoc-w-header .topbar-in{
  max-width:var(--maxw);margin-inline:auto;padding:6px var(--gut);
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.aoc-w-header .topbar-in .tset{display:none;gap:16px;}
.aoc-w-header .topbar a:hover{color:var(--accent);}
.aoc-w-header .topbar .hi{color:var(--accent);}
.aoc-w-header .topbar .promo{
  line-height:1.35;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aoc-w-header .topbar .promo b{color:#F3ECDD;font-weight:500;}
.aoc-w-header.aoc-hide-topbar .topbar{display:none;}

/* -------------------------------------------------------------
   UTILITY ROW  (burger · logo · cart)
------------------------------------------------------------- */
.aoc-w-header .util{background:var(--paper);border-bottom:1px solid var(--line);}
.aoc-w-header .util-in{
  max-width:var(--maxw);margin-inline:auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
}
.aoc-w-header .logo{
  display:flex;align-items:center;gap:8px;font-family:var(--disp);
  font-weight:800;font-size:15.5px;letter-spacing:-.03em;min-width:0;
}
.aoc-w-header .logo>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aoc-w-header .logo .mk{
  width:26px;height:26px;border-radius:6px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
}
.aoc-w-header .logo .mk::before,
.aoc-w-header .logo .mk::after{content:"";position:absolute;background:var(--accent);}
.aoc-w-header .logo .mk::before{width:13px;height:1.5px;}
.aoc-w-header .logo .mk::after{width:1.5px;height:13px;}
.aoc-w-header .logo .mk i{
  width:7px;height:7px;border-radius:50%;border:1.5px solid var(--accent);
  display:block;position:relative;z-index:1;background:var(--ink);
}
.aoc-w-header .logo small{
  display:none;font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px;
}

.aoc-w-header .search{display:none;flex:1;max-width:540px;position:relative;min-width:0;}
.aoc-w-header .search input{
  width:100%;padding:11px 16px 11px 42px;border:1.5px solid var(--line-2);
  border-radius:9px;font-size:14px;background:var(--card);color:var(--ink);
  outline:none;transition:.18s;
}
.aoc-w-header .search input:focus{border-color:var(--accent-2);}
.aoc-w-header .search input::placeholder{color:var(--muted);}
.aoc-w-header .search .si{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;border:2px solid var(--muted);border-radius:50%;
}
.aoc-w-header .search .si::after{
  content:"";position:absolute;width:7px;height:2px;background:var(--muted);
  transform:rotate(45deg);bottom:-3px;right:-4px;border-radius:2px;
}

.aoc-w-header .uacts{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.aoc-w-header .uact{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  display:none;flex-direction:column;align-items:center;gap:3px;white-space:nowrap;
}
.aoc-w-header .uact:hover{color:var(--accent-2);}
.aoc-w-header .uact .g{font-size:16px;line-height:1;}
.aoc-w-header .uact.quote,
.aoc-w-header .uact.cart{
  border-radius:var(--pill);padding:9px 13px;flex-direction:row;
  font-weight:600;font-size:12.5px;font-family:var(--body);min-height:40px;
  align-items:center;
}
.aoc-w-header .uact.quote{display:none;background:var(--paper-2);border:1.5px solid var(--ink);color:var(--ink);}
.aoc-w-header .uact.quote:hover{background:var(--ink);color:var(--paper);}
.aoc-w-header .uact.cart{display:flex;background:var(--ink);color:var(--paper);}
.aoc-w-header .uact.cart:hover{background:var(--accent-2);}

/* Burger — visible by default (mobile-first) */
.aoc-w-header .aoc-burger{
  display:flex;flex-direction:column;justify-content:center;gap:4.6px;
  width:42px;height:42px;flex-shrink:0;padding:11px 9px;
  border:1.5px solid var(--line-2);border-radius:9px;background:transparent;
}
.aoc-w-header .aoc-burger span{
  display:block;height:1.8px;width:100%;background:var(--ink);
  border-radius:2px;transition:transform .22s,opacity .18s;
}
.aoc-w-header .aoc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.4px) rotate(45deg);}
.aoc-w-header .aoc-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.aoc-w-header .aoc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);}

/* -------------------------------------------------------------
   MAIN NAV — hidden on mobile by default
------------------------------------------------------------- */
.aoc-w-header .mainnav{display:none;background:var(--paper);border-bottom:1.5px solid var(--ink);position:relative;z-index:200;}
.aoc-w-header .mainnav-in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:stretch;flex-wrap:wrap;
  /* wrap — never scroll: overflow on this element would clip the mega menus */
}
.aoc-w-header .ni{position:relative;display:flex;align-items:center;flex-shrink:0;}
.aoc-w-header .ni>a,.aoc-w-header .ni>button{
  display:flex;align-items:center;gap:5px;padding:13px 13px;
  font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  background:transparent;border-bottom:3px solid transparent;margin-bottom:-1.5px;transition:.15s;
}
.aoc-w-header .ni:hover>a,.aoc-w-header .ni:hover>button,
.aoc-w-header .ni:focus-within>a,.aoc-w-header .ni:focus-within>button{
  background:transparent;color:var(--accent-2);border-bottom-color:var(--accent-2);
}
.aoc-w-header .ni .chev{font-family:var(--mono);font-size:9px;opacity:.55;}
.aoc-w-header .ni.deals>a{color:var(--accent-2);}
.aoc-w-header .ni.b2b>button{color:#fff;background:var(--ink);border-radius:8px 8px 0 0;padding-inline:16px;}
.aoc-w-header .ni.b2b:hover>button{color:var(--accent);border-bottom-color:var(--accent);}

/* Mega + dropdown — clamped so they can never exceed the viewport */
.aoc-w-header .mega{
  display:none;position:absolute;top:100%;left:0;z-index:300;
  width:max-content;max-width:min(920px,92vw);
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent-2);
  box-shadow:0 20px 50px -20px rgba(28,26,22,.4);border-radius:0 0 12px 12px;
}
.aoc-w-header .ni:hover .mega,
.aoc-w-header .ni:focus-within .mega{display:flex;}
.aoc-w-header .mega-l{
  width:220px;flex-shrink:0;background:var(--paper-2);
  border-right:1px solid var(--line);padding:10px 0;border-radius:0 0 0 12px;
}
.aoc-w-header .mli{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 18px;font-size:13px;font-weight:600;color:var(--ink-2);
  cursor:pointer;border-left:3px solid transparent;transition:.15s;
}
.aoc-w-header .mli .a{font-family:var(--mono);font-size:11px;opacity:.5;}
.aoc-w-header .mli:hover,.aoc-w-header .mli.on{background:var(--paper);color:var(--accent-2);border-left-color:var(--accent-2);}
.aoc-w-header .mega-r{flex:1;min-width:0;padding:22px 24px;display:none;}
.aoc-w-header .mega-r.on{display:block;}
.aoc-w-header .mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:24px;}
.aoc-w-header .mgrp h4{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:10px;
  padding-bottom:7px;border-bottom:1px solid var(--line);
}
.aoc-w-header .mgrp a{display:block;font-size:13px;color:var(--ink-2);padding:4px 0;transition:.12s;}
.aoc-w-header .mgrp a:hover{color:var(--ink);padding-left:4px;}
.aoc-w-header .mfeat{background:var(--ink);color:var(--paper);border-radius:10px;padding:16px 18px;margin-top:18px;}
.aoc-w-header .mfeat .fl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.aoc-w-header .mfeat p{font-size:12.5px;opacity:.8;line-height:1.5;}
.aoc-w-header .mfeat a{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);}

.aoc-w-header .drop{
  display:none;position:absolute;top:100%;left:0;z-index:300;
  min-width:240px;max-width:min(320px,92vw);
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent-2);
  box-shadow:0 20px 50px -20px rgba(28,26,22,.4);border-radius:0 0 12px 12px;padding:8px 0;
}
.aoc-w-header .ni:hover .drop,
.aoc-w-header .ni:focus-within .drop{display:block;}
.aoc-w-header .drop a{display:block;padding:8px 18px;font-size:13px;color:var(--ink-2);transition:.12s;}
.aoc-w-header .drop a:hover{background:var(--paper-2);color:var(--accent-2);}
.aoc-w-header .drop .dv{height:1px;background:var(--line);margin:6px 0;}
.aoc-w-header .drop a.strong{color:var(--ink);font-weight:600;}
/* Last two nav items open their panel to the LEFT so it can't push the page */
.aoc-w-header .ni:nth-last-child(-n+2) .drop,
.aoc-w-header .ni:nth-last-child(-n+2) .mega{left:auto;right:0;}

/* -------------------------------------------------------------
   MOBILE DRAWER
------------------------------------------------------------- */
.aoc-w-header .aoc-drawer{position:fixed;inset:0;z-index:99998;visibility:hidden;}
.aoc-w-header .aoc-drawer.open{visibility:visible;}
.aoc-w-header .dr-bg{position:absolute;inset:0;background:rgba(28,26,22,.55);opacity:0;transition:.25s;}
.aoc-w-header .aoc-drawer.open .dr-bg{opacity:1;}
.aoc-w-header .dr-panel{
  position:absolute;top:0;bottom:0;left:0;width:min(88vw,370px);
  display:flex;flex-direction:column;background:var(--paper);
  box-shadow:0 0 60px rgba(0,0,0,.35);transform:translateX(-100%);
  transition:transform .26s ease;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.aoc-w-header .aoc-drawer.open .dr-panel{transform:none;}
.aoc-w-header .dr-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--paper);z-index:2;
}
.aoc-w-header .dr-close{
  width:38px;height:38px;flex-shrink:0;border-radius:9px;border:1.5px solid var(--line-2);
  font-family:var(--mono);font-size:16px;color:var(--ink);line-height:1;
}
.aoc-w-header .dr-search{padding:14px 16px 4px;}
.aoc-w-header .dr-search input{
  width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:9px;
  font-size:16px;background:var(--card);color:var(--ink);outline:none;
}
.aoc-w-header .dr-nav{padding:8px 8px 4px;}
.aoc-w-header .dr-item{border-bottom:1px solid var(--line);}
.aoc-w-header .dr-t{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:15px 10px;font-size:15px;font-weight:600;
  color:var(--ink);text-align:left;min-height:50px;
}
.aoc-w-header .dr-t .m{font-family:var(--mono);font-size:15px;color:var(--muted);transition:.2s;}
.aoc-w-header .dr-item.open .dr-t{color:var(--accent-2);}
.aoc-w-header .dr-item.open .dr-t .m{transform:rotate(45deg);color:var(--accent-2);}
.aoc-w-header .dr-sub{display:none;padding:0 10px 12px;}
.aoc-w-header .dr-item.open .dr-sub{display:block;}
.aoc-w-header .dr-sub h5{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);margin:12px 0 6px;
}
.aoc-w-header .dr-sub a{display:block;padding:9px 0 9px 12px;font-size:14px;color:var(--ink-2);border-left:2px solid var(--line);}
.aoc-w-header .dr-sub a:hover{color:var(--accent-2);border-left-color:var(--accent-2);}
.aoc-w-header .dr-foot{
  margin-top:auto;padding:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;background:var(--paper-2);
}
.aoc-w-header .dr-foot .btn-row{display:flex;gap:9px;flex-direction:row;}
.aoc-w-header .dr-foot .btn-row a{
  flex:1;text-align:center;padding:13px;border-radius:var(--pill);
  font-weight:600;font-size:14px;min-height:48px;display:flex;
  align-items:center;justify-content:center;
}
.aoc-w-header .dr-foot .p{background:var(--ink);color:var(--paper);}
.aoc-w-header .dr-foot .s{border:1.5px solid var(--ink);color:var(--ink);}
.aoc-w-header .dr-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:12px;color:var(--ink-2);}

/* Sticky utility row on mobile */
.aoc-w-header.aoc-sticky .util{position:sticky;top:0;z-index:200;}

/* -------------------------------------------------------------
   TABLET UP — bring back search + secondary actions
------------------------------------------------------------- */
@media (min-width:600px){
  .aoc-w-header .topbar{font-size:11.5px;}
  .aoc-w-header .util-in{padding-block:12px;gap:14px;}
  .aoc-w-header .logo{font-size:17px;}
  .aoc-w-header .logo .mk{width:28px;height:28px;}
  .aoc-w-header .search{display:block;}
  .aoc-w-header .uact.quote{display:flex;}
}

/* -------------------------------------------------------------
   DESKTOP SWITCH — default 1025px.
   .aoc-bp-767 / .aoc-bp-880 move it earlier.
------------------------------------------------------------- */
@media (min-width:1025px){
  .aoc-w-header .aoc-burger{display:none;}
  .aoc-w-header .mainnav{display:block;}
  .aoc-w-header .topbar-in{justify-content:space-between;padding-block:7px;}
  .aoc-w-header .topbar-in .tset{display:flex;}
  .aoc-w-header .topbar .promo{white-space:normal;}
  .aoc-w-header .util-in{padding-block:14px;gap:20px;}
  .aoc-w-header .logo{font-size:19px;letter-spacing:-.02em;gap:10px;}
  .aoc-w-header .logo .mk{width:30px;height:30px;border-radius:7px;}
  .aoc-w-header .logo .mk::before{width:15px;}
  .aoc-w-header .logo .mk::after{height:15px;}
  .aoc-w-header .logo small{display:block;}
  .aoc-w-header .uacts{gap:16px;}
  .aoc-w-header .uact{display:flex;}
  .aoc-w-header .uact.quote,.aoc-w-header .uact.cart{padding:9px 16px;font-size:13px;}
  .aoc-w-header.aoc-sticky .mainnav{position:sticky;top:0;}
  .aoc-w-header.aoc-sticky .util{position:static;}
}
@media (min-width:768px){
  .aoc-w-header.aoc-bp-767 .aoc-burger{display:none;}
  .aoc-w-header.aoc-bp-767 .mainnav{display:block;}
  .aoc-w-header.aoc-bp-767 .topbar-in{justify-content:space-between;}
  .aoc-w-header.aoc-bp-767 .topbar-in .tset{display:flex;}
  .aoc-w-header.aoc-bp-767 .uact{display:flex;}
  .aoc-w-header.aoc-bp-767 .logo small{display:block;}
  .aoc-w-header.aoc-bp-767.aoc-sticky .mainnav{position:sticky;top:0;}
  .aoc-w-header.aoc-bp-767.aoc-sticky .util{position:static;}
}
@media (min-width:881px){
  .aoc-w-header.aoc-bp-880 .aoc-burger{display:none;}
  .aoc-w-header.aoc-bp-880 .mainnav{display:block;}
  .aoc-w-header.aoc-bp-880 .topbar-in{justify-content:space-between;}
  .aoc-w-header.aoc-bp-880 .topbar-in .tset{display:flex;}
  .aoc-w-header.aoc-bp-880 .uact{display:flex;}
  .aoc-w-header.aoc-bp-880 .logo small{display:block;}
  .aoc-w-header.aoc-bp-880.aoc-sticky .mainnav{position:sticky;top:0;}
  .aoc-w-header.aoc-bp-880.aoc-sticky .util{position:static;}
}

/* Lock body scroll while the drawer is open (set by JS) */
html.aoc-drawer-open,
html.aoc-drawer-open body{overflow:hidden;}