/* TEST ONLY — surreal segment scene.
   Whole clocks as objects. No loose hands/numerals.
   Natural aspect ratios only (height:auto) — never stretch.
   REVERT: restore *.bak-pre-segments-bg and remove bg-segments-*.css
*/
body.bg-segments-test {
  position: relative;
  background: #07090f;
}
body.bg-segments-test > .site-header,
body.bg-segments-test > main,
body.bg-segments-test > footer,
body.bg-segments-test > .admin-bar {
  position: relative;
  z-index: 2;
}
.segments-bg {
  /* Same canvas as arrange UI-in-front / Art only — placements stay relative to the UI page */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320vh;
  min-height: 320vh;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
body.bg-segments-test {
  /* page scrolls; art layer shares the tall UI canvas */
  min-height: 320vh;
}

/* Hide art until segments-arrange boot finishes loadExtras+loadPositions+applyRemoved (no page-change flash) */
html.art-layout-pending .segments-bg,
body.art-layout-pending .segments-bg {
  visibility: hidden !important;
}

.segments-bg .seg,
.segments-bg .seg-object img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto !important; /* never stretch */
  width: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.segments-bg .seg-object {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.segments-bg .seg-object.parts-clock,
.segments-bg .seg-object[data-parts-clock],
.segments-bg .seg-object.chrono-clock,
.segments-bg .seg-object.chrono-clock--live,
.segments-bg .seg-object.seg-clock {
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
}
/* Do not force chronos hand imgs into a vertical strip */
.segments-bg .seg-object.chrono-clock img,
.segments-bg .seg-object.seg-clock img {
  width: auto;
}
.segments-bg .seg-object.chrono-clock > .chrono-clock-face,
.segments-bg .seg-object.seg-clock > .chrono-clock-face {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
}
.segments-bg .seg-object img {
  position: relative !important;
  width: 100%;
  height: auto !important;
}
.segments-wash {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(7,9,15,0.2) 22%, rgba(7,9,15,0.2) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(7,9,15,0.3) 100%);
}
body.arrange-art .segments-wash { opacity: 0.2; }
body.arrange-art .segments-bg .seg,
body.arrange-art .segments-bg .seg-object {
  pointer-events: auto !important;
  cursor: grab;
  outline: 1px dashed rgba(125, 255, 154, 0.45);
}
body.arrange-art .segments-bg .seg-object:active,
body.arrange-art .segments-bg .seg:active { cursor: grabbing; }

body.arrange-art > .site-header,
body.arrange-art > main,
body.arrange-art > footer,
body.arrange-art > .admin-bar,
body.arrange-art > .arrange-bar {
  position: relative;
  z-index: 20;
}
.arrange-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  padding: 0.55rem 1rem;
  background: rgba(10, 40, 24, 0.95);
  border-bottom: 1px solid rgba(125, 255, 154, 0.35);
  color: #d7ffe4;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
body.arrange-art .arrange-bar { display: flex; }
.arrange-bar button {
  font: inherit;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(125, 255, 154, 0.4);
  background: rgba(125, 255, 154, 0.15);
  color: #e8ffe8;
}
.arrange-bar button:hover { background: rgba(125, 255, 154, 0.28); }

/* Home defaults — width-only sizing */
.seg-sky {
  left: 50%; top: 50%;
  width: min(120vw, 1600px);
  transform: translate(-50%, -50%);
  opacity: 0.95;
  z-index: 1;
}
.seg-sky-soft {
  right: -5%; top: -8%;
  width: min(55vw, 720px);
  opacity: 0.53;
  mix-blend-mode: screen;
  z-index: 2;
}
.seg-face {
  /* Fallback before layout JSON: desk-locked left face looking right — NEVER center */
  left: 2.1%; top: 3.8%;
  width: min(28vw, 345px);
  transform: scaleX(-1);
  opacity: 0.57;
  mix-blend-mode: soft-light;
  z-index: 3;
}
.seg-moon {
  right: 6%; top: 8%;
  width: min(8vw, 96px);
  opacity: 0.95;
  filter: drop-shadow(0 0 18px rgba(180,220,255,0.35));
  z-index: 4;
}
.seg-rocks {
  left: 2%; bottom: 6%;
  width: min(22vw, 300px);
  opacity: 0.70;
  z-index: 5;
}
.seg-mountains {
  right: 4%; bottom: 8%;
  width: min(18vw, 240px);
  opacity: 0.67;
  z-index: 5;
}
.seg-spire {
  left: 3%; bottom: 12%;
  width: min(10vw, 140px);
  opacity: 0.80;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55));
}
.seg-tower {
  right: 4%; top: 18%;
  width: min(12vw, 170px);
  opacity: 0.75;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.5));
  transform: rotate(3deg);
}
.seg-tree {
  left: 14%; bottom: 4%;
  width: min(14vw, 200px);
  opacity: 0.73;
  z-index: 7;
}
.seg-skull {
  right: 16%; bottom: 5%;
  width: min(11vw, 150px);
  opacity: 0.65;
  z-index: 7;
}
.seg-clock-a {
  left: 1.5%; top: 16%;
  width: min(16vw, 240px);
  opacity: 0.87;
  filter: drop-shadow(0 0 32px rgba(80,255,140,0.28));
  z-index: 12;
}
.seg-clock-b {
  right: 1.5%; top: 42%;
  width: min(15vw, 220px);
  opacity: 0.83;
  filter: drop-shadow(0 0 28px rgba(80,255,140,0.22));
  z-index: 12;
  transform: rotate(-6deg);
}
.seg-drip, .seg-liquid {
  left: 8%; top: -2%;
  width: min(12vw, 180px);
  opacity: 0.60;
  z-index: 6;
}
.seg-eye {
  right: 22%; top: 14%;
  width: min(9vw, 110px);
  opacity: 0.55;
  mix-blend-mode: screen;
  z-index: 6;
}
.seg-leaf {
  left: 22%; top: 10%;
  width: min(5vw, 70px);
  opacity: 0.53;
  transform: rotate(-22deg);
  z-index: 6;
}
body.bg-segments-test .hero { background: transparent; }
body.bg-segments-test .hero-inner {
  background: rgba(7, 9, 15, 0.14);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.03);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
body[data-page="home"].bg-segments-test .hero-inner {
  background: rgba(7, 9, 15, 0.11);
}

/* Store UI always paints above art */
body.bg-segments-test > .site-header,
body.bg-segments-test > main,
body.bg-segments-test > footer,
body.bg-segments-test > .admin-bar {
  position: relative;
  z-index: 20;
}
body.bg-segments-test .segments-bg {
  z-index: 0;
}

/* Arrange: art stays BEHIND store UI visually.
   Clicks pass through empty page chrome to art in the gutters only. */
