/* =========================================================
   Bhakti theme — devotional product landing page
   Midnight blue + temple gold + saffron & marigold
   ========================================================= */
:root {
  --night: #0b1230;
  --night-2: #131d48;
  --gold: #e2b357;
  --gold-2: #f6d98f;
  --saffron: #ff8a1f;
  --marigold: #ffb627;
  --kumkum: #b8232f;
  --ivory: #fdf6e9;
  --sandal: #f6e7cc;
  --ink: #2a1d10;
  --muted: #6f5a43;
  --radius: 20px;
  --serif: 'Playfair Display', Georgia, serif;
  --caps: 'Cinzel', Georgia, serif;
  --sans: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --deva: 'Tiro Devanagari Hindi', 'Mukta', serif;
  --glow: linear-gradient(100deg, #ffcf5a 0%, var(--saffron) 55%, #ff6a1f 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body.bhakti { margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 46px); }
.b-wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.b-narrow { max-width: 820px; }
.b-center { text-align: center; max-width: 780px; margin: 0 auto 44px; }

/* Marigold toran garland */
.toran {
  height: 22px;
  background:
    radial-gradient(circle at 11px 6px, var(--marigold) 7px, transparent 8px) 0 0 / 22px 22px repeat-x,
    radial-gradient(circle at 11px 6px, var(--saffron) 9px, transparent 10px) 0 0 / 22px 22px repeat-x,
    var(--night);
  position: relative; z-index: 60;
}
.toran::after {
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 14px;
  background: radial-gradient(ellipse at 50% 0, #3f8f3a 5px, transparent 6px) 0 0 / 88px 14px repeat-x;
}

/* Buttons */
.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 18px; padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.b-btn:hover { transform: translateY(-2px); }
.b-btn:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.b-btn-glow { background: var(--glow); color: #2b1300; box-shadow: 0 10px 28px -8px rgba(255, 138, 31, .75), inset 0 -2px 0 rgba(0,0,0,.12); }
.b-btn-glow:hover { box-shadow: 0 16px 36px -8px rgba(255, 138, 31, .9); }
.b-btn-sm { padding: 9px 18px; font-size: 15px; background: transparent; color: var(--gold-2); border: 1.5px solid var(--gold); }
.b-btn-glow.b-btn-sm { color: #2b1300; border: 0; }
.b-btn-block { width: 100%; }

/* Nav */
.b-nav { position: sticky; top: 0; z-index: 50; background: rgba(11, 18, 48, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(226, 179, 87, .25); }
.b-nav-inner { display: flex; justify-content: space-between; align-items: center; min-height: 62px; gap: 14px; }
.b-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.b-om { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--glow); color: var(--night); font-family: var(--deva); font-size: 20px; line-height: 1; padding-top: 3px; }

/* Hero */
.b-hero { position: relative; overflow: hidden; color: #fff; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: radial-gradient(ellipse at 75% 40%, rgba(255, 170, 60, .22), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(90, 110, 255, .25), transparent 50%), linear-gradient(180deg, var(--night) 0%, #0e1740 100%); }
.stars { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 70%, #ffe6a8, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 8% 65%, #ffe6a8, transparent), radial-gradient(1.2px 1.2px at 70% 50%, #fff, transparent);
  background-size: 380px 380px; animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .2; } }
.b-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.b-shloka { font-family: var(--deva); color: var(--gold); font-size: 20px; letter-spacing: .05em; margin: 0 0 10px; }
.b-eyebrow { display: inline-block; font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--night); background: var(--gold-2); padding: 6px 14px; border-radius: 999px; }
.b-hero h1 { font-size: clamp(32px, 3.8vw, 50px); margin: 20px 0 18px; font-weight: 800; }
.b-hero h1::first-line { color: var(--gold-2); }
.b-lead { font-size: clamp(18px, 1.6vw, 21px); color: rgba(255, 255, 255, .8); margin: 0; max-width: 600px; }
.b-tools { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.b-tools li { font-weight: 600; font-size: 15px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(226, 179, 87, .45); color: var(--gold-2); background: rgba(226, 179, 87, .08); }
.b-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 32px; }
.b-price { display: flex; align-items: baseline; gap: 10px; }
.b-price .now, .b-order-price .now { font-family: var(--serif); font-weight: 800; font-size: 46px; color: #fff; line-height: 1; }
.b-price s, .b-order-price s { color: rgba(255, 255, 255, .55); font-size: 20px; }
.off { align-self: center; background: var(--kumkum); color: #fff; font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 8px; }
.b-micro { margin: 18px 0 0; font-size: 15px; color: rgba(255, 255, 255, .65); }

.b-hero-visual { position: relative; display: grid; place-items: center; min-height: 480px; }
.b-cover { position: relative; z-index: 3; width: min(360px, 78%); border-radius: 10px; box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(226, 179, 87, .5), 0 0 60px rgba(255, 180, 70, .25); transform: rotate(-2deg); transition: transform .4s; }
.b-cover:hover { transform: rotate(0) scale(1.02); }
.halo { position: absolute; z-index: 1; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 90, .45), rgba(255, 140, 30, .12) 50%, transparent 70%); }
.mandala { position: absolute; z-index: 2; width: 520px; height: 520px; opacity: .35; animation: spin 80s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='%23e2b357' stroke-width='.6'%3E%3Ccircle r='96'/%3E%3Ccircle r='86'/%3E%3Ccircle r='60'/%3E%3Ccircle r='30'/%3E%3Cg id='p'%3E%3Cpath d='M0-96C10-80 10-66 0-60C-10-66-10-80 0-96Z'/%3E%3Cpath d='M0-60C8-48 8-38 0-30C-8-38-8-48 0-60Z'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(22.5)'/%3E%3Cuse href='%23p' transform='rotate(45)'/%3E%3Cuse href='%23p' transform='rotate(67.5)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(112.5)'/%3E%3Cuse href='%23p' transform='rotate(135)'/%3E%3Cuse href='%23p' transform='rotate(157.5)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(202.5)'/%3E%3Cuse href='%23p' transform='rotate(225)'/%3E%3Cuse href='%23p' transform='rotate(247.5)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(292.5)'/%3E%3Cuse href='%23p' transform='rotate(315)'/%3E%3Cuse href='%23p' transform='rotate(337.5)'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
.diya { position: absolute; z-index: 4; left: 4%; bottom: 6%; width: 86px; height: 34px; border-radius: 0 0 50px 50px; background: linear-gradient(180deg, #d0702a, #8a3a12); box-shadow: inset 0 4px 0 #f0a050, 0 10px 20px rgba(0, 0, 0, .5); }
.flame { position: absolute; left: 50%; top: -34px; width: 18px; height: 34px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 75%, #fff7c2 0%, #ffd23f 35%, #ff8a1f 70%, transparent 72%); filter: drop-shadow(0 0 14px rgba(255, 180, 60, .95)); transform-origin: 50% 90%; animation: flicker 1.6s ease-in-out infinite alternate; }
@keyframes flicker { 0% { transform: rotate(-3deg) scaleY(1); } 50% { transform: rotate(2deg) scaleY(1.08); } 100% { transform: rotate(-1deg) scaleY(.95); } }
.b-seal { position: absolute; z-index: 4; right: 6%; top: 8%; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; background: var(--kumkum); color: #fff; border: 3px dashed var(--gold-2); transform: rotate(10deg); box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.b-seal strong { font-family: var(--serif); font-size: 32px; }
.b-seal span { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }

/* Ribbon */
.b-ribbon { background: var(--glow); color: #3a1600; overflow: hidden; padding: 12px 0; border-block: 2px solid var(--gold); }
.b-ribbon-track { display: flex; gap: 22px; width: max-content; animation: slide 30s linear infinite; }
.b-ribbon span { font-family: var(--caps); font-weight: 700; font-size: 17px; white-space: nowrap; letter-spacing: .06em; }
.b-ribbon .dot { color: var(--kumkum); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Sections */
.b-sec { padding: clamp(64px, 8vw, 104px) 0; position: relative; }
.b-ivory { background: var(--ivory); }
.b-sandal { background: linear-gradient(180deg, var(--sandal), var(--ivory)); }
.b-night { background: var(--night); color: #fff; }
.b-kicker { font-family: var(--caps); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--kumkum); margin: 0 0 12px; }
.b-kicker.gold { color: var(--gold); }
.b-sub { font-size: 19px; color: rgba(255, 255, 255, .75); margin: 16px 0 0; }
.b-sub.dark { color: var(--muted); }
.b-ivory h2, .b-sandal h2 { color: var(--night); }

/* Pain */
.b-pain { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
.b-pain li { position: relative; background: #fff; border: 1px solid #efdcb8; border-radius: 14px; padding: 14px 18px 14px 54px; font-size: 18px; }
.b-pain li::before { content: "🪷"; position: absolute; left: 18px; top: 13px; }
.b-turn { margin: 30px 0 0; font-size: 21px; font-family: var(--serif); color: var(--night); }
.b-turn em { color: var(--kumkum); }

/* Flow */
.b-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: x; }
.b-flow li { position: relative; text-align: center; padding: 22px 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(226, 179, 87, .3); font-weight: 700; font-size: 18px; }
.b-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 18px; }
.b-flow .n { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: var(--glow); color: var(--night); font-family: var(--deva); font-size: 22px; padding-top: 3px; }

/* Moments */
.b-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.b-moment { background: #fff; border-radius: var(--radius); padding: 24px; border: 1px solid #efdcb8; box-shadow: 0 10px 26px -18px rgba(90, 50, 0, .45); transition: transform .25s; }
.b-moment:hover { transform: translateY(-4px); }
.b-moment .ic { font-size: 32px; }
.b-moment h3 { font-size: 21px; margin: 10px 0 4px; color: var(--night); }
.b-moment p { margin: 0; color: var(--muted); font-size: 16.5px; }

/* Chapters */
.b-chapters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.b-chapter { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: var(--radius); padding: 22px; border: 1px solid #ecd6ab; border-left: 5px solid var(--saffron); }
.b-ch-num { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--night); color: var(--gold-2); font-family: var(--deva); font-size: 28px; padding-top: 4px; box-shadow: 0 0 0 3px var(--gold); }
.b-ch-label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron); }
.b-chapter h3 { font-size: 21px; color: var(--night); margin: 2px 0 6px; }
.b-chapter p:last-child { margin: 0; color: var(--muted); font-size: 16.5px; }
.b-value { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 24px; border-radius: var(--radius); background: var(--night); color: #fff; text-align: center; border: 2px solid var(--gold); }
.b-value strong { font-family: var(--serif); font-size: 26px; color: var(--gold-2); }

/* Previews */
.b-previews { display: flex; gap: 22px; overflow-x: auto; padding: 4px max(20px, calc(50vw - 580px)) 18px; scroll-snap-type: x mandatory; scrollbar-color: var(--gold) transparent; }
.b-previews figure { flex: none; width: 260px; margin: 0; scroll-snap-align: start; }
.b-previews img { border-radius: 10px; border: 1px solid rgba(226, 179, 87, .4); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7); transition: transform .3s; }
.b-previews img:hover { transform: translateY(-6px); }
.b-previews figcaption { margin-top: 12px; text-align: center; color: var(--gold-2); font-weight: 600; font-size: 16px; }

/* Who */
.b-who { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.b-who-card { border-radius: var(--radius); padding: 28px; }
.b-who-card h3 { font-size: 24px; margin-bottom: 14px; }
.b-who-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-who-card li { padding-left: 30px; position: relative; }
.b-who-card.yes { background: #fff; border: 2px solid var(--gold); }
.b-who-card.yes h3 { color: var(--night); }
.b-who-card.yes li::before { content: "✓"; position: absolute; left: 0; color: #fff; background: #2f8f4a; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; top: 3px; }
.b-who-card.no { background: #f3e6cf; }
.b-who-card.no h3 { color: var(--muted); }
.b-who-card.no li { color: var(--muted); }
.b-who-card.no li::before { content: "✕"; position: absolute; left: 4px; color: var(--kumkum); font-weight: 800; }

/* Order */
.b-order-sec { background: radial-gradient(ellipse at 20% 30%, rgba(255, 160, 50, .18), transparent 55%), var(--night); }
.b-order-grid { display: grid; grid-template-columns: 1fr 460px; gap: 50px; align-items: center; }
.b-order-pitch h2 { font-size: clamp(30px, 3.6vw, 44px); }
.b-checks { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
.b-checks li { padding-left: 34px; position: relative; font-size: 18px; color: rgba(255, 255, 255, .88); }
.b-checks li::before { content: "✦"; position: absolute; left: 4px; color: var(--marigold); }
.b-order-cover { width: 170px; border-radius: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, .6); transform: rotate(-4deg); }
.b-order-card { background: var(--ivory); color: var(--ink); border-radius: 24px; padding: 30px; border: 3px solid var(--gold); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 0 8px rgba(226, 179, 87, .15); }
.b-order-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.b-order-price .now { color: var(--night); }
.b-order-price s { color: var(--muted); }
.b-order-plan { margin: 6px 0 18px; color: var(--muted); font-size: 15px; }
.b-form label { display: block; font-weight: 600; font-size: 15px; margin: 12px 0 6px; color: var(--night); }
.b-form input[type=text], .b-form input[type=email], .b-form input[type=tel] { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e2cfa8; background: #fff; }
.b-form input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255, 138, 31, .18); }
.b-form small { color: var(--muted); font-size: 13.5px; }
.b-pay { border: 0; padding: 0; margin: 16px 0 20px; display: grid; gap: 8px; }
.b-pay legend { font-weight: 600; font-size: 15px; color: var(--night); margin-bottom: 6px; }
.b-pay label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e2cfa8; background: #fff; cursor: pointer; }
.b-pay label:has(input:checked) { border-color: var(--saffron); background: #fff4e3; }
.b-pay input { accent-color: var(--saffron); width: 18px; height: 18px; }
.b-pay span { display: grid; line-height: 1.25; }
.b-pay small { font-weight: 400; }
.b-secure { text-align: center; margin: 12px 0 0; font-size: 14.5px; color: var(--muted); }
.b-policy { text-align: center; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.b-soon { font-size: 18px; text-align: center; }

/* FAQ */
.b-faq { display: grid; gap: 12px; }
.b-faq details { background: #fff; border: 1px solid #ecd6ab; border-radius: 14px; padding: 4px 20px; }
.b-faq summary { cursor: pointer; font-weight: 700; font-size: 18px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--night); }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; color: var(--saffron); font-size: 24px; line-height: 1; }
.b-faq details[open] summary::after { content: "−"; }
.b-faq details p { margin: 0 0 16px; color: var(--muted); }

/* Final */
.b-final { padding: clamp(64px, 8vw, 100px) 0; text-align: center; color: #fff; background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 40, .35), transparent 60%), var(--night); }
.b-final h2 { margin: 0 auto 28px; max-width: 700px; }
.b-disclaimer { margin: 30px auto 0; max-width: 640px; font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.b-foot { background: #070b1f; color: rgba(255, 255, 255, .6); padding: 26px 0 90px; font-size: 14px; }
.b-foot-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.b-foot p { margin: 0; }
.b-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.b-foot a { text-decoration: none; }
.b-foot a:hover { color: var(--gold-2); }

/* Sticky bar */
.b-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(11, 18, 48, .96); color: #fff; border: 1px solid var(--gold); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); transform: translateY(140%); transition: transform .3s; max-width: 520px; margin: 0 auto; }
.b-sticky.show { transform: none; }
.b-sticky strong { font-family: var(--serif); font-size: 24px; }
.b-sticky s { color: rgba(255, 255, 255, .5); font-size: 15px; }

/* Responsive */
@media (max-width: 960px) {
  .b-hero-grid, .b-order-grid { grid-template-columns: 1fr; }
  .b-hero-visual { min-height: 420px; order: -1; }
  .mandala { width: 420px; height: 420px; }
  .halo { width: 340px; height: 340px; }
  .b-cover { width: min(280px, 70%); }
  .b-flow { grid-template-columns: repeat(3, 1fr); }
  .b-flow li:nth-child(3)::after { display: none; }
  .b-moments { grid-template-columns: repeat(2, 1fr); }
  .b-chapters, .b-who { grid-template-columns: 1fr; }
  .b-order-cover { display: none; }
}
@media (max-width: 560px) {
  body.bhakti { font-size: 17px; }
  .b-nav .b-btn-sm { display: none; }
  .b-hero-visual { min-height: 360px; }
  .mandala { width: 360px; height: 360px; }
  .b-seal { width: 74px; height: 74px; right: 2%; }
  .b-seal strong { font-size: 24px; }
  .diya { transform: scale(.8); left: 0; }
  .b-flow { grid-template-columns: repeat(2, 1fr); }
  .b-flow li::after { display: none; }
  .b-moments { grid-template-columns: 1fr 1fr; gap: 12px; }
  .b-moment { padding: 18px; }
  .b-price-row .b-btn { width: 100%; }
  .b-order-card { padding: 22px; }
  .b-previews figure { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Checkout button loading state (toggled by /js/payment.js) */
#submitBtn.loading { opacity: .75; pointer-events: none; }
#submitBtn.loading .btn-text { display: none; }
#submitBtn.loading .btn-loader { display: inline !important; }