/* ================= HOME ================= */

/* hero */
.hero { position: relative; overflow: hidden; isolation: isolate; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-8); color: var(--raat-900);
  background: radial-gradient(90% 70% at 78% 42%, #ffc233 0%, transparent 62%), var(--kesar); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--raat-900); }
.hero-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.02fr 1fr; gap: var(--s-7); min-height: min(760px, calc(100vh - var(--header-h))); } .hero { padding-bottom: var(--s-7); } }
.hero-live { margin-bottom: var(--s-4); display: flex; align-items: center; gap: 12px; }
.face-stack { display: inline-flex; }
.face-stack img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kesar); margin-left: -10px; }
.face-stack img:first-child { margin-left: 0; }
.hero .status { color: var(--raat-900); background: rgba(255, 255, 255, 0.55); padding: 4px 12px 4px 10px; border-radius: 999px; }
.hero .status-online::before { background: #1f8a4c; }
.hero-title { color: var(--raat-900); letter-spacing: -0.02em; font-weight: 500; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .line > span { display: inline-block; transform: translateY(105%); animation: rise 0.9s var(--ease-out) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.24s; font-style: italic; font-weight: 400; }
@keyframes rise { to { transform: none; } }
.hero .lede { color: var(--raat-800); }
.hero-lede { margin-top: var(--s-4); opacity: 0; animation: fade 0.8s 0.5s var(--ease-out) forwards; }
.hero-modes { margin-top: var(--s-5); opacity: 0; animation: fade 0.8s 0.65s var(--ease-out) forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mode-picker { border: 0; padding: 0; margin: 0 0 var(--s-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 520px; }
.mode-opt { position: relative; }
.mode-opt input { position: absolute; opacity: 0; }
.mode-box { display: grid; gap: 2px; padding: 12px; border: 1.5px solid rgba(18, 17, 16, 0.22); background: rgba(255, 255, 255, 0.22); border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out); height: 100%; }
.mode-box:hover { background: rgba(255, 255, 255, 0.45); }
.mode-box .icon { color: var(--raat-900); margin-bottom: 4px; }
.mode-name { font-weight: 600; color: var(--raat-900); }
.mode-price { font-size: 0.82rem; color: var(--raat-700); }
.mode-opt input:checked + .mode-box { border-color: var(--raat-900); background: #fff; box-shadow: 0 10px 24px -14px rgba(18, 17, 16, 0.6); }
.mode-opt input:focus-visible + .mode-box { outline: 2px solid var(--raat-900); outline-offset: 2px; }
.hero-ctas { gap: var(--s-5); }
.hero .link { color: var(--raat-900); }
.hero .link:hover { color: var(--raat-700); }
:focus-visible { outline-color: var(--raat-900); }

/* the logo's sun, behind the chart */
.hero-chart { position: relative; width: min(100%, 520px); margin: 0 auto; aspect-ratio: 1; }
.hero-sun { position: absolute; inset: -22%; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; animation: fade-in 1.4s 0.3s ease forwards; }
.hero-sun::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 89, 0.9) 0deg 1.6deg, transparent 1.6deg 7.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 34%, #000 62%, transparent 100%); mask: radial-gradient(closest-side, transparent 30%, #000 34%, #000 62%, transparent 100%);
  animation: spin 360s linear infinite reverse; }
.hero-sun::after { content: ""; position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(closest-side, #ffe066 0%, #ffd23f 70%, rgba(255, 210, 63, 0) 100%); }
.nak-ring { position: absolute; inset: -14%; width: 128%; height: 128%; max-width: none; animation: spin 240s linear infinite; opacity: 0; animation-name: spin, fade-in; animation-duration: 240s, 1.4s; animation-delay: 0s, 0.6s; animation-fill-mode: none, forwards; animation-timing-function: linear, ease; animation-iteration-count: infinite, 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }
.ring-line { fill: none; stroke: var(--raat-900); stroke-width: 1.4; }
.ring-tick { stroke: var(--raat-900); stroke-width: 1.2; }
.ring-text { fill: var(--raat-900); font-family: "Tiro Devanagari Hindi", serif; font-size: 15px; }
.hero-kundli { position: absolute; inset: 12%; background: rgba(255, 255, 255, 0.28); }
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-lines .draw { fill: none; stroke: var(--raat-900); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-in-out) forwards; }
.hero-lines .d2 { animation-delay: 0.35s; stroke-width: 1.4; }
.hero-lines .d3 { animation-delay: 0.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-lagna { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); color: var(--raat-900); font-size: 1.1rem; opacity: 0.7; }
.face { position: absolute; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.4); opacity: 0; border-radius: 50%; animation: pop 0.6s var(--ease-out) forwards; animation-delay: var(--d); z-index: 1; }
.face-lg { width: 23%; }
.face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--raat-900), 0 12px 24px -12px rgba(18, 17, 16, 0.6); background: var(--chandan); }
.face.is-online::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 18%; height: 18%; border-radius: 50%; background: #22a05a; border: 2px solid #fff; }
.face.is-busy::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 18%; height: 18%; border-radius: 50%; background: var(--kesar-deep); border: 2px solid #fff; }
@keyframes pop { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.face-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); background: var(--raat-900); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; display: grid; text-align: center; box-shadow: var(--shadow-lift); }
.face:hover .face-tip, .face:focus-visible .face-tip { opacity: 1; transform: translate(-50%, 0); }
.face:hover img { box-shadow: 0 0 0 3px var(--raat-900); }
@media (max-width: 719px) { .hero-chart { width: 78%; margin: var(--s-6) auto 14%; } .ring-text { font-size: 18px; } }

/* problems */
.problem-list { list-style: none; border-top: 1px solid var(--line); display: grid; }
@media (min-width: 900px) { .problem-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } .problem-list li:nth-child(-n+2) { border-top: 0; } }
.problem-list li { border-bottom: 1px solid var(--line); }
.problem-list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name arrow" "terms arrow" "count arrow"; gap: 2px 16px; padding: var(--s-4) 0; text-decoration: none; align-items: center; }
.problem-name { grid-area: name; font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--raat-800); line-height: 1.2; transition: color 0.2s; }
.problem-terms { grid-area: terms; font-size: 0.95rem; }
.problem-count { grid-area: count; color: var(--tulsi); font-weight: 600; }
.problem-arrow { grid-area: arrow; color: var(--sindoor); transition: transform 0.3s var(--ease-out); }
.problem-list a:hover .problem-name { color: var(--sindoor); }
.problem-list a:hover .problem-arrow { transform: translateX(6px); }
.problem-tools { margin-top: var(--s-5); line-height: 2; }

/* astrologer cards */
.astro-rail { grid-auto-columns: minmax(250px, 72%); }
@media (min-width: 720px) { .astro-rail { grid-auto-columns: 280px; } }
.astro-card { display: grid; grid-template-rows: auto 1fr; background: var(--ivory); border-radius: 14px; padding: 10px 10px 16px; border: 1px solid var(--line); }
.chandan-bg .astro-card { border-color: transparent; }
.astro-portrait { display: block; aspect-ratio: 4 / 4.6; position: relative; }
.astro-portrait img { transition: transform 0.6s var(--ease-out); }
.astro-card:hover .astro-portrait img { transform: scale(1.04); }
.astro-card.is-offline .astro-portrait img { filter: grayscale(0.55); }
.astro-free { position: absolute; left: 8px; bottom: 8px; background: var(--ivory); color: var(--tulsi); font-size: 0.76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.astro-body { padding: 12px 6px 0; display: flex; flex-direction: column; gap: 4px; }
.astro-name { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.2; color: var(--raat-800); }
.astro-name a { text-decoration: none; }
.astro-name a:hover { color: var(--sindoor); }
.astro-skills { font-size: 0.92rem; color: var(--ink-soft); }
.astro-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.astro-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.astro-price b { font-size: 1.15rem; }

/* today's sky */
.sky-band { background: var(--kesar-soft); padding: var(--s-5) 0; border-top: 1px solid rgba(179, 107, 0, 0.3); border-bottom: 1px solid rgba(179, 107, 0, 0.3); }
.sky-inner { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .sky-inner { grid-template-columns: auto 1fr auto; gap: var(--s-6); } }
.sky-title .h3 { color: var(--raat-800); }
.sky-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin: 0; }
@media (min-width: 720px) { .sky-facts { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 36px; } }
.sky-facts dt { font-size: 0.8rem; color: var(--ink-soft); }
.sky-facts dd { margin: 0; font-weight: 600; }