body.arrange-art .segments-bg {
  z-index: 0 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
body.arrange-art .segments-wash {
  pointer-events: none !important;
  opacity: 0.15 !important;
}
body.arrange-art .segments-bg .seg,
body.arrange-art .segments-bg .seg-object {
  pointer-events: auto !important;
  cursor: grab !important;
  outline: 1px dashed rgba(125, 255, 154, 0.55);
}
/* Let gutter clicks reach art; keep real content clickable & on top */
body.arrange-art > main {
  pointer-events: none !important;
  z-index: 20 !important;
}
body.arrange-art > main .wrap,
body.arrange-art > main .card,
body.arrange-art > main .btn,
body.arrange-art > main a,
body.arrange-art > main input,
body.arrange-art > main textarea,
body.arrange-art > main button,
body.arrange-art > main .tabs,
body.arrange-art > main .form-card,
body.arrange-art > main .note-card,
body.arrange-art > main .hero-inner,
body.arrange-art > main .page-hero .wrap {
  pointer-events: auto !important;
}
body.arrange-art > .site-header,
body.arrange-art > footer,
body.arrange-art > .admin-bar {
  pointer-events: auto !important;
  z-index: 20 !important;
}
body.arrange-art > .arrange-bar,
body.arrange-art > .arrange-toggle {
  pointer-events: auto !important;
  z-index: 10001 !important;
}
.arrange-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(125, 255, 154, 0.45);
  background: rgba(10, 40, 24, 0.92);
  color: #d7ffe4;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
body.arrange-art .arrange-toggle { display: none; }

.arrange-bar-rich {
  display: none;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem 0.9rem;
  max-height: none;
  overflow: visible;
}
body.arrange-art .arrange-bar-rich { display: flex; }
/* Keep the removed-art tray fully visible (never clip mini bottoms) */
body.arrange-art .arrange-bar-rich .arrange-removed-tray {
  flex-shrink: 0;
  overflow: visible;
}
.arrange-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.arrange-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.arrange-tab {
  color: #cfe9d8;
  text-decoration: none;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(125,255,154,0.25);
  font-size: 0.78rem;
}
.arrange-tab.is-active, .arrange-tab:hover {
  background: rgba(125,255,154,0.18);
  color: #effff4;
}
.arrange-hint { font-size: 0.72rem; color: #a7cbb6; }
.arrange-palette h4 {
  margin: 0.4rem 0 0.35rem;
  font-size: 0.75rem;
  color: #b7e0c6;
  font-weight: 500;
}
.pal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
}
.pal-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  padding: 0.35rem;
  border-radius: 8px;
  border: 1px solid rgba(125,255,154,0.22);
  background: rgba(0,0,0,0.28);
  color: #d7ffe4;
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  text-align: center;
}
.pal-item img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  background: #05070c;
  border-radius: 4px;
}
.pal-item:hover { border-color: rgba(125,255,154,0.55); background: rgba(125,255,154,0.12); }

body.arrange-art .segments-bg .seg.is-selected,
body.arrange-art .segments-bg .seg-object.is-selected {
  outline: 2px solid rgba(125, 255, 154, 0.95) !important;
  outline-offset: 3px;
  z-index: 40 !important;
}
body.arrange-art .segments-bg .seg,
body.arrange-art .segments-bg .seg-object {
  max-width: none !important;
  min-width: 0 !important;
}

/* Arrange: art layer in FRONT of store UI — reach every object */
body.arrange-art.arrange-art-front .segments-bg {
  z-index: 50 !important;
  pointer-events: auto !important;
}
body.arrange-art.arrange-art-front .segments-bg .seg,
body.arrange-art.arrange-art-front .segments-bg .seg-object {
  pointer-events: auto !important;
  filter: drop-shadow(0 0 10px rgba(125, 255, 154, 0.35));
}
body.arrange-art.arrange-art-front > .site-header,
body.arrange-art.arrange-art-front > main,
body.arrange-art.arrange-art-front > footer,
body.arrange-art.arrange-art-front > .admin-bar {
  z-index: 10 !important;
  pointer-events: none !important;
  opacity: 0.28;
  transition: opacity 0.15s ease;
}
body.arrange-art.arrange-art-front > .arrange-bar,
body.arrange-art.arrange-art-front > .arrange-toggle {
  z-index: 10001 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.arrange-art .arrange-actions button[data-act="layer"].is-active-layer {
  background: rgba(125, 255, 154, 0.25);
  border-color: rgba(125, 255, 154, 0.7);
  color: #e8ffe0;
}


/* Corner resize handles — overlay siblings (do not wrap <img>) */
.segments-bg > .seg-handles {
  display: none;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 60;
  border: 1px dashed rgba(125, 255, 154, 0.35);
}
body.arrange-art .segments-bg > .seg-handles {
  display: block;
}
body.arrange-art .segments-bg .seg-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #9dffb8;
  border: 2px solid #0a2818;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(125, 255, 154, 0.7);
  pointer-events: auto !important;
  z-index: 61;
}
body.arrange-art .segments-bg .seg-handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }
body.arrange-art .segments-bg .seg-handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }
body.arrange-art .segments-bg .seg-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
body.arrange-art .segments-bg .seg-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* View modes: Both / Art only / Store only */
body.arrange-art.arrange-view-art > .site-header,
body.arrange-art.arrange-view-art > main,
body.arrange-art.arrange-view-art > footer,
body.arrange-art.arrange-view-art > .admin-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.arrange-art.arrange-view-art .segments-bg {
  z-index: 50 !important;
  pointer-events: auto !important;
}
body.arrange-art.arrange-view-art .segments-bg .seg,
body.arrange-art.arrange-view-art .segments-bg .seg-object {
  pointer-events: auto !important;
}
body.arrange-art.arrange-view-store .segments-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.arrange-art.arrange-view-store .segments-bg .seg-handles {
  display: none !important;
}
body.arrange-art.arrange-view-store > .site-header,
body.arrange-art.arrange-view-store > main,
body.arrange-art.arrange-view-store > footer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.arrange-art > .arrange-bar,
body.arrange-art > .arrange-toggle {
  visibility: visible !important;
  opacity: 1 !important;
}

.arrange-view-group {
  display: inline-flex;
  gap: 0;
  margin-right: 0.35rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(125, 255, 154, 0.35);
}
.arrange-view-group button {
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  background: rgba(10, 40, 24, 0.85);
}
.arrange-view-group button + button {
  border-left: 1px solid rgba(125, 255, 154, 0.25) !important;
}
.arrange-view-group button.is-active-view {
  background: rgba(125, 255, 154, 0.32) !important;
  color: #e8ffe0;
}

/* Combined preview = UI in front (live site look) */
body.arrange-art.arrange-view-both:not(.arrange-art-front) .segments-bg {
  z-index: 0 !important;
  pointer-events: none !important;
}
body.arrange-art.arrange-view-both:not(.arrange-art-front) > .site-header,
body.arrange-art.arrange-view-both:not(.arrange-art-front) > main,
body.arrange-art.arrange-view-both:not(.arrange-art-front) > footer,
body.arrange-art.arrange-view-both:not(.arrange-art-front) > .admin-bar {
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
}
/* Hide edit chrome in combined preview so it looks like the real site */
body.arrange-art.arrange-view-both:not(.arrange-art-front) .segments-bg > .seg-handles {
  display: none !important;
}
body.arrange-art.arrange-view-both:not(.arrange-art-front) .segments-bg .seg,
body.arrange-art.arrange-view-both:not(.arrange-art-front) .segments-bg .seg-object {
  outline: none !important;
  cursor: default !important;
  pointer-events: none !important;
  filter: none !important;
}

/* Glowing clock set — face + hands as one object (never loose hands) */
.segments-bg .seg-object.seg-clock-a {
  position: absolute;
}
.segments-bg .seg-object.seg-clock-a > img {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: auto !important;
}
.segments-bg .seg-object.seg-clock-a > img:first-child {
  position: relative !important;
}

/* Handles only for the selected art object */
body.arrange-art .segments-bg > .seg-handles {
  display: none;
}
body.arrange-art .segments-bg > .seg-handles.is-active-handles {
  display: block;
}
body.arrange-art .segments-bg .seg:not(.is-selected),
body.arrange-art .segments-bg .seg-object:not(.is-selected) {
  outline-color: rgba(125, 255, 154, 0.22);
}

body.arrange-art .segments-bg {
  pointer-events: auto !important;
}

/* Deselect veil — sits under art, above store; click releases selection */
body.arrange-art .arrange-deselect-veil {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 5;
  background: transparent;
  cursor: default;
}
.arrange-deselect-veil { display: none; }
body.arrange-art .segments-bg {
  z-index: 50 !important;
}
body.arrange-art.arrange-view-both:not(.arrange-art-front) .segments-bg {
  z-index: 0 !important;
}
body.arrange-art.arrange-view-both:not(.arrange-art-front) .arrange-deselect-veil {
  display: none;
}
body.arrange-art.arrange-view-store .arrange-deselect-veil {
  display: none;
}

