/* PerfectMatch Quiz.

   `zipRise` is the artboard's entrance easing for the answer chips and the
   result rows. Both rules below have always named it and no file has ever
   defined it, so neither has animated since the port; the definition comes from
   the `Home v2` artboard's own stylesheet. It lives here rather than in
   home.css because this widget is its only consumer — the same reason every
   other widget keyframe sits beside the widget that uses it. */
@keyframes zipRise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

.zp-perfectmatch-quiz.is-pinned .zp-perfectmatch-quiz__track { position:relative; height:250vh; }
.zp-perfectmatch-quiz.is-pinned .zp-perfectmatch-quiz__sticky { position:sticky; top:var(--zp-header-h,72px); height:calc(100vh - var(--zp-header-h,72px)); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.zp-perfectmatch-quiz__card { position:relative; overflow:hidden; padding:32px; border-radius:24px; background:var(--grad-zipify,linear-gradient(135deg,#000 0%,#0a3a79 100%)); box-shadow:inset 0 1px 0 rgba(255,255,255,.17), 0 22px 48px rgba(13,31,78,.22); color:#fff; }
.zp-perfectmatch-quiz__texture { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px); }
.zp-perfectmatch-quiz__inner { position:relative; }
.zp-perfectmatch-quiz__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.zp-perfectmatch-quiz__eyebrow { color:rgba(255,255,255,.55); }
.zp-perfectmatch-quiz__dots { display:flex; align-items:center; gap:6px; }
.zp-perfectmatch-quiz__dot { display:block; width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.28); transition:width 300ms var(--ease-out,ease), background 300ms var(--ease-out,ease); }
.zp-perfectmatch-quiz__dot.is-active { width:22px; background:var(--zip-yellow,#ffd748); }
.zp-perfectmatch-quiz__body { min-height:280px; }
.zp-perfectmatch-quiz__step { display:none; }
.zp-perfectmatch-quiz__step.is-active { display:block; }
.zp-perfectmatch-quiz__q { font-size:24px; font-weight:900; letter-spacing:-0.02em; line-height:1.2; color:#fff; margin-bottom:20px; }
.zp-perfectmatch-quiz__opts { display:flex; flex-direction:column; gap:10px; }
.zp-perfectmatch-quiz__opt { display:block; padding:13px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:rgba(255,255,255,.78); font-size:16px; animation:zipRise 420ms var(--ease-out,ease) both; }
.zp-perfectmatch-quiz__opt:nth-child(2) { animation-delay:70ms; } .zp-perfectmatch-quiz__opt:nth-child(3) { animation-delay:140ms; } .zp-perfectmatch-quiz__opt:nth-child(4) { animation-delay:210ms; }
.zp-perfectmatch-quiz__opt.is-picked { border-color:rgba(255,215,72,.55); background:rgba(255,215,72,.12); color:#fff; font-weight:700; }
.zp-perfectmatch-quiz__products { display:flex; flex-direction:column; gap:12px; }
.zp-perfectmatch-quiz__product { display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; border:1px solid rgba(255,215,72,.4); background:rgba(255,215,72,.1); animation:zipRise 460ms var(--ease-out,ease) both; }
.zp-perfectmatch-quiz__product:nth-child(2) { animation-delay:110ms; }
.zp-perfectmatch-quiz__thumb { flex:0 0 auto; width:64px; height:64px; border-radius:12px; overflow:hidden; background:#fff; }
.zp-perfectmatch-quiz__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* A row whose product carries no image renders the frame with nothing in it — a solid
   white 64px square on the dark card, which reads as a failed image rather than as an
   absent one. Home's two demo products have no photos in the repo, so this is the
   state the page actually ships in. */
.zp-perfectmatch-quiz__thumb:empty { display:none; }
.zp-perfectmatch-quiz__pbody { flex:1 1 auto; min-width:0; }
.zp-perfectmatch-quiz__pname { display:block; font-size:16px; font-weight:800; letter-spacing:-0.01em; color:#fff; }
.zp-perfectmatch-quiz__ptag { display:block; font-size:13px; line-height:1.4; color:rgba(255,255,255,.6); margin-bottom:4px; }
.zp-perfectmatch-quiz__pprice { display:block; font-size:15px; font-weight:700; color:var(--zip-yellow,#ffd748); }
.zp-perfectmatch-quiz__pprice s { font-weight:400; font-size:13px; color:rgba(255,255,255,.45); }
.zp-perfectmatch-quiz__add { flex:0 0 auto; padding:10px 16px; border-radius:999px; background:var(--zip-yellow,#ffd748); color:var(--ink-900,#1a1a1a); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.zp-perfectmatch-quiz__profile { margin-top:18px; padding:20px; border-radius:16px; border:1px solid rgba(255,215,72,.4); background:rgba(255,215,72,.1); }
.zp-perfectmatch-quiz__profile-title { color:var(--zip-yellow,#ffd748); margin-bottom:12px; }
.zp-perfectmatch-quiz__profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.zp-perfectmatch-quiz__k { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.zp-perfectmatch-quiz__v { display:block; font-size:15px; font-weight:700; color:#fff; }
@media (max-width:1023px) {
  .zp-perfectmatch-quiz.is-pinned .zp-perfectmatch-quiz__track { height:auto; }
  .zp-perfectmatch-quiz.is-pinned .zp-perfectmatch-quiz__sticky { position:static; height:auto; overflow:visible; }
}
@media (max-width:767px) {
  .zp-perfectmatch-quiz__product { flex-wrap:wrap; }
  .zp-perfectmatch-quiz__pbody { flex:1 1 120px; }
  .zp-perfectmatch-quiz__add { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .zp-perfectmatch-quiz__opt, .zp-perfectmatch-quiz__product { animation:none; }
  .zp-perfectmatch-quiz.is-pinned .zp-perfectmatch-quiz__track { height:auto; }
  .zp-perfectmatch-quiz.is-pinned .zp-perfectmatch-quiz__sticky { position:static; height:auto; overflow:visible; }
}