/* pooja showcase */
.pooja-show { position: relative; padding: var(--s-8) 0; }
@media (min-width: 1024px) { .pooja-show { padding: var(--s-9) 0; } }
.pooja-show .pooja-head { margin-bottom: var(--s-7); }
.pooja-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
@media (min-width: 900px) { .pooja-head { grid-template-columns: 1fr auto; align-items: end; } }
.pin-track { scroll-padding-inline: var(--gutter); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 78%); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 6px; scrollbar-width: none; }
.pin-track::-webkit-scrollbar { display: none; }
.pooja-panel { scroll-snap-align: start; display: grid; text-decoration: none; color: var(--chandan-soft); }
.pooja-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--arch); background: var(--raat-700); }
.pooja-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.pooja-panel:hover .pooja-media img { transform: scale(1.05); }
.pooja-info { display: grid; gap: 4px; padding: var(--s-4) 4px 0; }
.pooja-info .h3 { color: var(--ivory); }
.pooja-deity { color: var(--pital-light); }
.pooja-meta { display: flex; flex-direction: column; gap: 2px; color: #cfc7bb; }
.pooja-meta b { color: var(--ivory); font-size: 1.1rem; }
@media (min-width: 1024px) {
  .pooja-show.is-pinned { height: var(--pin-h, 260vh); padding: 0; }
  .pooja-show.is-pinned .pin-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--header-h) + var(--s-4)) 0 var(--s-7); box-sizing: border-box; }
  .pooja-show.is-pinned .pooja-head { margin-bottom: var(--s-5); }
  .pooja-show.is-pinned .pooja-media { aspect-ratio: 1 / 1.1; }
  .pooja-show.is-pinned .pin-track { overflow: visible; grid-auto-columns: clamp(220px, calc((100vh - 540px) / 1.1), 300px); gap: var(--s-6); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); will-change: transform; }
  .pooja-show.is-pinned .pooja-panel:nth-child(even) { margin-top: 40px; }
}

/* mall mosaic */
.mosaic { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.tile { position: relative; display: grid; text-decoration: none; border-radius: 14px; overflow: hidden; background: var(--chandan-soft); isolation: isolate; }
.tile-media { display: block; aspect-ratio: 1; overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-text { padding: 12px 14px 14px; display: grid; gap: 2px; }
.tile-text .h3 { font-size: 1.15rem; }
.tile-count { color: var(--pital); font-weight: 600; }
.tile-hero { grid-column: 1 / -1; }
.tile-hero .tile-media { aspect-ratio: 16 / 10; }
.tile-hero .tile-text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-5); background: linear-gradient(transparent, rgba(18, 17, 16, 0.85)); color: var(--chandan-soft); }
.tile-hero .h3 { color: var(--ivory); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.tile-hero .tile-count { color: var(--kesar-soft); }
.tile:hover .tile-media img { transform: scale(1.03); transition: transform 0.8s var(--ease-out); }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; }
  .tile-hero { grid-column: 1; grid-row: 1 / span 2; }
  .tile-hero .tile-media { aspect-ratio: auto; height: 100%; min-height: 520px; }
  .tile-3 { grid-column: 2 / span 2; grid-template-columns: 1fr 1fr; }
  .tile-3 .tile-media { aspect-ratio: auto; height: 100%; }
  .tile-3 .tile-text { align-content: center; padding: var(--s-5); }
  .tile-4 { display: none; }
}
.mosaic-more { margin-top: var(--s-5); }

/* how it works */
.how-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .how-grid { grid-template-columns: 0.9fr 1fr; gap: var(--s-9); } .how-sticky { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } }
.how-offer { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid rgba(246, 166, 31, 0.4); border-radius: var(--r-m); }
.how-offer .h3 { color: var(--kesar-soft); }
.how-meter { display: none; }
@media (min-width: 1024px) { .how-meter { display: flex; gap: 6px; margin-top: var(--s-6); } .how-meter span { height: 3px; flex: 1; background: rgba(255, 255, 255, 0.15); border-radius: 2px; transition: background 0.4s; } .how-meter span.is-on { background: var(--kesar); } }
.how-steps { list-style: none; display: grid; gap: var(--s-6); }
.how-step { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding-bottom: var(--s-6); border-bottom: 1px solid rgba(246, 166, 31, 0.18); opacity: 0.45; transition: opacity 0.5s; }
.how-step.is-active, .no-js .how-step { opacity: 1; }
@media (max-width: 1023px) { .how-step { opacity: 1; } }
@media (min-width: 1024px) { .how-step { min-height: 42vh; align-content: center; } }
.step-no { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pital-light); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.2rem; color: var(--pital-light); }
.how-step p { color: #d6cfc4; }

/* trust */
.trust-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: 1fr 1.2fr; } .assurances { grid-column: 1 / -1; } }
.counters { display: grid; gap: var(--s-5); margin: 0; }
@media (min-width: 720px) { .counters { grid-template-columns: repeat(3, 1fr); } }
.counters div { border-top: 2px solid var(--raat-800); padding-top: var(--s-3); }
.counters dd { margin: 0; font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--raat-800); }
.counters dd small { font-size: 0.45em; color: var(--muted); }
.counters dt { order: 2; font-size: 0.95rem; color: var(--ink-soft); margin-top: 6px; }
.counters div { display: flex; flex-direction: column-reverse; }
.assurances { list-style: none; display: grid; gap: var(--s-5); margin-top: var(--s-4); }
@media (min-width: 900px) { .assurances { grid-template-columns: repeat(3, 1fr); } }
.assurances li { display: flex; gap: 14px; }
.assurances .icon { color: var(--pital); width: 26px; height: 26px; }

/* reviews */
.review-wall { columns: 1; column-gap: var(--s-5); }
@media (min-width: 720px) { .review-wall { columns: 2; } }
@media (min-width: 1100px) { .review-wall { columns: 3; } }
.review { break-inside: avoid; margin: 0 0 var(--s-5); padding: var(--s-5); background: var(--ivory); border-radius: var(--r-m); display: grid; gap: var(--s-3); }
.review blockquote { margin: 0; font-family: var(--f-display); font-size: 1.2rem; line-height: 1.45; color: var(--raat-800); }
.review:nth-child(3n + 2) blockquote { font-size: 1.35rem; }

/* tools ledger */
.ledger-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .ledger-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); } .ledger-intro { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } }
.ledger-intro .btn { margin-top: var(--s-5); }
.ledger { list-style: none; border-top: 1px solid var(--line); }
.ledger li { border-bottom: 1px solid var(--line); }
.ledger a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; text-decoration: none; align-items: center; }
.ledger-name { font-weight: 600; font-size: 1.1rem; }
.ledger-desc { grid-column: 1; }
.ledger .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--sindoor); transition: transform 0.3s var(--ease-out); }
.ledger a:hover .ledger-name { color: var(--sindoor); }
.ledger a:hover .icon { transform: translateX(5px); }

/* insights strip */
.strip { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .strip { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; column-gap: var(--s-6); } .strip-lead { grid-row: 1 / span 3; } }
.strip-item { display: grid; gap: 6px; text-decoration: none; align-content: start; background: #fff; border-radius: 16px; padding: 12px 12px 20px; transition: box-shadow 0.3s, transform 0.3s var(--ease-out); }
.strip-item:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.strip-lead > :not(.strip-media) { margin-inline: 8px; }
.strip-lead .strip-media { margin-bottom: 10px; }
.strip-item:not(.strip-lead) { padding: 12px; align-items: center; align-content: center; }
.strip-item:not(.strip-lead) > :not(.strip-media) { padding-right: 8px; }
.strip-item:not(.strip-lead) { grid-template-columns: 110px 1fr; column-gap: 14px; }
.strip-item:not(.strip-lead) .strip-media { grid-row: 1 / span 3; aspect-ratio: 1; }
.strip-media { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; }
.strip-media img { width: 100%; height: 100%; object-fit: cover; }
.strip-item:hover .h2, .strip-item:hover .h3 { color: var(--sindoor); }
@media (min-width: 900px) { .strip-item:not(.strip-lead) { grid-column: 2 / span 2; } }

/* app band */
.app-band { padding: var(--s-8) 0; }
@media (min-width: 1024px) { .app-band { padding: var(--s-9) 0; } }
.app-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .app-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); } }
.app-photo { border-radius: var(--arch); overflow: hidden; aspect-ratio: 4 / 4.4; max-width: 460px; }
.app-photo img { width: 100%; height: 100%; object-fit: cover; }

