/* ============================================================
   Matri Sakti — main stylesheet
   Theme "Mandir": warm cream surfaces, saffron for actions, kumkum maroon for headings,
   turmeric gold for ornaments (temple stripe, mandala watermark, section dividers).
   Devotional but calm: short copy, no large dark areas except the footer.
   ============================================================ */
:root {
    /* Brand colours */
    --color-primary:       #C94A1A;   /* saffron (kesari) — buttons, links */
    --color-primary-dark:  #7B1B24;   /* kumkum maroon — headings */
    --color-primary-hover: #A63A12;
    --color-gold:          #C99A2E;   /* turmeric gold — icons, ornaments */
    --color-gold-deep:     #8F6A1A;   /* gold that is readable as small text on cream */
    --color-gold-light:    #E5C25C;
    --color-gold-pale:     #F9E9B8;
    --color-black:         #3A1A12;

    /* Backgrounds */
    --bg-main:  #FFF9EE;   /* warm cream */
    --bg-soft:  #FBEFD9;   /* pale saffron / sandal */
    --bg-muted: #F5E3C3;
    --bg-card:  #FFFDF7;
    --bg-dark:  #5A1418;   /* deep kumkum maroon (footer) */

    /* Text */
    --text-primary:   #3A1A12;
    --text-secondary: #5C3A2E;
    --text-muted:     #8C6A5A;
    --text-on-dark:   #FBEBD2;

    /* Borders / shadows */
    --border-light: #EBD9B8;
    --border-gold:  rgba(201, 154, 46, 0.5);
    --shadow-sm: 0 1px 2px rgba(90, 20, 24, 0.06);
    --shadow-md: 0 8px 24px rgba(90, 20, 24, 0.10);
    --shadow-lg: 0 18px 44px rgba(90, 20, 24, 0.16);

    /* Ornaments */
    --stripe: linear-gradient(90deg, #C94A1A, #E5C25C 30%, #7B1B24 50%, #E5C25C 70%, #C94A1A);   /* smooth saffron-gold-maroon band on header and footer */

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-sanskrit: 'Tiro Devanagari Sanskrit', 'Nirmala UI', 'Noto Serif Devanagari', serif;
    --font-bangla:   'Tiro Bangla', 'Noto Serif Bengali', 'Nirmala UI', 'Vrinda', serif;

    /* Spacing / radius */
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
    --space-xl: 40px; --space-2xl: 64px; --space-3xl: 80px;
    --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
    --container: 1140px;
    --header-h: 76px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--bg-main); }
body {
    font-family: var(--font-body); font-size: 16px; line-height: 1.65;
    color: var(--text-primary); background: var(--bg-main);
    padding-top: var(--header-h);
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.22; color: var(--color-primary-dark); font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--text-secondary); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--space-3xl) 0; }
.section-alt { background: var(--bg-soft); }
.section-title { text-align: center; max-width: 680px; margin: 0 auto var(--space-xl); }
.section-title h2 { margin-bottom: var(--space-sm); }
.section-title p { color: var(--text-muted); }
.section-title::after { content: ''; display: block; width: 200px; height: 16px; margin: var(--space-md) auto 0;
    background: url('/static/images/ornament.svg') center / contain no-repeat; }
.section-foot { margin-top: var(--space-xl); }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--color-gold-deep); margin-bottom: var(--space-sm); }
.link-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-primary); border-bottom: 1px solid var(--border-gold); padding-bottom: 2px; }
.link-more:hover { border-color: var(--color-primary); }
.link-more i { font-size: .8em; }
.stars { color: var(--color-gold); letter-spacing: 1px; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.hidden { display: none !important; }
@media (max-width: 760px) { .section { padding: 56px 0; } }

/* ---------- Buttons (flat, no gradients) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
    padding: 12px 26px; border-radius: var(--radius-full); border: 1.5px solid transparent;
    font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; box-shadow: var(--shadow-md); }
.btn-gold { background: var(--color-gold-light); color: var(--color-black); }
.btn-gold:hover { background: #EACB6E; color: var(--color-black); }
.btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-lg { padding: 15px 34px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* ---------- Header (with the temple stripe along the very top) ---------- */
.header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100;
    background: rgba(255, 249, 238, .95); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-light); border-top: 5px solid transparent;
}
.header::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: var(--stripe); }
.header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-img { width: 60px; height: 40px; object-fit: contain; }   /* the mark is 3:2, cropped to its edges, coloured to match the wordmark */
.logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; color: var(--color-primary-dark); letter-spacing: .3px; }
.logo-text span { color: var(--color-primary); }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full);
    color: var(--text-secondary); font-weight: 500; font-size: .95rem; transition: color .2s, background .2s; }
