/* ===================== PDP QUIZ REVEAL =====================
   Uses the existing tokens only: --ink, --paper, --mono, GC Nordix.
   Compact on desktop so the PDP photography frames it; comfortable side
   margins and no overflow on mobile. */

.qr{
  position:fixed; inset:0; z-index:9996;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.qr.is-open{ display:flex; }

.qr__scrim{
  position:absolute; inset:0;
  background:rgba(44,44,44,.46);
  opacity:0; transition:opacity .32s ease;
}
.qr.is-in .qr__scrim{ opacity:1; }

.qr__panel{
  position:relative; box-sizing:border-box;
  width:min(420px,100%);
  background:var(--paper,#FBF7F7);
  border-radius:22px;
  padding:clamp(38px,5vw,52px) clamp(26px,4vw,40px) clamp(30px,4vw,40px);
  text-align:center;
  box-shadow:0 40px 90px -30px rgba(44,44,44,.5);
  opacity:0; transform:translateY(12px) scale(.99);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  overflow-y:auto;
}
.qr.is-in .qr__panel{ opacity:1; transform:none; }

.qr__x{
  position:absolute; top:8px; right:10px;
  width:44px; height:44px; padding:0;
  background:none; border:none; cursor:pointer;
  font-size:22px; line-height:1; color:rgba(44,44,44,.36);
  transition:color .2s ease;
}
@media(hover:hover){ .qr__x:hover{ color:var(--ink,#2C2C2C); } }

/* ---- the archetype is the focus ---- */
.qr__article{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  font-size:clamp(1rem,4vw,1.15rem); line-height:1.1; letter-spacing:-.015em;
  color:rgba(44,44,44,.5); margin:0 0 2px;
}
.qr__arch{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  font-size:clamp(2.1rem,8.6vw,2.7rem); line-height:.98; letter-spacing:-.03em;
  color:var(--ink,#2C2C2C); margin:0;
}
.qr__pers{ margin:clamp(16px,3vw,20px) auto 0; max-width:28ch; }
.qr__pers span{
  display:block;
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:400;
  text-transform:lowercase; font-size:.94rem; line-height:1.45; color:#5a524e;
}
.qr__pers span + span{ margin-top:8px; }

/* ---- match, secondary ---- */
.qr__label{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em;
  font-size:9.5px; font-weight:600; color:rgba(44,44,44,.45);
  margin:clamp(24px,4.5vw,30px) 0 5px;
}
.qr__flavor{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.02em; font-size:clamp(1.25rem,5vw,1.5rem); line-height:1.05;
  margin:0;
}
.qr[data-arch="chic"]       .qr__flavor{ color:#C15E72; }
.qr[data-arch="unbothered"] .qr__flavor{ color:#C9663F; }
.qr[data-arch="seductive"]  .qr__flavor{ color:#B81733; }

/* ---- CTA: same charcoal button as the rest of the site ---- */
.qr__cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; min-height:54px; padding:0 22px;
  margin-top:clamp(24px,4.5vw,32px);
  border:none; border-radius:14px; cursor:pointer;
  background:var(--ink,#2C2C2C); color:#F7EFE9;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; font-weight:600;
  transition:background .25s ease;
}
@media(hover:hover){ .qr__cta:hover{ background:#1a1a1a; } }

/* the PDP must not scroll behind the modal */
body.qr-open{ position:fixed; width:100%; overflow:hidden; }

@media (max-width:860px){
  .qr{ padding:18px; }
  .qr__panel{
    width:100%;
    padding:36px 22px calc(26px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px);
  }
  .qr__pers{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  .qr__panel,.qr__scrim{ transition:none; }
}