/* ===== Dosha Quiz — dedicated stylesheet (ultra-premium redesign) ===== */
/* Mobile-first: base = 320px, then only min-width overrides where a
   section actually changes. Colors on --ay-* tokens (sitewide).
   No dark-mode block in this version — removed per request; a future
   pass can reintroduce it. */

/* ── FIX: the sitewide .ay-btn class sets its own `display`, which beats
   the browser's default [hidden]{display:none} UA rule (equal specificity,
   author stylesheet wins) — so Back/Submit stayed visible on every step
   even though the JS correctly toggled the `hidden` attribute. Force it. ── */
[hidden] { display: none !important; }

/* ── Hero: animated gradient orbs + glass premium feel ── */
.ay-dq-hero {
  position: relative;
  padding: 40px 16px 32px;
  text-align: center;
  background: linear-gradient(180deg, var(--ay-surface-alt, #f6f4ef) 0%, var(--ay-surface, #fff) 100%);
  overflow: hidden;
  isolation: isolate;
}
.ay-dq-hero-inner { position: relative; z-index: 2; }
.ay-dq-hero-orb {
  position: absolute; z-index: 1; border-radius: 50%;
  filter: blur(46px); opacity: .35; pointer-events: none;
  animation: ayDqOrbFloat 16s ease-in-out infinite;
}
.ay-dq-hero-orb-1 { width: 220px; height: 220px; background: radial-gradient(circle, #7ec4e8, transparent 70%); top: -60px; left: -40px; }
.ay-dq-hero-orb-2 { width: 180px; height: 180px; background: radial-gradient(circle, #f0894a, transparent 70%); bottom: -50px; right: -30px; animation-delay: -5s; }
.ay-dq-hero-orb-3 { width: 150px; height: 150px; background: radial-gradient(circle, #8bc98a, transparent 70%); top: 40%; right: 10%; animation-delay: -10s; }
@keyframes ayDqOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(18px, -14px) scale(1.08); }
  66% { transform: translate(-14px, 12px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .ay-dq-hero-orb { animation: none; }
}

.ay-dq-eyebrow-premium {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, var(--ay-primary, #146c2e), #2e9a54);
  color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  box-shadow: 0 6px 18px -6px rgba(20,108,46,.55);
}
.ay-dq-hero-title {
  font-family: var(--ay-font-display, 'Fraunces', serif);
  font-size: 2rem; line-height: 1.12; margin: 14px 0 12px;
  background: linear-gradient(120deg, var(--ay-text, #1c2a20) 40%, var(--ay-primary, #146c2e));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ay-dq-hero-sub { max-width: 560px; margin: 0 auto 22px; color: var(--ay-text-muted, #5b6b60); line-height: 1.65; font-size: 15.5px; }

.ay-dq-btn-glow {
  position: relative; box-shadow: 0 10px 28px -8px rgba(20,108,46,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ay-dq-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(20,108,46,.65); }

.ay-dq-hero-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.ay-dq-hero-badge {
  font-size: 11.5px; font-weight: 700; color: var(--ay-primary, #146c2e);
  background: rgba(20,108,46,.08); border: 1px solid rgba(20,108,46,.18);
  border-radius: 999px; padding: 5px 11px;
}

.ay-breadcrumb { font-size: 12.5px; color: var(--ay-text-muted, #5b6b60); margin-bottom: 14px; }
.ay-breadcrumb a { color: inherit; text-decoration: none; }

/* ── Quicknav ── */
.ay-dq-quicknav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ay-surface, #fff) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ay-border, #e4e9e5);
  overflow-x: auto;
}
.ay-dq-quicknav-inner {
  display: flex; gap: 18px; padding: 12px 16px;
  white-space: nowrap; position: relative;
}
.ay-dq-quicknav-inner a {
  font-size: 13px; font-weight: 600; color: var(--ay-text-muted, #5b6b60);
  text-decoration: none; padding: 4px 2px; transition: color .15s ease;
}
.ay-dq-quicknav-inner a.active { color: var(--ay-primary, #146c2e); }
.ay-dq-quicknav-underline {
  position: absolute; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--ay-primary, #146c2e), #2e9a54);
  border-radius: 2px;
  transition: left .25s ease, width .25s ease;
}

/* ── Disclaimer ── */
.ay-dq-disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--ay-info-bg, #eef5ff); border: 1px solid var(--ay-info-border, #bcd6f5);
  border-radius: 12px; padding: 12px 14px; margin-top: 18px; font-size: 13.5px;
}
.ay-dq-error {
  background: #fdecec; border: 1px solid #f0b3b3; color: #a33; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px;
}

/* ── How it works steps ── */
.ay-dq-steps { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
.ay-dq-step {
  text-align: center; padding: 20px 18px; border-radius: 14px;
  background: var(--ay-surface, #fff); border: 1px solid var(--ay-border, #e4e9e5);
  box-shadow: 0 8px 24px -14px rgba(20,40,25,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ay-dq-step:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(20,40,25,.28); }
.ay-dq-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ay-primary, #146c2e), #2e9a54);
  color: #fff; font-weight: 800; margin-bottom: 10px;
  box-shadow: 0 6px 16px -6px rgba(20,108,46,.5);
}
.ay-dq-step h3 { font-size: 15px; margin-bottom: 6px; }
.ay-dq-step p { font-size: 13px; color: var(--ay-text-muted, #5b6b60); }

/* ── Quiz card: glassmorphism shell (quiz mode only — result mode uses
   .ay-dq-result-wide instead, see below, so the result screen isn't
   squeezed into the quiz card's narrow reading width) ── */
#quiz .ay-narrow {
  background: var(--ay-surface, #fff);
  border: 1px solid var(--ay-border, #e4e9e5);
  border-radius: 20px;
  padding: 28px 20px 24px;
  box-shadow: 0 20px 50px -28px rgba(20,40,25,.35);
  animation: ayDqCardIn .5s ease both;
}

/* ── Result mode container — full page width (not the quiz card's
   660px reading cap), so the product/herb grids actually get room ── */
.ay-dq-result-wide { max-width: 1180px; margin-left: auto; margin-right: auto; }
@keyframes ayDqCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ay-dq-quiz-hint { font-size: 13px; color: var(--ay-text-muted, #5b6b60); margin-top: -4px; margin-bottom: 4px; }

/* ── Quiz progress: linear bar + circular ring ── */
.ay-dq-progress-wrap { display: flex; align-items: center; gap: 14px; margin: 18px 0 26px; }
.ay-dq-progress-ring { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.ay-dq-progress-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.ay-dq-ring-bg { fill: none; stroke: var(--ay-border, #e4e9e5); stroke-width: 3; }
.ay-dq-ring-fill {
  fill: none; stroke: var(--ay-primary, #146c2e); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .4s ease;
}
.ay-dq-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--ay-primary, #146c2e);
}
.ay-dq-progress-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--ay-border, #e4e9e5); overflow: hidden; }
.ay-dq-progress-fill {
  height: 100%; border-radius: 4px; width: 0%;
  background: linear-gradient(90deg, var(--ay-primary, #146c2e), #2e9a54, #7ec4e8);
  background-size: 200% 100%;
  animation: ayDqGradientShift 3s ease infinite;
  transition: width .35s ease;
}
@keyframes ayDqGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.ay-dq-progress-text { font-size: 12.5px; font-weight: 700; color: var(--ay-text-muted, #5b6b60); white-space: nowrap; }

/* ── Question card ── */
.ay-dq-question-viewport { min-height: 220px; }
/* Reset the browser's default fieldset box (border/padding/min-width) —
   it was drawing a second, ugly rectangle around every question on top
   of the glass card shell already wrapping the whole form. */
.ay-dq-question { border: none; padding: 0; margin: 0; min-width: 0; }
.ay-dq-question legend {
  font-family: var(--ay-font-display, 'Fraunces', serif);
  font-size: 18px; font-weight: 700; margin-bottom: 18px; padding: 0; width: 100%;
}
.ay-dq-question.ay-dq-step-enter { animation: ayDqStepIn .35s ease; }
@keyframes ayDqStepIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
.ay-dq-options { display: flex; flex-direction: column; gap: 10px; }
.ay-dq-option {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--ay-border, #e4e9e5); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; min-height: 48px;
  background: var(--ay-surface, #fff);
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ay-dq-option:hover { border-color: var(--ay-primary, #146c2e); transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(20,108,46,.4); }
.ay-dq-option:active { transform: translateY(0) scale(.99); }
.ay-dq-option:has(input:focus-visible) { outline: 2px solid var(--ay-primary, #146c2e); outline-offset: 2px; }
.ay-dq-option input[type=radio] {
  position: absolute; opacity: 0; width: 20px; height: 20px; pointer-events: none;
}
.ay-dq-option-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--ay-border, #e4e9e5); position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.ay-dq-option-check::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--ay-primary, #146c2e); transform: scale(0); transition: transform .18s ease;
}
.ay-dq-option:has(input:checked) {
  border-color: var(--ay-primary, #146c2e);
  background: var(--ay-primary-bg, #e8f7ee);
  box-shadow: 0 8px 20px -12px rgba(20,108,46,.45);
}
.ay-dq-option:has(input:checked) .ay-dq-option-check { border-color: var(--ay-primary, #146c2e); }
.ay-dq-option:has(input:checked) .ay-dq-option-check::after { transform: scale(1); }
.ay-dq-skip {
  align-self: flex-start; background: none; border: none; color: var(--ay-text-muted, #5b6b60);
  font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 6px 0; margin-top: 2px;
}
.ay-dq-email-icon { font-size: 30px; margin-bottom: 8px; }
.ay-dq-email-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--ay-border, #e4e9e5);
  border-radius: 10px; font-size: 14px; margin-top: 10px;
}

.ay-dq-nav-buttons { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.ay-dq-nav-buttons .ay-btn { min-height: 48px; flex: 1; min-width: 120px; }
.ay-dq-nav-buttons .ay-btn:focus-visible,
.ay-dq-quicknav-inner a:focus-visible,
.ay-dq-skip:focus-visible {
  outline: 2px solid var(--ay-primary, #146c2e); outline-offset: 2px; border-radius: 6px;
}

/* ── Result screen ── */
.ay-dq-result-hero {
  background: linear-gradient(180deg, var(--ay-surface, #fff), var(--ay-surface-alt, #f6f4ef));
  border: 1px solid var(--ay-border, #e4e9e5); border-radius: 20px;
  padding: 26px 20px; box-shadow: 0 20px 50px -28px rgba(20,40,25,.35);
  margin-bottom: 24px;
}
.ay-dq-result-greeting { font-size: 13px; font-weight: 700; color: var(--ay-primary, #146c2e); margin-bottom: 4px; }
.ay-dq-result-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--ay-primary, #146c2e); margin-bottom: 6px;
}
.ay-dq-result-title {
  position: relative; display: inline-block;
  font-family: var(--ay-font-display, 'Fraunces', serif);
}
.ay-dq-result-meta { font-size: 12px; color: var(--ay-text-muted, #5b6b60); margin: 2px 0 18px; }

.ay-dq-result-top { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ay-dq-donut-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.ay-dq-donut { width: 140px; height: 140px; transform: rotate(-90deg); }
.ay-dq-donut-bg { fill: none; stroke: var(--ay-border, #e4e9e5); stroke-width: 12; }
.ay-dq-donut-seg { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray 1s ease, stroke-dashoffset 1s ease; }
.ay-dq-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ay-dq-donut-dosha { font-size: 24px; }
.ay-dq-donut-pct {
  font-size: 22px; font-weight: 800; font-family: var(--ay-font-display, 'Fraunces', serif);
  background: linear-gradient(120deg, var(--ay-text, #1c2a20), var(--ay-primary, #146c2e));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ay-dq-score-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; width: 100%; }
.ay-dq-score-row {
  display: flex; justify-content: space-between; font-size: 12.5px;
  padding: 6px 10px; border-radius: 8px; transition: background .15s ease;
}
.ay-dq-score-row:hover { background: var(--ay-surface-alt, #f6f4ef); }
.ay-dq-score-num { font-weight: 700; }

.ay-dq-result-bars { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; width: 100%; }
.ay-dq-bar-row { display: flex; align-items: center; gap: 12px; }
.ay-dq-bar-label { width: 90px; font-size: 13.5px; font-weight: 700; flex-shrink: 0; }
.ay-dq-bar-track { flex: 1; height: 14px; border-radius: 8px; background: var(--ay-border, #e4e9e5); overflow: hidden; }
.ay-dq-bar-fill {
  height: 100%; border-radius: 8px; transition: width 1s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.ay-dq-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: ayDqShimmer 2.2s ease-in-out infinite;
}
@keyframes ayDqShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ay-dq-bar-vata { background: #7ec4e8; }
.ay-dq-bar-pitta { background: #f0894a; }
.ay-dq-bar-kapha { background: #8bc98a; }
.ay-dq-bar-pct { width: 42px; text-align: right; font-size: 13px; font-weight: 700; flex-shrink: 0; }

.ay-dq-confidence-note {
  display: flex; gap: 10px; background: var(--ay-surface-alt, #f6f4ef);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 20px; font-size: 13px;
}

.ay-dq-characteristics { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
.ay-dq-char-card {
  padding: 20px; border-radius: 14px; border: 1px solid var(--ay-border, #e4e9e5);
  background: var(--ay-surface, #fff);
  box-shadow: 0 10px 26px -18px rgba(20,40,25,.3);
  border-top: 3px solid transparent;
}
.ay-dq-char-vata { border-top-color: #7ec4e8; }
.ay-dq-char-pitta { border-top-color: #f0894a; }
.ay-dq-char-kapha { border-top-color: #8bc98a; }
.ay-dq-char-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 50%; background: var(--ay-surface-alt, #f6f4ef);
  margin-bottom: 10px; box-shadow: 0 0 0 6px rgba(20,108,46,.06);
}
.ay-dq-char-card h3 { margin-bottom: 8px; }
.ay-dq-char-card p { font-size: 13.5px; margin-bottom: 6px; line-height: 1.55; }

/* ── Do's/Don'ts + Dinacharya/Ritucharya guidance ── */
.ay-dq-guidance { margin: 8px 0 28px; }
.ay-dq-guidance h3 { margin-bottom: 14px; }
.ay-dq-guidance-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
.ay-dq-guidance-card {
  padding: 16px 18px; border-radius: 14px; background: var(--ay-surface, #fff);
  border: 1px solid var(--ay-border, #e4e9e5); border-left: 3px solid var(--ay-primary, #146c2e);
}
.ay-dq-guidance-card h4 { font-size: 14.5px; margin-bottom: 10px; }
.ay-dq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ay-dq-chip {
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.ay-dq-chip-do { background: rgba(20,108,46,.09); color: #146c2e; }
.ay-dq-chip-dont { background: rgba(200,60,60,.09); color: #a33; }

.ay-dq-tip-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ay-dq-tip-block {
  padding: 16px 18px; border-radius: 14px; background: var(--ay-surface-alt, #f6f4ef);
}
.ay-dq-tip-label { display: block; font-size: 12px; font-weight: 800; color: var(--ay-primary, #146c2e); margin-bottom: 6px; }
.ay-dq-tip-block p { font-size: 13.5px; line-height: 1.55; color: var(--ay-text-muted, #5b6b60); }

.ay-dq-recs { margin: 28px 0; }
.ay-dq-recs h3 { margin-bottom: 14px; }


.ay-dq-rec-card { transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease; }
.ay-dq-rec-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(20,40,25,.3); }

.ay-dq-product-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ay-dq-product-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--ay-border, #e4e9e5); border-radius: 14px;
  padding: 16px; background: var(--ay-surface, #fff);
}
.ay-dq-product-card:hover { border-color: var(--ay-primary, #146c2e); }
.ay-dq-product-badge {
  position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 800;
  color: #a35b00; background: #fdf2e3; border: 1px solid #f0d9ab;
  border-radius: 999px; padding: 3px 9px;
}
.ay-dq-product-link { display: block; text-decoration: none; color: inherit; }
.ay-dq-product-image {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: var(--ay-surface-alt, #f6f4ef); margin-bottom: 12px;
}
.ay-dq-product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ay-dq-product-card h4 { font-size: 14.5px; margin-bottom: 4px; }
.ay-dq-product-card > .ay-dq-product-link > p { font-size: 12.5px; color: var(--ay-text-muted, #5b6b60); margin-bottom: 10px; }
.ay-dq-product-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ay-dq-product-price { font-weight: 800; font-size: 16px; color: var(--ay-primary, #146c2e); }
.ay-dq-product-mrp { font-size: 12.5px; color: var(--ay-text-muted, #5b6b60); text-decoration: line-through; }
.ay-dq-product-off { font-size: 11px; font-weight: 800; color: #146c2e; }
.ay-dq-product-why {
  font-size: 12px; line-height: 1.5; color: var(--ay-text-muted, #5b6b60);
  background: var(--ay-surface-alt, #f6f4ef); border-radius: 8px; padding: 8px 10px;
  margin: 10px 0 0;
}
.ay-dq-product-why b { color: var(--ay-primary, #146c2e); }
.ay-dq-product-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ay-dq-product-actions .ay-btn { flex: 1; min-width: 110px; min-height: 42px; font-size: 12.5px; padding: 8px 10px; }
.ay-dq-add-cart.added { color: var(--ay-primary, #146c2e); border-color: var(--ay-primary, #146c2e); }
.ay-dq-add-cart:disabled { opacity: .6; cursor: default; }

.ay-dq-placeholder-shell {
  padding: 20px; border-radius: 12px; background: var(--ay-surface-alt, #f6f4ef);
  text-align: center; font-size: 13.5px; color: var(--ay-text-muted, #5b6b60);
}

.ay-dq-share-card, .ay-dq-retake-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px;
}
.ay-dq-share-card {
  padding: 16px; border-radius: 14px;
  background: var(--ay-surface-alt, #f6f4ef); border: 1px solid var(--ay-border, #e4e9e5);
}
.ay-dq-share-card .ay-btn, .ay-dq-retake-row .ay-btn { min-height: 48px; }
.ay-dq-retake-row { align-items: center; }
.ay-dq-retake-note { font-size: 12.5px; color: var(--ay-text-muted, #5b6b60); margin: 0; flex-basis: 100%; }

/* ── Sticky mobile share bar ── */
.ay-dq-sticky-share {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ay-surface, #fff); border: 1px solid var(--ay-border, #e4e9e5);
  border-radius: 14px; padding: 10px 14px; box-shadow: 0 14px 34px -14px rgba(20,40,25,.4);
  font-size: 13px; font-weight: 700;
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.ay-dq-sticky-share.ay-dq-sticky-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ay-dq-sticky-share-actions { display: flex; gap: 8px; }
.ay-dq-sticky-share-actions .ay-btn { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }

/* ── Back-to-top ── */
.ay-dq-back-to-top {
  position: fixed; right: 16px; bottom: 78px; z-index: 49;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ay-border, #e4e9e5);
  background: var(--ay-surface, #fff); color: var(--ay-primary, #146c2e);
  font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(20,40,25,.35);
  transition: transform .15s ease, opacity .2s ease;
}
.ay-dq-back-to-top:hover { transform: translateY(-2px); }

/* ── Doshas Explained tiles (self-contained on this page) ── */
.ay-dq-dosha-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
.ay-dq-dosha-tile {
  text-align: center; padding: 26px 18px; border-radius: 16px;
  background: var(--ay-surface, #fff); border: 1px solid var(--ay-border, #e4e9e5);
  box-shadow: 0 10px 26px -18px rgba(20,40,25,.28);
  border-bottom: 4px solid transparent;
  transition: transform .2s ease;
}
.ay-dq-dosha-tile:hover { transform: translateY(-3px); }
.ay-dq-dosha-tile-vata { border-bottom-color: #7ec4e8; }
.ay-dq-dosha-tile-pitta { border-bottom-color: #f0894a; }
.ay-dq-dosha-tile-kapha { border-bottom-color: #8bc98a; }
.ay-dq-dosha-icon { font-size: 32px; display: block; margin-bottom: 10px; }
.ay-dq-dosha-tile h4 { font-size: 16px; margin-bottom: 6px; }
.ay-dq-dosha-tile p { font-size: 13px; color: var(--ay-text-muted, #5b6b60); }

.ay-dq-cat-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ay-dq-contact { text-align: center; }
.ay-dq-whatsapp-btn { animation: ayDqPulseGlow 2.4s ease-in-out infinite; }
@keyframes ayDqPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); }
  50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
}

/* ── Confetti burst (result title) ── */
.ay-dq-confetti-wrap {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
}
.ay-dq-confetti-dot {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 2px;
  opacity: 0; animation: ayDqConfettiBurst .9s ease-out forwards;
}
@keyframes ayDqConfettiBurst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(240deg) scale(.4); }
}

/* ── Custom scrollbar (webkit) for a premium feel ── */
.ay-dq-quicknav::-webkit-scrollbar { height: 4px; }
.ay-dq-quicknav::-webkit-scrollbar-thumb { background: var(--ay-border, #e4e9e5); border-radius: 4px; }

/* ── Print ── */
@media print {
  .ay-dq-quicknav, .ay-theme-toggle, .ay-reading-progress, .ay-dq-share-card,
  .ay-dq-nav-buttons, .ay-dq-sticky-share, .ay-dq-back-to-top,
  header, footer, #contact, #faq { display: none !important; }
}

/* ============ BREAKPOINTS (mobile-first cascade) ============ */

/* 375px — iPhone SE */
@media (min-width: 375px) {
  .ay-dq-hero-title { font-size: 2.15rem; }
}

/* 390px — iPhone 14 */
@media (min-width: 390px) {
  .ay-dq-bar-label { width: 96px; }
}

/* 430px — large mobile */
@media (min-width: 430px) {
  .ay-dq-hero { padding: 48px 20px 36px; }
  .ay-dq-nav-buttons .ay-btn { min-width: 140px; }
}

/* 768px — tablet portrait */
@media (min-width: 768px) {
  .ay-dq-hero { padding: 64px 28px 48px; }
  .ay-dq-hero-title { font-size: 2.6rem; }
  .ay-dq-steps { grid-template-columns: repeat(3, 1fr); }
  .ay-dq-question legend { font-size: 19px; }
  .ay-dq-options { flex-direction: row; flex-wrap: wrap; }
  .ay-dq-option { flex: 1 1 calc(50% - 10px); }
  .ay-dq-characteristics { grid-template-columns: repeat(2, 1fr); }
  .ay-dq-product-grid { grid-template-columns: repeat(2, 1fr); }
  .ay-dq-dosha-tiles { grid-template-columns: repeat(3, 1fr); }
  .ay-dq-result-bars { max-width: 620px; }
  #quiz .ay-narrow { padding: 36px 40px 32px; }
  .ay-dq-result-top { flex-direction: row; align-items: center; }
  .ay-dq-guidance-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ay-dq-tip-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ay-dq-sticky-share { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

/* 1024px — tablet landscape / small laptop */
@media (min-width: 1024px) {
  .ay-dq-question-viewport, #quiz .ay-narrow { max-width: 660px; margin-left: auto; margin-right: auto; }
  .ay-dq-product-grid { grid-template-columns: repeat(3, 1fr); }
  .ay-dq-options { flex-direction: column; }
  .ay-dq-option { flex: none; }
}

/* 1280px — desktop */
@media (min-width: 1280px) {
  .ay-dq-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 1440px — large desktop */
@media (min-width: 1440px) {
  .ay-dq-hero-title { font-size: 2.85rem; }
}

/* 1920px — wide screen */
@media (min-width: 1920px) {
  .ay-dq-hero-sub { max-width: 640px; }
}