/* Remove strip under arrange bar */
.arrange-remove-dock {
  display: none;
  margin: 0.35rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px dashed rgba(125, 255, 154, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: #b8f0c8;
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.02em;
  pointer-events: none; /* detection via coordinates while dragging */
}
body.arrange-art .arrange-remove-dock {
  display: block;
}
body.arrange-art .arrange-remove-dock.is-hot {
  border-color: #ff8a8a;
  background: rgba(80, 16, 16, 0.72);
  color: #ffd0d0;
  box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.45);
}

/* Removed-art mini tray under the drop strip */
.arrange-removed-tray {
  display: none;
  margin-top: 0.4rem;
  margin-bottom: 0.15rem;
  padding: 0.55rem 0.55rem 0.65rem;
  min-height: 4.6rem;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(125, 255, 154, 0.22);
  background: rgba(0, 0, 0, 0.28);
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  align-content: center;
  box-sizing: border-box;
  overflow: visible;
}
body.arrange-art .arrange-removed-tray {
  display: flex;
  position: relative;
  z-index: 2;
}
.arrange-removed-empty {
  width: 100%;
  text-align: center;
  color: #8aa894;
  font-size: 0.78rem;
  padding: 0.35rem;
}
.arrange-removed-mini {
  width: 3.4rem;
  height: 3.4rem;
  min-width: 3.4rem;
  min-height: 3.4rem;
  padding: 0.2rem;
  border-radius: 8px;
  border: 1px solid rgba(125, 255, 154, 0.4);
  background: rgba(10, 30, 20, 0.9);
  cursor: grab;
  overflow: hidden;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.arrange-removed-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.arrange-removed-mini.is-dragging-mini {
  opacity: 0.35;
}
.arrange-removed-ghost {
  position: fixed;
  width: 3.4rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  z-index: 10060;
  pointer-events: none;
  border-radius: 8px;
  border: 1px solid rgba(125, 255, 154, 0.7);
  background: rgba(10, 30, 20, 0.92);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.arrange-removed-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ========== Unified arrange views ==========
   One art canvas + one store layout for all three modes.
   Art only / UI in front share the same art coordinates.
   UI in front / Store only share the same store layout.
   ========================================== */

/* Shared page chrome offset + scroll */
body.arrange-art.arrange-view-art,
body.arrange-art.arrange-view-both,
body.arrange-art.arrange-view-store {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
  padding-top: var(--arrange-chrome-h, 12rem);
}

/* Shared tall art canvas (same coordinates in Art only + UI in front) */
body.arrange-art.arrange-view-art::after,
body.arrange-art.arrange-view-both::after {
  content: "";
  display: block;
  height: 320vh;
  pointer-events: none;
}
body.arrange-art.arrange-view-store::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

body.arrange-art.arrange-view-art .segments-bg,
body.arrange-art.arrange-view-both .segments-bg {
  position: absolute !important;
  inset: auto !important;
  top: var(--arrange-chrome-h, 12rem) !important;
  left: 0 !important;
  width: 100% !important;
  height: 320vh !important;
  min-height: 320vh !important;
  overflow: visible !important;
}

body.arrange-art.arrange-view-art .arrange-deselect-veil {
  display: block !important;
  position: fixed !important;
  inset: auto !important;
  top: var(--arrange-chrome-h, 12rem) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  background: transparent;
  cursor: default;
}
body.arrange-art.arrange-view-art .segments-bg {
  z-index: 50 !important;
  pointer-events: auto !important;
}
body.arrange-art.arrange-view-art .segments-bg > .arrange-canvas-deselect {
  pointer-events: auto !important;
  z-index: 0 !important;
}
body.arrange-art.arrange-view-art .segments-bg > .seg,
body.arrange-art.arrange-view-art .segments-bg > .seg-object {
  pointer-events: auto !important;
  z-index: 2;
}
body.arrange-art.arrange-view-art .segments-bg > .seg-handles {
  z-index: 3;
}

/* Fixed admin + arrange bar for every view */
body.arrange-art.arrange-view-art > .admin-top,
body.arrange-art.arrange-view-both > .admin-top,
body.arrange-art.arrange-view-store > .admin-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10052 !important;
}
body.arrange-art.arrange-view-art > .arrange-bar,
body.arrange-art.arrange-view-both > .arrange-bar,
body.arrange-art.arrange-view-store > .arrange-bar {
  position: fixed !important;
  top: max(2.25rem, var(--admin-top-h, 2.25rem)) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10051 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Art only — edit art; store hidden */
body.arrange-art.arrange-view-art .segments-bg {
  z-index: 50 !important;
  pointer-events: auto !important;
}

/* UI in front — same store as Store only; art behind (same canvas as Art only) */
body.arrange-art.arrange-view-both .segments-bg {
  z-index: 0 !important;
  pointer-events: none !important;
}
body.arrange-art.arrange-view-both .segments-bg > .seg-handles {
  display: none !important;
}
body.arrange-art.arrange-view-both .arrange-deselect-veil {
  display: none !important;
}

/* Store only — identical store; art hidden (DOM kept so positions stay) */
body.arrange-art.arrange-view-store .segments-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.arrange-art.arrange-view-store .segments-bg > .seg-handles {
  display: none !important;
}
body.arrange-art.arrange-view-store .arrange-deselect-veil {
  display: none !important;
}

/* Store chrome identical in UI in front + Store only */
body.arrange-art.arrange-view-both > .site-header,
body.arrange-art.arrange-view-both > main,
body.arrange-art.arrange-view-both > footer,
body.arrange-art.arrange-view-store > .site-header,
body.arrange-art.arrange-view-store > main,
body.arrange-art.arrange-view-store > footer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
  position: relative;
  z-index: 20 !important;
}

/* unified arrange views */


/* Floating rotate / flip controls under selected art */
.art-xform-dock {
  position: fixed;
  z-index: 10060;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  border: 1px solid rgba(125, 255, 154, 0.55);
  background: rgba(8, 28, 18, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.art-xform-dock[hidden] { display: none !important; }
.art-xform-dock button {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  border-radius: 7px;
  border: 1px solid rgba(125, 255, 154, 0.45);
  background: rgba(125, 255, 154, 0.18);
  color: #e8ffe8;
  white-space: nowrap;
}
.art-xform-dock button:hover {
  background: rgba(125, 255, 154, 0.32);
}
body.arrange-art .arrange-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* Free tilt: line (stem) + circle at the top of the selection */
body.arrange-art .segments-bg > .seg-handles {
  transform-origin: center center;
}
body.arrange-art .segments-bg .seg-rotate-stem {
  display: none;
  position: absolute;
  left: 50%;
  top: -48px;
  width: 2px;
  height: 48px;
  margin-left: -1px;
  background: #9dffb8;
  border-radius: 1px;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(125, 255, 154, 0.55);
  z-index: 1;
}
body.arrange-art .segments-bg > .seg-handles.is-active-handles .seg-rotate-stem {
  display: block;
}
body.arrange-art .segments-bg .seg-handle-rotate {
  left: 50%;
  top: -60px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #c8ffe0;
  border: 2px solid #0a2818;
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(125, 255, 154, 0.9), 0 0 14px rgba(125, 255, 154, 0.5);
  z-index: 2;
}
body.arrange-art .segments-bg .seg-handle-rotate:active { cursor: grabbing; }
body.arrange-art .segments-bg > .seg-handles.is-active-handles::before {
  display: none; /* stem is a real element now */
}
.art-xform-hint {
  font-size: 0.72rem;
  color: #b7e8c8;
  padding: 0 0.25rem;
  align-self: center;
}
.art-xform-deg {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: #b7e8c8;
}
.art-xform-deg input {
  width: 4.2rem;
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(125, 255, 154, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #e8ffe8;
  font: inherit;
}

/* arrange-bar tray clip fix */
body.arrange-art > .arrange-bar.arrange-bar-rich {
  overflow: visible !important;
  max-height: none !important;
  z-index: 10050 !important;
}
body.arrange-art.arrange-view-art > .arrange-bar,
body.arrange-art.arrange-view-both > .arrange-bar {
  overflow: visible !important;
}

/* arrange chrome tray opaque */
body.arrange-art > .arrange-bar.arrange-bar-rich {
  background: rgba(8, 28, 18, 0.98) !important;
  overflow: visible !important;
  max-height: none !important;
}
body.arrange-art .arrange-removed-tray {
  min-height: 4.75rem;
  padding-bottom: 0.75rem;
}

/* Flip / Reset dock under selected art (tilt is stem+circle only) */
.art-xform-dock {
  display: flex !important;
}
.art-xform-dock[hidden] {
  display: none !important;
}
.art-xform-dock button[data-act="reset-xform"] {
  border-color: rgba(255, 200, 120, 0.55);
  background: rgba(255, 180, 80, 0.16);
  color: #ffe6c0;
}

/* art-xform-dock side stack — never cover tilt circle */
.art-xform-dock {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  max-width: 8.5rem;
}

/* art-xform-dock retired beside circle */
.art-xform-dock { display: none !important; }

/* Flip / Reset / Delete flanking the tilt circle
   Layout:
     [Reset]              [Delete]
     [Flip left]   (O)    [Flip right]
   All four buttons same size. */
body.arrange-art .segments-bg .seg-xform-btn {
  display: none;
  position: absolute;
  z-index: 3;
  pointer-events: auto;
  box-sizing: border-box;
  width: 5.6rem;
  min-width: 5.6rem;
  max-width: 5.6rem;
  height: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.85rem;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(125, 255, 154, 0.55);
  background: rgba(8, 28, 18, 0.95);
  color: #e8ffe8;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
body.arrange-art .segments-bg > .seg-handles.is-active-handles .seg-xform-btn {
  display: block;
}
body.arrange-art .segments-bg .seg-xform-btn:hover {
  background: rgba(125, 255, 154, 0.28);
}
/* Left column: Reset above Flip left */
body.arrange-art .segments-bg .seg-xform-flip-left {
  right: calc(50% + 16px);
  top: -64px;
  transform: none;
}
body.arrange-art .segments-bg .seg-xform-reset {
  right: calc(50% + 16px);
  left: auto;
  top: -98px;
  transform: none;
  border-color: rgba(255, 200, 120, 0.55);
  background: rgba(40, 28, 10, 0.95);
  color: #ffe6c0;
}
body.arrange-art .segments-bg .seg-xform-reset:hover {
  background: rgba(255, 180, 80, 0.28);
  color: #fff0d8;
}
/* Right column: Delete above Flip right */
body.arrange-art .segments-bg .seg-xform-flip-right {
  left: calc(50% + 16px);
  top: -64px;
  transform: none;
}
body.arrange-art .segments-bg .seg-xform-delete {
  left: calc(50% + 16px);
  top: -98px;
  transform: none;
  border-color: rgba(255, 140, 140, 0.55);
  background: rgba(50, 12, 16, 0.95);
  color: #ffc8c8;
}
body.arrange-art .segments-bg .seg-xform-delete:hover {
  background: rgba(80, 18, 24, 0.9);
  color: #fff0f0;
  border-color: rgba(255, 160, 160, 0.75);
}

/* arrange-actions wrap visible fix */
body.arrange-art .arrange-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  max-width: 100%;
}
body.arrange-art > .arrange-bar.arrange-bar-rich {
  z-index: 10051 !important;
}
body.arrange-art > .admin-top {
  z-index: 10052 !important;
}


/* ——— Chrono clocks: real ticking art hands ——— */
.chrono-clock {
  position: absolute;
  display: block;
}
.segments-bg .chrono-clock > .chrono-clock-face,
.chrono-clock-face {
  display: block;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  max-width: none !important;
  z-index: 0;
}
.chrono-clock-face--layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: none;
  z-index: 1;
}
.chrono-hands {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 4;
}
/* Hands pivot-centered; dial hubs per face. Whole .chrono-clock is one unit. */
.chrono-hand {
  position: absolute !important;
  left: 50% !important;
  top: 37.5% !important; /* default = glowing blank hub */
  width: 42% !important;
  height: 42% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none !important;
}
.chrono-hand--hour { width: 34% !important; height: 34% !important; z-index: 3; }
.chrono-hand--minute { width: 46% !important; height: 46% !important; z-index: 4; }
.chrono-hand--second { width: 50% !important; height: 50% !important; z-index: 5; background: none !important; box-shadow: none !important; }
.segments-bg .chrono-clock .chrono-hand > img,
.chrono-clock .chrono-hand > img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  filter:
    brightness(1.45) contrast(1.2) saturate(1.25)
    drop-shadow(0 0 3px rgba(180, 255, 140, 0.75))
    drop-shadow(0 0 8px rgba(80, 255, 140, 0.4)) !important;
}
.chrono-clock--frozen .chrono-hands { display: none !important; }
.chrono-clock--live {
  filter: drop-shadow(0 0 32px rgba(80,255,140,0.28));
}
/* melting dial fills more of its frame — hub near middle */
.chrono-clock.seg-clock-a .chrono-hand {
  top: 48.5% !important;
}
/* glowing dial sits high in a tall frame — hub ~37.5% */
.chrono-clock.seg-clock-b .chrono-hand {
  top: 37.5% !important;
}

/* default placements */
.seg-clock-frozen {
  left: 2%; top: 14%;
  width: min(18vw, 260px);
  opacity: 0.92;
  z-index: 12;
}
.seg-clock-live {
  left: 20%; top: 6%;
  width: min(22vw, 320px);
  opacity: 1;
  z-index: 14;
}
.seg-clock-b {
  right: 1.5%; top: 42%;
  width: min(15vw, 220px);
  opacity: 0.83;
  z-index: 12;
}
/* arrange: treat whole clock as one object */
body.arrange-art .chrono-clock .chrono-hands {
  pointer-events: none !important;
}
body.arrange-art .chrono-clock .chrono-hand,
body.arrange-art .chrono-clock .chrono-hand > img {
  pointer-events: none !important;
}

/* Live clock = one arrange unit (never drag hands alone) */
.segments-bg .chrono-clock,
.segments-bg .chrono-clock--live,
.segments-bg .parts-clock {
  isolation: isolate;
}
.segments-bg .chrono-clock .chrono-hands,
.segments-bg .chrono-clock .chrono-hand,
.segments-bg .chrono-clock .chrono-hand > img,
.segments-bg .chrono-clock .chrono-clock-face {
  pointer-events: none !important;
}
body.arrange-art .segments-bg .chrono-clock {
  cursor: grab;
}



/* page clock defaults — real ticking clocks */
.segments-bg .chrono-clock--live {
  z-index: 14;
}


/* Long thin sausage row: Static | Live | Trash — short height, wide */
.arrange-removed-tray {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0;
  padding: 0.25rem 0.3rem !important;
  min-height: 0 !important;
  height: auto !important;
}
.arrange-tray-section {
  display: flex;
  flex-direction: row; /* label + content side-by-side inside each segment */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  flex: 1 1 0;
  padding: 0.15rem 0.55rem;
  position: relative;
}
.arrange-tray-static,
.arrange-tray-live,
.arrange-tray-trash {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
.arrange-tray-label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.08em !important;
}
.arrange-tray-row,
.arrange-tray-row-live,
.arrange-trash-actions {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0 !important;
  align-items: center;
}
/* Vertical delimiters between the three sausage segments */
.arrange-tray-live,
.arrange-tray-trash {
  border-left: 1px solid rgba(125, 255, 154, 0.3);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.22);
}
.arrange-tray-static {
  border-radius: 8px 0 0 8px;
}
.arrange-tray-trash {
  border-radius: 0 8px 8px 0;
}
.arrange-tray-divider {
  display: none !important;
}
.arrange-tray-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fd9b0;
  font-weight: 600;
}
.arrange-tray-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
  min-height: 0;
}
.arrange-tray-row-live {
  min-height: 0;
}
.arrange-tray-divider {
  display: none !important;
}
.arrange-tray-empty {
  font-size: 0.72rem;
  color: #7a9a84;
  padding: 0.35rem 0.2rem;
}
.arrange-live-seed {
  position: relative;
  border-color: rgba(125, 255, 200, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(80, 255, 160, 0.25);
}
.arrange-mini-badge {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: #062010;
  background: rgba(125, 255, 154, 0.9);
  border-radius: 4px;
  line-height: 1.2;
  padding: 0.05rem 0;
  pointer-events: none;
}

.arrange-live-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  vertical-align: top;
  width: 3.6rem;
}
.arrange-live-cell .arrange-removed-mini {
  width: 3.6rem;
  height: 3.6rem;
}
.arrange-live-cell .arrange-settings-badge {
  position: static;
  display: block;
  width: 100%;
  left: auto;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  padding: 0.18rem 0.2rem;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: #062010;
  background: rgba(125, 255, 154, 0.9);
  border-radius: 4px;
  line-height: 1.2;
  border: 0;
}
.arrange-live-cell .arrange-settings-badge:hover {
  background: rgba(160, 255, 180, 0.98);
  color: #03150a;
}
.arrange-removed-mini {
  /* keep minis above their settings chip in the cell */
}
.pal-grid-live {
  align-items: flex-start;
}
.pal-live-cell {
  max-width: 7.5rem;
}
.pal-live-cell .pal-item {
  width: 100%;
}
.arrange-clock-settings-link {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: #b8ffc8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.arrange-clock-settings-link:hover { color: #e8ffe8; }
.arrange-pal-note {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.75rem;
}
.arrange-pal-note a { color: #b8ffc8; }
.arrange-removed-mini.is-live-mini {
  /* same box chrome as static — no extra glow */
  border-color: inherit;
}

/* Drop box understands Static vs Live while dragging canvas ↔ tray */
.arrange-remove-dock.is-hot-static {
  border-color: rgba(180, 200, 190, 0.95);
  background: rgba(40, 70, 55, 0.55);
  box-shadow: 0 0 0 2px rgba(160, 190, 170, 0.35);
}
.arrange-remove-dock.is-hot-live {
  /* match static drop highlight — no bright live glow strip */
  border-color: rgba(180, 200, 190, 0.95);
  background: rgba(40, 70, 55, 0.55);
  box-shadow: 0 0 0 2px rgba(160, 190, 170, 0.35);
}
.arrange-remove-dock.is-restore-blocked {
  border-style: dashed;
  opacity: 0.85;
  color: #c8e0d0;
}
.arrange-removed-tray.is-hot-static .arrange-tray-static,
.arrange-tray-static.is-drop-target {
  outline: 2px solid rgba(170, 200, 180, 0.85);
  outline-offset: 2px;
  border-radius: 8px;
  background: rgba(50, 80, 65, 0.35);
}
.arrange-removed-tray.is-hot-live .arrange-tray-live,
.arrange-tray-live.is-drop-target {
  /* same as static section highlight */
  outline: 2px solid rgba(170, 200, 180, 0.85);
  outline-offset: 2px;
  border-radius: 8px;
  background: rgba(50, 80, 65, 0.35);
  box-shadow: none;
}
body.arrange-restore-blocked .arrange-removed-tray {
  outline: 2px dashed rgba(200, 220, 200, 0.5);
  outline-offset: 2px;
  border-radius: 10px;
}
body.arrange-restore-ok .segments-bg {
  outline: 2px solid rgba(125, 255, 154, 0.45);
  outline-offset: -2px;
}

.arrange-mini-badge.arrange-static-badge {
  background: rgba(200, 180, 140, 0.9);
  color: #1a1510;
}
.arrange-mini-badge.arrange-dup-badge {
  background: var(--lume, #7dff9a);
  color: #06100a;
  right: 2px;
  left: auto;
}
.arrange-removed-mini.is-static-mini,
.arrange-removed-mini.is-live-mini {
  outline: 1px solid rgba(200, 180, 140, 0.35);
}

.arrange-tray-label .arrange-settings-btn,
.arrange-palette h4 .arrange-settings-btn {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  padding: 0.2rem 0.55rem;
  font: 600 0.65rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #062010;
  background: rgba(125, 255, 154, 0.92);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}
.arrange-tray-label .arrange-settings-btn:hover,
.arrange-palette h4 .arrange-settings-btn:hover {
  background: rgba(180, 255, 200, 0.98);
}

.arrange-live-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.arrange-live-cell .arrange-settings-btn {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font: 500 0.62rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #9fd9b0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(159, 217, 176, 0.45);
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto !important;
  box-shadow: none;
}
.arrange-live-cell .arrange-settings-btn:hover {
  color: #c8ffe0;
  background: transparent;
  border-bottom-color: currentColor;
}
.pal-live-settings {
  margin: 0.35rem 0 0.5rem;
}

/* Live section box = same quiet chrome as Static (no glow strip) */
.arrange-tray-live {
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.arrange-tray-live .arrange-tray-row-live {
  background: transparent;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}


/* Art tray garbage can + undo quarantine */
.arrange-tray-trash {
  margin-top: 0.15rem;
}
.arrange-tray-label .arrange-trash-hint {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 0.35rem;
  font-size: 0.62rem;
}
.arrange-trash-dock {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.2rem 0 0.35rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px dashed rgba(255, 140, 140, 0.45);
  background: rgba(40, 12, 12, 0.45);
  color: #ffc8c8;
  font-size: 0.78rem;
  cursor: default;
  user-select: none;
}
.arrange-trash-dock.is-hot,
body.arrange-trash-hot .arrange-trash-dock {
  border-color: #ff8a8a;
  background: rgba(90, 18, 18, 0.78);
  color: #ffe0e0;
  box-shadow: 0 0 0 2px rgba(255, 120, 120, 0.35);
}
.arrange-trash-icon {
  font-size: 1.15rem;
  line-height: 1;
}
.arrange-trash-dock-text {
  flex: 1;
  min-width: 0;
}
.arrange-tray-row-trash {
  min-height: 0;
}
.arrange-trash-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 3.6rem;
}
.arrange-removed-mini.is-trash-mini {
  border-color: rgba(255, 150, 150, 0.45);
  background: rgba(40, 12, 12, 0.75);
  opacity: 0.9;
  cursor: default;
}
.arrange-trash-undo {
  display: block;
  width: 100%;
  padding: 0.15rem 0.2rem;
  font: 600 0.62rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #062010;
  background: rgba(125, 255, 154, 0.9);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.arrange-trash-undo:hover {
  background: rgba(180, 255, 200, 0.98);
}


/* compact row trash */
.arrange-trash-dock {
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
  min-height: 3.4rem;
}
.arrange-tray-label .arrange-trash-hint {
  display: block;
  margin-left: 0;
  margin-top: 0.15rem;
}
.arrange-removed-tray {
  min-height: 0;
  padding: 0.45rem 0.5rem 0.5rem;
}


/* tray section polish */
.arrange-removed-tray .arrange-tray-label {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(125, 255, 154, 0.12);
  margin-bottom: 0.05rem;
}
.arrange-tray-trash .arrange-trash-dock {
  border-style: dashed;
  border-color: rgba(255, 150, 150, 0.4);
}
@media (max-width: 720px) {
  /* still a sausage — allow wrap only if needed, keep thin */
  .arrange-removed-tray {
    flex-wrap: wrap;
  }
  .arrange-tray-section {
    flex: 1 1 40%;
  }
}


/* Compact trash column: dock + single Undelete under it (no mini gallery) */
.arrange-tray-trash {
  align-items: stretch;
}
.arrange-tray-trash .arrange-trash-dock {
  min-height: 3.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 0.15rem;
}
.arrange-trash-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.15rem;
}
.arrange-tray-trash .arrange-trash-undo {
  display: block;
  width: auto;
  min-width: 4.5rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  font: 500 0.62rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #9fd9b0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(159, 217, 176, 0.45);
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
}
.arrange-tray-trash .arrange-trash-undo:hover:not(:disabled) {
  color: #c8ffe0;
  border-bottom-color: currentColor;
  background: transparent;
}
.arrange-tray-trash .arrange-trash-undo.is-disabled,
.arrange-tray-trash .arrange-trash-undo:disabled {
  opacity: 0.35;
  cursor: default;
  border-bottom-color: rgba(159, 217, 176, 0.2);
}
.arrange-tray-row-trash,
.arrange-trash-cell {
  display: none !important; /* gallery removed */
}


/* Sausage row: tiny minis + flat trash dock */
body.arrange-art .arrange-removed-tray .arrange-removed-mini {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  padding: 0.12rem;
}
body.arrange-art .arrange-live-cell {
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  width: auto;
}
body.arrange-art .arrange-live-cell .arrange-removed-mini {
  width: 2.35rem !important;
  height: 2.35rem !important;
}
body.arrange-art .arrange-tray-trash .arrange-trash-dock {
  flex-direction: row !important;
  min-height: 0 !important;
  height: 2.35rem;
  padding: 0 0.55rem !important;
  margin: 0 !important;
  font-size: 0.65rem !important;
  gap: 0.35rem !important;
  flex: 1 1 auto;
}
body.arrange-art .arrange-tray-trash {
  /* trash: label | dock | undelete in one thin line */
}
body.arrange-art .arrange-trash-actions {
  flex: 0 0 auto;
  margin-top: 0 !important;
}
body.arrange-art .arrange-tray-empty {
  padding: 0.1rem 0.15rem !important;
  font-size: 0.65rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.arrange-art .arrange-remove-dock {
  margin: 0.2rem 0 0 !important;
  padding: 0.35rem 0.65rem !important;
  font-size: 0.75rem !important;
}


/* ========== Elegant sausage strip (final) ========== */
body.arrange-art .arrange-removed-tray {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.1rem !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid rgba(125, 255, 154, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(4, 10, 8, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(125, 255, 154, 0.06) !important;
  overflow: hidden;
}
body.arrange-art .arrange-sausage {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.2rem 0.35rem;
  gap: 0;
  box-sizing: border-box;
}
body.arrange-art .arrange-sausage-seg {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.15rem 0.7rem;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.arrange-art .arrange-sausage-kicker {
  flex: 0 0 auto;
  font: 500 0.62rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184, 240, 200, 0.72);
  white-space: nowrap;
}
body.arrange-art .arrange-sausage-rail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
body.arrange-art .arrange-sausage-rule {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  margin: 0.35rem 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(125, 255, 154, 0.35) 20%,
    rgba(125, 255, 154, 0.35) 80%,
    transparent
  );
}
body.arrange-art .arrange-sausage-empty {
  color: rgba(140, 170, 150, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 0 0.15rem;
}
body.arrange-art .arrange-removed-tray .arrange-removed-mini {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0.1rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(125, 255, 154, 0.28) !important;
  background: rgba(8, 18, 14, 0.85) !important;
  box-shadow: none !important;
}
body.arrange-art .arrange-live-cell {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.3rem !important;
  width: auto !important;
  vertical-align: middle;
}
body.arrange-art .arrange-live-cell .arrange-settings-btn {
  margin: 0 !important;
  padding: 0 !important;
  font: 500 0.58rem/1.1 "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(159, 217, 176, 0.85) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(159, 217, 176, 0.35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.arrange-art .arrange-sausage-trash-rail {
  gap: 0.55rem;
}
body.arrange-art .arrange-trash-dock {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.15rem !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0.85rem !important;
  border-radius: 999px !important;
  border: 1px dashed rgba(255, 160, 160, 0.4) !important;
  background: rgba(30, 10, 12, 0.45) !important;
  color: rgba(255, 210, 210, 0.85) !important;
  font: 500 0.62rem/1 "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
  flex: 0 1 auto;
  white-space: nowrap;
}
body.arrange-art .arrange-trash-dock.is-hot,
body.arrange-trash-hot .arrange-trash-dock {
  border-color: rgba(255, 140, 140, 0.85) !important;
  background: rgba(70, 16, 20, 0.7) !important;
  color: #ffe8e8 !important;
}
body.arrange-art .arrange-trash-icon { display: none !important; }
body.arrange-art .arrange-trash-actions { display: contents; }
body.arrange-art .arrange-trash-undo {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font: 500 0.58rem/1.1 "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(159, 217, 176, 0.9) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(159, 217, 176, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
}
body.arrange-art .arrange-trash-undo:hover:not(:disabled) {
  color: #e8ffe8 !important;
  border-bottom-color: currentColor !important;
  background: transparent !important;
}
body.arrange-art .arrange-trash-undo:disabled,
body.arrange-art .arrange-trash-undo.is-disabled {
  opacity: 0.3;
  cursor: default;
}
/* Hide leftover old structure if any */
body.arrange-art .arrange-tray-divider,
body.arrange-art .arrange-tray-label .arrange-trash-hint,
body.arrange-art .arrange-tray-row-trash,
body.arrange-art .arrange-trash-cell {
  display: none !important;
}
body.arrange-art .arrange-remove-dock {
  margin: 0.25rem 0 0 !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
}


/* Delete — quiet danger, sits before Flip left / Flip right */
body.arrange-art .arrange-actions .arrange-act-delete,
body.arrange-art .arrange-actions button[data-act="delete"] {
  color: #ffc8c8;
  border-color: rgba(255, 140, 140, 0.45);
  background: rgba(50, 12, 16, 0.55);
}
body.arrange-art .arrange-actions .arrange-act-delete:hover,
body.arrange-art .arrange-actions button[data-act="delete"]:hover {
  color: #fff0f0;
  border-color: rgba(255, 160, 160, 0.75);
  background: rgba(80, 18, 24, 0.7);
}


/* Trash · N is a button — click to view items */
body.arrange-art .arrange-trash-toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
body.arrange-art .arrange-trash-toggle:hover {
  color: #e8ffe8;
}
body.arrange-art .arrange-tray-trash.is-trash-open .arrange-trash-toggle {
  color: #c8ffe0;
}
body.arrange-art .arrange-trash-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0.15rem 0.15rem;
  padding: 0.45rem 0.55rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 150, 150, 0.35);
  background: rgba(28, 10, 12, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 180, 180, 0.08);
}
body.arrange-art .arrange-trash-panel-hint {
  font: 500 0.62rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: rgba(255, 210, 210, 0.75);
}
body.arrange-art .arrange-trash-panel-empty {
  font-size: 0.72rem;
  color: rgba(200, 170, 170, 0.6);
}
body.arrange-art .arrange-trash-panel-rail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
body.arrange-art .arrange-trash-panel .arrange-removed-mini.is-trash-mini {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  border-color: rgba(255, 150, 150, 0.45) !important;
  background: rgba(40, 12, 14, 0.9) !important;
}
body.arrange-art .arrange-trash-panel .arrange-removed-mini.is-trash-mini:hover {
  border-color: rgba(255, 190, 190, 0.85) !important;
  background: rgba(70, 18, 22, 0.95) !important;
}


/* Empty-space deselect pad — fills the canvas UNDER art pieces */
body.arrange-art .segments-bg {
  position: relative;
}
body.arrange-art .segments-bg > .arrange-canvas-deselect {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
  cursor: default !important;
}
body.arrange-art .segments-bg > .seg,
body.arrange-art .segments-bg > .seg-object {
  position: absolute;
  z-index: 2;
  pointer-events: auto !important;
}
body.arrange-art .segments-bg > .seg-handles {
  z-index: 3;
  pointer-events: none; /* handles themselves re-enable */
}
body.arrange-art .segments-bg > .seg-handles .seg-handle,
body.arrange-art .segments-bg > .seg-handles .seg-xform-btn {
  pointer-events: auto !important;
}
body:not(.arrange-art) .arrange-canvas-deselect {
  display: none !important;
  pointer-events: none !important;
}


/* Empty-space deselect: full-canvas sky wash does not steal clicks.
   Hold Ctrl/Meta (arrange-pick-bg) to select/move the sky layers. */
body.arrange-art .segments-bg > .seg-sky,
body.arrange-art .segments-bg > .seg-sky-soft {
  pointer-events: none !important;
}
body.arrange-art.arrange-pick-bg .segments-bg > .seg-sky,
body.arrange-art.arrange-pick-bg .segments-bg > .seg-sky-soft {
  pointer-events: auto !important;
  outline: 1px dashed rgba(125, 255, 154, 0.45);
}





/* Retired: big "Drop art here to remove from page" — use Static/Live + Trash instead */
body.arrange-art .arrange-remove-dock {
  display: none !important;
}

/* Simple Trash control — short label, never clipped */
body.arrange-art .arrange-trash-dock,
body.arrange-art .arrange-tray-trash .arrange-trash-dock {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 4.75rem !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  height: 2.35rem !important;
  padding: 0 1.1rem !important;
}
body.arrange-art .arrange-trash-dock-text {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
body.arrange-art .arrange-sausage-seg.arrange-tray-trash {
  flex: 0 1 auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}
body.arrange-art .arrange-removed-tray {
  overflow: visible !important;
}

/* Light-toggle art (Nixie green/white bulb) — Live seed on any page */
.segments-bg .seg-light-toggle {
  position: absolute;
  left: 84.7%;
  top: 3.7%;
  width: 190px;
  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;
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.segments-bg .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;
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: none !important;
  filter: none !important;
}
.segments-bg .seg-light-toggle .seg-light-img.is-green,
.segments-bg .seg-light-toggle .seg-light-img.is-white {
  position: absolute !important;
}
.segments-bg .seg-light-toggle .seg-light-img.is-active {
  opacity: 1;
}
body.arrange-art .segments-bg .seg-light-toggle {
  position: absolute !important;
  cursor: grab;
  outline: 1px dashed rgba(125, 255, 154, 0.45);
  pointer-events: auto !important;
}
body.arrange-art .segments-bg .seg-light-toggle:active {
  cursor: grabbing;
}


/* LIVE CLOCK UNIT DRAG — arrange mode */
body.arrange-art .segments-bg .seg-object.chrono-clock--live,
body.arrange-art .segments-bg .seg-object.chrono-clock,
body.arrange-art .segments-bg .seg-object.parts-clock,
body.arrange-art .segments-bg .seg-object[data-parts-clock],
body.arrange-art .segments-bg .seg-object[data-live-clock] {
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: none;
}
body.arrange-art .segments-bg .seg-object.chrono-clock--live *,
body.arrange-art .segments-bg .seg-object.chrono-clock *,
body.arrange-art .segments-bg .seg-object.parts-clock *,
body.arrange-art .segments-bg .seg-object[data-parts-clock] *,
body.arrange-art .segments-bg .seg-object[data-live-clock] * {
  pointer-events: none !important;
}

/* Live moon seed (glow/day toggle) — clickable on any page */
.segments-bg .seg-moon[data-moon-toggle] {
  pointer-events: auto !important;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  z-index: 40;
}
.segments-bg .seg-moon[data-moon-toggle] .seg-moon-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.segments-bg .seg-moon[data-moon-toggle] .seg-moon-img.is-day {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(200,215,235,0.38));
}
.segments-bg .seg-moon[data-moon-toggle] .seg-moon-img.is-glow {
  position: relative;
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(180,220,255,0.35));
}
.segments-bg .seg-moon[data-moon-toggle].is-day .seg-moon-img.is-glow { opacity: 0; }
.segments-bg .seg-moon[data-moon-toggle].is-day .seg-moon-img.is-day { opacity: 1; }



body[data-page="home"] .seg-moon[data-moon-toggle],
body[data-page="watches"] .seg-moon[data-moon-toggle] {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 60 !important;
  position: absolute !important;
}
body.bg-segments-test .seg-moon[data-moon-toggle] .seg-moon-img,
body.bg-segments-watches .seg-moon[data-moon-toggle] .seg-moon-img {
  pointer-events: none !important;
}


/* Scene moon toggle (existing art moon) — clickable for shoppers */
body.bg-segments-test .segments-bg .seg-moon[data-moon-toggle],
body.bg-segments-watches .segments-bg .seg-moon[data-moon-toggle] {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 40 !important;
  border: 0;
  padding: 0;
  background: transparent;
}
body.bg-segments-test .segments-bg .seg-moon[data-moon-toggle] .seg-moon-img,
body.bg-segments-watches .segments-bg .seg-moon[data-moon-toggle] .seg-moon-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none !important;
  transition: opacity 0.2s ease;
}
body.bg-segments-test .segments-bg .seg-moon[data-moon-toggle] .seg-moon-img.is-glow,
body.bg-segments-watches .segments-bg .seg-moon[data-moon-toggle] .seg-moon-img.is-glow {
  position: relative;
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(180,220,255,0.35));
}
body.bg-segments-test .segments-bg .seg-moon[data-moon-toggle] .seg-moon-img.is-day,
body.bg-segments-watches .segments-bg .seg-moon[data-moon-toggle] .seg-moon-img.is-day {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(200,215,235,0.38));
}
body.bg-segments-test .segments-bg .seg-moon[data-moon-toggle].is-day .seg-moon-img.is-glow,
body.bg-segments-watches .segments-bg .seg-moon[data-moon-toggle].is-day .seg-moon-img.is-glow { opacity: 0; }
body.bg-segments-test .segments-bg .seg-moon[data-moon-toggle].is-day .seg-moon-img.is-day,
body.bg-segments-watches .segments-bg .seg-moon[data-moon-toggle].is-day .seg-moon-img.is-day { opacity: 1; }

