/* Dream of Fashions v30.4.27 guided live tutorial.
   The actual buyer pages stay underneath; this file only adds coaching UI in tutorial mode. */
html.dof-live-tutorial-active{scroll-padding-top:150px}
.dof-tutorial-ribbon{position:fixed;z-index:2147483000;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 20px);padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(17,24,39,.96);color:#fff;box-shadow:0 12px 36px rgba(15,23,42,.26);font:700 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;backdrop-filter:blur(14px)}
.dof-tour-ribbon-copy{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.dof-tour-ribbon-copy b{font-size:11px;color:#f9a8d4;letter-spacing:.08em}.dof-tour-ribbon-copy span{font-weight:600;color:#e2e8f0}
.dof-tutorial-ribbon button{border:0;border-radius:999px;padding:7px 10px;background:#fff;color:#111827;font:800 11px/1 system-ui;cursor:pointer}.dof-tutorial-ribbon button:hover{transform:translateY(-1px)}.dof-tutorial-ribbon .exit{background:#fce7f3;color:#9d174d}
.dof-tour-overlay{position:fixed;inset:0;z-index:2147482900;pointer-events:none;background:rgba(15,23,42,.20);opacity:0;transition:opacity .2s ease}.dof-tour-overlay.show{opacity:1}
.dof-tour-focus{position:absolute;z-index:2147483100;pointer-events:none;border:4px solid #d42687;border-radius:18px;box-shadow:0 0 0 9999px rgba(15,23,42,.28),0 0 0 9px rgba(212,38,135,.18),0 0 30px rgba(212,38,135,.46);animation:dofTourPulse 1.25s ease-in-out infinite;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}
@keyframes dofTourPulse{0%,100%{box-shadow:0 0 0 9999px rgba(15,23,42,.28),0 0 0 7px rgba(212,38,135,.13),0 0 24px rgba(212,38,135,.30)}50%{box-shadow:0 0 0 9999px rgba(15,23,42,.28),0 0 0 12px rgba(212,38,135,.20),0 0 38px rgba(212,38,135,.50)}}
.dof-tour-pointer{position:fixed;z-index:2147483250;width:108px;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 9px;border-radius:999px;background:#c0267d;color:#fff;box-shadow:0 10px 28px rgba(190,24,93,.34);font:900 11px/1 system-ui;pointer-events:none;animation:dofTourBounce .9s ease-in-out infinite}.dof-tour-pointer:after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-top-color:#c0267d;border-bottom:0}.dof-tour-pointer.below:after{top:-8px;bottom:auto;border-top:0;border-bottom:8px solid #c0267d}.dof-tour-hand{font-size:17px;line-height:1}
@keyframes dofTourBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.dof-tour-card{position:fixed;z-index:2147483300;width:min(420px,calc(100vw - 20px));padding:17px;border:1px solid #f9a8d4;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.34);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#111827}
.dof-tour-progress{height:5px;margin:-2px 0 12px;border-radius:999px;background:#fce7f3;overflow:hidden}.dof-tour-progress span{display:block;height:100%;border-radius:inherit;background:#c0267d;transition:width .2s ease}
.dof-tour-step-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#64748b;font-size:11px;font-weight:800}.dof-tour-eyebrow{color:#be185d;text-transform:uppercase;letter-spacing:.1em}
.dof-tour-card h3{margin:6px 0 8px;font-size:21px;line-height:1.16;color:#111827}.dof-tour-card p{margin:0;color:#526079;font-size:14px;line-height:1.52}
.dof-tour-do-this{display:grid;gap:3px;margin-top:12px;padding:11px 12px;border:1px solid #fbcfe8;border-radius:14px;background:#fff1f7;color:#831843}.dof-tour-do-this b{font-size:10px;letter-spacing:.11em}.dof-tour-do-this span{font-size:13px;font-weight:800;line-height:1.35}
.dof-tour-card .actions{display:flex;align-items:center;gap:8px;margin-top:13px}.dof-tour-card button{border:0;border-radius:999px;padding:10px 14px;font-weight:850;cursor:pointer}.dof-tour-card .next{background:#c0267d;color:#fff}.dof-tour-card .back,.dof-tour-card .skip{background:#f8fafc;color:#334155;border:1px solid #e2e8f0}.dof-tour-card .back:disabled{opacity:.42;cursor:not-allowed}.dof-tour-card .skip{margin-left:auto}.dof-tour-waiting{display:inline-flex;align-items:center;gap:7px;color:#9d174d;font-size:12px;font-weight:850}.dof-tour-waiting i{width:8px;height:8px;border-radius:50%;background:#db2777;box-shadow:0 0 0 5px rgba(219,39,119,.12);animation:dofWaiting 1s ease-in-out infinite}@keyframes dofWaiting{50%{transform:scale(.7);opacity:.65}}
.dof-tour-toast{position:fixed;z-index:2147483400;left:50%;bottom:24px;max-width:min(520px,calc(100vw - 24px));transform:translate(-50%,20px);opacity:0;background:#111827;color:#fff;padding:11px 15px;border-radius:999px;box-shadow:0 10px 32px rgba(15,23,42,.25);font:750 13px/1.3 system-ui;text-align:center;transition:.2s;pointer-events:none}.dof-tour-toast[data-type="ok"]{background:#166534}.dof-tour-toast.show{opacity:1;transform:translate(-50%,0)}
.dof-tour-action-complete{animation:dofTourComplete .45s ease}@keyframes dofTourComplete{50%{transform:scale(1.015);filter:brightness(1.04)}}
@media(max-width:760px){html.dof-live-tutorial-active{scroll-padding-top:120px}.dof-tutorial-ribbon{top:7px;width:calc(100vw - 14px);justify-content:center;gap:5px;padding:7px;border-radius:16px}.dof-tour-ribbon-copy span{display:none}.dof-tutorial-ribbon button{padding:7px 8px;font-size:10px}.dof-tour-card{left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;width:auto;max-height:min(49vh,410px);overflow:auto;padding:15px;border-radius:18px}.dof-tour-card h3{font-size:18px}.dof-tour-card p{font-size:13px}.dof-tour-do-this{padding:9px 10px}.dof-tour-focus{border-radius:14px}.dof-tour-pointer{width:96px;font-size:10px}.dof-tour-hand{font-size:15px}.dof-tour-toast{bottom:calc(min(49vh,410px) + 22px);font-size:11px}}
@media(prefers-reduced-motion:reduce){.dof-tour-overlay,.dof-tour-focus,.dof-tour-pointer,.dof-tour-progress span,.dof-tour-toast,.dof-tour-action-complete{animation:none!important;transition:none!important}}

/* v30.4.22 — modal-aware coaching. Full-screen previews stay clear while the
   tutorial highlights controls that live inside the fixed viewer. */
html.dof-tour-modal-context .dof-tour-overlay.is-modal-context{background:rgba(15,23,42,.04)}
html.dof-tour-modal-context .dof-tour-focus{z-index:2147483240;box-shadow:0 0 0 7px rgba(212,38,135,.18),0 0 34px rgba(212,38,135,.58)}
html.dof-tour-modal-context .dof-tour-card.is-modal-context{width:min(360px,calc(100vw - 20px));box-shadow:0 18px 52px rgba(0,0,0,.3)}
html.dof-tour-modal-context .dof-tour-pointer{z-index:2147483250}
@media(max-width:760px){html.dof-tour-modal-context .dof-tour-overlay.is-modal-context{background:rgba(15,23,42,.03)}html.dof-tour-modal-context .dof-tour-card.is-modal-context{max-height:min(44vh,360px)}}

/* Guide map — styled as a real tutorial navigator instead of a raw aside. */
.dof-tour-drawer-backdrop{position:fixed;inset:0;z-index:2147483340;background:rgba(15,23,42,.38);opacity:0;transition:opacity .18s ease;backdrop-filter:blur(3px)}
.dof-tour-drawer-backdrop.show{opacity:1}.dof-tour-drawer-backdrop[hidden]{display:none!important}
.dof-tour-drawer{position:fixed;z-index:2147483360;top:0;right:0;bottom:0;width:min(460px,94vw);display:flex;flex-direction:column;background:#fff;border-left:1px solid #f3c6df;box-shadow:-20px 0 60px rgba(15,23,42,.24);transform:translateX(102%);transition:transform .2s ease;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#111827}
.dof-tour-drawer.show{transform:translateX(0)}.dof-tour-drawer[hidden]{display:none!important}
.dof-tour-drawer-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:22px 20px 16px;border-bottom:1px solid #fce7f3;background:linear-gradient(180deg,#fff8fc,#fff)}
.dof-tour-drawer-head span{display:block;color:#be185d;font-size:10px;font-weight:900;letter-spacing:.12em}.dof-tour-drawer-head h2{margin:5px 0 4px;font-size:24px;line-height:1.1}.dof-tour-drawer-head p{margin:0;color:#64748b;font-size:13px;line-height:1.45}.dof-tour-drawer-head button{flex:0 0 auto;width:38px;height:38px;border:1px solid #f3c6df;border-radius:50%;background:#fff;color:#be185d;font-size:22px;font-weight:800;cursor:pointer}
.dof-tour-drawer-groups{flex:1;overflow:auto;padding:14px 16px 22px}.dof-tour-drawer-groups section+section{margin-top:18px}.dof-tour-drawer-groups h3{margin:0 0 8px;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.09em}.dof-tour-drawer-groups section>div{display:grid;gap:7px}
.dof-tour-topic{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #f1d5e4;border-radius:14px;background:#fff;color:#1f2937;text-decoration:none;font-size:13px;font-weight:800;transition:transform .15s ease,border-color .15s ease,background .15s ease}.dof-tour-topic:hover{transform:translateY(-1px);border-color:#e879b3;background:#fff7fb}.dof-tour-topic small{color:#9d174d;font-size:10px;white-space:nowrap}.dof-tour-topic.is-current{border-color:#d42687;background:#fff1f7;color:#9d174d}
.dof-tour-drawer-foot{padding:14px 18px 18px;border-top:1px solid #fce7f3;background:#fff8fc}.dof-tour-drawer-foot b{font-size:12px;color:#831843}.dof-tour-drawer-foot p{margin:4px 0 0;color:#64748b;font-size:12px;line-height:1.45}
.dof-tour-open-map{margin-top:10px;background:#f8fafc!important;color:#111!important;border:1px solid #e5e7eb!important}
@media(max-width:760px){.dof-tour-drawer{width:100vw}.dof-tour-drawer-head{padding-top:max(18px,env(safe-area-inset-top));}.dof-tour-drawer-groups{padding-bottom:max(22px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.dof-tour-drawer,.dof-tour-drawer-backdrop,.dof-tour-topic{transition:none!important}}

/* v30.4.27 — balanced mobile guided tutorial coach.
   v30.4.25 was too tall and v30.4.26 was too small. This version uses a
   readable 16–18% phone ratio with pixel caps, so customers can understand the
   next action without losing the live store/customizer view underneath. */
@media(max-width:760px){
  html.dof-live-tutorial-active{scroll-padding-top:94px}
  .dof-tutorial-ribbon{
    top:max(5px,env(safe-area-inset-top));
    left:8px;
    right:8px;
    width:auto;
    min-height:32px;
    transform:none;
    justify-content:center;
    gap:4px;
    padding:4px 5px;
    border-radius:14px;
  }
  .dof-tour-ribbon-copy{gap:5px}
  .dof-tour-ribbon-copy b{font-size:9px}
  .dof-tutorial-ribbon button{min-height:28px;padding:0 7px;font-size:9px}
  .dof-tutorial-ribbon [data-tour-restart]{display:none}

  .dof-tour-card,
  html.dof-tour-modal-context .dof-tour-card.is-modal-context{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto;
    height:clamp(96px,17svh,132px);
    max-height:clamp(96px,17svh,132px);
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:4px auto auto minmax(0,1fr);
    align-items:start;
    gap:4px 8px;
    padding:8px 9px;
    border-radius:17px;
    box-shadow:0 14px 38px rgba(15,23,42,.24);
  }
  .dof-tour-card p,
  .dof-tour-card .dof-tour-safety,
  .dof-tour-card .dof-tour-open-map{display:none!important}
  .dof-tour-progress{
    grid-column:1/-1;
    grid-row:1;
    height:4px;
    margin:0;
  }
  .dof-tour-card .dof-tour-step-row{
    grid-column:1;
    grid-row:2;
    min-width:0;
    gap:7px;
    margin:0;
    font-size:9px;
    line-height:1;
  }
  .dof-tour-card h3{
    grid-column:1;
    grid-row:3;
    display:-webkit-box;
    min-width:0;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    margin:0;
    color:#111827;
    font-size:14px;
    line-height:1.12;
  }
  .dof-tour-do-this{
    grid-column:1;
    grid-row:4;
    min-width:0;
    margin:0;
    padding:6px 8px;
    border:1px solid #fbcfe8;
    border-radius:11px;
    background:#fff1f7;
    color:#831843;
  }
  .dof-tour-do-this b{
    display:block;
    margin:0 0 3px;
    font-size:8px;
    line-height:1;
    letter-spacing:.08em;
  }
  .dof-tour-do-this span{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:11.5px;
    font-weight:850;
    line-height:1.18;
  }
  .dof-tour-card .actions{
    grid-column:2;
    grid-row:2/5;
    align-self:stretch;
    display:grid;
    grid-auto-rows:1fr;
    align-items:stretch;
    margin:0;
    gap:5px;
  }
  .dof-tour-card button{
    min-height:32px;
    padding:0 8px;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
  }
  .dof-tour-card .skip{display:none}
  .dof-tour-waiting{
    max-width:82px;
    overflow:hidden;
    white-space:nowrap;
    align-self:center;
    font-size:10px;
    gap:4px;
  }
  .dof-tour-waiting i{
    width:6px;
    height:6px;
    box-shadow:0 0 0 4px rgba(219,39,119,.11);
  }
  .dof-tour-focus{border-width:3px;border-radius:13px}
  .dof-tour-pointer{
    width:84px;
    padding:5px 7px;
    font-size:9px;
  }
  .dof-tour-hand{font-size:14px}
  .dof-tour-toast{
    bottom:calc(clamp(96px,17svh,132px) + max(18px,env(safe-area-inset-bottom)));
    padding:9px 12px;
    font-size:11px;
  }
}

@media(max-width:760px) and (max-height:560px){
  .dof-tour-card,
  html.dof-tour-modal-context .dof-tour-card.is-modal-context{
    height:clamp(82px,15svh,96px);
    max-height:clamp(82px,15svh,96px);
    padding:6px 7px;
  }
  .dof-tour-card .dof-tour-step-row{display:none!important}
  .dof-tour-card h3{grid-row:2;font-size:12px}
  .dof-tour-do-this{grid-row:3/5;padding:5px 7px}
  .dof-tour-do-this b{display:none}
  .dof-tour-do-this span{-webkit-line-clamp:2;font-size:10.5px}
  .dof-tour-card button{min-height:28px;padding:0 7px;font-size:9px}
  .dof-tour-toast{bottom:calc(clamp(82px,15svh,96px) + max(14px,env(safe-area-inset-bottom)))}
}