/* Virtual try-on: the product page's button and window, and the owner's editor (2026-11-03). Loaded only by those pages. */

/* ---------- Product page ---------- */
/* The store has no global [hidden] rule and buttons set their own display, so hidden parts are hidden here. */
.try-on-open[hidden], .try-on-dialog [hidden] { display: none !important; }
.try-on-open {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 2;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
[dir="ltr"] .try-on-open { transform: translateX(-50%); }

.try-on-dialog {
  width: 100%;
  max-width: 640px;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-xl);
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.try-on-dialog::backdrop { background: var(--overlay); }
@media (max-width: 640px) {
  .try-on-dialog { max-width: none; height: 100dvh; border-radius: 0; border: 0; }
}
.try-on-panel {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
}
.try-on-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.try-on-title { margin: 0; font-size: var(--fs-lg); }

/* The view takes the camera's own shape: upright on a phone, wide on a computer, never cut. */
.try-on-stage {
  position: relative;
  display: grid; place-items: center;
  min-height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #000;
}
/* The video is only the source; the canvas shows it mirrored with the glasses. Kept rendered (not display: none)
   because some phone browsers stop decoding a video that is not displayed. */
.try-on-stage video {
  position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none;
}
.try-on-stage canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 70dvh; }
.try-on-idle {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.55);
}
[data-state="searching"] .try-on-idle, [data-state="tracking"] .try-on-idle, [data-state="no-face"] .try-on-idle,
[data-state="multiple-faces"] .try-on-idle, [data-state="slow"] .try-on-idle,
[data-state="photo"] .try-on-idle, [data-state="photo-no-face"] .try-on-idle, [data-state="photo-faces"] .try-on-idle { display: none; }
.try-on-photo-pick { cursor: pointer; }
.try-on-photo-pick:focus-within { box-shadow: var(--focus-ring); }

.try-on-status { margin: 0; min-height: 1.7em; text-align: center; font-weight: 500; }
.try-on-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.try-on-actions .btn { min-height: 44px; }
.try-on-shot { display: grid; gap: var(--space-3); justify-items: center; }
.try-on-shot img { max-width: 100%; max-height: 50dvh; border-radius: var(--radius-lg); }
.try-on-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* ---------- Owner's editor ---------- */
.try-on-badge-live { color: var(--success); }
.try-on-thumb {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border);
}
.try-on-editor-grid { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .try-on-editor-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }

/* Points are placed in percentages of the picture, which reads left to right whatever the page direction. */
.try-on-canvas {
  position: relative;
  direction: ltr;
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e6e9ec 25%, transparent 25%), linear-gradient(-45deg, #e6e9ec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6e9ec 75%), linear-gradient(-45deg, transparent 75%, #e6e9ec 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  touch-action: none;
  user-select: none;
}
.try-on-canvas img { display: block; width: 100%; height: auto; pointer-events: none; }
.try-on-line {
  position: absolute; height: 2px; transform-origin: 0 50%;
  background: var(--primary); opacity: 0.7; pointer-events: none;
}
.try-on-handle {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-md);
  color: var(--on-primary);
  font: 700 12px/1 var(--font-family);
  cursor: grab;
  touch-action: none;
}
.try-on-handle[data-point="bridge"] { background: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.try-on-handle:active { cursor: grabbing; }
.try-on-handle:focus-visible { outline: 3px solid var(--focus-ring, var(--primary)); outline-offset: 3px; }

.try-on-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.try-on-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); vertical-align: middle; margin-inline-end: 4px; }
.try-on-dot.is-bridge { background: var(--accent); }
.try-on-slider { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; }
.try-on-slider input[type="range"] { grid-column: 1 / -1; width: 100%; }
.try-on-slider output { font-variant-numeric: tabular-nums; color: var(--muted); }
.try-on-camera .try-on-stage canvas { max-height: 55dvh; }

/* ChatGPT (OpenAI) clean-up of a frame photo (2026-11-10): before and after side by side, the owner accepts or rejects it. */
.try-on-ai { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.try-on-ai-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.try-on-ai .try-on-ai-title { font-size: var(--fs-md); }
.try-on-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-block-end: var(--space-2); }
.try-on-compare figure { margin: 0; display: grid; gap: var(--space-1); text-align: center; }
.try-on-compare img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.try-on-compare figcaption { font-size: var(--fs-sm); color: var(--muted); }
.try-on-key { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.try-on-key .input { flex: 1 1 16rem; min-width: 0; direction: ltr; }

/* Step-by-step OpenAI sign-up under the key field (2026-11-10). */
.try-on-guide { margin-block-start: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.try-on-guide summary { cursor: pointer; font-weight: 600; }
.try-on-guide ol { margin: var(--space-3) 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); line-height: 1.8; }
.try-on-guide a { overflow-wrap: anywhere; }
.try-on-guide .guide-key { display: inline-block; direction: ltr; unicode-bidi: isolate; font-size: var(--fs-sm); padding: 0 var(--space-1); border: 1px solid var(--border); border-radius: 6px; background: var(--surface-elevated, transparent); white-space: nowrap; line-height: 1.6; }