/* The Rudraksha funnel (local-discover.js), in the store's deep green, gold and cream: one panel with
   a gold rim and a mandala turning slowly behind it, the same in the homepage popup, on /discover and
   on the Rudraksha Calculator page. Written for a phone first; the wider screens follow.
   1. the panel, the questions and the answer; 2. the homepage popup; 3. /discover; 4. /admin/discover.

   The theme hides every radio (base.css: input[type=radio]{display:none}) and
   title-cases some labels, so this file puts both back inside .rf. */

/* ---- 1. the panel ---- */
.rf { --rf-deep: #062E30; --rf-green: #0A4A4D; --rf-gold: #D4A64A; --rf-gold-2: #E7B75F;
  --rf-cream: #FBF8F3; --rf-sand: #F4ECDF; --rf-ink: #0B3B3C; --rf-dim: rgba(251, 248, 243, .72); --rf-rim: rgba(212, 166, 74, .34);
  position: relative; isolation: isolate; overflow: clip; padding: 24px 18px 22px; border-radius: 16px;
  color: var(--rf-cream); font-size: 15px; line-height: 1.5;
  background: radial-gradient(120% 80% at 50% 0%, #0E5E62 0%, rgba(14, 94, 98, 0) 62%), linear-gradient(165deg, #0A4A4D 0%, #062E30 100%);
  box-shadow: inset 0 0 0 1px var(--rf-rim), 0 18px 44px -24px rgba(6, 46, 48, .9); }
.rf *, .rf *::before, .rf *::after { box-sizing: border-box; }
/* the theme title-cases and letter-spaces some of these; :where() keeps this reset easy to override */
.rf :where(p, span, small, label, h2, h3, h4, button, a, input) { text-transform: none; letter-spacing: normal; }
/* a screen slides in from the side it was asked for, and the panel glows for a moment when the
   button in the opening calls it */
@keyframes rf-in-on { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes rf-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes rf-called { 0% { box-shadow: inset 0 0 0 1px var(--rf-rim), 0 18px 44px -24px rgba(6, 46, 48, .9); }
  35% { box-shadow: inset 0 0 0 2px var(--rf-gold-2), 0 0 0 7px rgba(212, 166, 74, .3), 0 18px 44px -24px rgba(6, 46, 48, .9); }
  100% { box-shadow: inset 0 0 0 1px var(--rf-rim), 0 18px 44px -24px rgba(6, 46, 48, .9); } }
.rf-in-on { animation: rf-in-on .34s cubic-bezier(.2, .7, .2, 1) backwards; }
.rf-in-back { animation: rf-in-back .34s cubic-bezier(.2, .7, .2, 1) backwards; }
.rf.is-called { animation: rf-called 1.5s ease both; }
@media (prefers-reduced-motion: reduce) { .rf-in-on, .rf-in-back, .rf.is-called { animation: none; } }

.rf-form[hidden], .rf-panel[hidden], .rf-result[hidden], .rf-error[hidden], .rf-back[hidden], .rf-verify[hidden], .rf-cartbar[hidden],
.rf-order[hidden], .rf-done[hidden], .rf-link[hidden], [data-rf-wait][hidden] { display: none; }

/* the mandala, behind everything */
.rf-art { position: absolute; z-index: -1; top: -70px; right: -80px; width: 260px !important; height: 260px !important;
  color: var(--rf-gold); opacity: .13; pointer-events: none; animation: rf-turn 120s linear infinite; }
@keyframes rf-turn { to { rotate: 360deg; } }

/* the title, on the homepage */
.rf-eyebrow { margin: 0 0 6px; padding-right: 36px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rf-gold-2); }
.rf .rf-title { margin: 0; padding-right: 36px; font: 400 clamp(26px, 7vw, 34px)/1.15 Georgia, "Times New Roman", serif; color: var(--rf-cream); }
.rf-title__hi { margin: 6px 0 0; font: 600 15px/1.4 "Noto Serif Devanagari", "Tiro Devanagari Hindi", Mangal, serif; color: var(--rf-gold-2); }
.rf-title__hi + .rf-head { margin-top: 18px; }

/* the step count and bar, over a gold rule of two lines and a diamond */
.rf-head { margin: 0 0 18px; }
.rf-count { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rf-gold-2); }
.rf-bar { display: block; height: 4px; margin: 0; border-radius: 99px; background: rgba(251, 248, 243, .16); overflow: hidden; }
.rf-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rf-gold), var(--rf-gold-2)); transition: width .4s ease; }
.rf-head::after { content: ""; display: block; width: 120px; height: 10px; margin: 16px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M0 5h48M72 5h48' stroke='%23D4A64A' stroke-width='1'/%3E%3Cpath d='M60 0l5 5-5 5-5-5z' fill='%23D4A64A'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the question */
.rf .rf-q { margin: 0 0 6px; font: 400 clamp(22px, 5.6vw, 27px)/1.25 Georgia, "Times New Roman", serif; color: var(--rf-cream); }
.rf-hint { margin: 0 0 16px; color: var(--rf-dim); font-size: 13.5px; }
.rf-q + .rf-tiles, .rf-q + .rf-input, .rf-q + .rf-phone, .rf-hint + .rf-tiles { margin-top: 16px; }
.rf-label { margin: 20px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-gold-2); }
.rf-label:first-child { margin-top: 0; }

