:root {
  --site-header-height: 4rem;
  --site-safe-top: env(safe-area-inset-top, 0px);
  --site-safe-right: env(safe-area-inset-right, 0px);
  --site-safe-bottom: env(safe-area-inset-bottom, 0px);
  --site-safe-left: env(safe-area-inset-left, 0px);
}

html {
  scroll-padding-top: calc(var(--site-header-height) + var(--site-safe-top) + 1rem);
}

/* Extend the public navigation behind iPhone camera cutouts while keeping its
   controls in the safe content area. */
#NAV {
  top: 0 !important;
  padding-top: var(--site-safe-top);
  min-height: calc(var(--site-header-height) + var(--site-safe-top));
}

#NAV > .site-nav-inner {
  height: var(--site-header-height);
  padding-left: max(1rem, var(--site-safe-left));
  padding-right: max(1rem, var(--site-safe-right));
}

#NAV ~ #home,
#NAV ~ main {
  padding-top: calc(6rem + var(--site-safe-top)) !important;
}

#NAV #MM {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  width: 100%;
  z-index: 60;
  max-height: calc(100dvh - var(--site-header-height) - var(--site-safe-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(1.25rem, var(--site-safe-bottom));
}

.site-mobile-tools {
  gap: 0.4rem !important;
  flex-shrink: 0;
}

.site-account-entry,
.site-notification-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  padding: 0;
  border: 1px solid rgba(57, 255, 20, 0.34);
  border-radius: 0.75rem;
  background: rgba(26, 26, 26, 0.94);
  color: #e0e0e0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.site-account-entry:hover,
.site-notification-trigger:hover {
  color: #39ff14;
  border-color: rgba(57, 255, 20, 0.68);
  background: rgba(57, 255, 20, 0.09);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.12);
}

.site-account-entry:active,
.site-notification-trigger:active {
  transform: scale(0.92);
}

.site-notification-trigger,
.site-notification-trigger:active {
  overflow: visible !important;
}

.site-notification-trigger:active {
  transform: none !important;
}

.site-account-entry:focus-visible,
.site-notification-trigger:focus-visible {
  outline: 2px solid #39ff14;
  outline-offset: 2px;
}

.site-account-entry svg,
.site-notification-trigger svg {
  width: 1.2rem;
  height: 1.2rem;
  pointer-events: none;
  transition: transform 160ms ease;
}

.site-notification-trigger:active svg {
  transform: scale(0.86);
}

.site-account-entry[data-signed-in="true"] {
  color: #39ff14;
  background: rgba(57, 255, 20, 0.08);
}

.site-account-entry[data-signed-in="true"]::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.3rem;
  bottom: 0.3rem;
  width: 0.36rem;
  height: 0.36rem;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  background: #39ff14;
  box-sizing: content-box;
}

.site-cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  padding: 0;
  border: 1px solid #2a2a2a;
  border-radius: 0.75rem;
  background: #1a1a1a;
  color: #e0e0e0;
  text-decoration: none;
  overflow: visible !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.site-cart-trigger:hover,
.site-cart-trigger[aria-current="page"] {
  color: #39ff14;
  border-color: rgba(57, 255, 20, 0.55);
  background: rgba(57, 255, 20, 0.08);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.1);
}

.site-cart-trigger:active {
  transform: none !important;
}

.site-cart-trigger svg {
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
  transition: transform 160ms ease;
}

.site-cart-trigger:active svg {
  transform: scale(0.86);
}

[data-cart-count] {
  position: absolute;
  top: -0.22rem;
  inset-inline-end: -0.22rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #121212;
  border-radius: 999px;
  background: #39ff14;
  color: #050505;
  font: 900 0.58rem/1 Inter, sans-serif;
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}

[data-notification-entry][hidden],
.site-account-drawer-entry[hidden] {
  display: none !important;
}

[data-notification-entry] {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible !important;
}

[data-notification-badge] {
  position: absolute;
  top: -0.22rem;
  inset-inline-end: -0.22rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #121212;
  border-radius: 999px;
  background: #39ff14;
  color: #050505;
  font: 900 0.58rem/1 Inter, sans-serif;
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}

[data-notification-badge][hidden] {
  display: none !important;
}

.site-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Pages without the public fixed navigation still need safe padding after
   viewport-fit=cover is enabled. */
body.site-safe-page {
  --site-page-padding: 1.25rem;
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: calc(var(--site-page-padding) + var(--site-safe-top)) !important;
  padding-right: calc(var(--site-page-padding) + var(--site-safe-right)) !important;
  padding-bottom: calc(var(--site-page-padding) + var(--site-safe-bottom)) !important;
  padding-left: calc(var(--site-page-padding) + var(--site-safe-left)) !important;
}

body.site-safe-root {
  min-height: 100svh;
  min-height: 100dvh;
  padding-bottom: var(--site-safe-bottom);
}

body.operations-safe-root {
  padding-top: var(--site-safe-top);
}

.site-safe-topbar {
  top: 0 !important;
  padding-top: var(--site-safe-top);
}

.site-safe-topbar > div:first-child {
  padding-left: max(1rem, var(--site-safe-left));
  padding-right: max(1rem, var(--site-safe-right));
}

@media (min-width: 640px) {
  #NAV > .site-nav-inner {
    padding-left: max(1.5rem, var(--site-safe-left));
    padding-right: max(1.5rem, var(--site-safe-right));
  }

  body.site-safe-page {
    --site-page-padding: 1.75rem;
  }
}

@media (min-width: 1024px) {
  #NAV > .site-nav-inner {
    padding-left: max(2rem, var(--site-safe-left));
    padding-right: max(2rem, var(--site-safe-right));
  }

  #NAV #MM {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #NAV .site-mobile-tools #LTM {
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    padding: 0 !important;
  }

  #NAV .site-mobile-tools #LTM #LCDM,
  #NAV .site-mobile-tools #LTM > svg:last-child {
    display: none !important;
  }

  #NAV .site-mobile-tools #CTB2,
  #NAV .site-mobile-tools #CRTB,
  #NAV .site-mobile-tools #HB {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
}

@media (max-width: 360px) {
  #NAV > .site-nav-inner {
    padding-left: max(0.7rem, var(--site-safe-left));
    padding-right: max(0.7rem, var(--site-safe-right));
  }

  #NAV .NT {
    font-size: 1.25rem !important;
  }

  .site-mobile-tools {
    gap: 0.25rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-account-entry,
  .site-notification-trigger {
    transition: none;
  }
}