/* ══════════════════════════════════════════════════════════════════════
   ۰) توکن‌های تم
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --brand:        #EE2A7B;
  --brand-600:    #D41F6B;
  --brand-050:    #FEEAF2;

  --mint:         #A7DDB8;
  --mint-050:     #EAF7EE;

  --dark:         #1A1A1C;
  --bg:           #F4F4F6;
  --surface:      #FFFFFF;
  --surface-2:    #FAFAFB;
  --ink:          #1C1C1E;
  --ink-soft:     #6B6B72;
  --ink-faint:    #9B9BA3;
  --line:         #ECECEF;
  --line-strong:  #DEDEE3;

  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  --sh-sm:    0 1px 3px rgba(20,20,25,.05);
  --sh-md:    0 4px 14px rgba(20,20,25,.07);
  --sh-brand: 0 10px 26px rgba(238,42,123,.30);

  --header-h:  0px;
  --cartbar-h: 67px;
  --sq-bottom-nav: 0px;
  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 32px);
  --ease: cubic-bezier(.22,.9,.28,1);
}
@media (max-width:767.98px){
  :root{--sq-bottom-nav:100px}
}

/* ══════════════════════════════════════════════════════════════════════
   ۱) ریست — فقط داخل کوییز، نه روی هدر/فوتر فروشگاه
   ══════════════════════════════════════════════════════════════════════ */
.skin-quiz-page,
.skin-quiz-page *,
.skin-quiz-page *::before,
.skin-quiz-page *::after{box-sizing:border-box}
.skin-quiz-page-root{
  width:100%;
  max-width:100%;
  min-height:calc(100dvh - var(--header-h, 0px) - var(--sq-bottom-nav, 0px));
  display:flex;
  flex-direction:column;
}
.skin-quiz-page{
  font-family:inherit,Tahoma,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  min-height:0;
}
.skin-quiz-page img{max-width:100%;display:block}
.skin-quiz-page a{color:inherit;text-decoration:none}
.skin-quiz-page button:not(.pkg):not(.choice):not(.btn){font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
.skin-quiz-page h1,.skin-quiz-page h2,.skin-quiz-page h3,.skin-quiz-page h4{margin:0;line-height:1.5;font-weight:800;letter-spacing:-.01em}
.skin-quiz-page p{margin:0}
.skin-quiz-page ul,.skin-quiz-page ol{margin:0;padding:0;list-style:none}
.skin-quiz-page [hidden]{display:none!important}
.skin-quiz-page :focus-visible{outline:3px solid rgba(238,42,123,.45);outline-offset:3px;border-radius:8px}
.skin-quiz-page .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ══════════════════════════════════════════════════════════════════════
   ۲) هدر
   ══════════════════════════════════════════════════════════════════════ */
.skin-quiz-page .topbar{background:var(--dark);color:rgba(255,255,255,.72);font-size:12.5px}
.skin-quiz-page .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px}
.skin-quiz-page .topbar nav{display:flex;gap:18px}
.skin-quiz-page .topbar a:hover{color:#fff}
.skin-quiz-page .topbar .note{color:rgba(255,255,255,.5)}

.skin-quiz-page .header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.skin-quiz-page .header .wrap{display:flex;align-items:center;gap:18px;height:var(--header-h)}

.skin-quiz-page .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:.02em;flex:none}
.skin-quiz-page .logo .mark{width:30px;height:30px;border-radius:50%;background:var(--dark);display:grid;place-items:center;flex:none}
.skin-quiz-page .logo .mark svg{width:17px;height:17px}

.skin-quiz-page .nav{display:flex;gap:4px;margin-inline-start:8px}
.skin-quiz-page .nav a{padding:8px 13px;border-radius:var(--r-full);font-size:14px;font-weight:500;color:var(--ink-soft);transition:.18s var(--ease)}
.skin-quiz-page .nav a:hover{background:#F1F1F4;color:var(--ink)}
.skin-quiz-page .nav a[aria-current]{background:var(--brand-050);color:var(--brand);font-weight:600}

.skin-quiz-page .header .grow{flex:1}

.skin-quiz-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-full);font-weight:700;font-size:15px;
  padding:14px 30px;transition:.2s var(--ease);white-space:nowrap;
}
.skin-quiz-page .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.skin-quiz-page .btn-primary:hover{background:var(--brand-600);transform:translateY(-1px)}
.skin-quiz-page .btn-primary:active{transform:translateY(0)}
.skin-quiz-page .btn-sm{padding:9px 18px;font-size:13.5px}
.skin-quiz-page .btn-ghost{
  background:var(--surface);color:var(--ink-soft);
  border:1px solid var(--line-strong);box-shadow:var(--sh-sm);
  padding:12px 24px;
}
.skin-quiz-page .btn-ghost:hover{color:var(--ink);border-color:var(--ink-faint)}
.skin-quiz-page .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none!important}