/* Let clicks pass through hero chrome onto the scene moon underneath */
body[data-page="home"] main > .hero,
body[data-page="watches"] main > .page-hero {
  pointer-events: none;
}
body[data-page="home"] main > .hero a,
body[data-page="home"] main > .hero button,
body[data-page="home"] main > .hero input,
body[data-page="home"] main > .hero .advanced-search,
body[data-page="watches"] main > .page-hero a,
body[data-page="watches"] main > .page-hero button,
body[data-page="watches"] main > .page-hero input,
body[data-page="watches"] main > .page-hero .advanced-search,
body[data-page="watches"] main > .page-hero .browse-hubs,
body[data-page="watches"] main > .page-hero details {
  pointer-events: auto;
}


/* Shopper: don't let main steal clicks over the scene moon */
body[data-page="home"] > main,
body[data-page="watches"] > main {
  pointer-events: none;
}
body[data-page="home"] > main .section,
body[data-page="watches"] > main .section,
body[data-page="home"] > main .hero a,
body[data-page="home"] > main .hero button,
body[data-page="home"] > main .hero input,
body[data-page="watches"] > main .page-hero a,
body[data-page="watches"] > main .page-hero button,
body[data-page="watches"] > main .page-hero input,
body[data-page="watches"] > main .page-hero .browse-hubs,
body[data-page="watches"] > main .page-hero details,
body[data-page="watches"] > main .page-hero .advanced-search,
body[data-page="watches"] > main .page-hero .glow-excite-strip {
  pointer-events: auto;
}