.nav-link:hover, .nav-link.active { color: var(--color-primary-dark); }
.nav-link.active { background: var(--bg-soft); }
.nav-link i { color: var(--color-gold); font-size: .95em; }
.nav-cta { margin-left: 10px; padding: 10px 22px; }
.nav-login { margin-left: 6px; padding: 8px 18px; font-size: .95rem; }   /* header: signed out */
.nav-badge { background: var(--bg-soft); color: var(--color-primary-dark); font-weight: 600; max-width: 180px; }   /* header: the devotee's name */
.nav-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge i, .nav-signout i { display: inline !important; }
.nav-list .nav-link, .nav-list .btn { white-space: nowrap; }   /* no two-line menu items when the account badge is there */
@media (min-width: 901px) { .nav-signout span { display: none; } .nav-signout { padding: 8px 10px; } .nav-badge { max-width: 150px; } }   /* desktop: sign-out is the icon only */
.menu-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--color-primary-dark); cursor: pointer; padding: 6px; }
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(58, 26, 18, .5); z-index: 90; }
.mobile-overlay.show { display: block; }
@media (min-width: 901px) { .nav-link i { display: none; } }   /* icons only in the mobile drawer */
@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .nav-menu { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: var(--bg-main);
        box-shadow: var(--shadow-lg); transition: right .3s; z-index: 110; padding: 80px var(--space-md) var(--space-md); overflow-y: auto; }
    .nav-menu.open { right: 0; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 6px; }
    .nav-link { padding: 12px 14px; }
    .nav-cta { margin: 8px 0 0; }
    .nav-login { margin: 8px 0 0; }
}


/* ---------- Mandala watermark (hero, page hero, closing band) ---------- */
.mandala::before { content: ''; position: absolute; width: 720px; height: 720px; pointer-events: none; z-index: 0;
    background: url('/static/images/mandala.svg') center / contain no-repeat; opacity: .28; animation: turn 150s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mandala::before { animation: none; } }

/* ---------- Home: hero (one centred column: mantras + headline, 360 view, then the details) ---------- */
.hero { --stage: min(100vw - 40px, 440px); --mandala-r: .65; --box-c: .53; --stage-gap: 76px;   /* stage = the Yantra stage size; the box centre sits 53% up the stage; mandala radius = .75 stage */
    position: relative; overflow: hidden;
    background: radial-gradient(760px 520px at 50% 40%, rgba(229, 194, 92, .34), transparent 68%), linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-main) 100%); }
.hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg);
    padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
.hero-deities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-2xl); margin-bottom: var(--space-md); }
.deity { display: inline-flex; align-items: center; gap: 18px; color: var(--text-primary); text-align: left; }
.hero-deities .deity:first-child { justify-self: end; }                                          /* Tara: photo left, text right  */
.hero-deities .deity:last-child { justify-self: start; flex-direction: row-reverse; text-align: right; }   /* Kamakhya: text left, photo right */
.deity img { width: 140px; height: 140px; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-gold);
    box-shadow: 0 0 0 4px var(--bg-main), 0 0 0 5px var(--border-gold), var(--shadow-md); }
.deity img.tara { object-position: center 18%; }       /* crown and face complete */
.deity img.kamakhya { object-position: center 12%; }   /* all the heads and the upper body */
.deity strong { display: block; font-family: var(--font-heading); font-size: 1.35rem; color: var(--color-primary-dark); line-height: 1.2; margin-bottom: 4px; }
.deity em { display: block; font-style: normal; font-family: var(--font-sanskrit); font-size: 1.1rem; color: var(--color-primary); line-height: 1.5; }
.hero h1 { line-height: 1.08; }
.hero h1 .h1-top { display: block; font-size: .6em; font-weight: 600; letter-spacing: .2px; margin-bottom: .1em; }   /* both lines fill the same width */
.hero h1 em { display: block; font-style: normal; font-size: 1.3em; line-height: 1.02; color: var(--color-primary); }
.hero-focus { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 0 var(--space-sm); }
.hero-focus > * { position: relative; z-index: 1; }
.hero-focus::before { content: ''; position: absolute; left: 50%; bottom: calc(var(--space-sm) + var(--stage) * var(--box-c)); height: calc(var(--stage) * var(--mandala-r) * 2); width: auto; aspect-ratio: 1; pointer-events: none; z-index: 0;   /* the mandala's centre = the Yantra box's centre; its top reaches the headline */
    background: url('/static/images/mandala.svg') center / contain no-repeat; opacity: .3; animation: turn-centred 150s linear infinite; }