/* what the visitor types */
.rf-input { display: block; width: 100%; height: 52px; margin: 0 0 10px; padding: 0 14px; border: 1px solid var(--rf-rim); border-radius: 10px;
  background: var(--rf-cream); color: var(--rf-ink); font: inherit; font-size: 16px; box-shadow: none; }
.rf-input::placeholder { color: #8A9896; }
.rf-input:focus { outline: none; border-color: var(--rf-gold-2); box-shadow: 0 0 0 3px rgba(212, 166, 74, .35); }
.rf-phone { display: flex; align-items: stretch; }
.rf-phone > span { display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--rf-rim); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--rf-sand); color: var(--rf-green); font-weight: 700; }
.rf-phone .rf-input { margin: 0; border-radius: 0 10px 10px 0; }
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the theme hides radios (base.css: input[type=radio]{display:none}); here each covers its tile, unseen
   but there for taps and for Tab */
.rf input[type="radio"] { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  padding: 0; border: 0; clip: auto; opacity: 0; overflow: visible; cursor: pointer; }

/* the number: the consent is a fixed line under it, the same for everyone */
.rf-notice { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--rf-rim); border-radius: 10px;
  background: rgba(251, 248, 243, .06); color: var(--rf-cream); font-size: 13.5px; line-height: 1.5; }
.rf-notice svg { flex: none; width: 22px !important; height: 22px !important; padding: 4px; border-radius: 6px; background: var(--rf-gold); color: var(--rf-deep); }

/* the code screen: the WhatsApp mark, six boxes, then resend and change number */
.rf-panel.is-verifying > .rf-q, .rf-panel.is-verifying > .rf-hint, .rf-panel.is-verifying [data-rf-number] { display: none; }
.rf-verify { text-align: center; }
.rf-verify__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  background: rgba(67, 210, 127, .14); color: #43D27F; box-shadow: 0 0 0 1px rgba(67, 210, 127, .35); }
.rf-verify__icon svg { width: 30px !important; height: 30px !important; }
.rf-verify .rf-hint b { color: var(--rf-cream); white-space: nowrap; }
.rf-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 48px)); justify-content: center; gap: 8px; margin: 18px 0 0; }
.rf-digit { width: 100%; height: 56px; padding: 0; border: 1px solid var(--rf-rim); border-radius: 10px; background: var(--rf-cream); color: var(--rf-ink);
  font: 700 24px/1 inherit; text-align: center; box-shadow: none; }
.rf-digit:focus { outline: none; border-color: var(--rf-gold-2); box-shadow: 0 0 0 3px rgba(212, 166, 74, .4); }
.rf-verify__again { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: 13.5px; color: var(--rf-dim); }
.rf .rf-link { min-height: 32px; padding: 0; border: 0; background: none; color: var(--rf-gold-2); font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the choices: tiles a thumb can hit */
.rf-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rf-tile { position: relative; margin: 0; cursor: pointer; }
.rf-tile__in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 10px;
  border: 1px solid var(--rf-rim); border-radius: 10px; background: rgba(251, 248, 243, .06); color: var(--rf-cream);
  font-size: 14.5px; font-weight: 600; text-align: center; line-height: 1.3; transition: background .15s, border-color .15s; }