/* newsletter */
.newsletter-inner { text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.newsletter-form { display: flex; gap: 8px; width: 100%; max-width: 480px; margin-top: var(--s-3); }
.newsletter-form .input { flex: 1; }
@media (max-width: 480px) { .newsletter-form { flex-direction: column; } }

/* ================= CART DRAWER ================= */
.cart-lines { list-style: none; display: grid; gap: var(--s-4); }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; }
.cart-thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--chandan-soft); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: grid; gap: 2px; }
.cart-name { font-weight: 600; text-decoration: none; line-height: 1.3; }
.cart-price { display: grid; justify-items: end; gap: 4px; }
.cart-price .link { border: 0; background: none; cursor: pointer; padding: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; margin-top: 6px; width: max-content; }
.qty button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.qty .icon { width: 16px; height: 16px; }
.qty span { min-width: 24px; text-align: center; }
.handoff-steps { padding-left: 1.2em; display: grid; gap: 6px; }

/* ================= DIRECTORY ================= */
.dir-head .status { margin-top: var(--s-3); }
.dir-head .lede { margin-top: 4px; }
.dir-controls { position: relative; display: flex; gap: 10px; align-items: center; }
.dir-bar { position: sticky; top: var(--header-h); z-index: 30; background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: top 0.35s var(--ease-out); }
.site-header.is-hidden ~ main .dir-bar { top: 0; }
.dir-bar-inner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.dir-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 0 12px; background: #fff; min-height: 44px; }
.dir-search input { border: 0; outline: none; background: none; flex: 1; min-width: 0; }
.dir-search:focus-within { border-color: var(--raat-700); }
.dir-modes { flex: none; }
.dir-modes label span { padding: 8px 12px; min-height: 40px; font-size: 0.92rem; }
.dir-sort .select { min-height: 44px; }
@media (max-width: 1023px) {
  .dir-bar { position: static; }
  .dir-search { flex-basis: 100%; }
  .dir-controls { width: calc(100% + 2 * var(--gutter)); margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .dir-controls::-webkit-scrollbar { display: none; }
  .dir-controls > * { flex: none; }
  .dir-online { white-space: nowrap; }
}
.dir-layout { display: grid; gap: var(--s-6); padding-top: var(--s-5); padding-bottom: var(--s-8); }
@media (min-width: 1024px) {
  .dir-layout { grid-template-columns: 250px 1fr; }
  .dir-filters.drawer { position: sticky; top: calc(var(--header-h) + 76px); transform: none; width: auto; box-shadow: none; background: none; max-height: calc(100vh - var(--header-h) - 96px); z-index: 1; align-self: start; }
  .dir-filters .drawer-body { padding: 0 8px 0 0; }
}
@media (max-width: 1023px) { .dir-filters:not(.is-open) { visibility: hidden; transition: transform 0.42s var(--ease-out), visibility 0s linear 0.42s; } }
.facet { border: 0; padding: 0 0 var(--s-5); margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line); }
.facet legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.facet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: 0.9rem; }
.chip-check input:checked + span { background: var(--raat-800); color: var(--ivory); border-color: var(--raat-800); }
.chip-check input:focus-visible + span { outline: 2px solid var(--kesar); outline-offset: 2px; }
.active-filters { margin-bottom: var(--s-4); }
.dir-count { margin-bottom: var(--s-4); }
.astro-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (max-width: 559px) {
  .astro-grid .astro-card { grid-template-columns: 112px 1fr; grid-template-rows: auto; gap: 12px; padding: 10px; }
  .astro-grid .astro-portrait { aspect-ratio: 4 / 5; }
  .astro-grid .astro-body { padding: 2px 0 0; }
  .astro-grid .astro-free { font-size: 0.68rem; left: 4px; bottom: 4px; padding: 2px 6px; }
}
.dir-more { text-align: center; margin-top: var(--s-6); }

