/* TEST — segments (2).zip on nixie. Whole clock; natural aspect (no stretch).
   REVERT: cp nixie.html.bak-pre-segments-bg nixie.html && rm -f css/bg-segments-nixie.css
*/
@import url("bg-segments-test.css?v=172");

body.bg-segments-nixie .seg-water {
  left: 50%; bottom: 0;
  width: min(100vw, 1400px);
  transform: translateX(-50%);
  opacity: 0.83; z-index: 2;
  position: absolute;
}
body.bg-segments-nixie .seg-ground {
  left: 50%; bottom: -1%;
  width: min(100vw, 1400px);
  transform: translateX(-50%);
  opacity: 0.78; z-index: 3;
  position: absolute;
}
body.bg-segments-nixie .seg-island {
  left: 4%; bottom: 10%;
  width: min(18vw, 280px);
  opacity: 0.78; z-index: 6;
  position: absolute;
}
body.bg-segments-nixie .seg-castle {
  right: 18%; bottom: 22%;
  width: min(12vw, 170px);
  opacity: 0.73; z-index: 5;
  position: absolute;
}
/* Face profiles are SEPARATE art pieces (never one flex strip) */
body.bg-segments-nixie .seg-face-1 {
  right: 1%; top: 4%;
  width: min(11vw, 160px);
  opacity: 0.78; z-index: 8;
  position: absolute;
}
body.bg-segments-nixie .seg-face-2 {
  right: 10%; top: 22%;
  width: min(14vw, 200px);
  opacity: 0.74; z-index: 8;
  position: absolute;
}
body.bg-segments-nixie .seg-face-3 {
  right: 2%; top: 48%;
  width: min(12vw, 180px);
  opacity: 0.72; z-index: 8;
  position: absolute;
}
body.bg-segments-nixie .seg-face-4 {
  right: 12%; top: 68%;
  width: min(13vw, 190px);
  opacity: 0.70; z-index: 8;
  position: absolute;
}
body.bg-segments-nixie .seg-creature {
  left: 12%; bottom: 4%;
  width: min(15vw, 220px);
  opacity: 0.70; z-index: 7;
  position: absolute;
}
body.bg-segments-nixie .seg-clock {
  left: 1.5%; top: 18%;
  width: min(16vw, 240px);
  opacity: 0.93;
  filter: drop-shadow(0 0 32px rgba(80,255,140,0.3));
  z-index: 12;
  position: absolute;
}
body.bg-segments-nixie .seg-liquid {
  right: 2%; top: -1%;
  width: min(13vw, 200px);
  opacity: 0.68; z-index: 6;
  position: absolute;
}
body.bg-segments-nixie .page-hero { background: transparent; }
/* Same frosted hero enclosure as Watches (title + intro + video strip) */
body.bg-segments-nixie .page-hero .wrap {
  background: rgba(7, 9, 15, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}
body.bg-segments-nixie .page-hero {
  padding: 0.85rem 0 0.35rem;
  background: transparent;
}
body.bg-segments-nixie .page-hero .kicker {
  margin: 0 0 0.35rem;
}
body.bg-segments-nixie .page-hero h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
}
body.bg-segments-nixie .page-hero .page-intro {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 46rem;
}
body.bg-segments-nixie .glow-excite-strip {
  margin: 0.35rem 0 0.15rem;
  padding: 0.25rem 0;
}


/* Nixie live clock = one unit (never flex-stack face/hands into a strip) */
body.bg-segments-nixie .segments-bg .seg-object.chrono-clock,
body.bg-segments-nixie .segments-bg .seg-object.seg-clock {
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
}
body.bg-segments-nixie .segments-bg .seg-object.chrono-clock > img,
body.bg-segments-nixie .segments-bg .seg-object.seg-clock > .chrono-clock-face {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
}





