/* ==========================================================================
   XNB Virtual Try-On — Frontend Styles  v1.2.0
   Four themes: inherit | light | dark | professional
   All theme tokens are CSS custom properties scoped to [data-xnb-theme].
   The .xnb-tryon-modal wrapper inherits the correct token set automatically.
   ========================================================================== */

/* ── Reset inside modal only ──────────────────────────────────────── */
.xnb-tryon-modal *,
.xnb-tryon-modal *::before,
.xnb-tryon-modal *::after {
  box-sizing: border-box;
}
.xnb-tryon-modal {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════════════════
   THEME TOKENS
   Applied to [data-xnb-theme] on both the entry div and the modal.
   ══════════════════════════════════════════════════════════════════════ */

/* ── INHERIT — uses WooCommerce / active theme variables ─────────── */
[data-xnb-theme="inherit"] {
  --xnb-font:            inherit;
  --xnb-bg:              var(--color-background, #fff);
  --xnb-bg-alt:          var(--color-background-alt, #f5f5f5);
  --xnb-bg-card:         var(--color-background, #fff);
  --xnb-border:          var(--color-border, rgba(0,0,0,0.12));
  --xnb-text:            var(--color-text, currentColor);
  --xnb-text-muted:      var(--color-text-muted, #555);
  --xnb-text-faint:      var(--color-text-subtle, #888);
  --xnb-accent:          var(--color-primary, #2271b1);
  --xnb-accent-hover:    var(--color-primary-darker, #135e96);
  --xnb-accent-bg:       var(--color-primary-background, rgba(34,113,177,0.08));
  --xnb-sel-border:      var(--color-primary, #2271b1);
  --xnb-sel-glow:        0 0 0 3px rgba(34,113,177,0.18);
  --xnb-success:         var(--color-success, #00a32a);
  --xnb-danger:          var(--color-error, #d63638);
  --xnb-shadow-modal:    0 20px 60px rgba(0,0,0,0.18), 0 4px 20px rgba(0,0,0,0.10);
  --xnb-backdrop:        rgba(0,0,0,0.5);
  --xnb-radius:          12px;
  --xnb-radius-sm:       8px;
  --xnb-radius-xs:       6px;
  --xnb-transition:      0.18s ease;
}

/* ── LIGHT — clean white, blue accent ────────────────────────────── */
[data-xnb-theme="light"] {
  --xnb-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --xnb-bg:              #ffffff;
  --xnb-bg-alt:          #f7f8fa;
  --xnb-bg-card:         #ffffff;
  --xnb-border:          rgba(0,0,0,0.10);
  --xnb-text:            #0f0f0f;
  --xnb-text-muted:      #4a4a4a;
  --xnb-text-faint:      #8c8c8c;
  --xnb-accent:          #2271b1;
  --xnb-accent-hover:    #135e96;
  --xnb-accent-bg:       rgba(34,113,177,0.07);
  --xnb-sel-border:      #2271b1;
  --xnb-sel-glow:        0 0 0 3px rgba(34,113,177,0.16);
  --xnb-success:         #00a32a;
  --xnb-danger:          #d63638;
  --xnb-shadow-modal:    0 24px 64px rgba(0,0,0,0.14), 0 4px 20px rgba(0,0,0,0.08);
  --xnb-backdrop:        rgba(0,0,0,0.52);
  --xnb-radius:          16px;
  --xnb-radius-sm:       10px;
  --xnb-radius-xs:       6px;
  --xnb-transition:      0.18s ease;
}

/* ── DARK — near-black surface ────────────────────────────────────── */
[data-xnb-theme="dark"] {
  --xnb-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --xnb-bg:              #141414;
  --xnb-bg-alt:          #1e1e1e;
  --xnb-bg-card:         #1c1c1c;
  --xnb-border:          rgba(255,255,255,0.09);
  --xnb-text:            #efefef;
  --xnb-text-muted:      #a0a0a0;
  --xnb-text-faint:      #606060;
  --xnb-accent:          #5da5f5;
  --xnb-accent-hover:    #7bbcff;
  --xnb-accent-bg:       rgba(93,165,245,0.12);
  --xnb-sel-border:      #5da5f5;
  --xnb-sel-glow:        0 0 0 3px rgba(93,165,245,0.22);
  --xnb-success:         #34c759;
  --xnb-danger:          #ff453a;
  --xnb-shadow-modal:    0 28px 80px rgba(0,0,0,0.72), 0 4px 20px rgba(0,0,0,0.50);
  --xnb-backdrop:        rgba(0,0,0,0.78);
  --xnb-radius:          16px;
  --xnb-radius-sm:       10px;
  --xnb-radius-xs:       6px;
  --xnb-transition:      0.18s ease;
}

/* ── PROFESSIONAL — luxury gold/champagne palette ─────────────────── */
[data-xnb-theme="professional"] {
  --xnb-font:            'Inter', Georgia, 'Times New Roman', serif;
  --xnb-bg:              #0e0e0e;
  --xnb-bg-alt:          #161616;
  --xnb-bg-card:         #141414;
  --xnb-border:          rgba(196,168,120,0.20);
  --xnb-text:            #f0ece4;
  --xnb-text-muted:      #b5a98a;
  --xnb-text-faint:      #6b6050;
  --xnb-accent:          #c4a878;        /* warm champagne gold */
  --xnb-accent-hover:    #d4bc92;
  --xnb-accent-bg:       rgba(196,168,120,0.10);
  --xnb-sel-border:      #c4a878;
  --xnb-sel-glow:        0 0 0 3px rgba(196,168,120,0.22);
  --xnb-success:         #7ecfa0;
  --xnb-danger:          #e07070;
  --xnb-shadow-modal:    0 32px 96px rgba(0,0,0,0.88), 0 0 0 1px rgba(196,168,120,0.14);
  --xnb-backdrop:        rgba(0,0,0,0.86);
  --xnb-radius:          4px;             /* sharp corners = high-fashion */
  --xnb-radius-sm:       4px;
  --xnb-radius-xs:       2px;
  --xnb-transition:      0.22s ease;
}

/* ══════════════════════════════════════════════════════════════════════
   ENTRY BUTTON (outside modal — scoped to .xnb-tryon-entry)
   ══════════════════════════════════════════════════════════════════════ */

.xnb-tryon-entry {
  margin: 14px 0 0;
  font-family: var(--xnb-font);
}

.xnb-tryon-open {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-family: var(--xnb-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: opacity var(--xnb-transition), transform var(--xnb-transition) !important;
}
.xnb-tryon-open:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Professional theme: gold border button */
[data-xnb-theme="professional"] .xnb-tryon-open {
  background: transparent !important;
  border: 1px solid var(--xnb-accent) !important;
  color: var(--xnb-accent) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px !important;
}
[data-xnb-theme="professional"] .xnb-tryon-open:hover {
  background: var(--xnb-accent-bg) !important;
}

.xnb-btn-icon {
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLL LOCK
   ══════════════════════════════════════════════════════════════════════ */
html.xnb-tryon-lock,
html.xnb-tryon-lock body {
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL SHELL
   ══════════════════════════════════════════════════════════════════════ */

.xnb-tryon-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  overflow: hidden;
  font-family: var(--xnb-font, inherit);
}
.xnb-tryon-modal[aria-hidden="false"] { display: block; }

.xnb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--xnb-backdrop);
  cursor: pointer;
}
/* Blur backdrop on themes that support it (not inherit — may affect site elements) */
[data-xnb-theme="light"] .xnb-modal-backdrop,
[data-xnb-theme="dark"] .xnb-modal-backdrop,
[data-xnb-theme="professional"] .xnb-modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.xnb-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 48px);
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  background: var(--xnb-bg);
  color: var(--xnb-text);
  border-radius: var(--xnb-radius);
  box-shadow: var(--xnb-shadow-modal);
  overflow: hidden;
  animation: xnbDialogIn 0.24s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

/* Professional: slim gold border */
[data-xnb-theme="professional"] .xnb-modal-dialog {
  border: 1px solid rgba(196,168,120,0.22);
}

@keyframes xnbDialogIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Close button */
.xnb-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--xnb-bg-alt);
  color: var(--xnb-text-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--xnb-transition), color var(--xnb-transition);
  flex-shrink: 0;
}
.xnb-modal-close:hover { background: var(--xnb-border); color: var(--xnb-text); }

[data-xnb-theme="professional"] .xnb-modal-close {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--xnb-border);
}

/* Scrollable body */
.xnb-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 22px 26px;
  color: var(--xnb-text);
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL HEADER
   ══════════════════════════════════════════════════════════════════════ */

.xnb-modal-head {
  padding-right: 44px;
  margin-bottom: 18px;
}

.xnb-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--xnb-accent-bg);
  color: var(--xnb-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

[data-xnb-theme="professional"] .xnb-product-badge {
  border-radius: 0;
  border: 1px solid var(--xnb-accent);
  background: transparent;
  letter-spacing: 0.12em;
  font-size: 10px;
}

.xnb-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--xnb-text);
  line-height: 1.2;
  margin: 0 0 4px;
  font-family: var(--xnb-font);
}

[data-xnb-theme="professional"] .xnb-modal-title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xnb-modal-sub {
  color: var(--xnb-text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   GRID LAYOUT
   ══════════════════════════════════════════════════════════════════════ */

.xnb-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════ */

.xnb-card {
  background: var(--xnb-bg-card);
  border: 1px solid var(--xnb-border);
  border-radius: var(--xnb-radius);
  padding: 16px;
}

[data-xnb-theme="professional"] .xnb-card {
  border-color: rgba(196,168,120,0.15);
}

.xnb-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--xnb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}

[data-xnb-theme="professional"] .xnb-label {
  color: var(--xnb-accent);
  letter-spacing: 0.14em;
  font-size: 10px;
}

.xnb-hint {
  color: var(--xnb-text-faint);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════
   FILE INPUT
   ══════════════════════════════════════════════════════════════════════ */

.xnb-file-input {
  display: block;
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px dashed var(--xnb-border);
  border-radius: var(--xnb-radius-sm);
  background: var(--xnb-bg-alt);
  color: var(--xnb-text);
  cursor: pointer;
  box-sizing: border-box;
  font-family: var(--xnb-font);
  transition: border-color var(--xnb-transition);
}
.xnb-file-input:hover { border-color: var(--xnb-accent); }

/* ══════════════════════════════════════════════════════════════════════
   PORTRAIT PREVIEW
   ══════════════════════════════════════════════════════════════════════ */

.xnb-portrait-preview {
  margin-top: 10px;
  border: 1px solid var(--xnb-border);
  border-radius: var(--xnb-radius-sm);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--xnb-bg-alt);
}
.xnb-portrait-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
}
.xnb-portrait-placeholder {
  color: var(--xnb-text-faint);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   CAMERA
   ══════════════════════════════════════════════════════════════════════ */

.xnb-camera-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.xnb-camera-label { font-size: 12px; color: var(--xnb-text-muted); }
.xnb-camera-select {
  height: 32px;
  border-radius: var(--xnb-radius-xs);
  border: 1px solid var(--xnb-border);
  background: var(--xnb-bg);
  color: var(--xnb-text);
  font-size: 12px;
  padding: 0 8px;
  font-family: var(--xnb-font);
  cursor: pointer;
}
.xnb-mirror-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--xnb-text-muted);
  cursor: pointer;
  user-select: none;
}
.xnb-camera-box {
  margin-top: 10px;
  border: 1px solid var(--xnb-border);
  border-radius: var(--xnb-radius-sm);
  overflow: hidden;
  background: #000;
}
.xnb-camera-video {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  display: block;
}
.xnb-camera-video.is-mirrored { transform: scaleX(-1); }
.xnb-camera-canvas            { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   CROP BOX
   ══════════════════════════════════════════════════════════════════════ */

.xnb-crop-box {
  margin-top: 12px;
  border: 1px solid var(--xnb-border);
  border-radius: var(--xnb-radius-sm);
  background: var(--xnb-bg-alt);
  padding: 12px;
  animation: xnbFadeIn 0.2s ease both;
}
.xnb-crop-hint { font-size: 12px; color: var(--xnb-text-muted); margin-bottom: 10px; line-height: 1.5; }
.xnb-crop-img-wrap { max-height: 280px; overflow: hidden; border-radius: var(--xnb-radius-xs); background: #000; }
.xnb-crop-img-wrap img { display: block; max-width: 100%; }
.xnb-crop-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Cropper theme overrides */
.cropper-line, .cropper-point { background-color: var(--xnb-accent) !important; }
.cropper-dashed { border-color: rgba(196,168,120,0.5) !important; }
[data-xnb-theme="dark"] .cropper-dashed,
[data-xnb-theme="light"] .cropper-dashed { border-color: rgba(34,113,177,0.5) !important; }

/* ══════════════════════════════════════════════════════════════════════
   REFERENCE THUMBNAILS
   ══════════════════════════════════════════════════════════════════════ */

.xnb-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.xnb-ref-btn {
  position: relative;
  border: 2px solid var(--xnb-border);
  border-radius: var(--xnb-radius-sm);
  padding: 0;
  background: var(--xnb-bg-alt);
  cursor: pointer;
  overflow: hidden;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--xnb-transition), box-shadow var(--xnb-transition), transform var(--xnb-transition);
}
.xnb-ref-btn:hover { border-color: var(--xnb-accent); transform: translateY(-2px); }
.xnb-ref-btn[aria-pressed="true"] {
  border-color: var(--xnb-sel-border);
  box-shadow: var(--xnb-sel-glow);
}
.xnb-ref-btn[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  top: 3px; right: 4px;
  background: var(--xnb-accent);
  color: var(--xnb-bg);
  border-radius: 50%;
  width: 16px; height: 16px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}
.xnb-ref-btn img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Variation badge */
.xnb-ref-btn--variation { border-color: var(--xnb-accent) !important; }
.xnb-var-badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 9px; font-weight: 700;
  text-align: center; padding: 2px 0;
  letter-spacing: 0.3px; text-transform: uppercase;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   CONSENT
   ══════════════════════════════════════════════════════════════════════ */

.xnb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  background: var(--xnb-bg-alt);
  border: 1px solid var(--xnb-border);
  padding: 10px 12px;
  border-radius: var(--xnb-radius-sm);
  cursor: pointer;
}
.xnb-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px; height: 15px;
  accent-color: var(--xnb-accent);
  cursor: pointer;
}
.xnb-consent span { font-size: 12px; color: var(--xnb-text-muted); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   ACTION ROW
   ══════════════════════════════════════════════════════════════════════ */

.xnb-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.xnb-btn-generate {
  font-family: var(--xnb-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: opacity var(--xnb-transition), transform var(--xnb-transition) !important;
  flex-shrink: 0;
}
.xnb-btn-generate:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.xnb-btn-generate:not(:disabled):hover { transform: translateY(-1px); }

/* Professional generate button */
[data-xnb-theme="professional"] .xnb-btn-generate {
  background: var(--xnb-accent) !important;
  color: #0e0e0e !important;
  border: none !important;
  border-radius: 0 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 10px 22px !important;
}

.xnb-status {
  font-size: 12px;
  color: var(--xnb-text-muted);
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.xnb-status.is-error { color: var(--xnb-danger); }

/* Small utility buttons */
.xnb-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-family: var(--xnb-font);
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--xnb-radius-xs);
  border: 1px solid var(--xnb-border);
  background: var(--xnb-bg);
  color: var(--xnb-text-muted);
  cursor: pointer;
  transition: background var(--xnb-transition), border-color var(--xnb-transition), color var(--xnb-transition);
  white-space: nowrap;
}
.xnb-btn-sm:hover { background: var(--xnb-bg-alt); border-color: var(--xnb-accent); color: var(--xnb-accent); }
[data-xnb-theme="professional"] .xnb-btn-sm { border-radius: 0; letter-spacing: 0.05em; }

/* ══════════════════════════════════════════════════════════════════════
   OUTPUT PANEL
   ══════════════════════════════════════════════════════════════════════ */

.xnb-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.xnb-output {
  min-height: 300px;
  border: 1px solid var(--xnb-border);
  border-radius: var(--xnb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--xnb-bg-alt);
  position: relative;
  transition: border-color var(--xnb-transition);
}
.xnb-output.has-result { border-color: var(--xnb-success); }
.xnb-output img {
  width: 100%; height: auto;
  display: block;
  animation: xnbFadeIn 0.35s ease both;
}
@keyframes xnbFadeIn {
  from { opacity: 0; transform: scale(0.99); }
  to   { opacity: 1; transform: scale(1); }
}
.xnb-output-empty {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  color: var(--xnb-text-faint);
  font-size: 13px; padding: 28px;
  text-align: center;
}
.xnb-output-empty-icon { font-size: 38px; opacity: 0.35; }

/* Spinner */
.xnb-spinner {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  color: var(--xnb-text-muted);
  font-size: 13px; padding: 28px;
}
.xnb-spinner-ring {
  width: 40px; height: 40px;
  border: 3px solid var(--xnb-border);
  border-top-color: var(--xnb-accent);
  border-radius: 50%;
  animation: xnbSpin 0.75s linear infinite;
}
@keyframes xnbSpin { to { transform: rotate(360deg); } }

/* Result action bar */
.xnb-result-actions {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px;
  margin-top: 10px;
}
.xnb-btn-download, .xnb-btn-share {
  display: none !important;
  align-items: center;
  gap: 6px;
  font-family: var(--xnb-font) !important;
  font-size: 13px !important;
}
.xnb-btn-download.is-visible, .xnb-btn-share.is-visible { display: inline-flex !important; }

.xnb-powered {
  margin-top: 10px;
  font-size: 11px;
  color: var(--xnb-text-faint);
  text-align: center;
  font-family: var(--xnb-font);
}
[data-xnb-theme="professional"] .xnb-powered { letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   BEFORE / AFTER COMPARISON SLIDER
   ══════════════════════════════════════════════════════════════════════ */

.xnb-output.is-compare { display: block; padding: 0; overflow: hidden; }

.xnb-compare-wrap {
  position: relative;
  width: 100%; min-height: 240px; max-height: 420px;
  overflow: hidden;
  border-radius: var(--xnb-radius-sm);
  background: #000;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}
.xnb-compare-before,
.xnb-compare-after {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.xnb-compare-before { z-index: 1; }
.xnb-compare-after  { z-index: 2; clip-path: inset(0 0 0 50%); }

.xnb-compare-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%; z-index: 3;
  transform: translateX(-50%);
  width: 3px;
  background: rgba(255,255,255,0.9);
  cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
}
.xnb-compare-handle:focus { outline: 2px solid var(--xnb-accent); outline-offset: 2px; }

.xnb-compare-knob {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  gap: 2px; color: #555; flex-shrink: 0;
}
[data-xnb-theme="professional"] .xnb-compare-knob {
  border-radius: 0;
  background: var(--xnb-accent);
  color: #0e0e0e;
}

.xnb-compare-label {
  position: absolute; bottom: 10px; z-index: 4;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; pointer-events: none;
  letter-spacing: 0.5px; text-transform: uppercase;
}
[data-xnb-theme="professional"] .xnb-compare-label {
  background: rgba(196,168,120,0.85); color: #0e0e0e;
  font-size: 9px; letter-spacing: 0.12em;
}
.xnb-compare-label-before { left: 10px; border-radius: 20px; }
.xnb-compare-label-after  { right: 10px; border-radius: 20px; }
[data-xnb-theme="professional"] .xnb-compare-label-before,
[data-xnb-theme="professional"] .xnb-compare-label-after { border-radius: 0; }

.xnb-compare-hint {
  font-size: 11px; color: var(--xnb-text-faint);
  text-align: center; margin: 7px 0 0;
  font-family: var(--xnb-font);
}

/* ══════════════════════════════════════════════════════════════════════
   SESSION GALLERY
   ══════════════════════════════════════════════════════════════════════ */

.xnb-gallery-wrap { margin-top: 6px; }
.xnb-gallery {
  display: flex; gap: 8px;
  flex-wrap: nowrap; overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--xnb-border) transparent;
}
.xnb-gallery::-webkit-scrollbar        { height: 4px; }
.xnb-gallery::-webkit-scrollbar-track  { background: transparent; }
.xnb-gallery::-webkit-scrollbar-thumb  { background: var(--xnb-border); border-radius: 4px; }

.xnb-gallery-item {
  position: relative; flex-shrink: 0;
  width: 66px; height: 66px;
  border-radius: var(--xnb-radius-sm);
  overflow: hidden;
  border: 2px solid var(--xnb-border);
  cursor: pointer;
  transition: border-color var(--xnb-transition), transform var(--xnb-transition);
  background: var(--xnb-bg-alt);
}
.xnb-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.xnb-gallery-item:hover { border-color: var(--xnb-accent); transform: translateY(-2px); }
.xnb-gallery-item.is-current {
  border-color: var(--xnb-success);
  box-shadow: 0 0 0 2px rgba(0,163,42,0.15);
}
.xnb-gallery-badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,163,42,0.82); color: #fff;
  font-size: 9px; font-weight: 700;
  text-align: center; padding: 2px 0;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.xnb-gallery-empty { color: var(--xnb-text-faint); font-size: 12px; padding: 10px 0; }

/* ══════════════════════════════════════════════════════════════════════
   CONVERSION BADGE (outside modal, on product page)
   ══════════════════════════════════════════════════════════════════════ */

.xnb-conv-badge {
  display: inline-block;
  margin-top: 8px;
  background: rgba(0,163,42,0.08);
  border: 1px solid rgba(0,163,42,0.22);
  color: #006b1f;
  font-size: 12px; font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  animation: xnbFadeIn 0.3s ease both;
  z-index: 10; position: relative;
}
[data-xnb-theme="professional"] .xnb-conv-badge {
  border-radius: 0;
  border-color: var(--xnb-success);
  color: var(--xnb-success);
  background: transparent;
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .xnb-grid { grid-template-columns: 1fr; }
  .xnb-output { min-height: 240px; }
}

@media (max-width: 720px) {
  .xnb-modal-dialog {
    width: calc(100% - 16px);
    margin: 8px auto;
    max-height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    border-radius: min(var(--xnb-radius), 12px);
  }
  .xnb-modal-body { padding: 14px 14px 18px; }
  .xnb-compare-wrap { min-height: 200px; max-height: 320px; }
  .xnb-crop-img-wrap { max-height: 220px; }
}

@media (max-width: 480px) {
  .xnb-camera-row { gap: 6px; }
  .xnb-gallery-item { width: 56px; height: 56px; }
  .xnb-crop-actions .button { flex: 1; justify-content: center; text-align: center; }
}