/* ================= PROFILE ================= */
.profile { display: grid; gap: var(--s-6); padding-top: var(--s-5); padding-bottom: var(--s-7); }
@media (min-width: 900px) { .profile { grid-template-columns: minmax(280px, 400px) 1fr; gap: var(--s-8); align-items: start; } }
.profile-arch { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .profile-portrait { max-width: 260px; } }
.profile-main { display: grid; gap: var(--s-4); align-content: start; }
.profile-skills { font-size: 1.1rem; color: var(--ink-soft); }
.profile-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin: var(--s-3) 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .profile-facts { grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--s-7); } }
.profile-facts dt { font-size: 0.82rem; color: var(--muted); }
.profile-facts dd { margin: 0; font-weight: 600; font-size: 1.1rem; }
.rate-card { border: 1.5px solid var(--raat-800); border-radius: var(--r-m); overflow: hidden; }
.rate-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rate-row:last-of-type { border-bottom: 0; }
.rate-row.is-off { color: var(--muted); }
.rate-name { font-weight: 600; }
.rate-price b { font-size: 1.1rem; }
.rate-free { background: var(--tulsi-soft); color: var(--tulsi); padding: 10px 16px; font-weight: 600; }
.profile-cols { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .profile-cols { grid-template-columns: 1.3fr 1fr; } }
.profile-reviews { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .profile-reviews { grid-template-columns: 300px 1fr; gap: var(--s-8); } }
.rating-big { font-family: var(--f-display); font-size: 4rem; line-height: 1; color: var(--raat-800); margin-top: var(--s-4); }
.rating-big small { font-size: 0.4em; color: var(--muted); }
.dist { list-style: none; display: grid; gap: 6px; margin: var(--s-4) 0 var(--s-2); }
.dist li { display: grid; grid-template-columns: 32px 1fr 28px; gap: 10px; align-items: center; }
.dist .bar { height: 6px; border-radius: 3px; background: rgba(31, 29, 26, 0.1); overflow: hidden; }
.dist .bar span { display: block; height: 100%; background: var(--kesar); border-radius: 3px; }
.review-list { list-style: none; display: grid; }
.review-list li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.review-list li:first-child { padding-top: 0; }
.review-list p:not(.small) { font-size: 1.05rem; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--gutter); background: var(--ivory); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, 0.3); }
.sticky-cta > div { display: grid; line-height: 1.2; }
body:has(.sticky-cta) { padding-bottom: calc(var(--bottombar-h) + 72px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body:has(.sticky-cta) { padding-bottom: 0; } }

/* ================= MALL ================= */
.mall-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4); }
.group-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.group-tabs::-webkit-scrollbar { display: none; }
.group-tab { flex: none; padding: 12px 14px; text-decoration: none; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.group-tab span { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.group-tab[aria-current="page"] { color: var(--raat-800); border-bottom-color: var(--sindoor); }
.group-tab:hover { color: var(--raat-800); }
.mall-layout { display: grid; gap: var(--s-6); padding-top: var(--s-5); padding-bottom: var(--s-8); }
@media (min-width: 1024px) {
  .mall-layout { grid-template-columns: 250px 1fr; }
  .mall-filters.drawer { position: sticky; top: calc(var(--header-h) + 20px); transform: none; width: auto; box-shadow: none; background: none; max-height: calc(100vh - var(--header-h) - 40px); z-index: 1; align-self: start; }
  .mall-filters .drawer-body { padding: 0 8px 0 0; }
}
@media (max-width: 1023px) { .mall-filters:not(.is-open) { visibility: hidden; transition: transform 0.42s var(--ease-out), visibility 0s linear 0.42s; } }
.graha-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.graha-opt input { position: absolute; opacity: 0; }
.graha-opt span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font-size: 0.92rem; }
.graha-opt b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--chandan); color: var(--raat-700); font-weight: 400; font-size: 0.95rem; }
.graha-opt input:checked + span { border-color: var(--raat-800); background: var(--raat-800); color: var(--ivory); }
.graha-opt input:checked + span b { background: var(--kesar); color: var(--raat-900); }
.graha-opt input:focus-visible + span { outline: 2px solid var(--kesar); outline-offset: 2px; }
.mall-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--s-4); position: relative; }
.product-grid { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .mall-results .product-grid { grid-template-columns: repeat(3, 1fr); } .section .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card { position: relative; display: grid; grid-template-rows: auto 1fr; }
.product-media { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; position: relative; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.product-card:hover .product-media img { transform: scale(1.04); }
.product-flag { position: absolute; left: 8px; top: 8px; background: var(--raat-800); color: var(--ivory); font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.wish-btn { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.wish-btn .icon { width: 19px; height: 19px; }
.wish-btn[aria-pressed="true"] { color: var(--sindoor); }
.wish-btn[aria-pressed="true"] .icon path { fill: currentColor; }
.wish-btn:active .icon { transform: scale(1.25); transition: transform 0.15s; }
.product-body { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 2px; }
.product-name { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.25; color: var(--raat-800); }
.product-name a { text-decoration: none; }
.product-name a:hover { color: var(--sindoor); }
.product-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.product-foot b { font-size: 1.08rem; }
.add-btn { border: 1.5px solid var(--raat-800); border-radius: 50%; width: 38px; height: 38px; }
.add-btn:hover { background: var(--raat-800); color: var(--ivory); }
.recent { margin-top: var(--s-7); }
.recent h2 { margin-bottom: var(--s-4); }
.recent-rail { grid-auto-columns: minmax(170px, 44%); }
@media (min-width: 720px) { .recent-rail { grid-auto-columns: 200px; } }
.quickview { width: min(820px, 94vw); }
.qv { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .qv { grid-template-columns: 300px 1fr; } }
.qv-media { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.variant-set { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.variant-set legend { margin-bottom: 8px; }
.variant { position: relative; }
.variant input { position: absolute; opacity: 0; }
.variant span { display: grid; gap: 0; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; cursor: pointer; min-width: 104px; transition: border-color 0.2s, background 0.2s; }
.variant small { font-size: 0.8rem; }
.variant input:checked + span { border-color: var(--raat-800); background: var(--chandan-soft); box-shadow: inset 0 0 0 1px var(--raat-800); }
.variant input:disabled + span { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.variant input:focus-visible + span { outline: 2px solid var(--kesar); outline-offset: 2px; }

/* product page */
.pdp { display: grid; gap: var(--s-6); padding-top: var(--s-5); padding-bottom: var(--s-7); }
@media (min-width: 960px) { .pdp { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: start; } .gallery { position: sticky; top: calc(var(--header-h) + 20px); } }
.gallery-main { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.16s, transform 0.2s; }
.gallery-zoom { position: absolute; right: 10px; bottom: 10px; background: rgba(255, 255, 255, 0.92); }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #fff; cursor: pointer; flex: none; }
.thumb.is-on { border-color: var(--raat-800); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { display: grid; gap: var(--s-4); align-content: start; }
.pdp-hi { font-size: 1.3rem; color: var(--pital); }
.pdp-info .pdp-hi { margin-top: -8px; }
.pdp-price { font-size: 1.8rem; font-weight: 600; color: var(--raat-800); }
.pdp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qty-lg { margin: 0; height: 48px; }
.qty-lg button { width: 40px; height: 46px; }
.qty-lg input { width: 40px; border: 0; text-align: center; background: none; font-weight: 600; -moz-appearance: textfield; }
.qty-lg input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wish-inline { position: static; border: 1.5px solid var(--line-strong); width: 48px; height: 48px; }
.pdp-desc { font-size: 1.05rem; color: var(--ink-soft); max-width: 40em; }
.pdp-notes { border-top: 1px solid var(--line); }
.note { border-bottom: 1px solid var(--line); }
.note summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; }
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--muted); transition: transform 0.25s; }
.note[open] summary::after { transform: rotate(45deg); }
.note-glyph { width: 34px; height: 34px; border-radius: 50%; background: var(--chandan); display: grid; place-items: center; color: var(--raat-700); flex: none; font-size: 1.05rem; }
.note-glyph .icon { width: 18px; height: 18px; }
.note-body { padding: 0 0 16px 46px; display: grid; gap: 8px; }
.zoom-view { position: fixed; inset: 0; z-index: 130; background: rgba(18, 17, 16, 0.95); display: grid; place-items: center; opacity: 0; transition: opacity 0.25s; overflow: auto; }
.zoom-view.is-open { opacity: 1; }
.zoom-view img { max-width: none; width: min(1400px, 200vw); height: auto; touch-action: pan-x pan-y pinch-zoom; }
.zoom-close { position: fixed; top: 12px; right: 12px; background: var(--ivory); z-index: 2; }

/* ================= POOJA ================= */
.pooja-hero { position: relative; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + var(--s-7)) 0 var(--s-8); overflow: hidden; }
.pooja-hero-media { position: absolute; inset: 0; }
.pooja-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.pooja-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 17, 16, 0.94) 0%, rgba(18, 17, 16, 0.75) 45%, rgba(18, 17, 16, 0.25) 100%); }
@media (max-width: 719px) { .pooja-hero-media::after { background: linear-gradient(180deg, rgba(18, 17, 16, 0.55), rgba(18, 17, 16, 0.95)); } }
.pooja-hero-copy { position: relative; display: grid; gap: var(--s-4); max-width: 760px; margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
.pooja-hero .breadcrumbs, .pooja-hero .breadcrumbs a { color: #cfc7bb; }
.pooja-list { list-style: none; display: grid; gap: var(--s-7); }
.pooja-row-link { display: grid; gap: var(--s-5); text-decoration: none; align-items: center; }
@media (min-width: 800px) {
  .pooja-row-link { grid-template-columns: 300px 1fr; gap: var(--s-7); }
  .pooja-row:nth-child(even) .pooja-row-link { grid-template-columns: 1fr 300px; }
  .pooja-row:nth-child(even) .pooja-row-media { order: 2; }
}
.pooja-row-media { aspect-ratio: 4 / 5; max-width: 300px; }
.pooja-row-media img { transition: transform 0.8s var(--ease-out); }
.pooja-row-link:hover .pooja-row-media img { transform: scale(1.04); }
.pooja-row-body { display: grid; gap: 8px; max-width: 42rem; }
.pooja-row-link:hover .h2 { color: var(--sindoor); }
.pooja-row-hi { color: var(--pital); font-size: 1.2rem; }
.pooja-row-desc { color: var(--ink-soft); }
.pooja-row-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.pooja-row-meta b { font-size: 1.25rem; }
.pooja-detail { display: grid; gap: var(--s-7); padding-top: var(--s-5); padding-bottom: var(--s-8); }
@media (min-width: 1024px) { .pooja-detail { grid-template-columns: 1fr 400px; gap: var(--s-8); align-items: start; } .booking { position: sticky; top: calc(var(--header-h) + 20px); } }
.pooja-title { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 720px) { .pooja-title { grid-template-columns: 240px 1fr; } }
.pooja-arch { aspect-ratio: 4 / 5; max-width: 240px; }
.pooja-section { padding-top: var(--s-7); }
.tick-list { list-style: none; display: grid; gap: 10px; }
.tick-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.tick-list .icon { color: var(--tulsi); margin-top: 3px; }
.plain-list { padding-left: 1.1em; display: grid; gap: 4px; margin: 6px 0; }
.booking-card { border: 1.5px solid var(--raat-800); border-radius: 16px; padding: var(--s-5); background: #fff; display: grid; gap: var(--s-3); box-shadow: var(--shadow-lift); }
.booking-price b { font-size: 1.8rem; color: var(--raat-800); }
.cal { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.cal-day { scroll-snap-align: start; position: relative; }
.cal-day input { position: absolute; opacity: 0; }
.cal-day span { display: grid; justify-items: center; gap: 0; padding: 8px 2px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; line-height: 1.2; transition: background 0.2s, border-color 0.2s; }
.cal-day b { font-size: 1.3rem; font-family: var(--f-display); }
.cal-day small { font-size: 0.72rem; color: var(--muted); }
.cal-tithi { max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day.is-trad span { border-color: var(--pital); background: #fff8ea; }
.cal-day.is-trad span::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--kesar); }
.cal-day input:checked + span { background: var(--raat-800); border-color: var(--raat-800); color: var(--ivory); }
.cal-day input:checked + span small { color: #e8e1d6; }
.cal-day input:focus-visible + span { outline: 2px solid var(--kesar); outline-offset: 2px; }
.cal-legend { display: flex; align-items: center; gap: 6px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kesar); display: inline-block; }
.booking-time { display: grid; gap: 8px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.booking-time.is-in { animation: fade 0.45s var(--ease-out); }
.slots { display: grid; gap: 6px; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; }
.slot span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
.slot small { color: var(--muted); font-size: 0.8rem; }
.slot.is-best span { border-color: var(--pital); }
.slot input:checked + span { background: var(--raat-800); color: var(--ivory); border-color: var(--raat-800); }
.slot input:checked + span small { color: #e8e1d6; }
.slot input:focus-visible + span { outline: 2px solid var(--kesar); outline-offset: 2px; }
.co-totals { margin: 0; display: grid; gap: 6px; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.co-totals div { display: flex; justify-content: space-between; gap: 12px; }
.co-totals dd { margin: 0; }
.co-total { font-weight: 700; font-size: 1.1rem; padding-top: 6px; border-top: 1px dashed var(--line-strong); }
.related-row { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .related-row { grid-template-columns: repeat(3, 1fr); } }
.related-card { display: flex; gap: 14px; align-items: center; background: var(--ivory); border-radius: 14px; padding: 14px; text-decoration: none; }
.related-card img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex: none; }
.related-card > span:last-child { display: grid; gap: 2px; }
.related-card:hover b { color: var(--sindoor); }
.related-glyph { width: 84px; height: 84px; border-radius: 10px; background: var(--raat-800); color: var(--pital-light); display: grid; place-items: center; flex: none; }
.related-glyph .icon { width: 36px; height: 36px; }
.other-poojas { grid-auto-columns: minmax(160px, 44%); }
@media (min-width: 720px) { .other-poojas { grid-auto-columns: 200px; } }
.pooja-mini { display: grid; gap: 6px; text-decoration: none; }
.pooja-mini .arch { aspect-ratio: 4 / 5; }
.prasad-head { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .prasad-head { grid-template-columns: 1.2fr 1fr; } }
.prasad-photo { aspect-ratio: 4 / 5; max-width: 420px; }

/* ================= CHECKOUT ================= */
.co-steps { list-style: none; display: grid; gap: var(--s-5); }
.co-step { border: 1px solid var(--line); border-radius: 14px; padding: var(--s-5); background: #fff; display: grid; gap: var(--s-3); }
.co-step[aria-disabled="true"] { opacity: 0.6; }
.co-step h2 { display: flex; align-items: center; gap: 12px; }
.co-step .step-no { width: 32px; height: 32px; font-size: 1rem; border-color: var(--raat-800); color: var(--raat-800); }
.addr-list { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.addr { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
.addr input { margin-top: 5px; accent-color: var(--raat-800); }
.addr:has(input:checked) { border-color: var(--raat-800); background: var(--chandan-soft); }
.co-new summary { cursor: pointer; width: max-content; }
.co-new[open] summary { margin-bottom: var(--s-4); }
.co-pay { margin-top: var(--s-5); }
.co-pay-btn { min-height: 56px; font-size: 1.1rem; }
.done { text-align: center; display: grid; gap: var(--s-4); justify-items: center; padding: var(--s-7) 0; }
.done-mark { width: 96px; height: 96px; fill: none; stroke: var(--tulsi); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.done-mark circle, .done-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s var(--ease-in-out) forwards; }
.done-mark path { animation-delay: 0.5s; }
.notfound { text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
.notfound-chart { width: 140px; color: var(--pital); opacity: 0.7; }
.notfound .row { justify-content: center; }

/* ================= TOOLS ================= */
.tool-head { padding-bottom: var(--s-5); }
.tool-body { padding-bottom: var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.tool-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: var(--s-5); display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .tool-form { padding: var(--s-6); } }
.tool-form.is-collapsed { padding: var(--s-4) var(--s-5); }
.tool-form details[open] > summary { margin-bottom: var(--s-5); }
.tool-form details > .btn { margin-top: var(--s-5); }
.tool-form summary { cursor: pointer; width: max-content; }
.birth-form { border: 0; padding: 0; margin: 0; }
.birth-form legend { margin-bottom: var(--s-4); }
.pair-forms { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .pair-forms { grid-template-columns: 1fr 1fr; } .pair-forms .form-grid.two { grid-template-columns: 1fr; } }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-actions [aria-pressed="true"] { background: var(--raat-800); color: var(--ivory); border-color: var(--raat-800); }
.tool-explainer { max-width: 44rem; display: grid; gap: var(--s-3); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: 4px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .facts > div { grid-template-columns: 11rem 1fr; gap: var(--s-4); } }
.facts dt { font-weight: 600; color: var(--raat-800); }
.facts dd { margin: 0; color: var(--ink-soft); }
.tool-faq, .tool-guides { max-width: 44rem; margin-top: var(--s-7); }
.tool-faq > .h3, .tool-guides > .h3 { margin-bottom: var(--s-4); }
.tool-faq-item { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.tool-faq-item h3 { font-family: var(--f-ui); font-size: 1.02rem; font-weight: 600; color: var(--raat-800); margin-bottom: var(--s-2); }
.tool-faq-item p { color: var(--ink-soft); }
.tool-guides ul { display: grid; gap: var(--s-2); padding: 0; list-style: none; }
.result { display: grid; gap: var(--s-6); }
.summary-band { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 900px) { .summary-band { grid-template-columns: repeat(4, 1fr); } }
.summary-band div { background: var(--ivory); padding: var(--s-4); animation: fade 0.6s var(--ease-out) both; }
.summary-band div:nth-child(2) { animation-delay: 0.08s; } .summary-band div:nth-child(3) { animation-delay: 0.16s; } .summary-band div:nth-child(4) { animation-delay: 0.24s; }
.summary-band dt { font-size: 0.8rem; color: var(--muted); }
.summary-band dd { margin: 2px 0 0; font-family: var(--f-display); font-size: 1.3rem; color: var(--raat-800); line-height: 1.25; }
.chart-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .chart-grid { grid-template-columns: minmax(320px, 440px) 1fr; } }
.chart-fig { margin: 0; display: grid; gap: 10px; }
.kundli-svg { width: 100%; height: auto; background: #fff8ea; border-radius: 6px; overflow: visible; }
.kundli-svg .k-frame, .kundli-svg .k-lines { fill: none; stroke: var(--pital); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease-in-out) forwards; }
.kundli-svg .k-lines { animation-delay: 0.3s; }
.kundli-svg .k-cell { fill: transparent; transition: fill 0.2s; }
.kundli-svg .k-house:hover .k-cell { fill: rgba(246, 166, 31, 0.1); }
.kundli-svg .k-house { opacity: 0; animation: fade-in 0.5s forwards; animation-delay: calc(0.9s + var(--i) * 0.06s); }
.kundli-svg .k-sign { font: 600 13px var(--f-ui); fill: var(--muted); }
.kundli-svg .k-graha { font: 600 15px var(--f-ui); fill: var(--raat-800); }
html[lang="hi"] .kundli-svg .k-graha { font-size: 16px; }
.kundli-svg .k-asc { font: 600 11px var(--f-ui); fill: var(--sindoor); letter-spacing: 0.02em; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; font-size: 0.95rem; }
.data-table th, .data-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.data-table tbody th { font-weight: 600; }
.data-table .row-lagna { background: var(--chandan-soft); }
.data-table abbr { text-decoration: none; color: var(--sindoor); }
.result-section { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.dasha-line { list-style: none; display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.dasha-line li { flex: var(--span) 0 0; min-width: 96px; display: grid; gap: 2px; padding: 10px; border-top: 4px solid var(--chandan); background: #fff; border-radius: 0 0 8px 8px; }
.dasha-line li.is-past { opacity: 0.55; }
.dasha-line li.is-now { border-top-color: var(--sindoor); background: var(--chandan-soft); }
.antar-list { list-style: none; display: grid; gap: 0; padding: 0 0 12px; }
.antar-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.antar-list li.is-now { font-weight: 700; color: var(--sindoor); }
.next-tools { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.next-tool { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; text-decoration: none; }
.next-tool:hover { border-color: var(--raat-800); }
.next-tool:hover b { color: var(--sindoor); }
.tool-cta { padding: var(--s-7) 0; }
.tool-cta-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .tool-cta-grid { grid-template-columns: 1.3fr 1fr; } }
.tool-cta .face-stack img { width: 40px; height: 40px; border-color: var(--raat-800); }
.tool-remedies { display: grid; gap: 10px; }
.tool-remedies .related-card { background: rgba(255, 255, 255, 0.06); color: var(--ivory); border: 1px solid rgba(246, 166, 31, 0.25); }
.tool-remedies .related-card .h3 { color: var(--ivory); font-size: 1.1rem; }
.verdict { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: 16px; background: var(--raat-800); color: var(--chandan-soft); position: relative; overflow: hidden; }
.verdict .h1, .verdict .h2 { color: var(--ivory); }
.verdict-num { font-family: var(--f-display); font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1; color: var(--kesar-soft); }
.verdict-num small { font-size: 0.35em; color: #cfc7bb; }
.meter { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--kesar), var(--kesar-soft)); border-radius: 4px; transition: width 1.4s var(--ease-out) 0.2s; }
.is-in .meter span, .no-js .meter span { width: var(--w); }
.koota-list { list-style: none; display: grid; gap: 0; }
.koota { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.koota-score { font-family: var(--f-display); font-size: 1.4rem; color: var(--raat-800); text-align: right; }
.koota-score small { font-size: 0.6em; color: var(--muted); }
.koota-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(31, 29, 26, 0.08); overflow: hidden; }
.koota-bar span { display: block; height: 100%; background: var(--raat-700); width: var(--w); }
.koota-bar.is-zero span { background: var(--danger); width: 100% !important; opacity: 0.25; }
.phase-list { list-style: none; display: grid; gap: 10px; }
.phase { display: grid; grid-template-columns: 120px 1fr; gap: 4px 16px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
@media (max-width: 559px) { .phase { grid-template-columns: 1fr; } }
.phase.is-now { border-color: var(--sindoor); box-shadow: inset 4px 0 0 var(--sindoor); }
.phase.is-past { opacity: 0.6; }
.phase-name { font-weight: 700; }
.big-answer { font-family: var(--f-display); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; color: var(--raat-800); }
.num-cards { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .num-cards { grid-template-columns: repeat(3, 1fr); } }
.num-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: var(--s-5); display: grid; gap: 8px; align-content: start; }
.num-card .verdict-num { color: var(--raat-800); }
.gem-picks { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .gem-picks { grid-template-columns: repeat(3, 1fr); } }
.gem-pick { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: var(--s-5); display: grid; gap: 10px; align-content: start; }
.gem-pick img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.rashi-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .rashi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .rashi-grid { grid-template-columns: repeat(4, 1fr); } }
.rashi-card { display: grid; gap: 6px; padding: var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; align-content: start; }
.rashi-card:hover { border-color: var(--raat-800); }
.rashi-glyph { font-family: var(--f-display); font-size: 2rem; color: var(--pital); line-height: 1; }
.rashi-card .tone { font-size: 0.8rem; font-weight: 700; }
.tone.good { color: var(--tulsi); } .tone.care { color: var(--busy); }
.sky-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sky-table div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.period-tabs { display: inline-flex; border: 1.5px solid var(--raat-800); border-radius: 12px; overflow: hidden; }
.period-tabs a { padding: 10px 18px; text-decoration: none; font-weight: 600; }
.period-tabs a[aria-current="page"] { background: var(--raat-800); color: var(--ivory); }
.transit-list { list-style: none; display: grid; gap: 10px; }
.transit { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.transit-glyph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--chandan); font-family: var(--f-display); font-size: 1.2rem; color: var(--raat-700); }
.transit.good .transit-glyph { background: var(--tulsi-soft); color: var(--tulsi); }
.panchang-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 720px) { .panchang-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .panchang-grid { grid-template-columns: repeat(3, 1fr); } }
.panchang-grid > div { background: var(--ivory); padding: var(--s-4) var(--s-5); display: grid; gap: 2px; }
.panchang-grid dt { font-size: 0.82rem; color: var(--muted); }
.panchang-grid dd { margin: 0; font-family: var(--f-display); font-size: 1.3rem; color: var(--raat-800); }
.panchang-grid .until { font-size: 0.86rem; color: var(--ink-soft); }
.kaal-row { display: grid; gap: 10px; }
@media (min-width: 720px) { .kaal-row { grid-template-columns: repeat(4, 1fr); } }
.kaal { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; gap: 2px; }
.kaal.avoid { border-color: rgba(179, 38, 30, 0.35); }
.kaal.good { border-color: rgba(47, 125, 82, 0.4); }
.kaal .label { font-size: 0.85rem; }
.chog-grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .chog-grid { grid-template-columns: 1fr 1fr; } }
.chog-list { list-style: none; display: grid; gap: 4px; }
.chog { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #fff; border-left: 4px solid var(--line-strong); }
.chog.best, .chog.good { border-left-color: var(--tulsi); }
.chog.neutral { border-left-color: var(--pital-light); }
.chog.avoid { border-left-color: var(--danger); background: #fdf6f5; }
.chog.is-now { outline: 2px solid var(--raat-800); }
.place-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.place-bar .place-field { flex: 1 1 260px; }
.place-bar > .field:not(.place-field) { flex: 1 1 160px; min-width: 0; }
.place-bar > .field .input { min-width: 0; }
@media (max-width: 719px) { .place-bar > .btn { flex: 1 1 100%; } }
.date-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nak-hero { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .nak-hero { grid-template-columns: auto 1fr; gap: var(--s-7); } }
.nak-wheel { width: min(300px, 80vw); aspect-ratio: 1; }
.nak-wheel text { font: 11px var(--f-display); fill: var(--muted); }
.nak-wheel .is-me text { fill: var(--sindoor); font-weight: 700; font-size: 13px; }
.syllables { display: flex; gap: 8px; flex-wrap: wrap; }
.syllable { min-width: 56px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-strong); text-align: center; font-family: var(--f-display); font-size: 1.3rem; }
.syllable.is-me { background: var(--raat-800); color: var(--ivory); border-color: var(--raat-800); }
.love-hero { display: grid; gap: var(--s-5); align-items: center; justify-items: center; text-align: center; padding: var(--s-6) var(--s-4); background: var(--raat-800); color: var(--chandan-soft); border-radius: 16px; }
.love-signs { display: flex; align-items: center; gap: var(--s-5); font-family: var(--f-display); color: var(--ivory); font-size: 1.4rem; }
.love-signs span { display: grid; justify-items: center; }
.love-signs b { font-size: 2.6rem; color: var(--kesar-soft); font-weight: 400; }
.hub-grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
.hub-card { display: grid; gap: 8px; padding: var(--s-5); background: #fff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; align-content: start; transition: border-color 0.2s, transform 0.3s var(--ease-out); }
.hub-card:hover { border-color: var(--raat-800); transform: translateY(-2px); }
.hub-card .h3 { color: var(--raat-800); }
.hub-card.feature { background: var(--raat-800); color: var(--chandan-soft); border-color: var(--raat-800); }
@media (min-width: 1100px) { .hub-card.feature { grid-row: span 2; } }
.hub-card.feature .h3, .hub-card.feature .h2 { color: var(--ivory); }
.hub-glyph { width: 48px; height: 48px; color: var(--pital); }
@media print {
  .tool-form, .tool-actions, .tool-cta, .breadcrumbs { display: none !important; }
  .kundli-svg .k-frame, .kundli-svg .k-lines { stroke-dashoffset: 0; animation: none; }
  .kundli-svg .k-house, .summary-band div { opacity: 1; animation: none; }
  .verdict { background: #fff; color: #000; border: 1px solid #999; }
  .verdict .h1, .verdict .h2, .verdict-num { color: #000; }
}
@media (max-width: 719px) { .tool-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); } .tool-actions > * { flex: none; } .tool-actions::-webkit-scrollbar { display: none; } }

/* ================= INSIGHTS ================= */
.insights-head { display: grid; gap: var(--s-3); }
.insights-search { max-width: 420px; margin-top: var(--s-3); }
.feature-post { display: grid; gap: var(--s-5); text-decoration: none; margin-bottom: var(--s-8); align-items: center; }
@media (min-width: 900px) { .feature-post { grid-template-columns: 1.2fr 1fr; gap: var(--s-7); } }
.feature-media { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { display: grid; gap: var(--s-3); }
.feature-post:hover .h1 { color: var(--sindoor); }
.post-grid { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: grid; gap: 8px; text-decoration: none; align-content: start; }
.post-media { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.post-card:hover img { transform: scale(1.04); }
.post-card:hover .h3 { color: var(--sindoor); }
.post-head { max-width: 900px; padding-top: var(--s-4); padding-bottom: var(--s-6); display: grid; gap: var(--s-4); }
.post-title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.post-hero { margin: 0 auto var(--s-7); }
.post-hero img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 16px; }
.post-layout { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); }
@media (min-width: 1024px) { .post-layout { grid-template-columns: 240px minmax(0, 700px); gap: var(--s-8); } .post-toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.post-toc ol { list-style: none; display: grid; gap: 2px; margin: 8px 0 20px; border-left: 1px solid var(--line); }
.post-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; font-size: 0.92rem; color: var(--ink-soft); }
.post-toc a.is-on, .post-toc a:hover { border-left-color: var(--sindoor); color: var(--raat-800); }
@media (max-width: 1023px) { .post-toc { border: 1px solid var(--line); border-radius: 12px; padding: var(--s-4); } }
.prose-article { font-size: 1.12rem; line-height: 1.75; color: var(--ink); }
html[lang="hi"] .prose-article { line-height: 1.8; }
.prose-article > * + * { margin-top: 1.1em; }
.prose-article h2 { font-family: var(--f-display); font-size: 1.8rem; line-height: 1.2; color: var(--raat-800); margin-top: 1.8em; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose-article h3 { font-family: var(--f-display); font-size: 1.35rem; color: var(--raat-800); margin-top: 1.4em; }
.prose-article ul, .prose-article ol { padding-left: 1.3em; display: grid; gap: 0.4em; }
.prose-article a { color: var(--sindoor); font-weight: 600; }
.prose-article strong { color: var(--raat-800); }
.prose-article table { width: 100%; font-size: 0.98rem; border-top: 2px solid var(--raat-800); display: block; overflow-x: auto; }
.prose-article th, .prose-article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose-article th { font-size: 0.85rem; color: var(--muted); }
.prose-article td:first-child { white-space: nowrap; }
.prose-article blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--kesar); font-family: var(--f-display); font-size: 1.25rem; }
.post-related { margin-top: var(--s-7) !important; padding: var(--s-5); background: var(--chandan-soft); border-radius: 14px; }
.post-related .related-row { grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 720px) { .post-related .related-row { grid-template-columns: 1fr 1fr; } }
.post-note { margin-top: var(--s-6) !important; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--sindoor); transform-origin: left; transform: scaleX(0); z-index: 70; }

/* ================= ACCOUNT / CONTENT ================= */
.account-grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .account-grid { grid-template-columns: 1fr 1fr; } }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: var(--s-5); display: grid; gap: 8px; align-content: start; }
.order-list { list-style: none; display: grid; gap: 10px; }
.order { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.order .cart-thumb { width: 64px; height: 64px; }
.order-right { display: grid; justify-items: end; gap: 4px; }
.about-hero { margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-8); }
.about-hero .breadcrumbs, .about-hero .breadcrumbs a { color: #cfc7bb; }
.about-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.3fr 1fr; } }
.about-photo { aspect-ratio: 4 / 5; max-width: 400px; }
.about-cols { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .about-cols { grid-template-columns: 1.3fr 1fr; } }
.about-counters { grid-template-columns: 1fr !important; }
.about-cards { gap: var(--s-4); }
.about-cards .how-step { min-height: 0; border-bottom-color: var(--line); padding-bottom: var(--s-4); }
.about-cards .step-no { border-color: var(--pital); color: var(--pital); }
.contact-grid { display: grid; gap: var(--s-6); padding-top: var(--s-5); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.contact-list { display: grid; gap: var(--s-4); margin: var(--s-4) 0; }
.contact-list dt { font-size: 0.85rem; color: var(--muted); }
.contact-list dd { margin: 0; font-weight: 600; }
.services-list .ledger { max-width: 820px; }
.policy-layout { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); }
@media (min-width: 1024px) { .policy-layout { grid-template-columns: 220px minmax(0, 760px); gap: var(--s-8); } .policy-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding-top: 72px; } }
.policy-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1024px) { .policy-nav ul { display: grid; gap: 2px; border-left: 1px solid var(--line); } .policy-nav a { display: block; padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent; } }
.policy-nav a { text-decoration: none; color: var(--ink-soft); }
.policy-nav a[aria-current="page"] { color: var(--raat-800); font-weight: 700; border-left-color: var(--sindoor); }
@media (max-width: 1023px) { .policy-nav a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.9rem; } .policy-nav a[aria-current="page"] { background: var(--raat-800); color: var(--ivory); } }
.policy-body { font-size: 1.02rem; }
.policy-body h2 { font-size: 1.35rem; }
.faq-list { border-top: 1px solid var(--line); }

/* astrologer onboarding */
.join-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .join-grid { grid-template-columns: 1.1fr 1fr; } .join-form { position: sticky; top: calc(var(--header-h) + 24px); } }
.join-steps { margin-top: var(--s-5); gap: var(--s-4); }
.join-steps .how-step { min-height: 0; opacity: 1; border-bottom-color: var(--line); padding-bottom: var(--s-4); }
.join-steps .step-no { border-color: var(--pital); color: var(--pital); }
.join-form { max-width: 520px; }
.join-steps .how-step p, .about-cards .how-step p { color: var(--muted); }
.date-nav .tool-actions { margin: 0; padding: 0; flex: 1 1 100%; }
@media (min-width: 720px) { .date-nav .tool-actions { flex: 0 1 auto; margin-left: auto; } }

/* ================= RASHI WHEEL (WorksWheel port) ================= */
.rashi-wheel-band { padding: var(--s-8) 0 var(--s-7); background: var(--raat-900); overflow: hidden; }
.rw-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
@media (min-width: 1024px) { .rashi-wheel-band { padding-top: var(--s-9); } }
@media (min-width: 900px) { .rw-head { grid-template-columns: 1fr auto; align-items: end; } }
.rw-hint { color: #cfc7bb; }
.works-wheel { position: relative; height: clamp(520px, 86vh, 820px); overflow: hidden; user-select: none; -webkit-user-select: none; color: var(--ivory); }
.ww-stage { position: absolute; inset: 0; cursor: grab; outline: none; touch-action: pan-y; }
.ww-stage:active { cursor: grabbing; }
.ww-stage:focus-visible { outline: 2px solid var(--kesar); outline-offset: -6px; }
.ww-drum { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
.ww-card { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-decoration: none; color: inherit; -webkit-user-drag: none; }
.ww-face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: var(--raat-700); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); transform-origin: 50% 50%; }
.ww-face img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ww-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(246, 166, 31, 0.35); pointer-events: none; }
.ww-glyph { position: absolute; left: 10px; top: 8px; font-size: 1.05rem; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.ww-action { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--kesar); color: var(--raat-900); font-size: 0.78rem; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s var(--ease-out); pointer-events: none; }
.ww-action svg { width: 10px; height: 10px; }
.works-wheel.is-open .ww-card[aria-selected="true"] .ww-action { opacity: 1; transform: none; }
.ww-card:hover .ww-action, .ww-card:focus-visible .ww-action { opacity: 1; transform: none; }
.ww-label { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--f-display); letter-spacing: -0.02em; color: var(--kesar); }
.ww-title { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); pointer-events: none; opacity: 0; font-family: var(--f-display); letter-spacing: -0.02em; line-height: 1.05; max-width: 26%; }
.ww-title span { display: block; }
.ww-title small { display: block; margin-top: 0.35em; font-family: var(--f-ui); font-size: 0.32em; letter-spacing: 0; color: var(--kesar); }
.ww-index { position: absolute; top: 7%; right: 2.5%; list-style: none; text-align: right; line-height: 1.8; }
.ww-index button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: #9d958a; font: inherit; transition: color 0.2s; }
.ww-index button:hover { color: var(--ivory); }
.ww-index button.is-active { color: var(--kesar); font-weight: 600; }
.ww-index button:focus-visible { outline: 1px solid var(--kesar); }
.no-js .works-wheel { height: auto; }
.no-js .ww-stage, .no-js .ww-drum { position: static; }
.no-js .ww-drum { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: var(--s-5) var(--gutter); }
.no-js .ww-card { position: relative; aspect-ratio: 1.45; }
.no-js .ww-label, .no-js .ww-title, .no-js .ww-index { display: none; }
@media (max-width: 719px) {
  .works-wheel { height: min(640px, 92vh); }
  .ww-index { display: none; }
  .ww-title { top: auto; bottom: 7%; left: 50%; transform: translateX(-50%); max-width: none; text-align: center; white-space: nowrap; }
}