@keyframes turn-centred { from { transform: translate(-50%, var(--mandala-shift, 50%)) rotate(0deg); } to { transform: translate(-50%, var(--mandala-shift, 50%)) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-focus::before { animation: none; transform: translate(-50%, var(--mandala-shift, 50%)); } }
.hero-focus h1 { margin-bottom: var(--space-md); }
.hero-focus .hero-visual { margin-top: var(--stage-gap); }   /* the stage (and the mandala centred on it) sits lower, leaving a small clear gap under the headline */
.hero-visual { display: flex; justify-content: center; width: 100%; }
.hero-body { display: flex; flex-direction: column; align-items: center; max-width: 640px; margin-top: calc(var(--stage) * (var(--mandala-r) - var(--box-c)) - var(--space-sm) + 8px); }   /* plus the column gap: ~32px (desktop) / ~24px (phone) below the mandala's lower edge */
.hero .lead { font-size: 1.12rem; margin-bottom: var(--space-md); }
.hero-price { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin-bottom: var(--space-md); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md) var(--space-lg); }
@media (max-width: 640px) {
    .hero-deities { gap: var(--space-md); }
    .deity, .hero-deities .deity:last-child { flex-direction: column; gap: 10px; text-align: center; justify-self: center; }   /* phone: photo on top, then name, then mantra */
    .deity img { width: 136px; height: 136px; }
    .deity strong { font-size: 1.2rem; }
    .deity em { font-size: 1rem; }
}
@media (max-width: 900px) {
    .hero { --stage: min(100vw - 40px, 340px); --mandala-r: .62; --stage-gap: 46px; }
    .hero .container { gap: var(--space-md); padding-bottom: var(--space-xl); }
}

/* ---------- 360 view: the Yantra on a marble plate, turned by hand (drag / swipe / arrows), no frame ---------- */
.hero-stage, .spin360 { width: min(100%, 440px); }
.turntable { position: relative; width: 100%; aspect-ratio: 1; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; outline: none; }
.turntable.dragging { cursor: grabbing; }
.turntable:focus-visible .tt-plate { outline: 2px solid var(--border-gold); outline-offset: 4px; }
.tt-shadow { position: absolute; left: 4%; width: 92%; top: 56%; height: 44%; border-radius: 50%; filter: blur(10px);
    background: radial-gradient(ellipse at 50% 50%, rgba(70, 35, 15, .38), rgba(70, 35, 15, 0) 70%); }
.tt-wall { position: absolute; left: 4%; width: 92%; top: 68%; height: 24.6%; border-radius: 0 0 50% 50% / 0 0 81% 81%;
    background: linear-gradient(90deg, rgba(40, 20, 10, .42), rgba(255, 255, 255, .10) 30%, rgba(40, 20, 10, .06) 55%, rgba(40, 20, 10, .48)),
                url('/static/images/marble.jpg') center bottom / 100% auto; }
.tt-plate { position: absolute; left: 4%; width: 92%; top: 48%; height: 40%; border-radius: 50%;
    background: url('/static/images/marble.jpg') center / cover; border-top: 1px solid rgba(255, 255, 255, .55);
    box-shadow: inset 0 -10px 16px rgba(60, 30, 10, .16), inset 0 8px 14px rgba(255, 255, 255, .28); }
.tt-gloss { position: absolute; left: 4%; width: 92%; top: 48%; height: 40%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at 38% 28%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%); }
.tt-frames { position: absolute; left: 4%; bottom: 7%; width: 92%; aspect-ratio: 1; }   /* no transform here: it would isolate the frames and stop the blend below from seeing the plate */
.tt-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease; pointer-events: none;
    filter: drop-shadow(0 16px 14px rgba(60, 30, 10, .35)); }
.tt-frames img.active { opacity: 1; }
.tt-frames img[src$=".jpg"], .tt-frames img[src$=".jpeg"] { mix-blend-mode: multiply; filter: none; }   /* photos still on a white background: the white disappears on the stage */
.tt-nav { position: absolute; top: 62%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-gold); background: rgba(255, 249, 238, .92);
    color: var(--color-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .2s, color .2s; }
.tt-nav:hover { background: var(--color-primary); color: #fff; }
.tt-prev { left: -6px; }
.tt-next { right: -6px; }
.tt-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.tt-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--border-gold); cursor: pointer; transition: width .2s, background .2s; }
.tt-dots button.active { background: var(--color-primary); width: 22px; }
@media (max-width: 900px) { .hero-stage, .spin360 { max-width: 340px; } }
.price-now { font-family: 'Yatra One', var(--font-heading); font-size: 2.1rem; font-weight: 400; letter-spacing: .5px; color: var(--color-primary-dark); line-height: 1; }
.price-mrp { text-decoration: line-through; color: var(--text-muted); }
.price-off { background: var(--color-gold-pale); color: var(--color-gold-deep); border: 1px solid var(--border-gold); font-size: .72rem; font-weight: 700; letter-spacing: .5px; padding: 3px 10px; border-radius: var(--radius-full); }