/* ══════════════════════════════════════════════════════════════════════
   ۳) اسکلت مرحله‌ها
   ══════════════════════════════════════════════════════════════════════ */
.skin-quiz-page main{flex:1;display:flex;min-height:0;width:100%}

.step{
  width:100%;
  display:none;
  align-content:start;
  padding-block:clamp(24px,5vw,56px) 0;
}
.step.is-active{display:grid;animation:stepIn .42s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.step--top{align-content:start;padding-block:0}
#step7.step{padding-top:clamp(24px,5vw,48px)}
.step--nonav{padding-bottom:clamp(40px,7vw,72px)}

.step:not(.step--nonav){
  padding-bottom:calc(84px + var(--sq-bottom-nav, 0px));
}

/* ── نوار چسبان دکمه‌های ناوبری ── */
.step-nav{
  position:fixed;inset-inline:0;bottom:var(--sq-bottom-nav, 0px);z-index:40;
  margin-top:0;
  background:rgba(244,244,246,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line-strong);
  padding-block:13px;
}
.step-nav .wrap{display:flex;align-items:center;justify-content:center;gap:12px}
.step-nav .btn{padding-block:12px}
/* روی صفحه‌ی محصولات، بالای نوار سبد می‌نشیند */
body.cart-open .step-nav{bottom:calc(var(--sq-bottom-nav, 0px) + var(--cartbar-h))}

@media (min-width:768px){
  .step:not(.step--nonav){padding-bottom:0}
  .step-nav{
    position:sticky;bottom:0;z-index:30;
    margin-top:clamp(24px,5vw,40px);
    padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px));
  }
  body.cart-open .step-nav{bottom:calc(var(--cartbar-h) + env(safe-area-inset-bottom, 0px))}
}

/* ── نشانگر مرحله‌ها ── */
.stepper{display:flex;align-items:center;justify-content:center}
.stepper li{display:flex;align-items:center}
.stepper li + li::before{
  content:"";flex:none;
  width:clamp(16px,4.5vw,30px);height:2px;border-radius:2px;
  background:var(--line-strong);
  transition:background .3s var(--ease);
}
.stepper li.is-done + li::before,
.stepper li.is-current::before{background:var(--brand)}
.step-dot{
  width:27px;height:27px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:800;line-height:1;
  border:2px solid var(--line-strong);
  background:var(--surface);color:var(--ink-faint);
  transition:.25s var(--ease);
}
.is-done .step-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.is-current .step-dot{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 0 0 4px rgba(238,42,123,.16);
}

/* دایره‌ی ماسکات (پایه) */
.orb{
  position:relative;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--mint-050) 46%, #DCEFE3 100%);
  box-shadow:0 24px 50px -18px rgba(20,20,25,.20), inset 0 0 0 1px rgba(255,255,255,.7);
  display:grid;place-items:center;flex:none;
  transition:.25s var(--ease);
}
.orb-inner{width:78%;height:78%;display:grid;place-items:center}
.orb-inner img{width:100%;height:100%;object-fit:contain}
.orb.has-photo{overflow:hidden}
.orb.has-photo .orb-inner,
.orb.has-photo .orb-inner .fb{
  width:100%;height:100%;
  overflow:hidden;border-radius:50%;
}
.orb.has-photo .orb-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.orb-inner svg{width:100%;height:100%}

/* ══════════════════════════════════════════════════════════════════════
   ۴) مرحله ۱ — خوشامدگویی
   ══════════════════════════════════════════════════════════════════════ */
#step1.step.is-active{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  min-height:calc(100dvh - var(--header-h, 0px) - var(--sq-bottom-nav, 0px));
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#step1 .wrap{
  margin-block:auto;
  width:100%;
  max-width:min(var(--maxw), 100%);
}

.welcome-grid{
  display:grid;
  justify-items:center;
  gap:clamp(18px,5vw,38px);
  width:100%;
}
.welcome-grid > .orb{width:min(68vw, min(42vh, 330px));max-width:100%}

.copy{display:grid;justify-items:center;gap:clamp(12px,3vw,18px);text-align:center;max-width:min(34rem,100%);width:100%}
.copy h1{font-size:clamp(18px,5.6vw,27px);line-height:1.7;text-wrap:balance;max-width:100%}
.copy h1 .hl{color:var(--brand)}
.copy p{color:var(--ink-soft);font-size:clamp(13.5px,3.9vw,16.5px);line-height:2.05;max-width:min(30rem,100%);text-wrap:pretty}
.copy .btn{margin-top:8px;width:100%;max-width:min(290px,100%)}
#step1 .copy .btn{white-space:normal;text-wrap:balance}

@media (max-height:720px){
  #step1.step.is-active{padding-block:clamp(12px,3vh,24px) clamp(12px,3vh,28px)}
  .welcome-grid{gap:clamp(12px,3vh,22px)}
  .welcome-grid > .orb{width:min(56vw, min(34vh, 240px))}
  .copy{gap:clamp(8px,2vh,14px)}
}

@media (max-width:767.98px){
  body.skin-quiz-open .page-content{
    padding-top:0!important;
    margin-top:0;
  }
  .step.is-active{
    align-content:start;
    justify-content:flex-start;
    padding-top:10px;
  }
  #step1.step.is-active{
    padding-block:10px 0;
  }
  #step1 .wrap{
    margin-block-start:0;
    margin-block-end:auto;
  }
  #step7.step.is-active{padding-top:10px}
}

.reassure{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  font-size:clamp(11.5px,3.2vw,12.5px);color:var(--ink-faint);margin-top:-4px;
  max-width:100%;
}
.reassure .sep{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}

/* ══════════════════════════════════════════════════════════════════════
   ۵) سرتیتر سؤال‌ها
   ══════════════════════════════════════════════════════════════════════ */
.q-head{
  display:grid;justify-items:center;text-align:center;gap:12px;
  margin-bottom:clamp(24px,5vw,40px);
}
.q-head h2{font-size:clamp(22px,5.4vw,30px)}
.q-head p{color:var(--ink-soft);font-size:clamp(13.5px,3.6vw,15px);max-width:36rem;text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════════════
   ۶) کارت‌های انتخاب (مرحله ۲، ۳ و ۴)
   ══════════════════════════════════════════════════════════════════════ */
.choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,3.2vw,18px);
  max-width:760px;
  margin-inline:auto;
  width:100%;
}
.skin-quiz-page .choice{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  justify-items:center;
  gap:clamp(12px,3vw,16px);
  background:var(--surface);
  border:1.5px solid transparent;
  border-radius:var(--r-xl);
  padding:clamp(16px,4.2vw,24px) clamp(12px,3vw,18px);
  box-shadow:var(--sh-sm);
  transition:.22s var(--ease);
}
.choice .orb{width:min(74%,148px);box-shadow:0 12px 26px -14px rgba(20,20,25,.22), inset 0 0 0 1px rgba(255,255,255,.7)}

.choice-body{display:grid;gap:5px;text-align:center;align-content:start}
.choice-title{font-weight:800;font-size:clamp(14.5px,4vw,17px);line-height:1.6;transition:color .2s var(--ease)}
.choice-desc{
  font-weight:500;font-size:clamp(12px,3.3vw,13px);
  color:var(--ink-faint);line-height:1.85;
  transition:color .2s var(--ease);
}

/* تیک گوشه‌ی کارت */
.choice-tick{
  position:absolute;top:10px;inset-inline-end:10px;
  width:27px;height:27px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(238,42,123,.4);
  opacity:0;transform:scale(.4);
  transition:.25s var(--ease);
}
.choice-tick svg{width:14px;height:14px}

@media (hover:hover){
  .choice:not([aria-disabled="true"]):hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand)}
  .choice:not([aria-disabled="true"]):hover .choice-title{color:var(--brand)}
}