/* Mall: the few items that only have the small uploaded photo are shown near their
   real size on a soft ground instead of being stretched into a blur. */
.product-media.is-native, .gallery-main.is-native { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #fff 0%, var(--chandan-soft) 70%); }
.product-media.is-native img { width: auto; height: auto; max-width: min(72%, 220px); max-height: 72%; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 24px -14px rgba(31, 29, 26, 0.45); }
.gallery-main.is-native img { width: auto; height: auto; max-width: min(70%, 300px); max-height: 70%; object-fit: contain; border-radius: 10px; box-shadow: 0 14px 30px -16px rgba(31, 29, 26, 0.45); }
.gallery-note { margin-top: 8px; }

/* ================= VRAT CALENDAR & SHUBH MUHURAT ================= */
.vrat-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: var(--s-4) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; }
.vrat-filter::-webkit-scrollbar { display: none; }
.vrat-filter .chip { text-decoration: none; }
.vrat-filter .chip .num { opacity: 0.6; font-size: 0.82rem; }
.vrat-next { display: grid; gap: 4px; padding: var(--s-5); border-radius: 16px; background: var(--kesar); color: var(--raat-900); margin-bottom: var(--s-5); }
.vrat-next .h2 { color: var(--raat-900); }
.vrat-list, .muhurat-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.vrat-row, .muhurat-day { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .vrat-row, .muhurat-day { grid-template-columns: 84px 1fr; gap: var(--s-5); } }
.vrat-row.is-past { opacity: 0.6; }
.vrat-row.is-past .vrat-date { background: #f4f1ec; border-top-color: #cfc7bb; }
.vrat-date { display: grid; justify-items: center; align-content: start; gap: 0; padding: 10px 4px 12px; border-radius: 14px; background: var(--chandan-soft); border-top: 4px solid var(--kesar); line-height: 1.15; font-size: 0.82rem; color: var(--ink-soft); text-transform: none; }
.vrat-date b { font-family: var(--f-display); font-size: 2rem; font-weight: 500; color: var(--raat-900); line-height: 1.05; }
.vrat-ekadashi .vrat-date { border-top-color: #2f7d52; }
.vrat-pradosh .vrat-date, .vrat-shivratri .vrat-date { border-top-color: #4a6fa5; }
.vrat-sankashti .vrat-date { border-top-color: var(--danger); }
.vrat-amavasya .vrat-date { border-top-color: var(--raat-900); }
.vrat-body { display: grid; gap: 4px; align-content: start; }
.vrat-body .h3 { margin-bottom: 2px; }
.activity-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) var(--s-5); padding: 2px var(--gutter) 6px; }
.activity-tabs::-webkit-scrollbar { display: none; }
.activity-tab { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line-strong); text-decoration: none; background: #fff; transition: border-color 0.2s, background 0.2s; }
.activity-tab:hover { border-color: var(--raat-800); }
.activity-tab .small { color: var(--muted); }
.activity-tab.is-on { background: var(--raat-900); border-color: var(--raat-900); color: #fff; }
.activity-tab.is-on .small { color: var(--kesar); }
.muhurat-count { font-size: 1.15rem; margin-bottom: var(--s-4); }
.muhurat-count b { font-family: var(--f-display); font-size: 2rem; font-weight: 500; }
.window-list { list-style: none; display: grid; gap: 8px; margin-top: 6px; }
.window-list li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--chandan-soft); border-left: 3px solid var(--kesar); }
.window-time { font-weight: 600; font-size: 1.05rem; }

