/* ==========================================================================
   Homepage section — "Find Your OMONYMA Colour" (teaser + popup)
   Approved concept #5 from the first round: Breathing Ring. Popup
   structure mirrors "Made for Your Movement" right above it on the
   homepage — same overlay/panel/close pattern, same z-index, same
   transition timing.
   ========================================================================== */

.omh-quiz-teaser{ padding:6rem 1.5rem; text-align:center; background:var(--color-bg); }
.omh-quiz-teaser .omh-eyebrow-soft{ font-size:1rem !important; letter-spacing:0.1em; margin-bottom:1.1rem; } /* scoped — bigger here only, doesn't affect the shared Genesis & Pnoe section above it */
.omh-quiz-teaser-ring-wrap{ width:100px; height:100px; margin:0 auto 2rem; position:relative; }
.omh-quiz-teaser-ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid #A5583A;
  animation:omhQuizBreathe 4s ease-in-out infinite, omhQuizRingColor 12s ease-in-out infinite;
}
.omh-quiz-teaser-ring::after{ content:""; position:absolute; inset:22px; border-radius:50%; background:currentColor; opacity:0.15; }
@keyframes omhQuizBreathe{ 0%,100%{ transform:scale(0.9); opacity:0.6; } 50%{ transform:scale(1.08); opacity:1; } }
@keyframes omhQuizRingColor{
  0%   { border-color:#A5583A; color:#A5583A; } /* Spicy Cinnamon */
  33%  { border-color:#4A6A52; color:#4A6A52; } /* Serenity Green */
  66%  { border-color:#6A5A8A; color:#6A5A8A; } /* Mystique Violet */
  100% { border-color:#A5583A; color:#A5583A; }
}
.omh-quiz-teaser-line1{ font-family:var(--font-display); font-size:clamp(1.4rem,1.15rem + 1.2vw,1.8rem); margin-bottom:0.5rem; color:var(--color-ink); }
.omh-quiz-teaser-line2{ font-size:0.92rem; color:var(--color-ink-soft); line-height:1.7; max-width:400px; margin:0 auto 2.2rem; }
.omh-quiz-teaser-cta{
  display:inline-block; background:var(--color-ink); color:var(--color-bg); border:none; text-decoration:none;
  padding:1rem 2.2rem; font-family:var(--font-ui); font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; cursor:pointer;
}
.omh-quiz-teaser-cta:hover{ opacity:0.88; }
@media (prefers-reduced-motion:reduce){ .omh-quiz-teaser-ring{ animation:none; } }

/* ---------- Product-page sidebar entry point (single-product.php) ---------- */
.omh-cq-sidebar-box{
  display:flex; align-items:center; gap:0.8rem; border:1px solid var(--color-line);
  padding:0.9rem 1rem; cursor:pointer; margin-top:1.4rem; margin-bottom:1.8rem;
}
.omh-cq-sidebar-box:hover{ border-color:var(--color-ink); }
.omh-cq-sidebar-dot{ width:28px; height:28px; border-radius:50%; border:1.5px solid #A5583A; flex-shrink:0; position:relative; }
.omh-cq-sidebar-dot::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:#A5583A; opacity:0.15; }
.omh-cq-sidebar-txt{ font-size:0.8rem; color:var(--color-ink-soft); line-height:1.45; }
.omh-cq-sidebar-txt b{ display:block; font-size:0.82rem; font-family:var(--font-ui); font-weight:600; color:var(--color-ink); margin-bottom:0.1rem; }

/* ---------- Popup: 7 questions → colour → real product ---------- */
.omh-cq-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(20,19,17,0.55);
  display:flex; align-items:center; justify-content:center; padding:2.5rem;
  opacity:0; transition:opacity 0.35s cubic-bezier(0.22,1,0.36,1);
}
.omh-cq-overlay.is-open{ opacity:1; }
.omh-cq-panel{
  background:var(--color-bg); width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  position:relative; box-shadow:0 30px 80px rgba(0,0,0,0.3);
  transform:translateY(16px); transition:transform 0.4s cubic-bezier(0.22,1,0.36,1); padding:3rem 2.6rem;
}
.omh-cq-overlay.is-open .omh-cq-panel{ transform:translateY(0); }
.omh-cq-close{ position:absolute; top:1.1rem; right:1.2rem; font-size:1.5rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--color-ink); cursor:pointer; z-index:1; }

@media (max-width:640px){
  .omh-cq-overlay{ padding:0; align-items:stretch; }
  .omh-cq-panel{ max-width:none; max-height:none; height:100%; overflow-y:auto; transform:translateY(100%); padding:1.6rem 1.3rem 3rem; }
  .omh-cq-overlay.is-open .omh-cq-panel{ transform:translateY(0); }
  .omh-cq-close{ top:0.9rem; right:0.9rem; }
}

/* ---------- Quiz content (rendered step-by-step into .omh-cq-flow-content) ---------- */
.omh-cq-progress{ display:flex; gap:0.4rem; justify-content:center; margin-bottom:2rem; }
.omh-cq-dot{ width:7px; height:7px; border-radius:50%; background:var(--color-line); transition:background 0.3s ease; }
.omh-cq-dot.done{ background:var(--color-ink); }
.omh-cq-dot.current{ background:var(--color-ink); transform:scale(1.3); }

.omh-cq-intro{ text-align:center; }
.omh-cq-intro h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,1.3rem + 1.6vw,2.2rem); margin-bottom:1.2rem; line-height:1.2; }
.omh-cq-intro p{ color:var(--color-ink-soft); font-size:0.92rem; line-height:1.7; max-width:400px; margin:0 auto 2.2rem; }

.omh-cq-btn{ background:var(--color-ink); color:var(--color-bg); border:none; padding:1.05rem 2.4rem; font-family:var(--font-ui); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }
.omh-cq-btn:hover{ opacity:0.88; }

.omh-cq-q-counter{ text-align:center; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:0.8rem; }
.omh-cq-q-text{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.2rem,1.0rem + 0.9vw,1.5rem); text-align:center; margin-bottom:2rem; line-height:1.35; }
.omh-cq-answers{ display:flex; flex-direction:column; gap:0.7rem; }
.omh-cq-answer{
  display:flex; align-items:center; gap:1rem; background:none; border:1px solid var(--color-line);
  padding:1rem 1.2rem; text-align:left; cursor:pointer; font-family:var(--font-ui); font-size:0.9rem; color:var(--color-ink);
  transition:all 0.2s ease; width:100%;
}
.omh-cq-answer:hover{ border-color:var(--color-ink); background:var(--color-bg-alt); }
.omh-cq-answer-letter{ font-family:var(--font-display); font-size:0.9rem; color:var(--color-ink-soft); flex-shrink:0; width:1.2rem; }
.omh-cq-back{ display:block; text-align:center; margin-top:1.6rem; font-size:0.76rem; color:var(--color-ink-soft); cursor:pointer; text-decoration:underline; background:none; border:none; font-family:var(--font-ui); }

