/* ============================================================
   VELUR BOUTIQUE — Atelier re-skin
   Maps the live Furéllea configurator (fr--atelier / fr--option-picker /
   fr--selfie Stimulus markup) onto the Velur "vl-lab" design from the export
   (Velur Atelier.html). Loaded AFTER the Encore bundle + velur.css/velur-lab.css
   so it wins the cascade. Purely visual — the Stimulus controllers bind by
   data-* attributes, never by class, so the AI generate / poll / try-on flow is
   untouched. Scoped to `.vl-atelier` so it never leaks to other fr- usage.

   Velur is a LIGHT (ivory/marble) theme, so the fr-* token remap points at the
   light palette (ink text on marble surfaces), unlike the dark Sobolini reskin.
   ============================================================ */

/* ---- Token remap: rewire the Furéllea design tokens to the Velur palette for
   every fr-* component on the Atelier. Encore defines --fr-color-* on :root;
   these scoped overrides (higher specificity, loaded last) win, so any fr- text /
   border / surface we didn't override by hand still renders in Velur colours. */
.vl-atelier,
#fr-lightbox {
  --fr-color-text: var(--vl-ink);
  --fr-color-text-muted: var(--vl-ink-soft);
  --fr-color-text-subtle: var(--vl-ink-faint);
  --fr-color-text-inverse: #fff;

  --fr-color-surface: var(--vl-marble-raised);
  --fr-color-surface-raised: var(--vl-marble-raised);
  --fr-color-surface-sunken: var(--vl-marble-deep);
  --fr-color-surface-inverse: var(--vl-ink);
  --fr-color-surface-canvas: var(--vl-marble);

  --fr-color-primary: var(--vl-gold);
  --fr-color-primary-hover: var(--vl-gold-deep);
  --fr-color-on-primary: #fff;
  --fr-color-accent: var(--vl-gold);
  --fr-color-on-accent: #fff;

  --fr-color-border: var(--vl-line);
  --fr-color-border-strong: var(--vl-gold-line);
  --fr-color-border-focus: var(--vl-gold);

  --fr-color-link: var(--vl-gold-deep);
  --fr-color-link-hover: var(--vl-gold);

  --fr-control-border: 1px solid var(--vl-line);
}

/* ---- Selfie bar ------------------------------------------------------- */
.vl-atelier .vl-selfie {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--vl-line);
  background: var(--vl-marble-raised);
  padding: 18px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.vl-atelier .vl-selfie__frame {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--vl-line);
  background: var(--vl-marble-deep);
  display: grid; place-items: center;
}
.vl-atelier .vl-selfie__frame img { width: 100%; height: 100%; object-fit: cover; }
.vl-atelier .vl-selfie__placeholder {
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--vl-ink-faint);
}
.vl-atelier .vl-selfie__controls { display: grid; gap: 10px; }
.vl-atelier .vl-selfie__title {
  font-family: var(--vl-serif); font-size: 20px; font-weight: 500; letter-spacing: 0.01em;
}
.vl-atelier .vl-selfie__status { font-size: 13px; color: var(--vl-ink-soft); margin: 0; }
.vl-atelier .vl-selfie__consent { display: flex; gap: 10px; font-size: 12px; line-height: 1.55; color: var(--vl-ink-faint); cursor: pointer; }
.vl-atelier .vl-selfie__consent a { color: var(--vl-gold-deep); border-bottom: 1px solid var(--vl-gold-line); }
.vl-atelier .vl-selfie__consent input { accent-color: var(--vl-gold); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.vl-atelier .fr-selfie-consent--required .vl-selfie__consent,
.vl-atelier .vl-selfie__consent.fr-selfie-consent--required { color: var(--vl-gold-deep); }
.vl-atelier .vl-selfie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vl-atelier .vl-selfie__actions .vl-btn { min-height: 44px; padding: 0 20px; font-size: 11px; cursor: pointer; }
.vl-atelier .vl-selfie__actions label.vl-btn { cursor: pointer; }

/* ---- Lab grid (re-skin of .fr-atelier) -------------------------------- */
/* The wrapper carries `fr-atelier vl-lab`; neutralise the Encore card chrome so
   the vl-lab grid (velur-lab.css) drives the 2-column layout. */
.vl-atelier .fr-atelier {
  background: none; border: none; padding: 0; box-shadow: none; border-radius: 0;
}
.vl-atelier .fr-atelier__form {
  background: none; border: none; padding: 0;
}

/* Field → fieldset/legend look */
.vl-atelier .fr-field { display: grid; gap: 12px; background: none; border: none; padding: 0; margin: 0; }
.vl-atelier .fr-field__label,
.vl-atelier .fr-field > label {
  margin: 0 0 4px; padding: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--vl-ink-faint);
}
.vl-atelier .fr-field__label .fr-field__optional,
.vl-atelier .fr-field__optional { display: none; }

