/* ---- Virtual try-on ------------------------------------------------------ */
.tryon-wrap{max-width:1180px;margin:0 auto;padding:34px 22px 76px}
.tryon-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}

.tryon-stage{position:relative;background:var(--espresso);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/4}
.tryon-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.tryon-stage canvas:active{cursor:grabbing}

.tryon-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;text-align:center;padding:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(58,42,36,0) 50%,rgba(58,42,36,.5))}
.tryon-empty-card{pointer-events:auto;max-width:340px;padding:17px 20px;border-radius:20px;
  background:rgba(253,249,242,.95);box-shadow:0 14px 36px rgba(0,0,0,.3)}
/* display:flex above beats the UA [hidden]{display:none}, so setting
   el.hidden did nothing and the scrim stayed over the live camera. */
.tryon-empty[hidden]{display:none}
.tryon-empty h3{font-size:22px;font-weight:400;margin:0 0 6px;color:var(--espresso)}
.tryon-empty p{font-size:14px;line-height:1.65;color:#6E5D51;margin:0}

.tryon-panel{display:grid;gap:18px}
.tryon-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.tryon-card h3{font-size:20px;font-weight:400;margin:0 0 14px;color:var(--espresso)}

.gown-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gown-pick{border:1px solid var(--line);background:var(--ivory);border-radius:16px;padding:6px 4px 8px;
  cursor:pointer;text-align:center;transition:border-color .2s ease,background .2s ease}
.gown-pick img{width:100%;height:66px;object-fit:contain;display:block;margin-bottom:5px}
.gown-pick span{font-size:11px;letter-spacing:.04em;color:#6E5D51;line-height:1.3;display:block}
.gown-pick[aria-pressed="true"]{border-color:var(--gold);background:#fff;box-shadow:0 6px 18px rgba(185,150,91,.22)}
.gown-pick[aria-pressed="true"] span{color:var(--deep-gold)}

.slider-row{display:grid;gap:6px;margin-bottom:14px}
.slider-row label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6E5D51}
.slider-row input[type=range]{width:100%;accent-color:var(--gold)}

.tryon-actions{display:grid;gap:10px}
.tryon-actions .btn{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.tryon-note{font-size:13px;line-height:1.7;color:#6E5D51;margin:14px 0 0}
.tryon-disclaimer{background:var(--ivory);border-left:3px solid var(--gold);border-radius:16px;
  padding:14px 16px;font-size:13px;line-height:1.7;color:var(--espresso);margin-top:18px}
.tryon-status{font-size:13px;color:#6E5D51;margin:10px 0 0;min-height:19px}
.tryon-status.error{color:#a3392f}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- lead capture (appears after a save) --------------------------------- */
.tryon-lead{border-color:rgba(185,150,91,.5);box-shadow:0 18px 46px rgba(185,150,91,.20)}
.tryon-lead h3{margin-bottom:6px}
.lead-intro{font-size:14px;line-height:1.65;color:#6E5D51;margin:0 0 14px}
.lead-intro strong{color:var(--deep-gold);font-weight:400}
.lead-field{display:grid;gap:5px;margin-bottom:10px}
.lead-field label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6E5D51}
.lead-field label span{text-transform:none;letter-spacing:0;opacity:.7}
.lead-field input{width:100%;border:1px solid rgba(185,150,91,.28);border-radius:14px;
  background:#fff;padding:12px 13px;font-family:inherit;font-size:16px;color:var(--espresso)}
.lead-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,150,91,.16)}
#lead-form .btn{width:100%;margin-top:6px}
.lead-note{font-size:12px;line-height:1.6;color:#6E5D51;margin:12px 0 0}
/* Netlify honeypot - must be in the DOM but never visible or focusable */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Disclaimer and its CTA sit under the previewer, not in the side panel */
.tryon-main{display:grid;gap:18px;align-content:start}
.tryon-main .tryon-disclaimer{margin-top:0}
.tryon-main .tryon-actions{justify-items:center}
.tryon-main .tryon-actions .btn{width:auto;min-width:280px}
@media(max-width:900px){.tryon-main .tryon-actions .btn{width:100%;min-width:0}}

/* ---- camera toolbar + countdown ----------------------------------------- */
/* Overlaid on the preview so the shutter sits under her thumb, directly below
   whatever she is framing. */
.cam-toolbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:16px;z-index:3;
  background:linear-gradient(180deg,rgba(58,42,36,0),rgba(58,42,36,.55))}
.cam-toolbar[hidden]{display:none}

.cam-shutter{font-family:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:14px 26px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--deep-gold));color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s ease}
.cam-shutter:hover{transform:translateY(-2px)}
.cam-shutter[hidden]{display:none}

.cam-btn{font-family:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:12px 18px;cursor:pointer;
  background:rgba(253,249,242,.92);color:var(--espresso)}
.cam-btn[hidden]{display:none}
.cam-btn span{font-size:15px;line-height:1}

.cam-countdown{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;cursor:pointer;
  background:rgba(58,42,36,.45)}
.cam-countdown[hidden]{display:none}
.cam-countdown span{font-size:110px;line-height:1;color:#fff;font-family:Georgia,serif;
  text-shadow:0 6px 26px rgba(0,0,0,.5)}
.cam-countdown em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}

/* ---- save + lead prompt -------------------------------------------------- */
/* Save sits directly under the preview rather than third in a list of
   controls - it is the action the whole page is building toward. */
.tryon-save-bar{display:none;text-align:center}
body.has-photo .tryon-save-bar{display:block}
.tryon-save-bar .btn{width:100%;max-width:420px;padding:16px 26px;font-size:14px;
  letter-spacing:.14em;box-shadow:0 14px 34px rgba(185,150,91,.36)}
.save-hint{margin:10px auto 0;max-width:420px;font-size:13px;line-height:1.6;color:#6E5D51}

/* Flag the form when it appears, so it is obvious what just changed. */
@keyframes leadReveal{
  0%{transform:translateY(10px);box-shadow:0 0 0 0 rgba(185,150,91,0)}
  40%{box-shadow:0 0 0 7px rgba(185,150,91,.28)}
  100%{transform:translateY(0);box-shadow:0 18px 46px rgba(185,150,91,.20)}
}
.tryon-lead.just-revealed{animation:leadReveal .9s ease-out}
@media(prefers-reduced-motion:reduce){.tryon-lead.just-revealed{animation:none}}

/* Mobile last, so it overrides the desktop rules declared above. */
@media(max-width:900px){
  .tryon-grid{grid-template-columns:1fr;gap:16px}
  .tryon-wrap{padding:20px 14px 48px}
  .gown-picker{grid-template-columns:repeat(3,1fr)}

  .tryon-main,.tryon-panel{display:contents}
  .tryon-stage{order:1;aspect-ratio:auto;height:58vh;min-height:360px}
  .tryon-panel>.tryon-card:nth-of-type(2){order:2}   /* Your photo   */
  .tryon-panel>.tryon-card:nth-of-type(1){order:3}   /* Choose a gown */
  .tryon-panel>.tryon-card:nth-of-type(3){order:4}   /* Adjust the fit */
  .tryon-lead{order:5}
  .tryon-disclaimer{order:6}
  .tryon-main .tryon-actions{order:7}

  .tryon-card{padding:16px}
  .tryon-card h3{font-size:18px;margin-bottom:11px}
  .gown-pick img{height:56px}
  .slider-row{margin-bottom:11px}
  .tryon-empty-card{max-width:none}
  .tryon-save-bar{order:2}
  body.has-photo .tryon-panel>.tryon-card:nth-of-type(3){order:3}
  body.has-photo .tryon-panel>.tryon-card:nth-of-type(1){order:4}
  body.has-photo .tryon-panel>.tryon-card:nth-of-type(2){order:5}
  .tryon-save-bar .btn{padding:15px 20px;font-size:13px}
  .cam-toolbar{padding:12px;gap:8px}
  .cam-shutter{padding:13px 20px;font-size:12px}
  .cam-btn{padding:11px 14px;font-size:11px}
  .cam-countdown span{font-size:88px}

  /* Trim the page furniture so the preview and its controls sit within reach
     instead of a third of a screen down. */
  .tryon-page .section-title{gap:8px;margin-bottom:16px}
  .tryon-page .section-title h2{font-size:27px}
  .tryon-page .section-title p{font-size:13px;line-height:1.6}
  .tryon-page .eyebrow{font-size:11px}
  .tryon-stage{height:50vh;min-height:320px}

  /* Priorities flip once there is a photo: before, the job is to add one;
     after, it is to adjust the gown while watching it. */
  body.has-photo .tryon-panel>.tryon-card:nth-of-type(3){order:2}  /* Adjust    */
  body.has-photo .tryon-panel>.tryon-card:nth-of-type(1){order:3}  /* Gowns     */
  body.has-photo .tryon-panel>.tryon-card:nth-of-type(2){order:4}  /* Your photo */
}