/* Instagram-style tab bar ("dock"). Built and placed by nav-dock.js on every page.
   .is-docked = inside the top header (desktop); otherwise it floats at the bottom of the screen. */
.dock {
  --dock-orange: #FFFFFF;   /* accent kept neutral: the navbar has no orange */
  --dock-tab: 64px;
  --dock-pad: 7px;
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--dock-pad);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateX(-50%);
  touch-action: none;                 /* touch: press and slide across the tabs */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: dock-in .7s cubic-bezier(0.16, 1, 0.3, 1) both .3s;
}
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 30px); } }
/* Frosted background on its own layer: blur on the dock itself would also blend the products panel inside it */
.dock::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(12, 16, 22, 0.94);
}
.dock.is-docked::before { background: rgba(255, 255, 255, 0.035); }

/* In the header: part of the bar, not floating */
.dock.is-docked {
  --dock-tab: 46px;
  --dock-pad: 4px;
  position: relative;
  left: auto; bottom: auto;
  transform: none;
  animation: dock-fade .25s ease both;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@keyframes dock-fade { from { opacity: 0; } }
html.dock-header .nav-header .nav-links { display: none; }
/* Old navbar pieces: the hamburger button and its slide-out drawer are no longer used */
.nav-header .mobile-menu-toggle, .mobile-drawer, .mobile-drawer-backdrop { display: none !important; }

/* Sliding highlight that follows the pointer / finger */
.dock-pill {
  position: absolute;
  top: var(--dock-pad); left: 0;
  width: var(--dock-tab);
  height: var(--dock-tab);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(var(--dock-x, 7px));
  transition: transform .45s cubic-bezier(0.34, 1.4, 0.5, 1), opacity .25s ease;
  pointer-events: none;
}
.dock.is-dragging .dock-pill { transition: transform .18s ease-out; background: rgba(255, 255, 255, 0.14); }

.dock-tab {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--dock-tab);
  height: var(--dock-tab);
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: none;
  color: #9AA5B5;
  cursor: pointer;
  transition: color .25s ease, transform .35s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.dock-tab:hover, .dock-tab.is-hover { color: #FFFFFF; }
.dock-tab.is-hover { transform: translateY(-3px); }
.dock.is-docked .dock-tab.is-hover { transform: translateY(-1px); }
.dock-tab:focus-visible { outline: 2px solid var(--dock-orange); outline-offset: 2px; }
.dock-ico { display: grid; place-items: center; transition: transform .3s cubic-bezier(0.34, 1.4, 0.5, 1); }
.dock-ico svg { width: 27px; height: 27px; }
.dock.is-docked .dock-ico svg { width: 21px; height: 21px; }
.dock-tab:active .dock-ico { transform: scale(.88); }

/* Current page: filled icon + dot, like Instagram's selected tab */
.dock-tab.is-current { color: #FFFFFF; }
.dock-tab.is-current .dock-ico svg { fill: currentColor; fill-opacity: .18; }
.dock-tab.is-current::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--dock-orange);
}
/* Products tab while its panel is open */
.dock.fly-open .dock-tab[data-key="products"] { color: var(--dock-orange); }


/* Label that pops next to the tab (above when floating, below in the header) */
.dock-label {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  padding: 6px 11px;
  border-radius: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(12, 16, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translate(-50%, 6px) scale(.9);
  transition: opacity .2s ease, transform .3s cubic-bezier(0.34, 1.4, 0.5, 1);
  pointer-events: none;
}
.dock.is-docked .dock-label { bottom: auto; top: calc(100% + 12px); transform: translate(-50%, -6px) scale(.9); }
.dock-tab.is-hover .dock-label { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dock.fly-open .dock-tab[data-key="products"] .dock-label { opacity: 0; }
.dock-hint { display: block; margin-top: 2px; font-size: 0.58rem; letter-spacing: 0.08em; color: #8C97A7; text-transform: none; }

/* Hover-and-hold ring: fills while the pointer rests on a tab, then the page opens */
.dock-ring {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.dock-ring circle {
  fill: none;
  stroke: var(--accent-orange, #FF5A00);   /* the hold ring is the one orange accent in the bar */
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.dock-tab.is-arming .dock-ring circle { opacity: 1; animation: dock-arm var(--dock-hold, 1200ms) linear forwards; }
@keyframes dock-arm { to { stroke-dashoffset: 0; } }
.dock-tab.is-going .dock-ico { animation: dock-go .35s ease-out; }
@keyframes dock-go { 50% { transform: scale(1.25); } }

/* Header turns more solid once the page scrolls (colour only: no layout animation) */
.nav-header.is-scrolled { background: rgba(7, 9, 12, 0.92); }

/* ---------- Products panel: one simple list ---------- */
.dock-fly {
  position: absolute;
  left: var(--fly-x, 50%);
  top: calc(100% + 12px);
  z-index: 5;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border-radius: 16px;
  background: #0C1016;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .25s ease, visibility 0s linear .25s;
  touch-action: auto;
}
.dock:not(.is-docked) .dock-fly { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); }
.dock-fly.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.dock-fly::before {                      /* invisible bridge so the pointer can travel from the tab */
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px; height: 14px;
}
.dock:not(.is-docked) .dock-fly::before { top: auto; bottom: -14px; }

.dock-fly-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.dock-fly-item:hover, .dock-fly-item:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.dock-fly-thumb {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: #06090D center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dock-fly-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dock-fly-title { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 0.9rem; color: #F5F5F2; }
.dock-fly-desc { font-size: 0.75rem; color: #7A8595; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-fly-arrow { color: var(--dock-orange); opacity: 0; transition: opacity .15s ease; }
.dock-fly-item:hover .dock-fly-arrow, .dock-fly-item:focus-visible .dock-fly-arrow { opacity: 1; }
/* Rest-to-open bar along the bottom of a product line */
.dock-fly-item::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  transform: scaleX(0);
  transform-origin: left;
}
.dock-fly-item.is-arming::after { animation: dock-bar var(--dock-hold, 1200ms) linear forwards; }
@keyframes dock-bar { to { transform: scaleX(1); } }

/* Page fade when leaving through the dock */
html.dock-leaving body { opacity: 0; transition: opacity .18s ease; }

/* Keep page content (footer bottom bar) clear of the floating dock */
html.dock-floating body { padding-bottom: 96px; }

@media (max-width: 480px) {
  .dock { --dock-tab: 60px; --dock-pad: 6px; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock, .dock.is-docked { animation: none; }
  .dock-pill, .dock-tab, .dock-ico { transition: none; }
}

/* ---------- Header: hides on scroll down, returns on scroll up (class toggled by nav-dock.js) ---------- */
.nav-header { transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), background .3s ease !important; }
.nav-header.is-hidden { transform: translateY(-100%); }
/* Product pages: the sticky section bar moves up into the space the header leaves */
.pdx-subnav { transition: top .35s cubic-bezier(0.16, 1, 0.3, 1); }
html.nav-hidden .pdx-subnav { top: 0; }

/* ---------- Quick search (nav-search.js) ---------- */
.srch kbd {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 5px;
  color: #9AA5B5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.srch {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(3, 5, 8, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.srch.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.srch-panel {
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  background: #0C1016;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  transform: translateY(-8px) scale(.98);
  transition: transform .25s ease;
}
.srch.is-open .srch-panel { transform: none; }
.srch-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #7A8595; }
.srch-field svg { width: 18px; height: 18px; flex: none; }
.srch-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #F5F5F2;
  font: inherit;
  font-size: 1rem;
  cursor: text !important;
}
.srch-field input::placeholder { color: #5E6978; }
.srch-label { padding: 12px 18px 6px; font-family: var(--font-mono, monospace); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5E6978; }
.srch-list { list-style: none; margin: 0; padding: 0 8px 8px; max-height: 50vh; overflow-y: auto; }
.srch-item a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.srch-item.is-active a { background: rgba(255, 255, 255, 0.06); }
.srch-thumb { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #06090D center / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.08); }
.srch-thumb-page { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.srch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srch-name { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 0.9rem; color: #F5F5F2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-sub { font-size: 0.76rem; color: #7A8595; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-cat { flex: none; font-family: var(--font-mono, monospace); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7A8595; }
.srch-item.is-active .srch-cat { color: #FFFFFF; }
.srch-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.72rem; color: #5E6978; }
.srch-foot kbd { margin-right: 3px; }
@media (max-width: 640px) { .srch-cat, .srch-foot { display: none; } .srch { padding-top: 8vh; } }



/* Compact header */
.nav-header { padding-top: 10px !important; padding-bottom: 10px !important; }

/* Keep the tab bar in the exact centre of the header, whatever sits left or right of it */
.nav-header .nav-wrapper { position: relative; }
.dock.is-docked { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }