/* ============================================================
   The Better Whisk — feature layer styles
   (token fix, background wrap, offerings dropdown, engagement
   widgets, mood dial, quiz). Loads after lib/site.css.
   ============================================================ */

/* ---- FIX: the DS declares --text-body twice (color in colors.css,
   font-size in typography.css). The font-size wins, so any
   `color: var(--text-body)` collapsed to white. Re-pin it as a color
   and give the few size consumers their explicit size back. ---- */
html:root { --text-body: var(--cocoa-600); }
html:root[data-theme="dark"] { --text-body: #D9C8B6; }
body, .tbw-field__label, .tbw-product__desc { font-size: 1.0625rem; }

/* ============================================================
   BACKGROUND WRAP — faint botanical line-art (whisk, sprig,
   sparkle, rosebud) tiled under everything.
   ============================================================ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480' fill='none' stroke='%23C77E8A' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M96 36v26'/%3E%3Cpath d='M96 62c-9 0-15 8-15 20 0 8 6 15 15 15s15-7 15-15c0-12-6-20-15-20Z'/%3E%3Cpath d='M96 62c-4 0-6 17 0 35M96 62c4 0 6 17 0 35M83 75h26M84 86h24'/%3E%3Cpath d='M330 96c22-20 48-24 66-22-2 18-14 40-40 44-12 2-22-4-26-22Z'/%3E%3Cpath d='M338 92c14-4 34-4 50-2'/%3E%3Cpath d='M180 330l4 10 10 4-10 4-4 10-4-10-10-4 10-4Z'/%3E%3Ccircle cx='390' cy='390' r='16'/%3E%3Cpath d='M390 374c9 0 16 7 16 16M390 406c-9 0-16-7-16-16'/%3E%3Ccircle cx='250' cy='180' r='2'/%3E%3Ccircle cx='60' cy='420' r='2'/%3E%3C/svg%3E");
  background-size: 480px 480px;
  opacity: .05;
}
html[data-theme="dark"] body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480' fill='none' stroke='%23E6BAC4' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M96 36v26'/%3E%3Cpath d='M96 62c-9 0-15 8-15 20 0 8 6 15 15 15s15-7 15-15c0-12-6-20-15-20Z'/%3E%3Cpath d='M96 62c-4 0-6 17 0 35M96 62c4 0 6 17 0 35M83 75h26M84 86h24'/%3E%3Cpath d='M330 96c22-20 48-24 66-22-2 18-14 40-40 44-12 2-22-4-26-22Z'/%3E%3Cpath d='M338 92c14-4 34-4 50-2'/%3E%3Cpath d='M180 330l4 10 10 4-10 4-4 10-4-10-10-4 10-4Z'/%3E%3Ccircle cx='390' cy='390' r='16'/%3E%3Cpath d='M390 374c9 0 16 7 16 16M390 406c-9 0-16-7-16-16'/%3E%3Ccircle cx='250' cy='180' r='2'/%3E%3Ccircle cx='60' cy='420' r='2'/%3E%3C/svg%3E");
  opacity: .045;
}

/* ============================================================
   SCROLL PROGRESS — hairline gold→rose bar above everything
   ============================================================ */
.sprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 900; pointer-events: none; }
.sprog__bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-400), var(--rose-500)); border-radius: 0 999px 999px 0; }
[dir="rtl"] .sprog__bar { transform-origin: 100% 50%; }

/* ============================================================
   NAV — Offerings dropdown
   ============================================================ */
.nav__drop { position: relative; }
.nav__link--drop { display: inline-flex; align-items: center; gap: .4rem; }
.nav__caret { width: 9px; height: 6px; opacity: .55; transition: transform .3s var(--ease-out); }
.nav__drop:hover .nav__caret, .nav__drop:focus-within .nav__caret { transform: rotate(180deg); }
.nav__panel {
  position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 205px; padding: .5rem; border-radius: var(--radius-lg);
  background: rgba(252,248,243,0.94); backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--cream-200); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__panel-link {
  font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .16em;
  font-size: .78rem; color: var(--cocoa-600); padding: .62rem .9rem; border-radius: var(--radius-sm, 8px);
  transition: background .25s, color .25s; white-space: nowrap; text-align: center;
}
.nav__panel-link:hover { background: var(--gold-100); color: var(--espresso-900); }
.nav__panel-link.active { color: var(--espresso-900); font-weight: 700; background: var(--gold-100); }
html[data-theme="dark"] .nav__panel { background: rgba(25,19,15,0.96); border-color: var(--cream-200); }
@media (max-width: 940px) {
  .nav__drop { display: contents; }
  .nav__link--drop { display: none; }
  .nav__panel { position: static; transform: none; opacity: 1; visibility: visible;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; min-width: 0; }
  .nav__panel-link { padding: .8rem; font-size: .8rem; }
}
[dir="rtl"] .nav__panel-link { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic-body); font-size: 1rem; }

/* ============================================================
   DID-YOU-KNOW CORNER + MEDALS
   ============================================================ */
.dyk { position: fixed; z-index: 840; bottom: clamp(.9rem, 2.5vw, 1.6rem); inset-inline-end: clamp(.9rem, 2.5vw, 1.6rem); display: flex; justify-content: flex-end; }
.dyk__pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .68rem 1.15rem; border-radius: 999px;
  background: rgba(252,248,243,.9); backdrop-filter: blur(12px); border: 1px solid var(--gold-200);
  box-shadow: var(--shadow-md); cursor: pointer;
  font-family: var(--font-serif); letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--espresso-800);
  transition: transform .3s var(--ease-out), box-shadow .3s, background .3s;
  animation: dykIn .8s var(--ease-out) 1.1s backwards;
}
.dyk__pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--gold-100); }
.dyk__spark { color: var(--gold-500); display: inline-block; animation: dykSpark 2.8s ease-in-out infinite; }
@keyframes dykSpark { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.3) rotate(24deg); } }
@keyframes dykIn { from { opacity: 0; transform: translateY(14px); } }
.dyk__card {
  width: min(342px, calc(100vw - 2rem));
  background: var(--warm-white); border: 1px solid var(--cream-200); border-top: 3px solid var(--gold-400);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  padding: 1.15rem 1.3rem 1.1rem; animation: dykCard .45s var(--ease-out);
}
@keyframes dykCard { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.dyk__head { display: flex; align-items: center; gap: .5rem; }
.dyk__label { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; color: var(--taupe-400); flex: 1; }
.dyk__x { margin-inline-start: auto; background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--taupe-400); cursor: pointer; padding: .05rem .3rem; border-radius: 8px; transition: color .25s; }
.dyk__x:hover { color: var(--espresso-900); }
.dyk__fact { font-family: var(--font-accent); font-style: italic; font-size: 1.13rem; line-height: 1.5; color: var(--espresso-800); margin: .7rem 0 .95rem; animation: dykFact .5s var(--ease-out); }
@keyframes dykFact { from { opacity: 0; transform: translateY(8px); } }
.dyk__row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.dyk__btn {
  font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem;
  color: var(--gold-700); background: var(--gold-100); border: 1px solid var(--gold-200); border-radius: 999px;
  padding: .5rem .95rem; cursor: pointer; transition: background .3s, transform .2s;
}
.dyk__btn:hover { background: var(--gold-200); transform: translateY(-1px); }
.dyk__link { font-family: var(--font-accent); font-style: italic; color: var(--rose-600); font-size: .95rem; border-bottom: 1px solid var(--rose-300); transition: color .25s; }
.dyk__link:hover { color: var(--gold-700); }
.dyk__medals { border-top: 1px dashed var(--cream-300); margin-top: 1rem; padding-top: .8rem; }
.dyk__medals-label { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .18em; font-size: .66rem; color: var(--taupe-400); margin: 0 0 .55rem; }
.dyk__medal-row { display: flex; gap: .45rem; }
.medal {
  width: 35px; height: 35px; border-radius: 999px; display: grid; place-items: center;
  color: var(--taupe-300); background: var(--cream-100); border: 1px solid var(--cream-200);
  transition: color .5s, background .5s, border-color .5s, box-shadow .5s, transform .4s var(--ease-out);
}
.medal svg { width: 17px; height: 17px; }
.medal--on { color: var(--gold-700); background: var(--gold-100); border-color: var(--gold-300);
  box-shadow: 0 3px 10px -4px rgba(199,126,138,.55); transform: translateY(-1px); }
html[data-theme="dark"] .dyk__pill { background: rgba(33,26,20,.88); border-color: var(--cream-200); }
@media (max-width: 640px) {
  .dyk__pill { padding: .6rem .95rem; font-size: .66rem; }
}

/* ============================================================
   ACHIEVEMENT TOASTS
   ============================================================ */
.ach-toasts { position: fixed; z-index: 940; bottom: clamp(1rem, 3vw, 1.8rem); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none; }
.ach-toast {
  display: flex; align-items: center; gap: .8rem;
  background: var(--warm-white); border: 1px solid var(--gold-200); border-radius: 999px;
  box-shadow: var(--shadow-lg); padding: .5rem 1.4rem .5rem .55rem;
  animation: toastIn .55s var(--ease-out), toastOut .45s ease 3.9s forwards;
}
[dir="rtl"] .ach-toast { padding: .5rem .55rem .5rem 1.4rem; }
.ach-toast__medal {
  width: 38px; height: 38px; flex: none; border-radius: 999px; display: grid; place-items: center;
  color: var(--gold-700); background: radial-gradient(circle at 35% 30%, var(--gold-100), var(--gold-200));
  border: 1px solid var(--gold-300);
}
.ach-toast__medal svg { width: 19px; height: 19px; }
.ach-toast__txt { display: flex; flex-direction: column; line-height: 1.25; }
.ach-toast__txt em { font-family: var(--font-serif); font-style: normal; text-transform: uppercase; letter-spacing: .2em; font-size: .6rem; color: var(--taupe-400); }
.ach-toast__txt b { font-family: var(--font-display); font-weight: 700; color: var(--espresso-900); font-size: 1.05rem; }
@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   MOOD DIAL — orbiting ingredient↔mood pills around a core
   ============================================================ */
.dial { --dial-s: min(440px, 82vw); --dial-r: calc(var(--dial-s) / 2 - 30px);
  position: relative; width: var(--dial-s); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.dial__ring { position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed var(--gold-300); animation: dialSpin 70s linear infinite reverse; }
.dial__orbit { position: absolute; inset: 0; animation: dialSpin 46s linear infinite; }
.dial__stop { position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--dial-r))) rotate(calc(-1 * var(--a))); }
.dial__unspin { animation: dialSpinInv 46s linear infinite; }
.dial__pill {
  display: flex; flex-direction: column; align-items: center; gap: 0; transform: translate(-50%, -50%);
  background: var(--warm-white); border: 1px solid var(--cream-200); border-radius: 999px;
  padding: .48rem 1rem; box-shadow: var(--shadow-sm); white-space: nowrap;
  font-family: var(--font-serif); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--espresso-800);
}
.dial__pill em { font-family: var(--font-accent); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--rose-500); font-size: .88rem; line-height: 1.15; }
@keyframes dialSpin { to { transform: rotate(1turn); } }
@keyframes dialSpinInv { to { transform: rotate(-1turn); } }
.dial__core {
  position: relative; width: 46%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 36% 30%, var(--warm-white), var(--cream-100) 78%);
  border: 1px solid var(--cream-200); box-shadow: var(--shadow-card);
  animation: corePulse 5.5s ease-in-out infinite; padding: 1rem;
}
.dial__core svg { width: 34%; color: var(--rose-500); }
.dial__core span { font-family: var(--font-accent); font-style: italic; color: var(--espresso-800); font-size: clamp(.95rem, 2.1vw, 1.18rem); margin-top: .4rem; }
@keyframes corePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.mood__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.mood-chip {
  font-family: var(--font-serif); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-700); background: var(--gold-100); border: 1px solid var(--gold-200);
  padding: .5rem 1rem; border-radius: 999px;
}
@media (max-width: 900px) { .mood__chips { justify-content: center; } }