.rf-tile__in small { display: block; font-size: 11.5px; font-weight: 400; color: var(--rf-dim); }
.rf-tile:hover .rf-tile__in { border-color: var(--rf-gold); background: rgba(212, 166, 74, .12); }
.rf-tile input:checked + .rf-tile__in { border-color: var(--rf-gold-2); background: var(--rf-gold); color: var(--rf-deep); font-weight: 700; }
.rf-tile input:checked + .rf-tile__in small { color: rgba(6, 46, 48, .75); }
.rf-tile input:focus-visible + .rf-tile__in { outline: 3px solid var(--rf-gold-2); outline-offset: 2px; }

.rf-error { margin: 16px 0 0; padding: 10px 12px; border: 1px solid rgba(231, 154, 154, .5); border-radius: 8px; background: rgba(224, 122, 122, .16);
  color: #FFD9D9; font-size: 13.5px; font-weight: 600; }
.rf-nav { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.rf .rf-next { flex: 1; min-height: 52px; padding: 0 18px; border: 0; border-radius: 10px; background: linear-gradient(180deg, var(--rf-gold-2), var(--rf-gold));
  color: var(--rf-deep); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: filter .2s; }
.rf .rf-next:hover { filter: brightness(1.08); }
.rf .rf-next:disabled { opacity: .75; cursor: wait; }
.rf .rf-back { min-height: 52px; padding: 0 16px; border: 1px solid var(--rf-rim); border-radius: 10px; background: transparent; color: var(--rf-dim);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.rf .rf-back:hover { border-color: var(--rf-gold); color: var(--rf-cream); }

/* ---- what came back ---- */
.rf-result { outline: none; }
.rf-result__for { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rf-gold-2); }
.rf .rf-result__title { margin: 0 0 4px; font: 400 clamp(24px, 6vw, 30px)/1.2 Georgia, "Times New Roman", serif; color: var(--rf-cream); }
.rf-result__why { margin: 0 0 16px; color: var(--rf-dim); font-size: 13.5px; }
.rf-overbudget { margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(212, 166, 74, .5); border-radius: 10px;
  background: rgba(212, 166, 74, .12); color: var(--rf-cream); font-size: 13px; line-height: 1.5; }
.rf-result__more { margin: 20px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-gold-2); }
.rf-result__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.rf-card { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 16px 12px; text-align: center;
  border: 1px solid var(--rf-rim); border-radius: 12px; background: rgba(251, 248, 243, .06); }
.rf-card--lead { padding: 20px 16px; border-color: var(--rf-gold);
  background: radial-gradient(120% 80% at 50% 0%, rgba(212, 166, 74, .22) 0%, rgba(212, 166, 74, 0) 70%), rgba(251, 248, 243, .07); }
.rf-card__photo { display: block; width: 86px; height: 86px; border-radius: 50%; overflow: hidden; background: var(--rf-cream);
  box-shadow: 0 0 0 1px var(--rf-rim); }
.rf-card--lead .rf-card__photo { width: 132px; height: 132px; box-shadow: 0 0 0 2px var(--rf-gold), 0 0 0 7px rgba(212, 166, 74, .18); }
.rf-card__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.rf .rf-card__title { margin: 0 0 4px; font: 400 16px/1.25 Georgia, "Times New Roman", serif; color: var(--rf-cream); }
.rf-card--lead .rf-card__title { font-size: 23px; }
.rf-card__line { margin: 0 0 6px; color: var(--rf-dim); font-size: 13px; }
.rf-card--lead .rf-card__line { font-size: 14.5px; }
.rf-card__price { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--rf-gold-2); }
.rf-card__price--out { font-size: 13.5px; font-weight: 600; color: var(--rf-dim); }
.rf-card__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.rf .rf-add { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, var(--rf-gold-2), var(--rf-gold)); color: var(--rf-deep) !important; font: inherit; font-size: 14px;
  font-weight: 700; text-decoration: none !important; cursor: pointer; }