.choice[aria-pressed="true"]{
  border-color:var(--brand);
  background:rgba(238,42,123,.045);
  box-shadow:0 0 0 3px rgba(238,42,123,.12), var(--sh-md);
}
.choice[aria-pressed="true"] .orb{
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--brand-050) 48%, #FBD3E4 100%);
  box-shadow:0 14px 30px -14px rgba(238,42,123,.4), inset 0 0 0 2px var(--brand);
}
.choice[aria-pressed="true"] .choice-tick{opacity:1;transform:scale(1)}
.choice[aria-pressed="true"] .choice-title{color:var(--brand)}
.choice[aria-pressed="true"] .choice-desc{color:rgba(238,42,123,.75)}

.choice[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.choice[aria-disabled="true"] .orb{filter:grayscale(.5)}

/* ── نسخه‌ی فشرده (مرحله ۳ و ۴): فقط دایره و عنوان ── */
.choices--tile .choice{
  grid-template-rows:auto auto;
  gap:clamp(9px,2.6vw,13px);
  padding:clamp(14px,3.6vw,20px) clamp(10px,2.6vw,16px);
  border-radius:var(--r-lg);
}
.choices--tile .choice .orb{width:min(62%,116px)}
.choices--tile .choice-title{font-size:clamp(13.5px,3.7vw,15.5px)}

/* ══════════════════════════════════════════════════════════════════════
   ۷) نوار چسبان سؤال (مرحله ۳ و ۴)
   ══════════════════════════════════════════════════════════════════════ */
.q-bar{
  position:sticky;top:var(--header-h, 0px);z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line-strong);
  padding-block:clamp(14px,3.5vw,20px);
  margin-bottom:clamp(16px,4vw,26px);
}
.q-bar-inner{max-width:820px;margin-inline:auto;display:grid;gap:10px;justify-items:center}
.q-meta{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  width:100%;font-size:12.5px;
}
.q-hint{color:var(--ink-faint);font-weight:500;font-size:12.5px}
.q-counter{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line-strong);
  padding:4px 12px;border-radius:var(--r-full);
  transition:.2s var(--ease);
}
.q-counter b{color:var(--brand)}
.q-counter.is-full{background:var(--brand);border-color:var(--brand);color:#fff}
.q-counter.is-full b{color:#fff}
.q-counter.bump{animation:bump .34s var(--ease)}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.09)}}

.q-box{
  width:100%;
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:clamp(11px,3.2vw,15px) clamp(14px,4vw,22px);
  text-align:center;
  display:grid;
  justify-items:center;
  gap:8px;
}
.q-box h2{font-size:clamp(15px,4vw,19px);line-height:1.75;text-wrap:balance}
.q-box .q-counter,
.q-box .q-hint{justify-self:center}

.other-field{
  max-width:760px;margin:18px auto 0;
  display:grid;gap:8px;
  animation:stepIn .3s var(--ease);
}
.other-field label{font-size:13px;font-weight:600}
.other-field textarea{
  font:inherit;font-size:14.5px;color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);padding:12px 14px;resize:vertical;min-height:84px;
  transition:.18s var(--ease);
}
.other-field textarea::placeholder{color:var(--ink-faint)}
.other-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(238,42,123,.12)}

/* ══════════════════════════════════════════════════════════════════════
   ۸) مرحله ۵ — انتخاب بودجه
   ══════════════════════════════════════════════════════════════════════ */
.pkg-head,.head-block{
  display:grid;justify-items:center;text-align:center;gap:12px;
  max-width:820px;margin:0 auto clamp(26px,6vw,44px);
}
.pkg-head .q-box,.head-block .q-box{width:100%}
.q-sub{color:var(--ink-soft);font-size:clamp(13.5px,3.7vw,15.5px);line-height:2;max-width:46ch;text-wrap:pretty}
.q-sub b{color:var(--ink);font-weight:700}

.pkgs{display:grid;gap:clamp(16px,3.6vw,22px);max-width:920px;margin-inline:auto;width:100%}
.skin-quiz-page .pkg{
  position:relative;
  display:flex;align-items:center;gap:clamp(14px,3.6vw,22px);
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:clamp(18px,4.4vw,24px);
  box-shadow:var(--sh-sm);
  transition:.22s var(--ease);
}
.pkg-body{flex:1;min-width:0;display:grid;gap:10px}
.pkg-name{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);
  padding:10px 14px;background:var(--surface-2);
  font-weight:800;font-size:clamp(15px,4.1vw,17.5px);
  transition:.22s var(--ease);
}
.pkg-price{color:var(--brand);font-size:clamp(13.5px,3.5vw,15px)}
.pkg-price small{font-weight:500;font-size:11.5px;color:var(--ink-faint);margin-inline-start:3px}

