/* DJ Explorer – מרכז הסאונד
   Layout: a single dark "booth" block – header with tabs, stage, spec rail.
   Committed dark look (DJ gear), independent of the host theme. */
.djx {
  --djx-bg: #101114;
  --djx-panel: #17191d;
  --djx-line: #2a2d33;
  --djx-fg: #eceef2;
  --djx-mute: #8b909a;
  --djx-amber: #ffb23b;
  --djx-ice: #6fb6ff;
  --djx-ui: "Heebo", "Assistant", "Segoe UI", Arial, sans-serif;
  --djx-hw: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  color-scheme: dark;
  position: relative;
  background: radial-gradient(120% 80% at 50% 0%, #1b1d22 0%, var(--djx-bg) 60%);
  color: var(--djx-fg);
  font-family: var(--djx-ui);
  border-radius: 18px;
  border: 1px solid #23262c;
  overflow: hidden;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  max-width: 1180px;
  margin: 0 auto 28px;
  box-sizing: border-box;
}
.djx *, .djx *::before, .djx *::after { box-sizing: border-box; }
.djx:fullscreen { border-radius: 0; max-width: none; overflow: auto; }
.djx button { font-family: inherit; cursor: pointer; }
.djx :focus-visible { outline: 2px solid var(--djx-amber); outline-offset: 2px; }

/* header */
.djx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px 14px; border-bottom: 1px solid var(--djx-line); }
.djx-title { display: grid; gap: 0; min-width: 0; }
.djx-fam { font: 600 11px/1 var(--djx-hw); letter-spacing: .22em; text-transform: uppercase; color: var(--djx-mute); direction: ltr; text-align: right; }
.djx-name { margin: 2px 0 0 !important; font: 700 34px/1.05 var(--djx-hw) !important; letter-spacing: .02em; color: var(--djx-fg) !important; direction: ltr; text-align: right; }
.djx-tag { font-size: 13px; color: var(--djx-mute); }
.djx-tabs { display: flex; gap: 6px; background: #0b0c0e; padding: 5px; border-radius: 12px; border: 1px solid var(--djx-line); }
.djx-tab { display: grid; justify-items: center; gap: 0; min-width: 86px; padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--djx-mute); transition: background .15s, color .15s; }
.djx-tab b { font-size: 15px; font-weight: 700; line-height: 1.2; }
.djx-tab small { font-size: 11px; }
.djx-tab:hover { color: var(--djx-fg); }
.djx-tab[aria-selected="true"] { background: var(--djx-amber); color: #17130a; }

/* model rail */
.djx-models { border-bottom: 1px solid var(--djx-line); background: #0c0d10; }
.djx-rail { display: flex; gap: 18px; overflow-x: auto; padding: 10px 18px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.djx-rgroup { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.djx-rlabel { font-size: 11.5px; color: var(--djx-mute); white-space: nowrap; margin-left: 2px; }
.djx-mchip { flex: 0 0 auto; border: 1px solid var(--djx-line); background: #15171b; color: #c9ccd3; font: 700 13px/1 var(--djx-hw); letter-spacing: .04em; padding: 7px 11px; border-radius: 8px; scroll-snap-align: center; }
.djx-mchip:hover { border-color: #4a4e57; color: var(--djx-fg); }
.djx-mchip.on { background: var(--djx-fg); color: #111216; border-color: var(--djx-fg); }

/* header side: buy + tabs */
.djx-headside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.djx-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--djx-amber); color: #17130a !important; text-decoration: none !important; border-radius: 12px; padding: 7px 8px 7px 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(255,178,59,.18); }
.djx-cta[hidden] { display: none; }
.djx-cta:hover { background: #ffc566; }
.djx-cta-price { display: grid; line-height: 1.05; }
.djx-cta-price b { font: 700 19px var(--djx-hw); direction: ltr; text-align: right; }
.djx-cta-price s { font-size: 11.5px; font-weight: 600; opacity: .65; direction: ltr; text-align: right; }
.djx-cta-btn { background: #17130a; color: var(--djx-amber); border-radius: 8px; padding: 7px 12px; font-size: 14px; white-space: nowrap; }

/* stage + views */
.djx-stage { position: relative; }
.djx-view { display: none; }
.djx[data-mode="spin"] .djx-spin { display: block; }
.djx[data-mode="tour"] .djx-panel, .djx[data-mode="dj"] .djx-panel { display: block; }
.djx-panel { position: relative; padding: 12px 14px 18px; }

/* chips & bars */
.djx-bar { display: none; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.djx[data-mode="tour"] .djx-tourbar, .djx[data-mode="dj"] .djx-djbar { display: flex; }
.djx-chip { border: 1px solid var(--djx-line); background: #1a1c21; color: var(--djx-fg); font-size: 13px; padding: 5px 12px; border-radius: 999px; line-height: 1.4; }
.djx-chip:hover { border-color: #474b54; }
.djx-chip.on { background: #f1f2f5; color: #121316; border-color: #f1f2f5; }
.djx-chip-strong { background: transparent; border-color: var(--djx-amber); color: var(--djx-amber); font-weight: 600; }
.djx-chip-strong:hover { background: var(--djx-amber); color: #17130a; }
.djx-zoom { display: none; gap: 4px; }
.djx-hint { font-size: 12px; color: var(--djx-mute); }

/* svg controller */
.djx-svgwrap { position: relative; }
.djx-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: none; }
.djx-svg.live { filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.djx[data-mode="dj"] .djx-strips { display: none; }
.djx-print { font: 600 10px var(--djx-hw); fill: #b9bdc6; letter-spacing: .06em; }
.djx-print.sub { font-size: 7.5px; fill: #7d828c; }
.djx-print.sub.xs { font-size: 6px; letter-spacing: 0; }
.djx-print.sec { font-size: 10px; fill: #8d929c; letter-spacing: .22em; }
.djx-print.model { font-size: 17px; fill: #d8dbe1; letter-spacing: .08em; font-weight: 700; }
.djx-print.tiny { font-size: 8px; fill: #6c717a; }
.djx-striplbl { font: 600 13px var(--djx-ui); fill: #8b909a; }
.djx-lbl { font: 700 9.5px var(--djx-hw); fill: #d6d9df; letter-spacing: .04em; pointer-events: none; }
.djx-lbl.sm { font-size: 7.6px; }
.djx-padtxt { font-size: 8px; fill: rgba(255,255,255,.75); }
.djx-ctl.dark-text .djx-lbl { fill: #121316; }
.djx-ctl.dark-text .djx-padtxt { fill: rgba(0,0,0,.7); }
.djx-arc { stroke: #000; stroke-opacity: .55; stroke-width: 2; }
.djx-ctl { cursor: pointer; outline: none; }
.djx-ctl .djx-btn-face, .djx-ctl .djx-pad-face { transition: fill .08s; }
.djx-ctl.lit .djx-btn-face { filter: url(#djxGlow); }
.djx-ctl.pressed { transform-box: fill-box; transform-origin: center; transform: scale(.96); }
.djx-ctl:focus-visible .djx-hit { stroke: var(--djx-amber); stroke-width: 2; }
.djx-touch { stroke: transparent; stroke-width: 3; }
.djx-ctl.touch .djx-touch { stroke: rgba(111,182,255,.6); }
.djx-hlg { pointer-events: none; }
.djx-ring { fill: none; stroke: var(--djx-amber); stroke-width: 3; animation: djxPulse 1.2s ease-in-out infinite; }
@keyframes djxPulse { 50% { stroke-opacity: .25; } }

/* tour mode */
.djx[data-mode="tour"] .djx-ctl .djx-hit { transition: fill .15s; }
.djx[data-mode="tour"] .djx-ctl:hover .djx-hit { fill: rgba(255,178,59,.16); }
.djx[data-mode="tour"] .djx-ctl.dim { opacity: .22; }
.djx[data-mode="tour"] .djx-meter, .djx[data-mode="tour"] .djx-jog { cursor: help; }

/* power overlay */
.djx-power { display: none; position: absolute; inset: 0; z-index: 5; place-items: center; background: rgba(10,11,13,.55); backdrop-filter: blur(2px); }
.djx[data-mode="dj"] .djx-power:not([hidden]) { display: grid; }
.djx-powerbtn { display: grid; justify-items: center; gap: 6px; background: #121418; border: 1px solid #33363d; color: var(--djx-fg); border-radius: 16px; padding: 22px 30px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.djx-powerbtn b { font-size: 18px; }
.djx-powerbtn small { color: var(--djx-mute); font-size: 12.5px; }
.djx-powerbtn:hover .djx-pwr-ico { box-shadow: 0 0 0 6px rgba(255,178,59,.15), 0 0 24px rgba(255,178,59,.6); }
.djx-pwr-ico { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--djx-amber); position: relative; transition: box-shadow .2s; }
.djx-pwr-ico::after { content: ""; position: absolute; left: 50%; top: -6px; width: 4px; height: 22px; margin-left: -2px; background: var(--djx-amber); border-radius: 2px; box-shadow: 0 0 0 4px #121418; }

/* software screen */
div.djx-screen { display: none; margin-bottom: 10px; border-radius: 10px; overflow: hidden; border: 1px solid #22252b; }
.djx[data-mode="dj"].djx-on div.djx-screen { display: block; }
.djx-cv { display: block; width: 100%; height: 168px; }

/* lesson */
.djx-lesson { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; background: #1f1a10; border: 1px solid #5b4720; }
.djx-lesson[hidden] { display: none !important; }
.djx[data-mode="tour"] .djx-lesson { display: none !important; }
.djx-l-prog { display: flex; gap: 4px; }
.djx-l-prog i { width: 18px; height: 4px; border-radius: 2px; background: #4a3c1f; }
.djx-l-prog i.done { background: var(--djx-amber); }
.djx-l-prog i.cur { background: #ffe0a8; }
.djx-l-txt { flex: 1 1 260px; min-width: 0; font-size: 14px; }
.djx-l-txt b { color: var(--djx-amber); margin-left: 6px; }
.djx-l-done { flex: 1; font-size: 14.5px; }
.djx-l-done b { color: var(--djx-amber); }
.djx-l-x { border: 1px solid #5b4720; background: transparent; color: #e8d3a6; border-radius: 8px; padding: 4px 10px; font-size: 12.5px; }

/* balloon */
.djx-balloon { position: absolute; z-index: 8; width: 330px; background: #f6f4ef; color: #17181b; border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45); --arrow: 50%; }
.djx-balloon[hidden] { display: none; }
.djx-balloon::after { content: ""; position: absolute; bottom: -7px; left: var(--arrow); width: 14px; height: 14px; margin-left: -7px; background: #f6f4ef; transform: rotate(45deg); }
.djx-balloon.below::after { bottom: auto; top: -7px; }
.djx-balloon.sheet { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto !important; max-height: 60vh; overflow: auto; }
.djx-balloon.sheet::after { display: none; }
.djx-b-top { display: flex; justify-content: space-between; align-items: center; }
.djx-b-sec { font-size: 11.5px; font-weight: 600; color: #8a6413; background: #fbeccd; border-radius: 99px; padding: 1px 9px; }
.djx-b-x { border: 0; background: none; font-size: 22px; line-height: 1; color: #666; padding: 0 4px; }
.djx-balloon h4 { margin: 8px 0 4px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 21px/1.15 var(--djx-hw) !important; color: #111 !important; letter-spacing: .02em; }
.djx-balloon h4 small { font: 600 14px var(--djx-ui); color: #5c5f66; letter-spacing: 0; }
.djx-balloon p { margin: 0 0 8px !important; font-size: 14px; line-height: 1.55; color: #2a2c30; }
.djx-b-shift { background: #eceae4; border-radius: 8px; padding: 6px 9px; }
.djx-b-shift b { font-family: var(--djx-hw); letter-spacing: .05em; margin-left: 4px; }
.djx-b-tip { border-right: 3px solid #e3a52c; padding-right: 9px; }
.djx-b-tip b { color: #8a6413; }
.djx-b-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e2dfd8; padding-top: 8px; margin-top: 4px; }
.djx-b-nav button { border: 0; background: none; color: #8a6413; font-weight: 600; font-size: 13px; padding: 2px 4px; }
.djx-b-nav span { font-size: 12px; color: #888; font-variant-numeric: tabular-nums; }

/* toast */
.djx-toast { position: absolute; z-index: 9; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 32px); background: #f1f2f5; color: #141518; font-size: 13.5px; padding: 8px 14px; border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.45); text-align: center; }
.djx-toast[hidden] { display: none; }

/* 360 */
.djx-spin { padding: 8px 14px 18px; }
.djx-spinview { position: relative; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 12px; }
.djx-spinview.grab { cursor: grabbing; }
.djx-frame { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; transition: transform .15s; pointer-events: none; }
.djx-scene { position: relative; perspective: 1500px; perspective-origin: 50% 35%; min-height: 200px; }
.djx-obj { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.djx-face { position: absolute; left: 0; top: 0; backface-visibility: hidden; background: #1a1c20; overflow: hidden; }
.djx-face .djx-svg { width: 100%; height: 100%; touch-action: auto; }
.djx-top { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.djx-left, .djx-right { background: linear-gradient(180deg, #24272c, #141518); }
.djx-bottom { background: #0d0e10; }
.djx-shadow { position: absolute; left: 50%; bottom: 6%; width: 64%; height: 46px; margin-left: -32%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(6px); pointer-events: none; }
.djx-spintools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; }
.djx-note { text-align: center; font-size: 12px; color: var(--djx-mute); margin: 8px 0 0 !important; }

/* store photos */
.djx-gallery { position: relative; }
.djx-gallery[hidden], .djx-3dview[hidden], .djx-3dtools[hidden] { display: none !important; }
.djx-gstage { position: relative; aspect-ratio: 16 / 9; max-height: 520px; width: 100%; max-width: 100%; border-radius: 12px; overflow: hidden; background: #f4f4f2; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.djx-gstage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease, transform .25s ease; pointer-events: none; }
.djx-gstage img.on { opacity: 1; }
.djx-gnav { position: absolute; top: calc(50% - 40px); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(16,17,20,.75); color: #fff; font-size: 26px; line-height: 38px; padding: 0; }
.djx-gnav[hidden] { display: none; }
.djx-gprev { right: 10px; } .djx-gnext { left: 10px; }
.djx-gthumbs { display: flex; gap: 6px; justify-content: center; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; }
.djx-gthumbs[hidden] { display: none; }
.djx-gthumb { flex: 0 0 auto; width: 58px; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #f4f4f2; overflow: hidden; opacity: .6; }
.djx-gthumb img { width: 100%; height: 100%; object-fit: contain; }
.djx-gthumb.on { border-color: var(--djx-amber); opacity: 1; }
.djx-srcswitch { display: inline-flex; gap: 4px; margin-left: 6px; }
.djx-3dtools { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.djx-schem { font-size: 11.5px; color: var(--djx-mute); margin-right: auto; }
.djx-scrtxt { font: 600 8px var(--djx-hw); fill: #9fb3cc; letter-spacing: .06em; }

/* footer */
.djx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px 18px; border-top: 1px solid var(--djx-line); background: #0d0e11; }
.djx-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; margin: 0; flex: 1 1 560px; min-width: 0; }
.djx-specs div { min-width: 0; }
.djx-specs dt { font-size: 11.5px; color: var(--djx-mute); }
.djx-specs dd { margin: 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.djx-buy { display: inline-block; background: var(--djx-amber); color: #17130a !important; text-decoration: none !important; font-weight: 700; font-size: 15px; padding: 10px 22px; border-radius: 10px; white-space: nowrap; }
.djx-buy:hover { background: #ffc566; }

.djx-buybox { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.djx-buybox[hidden] { display: none; }
.djx-price { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 10px; justify-items: start; }
.djx-price-now { font: 700 30px/1.1 var(--djx-hw); color: var(--djx-fg); font-variant-numeric: tabular-nums; direction: ltr; }
.djx-price-old { font-size: 15px; color: var(--djx-mute); font-variant-numeric: tabular-nums; direction: ltr; }
.djx-price-save { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--djx-amber); }
.djx-stock { grid-column: 1 / -1; font-size: 12px; color: #6fd48d; }
.djx-stock.out { color: #ff8a8a; }
.djx-stock.back { color: #ffd27a; }
.djx-hprice { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 4px; color: var(--djx-fg) !important; text-decoration: none !important; font-size: 13px; }
.djx-hprice[hidden] { display: none; }
.djx-hprice b { font: 700 18px var(--djx-hw); direction: ltr; }
.djx-hprice s { color: var(--djx-mute); direction: ltr; }
.djx-hprice span { color: var(--djx-amber); font-weight: 600; }
.djx-hprice:hover span { text-decoration: underline; }
.djx-credit { margin: 0 !important; padding: 10px 22px 12px; font-size: 11.5px; line-height: 1.5; color: var(--djx-mute); background: #0a0b0d; border-top: 1px solid #1c1e23; }
.djx-l-cta { display: inline-block; margin-top: 4px; color: var(--djx-amber) !important; font-weight: 700; text-decoration: none !important; }
.djx-l-cta:hover { text-decoration: underline !important; }

@media (max-width: 760px) {
  .djx-buybox { width: 100%; justify-content: space-between; }
  .djx-credit { padding: 10px 14px 12px; }
  .djx-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .djx-zoom { display: flex; }
  .djx-name { font-size: 28px !important; }
  .djx-head { padding: 14px 14px 12px; }
  .djx-tabs { width: 100%; }
  .djx-headside { width: 100%; }
  .djx-cta { width: 100%; justify-content: space-between; }
  .djx-rail { padding: 8px 12px; }
  .djx-tab { flex: 1; min-width: 0; padding: 6px 4px; }
  .djx-panel, .djx-spin { padding-left: 8px; padding-right: 8px; }
  .djx-foot { padding: 14px; }
  .djx-buy { flex: 1 1 160px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .djx-ring { animation: none; }
}