/* 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);
  }
}

/* Extra gap from moon (Home / Watches) */
body[data-page="home"] .seg-moon[data-moon-toggle] .glow-toggle-hint,
body[data-page="watches"] .seg-moon[data-moon-toggle] .glow-toggle-hint {
  right: calc(100% + 2.1rem);
}

/* SEARCH ALWAYS CLICKABLE — header search above moon/bulb/hint/art */
body.bg-segments-test > .site-header,
body.bg-segments-watches > .site-header,
body.bg-segments-nixie > .site-header,
body.bg-segments-kits > .site-header {
  z-index: 200 !important;
  pointer-events: auto !important;
}
.site-header .nav,
.site-header .brand,
.site-header .nav-links,
.site-header .site-search,
.site-header .site-search-form,
.site-header .site-search-input,
.site-header .site-search-btn,
.site-header .site-search-dropdown {
  pointer-events: auto !important;
}
.site-header .site-search {
  position: relative;
  z-index: 5;
}
/* Art-in-front / Art-only: keep search usable */
body.arrange-art.arrange-art-front > .site-header .site-search,
body.arrange-art.arrange-art-front > .site-header .site-search *,
body.arrange-art.arrange-view-art > .site-header .site-search,
body.arrange-art.arrange-view-art > .site-header .site-search * {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Shopper: lights text label should not steal clicks from search (moon/bulb still toggle) */
body:not(.arrange-art) .segments-bg .glow-toggle-hint {
  pointer-events: none !important;
}
body.arrange-art .segments-bg .glow-toggle-hint {
  pointer-events: auto !important;
}

/* Phone arrange: slim bar — only UI in front + Art only, docked beside Shopper/Editing */
body.phone-edit-minimal.arrange-art > .arrange-bar.arrange-bar-phone-minimal,
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: auto;
  max-width: none;
  height: auto !important;
  min-height: 0;
  padding: 6px 8px;
  margin: 0;
  z-index: 10050;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal .arrange-top,
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal .arrange-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}
/* Sit to the right of the Shopper/Editing pill in admin-top */
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal {
  top: 6px;
  left: 168px; /* approx after mode-switch pill */
}
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal .arrange-tabs,
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal .arrange-hint,
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal .arrange-removed-tray,
html[data-art-profile="phone"] body.arrange-art > .arrange-bar.arrange-bar-phone-minimal .arrange-palette {
  display: none !important;
}
html[data-art-profile="phone"] body.arrange-art.arrange-view-art > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-both > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-store > .admin-top {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10060;
}