.pkg-feats{display:grid;gap:7px}
.pkg-feats li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:clamp(12.5px,3.4vw,13.5px);color:var(--ink-soft);line-height:1.8;
}
.pkg-feats svg{width:14px;height:14px;flex:none;margin-top:6px;color:var(--brand)}

.pkg .orb{width:clamp(78px,22vw,108px)}
.pkg .choice-tick{width:26px;height:26px}

.pkg-badge{
  position:absolute;top:-11px;inset-inline-start:22px;
  background:var(--brand);color:#fff;
  font-size:11.5px;font-weight:700;line-height:1.9;
  padding:1px 13px;border-radius:var(--r-full);
  box-shadow:0 6px 16px rgba(238,42,123,.35);
}
.pkg--featured{border-color:var(--brand);box-shadow:0 12px 30px -14px rgba(238,42,123,.4)}

@media (hover:hover){
  .pkg:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand)}
  .pkg:hover .orb{transform:translateY(-3px)}
}
.pkg[aria-pressed="true"]{
  border-color:var(--brand);
  background:rgba(238,42,123,.045);
  box-shadow:0 0 0 3px rgba(238,42,123,.13), var(--sh-md);
}
.pkg[aria-pressed="true"] .pkg-name{border-color:var(--brand);background:var(--surface)}
.pkg[aria-pressed="true"] .orb{
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--brand-050) 48%, #FBD3E4 100%);
  box-shadow:0 12px 26px -12px rgba(238,42,123,.45), inset 0 0 0 2px var(--brand);
}
.pkg[aria-pressed="true"] .choice-tick{opacity:1;transform:scale(1)}

.skin-quiz-page .pkg-note{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(16px,3.5vw,22px);
  font-size:12.5px;color:var(--ink-faint);text-align:center;
}
.pkg-note svg{width:14px;height:14px;flex:none}
.pkg-note .sep{width:4px;height:4px;border-radius:50%;background:var(--line-strong);flex:none}

/* ══════════════════════════════════════════════════════════════════════
   ۹) مرحله ۶ — انیمیشن ساخت روتین
   ══════════════════════════════════════════════════════════════════════ */
.load-row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,4.5vw,48px);
  max-width:760px;margin-inline:auto;width:100%;
}
.load-orb{position:relative;flex:none;display:grid;place-items:center}
.load-orb .orb{width:clamp(96px,26vw,196px);animation:bob 2.8s ease-in-out infinite}
.load-orb::before{
  content:"";position:absolute;inset:clamp(-16px,-3.4vw,-10px);
  border-radius:50%;border:2px dashed rgba(238,42,123,.3);
  animation:spin 9s linear infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spin{to{transform:rotate(360deg)}}

.load-row.is-complete .load-orb::before{
  border-style:solid;border-color:var(--brand);
  animation:pop .5s var(--ease);
}
.load-row.is-complete .load-orb .orb{animation:cheer .6s var(--ease)}
@keyframes pop{0%{transform:scale(.86);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes cheer{0%{transform:translateY(0)}40%{transform:translateY(-14px) scale(1.04)}100%{transform:translateY(0)}}

.load-rail{flex:1;max-width:340px;min-width:0}
.load-step{
  position:relative;
  display:flex;align-items:center;gap:clamp(10px,3vw,15px);
  padding-block:clamp(13px,3.4vw,19px);
}
.load-step::before,
.load-step::after{
  content:"";position:absolute;inset-inline-start:13px;top:50%;width:2px;
}
.load-step::before{
  height:100%;
  background:repeating-linear-gradient(to bottom,var(--line-strong) 0 5px,transparent 5px 10px);
}
.load-step::after{height:0;background:var(--brand);transition:height .55s var(--ease)}
.load-step.is-done::after{height:100%}
.load-step:last-child::before,.load-step:last-child::after{display:none}

.load-dot{
  position:relative;z-index:2;flex:none;
  width:28px;height:28px;border-radius:50%;
  border:2px solid var(--line-strong);background:var(--bg);
  display:grid;place-items:center;
  transition:.3s var(--ease);
}
.load-dot svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.4);transition:.25s var(--ease)}
.load-step.is-active .load-dot{border-color:var(--brand);box-shadow:0 0 0 5px rgba(238,42,123,.13)}
.load-step.is-active .load-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
.load-step.is-done .load-dot{background:var(--brand);border-color:var(--brand)}
.load-step.is-done .load-dot svg{opacity:1;transform:scale(1)}

.load-label{
  font-size:clamp(13px,3.6vw,15px);font-weight:600;line-height:1.7;
  color:var(--ink-faint);transition:color .3s var(--ease);
}
.load-step.is-active .load-label{color:var(--brand)}
.load-step.is-done  .load-label{color:var(--ink)}

.load-cta{
  display:grid;justify-items:center;gap:12px;
  margin-top:clamp(26px,6vw,42px);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:.45s var(--ease);
}
.load-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.load-cta p{font-size:13.5px;color:var(--ink-soft)}

/* ══════════════════════════════════════════════════════════════════════
   ۱۰) مرحله ۷ — محصولات روتین
   ══════════════════════════════════════════════════════════════════════ */
.budget-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--ink-soft);font-size:12.5px;font-weight:600;
  padding:5px 14px;border-radius:var(--r-full);
  cursor:pointer;
}
@media (hover:hover){
  .budget-chip:hover{border-color:var(--brand);color:var(--ink)}
}
.budget-chip b{color:var(--brand)}