/* ---------- Home: trust strip ---------- */
.trust { background: var(--bg-soft); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.trust-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; column-gap: var(--space-xl); }   /* columns size to their text so every title stays on one line */
.trust-item { display: flex; align-items: center; gap: 14px; padding: 22px var(--space-md); }
.trust-item + .trust-item { border-left: 1px solid var(--border-light); }
.trust-item i { font-size: 1.35rem; color: var(--color-primary); width: 30px; text-align: center; }
.trust-item strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--color-primary-dark); white-space: nowrap; }
.trust-item small { font-size: .82rem; color: var(--text-muted); }
@media (max-width: 900px) {   /* tablets and phones: one item per row */
    .trust-list { grid-template-columns: 1fr; column-gap: 0; }
    .trust-item { padding: 14px 10px; border-left: 0; }
    .trust-item + .trust-item { border-top: 1px solid var(--border-light); }
}
.product-trust { grid-template-columns: 1fr; column-gap: 0; background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; }   /* Yantra page: the same strip, stacked under the description */
.product-trust .trust-item { padding: 14px 18px; border-left: 0; }
.product-trust .trust-item + .trust-item { border-top: 1px solid var(--border-light); }

/* ---------- Home: what's inside ---------- */
.inside { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-2xl); align-items: center; }
.inside-img { position: relative; overflow: hidden; padding: 5%; border-radius: var(--radius-lg);
    background: radial-gradient(circle at 50% 38%, #FFF5E3 0%, #F8E6C4 58%, #F0D8AE 100%); }   /* same temple stage as the hero */
.inside-img.mandala::before { left: -15%; top: -15%; width: 130%; height: 130%; margin: 0; opacity: .22; }
.stage { position: relative; aspect-ratio: 1; }
.inside h2 { margin-bottom: var(--space-lg); }
.element-list { counter-reset: el; border-top: 1px solid var(--border-light); }
.element-list li { counter-increment: el; display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 2px 12px;
    padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.element-list li::before { content: counter(el, decimal-leading-zero); font-family: var(--font-heading); color: var(--color-primary); font-size: 1.05rem; font-weight: 700; }
.element-list strong { font-weight: 600; }
.element-list span { font-size: .92rem; color: var(--text-muted); text-align: right; }
.inside-foot { margin: var(--space-md) 0 var(--space-lg); padding: 6px 0 6px 14px; border-left: 3px solid var(--color-gold); font-size: 1.02rem; font-weight: 600; color: var(--color-primary-dark); }   /* highlighted one-liner */
.buy-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.buy-section { padding-top: var(--space-xl); background: var(--bg-soft); border-top: 1px solid var(--border-light); }
.buy-section .buy-row { justify-content: center; }
.buy-section .product-price { justify-content: center; margin: 0 0 var(--space-md); }
@media (max-width: 860px) { .inside { grid-template-columns: 1fr; gap: var(--space-xl); } .inside-img { width: 100%; max-width: 420px; margin: 0 auto; } }   /* width:100% — auto margins would otherwise shrink the box to nothing */
@media (max-width: 520px) {
    .element-list li { grid-template-columns: 40px 1fr; }
    .element-list span { grid-column: 2; text-align: left; }
}

/* ---------- Home: the two peethas, each in a temple shrine (inline SVG), photos shown whole ---------- */
.shrines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); max-width: 900px; margin: 0 auto; }
.shrine { margin: 0; }
.shrine .mandir { display: block; width: 100%; height: auto; }
.shrine figcaption { margin-top: var(--space-md); text-align: center; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--color-primary-dark); }
@media (max-width: 700px) { .shrines { grid-template-columns: 1fr; gap: var(--space-2xl); max-width: 400px; } }

