/* Yeli Boutique 5.8 — Virtual Try-On First
 * Additive customer-facing layout only. The art is illustrative; the actual
 * fitting-room implementation remains in mirror-studio33.js (unchanged).
 * No new permissions, remote services or access to customer data.
 */
:root{
  --y58-rose:#c52c69;
  --y58-wine:#722c46;
  --y58-ink:#765365;
  --y58-pink:#ffe9f0;
}
/* Reprioritized editorial story: hero → promises → fitting room → collection
   and categories → personal assistance. */
.y54-home .y58-virtual{
  position:relative;isolation:isolate;max-width:1230px;margin:clamp(22px,3.2vw,38px) auto 20px;
  padding:clamp(20px,3.6vw,42px) clamp(20px,4.2vw,52px) 22px;
  border:1px solid rgba(237,185,202,.89);border-radius:30px;
  background:linear-gradient(122deg,rgba(255,252,251,.98),rgba(255,237,244,.92) 53%,rgba(248,207,222,.68));
  box-shadow:0 17px 42px rgba(153,55,96,.12);overflow:hidden;
}
.y54-home .y58-virtual::before{
  content:"";pointer-events:none;position:absolute;z-index:-1;left:-105px;bottom:-100px;
  width:480px;height:360px;background:url('assets/vision54-roses-soft.png') left bottom/contain no-repeat;
  opacity:.11;filter:blur(1.7px)
}
.y54-home .y58-virtual::after{
  content:"";pointer-events:none;position:absolute;z-index:-1;right:-130px;top:-200px;
  width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,#f7c7d8b3,transparent 70%);
}
.y58-virtual-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(18px,4vw,56px)}
.y58-virtual-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.y58-virtual-copy .y54-overline{font-size:clamp(10px,1vw,12px);letter-spacing:.19em;margin-bottom:17px;color:#bd356d}
.y54-home .y58-virtual h2{
  font:400 clamp(61px,6.5vw,94px)/.95 Georgia,'Times New Roman',serif;
  letter-spacing:-.065em;color:var(--y58-wine);margin:0 0 19px;text-wrap:balance
}
.y54-home .y58-virtual h2 em{display:block;color:var(--y58-rose);font-weight:400;letter-spacing:-.04em}
.y58-virtual-lead{max-width:490px;margin:0 0 19px;color:var(--y58-ink);font:400 clamp(15px,1.5vw,19px)/1.55 system-ui,-apple-system,sans-serif}
.y58-supported{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 24px}
.y58-supported>span{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 11px;border:1px solid #f3cbd9;border-radius:100px;background:rgba(255,250,250,.87);color:#97415f;font:600 12px/1.2 system-ui,sans-serif}
.y58-supported svg{width:17px;height:17px;fill:none;stroke:var(--y58-rose);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.y54-home .y58-virtual-cta{width:min(100%,310px);min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:7px;white-space:normal;padding:13px 19px;background:linear-gradient(110deg,#b52059,#d02d70);box-shadow:0 10px 22px rgba(175,49,97,.20);font-size:15px}
.y54-home .y58-virtual-cta>span:last-child{font:400 24px/1 Georgia,serif}
.y58-privacy{display:flex;align-items:flex-start;gap:7px;color:#875b6a;font:400 11.5px/1.55 system-ui,sans-serif;margin:13px 0 0;max-width:380px}
.y58-privacy svg{width:16px;height:16px;flex:none;stroke-width:1.8;fill:none;stroke:var(--y58-rose);margin-top:1px}
.y58-virtual-demo{min-width:0;position:relative;width:min(100%,455px);justify-self:end;background:linear-gradient(140deg,#ffe0e9,#fff8f6 55%,#f7c0d2);padding:16px;border:1.5px solid #f7fcfb;border-radius:34px;box-shadow:0 14px 34px rgba(137,51,84,.18),inset 0 0 0 1px rgba(224,136,169,.4)}
.y58-demo-frame{isolation:isolate;position:relative;height:clamp(320px,38vw,440px);border-radius:23px;overflow:hidden;border:2px solid #fff9f8;background:#f2bacb;box-shadow:0 5px 19px rgba(133,46,79,.10)}
.y58-demo-photo{display:block;height:100%;width:100%;object-fit:cover;object-position:49% 31%;filter:contrast(1.01) saturate(1.04)}
.y58-demo-frame::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 9px rgba(255,255,255,.06),inset 0 -100px 80px -85px rgba(83,24,55,.30)}
.y58-demo-corner{position:absolute;z-index:2;pointer-events:none;width:36px;height:36px;border:2px solid rgba(255,255,255,.88)}
.y58-corner-tl{left:20px;top:20px;border-right:0;border-bottom:0;border-radius:19px 0 0 0}
.y58-corner-br{right:17px;bottom:44px;border-left:0;border-top:0;border-radius:0 0 19px 0}
.y58-demo-tools{position:absolute;z-index:3;right:12px;top:50%;transform:translateY(-50%);display:grid;gap:7px;padding:7px;border-radius:17px;background:rgba(255,252,251,.94);box-shadow:0 6px 22px rgba(90,32,54,.15);border:1px solid rgba(255,255,255,.87)}
.y58-demo-tool{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:#fff7fa;color:#9d4666;border:1px solid #f5d7e0}
.y58-demo-tool-active{color:#c52c69;background:#ffe1ec;border-color:#f2bbcf}
.y58-demo-tool svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.y58-demo-tag{position:absolute;z-index:3;bottom:13px;left:13px;color:#fff;background:rgba(102,38,70,.67);backdrop-filter:blur(8px);border-radius:999px;padding:5px 10px;letter-spacing:.11em;font:700 9px/1.25 system-ui,sans-serif}
.y58-demo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#8c4664;font:600 11px/1.2 system-ui,sans-serif;padding:13px 5px 1px}
.y58-demo-foot>span:first-child{display:flex;align-items:center;gap:5px}
.y58-demo-foot svg{width:16px;height:16px;stroke:#c52c69;stroke-width:1.5;fill:none}
.y58-virtual-steps{border-top:1px solid rgba(223,154,178,.54);list-style:none;margin:24px 0 0;padding:18px 0 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.y58-virtual-steps li{display:flex;justify-content:center;align-items:center;gap:12px;color:#74314e;min-width:0}
.y58-virtual-steps li+li{border-left:1px solid #f0c5d3}
.y58-virtual-steps li span{font:400 26px/1 Georgia,serif;color:#d1457c}
.y58-virtual-steps li strong{font:600 13px/1.4 system-ui,sans-serif}
.y58-virtual-note{max-width:925px;text-align:center;margin:11px auto 0;color:#896a77;font:400 11px/1.5 system-ui,sans-serif}
/* Maintain the owner-approved mobile ordering while limiting oversized gaps. */
.y54-home .y54-curated{margin-top:clamp(18px,4vw,40px)}
.y54-home .y54-category-section{padding-top:clamp(36px,5vw,76px)}
.y54-home .y56-concierge{margin-top:clamp(12px,2vw,28px);margin-bottom:28px}
@media(max-width:900px){
  .y54-home .y58-virtual{margin:22px 14px 12px;padding:26px 23px 18px;border-radius:26px}
  .y58-virtual-layout{gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .y54-home .y58-virtual h2{font-size:clamp(53px,7vw,69px)}
  .y58-virtual-lead{font-size:14px;line-height:1.48}
  .y58-demo-frame{height:345px}
  .y58-virtual-steps li{gap:7px}
  .y58-virtual-steps li strong{font-size:12px}
  .y58-virtual-steps li span{font-size:21px}
}
@media(max-width:600px){
  .y54-home .y58-virtual{margin:17px 12px 17px;padding:22px 12px 14px;border-radius:23px}
  .y58-virtual-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:8px;align-items:stretch}
  .y58-virtual-copy .y54-overline{font-size:9px;line-height:1.4;letter-spacing:.12em;margin-bottom:13px}
  .y54-home .y58-virtual h2{font-size:clamp(38px,10vw,57px);margin-bottom:13px;line-height:.98;letter-spacing:-.065em}
  .y58-virtual-lead{font-size:12.8px;line-height:1.48;margin:0 0 13px}
  .y58-supported{gap:4px;margin-bottom:13px}
  .y58-supported>span{gap:3px;min-height:26px;padding:4px 6px;font-size:10.5px;white-space:nowrap}
  .y58-supported svg{width:13px;height:13px}
  .y54-home .y58-virtual-cta{width:100%;padding:10px 11px;min-height:48px;font-size:12px;gap:4px}
  .y54-home .y58-virtual-cta>span:last-child{font-size:20px}
  .y58-privacy{font-size:10.5px;line-height:1.3;gap:4px;margin-top:10px}
  .y58-privacy svg{width:14px;height:14px}
  .y58-virtual-demo{padding:6px;border-radius:21px;box-shadow:0 8px 20px rgba(137,51,84,.13)}
  .y58-demo-frame{height:345px;border-radius:16px;border-width:1px}
  .y58-demo-photo{object-position:52% center}
  .y58-demo-tools{right:5px;border-radius:12px;gap:4px;padding:4px}
  .y58-demo-tool{width:29px;height:29px;border-radius:9px}
  .y58-demo-tool svg{width:18px;height:18px}
  .y58-demo-corner{width:22px;height:22px}
  .y58-corner-tl{left:10px;top:10px}
  .y58-corner-br{right:10px;bottom:34px}
  .y58-demo-tag{font-size:8.5px;letter-spacing:.04em;padding:5px 6px;bottom:8px;left:6px}
  .y58-demo-foot{padding:8px 3px 1px;font-size:9px;flex-wrap:wrap;gap:3px}
  .y58-demo-foot svg{width:12px;height:12px}
  .y58-virtual-steps{gap:2px;padding-top:14px;margin-top:17px}
  .y58-virtual-steps li{flex-direction:column;gap:2px;text-align:center}
  .y58-virtual-steps li span{font-size:18px}
  .y58-virtual-steps li strong{font-size:10.5px;line-height:1.25}
  .y58-virtual-note{font-size:10.5px;margin-top:12px}
  .y54-home .y54-category-section{padding-top:42px}
  .y54-home .y56-concierge{margin-top:13px;margin-bottom:10px}
}
@media(max-width:355px){
  .y54-home .y58-virtual{padding-inline:11px}
  .y58-virtual-layout{grid-template-columns:1fr;gap:15px}
  .y54-home .y58-virtual h2{font-size:53px}
  .y58-virtual-lead{font-size:13px;max-width:285px}
  .y58-supported>span{font-size:11px}
  .y58-virtual-cta{max-width:280px}
  .y58-privacy{font-size:10px}
  .y58-virtual-demo{max-width:286px;justify-self:center;width:100%}
  .y58-demo-frame{height:300px}
  .y58-demo-tools{right:9px}
}
@media(prefers-reduced-motion:reduce){
  .y58-virtual *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* First-run usability: on narrow screens, show the photo upload step before an
   empty large preview. Once a photo exists, retain the native preview-first UI. */
@media(max-width:820px){
  .ym32.ym32-awaiting-photo .ym32-editor{grid-row:1}
  .ym32.ym32-awaiting-photo .ym32-viewer{grid-row:2}
  .ym32.ym32-awaiting-photo .ym32-editor>.ym32-card:first-child{border-color:#e7aeca;background:linear-gradient(130deg,#fffcfc,#fff0f5)}
}