/* Option-picker → inline vl-optrow of vl-chips (kill the dropdown chrome) */
.vl-atelier .fr-option-picker { position: static; display: block; }
.vl-atelier .fr-option-picker__trigger { display: none !important; }
.vl-atelier .fr-option-picker__panel,
.vl-atelier .fr-option-picker__panel[hidden] {
  display: flex !important;
  position: static; inset: auto; transform: none;
  flex-wrap: wrap; gap: 8px;
  background: none; border: none; box-shadow: none; padding: 0; margin: 0;
  max-height: none; overflow: visible; opacity: 1; visibility: visible;
}
.vl-atelier .fr-option-picker__tile {
  display: inline-flex; align-items: center; gap: 0;
  padding: 10px 18px;
  border: 1px solid var(--vl-line);
  background: transparent;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vl-ink-soft);
  cursor: pointer;
  transition: color 200ms var(--vl-ease), border-color 200ms var(--vl-ease), background 200ms var(--vl-ease);
}
.vl-atelier .fr-option-picker__tile:hover { color: var(--vl-ink); border-color: var(--vl-gold-line); }
.vl-atelier .fr-option-picker__tile[aria-checked="true"] {
  background: var(--vl-ink); border-color: var(--vl-ink); color: var(--vl-marble);
}
.vl-atelier .fr-option-picker__image { display: none; }
.vl-atelier .fr-option-picker__name { letter-spacing: inherit; }

/* Native vl-chip tiles inside an option-picker panel (template uses .vl-chip). */
.vl-atelier .fr-option-picker__panel .vl-chip {
  cursor: pointer;
  transition: color 200ms var(--vl-ease), border-color 200ms var(--vl-ease), background 200ms var(--vl-ease);
}
.vl-atelier .fr-option-picker__panel .vl-chip:hover { color: var(--vl-ink); border-color: var(--vl-gold-line); }
.vl-atelier .fr-option-picker__panel .vl-chip[aria-checked="true"] {
  background: var(--vl-ink); border-color: var(--vl-ink); color: var(--vl-marble);
}

/* Toggle groups (gender / size) → vl-chip look */
.vl-atelier .fr-toggle-group { display: flex; flex-wrap: wrap; gap: 8px; border: none; padding: 0; }
.vl-atelier .fr-toggle-group__option {
  position: relative; margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--vl-line);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vl-ink-soft); cursor: pointer;
  transition: color 200ms var(--vl-ease), border-color 200ms var(--vl-ease), background 200ms var(--vl-ease);
}
.vl-atelier .fr-toggle-group__option:hover { color: var(--vl-ink); border-color: var(--vl-gold-line); }
.vl-atelier .fr-toggle-group__option input { position: absolute; opacity: 0; pointer-events: none; }
.vl-atelier .fr-toggle-group__option:has(input:checked) {
  background: var(--vl-ink); border-color: var(--vl-ink); color: var(--vl-marble);
}

/* Colour swatches → round vl-swatch */
.vl-atelier .fr-swatch-group { display: flex; flex-wrap: wrap; gap: 12px; }
.vl-atelier .fr-swatch {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--vl-line); padding: 0; cursor: pointer;
  background: var(--fr-swatch-color, var(--vl-marble-deep));
  transition: transform 150ms var(--vl-ease), box-shadow 150ms var(--vl-ease);
}
.vl-atelier .fr-swatch:hover { transform: scale(1.12); }
.vl-atelier .fr-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vl-atelier .fr-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--vl-marble-raised), 0 0 0 4px var(--vl-gold); }
.vl-atelier .fr-swatch--rainbow { background: conic-gradient(from 180deg, #c0392b, #d4a24c, #2e8b57, #2e6b8b, #6a4c93, #c0392b); }

/* Length slider (cosmetic, fr--range) — template uses .vl-range / .vl-range-row */
.vl-atelier .vl-range-row { display: flex; align-items: center; gap: 18px; }
.vl-atelier .vl-range { flex: 1; accent-color: var(--vl-gold); height: 3px; }
.vl-atelier .vl-range-val { min-width: 78px; font-weight: 600; font-size: 14.5px; letter-spacing: 0.03em; text-align: right; }

/* Textareas (personalization / custom prompt / quote note) */
.vl-atelier .fr-field__input,
.vl-atelier .fr-atelier textarea {
  width: 100%; background: var(--vl-marble);
  border: 1px solid var(--vl-line); color: var(--vl-ink);
  padding: 12px 14px; font-family: var(--vl-sans); font-size: 14px; line-height: 1.5;
}
.vl-atelier .fr-field__input:focus,
.vl-atelier .fr-atelier textarea:focus { outline: none; border-color: var(--vl-gold); }

/* Try-on + multi-angle toggles */
.vl-atelier .fr-atelier__tryon-toggle,
.vl-atelier .fr-atelier__multiangle-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--vl-ink-soft); cursor: pointer; }
.vl-atelier .fr-atelier__tryon-toggle input,
.vl-atelier .fr-atelier__multiangle-toggle input { accent-color: var(--vl-gold); width: 17px; height: 17px; }
.vl-atelier .fr-atelier__tryon-hint,
.vl-atelier .fr-atelier__multiangle-hint { font-size: 12px; color: var(--vl-ink-faint); margin: 4px 0 0; }