/* ---------- Home: three steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); max-width: 1100px; margin: 0 auto; }
.step { position: relative; text-align: center; }
.step-num { width: 54px; height: 54px; margin: 0 auto var(--space-md); border-radius: 50%; display: grid; place-items: center;
    background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700;
    box-shadow: 0 0 0 3px var(--bg-main), 0 0 0 4px var(--border-gold); }
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { font-size: .95rem; color: var(--text-muted); max-width: 260px; margin: 0 auto; }
.step + .step::before { content: ''; position: absolute; top: 27px; right: calc(50% + 40px); width: calc(100% + var(--space-2xl) - 80px); height: 1px; background: var(--border-gold); }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; gap: var(--space-lg); } .step + .step::before { display: none; } }

/* ---------- Home: reviews ---------- */
/* ---------- Reviews (homepage): the feedback list from /api/reviews ---------- */
.rv-tools { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 16px; max-width: 960px; margin: 0 auto 10px; padding: 10px 2px 8px; border-top: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-gold); }   /* Sort | score | Write a review */
.rv-tools .btn { justify-self: end; }
.rv-score { display: inline-flex; align-items: baseline; gap: 8px; justify-self: center; white-space: nowrap; }   /* the score, big in the middle */
.rv-score strong { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1; color: var(--color-primary-dark); }
.rv-score .stars { font-size: 1rem; }
.rv-score small { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.rv-sort { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--text-muted); }
.rv-sort select { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; padding: 2px 0; }
.rv-list { display: grid; gap: 10px; max-width: 960px; margin: 0 auto; }
.rv-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 13px 16px; }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-dark); color: #FBEBD2; font-weight: 700; font-size: .92rem; }
.rv-who { flex: 1; min-width: 0; line-height: 1.3; }
.rv-who strong { display: block; font-size: .9rem; color: var(--text-primary); }
.rv-who small { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 1px; }
.rv-verified { color: #2E7D4F; font-weight: 600; }
.rv-verified i { margin-right: 2px; }
.rv-head .stars { flex: none; font-size: .86rem; }
.star-off { color: var(--border-light); }
.rv-text { margin: 9px 0 0; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.rv-photo { display: block; margin-top: 10px; width: 100%; max-width: 340px; height: auto; border-radius: 8px; }
.rv-reply { margin-top: 10px; padding: 8px 12px; background: var(--bg-soft); border-left: 3px solid var(--color-gold); border-radius: 0 8px 8px 0; font-size: .85rem; }
.rv-reply strong { display: block; font-size: .82rem; color: var(--color-primary-dark); margin-bottom: 2px; }
.rv-reply i { color: var(--color-gold-deep); margin-right: 4px; }
.rv-reply p { color: var(--text-secondary); }
.rv-foot { display: flex; align-items: center; gap: 14px; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--border-light); }
.rv-like { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: .82rem; color: var(--text-muted); cursor: pointer; }
.rv-like i { font-size: .95rem; transition: transform .15s; }
.rv-like.on, .rv-like.on i { color: var(--color-primary-dark); }
.rv-like:hover i { transform: scale(1.12); }
.rv-more { text-align: center; margin-top: var(--space-md); }
.rv-empty, .rv-loading { text-align: center; color: var(--text-muted); padding: 24px 0; }
.rv-form { max-width: 640px; margin: 0 auto var(--space-lg); }
.rv-form h3 { margin-bottom: 10px; }
.rv-rate { display: flex; gap: 2px; margin-bottom: 14px; }
.rv-rate button { border: 0; background: none; font-size: 1.9rem; line-height: 1; color: var(--border-light); cursor: pointer; padding: 0 2px; transition: color .1s; }
.rv-rate button.on { color: var(--color-gold); }
.rv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 700px) {
    .rv-card { padding: 12px; }
    .rv-tools { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .rv-score { order: -1; width: 100%; justify-content: center; }   /* phones: score on its own line, Sort + Write a review under it */
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--border-light); }
.faq details { border-bottom: 1px solid var(--border-light); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 600; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .75rem; color: var(--color-primary); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 4px 18px; font-size: .95rem; }

/* ---------- Home: closing band ---------- */
.closing { position: relative; overflow: hidden; background: var(--bg-soft); border-top: 1px solid var(--border-light); text-align: center; }
.closing::before { left: 50%; top: 50%; margin: -360px 0 0 -360px; opacity: .2; }
.closing .container { position: relative; z-index: 1; }
.closing .closing-om { font-size: 2rem; color: var(--color-primary); margin-bottom: var(--space-sm); }
.closing h2 { max-width: 760px; margin: 0 auto var(--space-lg); }

/* ---------- Cards / grids (product + contact pages) ---------- */
.grid { display: grid; gap: var(--space-lg); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .grid-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .grid-5 { grid-template-columns: 1fr; } }
.card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg); transition: box-shadow .2s; }
.card:hover { box-shadow: var(--shadow-md); }
.card-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--space-md);
    background: var(--color-gold-pale); color: var(--color-primary); font-size: 1.15rem; }
.card h3 { margin-bottom: var(--space-sm); font-size: 1.1rem; }
.card p { font-size: .95rem; }
.element-num { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-gold-deep); margin-bottom: var(--space-sm); }

/* ---------- Product page ---------- */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; }
.product-layout > div:first-child { display: flex; }                                                         /* the photo stage fills the column ... */
.product-layout .inside-img { flex: 1; display: flex; flex-direction: column; justify-content: center; }   /* ... so its bottom lines up with the trust strip */
@media (max-width: 860px) { .product-layout { grid-template-columns: 1fr; } }
.product-info h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.product-price { display: flex; align-items: baseline; gap: 12px; margin: var(--space-md) 0; }
.product-desc { margin: var(--space-md) 0 var(--space-lg); }
.product-desc p + p { margin-top: var(--space-sm); }
.desc-order { margin: 0 0 var(--space-lg); }   /* Order Now right under the Yantra description */
@media (max-width: 600px) { .desc-order .btn { width: 100%; } }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-light); border-radius: var(--radius-full); overflow: hidden; background: #fff; }
.qty button { width: 40px; height: 40px; border: 0; background: var(--bg-soft); cursor: pointer; font-size: 1.1rem; color: var(--color-primary); }
.qty input { width: 48px; text-align: center; border: 0; height: 40px; }

/* ---------- Forms ---------- */
.form-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.field label .req { color: var(--color-primary); }
.field input, .field select, .field textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
    background: #fff; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 154, 46, .2); }