/* Light fixture toggle — green/white swap; clicks must pierce page chrome */
body.bg-segments-nixie:not(.arrange-art) .segments-bg {
  /* Shopper: art layer inert; bulb pierces via its own pointer-events */
  pointer-events: none;
}
body.bg-segments-nixie.arrange-art .segments-bg {
  pointer-events: auto !important;
}
/* Same visual spot as original nixie.html (viewport), Kits + Tubes match */
body.bg-segments-nixie .seg-light-toggle {
  position: absolute;
  left: 84.7%;
  top: 3.7%;
  width: 190px;
  /* Same frame for green + white — no layout shift on toggle (548×1792 source) */
  aspect-ratio: 548 / 1792;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent !important;
  cursor: pointer;
  z-index: 40;
  opacity: 1;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
body.bg-segments-nixie .seg-light-toggle .seg-light-img {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: center top;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.2s ease;
}
/* Both layers absolute — neither is relative (that caused the jump) */
body.bg-segments-nixie .seg-light-toggle .seg-light-img.is-green,
body.bg-segments-nixie .seg-light-toggle .seg-light-img.is-white {
  position: absolute !important;
}
body.bg-segments-nixie .seg-light-toggle .seg-light-img.is-active {
  opacity: 1;
}
/* Let bulb clicks pass through header/main empty space (shopper) */
body.bg-segments-nixie:not(.arrange-art) .site-header,
body.bg-segments-nixie:not(.arrange-art) main {
  pointer-events: none;
}
body.bg-segments-nixie:not(.arrange-art) .site-header a,
body.bg-segments-nixie:not(.arrange-art) .site-header button,
body.bg-segments-nixie:not(.arrange-art) main a,
body.bg-segments-nixie:not(.arrange-art) main button,
body.bg-segments-nixie:not(.arrange-art) main input,
body.bg-segments-nixie:not(.arrange-art) main select,
body.bg-segments-nixie:not(.arrange-art) main textarea,
body.bg-segments-nixie:not(.arrange-art) main .card,
body.bg-segments-nixie:not(.arrange-art) main .grid,
body.bg-segments-nixie:not(.arrange-art) main .tab,
body.bg-segments-nixie:not(.arrange-art) main .filter-btn,
body.bg-segments-nixie:not(.arrange-art) main .card-rating,
body.bg-segments-nixie:not(.arrange-art) main .card-rating-row,
body.bg-segments-nixie:not(.arrange-art) main .card-rating-num,
body.bg-segments-nixie:not(.arrange-art) main .card-rating-label,
body.bg-segments-nixie:not(.arrange-art) main .card-rating-slider,
body.bg-segments-nixie:not(.arrange-art) main .card-rating-heart,
body.bg-segments-nixie:not(.arrange-art) main .card-body,
body.bg-segments-nixie:not(.arrange-art) main .card-media,
body.bg-segments-nixie:not(.arrange-art) .shopkeeper,
body.bg-segments-nixie:not(.arrange-art) .shopkeeper *,
body.bg-segments-nixie:not(.arrange-art) .site-footer a,
body.bg-segments-nixie:not(.arrange-art) .site-footer button,
body.bg-segments-nixie:not(.arrange-art) #admin-top,
body.bg-segments-nixie:not(.arrange-art) #footer-admin,
body.bg-segments-nixie:not(.arrange-art) .admin-top,
body.bg-segments-nixie:not(.arrange-art) .mode-switch-btn {
  pointer-events: auto !important;
}
body.arrange-art .seg-light-toggle {
  cursor: pointer;
  outline: 1px dashed rgba(125, 255, 154, 0.45);
  pointer-events: auto !important;
}
body.arrange-art .seg-light-toggle:active {
  cursor: grabbing;
}
body.bg-segments-nixie.arrange-art .seg-light-toggle {
  position: absolute !important;
}


/* TEMP: hide special categorizations; pull products up */
body.bg-segments-nixie .hub-index-nixie,
body.bg-segments-nixie #nixie-filters {
  display: none !important;
}
/* Spacing already set with Watches-matching hero rules above */
body.bg-segments-nixie .page-hero .kicker {
  margin: 0 0 0.35rem;
}
body.bg-segments-nixie main > .section {
  padding-top: 0.5rem !important;
  padding-bottom: 1.5rem !important;
}
body.bg-segments-nixie #nixie-count {
  margin: 0.25rem 0 0.75rem;
}



/* Glow toggle hint: Light Switch → bulb/moon (delicate like Full catalog) */
.glow-toggle-hint {
  position: absolute;
  right: calc(100% + 1.55rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-muted, rgba(210, 220, 230, 0.72));
  text-shadow: none;
  line-height: 1.2;
  opacity: 0.92;
}
.glow-toggle-hint-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  border-left: 0.45em solid var(--text-muted, rgba(210, 220, 230, 0.72));
  filter: none;
  flex-shrink: 0;
  opacity: 0.85;
}

.segments-bg .seg-light-toggle,
.segments-bg .seg-moon[data-moon-toggle] {
  position: absolute;
}
body.arrange-art .glow-toggle-hint {
  opacity: 0.8;
}
@media (max-width: 640px) {
  .glow-toggle-hint {
    font-size: 0.8rem;
    right: calc(100% + 0.9rem);
  }
}