/* Action buttons → vl-btn */
.vl-atelier .fr-atelier__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.vl-atelier .fr-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background 240ms var(--vl-ease), color 240ms var(--vl-ease), border-color 240ms var(--vl-ease);
}
.vl-atelier .fr-button--accent { background: var(--vl-gold); color: #fff; border-color: var(--vl-gold); }
.vl-atelier .fr-button--accent:hover { background: var(--vl-gold-deep); border-color: var(--vl-gold-deep); }
.vl-atelier .fr-button--outline { background: transparent; border-color: var(--vl-gold-line); color: var(--vl-ink); }
.vl-atelier .fr-button--outline:hover { border-color: var(--vl-gold); color: var(--vl-gold-deep); background: var(--vl-gold-faint); }

/* ---- Preview column → vl-preview -------------------------------------- */
.vl-atelier .fr-atelier__preview {
  position: relative;
  border: 1px solid var(--vl-line);
  background: var(--vl-marble-deep);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  min-height: 0;
}
.vl-atelier .fr-atelier__slot { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; }
.vl-atelier .fr-atelier__placeholder { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 32px; color: var(--vl-ink-faint); }
.vl-atelier .fr-atelier__placeholder svg { width: 40px; height: 40px; stroke: var(--vl-gold-line); }
.vl-atelier .fr-atelier__placeholder-label { font-size: 13px; line-height: 1.6; max-width: 30ch; }
.vl-atelier .fr-atelier__image { width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: zoom-in; }
.vl-atelier .fr-atelier__generating { display: grid; place-items: center; gap: 16px; }
.vl-atelier .fr-atelier__generating-caption { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vl-gold-deep); }
.vl-atelier .fr-atelier__failure { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px; color: var(--vl-ink-soft); }
.vl-atelier .fr-atelier__failure svg { width: 34px; height: 34px; stroke: var(--vl-gold); }
.vl-atelier .fr-atelier__angle-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 7px 11px; background: rgba(246, 240, 228, 0.92); border: 1px solid var(--vl-gold-line);
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vl-gold-deep);
}

/* AI "preview" badge only once a render is ready. */
.vl-atelier .vl-lab:not([data-state="ready"]) .vl-ai-badge { display: none; }

/* vl-lab action row + try-on + quote note. */
.vl-atelier .vl-lab__actions { display: grid; gap: 12px; margin-top: 8px; }
.vl-atelier .vl-lab__actions .vl-btn { min-height: 48px; }
.vl-atelier .vl-lab__tryon { display: grid; gap: 6px; }
.vl-atelier .vl-lab__quote { margin-top: 4px; }
.vl-atelier .vl-lab__quote-note {
  width: 100%; background: var(--vl-marble); border: 1px solid var(--vl-line);
  color: var(--vl-ink); padding: 12px 14px; font-family: var(--vl-sans); font-size: 14px;
}
.vl-atelier .vl-lab__quote-note:focus { outline: none; border-color: var(--vl-gold); }

/* Generating progress bar (fr--atelier sets --fr-progress). */
.vl-atelier .fr-atelier__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vl-line); z-index: 3; }
.vl-atelier .fr-atelier__progress-fill { display: block; height: 100%; width: calc(var(--fr-progress, 0) * 1%); background: var(--vl-gold); transition: width 300ms var(--vl-ease); }

@media (max-width: 860px) {
  .vl-atelier .vl-selfie { grid-template-columns: 88px 1fr; }
}