.cats{max-width:1000px;margin-inline:auto;width:100%}
.cat{margin-bottom:clamp(30px,6.5vw,48px)}
.cat:last-child{margin-bottom:0}

.cat-head{display:flex;align-items:center;gap:11px;margin-bottom:clamp(14px,3.4vw,20px)}
.cat-num{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;
  box-shadow:0 5px 14px rgba(238,42,123,.3);
}
.cat-head h3{font-size:clamp(15.5px,4.2vw,19px);white-space:nowrap}
.cat-head .rule{flex:1;height:1px;background:var(--line-strong);min-width:16px}
.cat-head .note{font-size:12px;color:var(--ink-faint);white-space:nowrap}

.spotlight{
  margin-bottom:clamp(30px,6.5vw,48px);
  background:linear-gradient(180deg,#FEEAF2 0%,#fff 78%);
  border:1.5px solid #F7B7CE;
  border-radius:var(--r-xl);
  padding:clamp(16px,4vw,22px);
  box-shadow:0 12px 30px rgba(238,42,123,.12);
}
.spotlight-body{display:grid;gap:14px}
.spotlight-copy{display:flex;gap:12px;align-items:flex-start}
.spotlight-icon{
  width:44px;height:44px;flex:none;border-radius:14px;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 18px rgba(238,42,123,.28);
}
.spotlight-icon svg{width:22px;height:22px}
.spotlight-copy h3{font-size:clamp(16px,4.2vw,20px);color:var(--brand-600);margin-bottom:4px}
.spotlight-copy p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}
.spotlight .prods{
  display:block;
  max-width:none;
  grid-template-columns:unset;
}
.spotlight .prod,
.spotlight .prod-h{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-color:#F7B7CE;
  background:#fff;
}
.spotlight .prod-img{
  width:72px;height:72px;flex:none;
  aspect-ratio:auto;
  border-radius:12px;
}
.spotlight .prod-info{
  display:grid;
  flex:1;
  min-width:0;
  grid-template-columns:minmax(0,1fr) 148px;
  grid-template-areas:
    "name cart"
    "price cart";
  column-gap:12px;
  row-gap:2px;
  align-items:center;
}
.spotlight .prod-name{
  grid-area:name;
  min-height:0;
  margin:0;
  font-size:13.5px;
  line-height:1.5;
}
.spotlight .prod-price{
  grid-area:price;
  font-size:14px;
  margin:0;
}
.spotlight .cartctl{
  grid-area:cart;
  width:148px;
}
.spotlight .prod-add{height:34px;font-size:12px}
.spotlight .qty{height:34px;grid-template-columns:34px 1fr 34px}
@media (hover:hover){
  .spotlight .prod:hover{transform:none}
}
@media (max-width:520px){
  .spotlight .prod-img{width:64px;height:64px}
  .spotlight .prod-info{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "name"
      "price"
      "cart";
  }
  .spotlight .cartctl{width:100%}
}