.field textarea { min-height: 100px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: .45; }   /* faded placeholders */
.field-hint { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.radio-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }   /* one payment option per row */
.radio-card em { display: block; font-style: normal; font-size: .88rem; margin-top: 2px; }
.fee-waived { color: #3E9A5A; font-weight: 600; }   /* light green: no extra charge */
.fee-waived s { color: var(--text-muted); font-weight: 400; margin-right: 4px; }
.fee-cod { color: #B3261E; font-weight: 700; font-size: .95rem; }
.fee-cod i { margin-right: 4px; }
.radio-card .fee-tag { margin: 0 0 0 auto; align-self: center; white-space: nowrap; font-size: .8rem; font-weight: 500; color: var(--text-muted); }   /* right-end tag */
.radio-card .fee-tag.fee-price { font-size: .86rem; font-weight: 600; color: var(--color-primary-dark); }   /* the add-on price: a little bolder */
.radio-card .fee-tag.fee-free { font-size: .86rem; font-weight: 700; color: #3E9A5A; }                    /* Free: bold green */
.info-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 9px; border: 1px solid var(--border-gold); border-radius: var(--radius-full); background: var(--color-gold-pale); color: var(--gold-deep, #8F6A1A); font: 600 .8rem var(--font-body); cursor: pointer; vertical-align: middle; }   /* 'Know more' tag: opens the description */
.info-tag i { font-size: .8rem; color: var(--color-gold-deep); }
.note-card p + p { margin-top: 8px; }
.field label.alt-tick { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .82rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; }   /* small one-line tick under the locked mobile */
.field label.alt-tick input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--color-primary); }
.choice-label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); margin: var(--space-md) 0 6px; }   /* heading of a radio-card group inside a form block */
.choice-label .req { color: var(--color-primary); }
/* Checkout steps: 1 sankalpa -> Next -> 2 delivery + 3 payment */
/* My Orders */
.orders-box { max-width: 860px; margin: 0 auto; }
.order-card { margin-bottom: 18px; }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-light); margin-bottom: 14px; }
.oc-ref { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-primary-dark); margin-right: 10px; }
.order-date { color: var(--text-muted); font-size: .9rem; }
.order-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: .78rem; font-weight: 600; background: var(--bg-soft); color: var(--text-secondary); }
.pill-confirmed { background: #E6EEF6; color: #2B5C8A; }  .pill-packed { background: var(--color-gold-pale); color: var(--color-gold-deep); }
.pill-shipped { background: #EAE6F7; color: #4B3A8A; }    .pill-delivered, .pill-paid { background: #E7F3EA; color: #2E7D4F; }
.pill-cancelled, .pill-failed { background: #FBEDEC; color: #B3261E; }  .pill-pending { background: #FBF0CF; color: #8F6A1A; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: .95rem; line-height: 1.55; }
.order-label { font-size: .75rem; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 8px 0 2px; }
.order-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-gold); }
.order-total { font-weight: 700; color: var(--color-primary-dark); font-size: 1.05rem; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-edit { margin-top: 16px; padding-top: 4px; border-top: 1px dashed var(--border-light); }
.order-edit .next-row { gap: 8px; }
@media (max-width: 700px) { .order-grid { grid-template-columns: 1fr; } }
.checkout-single { max-width: 760px; margin: 0 auto; }   /* checkout v3: one column, the calculation sits in the payment step */
.checkout-single h3 { margin-bottom: 14px; }   /* breathing room between a step heading and its boxes */
.done-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 10px; border-radius: var(--radius-full); background: #E7F3EA; color: #2E7D4F; font: 600 .78rem var(--font-body); vertical-align: middle; }   /* 'Done' beside a finished step heading */
.sub-step { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--color-primary-dark); margin: 22px 0 10px; }   /* sub-steps inside step 1 (Sankalpa details, energising): no number */
.sub-step i { margin-right: 4px; }
.sub-step .req { color: var(--color-primary); }
.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 12px; }
.qty-row .qty button { width: 36px; height: 36px; }
.sankalpa-set { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 14px 4px; margin: 0 0 16px; }
.sankalpa-set legend { padding: 0 6px; font-size: .9rem; font-weight: 600; color: var(--color-primary-dark); }
.same-as { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .9rem; color: var(--text-secondary); cursor: pointer; }
.same-as input { accent-color: var(--color-primary); }
.field input.mirrored { background: var(--bg-soft); color: var(--text-secondary); }
.money-box { background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 16px; }
.money-box .summary-row small { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.radio-card.is-disabled { opacity: .55; cursor: not-allowed; background: var(--bg-soft); }
.radio-card .why { display: block; font-size: .82rem; color: var(--color-primary-dark); margin-top: 3px; }
.step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--color-primary); color: #fff; font: 600 .85rem/1 var(--font-body); vertical-align: middle; }
.next-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.step-done { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: var(--radius-md); font-size: .95rem; line-height: 1.45; }
.step-done i { color: #3E9A5A; flex: none; }
.step-done span { flex: 1; }
.link-btn { background: none; border: 0; padding: 0; color: var(--color-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.intl-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 14px; background: #FCF4E0; border: 1px solid rgba(201, 154, 46, .35); border-radius: var(--radius-md); font-size: .9rem; line-height: 1.5; color: var(--color-primary-dark); }   /* checkout: shown when the delivery country is not India */
.intl-note i { color: var(--color-gold-deep); margin-top: 3px; }
.phone-row { display: flex; gap: 8px; }   /* checkout: country calling code (shown outside India) + mobile number */
.phone-row input { min-width: 0; }
.phone-row .cc { width: 84px; flex: none; }
/* Sign-in page (/login): mobile -> OTP */
.login-section { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.login-box { max-width: 440px; margin: 0 auto; }
.login-title { text-align: center; font-size: 1.6rem; margin-bottom: 18px; }
.login-box .field { margin-bottom: 16px; }   /* space between the number and the button (the field has no margin of its own outside a grid) */
.login-lead { margin-bottom: 14px; text-align: center; font-size: .92rem; color: var(--text-secondary); line-height: 1.5; }
.checkout-wait { padding: 60px 0; color: var(--text-muted); }   /* checkout: shown only until /api/me answers */
.otp-input { font-size: 1.6rem; letter-spacing: .45em; text-align: center; font-weight: 600; }
.login-links { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-muted); }
.login-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); font-weight: 600; font-size: .88rem; }   /* three pills, three colours */
.login-links #resendSms { background: var(--bg-soft); color: var(--color-primary); }           /* saffron: resend by SMS */
.login-links #resendWa { background: #E7F3EA; color: #1E8E4A; }                                /* green: WhatsApp */
.login-links #changeNumber { background: #EFE6F7; color: #6A2C91; }                            /* baingani: change number */
.login-links .sep { display: none; }
.phone-row input[readonly] { background: var(--bg-soft); color: var(--text-secondary); }
.radio-card { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; background: #fff; }
.radio-card:has(input:checked) { border-color: var(--color-primary); background: var(--bg-soft); box-shadow: 0 0 0 2px rgba(201, 74, 26, .14); }
.radio-card input { margin-top: 4px; accent-color: var(--color-primary); }
.radio-card strong { display: block; font-size: .95rem; }
.radio-card small { color: var(--text-muted); }
.summary-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border-light); }
.summary-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: #fff; }
.summary-item .grow { flex: 1; }
.summary-item .grow strong { display: block; font-size: .95rem; }
.summary-item .grow small { color: var(--text-muted); }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .95rem; }
.summary-row.total { font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--border-gold); margin-top: 8px; padding-top: 12px; color: var(--color-primary-dark); }