/* ===== PHONE EDIT: only Shopper|Editing + UI in front + Art only ===== */
html[data-art-profile="phone"] body.arrange-art > .arrange-bar,
html[data-art-profile="phone"] body.arrange-art .arrange-bar,
html[data-art-profile="phone"] body.arrange-art .arrange-removed-tray,
html[data-art-profile="phone"] body.arrange-art .arrange-removed-mini,
html[data-art-profile="phone"] body.arrange-art .arrange-hint,
html[data-art-profile="phone"] body.arrange-art .arrange-tabs,
html[data-art-profile="phone"] body.arrange-art .arrange-palette,
html[data-art-profile="phone"] body.arrange-art [data-art-trash-dock],
html[data-art-profile="phone"] body.arrange-art .art-xform-dock {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
html[data-art-profile="phone"] body.arrange-art > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-art > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-both > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-store > .admin-top {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10060 !important;
  pointer-events: auto !important;
}
html[data-art-profile="phone"] body.arrange-art .admin-top .btn-admin-link,
html[data-art-profile="phone"] body.arrange-art .admin-top .admin-hidden-count,
html[data-art-profile="phone"] body.arrange-art .footer-admin {
  display: none !important;
}
html[data-art-profile="phone"] body.arrange-art .admin-top-phone-minimal {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
html[data-art-profile="phone"] body.arrange-art .phone-view-group {
  display: inline-flex !important;
  gap: 0;
  margin: 0;
  pointer-events: auto;
}
html[data-art-profile="phone"] body.arrange-art .phone-view-btn {
  font: inherit;
  font-size: 11px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 255, 154, 0.45);
  background: rgba(0, 0, 0, 0.55);
  color: #dfe6f0;
  cursor: pointer;
  border-radius: 999px;
}
html[data-art-profile="phone"] body.arrange-art .phone-view-btn + .phone-view-btn {
  margin-left: 4px;
}
html[data-art-profile="phone"] body.arrange-art .phone-view-btn.is-active-view {
  background: rgba(125, 255, 154, 0.28);
  border-color: rgba(125, 255, 154, 0.9);
  color: #7dff9a;
}
/* Free vertical space for art — chrome is one short row */
html[data-art-profile="phone"] body.arrange-art {
  --arrange-chrome-h: 2.5rem !important;
}

/* ===== PHONE SLIM v2 — nuke all arrange chrome except top 4 controls ===== */
html[data-art-profile="phone"] body.arrange-art .arrange-bar,
html[data-art-profile="phone"] body.arrange-art .arrange-bar.arrange-bar-rich,
html[data-art-profile="phone"] body.arrange-art.arrange-view-art > .arrange-bar,
html[data-art-profile="phone"] body.arrange-art.arrange-view-both > .arrange-bar,
html[data-art-profile="phone"] body.arrange-art.arrange-view-store > .arrange-bar,
html[data-art-profile="phone"] body.phone-edit-minimal.arrange-art .arrange-bar,
html[data-art-profile="phone"] body.arrange-art .arrange-removed-tray,
html[data-art-profile="phone"] body.arrange-art .arrange-removed-mini,
html[data-art-profile="phone"] body.arrange-art .arrange-hint,
html[data-art-profile="phone"] body.arrange-art .arrange-tabs,
html[data-art-profile="phone"] body.arrange-art .arrange-palette,
html[data-art-profile="phone"] body.arrange-art .arrange-actions,
html[data-art-profile="phone"] body.arrange-art .art-xform-dock,
html[data-art-profile="phone"] body.arrange-art [data-art-trash-dock],
html[data-art-profile="phone"] body.arrange-art #footer-admin,
html[data-art-profile="phone"] body.arrange-art .footer-admin,
html[data-art-profile="phone"] body.arrange-art .admin-top .btn-admin-link,
html[data-art-profile="phone"] body.arrange-art .admin-top .admin-hidden-count {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html[data-art-profile="phone"] body.arrange-art > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-art > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-both > .admin-top,
html[data-art-profile="phone"] body.arrange-art.arrange-view-store > .admin-top,
html[data-art-profile="phone"] body.phone-edit-minimal.arrange-art > .admin-top {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 10080 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(8, 28, 18, 0.96) !important;
}
html[data-art-profile="phone"] body.arrange-art .admin-top-phone-minimal {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
}
html[data-art-profile="phone"] body.arrange-art .phone-view-group {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
}
html[data-art-profile="phone"] body.arrange-art {
  --arrange-chrome-h: 2.75rem !important;
  --admin-top-h: 2.75rem !important;
  padding-top: 2.75rem !important;
}