.prods{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.8vw,16px)}
.prod{
  display:grid;gap:9px;align-content:start;
  background:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:var(--r-lg);padding:clamp(10px,3vw,14px);
  box-shadow:var(--sh-sm);transition:.2s var(--ease);
}
@media (hover:hover){ .prod:hover{border-color:var(--brand);box-shadow:var(--sh-md);transform:translateY(-3px)} }

.prod-img{
  aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(160deg,var(--mint-050) 0%,#FFFFFF 72%);
  display:grid;place-items:center;
}
.prod-img svg{width:92%;height:92%}

.prod-name{
  font-size:clamp(12.5px,3.4vw,14px);font-weight:700;line-height:1.75;
  min-height:3.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prod-price{font-size:clamp(13px,3.5vw,15px);font-weight:800}
.prod-price small{font-weight:500;font-size:11px;color:var(--ink-faint);margin-inline-start:3px}

.cartctl{display:grid}
.prod-add{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:40px;
  border:1.5px solid var(--brand);border-radius:var(--r-md);
  background:var(--surface);color:var(--brand);
  font-weight:700;font-size:12.5px;
  transition:.18s var(--ease);
}
.prod-add svg{width:14px;height:14px;flex:none}
@media (hover:hover){ .prod-add:hover{background:var(--brand);color:#fff} }

.qty{
  display:grid;grid-template-columns:40px 1fr 40px;align-items:stretch;
  height:40px;border-radius:var(--r-md);overflow:hidden;
  background:var(--brand);
  box-shadow:0 6px 16px -6px rgba(238,42,123,.5);
  animation:qtyIn .28s var(--ease);
}
@keyframes qtyIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.qty-btn{display:grid;place-items:center;color:#fff;transition:background .15s var(--ease)}
.qty-btn svg{width:16px;height:16px}
.qty-btn:hover{background:rgba(255,255,255,.2)}
.qty-btn:disabled{opacity:.4;cursor:not-allowed;background:none}
.qty-btn.is-trash svg{width:15px;height:15px}
.qty-num{
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14.5px;
  background:rgba(255,255,255,.14);
}
.qty-num.bump{animation:bump .3s var(--ease)}

.cart-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:clamp(22px,5vw,32px);
  font-size:13px;color:var(--ink-faint);text-align:center;
}

/* ── پیام فلش ── */
.toast{
  position:fixed;top:calc(var(--header-h, 0px) + 16px);inset-inline:0;
  z-index:70;display:flex;justify-content:center;
  pointer-events:none;padding-inline:16px;
}
.toast-msg{
  display:inline-flex;align-items:center;gap:10px;
  max-width:min(100%,30rem);text-align:start;
  background:var(--dark);color:#fff;
  font-size:13px;font-weight:600;line-height:1.75;
  padding:11px 18px;border-radius:var(--r-lg);
  box-shadow:0 14px 34px rgba(20,20,25,.3);
  opacity:0;transform:translateY(-14px) scale(.96);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toast-msg.is-on{opacity:1;transform:none}
.toast-msg svg{width:17px;height:17px;flex:none}
.toast-msg.ok   svg{color:#6FE0A0}
.toast-msg.gone svg{color:#FFC531}
.toast-msg span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── نوار چسبان سبد خرید ── */
.cartbar{
  position:fixed;inset-inline:0;bottom:var(--sq-bottom-nav);z-index:45;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -8px 30px rgba(20,20,25,.11);
  padding-block:12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateY(120%);
  transition:transform .4s var(--ease);
}
.cartbar.is-on{transform:none}
.cartbar .wrap{display:flex;align-items:center;gap:12px}
.cartbar .grow{flex:1}
.cartbar .btn{padding:12px clamp(18px,4vw,28px);font-size:clamp(13px,3.6vw,14.5px)}

.cartbar-info{display:flex;align-items:center;gap:11px;min-width:0}
.cartbar-badge{
  position:relative;flex:none;
  width:42px;height:42px;border-radius:50%;
  background:var(--brand-050);color:var(--brand);
  display:grid;place-items:center;
}
.cartbar-badge > svg{width:20px;height:20px}
.cartbar-badge > span{
  position:absolute;top:-4px;inset-inline-start:-4px;
  min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-full);
  background:var(--brand);color:#fff;
  font-size:11.5px;font-weight:800;line-height:1;
  display:grid;place-items:center;
  box-shadow:0 3px 9px rgba(238,42,123,.4);
}
.cartbar-badge > span.bump{animation:bump .34s var(--ease)}

.cartbar-text{display:grid;gap:1px;min-width:0}
.cartbar-text b{font-size:clamp(14px,3.9vw,16px);font-weight:800;white-space:nowrap}
.cartbar-text b small{font-weight:500;font-size:11px;color:var(--ink-faint);margin-inline-start:3px}
.cartbar-text > small{font-size:11.5px;color:var(--ink-faint);white-space:nowrap}

body.cart-open footer{padding-bottom:calc(var(--sq-bottom-nav) + var(--cartbar-h) + 24px)}

/* ══════════════════════════════════════════════════════════════════════
   ۱۱) دسکتاپ
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .welcome-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,440px);
    align-items:center;justify-items:stretch;
    gap:clamp(32px,6vw,90px);
    width:100%;
  }
  .copy{grid-column:1;grid-row:1;justify-items:start;text-align:right;gap:22px;max-width:none}
  .copy h1{font-size:clamp(24px,3vw,36px);line-height:1.62}
  .copy p{font-size:clamp(15px,1.5vw,17px)}
  .copy .btn{width:auto;max-width:none;padding-inline:46px;margin-top:12px}
  .reassure{justify-content:flex-start;margin-top:0}
  .welcome-grid > .orb{grid-column:2;grid-row:1;width:100%;max-width:min(410px,36vw);justify-self:center}

  /* کارت‌ها: چهار ستون */
  .choices{grid-template-columns:repeat(4,1fr);max-width:1000px}
  .choice .orb{width:min(72%,140px)}
  .choices--tile{max-width:1000px}
  .choices--tile .choice .orb{width:min(64%,118px)}

  .q-bar-inner,.other-field{max-width:1000px}

  .pkgs{grid-template-columns:1fr 1fr;align-items:stretch}
  .skin-quiz-page .pkg{padding:26px 22px}
  .pkg .orb{width:96px}

  .cats{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,52px)}
  .cat{margin-bottom:clamp(26px,4vw,38px)}
  .cat:nth-last-child(-n+2){margin-bottom:0}
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۲) فوتر
   ══════════════════════════════════════════════════════════════════════ */
.skin-quiz-page .footer{background:var(--dark);color:rgba(255,255,255,.6);font-size:13.5px;padding-top:38px}
.skin-quiz-page .footer .cols{
  display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:28px;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1);
}
.skin-quiz-page .footer h4{margin:0 0 12px;color:#fff;font-size:14.5px;font-weight:700}
.skin-quiz-page .footer li{margin-bottom:8px}
.skin-quiz-page .footer a:hover{color:#fff}
.skin-quiz-page .footer .bar{
  padding:16px 0 22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.42);
}

@media (max-width:640px){
  .skin-quiz-page .topbar,.skin-quiz-page .nav{display:none}
  .step-nav .wrap{flex-wrap:wrap}
  .skin-quiz-page .step-nav .btn{flex:1 1 138px;padding-inline:16px}
  .skin-quiz-page .footer .cols{grid-template-columns:1fr;gap:22px}
}
@media (max-width:767.98px){
  .q-bar{
    padding-block:8px;
    margin-bottom:10px;
  }
  .q-head{
    gap:8px;
    margin-bottom:14px;
  }
  .pkg-head,.head-block{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .skin-quiz-page *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.prod-img img{width:100%;height:100%;object-fit:contain}

body.cart-open{--shop-sticky-offset:var(--cartbar-h)}

body.skin-quiz-open #coco-chat-root,
body:has(.skin-quiz-page) #coco-chat-root{
  display:none!important;
}

body.skin-quiz-open,
body.skin-quiz-open .page-wrapper,
body.skin-quiz-open .page-content{
  overflow-x:hidden;
  max-width:100%;
}
body.skin-quiz-open .page-content{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}