.rf .rf-add:hover { filter: brightness(1.08); }
.rf .rf-add.is-added { background: #1FA855; color: #fff !important; cursor: default; }
.rf-see { display: inline-flex; align-items: center; min-height: 40px; color: var(--rf-gold-2) !important; font-size: 13.5px; font-weight: 600;
  text-decoration: underline !important; text-underline-offset: 3px; }

/* more of the same Mukhi: a row that slides sideways */
.rf-more__row { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 8px; margin: 0 -4px; padding: 2px 4px 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(212, 166, 74, .5) transparent; }
.rf-mini { display: grid; align-content: start; gap: 6px; padding: 10px; border: 1px solid var(--rf-rim); border-radius: 12px;
  background: rgba(251, 248, 243, .06); scroll-snap-align: start; }
.rf-mini__photo { display: block; border-radius: 8px; overflow: hidden; background: var(--rf-cream); }
.rf-mini__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.rf-mini__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em;
  color: var(--rf-cream) !important; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none !important; }
.rf-mini__price { margin: 0; color: var(--rf-gold-2); font-size: 14.5px; font-weight: 700; }
.rf .rf-add--small { min-height: 38px; padding: 0 10px; font-size: 13px; }

/* The cart keeps out of the way: a small gold bead in the corner with the count and the total on it.
   Tap it and a cream card drops open with everything in the cart and the way to the order — cream,
   so it reads as a layer over the dark panel instead of part of it. It is fixed to the screen, not
   sticky: the theme's wrapper has overflow: hidden, which would stop sticky from sticking. */
.rf-cartbar { position: fixed; z-index: 40; top: 146px; right: 16px; display: grid; justify-items: end; gap: 8px;
  width: min(300px, calc(100vw - 24px)); }
.rf-pop .rf-cartbar { top: 64px; right: 14px; z-index: 2147483595; }

/* the bead: what it holds, at a glance */
.rf .rf-cartbar__head { display: inline-flex; align-items: center; gap: 9px; width: auto; min-height: 0; padding: 6px 14px 6px 6px;
  border: 1.5px solid #B8862D; border-radius: 999px; background: linear-gradient(180deg, #FFF6DF, #EFD79C); color: var(--rf-deep);
  font: inherit; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6); transition: translate .15s; }