/* ---------- About: flip gallery (vanilla port of the GSAP Flip Card) ---------- */
.flip-band { background: var(--raat-900); color: var(--chandan-soft); overflow: hidden; }
.flip-gallery { position: relative; max-width: 1440px; margin: 0 auto; padding: var(--s-8) var(--s-4); }
.fg-counter { position: absolute; top: var(--s-5); left: clamp(16px, 2.8vw, 40px); margin: 0; font-size: 0.9rem; letter-spacing: 0.02em; color: #a89f93; }
.fg-counter b { color: var(--ivory); font-weight: 600; }
.fg-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ivory); margin: 0; }
.fg-meta { color: var(--kesar); font-size: 0.9rem; margin: var(--s-3) 0 var(--s-5); }
.fg-desc { color: #cfc7bb; line-height: 1.65; margin: 0; }
.fg-caption-box { margin-top: var(--s-5); min-height: calc(1.35em * 2); }
.fg-caption { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--ivory); }
.fg-caption-line { padding-bottom: 0.08em; }
.fg-cta { margin-top: var(--s-4); }
.fg-card { position: relative; padding: 0; border: 0; overflow: hidden; background: var(--raat-700); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fg-card:focus-visible { outline: 3px solid var(--kesar); outline-offset: 3px; }
.fg-card-caption, .fg-hint { display: none; }

/* Before the script runs (or without it): a plain grid with captions. */
.flip-gallery:not(.is-ready) .fg-stage { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.flip-gallery:not(.is-ready) .fg-panel { grid-column: 1 / -1; max-width: 640px; }
.flip-gallery:not(.is-ready) .fg-caption-box, .flip-gallery:not(.is-ready) .fg-cta, .flip-gallery:not(.is-ready) .fg-counter { display: none; }
.flip-gallery:not(.is-ready) .fg-card { aspect-ratio: 4 / 5; border-radius: 16px; cursor: default; }
.flip-gallery:not(.is-ready) .fg-card-caption { display: block; position: absolute; inset: auto 0 0; padding: 40px 14px 14px; text-align: left; font-size: 0.9rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }

/* Desktop and tablet: cards are placed by the script. */
.flip-gallery.is-ready:not(.is-mobile) { padding: 0; }
.flip-gallery.is-ready:not(.is-mobile) .fg-stage { position: relative; }
.flip-gallery.is-ready:not(.is-mobile) .fg-card { position: absolute; }
.flip-gallery.is-ready:not(.is-mobile) .fg-panel { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; transition: opacity 0.5s ease 0.25s; }
.flip-gallery.is-ready:not(.is-mobile):not(.is-open) .fg-panel, .flip-gallery.is-ready:not(.is-mobile):not(.is-open) .fg-counter { opacity: 0; pointer-events: none; }
.flip-gallery.is-ready .fg-counter { transition: opacity 0.5s ease 0.25s; z-index: 40; }
.flip-gallery.is-ready.is-open .fg-stage { cursor: pointer; }
.flip-gallery.is-ready .fg-hint { display: block; position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); margin: 0; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.72); white-space: nowrap; pointer-events: none; transition: opacity 0.4s ease; z-index: 40; }
.flip-gallery.is-open .fg-hint, .flip-gallery.is-mobile .fg-hint { opacity: 0; }
.flip-gallery.is-narrow .fg-panel { display: none; }

/* Phones: hero, text, then a rail of thumbnails. */
.flip-gallery.is-mobile { padding: var(--s-7) var(--s-4); }
.flip-gallery.is-mobile .fg-counter { position: static; margin-bottom: var(--s-4); }
.flip-gallery.is-mobile .fg-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.flip-gallery.is-mobile .fg-card { aspect-ratio: 4 / 5; border-radius: 10px; }
.flip-gallery.is-mobile .fg-card.is-hero { grid-column: 1 / -1; aspect-ratio: 4 / 4.2; border-radius: 16px; cursor: default; }
.flip-gallery.is-mobile .fg-panel { grid-column: 1 / -1; order: 1; padding: var(--s-4) 0 var(--s-3); }
.flip-gallery.is-mobile .fg-title { font-size: 2rem; }