/* Preferences live in the header; the zero-height mount only reserves a fixed header. */
#energy-preferences-mount {
  height: 0;
  margin-top: var(--energy-preferences-header-offset, 0px);
  position: relative;
  z-index: 45;
  color: #284b3b;
  font-family: var(--font-body, "Energy Manrope"), Arial, sans-serif;
}
.energy-preferences__toggle {
  position: fixed;
  left: var(--energy-preferences-left);
  top: var(--energy-preferences-top);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #345a46;
  cursor: pointer;
  visibility: hidden;
  transition: background-color .18s, color .18s;
}
.energy-preferences--positioned .energy-preferences__toggle { visibility: visible; }
.energy-preferences__toggle:hover, .energy-preferences__toggle[aria-expanded="true"] { background: #e8eee1; color: #173e2d; }
.energy-preferences__toggle svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.5; }
.energy-preferences__toggle:focus-visible, .energy-preferences select:focus-visible { outline: 2px solid #b66a31; outline-offset: 3px; }
.energy-preferences__panel {
  position: fixed;
  left: var(--energy-preferences-panel-left);
  top: var(--energy-preferences-panel-top);
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 20px;
  border: 1px solid #d9e3d3;
  border-radius: 18px;
  background: #fcfdf9;
  box-shadow: 0 12px 36px #12382426;
}
.energy-preferences__panel[hidden] { display: none !important; }
.energy-preferences__heading { font-size: 14px; line-height: 1.5; font-weight: 700; margin-bottom: 16px; }
.energy-preferences__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.energy-preferences__control { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; font-size: 12px; font-weight: 500; }
.energy-preferences select {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  color-scheme: light;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 20px 9px 9px;
  border: 1px solid #d5dfd0;
  border-radius: 10px;
  background-color: #f4f7ef;
  box-shadow: none;
  cursor: pointer;
}
.energy-preferences option { color: #173e2d; background: #f9faf5; }
.energy-preferences__rate { display: block; margin-top: 14px; font-size: 11px; line-height: 1.5; color: #647463; }
.energy-preferences__rate:empty { display: none; }
.energy-preferences__error { display: block; margin-top: 12px; font-size: 12px; color: #9f3d2e; }
.energy-preferences__error[hidden] { display: none; }
.dark #energy-preferences-mount { color: #e5eee1; }
.dark .energy-preferences__toggle { color: #d8e8d5; }
.dark .energy-preferences__toggle:hover, .dark .energy-preferences__toggle[aria-expanded="true"] { color: #fff; background: #304637; }
.dark .energy-preferences__panel { background: #192a21; border-color: #49604c; }
.dark .energy-preferences select { color-scheme: dark; background: #263d2e; border-color: #49604c; }
.dark .energy-preferences option { color: #edf3e8; background: #20392a; }
.dark .energy-preferences__rate { color: #b4c7b2; }
.dark .energy-preferences__error { color: #ffc1af; }
/* Leave one icon slot between the menu and brand without changing React-owned markup. */
.site-header-chrome > div.relative.z-10 > div:first-child, .energy-header__start { gap: 54px; }
@media (max-width: 1199px) {
  .site-header-chrome nav:is([aria-label="Shop categories"],[data-energy-original-aria-label="Shop categories"]), .energy-static-header__nav { display: none !important; }
}
@media (max-width: 767px) {
  #energy-preferences-mount [data-energy-currency-compact] { display: none !important; }
}
@media (max-width: 639px) {
  .site-header-chrome > div.relative.z-10 > div:first-child, .energy-header__start { gap: 46px; }
  .energy-preferences__toggle { width: 34px; height: 42px; }
}
@media (max-width: 379px) {
  .site-header-chrome a:is([aria-label="326energy — home"],[data-energy-original-aria-label="326energy — home"]) img, .energy-static-header__brand img { width: 96px !important; }
}
@media (max-width: 359px) {
  .site-header-chrome > div.relative.z-10 > div:first-child, .energy-header__start { gap: 44px; }
  .site-header-chrome a:is([aria-label="326energy — home"],[data-energy-original-aria-label="326energy — home"]) img, .energy-static-header__brand img { width: 80px !important; }
  .energy-preferences__toggle { width: 32px; }
}
/* The full animated cord hangs naturally over the content instead of adding a blank row. */
body:has(#energy-preferences-mount) :is(.site-header-chrome, .energy-static-header) .theme-lamp__cord-entry {
  top: calc(100% - 2px);
  left: calc(50% - 22px);
  width: 44px;
  height: 64px;
  overflow: visible;
  scale: .64;
  transform-origin: 50% 0;
}
body:has(#energy-preferences-mount) :is(.site-header-chrome, .energy-static-header) .theme-lamp__pull {
  width: 44px;
  height: 64px;
  min-height: 44px;
  padding: 0;
  align-items: flex-start;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) { .energy-preferences__toggle { transition: none; } }
@media print { #energy-preferences-mount { display: none; } }

/* Explicit foreground/background pair for header controls only, including dark checkout. */
html.dark body:has(#energy-preferences-mount) :is(.site-header-chrome, .energy-static-header) :is(.energy-header-control, button[aria-controls="mobile-drawer"], button[data-cart-target], .theme-lamp__switch) {
  color: #214b38 !important;
  background-color: #fcfdf9 !important;
  border-color: #c7d7c0 !important;
}
html.dark body:has(#energy-preferences-mount) :is(.site-header-chrome, .energy-static-header) :is(.energy-header-control, button[aria-controls="mobile-drawer"], button[data-cart-target], .theme-lamp__switch):hover { background-color: #e8eee1 !important; }
html.dark body:has(#energy-preferences-mount) :is(.site-header-chrome, .energy-static-header) :is(.energy-header-control, button[aria-controls="mobile-drawer"], button[data-cart-target], .theme-lamp__switch) svg { color: inherit !important; }
