:root{--watt-red:#E30613;--watt-yellow:#FFD700;}
.site-header,.storefront-primary-navigation{display:none!important;}
.watt-header{display:block!important;background:var(--watt-red);color:#fff;width:100%;position:sticky;top:0;z-index:9999;font-family:Inter,system-ui,sans-serif;}
.watt-top{max-width:1440px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px;box-sizing:border-box;}
.watt-logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;height:60px;}
.watt-brand-logo-wrap{display:inline-flex;align-items:center;height:100%;}
.watt-brand-logo-svg{height:58px;width:auto;max-width:250px;display:block;}
.watt-mobile-logo .watt-brand-logo-svg{height:38px;max-width:160px;}
.watt-svg-brand-text{fill:#ffffff;}
.watt-svg-sub-text{fill:#000000;}
.watt-drawer-header .watt-svg-brand-text{fill:#111827;}
.watt-drawer-header .watt-svg-sub-text{fill:#E30613;}
.watt-drawer-header .watt-brand-logo-svg{height:38px;max-width:155px;}
.watt-logo-mark{width:48px;height:48px;background:var(--watt-yellow);border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:30px;color:#000;flex-shrink:0;}
.watt-logo-text{font-size:36px;font-weight:800;color:#fff;letter-spacing:-1px;}
.watt-center{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;max-width:860px;margin:0 auto;}
.watt-menu-btn{display:none!important;}
.watt-menu-btn:hover,.watt-menu-btn:focus,.watt-menu-btn:active{background:transparent!important;border-color:#fff!important;color:#fff!important;outline:none!important;box-shadow:none!important;}
.watt-menu-btn svg{width:20px;height:20px;flex-shrink:0;display:block;}
.watt-search{flex:1;display:flex;align-items:center;background:#F2F2F2;border-radius:14px;height:50px;min-height:50px;max-height:50px;overflow:hidden;max-width:760px;box-sizing:border-box;flex-shrink:1;margin:0;}
.watt-search-left{display:flex;align-items:center;gap:8px;padding:0 18px;height:50px;background:transparent;font-weight:600;color:#111;font-size:14px;white-space:nowrap;flex-shrink:0;box-sizing:border-box;}
.watt-search-left select{border:none;outline:none;background:transparent;font-weight:600;font-size:14px;color:#111;appearance:none;-webkit-appearance:none;padding-right:6px;cursor:pointer;height:100%;line-height:50px;}
.watt-search-divider{width:1px;height:24px;background:#ddd;flex-shrink:0;margin:0 2px;align-self:center;}
.watt-search-input{flex:1;border:none;outline:none;background:transparent;padding:0 16px;font-size:14px;color:#111;height:50px;line-height:50px;box-sizing:border-box;}
.watt-search-input::placeholder{color:#6b7280;}
.watt-search-right{width:52px;height:50px;min-height:50px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0 6px 0 0;box-sizing:border-box;}
.watt-search-right:hover{background:transparent!important;}
.watt-search-right svg{width:22px;height:22px;stroke:#E30613;stroke-width:2;display:block;}
.watt-actions{display:flex;align-items:center;gap:32px;margin-left:auto;height:50px;flex-shrink:0;}
.watt-action{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;text-decoration:none;font-size:12px;font-weight:500;line-height:1;position:relative;justify-content:center;height:50px;}
.watt-action:hover{color:#fff!important;background:transparent!important;}
.watt-action svg{width:26px;height:26px;stroke:#fff;stroke-width:1.6;display:block;}
.watt-badge{position:absolute;top:-6px;right:-10px;background:#fff;color:var(--watt-red);border:2px solid var(--watt-red);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;}
.watt-bottom{max-width:1440px;margin:0 auto;padding:4px 24px 14px;display:flex;align-items:center;gap:18px;position:relative;z-index:999;}
.watt-sale{background:#000;color:#fff;padding:6px 12px;border-radius:8px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:6px;line-height:1;flex-shrink:0;}
.watt-sale svg{width:14px;height:14px;fill:#fff;}
.watt-nav{display:flex;align-items:center;gap:16px;flex:1;position:static;}
.watt-nav-item,.watt-nav-link{color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:opacity .15s ease;padding:4px 0;}
.watt-nav-item:hover,.watt-nav-link:hover{color:#fff!important;opacity:0.9;}
.watt-nav-arrow{transition:transform .2s ease;}
.watt-nav-item-dropdown{position:static;display:inline-flex;align-items:center;}
.watt-nav-item-dropdown:hover .watt-nav-arrow{transform:rotate(180deg);}

/* Mega Menu Dropdown */
.watt-mega-menu{position:absolute;left:24px;right:24px;top:100%;background:#ffffff;color:#111827;box-shadow:0 20px 45px rgba(0,0,0,0.22);border-radius:14px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s cubic-bezier(0.16,1,0.3,1);z-index:10000;border:1px solid #f0f0f0;pointer-events:none;}
.watt-nav-item-dropdown:hover .watt-mega-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.watt-mega-inner{padding:22px 26px 26px;box-sizing:border-box;}
.watt-mega-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0f0;padding-bottom:12px;margin-bottom:16px;}
.watt-mega-title{font-size:17px;font-weight:800;color:#111827;margin:0;letter-spacing:-0.3px;}
.watt-mega-viewall{font-size:13px;font-weight:700;color:#E30613;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.watt-mega-viewall:hover{text-decoration:underline;}
.watt-mega-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:18px 22px;max-height:450px;overflow-y:auto;padding-right:8px;}
.watt-mega-grid::-webkit-scrollbar{width:6px;}
.watt-mega-grid::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px;}
.watt-mega-col{display:flex;flex-direction:column;gap:6px;}
.watt-mega-subcat-title{font-size:13.5px;font-weight:700;color:#111827!important;text-decoration:none!important;padding-bottom:3px;border-bottom:2px solid #E30613;display:inline-block;width:fit-content;transition:color .15s;}
.watt-mega-subcat-title:hover{color:#E30613!important;}
.watt-mega-list{list-style:none;padding:0;margin:4px 0 0 0;display:flex;flex-direction:column;gap:4px;}
.watt-mega-list a{font-size:12.5px;color:#4b5563!important;text-decoration:none!important;transition:color .15s ease, transform .1s ease;display:inline-block;padding:1px 0;}
.watt-mega-list a:hover{color:#E30613!important;transform:translateX(2px);}

.watt-dropdown{position:relative;display:inline-flex;align-items:center;}
.watt-dropdown-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:4px;color:#fff!important;font-weight:700;font-size:13.5px;text-decoration:none!important;}
.watt-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;min-width:210px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.18);padding:8px 0;display:none;z-index:10000;border:1px solid #eee;}
.watt-dropdown:hover .watt-dropdown-menu,.watt-dropdown:focus-within .watt-dropdown-menu{display:block;}
.watt-dropdown-menu a{color:#111!important;padding:10px 18px!important;font-size:14px!important;font-weight:500!important;display:block!important;text-decoration:none!important;opacity:1!important;transition:background-color .15s ease,color .15s ease!important;}
.watt-dropdown-menu a:hover{background:#f3f4f6!important;color:var(--watt-red)!important;}
.watt-bottom-right{display:none;}
.watt-mobile{display:none;}
@media(max-width:980px){
  .watt-top{display:none!important;}
  .watt-bottom{display:none!important;}
  .watt-mobile{
    display:flex!important;
    flex-direction:column;
    gap:10px;
    padding:10px 14px 12px;
    background:var(--watt-red);
    box-sizing:border-box;
    width:100%;
  }
}
.watt-mobile-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  height:42px;
}
.watt-mobile-menu-btn{
  background:transparent!important;
  border:none!important;
  padding:4px;
  margin:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff!important;
  outline:none!important;
  box-shadow:none!important;
  flex-shrink:0;
  line-height:1;
}
.watt-mobile-menu-btn:hover,.watt-mobile-menu-btn:focus,.watt-mobile-menu-btn:active{
  background:transparent!important;
  color:#fff!important;
  outline:none!important;
  box-shadow:none!important;
}
.watt-mobile-menu-btn svg{
  width:24px;
  height:24px;
  display:block;
}
.watt-mobile-logo{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none!important;
  flex-shrink:0;
}
.watt-mobile-logo .watt-logo-mark{
  width:36px;
  height:36px;
  background:var(--watt-yellow);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:22px;
  color:#000;
  flex-shrink:0;
}
.watt-mobile-logo .watt-logo-text{
  font-size:28px;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.5px;
  line-height:1;
}
.watt-mobile-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  flex-shrink:0;
}
.watt-mobile-action{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff!important;
  text-decoration:none!important;
  padding:4px;
  position:relative;
  background:transparent!important;
  transition:opacity .15s ease;
  line-height:1;
}
.watt-mobile-action:hover{
  opacity:0.85;
}
.watt-mobile-action svg{
  display:block;
  width:22px;
  height:22px;
}
.watt-mobile-search{
  width:100%;
  display:flex;
  align-items:center;
  background:#F2F2F2;
  border-radius:12px;
  height:44px;
  overflow:hidden;
  box-sizing:border-box;
  margin:0;
  padding:0 4px 0 14px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.watt-mobile-search-input{
  flex:1;
  border:none!important;
  outline:none!important;
  background:transparent!important;
  padding:0!important;
  font-size:14px!important;
  color:#111!important;
  height:44px!important;
  line-height:44px!important;
  box-sizing:border-box;
  width:100%;
  box-shadow:none!important;
}
.watt-mobile-search-input::placeholder{
  color:#6b7280;
  font-size:14px;
}
.watt-mobile-search-btn{
  width:40px;
  height:40px;
  border:none!important;
  background:transparent!important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  padding:0;
  outline:none!important;
  box-shadow:none!important;
}
.watt-mobile-search-btn:hover,.watt-mobile-search-btn:focus,.watt-mobile-search-btn:active{
  background:transparent!important;
  outline:none!important;
  box-shadow:none!important;
}

/* Mobile Navigation Slide-In Drawer */
.watt-drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:99998;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.watt-drawer-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.watt-drawer{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:84%;
  max-width:320px;
  background:#ffffff;
  z-index:99999;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1);
  display:flex;
  flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,0.18);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.watt-drawer.active{
  transform:translateX(0);
}
.watt-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid #f0f0f0;
  background:#ffffff;
  position:sticky;
  top:0;
  z-index:2;
}
.watt-drawer-header .watt-logo{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none!important;
}
.watt-drawer-header .watt-logo-mark{
  width:34px;
  height:34px;
  background:var(--watt-yellow);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  color:#000;
}
.watt-drawer-header .watt-logo-text{
  font-size:26px;
  font-weight:800;
  color:var(--watt-red);
  line-height:1;
}
.watt-drawer-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f4f4f5;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .15s ease;
  color:#111;
  outline:none!important;
}
.watt-drawer-close:hover{
  background:#e4e4e7;
}
.watt-drawer-body{
  flex:1;
  padding:12px 14px;
  overflow-y:auto;
}
.watt-drawer-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.watt-drawer-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  font-size:15px;
  font-weight:600;
  color:#1f2937!important;
  text-decoration:none!important;
  border-radius:10px;
  transition:background .15s ease,color .15s ease;
}
.watt-drawer-link:hover,.watt-drawer-link:active{
  background:#f3f4f6;
  color:var(--watt-red)!important;
}
.watt-drawer-sale{
  background:#000!important;
  color:#fff!important;
  margin-bottom:6px;
}
.watt-drawer-sale:hover,.watt-drawer-sale:active{
  background:#1f2937!important;
  color:#fff!important;
}
.watt-drawer-accordion{
  display:flex;
  flex-direction:column;
  width:100%;
}
.watt-drawer-accordion-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  font-size:15px;
  font-weight:600;
  color:#1f2937;
  background:transparent;
  border:none;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  transition:background .15s ease;
}
.watt-drawer-accordion-btn:hover{
  background:#f3f4f6;
}
.watt-drawer-chevron{
  transition:transform .25s ease;
}
.watt-drawer-accordion.open .watt-drawer-chevron{
  transform:rotate(180deg);
}
.watt-drawer-subnav{
  display:none;
  flex-direction:column;
  padding:4px 0 6px 14px;
  margin:2px 0 6px 10px;
  border-left:2px solid #fee2e2;
  gap:2px;
}
.watt-drawer-accordion.open .watt-drawer-subnav{
  display:flex;
}
.watt-drawer-sublink{
  display:block;
  padding:9px 12px;
  font-size:14px;
  font-weight:500;
  color:#4b5563!important;
  text-decoration:none!important;
  border-radius:8px;
  transition:background .15s ease,color .15s ease;
}
.watt-drawer-sublink:hover{
  background:#fef2f2;
  color:var(--watt-red)!important;
}
.watt-drawer-footer{
  padding:16px;
  border-top:1px solid #f0f0f0;
  background:#fafafa;
  margin-top:auto;
}
.watt-drawer-account-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;
  background:var(--watt-yellow);
  color:#000!important;
  font-weight:800;
  font-size:15px;
  border-radius:12px;
  text-decoration:none!important;
  transition:filter .15s ease, transform .1s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.watt-drawer-account-btn:hover{
  filter:brightness(0.95);
  color:#000!important;
}
.watt-drawer-account-btn:active{
  transform:scale(0.99);
}

/* Multi-Level Accordion in Drawer */
.watt-drawer-divider-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  color:#9ca3af;
  padding:16px 16px 6px;
  text-transform:uppercase;
}
.watt-drawer-accordion-group{
  border-bottom:1px solid #f3f4f6;
}
.watt-drawer-parent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 8px 2px 16px;
}
.watt-drawer-parent-link{
  font-size:14.5px;
  font-weight:700;
  color:#111827!important;
  text-decoration:none!important;
  flex:1;
  padding:10px 0;
}
.watt-drawer-parent-link:hover{
  color:var(--watt-red)!important;
}
.watt-drawer-toggle-btn{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:none!important;
  cursor:pointer;
  color:#6b7280;
  border-radius:8px;
  transition:background .15s ease,transform .2s ease;
  padding:0;
  margin:0;
}
.watt-drawer-toggle-btn:hover{
  background:#f3f4f6!important;
  color:#111;
}
.watt-drawer-accordion-group.open > .watt-drawer-parent-row .watt-drawer-toggle-btn svg{
  transform:rotate(180deg);
}
.watt-drawer-sub-panel{
  display:none;
  background:#f9fafb;
  padding:6px 12px 10px 18px;
  border-top:1px solid #f0f0f0;
}
.watt-drawer-accordion-group.open > .watt-drawer-sub-panel{
  display:block;
}
.watt-drawer-sub-group{
  margin:3px 0;
}
.watt-drawer-sub-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1px 0;
}
.watt-drawer-sub-link{
  font-size:13.5px;
  font-weight:600;
  color:#374151!important;
  text-decoration:none!important;
  flex:1;
  padding:7px 0;
}
.watt-drawer-sub-link:hover{
  color:var(--watt-red)!important;
}
.watt-drawer-sub-group.open > .watt-drawer-sub-row .watt-drawer-toggle-btn.sub-toggle svg{
  transform:rotate(180deg);
}
.watt-drawer-sub-sub-panel{
  display:none;
  padding-left:12px;
  border-left:2px solid #e5e7eb;
  margin:3px 0 6px 6px;
  flex-direction:column;
  gap:2px;
}
.watt-drawer-sub-group.open > .watt-drawer-sub-sub-panel{
  display:flex;
}
.watt-drawer-sub-sub-link{
  font-size:13px;
  color:#6b7280!important;
  text-decoration:none!important;
  padding:5px 0;
  display:block;
}
.watt-drawer-sub-sub-link:hover{
  color:var(--watt-red)!important;
}