/* ---------- Alerts / toast ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: .95rem; margin-bottom: var(--space-md); border: 1px solid; }
.alert-error   { background: #FBEDEC; border-color: #EDBDB9; color: #84231F; }
.alert-success { background: #EDF5EE; border-color: #BCDDC2; color: #25562F; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--color-black); color: #fff;
    padding: 12px 20px; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); opacity: 0; transition: all .3s; z-index: 200; pointer-events: none; font-size: .95rem; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-soft) 50%, var(--bg-muted) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-md); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Page hero + long text (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--bg-soft); border-bottom: 1px solid var(--border-light); padding: var(--space-2xl) 0 var(--space-xl); text-align: center; }
.page-hero::before { right: -300px; top: 50%; margin-top: -360px; opacity: .18; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 6px; }
.page-hero p { color: var(--text-muted); }
.page-hero + .section { padding-top: var(--space-2xl); }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin: var(--space-xl) 0 var(--space-md); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--space-lg) 0 var(--space-sm); }
.prose p { margin-bottom: var(--space-md); }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: var(--space-md); color: var(--text-secondary); }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--color-primary); }
.figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin: 0 auto var(--space-xl); text-align: center; }   /* the two shrines, same as the homepage */
.figure-row figure { margin: 0; }
@media (max-width: 700px) { .figure-row { grid-template-columns: 1fr; gap: var(--space-2xl); max-width: 400px; } }   /* phones: one shrine under the other */

/* ---------- Order confirmation ---------- */
.confirm-box { max-width: 640px; margin: 0 auto; text-align: center; }
.confirm-icon { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto var(--space-md); display: grid; place-items: center;
    background: var(--color-gold-pale); border: 1px solid var(--border-gold); color: var(--color-primary); font-size: 2rem; }
.order-ref { display: inline-block; font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: 1px; color: var(--color-primary-dark);
    background: var(--bg-soft); border: 1px dashed var(--border-gold); padding: 8px 20px; border-radius: var(--radius-md); margin: var(--space-md) 0; }