.omh-cq-result{ text-align:center; }
.omh-cq-result-eyebrow{ font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-ink-soft); margin-bottom:0.8rem; }
.omh-cq-result-color{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem); margin-bottom:1.2rem; }
.omh-cq-result-headline{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; margin-bottom:1.2rem; color:var(--color-ink); line-height:1.5; }
.omh-cq-result .omh-cq-body{ color:var(--color-ink-soft); font-size:0.88rem; line-height:1.7; margin-bottom:1rem; text-align:left; }
.omh-cq-product-card{ display:flex; gap:1.1rem; align-items:center; border:1px solid var(--color-line); padding:1.1rem; margin:1.8rem 0 1.3rem; text-align:left; }
.omh-cq-product-swatch{ width:58px; height:72px; flex-shrink:0; object-fit:cover; }
.omh-cq-product-info .omh-cq-pname{ font-size:0.88rem; margin-bottom:0.2rem; }
.omh-cq-product-info .omh-cq-pprice{ font-size:0.86rem; color:var(--color-ink-soft); }
.omh-cq-stock-badge{ font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.3rem 0.55rem; display:inline-block; margin-top:0.4rem; }
.omh-cq-stock-badge.pre{ background:var(--color-ink); color:var(--color-bg); }
.omh-cq-stock-badge.out{ background:var(--color-bg); color:var(--color-ink-soft); border:1px solid var(--color-line); }
.omh-cq-stock-badge.soon{ background:var(--color-bg-alt); color:var(--color-ink-soft); }
.omh-cq-cta{ width:100%; background:var(--color-ink); color:var(--color-bg); border:none; padding:1.05rem; font-family:var(--font-ui); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; margin-bottom:0.9rem; }
.omh-cq-cta:disabled{ opacity:0.5; cursor:default; }
.omh-cq-retake{ font-size:0.78rem; color:var(--color-ink-soft); text-decoration:underline; cursor:pointer; background:none; border:none; font-family:var(--font-ui); }
.omh-cq-added-msg{ font-size:0.8rem; color:var(--color-ink); margin-top:-0.3rem; margin-bottom:0.9rem; display:none; }
.omh-cq-added-msg.show{ display:block; }

/* ==========================================================================
   "Find Your OMONYMA Colour" — discreet corner prompt (Yoga Mats
   category archive only). Slide-up + fade entrance, stays visible
   until dismissed — no auto-hide.
   ========================================================================== */
.omh-cq-prompt{
  position:fixed; bottom:1.5rem; right:1.5rem; width:280px; max-width:calc(100vw - 2.4rem); z-index:400;
  background:var(--color-bg); border:1px solid var(--color-line); box-shadow:0 15px 40px rgba(20,19,17,0.15); padding:1.3rem;
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.omh-cq-prompt.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.omh-cq-prompt-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.6rem; }
.omh-cq-prompt-eyebrow{ font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-ink-soft); }
.omh-cq-prompt p{ font-size:0.86rem; line-height:1.5; margin-bottom:1rem; color:var(--color-ink); }
.omh-cq-prompt-cta{
  display:block; width:100%; background:var(--color-ink); color:var(--color-bg); border:none;
  padding:0.65rem 1.2rem; font-family:var(--font-ui); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer;
}
.omh-cq-prompt-dismiss{ background:none; border:none; cursor:pointer; color:var(--color-ink-soft); font-size:1rem; line-height:1; padding:0.2rem; }
.omh-cq-prompt-dismiss:hover{ color:var(--color-ink); }

@media (max-width:600px){
  .omh-cq-prompt{ right:1rem; bottom:1rem; }
}