.rf .rf-cartbar__head:hover { translate: 0 -1px; }
.rf-cartbar__count { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #0E5E62, #062E30 70%); color: var(--rf-gold-2); font-size: 15px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(212, 166, 74, .6); }
.rf-cartbar__text { display: grid; text-align: left; }
.rf-cartbar__text b { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7A5A16; }
.rf-cartbar__text small { font-size: 15px; font-weight: 700; color: var(--rf-deep); }
.rf-cartbar__chev { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: #7A5A16; transition: rotate .2s; }
.rf-cartbar__chev svg { width: 16px !important; height: 16px !important; }
.rf .rf-cartbar__head[aria-expanded="true"] .rf-cartbar__chev { rotate: 180deg; }

/* the card that drops open */
.rf-cartbar__list { width: 100%; max-height: min(46vh, 330px); overflow-y: auto; padding: 6px 14px 12px; border: 1px solid #E8DFCC;
  border-radius: 14px; background: var(--rf-cream); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
  animation: rf-cart-open .22s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes rf-cart-open { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0; } }
.rf-cartbar__list[hidden] { display: none; }
.rf-cartbar__line { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin: 10px 0 0;
  padding-bottom: 10px; border-bottom: 1px solid #EFE7D7; font-size: 12.5px; color: #4F6665; }
.rf-cartbar__line:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rf-cartbar__line img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px #EFE7D7; }
.rf-cartbar__line span { line-height: 1.35; }
.rf-cartbar__line b { color: var(--rf-ink); font-size: 13px; white-space: nowrap; }
/* taking one line out */
.rf .rf-cartbar__drop { flex: none; display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0;
  border-radius: 8px; background: none; color: #96705A; cursor: pointer; transition: background .15s, color .15s; }
.rf .rf-cartbar__drop:hover { background: #FBEAEC; color: #B42335; }
.rf .rf-cartbar__drop:disabled { opacity: .4; cursor: wait; }
.rf-cartbar__drop svg { width: 15px !important; height: 15px !important; }

.rf-cartbar__edit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; font-size: 12.5px; }
.rf-cartbar__edit a { color: #0A4A4D !important; text-decoration: underline !important; }
.rf .rf-cartbar__shut { min-height: 30px; padding: 0 10px; border: 1px solid #CDBE9F; border-radius: 999px; background: #fff; color: #4F6665;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rf .rf-cartbar__shut:hover { border-color: #0A4A4D; color: #0A4A4D; }

/* the way on, under the card and only while it is open */
.rf .rf-cartbar__go { display: none; width: 100%; min-height: 46px; padding: 0 16px; border: 1.5px solid #B8862D; border-radius: 12px;
  background: linear-gradient(180deg, var(--rf-gold-2), var(--rf-gold)); color: var(--rf-deep); font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6); }
.rf-cartbar:has(.rf-cartbar__list:not([hidden])) .rf-cartbar__go { display: block; }
.rf .rf-cartbar__go:hover { filter: brightness(1.07); }
.rf-cartbar.is-new .rf-cartbar__head { animation: rf-cart-pop .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rf-cart-pop { 0% { scale: .9; } 50% { scale: 1.06; } 100% { scale: 1; } }
@media (max-width: 1024px) {
  .rf-cartbar { top: 62px; right: 10px; left: 10px; justify-items: end; width: auto; }
  .rf-cartbar__list, .rf .rf-cartbar__go { width: min(320px, 100%); }
  .rf-pop .rf-cartbar { top: 60px; right: 10px; left: 10px; }
}
@media (max-width: 380px) {
  .rf-cartbar__line { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 6px; }
  .rf-cartbar__line img { width: 36px; height: 36px; }
  .rf-cartbar__list { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-cartbar.is-new .rf-cartbar__head, .rf-cartbar__list { animation: none; }
  .rf-cartbar__chev, .rf .rf-cartbar__head { transition: none; }
}

/* the order */
.rf-order__cart ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px; border: 1px solid var(--rf-rim); border-radius: 10px; list-style: none;
  background: rgba(251, 248, 243, .06); }
.rf-order__cart li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--rf-dim); }
.rf-order__cart li b { flex: none; color: var(--rf-cream); }
.rf-order__total { display: flex; justify-content: space-between; margin: 10px 2px 0; font-size: 15px; color: var(--rf-cream); }
.rf-order__total b { color: var(--rf-gold-2); font-size: 18px; }
.rf-order__edit { margin: 4px 2px 0; font-size: 13px; }
.rf-order__edit a, .rf-order__note a { color: var(--rf-gold-2) !important; text-decoration: underline !important; }
.rf-order__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rf-order select.rf-input { appearance: auto; }
.rf-order__note { margin: 12px 0 0; font-size: 12.5px; color: var(--rf-dim); text-align: center; }
.rf-done { padding: 6px 0; outline: none; }
.rf-order__empty { margin: 12px 0 0; color: var(--rf-dim); }
.rf-result__again { margin: 14px 0 0; text-align: center; font-size: 13.5px; }
.rf-result__again a { color: var(--rf-gold-2) !important; text-decoration: underline !important; }

.rf .rf-checkout { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, var(--rf-gold-2), var(--rf-gold)); color: var(--rf-deep) !important; font-size: 16px; font-weight: 700;
  text-decoration: none !important; }
.rf .rf-checkout:hover { filter: brightness(1.08); }
.rf .rf-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: 10px; padding: 0 16px;
  border: 1px solid rgba(251, 248, 243, .3); border-radius: 10px; background: transparent; color: var(--rf-cream) !important; font-size: 14.5px;
  font-weight: 600; text-decoration: none !important; }
.rf .rf-wa:hover { border-color: #43D27F; color: #B9F3D2 !important; }
.rf .rf-wa svg { width: 20px !important; height: 20px !important; color: #43D27F; }
.rf-input:focus-visible, .rf .rf-next:focus-visible, .rf .rf-back:focus-visible, .rf .rf-add:focus-visible, .rf .rf-checkout:focus-visible,
.rf .rf-wa:focus-visible, .rf-see:focus-visible { outline: 3px solid var(--rf-gold-2); outline-offset: 2px; }

/* from tablets up: more room, so the panel breathes and the tiles spread out */
@media (min-width: 560px) {
  .rf { padding: 30px 28px 26px; border-radius: 18px; }
  .rf-art { top: -90px; right: -90px; width: 320px !important; height: 320px !important; }
  .rf-tiles { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 10px; }
  .rf-card { padding: 18px 14px; }
  .rf-card--lead .rf-card__photo { width: 150px; height: 150px; }
  .rf-result__pair { gap: 10px; }
  .rf-more__row { grid-auto-columns: 31%; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rf-art { animation: none; } .rf-bar span, .rf-tile__in { transition: none; } }

/* ---- 2. the homepage popup, over the whole page ---- */
.rf-pop { position: fixed; inset: 0; z-index: 2147483590; display: flex; justify-content: center; padding: 10px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(3, 20, 21, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: rf-fade .35s ease both; }
.rf-pop[hidden] { display: none; }
@keyframes rf-fade { from { opacity: 0; } to { opacity: 1; } }
.rf-pop__card { position: relative; width: min(560px, 100%); margin: auto; border-radius: 18px; outline: none;
  box-shadow: 0 0 0 1px rgba(212, 166, 74, .55), 0 0 0 7px rgba(212, 166, 74, .12), 0 30px 70px rgba(0, 0, 0, .6);
  animation: rf-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.rf-pop__card > .rf { border-radius: 18px; }
.rf-pop .rf-eyebrow, .rf-pop .rf-title { padding-right: 0; }
@keyframes rf-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
/* the close button: a clear ×, always on top and in sight while the funnel scrolls */
.rf-pop__close { position: fixed; top: 14px; right: 14px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0;
  padding: 0; border: 1px solid rgba(212, 166, 74, .7); border-radius: 50%; background: rgba(6, 46, 48, .92); color: #FBF8F3;
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.rf-pop__close:hover { background: #D4A64A; border-color: #E7B75F; color: #062E30; }
.rf-pop__close:focus-visible { outline: 3px solid #E7B75F; }
@media (min-width: 560px) { .rf-pop { padding: 20px; } .rf-pop__close { top: 20px; right: 20px; } }
@media (prefers-reduced-motion: reduce) { .rf-pop, .rf-pop__card { animation: none; } }

/* ---- 3. /discover: one page with one thing to do, in the quiet style of a landing page: the line,
   the Hindi line, one button, then the funnel and the three reasons to trust the store ---- */
.rf-hero { padding: 34px 18px 8px; text-align: center; background: linear-gradient(180deg, #FFFDF8 0%, #F6EEE1 100%); }
.rf-hero__eyebrow { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8A6516; }
.gt-home .rf-hero h1 { margin: 0; font: 400 clamp(31px, 8.4vw, 54px)/1.1 Georgia, "Times New Roman", serif; color: #0B3B3C; letter-spacing: -.01em; }
.rf-hero__hi { margin: 10px 0 0; font: 600 clamp(19px, 5.2vw, 27px)/1.35 "Noto Serif Devanagari", "Tiro Devanagari Hindi", Mangal, serif; color: #A8761B; }
.rf-hero__lead { margin: 18px auto 0; max-width: 470px; font-size: 15.5px; line-height: 1.6; color: #4F6665; }

/* the one button: a gold pill with a hard green edge under it */
.gt-home a.rf-cta { display: inline-flex; align-items: center; gap: 14px; margin: 26px auto 0; padding: 13px 16px 13px 26px; border: 1.5px solid #083B3D;
  border-radius: 999px; background: linear-gradient(180deg, #EFC368, #D4A64A); color: #062E30 !important; text-decoration: none !important;
  box-shadow: 2px 4px 0 0 #083B3D; transition: transform .15s, box-shadow .15s; }
.gt-home a.rf-cta:hover { transform: translate(1px, 2px); box-shadow: 1px 2px 0 0 #083B3D; }
.rf-cta span { display: block; text-align: left; }
.rf-cta b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
.rf-cta small { display: block; font-size: 12.5px; opacity: .78; }
.rf-cta__go { display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #083B3D; color: #E7B75F; }
.rf-cta__go svg { width: 18px !important; height: 18px !important; }

/* the three cards under it: a bead and two marks, each in a gold ring */
.rf-trust { display: grid; gap: 10px; max-width: 820px; margin: 28px auto 0; }
.rf-trust__card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border: 1px solid #EADFCB; border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF8 0%, #FBF5EA 100%); box-shadow: 0 10px 26px -14px rgba(8, 59, 61, .35); text-align: left; }
.rf-trust__art { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: #fff; color: #0A4A4D; box-shadow: 0 0 0 1.5px #D4A64A, 0 0 0 5px rgba(212, 166, 74, .16); }
.rf-trust__art img { width: 100%; height: 100%; object-fit: cover; }
/* The Himalaya photo is wide and its malas hang on the left: the circle looks there, and holds them
   a little closer, so the beads are what you see at this size. */
.rf-trust__wide { object-position: 15% 40%; scale: 1.35; }
.rf-trust__art:has(.rf-trust__wide) { background: #1A2B33; }
.rf-trust__art svg { width: 26px !important; height: 26px !important; }
.rf-trust__text small { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9A7524; }
.rf-trust__text b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: #083B3D; }
.rf-site:not([data-rf-view="landing"]) .rf-hero { display: none; }
.rf-crumb { display: none; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8A6516; }
.rf-again { min-height: 34px; padding: 0 12px; border: 1px solid #CDBE9F; border-radius: 999px; background: #fff;
  color: #0A4A4D; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.rf-again:hover { border-color: #0A4A4D; background: #0A4A4D; color: #fff; }
.rf-leave { position: fixed; z-index: 60; top: 66px; right: 12px; display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 0 15px 0 11px; border: 1px solid #CDBE9F; border-radius: 999px; background: #fff; color: #0A4A4D !important; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(8, 59, 61, .18); }
@media (min-width: 1025px) { .rf-leave { top: 92px; right: 20px; } }
.rf-leave b { font-size: 19px; font-weight: 400; line-height: 1; }
.rf-leave:hover { background: #0A4A4D; border-color: #0A4A4D; color: #fff !important; }
/* On a narrow screen the floating cart bar is nearly as wide as the page, so the way out joins the
   row above the funnel instead of the corner, and that row starts below the bar. */
@media (max-width: 1024px) {
  .rf-leave { position: static; box-shadow: none; }
  .rf-site .rf-crumb { padding-right: 0; }
}
.rf-crumb a { color: #0A4A4D !important; text-decoration: none !important; }
.rf-site .rf-crumb { display: flex; padding-right: 110px; }
.rf-site[data-rf-view="landing"] .rf-crumb { padding-right: 0; }
@media (max-width: 599px) {
  .rf-crumb a:not(.rf-leave), .rf-crumb > span { display: none; }
  .rf-site .rf-crumb { padding-right: 96px; }
}
.rf-site[data-rf-view="landing"] .rf-crumb a:not(.rf-leave), .rf-site[data-rf-view="landing"] .rf-crumb span { display: none; }
.rf-site:not([data-rf-view="landing"]) .rf-start { padding-top: 22px; min-height: 70vh; }
.rf-start { padding: 26px 14px 36px; background: linear-gradient(180deg, #F6EEE1 0%, #FBF8F3 100%); border-bottom: 1px solid #EADFCB; }
.rf-start > .rf { max-width: 560px; margin: 0 auto; scroll-margin-top: 90px; }
.rf-site[data-rf-view="result"] .rf-start > .rf, .rf-site[data-rf-view="order"] .rf-start > .rf { max-width: 760px; }
.rf-site[data-rf-view="result"] .rf-crumb, .rf-site[data-rf-view="order"] .rf-crumb { max-width: 760px; }
@media (min-width: 760px) {
  .rf-hero { padding: 56px 20px 10px; }
  .rf-hero__lead { font-size: 16.5px; }
  .rf-trust { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .rf-trust__card { flex-direction: column; justify-content: flex-start; gap: 12px; padding: 22px 16px; text-align: center; }
  .rf-trust__art { width: 64px; height: 64px; }
  .rf-trust__art svg { width: 32px !important; height: 32px !important; }
  .rf-start { padding: 36px 20px 56px; }
}
@media (prefers-reduced-motion: reduce) { .gt-home a.rf-cta { transition: none; } }

/* the store's own photos, a shelf that slides sideways on a phone and sits in a row on a screen */
.rf-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; margin: 26px -14px 0; padding: 0 14px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rf-shelf::-webkit-scrollbar { display: none; }
.rf-shelf__item { margin: 0; border-radius: 14px; overflow: hidden; scroll-snap-align: center; box-shadow: 0 10px 24px rgba(8, 59, 61, .12); }
.rf-shelf__item img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

/* 1 to 21 Mukhi: the store's own bead photos, each a door to that collection */
.rf-mukhi { padding: 34px 14px 38px; background: #FBF8F3; border-bottom: 1px solid #EADFCB; text-align: center; }
.rf-mukhi__in { max-width: 1100px; margin: 0 auto; }
.rf-mukhi__eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8A6516; }
.gt-home .rf-mukhi h2 { margin: 0; font: 400 clamp(23px, 5.6vw, 34px)/1.2 Georgia, "Times New Roman", serif; color: #0B3B3C; }
.rf-mukhi__hi { margin: 8px 0 0; font: 600 15.5px/1.4 "Noto Serif Devanagari", "Tiro Devanagari Hindi", Mangal, serif; color: #A8761B; }
.rf-mukhi__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.rf-mukhi__row a { position: relative; display: block; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px #E8DFCC, 0 6px 14px rgba(8, 59, 61, .1); transition: transform .18s, box-shadow .18s; }
.rf-mukhi__row a:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #D4A64A, 0 10px 20px rgba(8, 59, 61, .18); }
.rf-mukhi__row img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.rf-mukhi__row span { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #0A4A4D; color: #E7B75F; font-size: 11px; font-weight: 700; }

/* a verse, as the homepage has between its sections */
.rf-shloka { padding: 26px 16px; text-align: center; background: linear-gradient(180deg, #F7E9C4 0%, #EFD79C 100%); border-bottom: 1px solid #B8862D; }
.rf-shloka__verse { display: grid; gap: 4px; margin: 0; font: 600 clamp(16px, 4.2vw, 21px)/1.6 "Noto Serif Devanagari", "Tiro Devanagari Hindi", Mangal, serif; color: #0A4A4D; }
.rf-shloka__meaning { margin: 10px 0 0; font: 400 13.5px/1.6 "Noto Serif Devanagari", "Tiro Devanagari Hindi", Mangal, serif; color: #6B5313; }

@media (min-width: 760px) {
  .rf-shelf { grid-auto-columns: 1fr; grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); margin-inline: auto; max-width: 980px; overflow: visible; }
  .rf-mukhi { padding: 54px 20px 58px; }
  .rf-mukhi__row { grid-template-columns: repeat(11, 1fr); gap: 12px; }
  .rf-shloka { padding: 34px 20px; }
}

/* On this page the funnel keeps its own cart in the corner, with everything in it and the way to
   the order, so the theme's cart in the header would be a second one saying the same thing: it is
   left out here only. Every other page keeps it. */
body.rf-site-page .header__icon--cart,
body.rf-site-page .header-advanced-cart,
body.rf-site-page .header__iconItem:has(.header__icon--cart) { display: none !important; }

/* the old Rudraksha Calculator page: the funnel in place of its form, its page title centred as before */
.custom-code-block > .rf { display: block; max-width: 560px; margin: 24px auto; }
h1.main-page-title.page-header { text-align: center !important; }

/* ---- 4. /admin/discover ---- */
.rf-login { display: grid; gap: 10px; max-width: 380px; margin: 40px auto; padding: 28px 24px; border: 1px solid #E8DFCC; border-radius: 14px; background: #fff; }
.rf-login h1 { margin: 0; font-size: 24px; }
.rf-login p { margin: 0 0 6px; color: #566766; }
.rf-login label { font-size: 13px; font-weight: 700; }
.rf-login input { height: 46px; padding: 0 12px; border: 1px solid #CDBE9F; border-radius: 8px; font: inherit; }
.rf-admin__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rf-admin__item { display: grid; gap: 12px; margin: 0 0 14px; padding: 16px 18px; border: 1px solid #E8DFCC; border-left: 4px solid #D4A64A;
  border-radius: 10px; background: #fff; }
.rf-admin__item header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rf-admin__item header b { font-size: 17px; }
.rf-admin__ok { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #E3F2E8; color: #1A6B3A; font-size: 12px; font-weight: 700; }
.rf-admin__item header span { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-admin__item dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; margin: 0; }
.rf-admin__item dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #566766; }
.rf-admin__item dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.rf-admin__item footer { font-size: 13px; color: #566766; }