/* ---------- Footer (deep maroon, temple stripe on top) ---------- */
.footer { position: relative; background: var(--bg-dark); color: var(--text-on-dark); padding: var(--space-2xl) 0 var(--space-lg); border-top: 5px solid transparent; }
.footer::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: var(--stripe); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-xl); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { color: var(--color-gold-light); font-family: var(--font-heading); margin: 0; font-size: 1.05rem; }
/* Explore / Orders / Contact open on click */
.footer-col summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem; color: var(--color-gold-light); transition: transform .2s; }
.footer-col[open] summary::after { transform: rotate(180deg); }
.footer-col summary:hover h4 { color: #fff; }
.footer-col ul { padding: 6px 0 10px; }
@media (max-width: 520px) { .footer-col { border-top: 1px solid rgba(255,255,255,.12); } .footer-col summary { padding: 14px 0; } .footer-grid { gap: var(--space-md); } }
@media (min-width: 901px) { .footer-col summary { cursor: default; pointer-events: none; } .footer-col summary::after { display: none; } }   /* desktop: always open */
.footer p, .footer li, .footer a { color: rgba(251, 235, 210, .82); font-size: .95rem; }
.footer a:hover { color: var(--color-gold-light); }
.footer li { margin-bottom: 8px; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-text span { color: var(--color-gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--space-xl); padding-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); font-size: .85rem; opacity: .75; }
.social { display: flex; gap: 10px; margin-top: var(--space-md); }
.social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.social a:hover { background: var(--color-gold-light); color: var(--color-black); }

/* ---------- Greeting popup (first visit / after a week away) ---------- */
.greet { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(58, 26, 18, .45); opacity: 0; transition: opacity .5s; cursor: pointer; }
.greet.show { opacity: 1; }
.greet-card { position: relative; width: 100%; max-width: 470px; padding: 26px 24px 20px; text-align: center; background: var(--bg-main); border: 1px solid var(--color-gold);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.97); transition: transform .5s; }
.greet.show .greet-card { transform: none; }
.greet-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--border-gold); border-radius: 14px; pointer-events: none; }
.greet-om { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: var(--color-gold-pale); border: 1px solid var(--border-gold); color: var(--color-primary); font-size: 1.25rem; }
.greet-en { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.4; color: var(--color-primary-dark); }
/* Small note popup (checkout: what the Sankalpa Purvaka Hawan is). Stays until the cross, a tap anywhere or Escape. */
.note-pop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(58, 26, 18, .45); cursor: pointer; }
.note-card { position: relative; width: 100%; max-width: 480px; padding: 40px 36px 34px; text-align: center; background: var(--bg-main); border: 1px solid var(--color-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.note-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--border-gold); border-radius: 14px; pointer-events: none; }
.note-card h4 { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.2; color: var(--color-primary-dark); }
.note-card h4::after { content: ''; display: block; width: 150px; height: 14px; margin: 12px auto 16px; background: url('/static/images/ornament.svg') center / contain no-repeat; }   /* the site's thin gold divider */
.note-card p { font-size: .95rem; line-height: 1.6; color: var(--text-secondary); }
.note-card .note-live { display: inline-block; margin: -6px 0 14px; padding: 4px 14px; border-radius: 999px; background: var(--color-gold-pale); font-size: .85rem; font-weight: 600; color: var(--color-primary-dark); }   /* 'Live Hawan Darshan' pill under the heading */
.note-card .note-lead { font-size: .98rem; color: var(--text-primary); margin: 0 auto 14px; max-width: 360px; }
.note-card .note-list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border-light); text-align: left; }
.note-card .note-list li { position: relative; padding: 0 0 8px 20px; font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }
.note-card .note-list li:last-child { padding-bottom: 0; }
.note-card .note-list li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; background: var(--color-gold); transform: rotate(45deg); }
.note-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.greet-card small { display: block; margin-top: 10px; font-size: 1.05rem; font-weight: 600; color: var(--text-secondary); }
.greet-side { position: absolute; top: 18px; width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-gold-light); box-shadow: 0 2px 8px rgba(90, 20, 24, .18); }   /* Tarapith and Kamakhya temples beside the Om */
.greet-left { left: 20px; }
.greet-right { right: 20px; }
.greet-en span { white-space: nowrap; }   /* each greeting stays whole; a phone breaks the line at the dot */
@media (max-width: 480px) { .greet { padding: 10px; } .greet-card { padding: 22px 14px 18px; } .greet-en { font-size: 1.22rem; } .greet-side { width: 56px; height: 56px; top: 16px; } .greet-left { left: 14px; } .greet-right { right: 14px; } }   /* phones: a wider, shorter card */
@media (prefers-reduced-motion: reduce) { .greet, .greet-card { transition: none; } }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff;
    display: grid; place-items: center; font-size: 1.6rem; box-shadow: var(--shadow-lg); z-index: 80; }
.wa-float:hover { color: #fff; transform: scale(1.06); }