/* ============================================================
   MOOD QUIZ
   ============================================================ */
.quiz {
  position: relative; width: min(680px, 100%); margin-inline: auto; text-align: center;
  background: var(--warm-white); border: 1px solid var(--cream-200); border-top: 3px solid var(--gold-400);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
  padding: clamp(2rem, 4.5vw, 3.2rem);
}
.quiz__meta { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; color: var(--taupe-400); margin: 0; }
.quiz__bar { height: 3px; background: var(--cream-200); border-radius: 999px; margin: .9rem auto 0; width: min(240px, 60%); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-400), var(--rose-400)); border-radius: 999px; transition: width .5s var(--ease-out); }
.quiz__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--espresso-900); margin: 1.6rem 0 1.8rem; animation: dykFact .5s var(--ease-out); }
.quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .quiz__opts { grid-template-columns: 1fr; } }
.quiz__opt {
  font-family: var(--font-serif); font-size: 1.05rem; color: var(--espresso-800);
  background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-lg);
  padding: 1.05rem 1.2rem; cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--ease-out), box-shadow .3s;
  animation: qOpt .55s var(--ease-out) var(--qd, 0ms) backwards;
}
.quiz__opt:hover { border-color: var(--gold-400); background: var(--gold-100); transform: translateY(-3px); box-shadow: var(--shadow-md); }
@keyframes qOpt { from { opacity: 0; transform: translateY(14px); } }
.quiz--result { animation: dykCard .5s var(--ease-out); }
.quiz__pic { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.2rem;
  border: 3px solid var(--gold-200); box-shadow: var(--shadow-image); animation: qPic .7s var(--ease-out); }
.quiz__pic img { width: 100%; height: 100%; object-fit: cover; }
@keyframes qPic { from { transform: scale(.6); opacity: 0; } }
.quiz__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: .3rem 0 0; color: var(--espresso-900); }
.quiz__rule { display: block; width: 56px; height: 2px; background: var(--gold-500); border-radius: 999px; margin: 1rem auto; }
.quiz__blurb { font-family: var(--font-accent); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--rose-600); max-width: 44ch; margin: 0 auto 1.6rem; }
.quiz__acts { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.quiz__again { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
  color: var(--taupe-400); background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--cream-300); padding-bottom: 2px; transition: color .3s; }
.quiz__again:hover { color: var(--gold-700); }
.quiz__sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.quiz__sparks i { position: absolute; color: var(--gold-400); font-style: normal; animation: sparkPop 1.5s ease-out both; }
.quiz__sparks i:nth-child(1) { top: 14%; left: 12%; animation-delay: .1s; }
.quiz__sparks i:nth-child(2) { top: 8%; right: 16%; font-size: .8em; animation-delay: .25s; }
.quiz__sparks i:nth-child(3) { bottom: 18%; left: 8%; font-size: .7em; animation-delay: .4s; }
.quiz__sparks i:nth-child(4) { bottom: 10%; right: 10%; animation-delay: .55s; }
.quiz__sparks i:nth-child(5) { top: 40%; right: 5%; font-size: .6em; animation-delay: .7s; }
@keyframes sparkPop { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(40deg); } }

/* ============================================================
   RTL + reduced motion for feature layer
   ============================================================ */
[dir="rtl"] .dyk__pill, [dir="rtl"] .dyk__label, [dir="rtl"] .dyk__btn, [dir="rtl"] .dyk__medals-label,
[dir="rtl"] .quiz__meta, [dir="rtl"] .quiz__again, [dir="rtl"] .ach-toast__txt em,
[dir="rtl"] .mood-chip, [dir="rtl"] .dial__pill {
  font-family: var(--font-arabic-body); letter-spacing: 0; text-transform: none;
}
[dir="rtl"] .dyk__pill { font-size: .92rem; }
[dir="rtl"] .quiz__opt { font-family: var(--font-arabic-body); }
@media (prefers-reduced-motion: reduce) {
  .dial__orbit, .dial__ring, .dial__unspin, .dial__core, .dyk__spark,
  .quiz__opt, .quiz__sparks i, .dyk__pill { animation: none !important; }
}