/* ==========================================================================
   NITHYA SANNIDHI — per-domain design (Crafto / Poojamandhir mockup)
   --------------------------------------------------------------------------
   AUTHORING CONTRACT:
   1. EVERY selector starts with #t-nithyasannidhi (this domain's body id). The
      prefix beats Angular's component styles and isolates other domains.
   2. Anything NOT declared here falls back to the main site's style.
   3. ALL colors live as --sp-* variables in the token block below — rules
      never carry raw hex. Change a color in ONE place.
   4. Known !important exceptions:
      - .quotes      (inline style in HTML)
      - .gallerytext (base pins it !important at <=1024 — see 18.5)
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+Telugu:wght@100..900&family=Ramabhadra&display=swap');
   /* ---------- 1. design tokens ----------
         BRAND COLORS COME FROM THE ADMIN DOMAIN CONFIG: SSR injects them as
         --brand-* on :root, this file only READS them (with the mockup palette as
         fallback for standalone preview). Admin changes a color → the theme follows.
         Neutrals (ink/gray/white/footer-brown) are design-owned and stay here. */
   #t-nithyasannidhi {
     --sp-serif: "DM Sans", sans-serif;
     --sp-sans: "Inter", sans-serif;

     /* ---- THE PALETTE — 10 colours, nothing else ----
        LAYER 1 of 2: the ADMIN fallback. Each brand colour here reads whatever
        the Domain Config has (hex after the comma = standalone preview only).
        These apply ONLY to colours the designer has not claimed in LAYER 2.
        NEVER redeclare a --brand-* variable in this file: that cuts the admin
        off entirely, so even unclaimed colours would freeze. */
     --sp-primary:     var(--brand-primary, #8B0E01);              /* headings, hero, links   */
     --sp-accent:      var(--brand-primary-accent, #8B0E01);       /* buttons / CTAs          */
     --sp-accent-dark: var(--brand-primary-accent-dark, #770C00);  /* button hover            */
     --sp-cream:       var(--brand-surface, #FDE8E4);              /* warm bands, soft fills  */

     /* design-owned neutrals — these stay put whatever the admin picks */
     --sp-page:  #FDFBF7;                                          /* page background         */
     --sp-white: #FFFFFF;
     --sp-ink:   #3B0600;                                          /* body text, footer       */
     --sp-muted: #6F6680;                                          /* secondary text          */
     --sp-line:  #ECE4D8;                                          /* borders, dividers       */
     --sp-tint:  color-mix(in srgb, var(--sp-accent) 10%, transparent); /* chip/roundel wash  */

     /* hero wash — shared by the homepage hero AND every inner-page hero band, so
        the whole site keeps one backdrop. Change it here only. */
     --sp-hero-bg: radial-gradient(87.3% 350.67% at 15% 20%, rgba(255, 212, 207, 0.5) 0%, rgba(255, 212, 207, 0) 35%),
       radial-gradient(82.75% 332.39% at 80% 15%, rgba(248, 188, 182, 0.5) 0%, rgba(238, 187, 182, 0) 35%),
       radial-gradient(67.63% 271.65% at 65% 75%, rgba(255, 213, 208, 0.5) 0%, rgba(255, 218, 215, 0) 30%),
       radial-gradient(72.78% 292.33% at 30% 80%, rgba(255, 248, 239, 0.4) 0%, rgba(255, 248, 239, 0) 35%),
       linear-gradient(135deg, #FCF8F3 0%, #FCF8F3 25%, #FCF8F3 50%, #FCF8F3 75%, #FCF8F3 100%);
   }

   /* ============================================================
      LAYER 2 of 2 — THE DESIGNER'S PALETTE. This is the only place
      colours are chosen. It comes after LAYER 1, so anything set here
      BEATS the admin's Domain Config.

        line present here  ->  the designer's colour wins
        line deleted/#     ->  that colour falls back to the admin's

      Nothing else in this file should ever contain a raw hex.
      ============================================================ */
   #t-nithyasannidhi {
     --sp-primary:     #8B0E01;   /* headings, hero, links */
     --sp-accent:      #8B0E01;   /* buttons / CTAs        */
     --sp-accent-dark: #770C00;   /* button hover          */
     --sp-cream:       #FDE8E4;   /* warm bands, soft fills */

   
   
   
   
   
   
   
     background: var(--sp-page);
     color: var(--sp-ink);
     font-family: var(--sans);
   }
   
   /* ---------- 1b. per-language fonts ----------
         The app stamps <html id="<lang>-text"> (te-text, en-text, hi-text, ...) and
         updates it on every language switch. Override ONLY the two --sp-* font
         tokens per language; languages without a block keep the defaults above.
         Remember to @import any font you name here. */
   #te-text #t-nithyasannidhi {
     --sp-serif: "Ramabhadra", serif;
     --sp-sans: "Noto Sans Telugu", sans-serif;
   
   }
   
   
   
   
   
   
   
   #en-text #t-nithyasannidhi {
     --sp-serif: "DM Sans", sans-serif;
     --sp-sans: "Inter", sans-serif;
   }
   
   /* Base pages re-declare --serif/--sans on their component roots (the
         brand-aliases mixin), which out-inherits anything set on <body>. This
         ID-strength re-map wins on every element, so var(--sans)/var(--serif)
         always resolve to the tokens above. */
   #t-nithyasannidhi,
   #t-nithyasannidhi * {
     --serif: var(--sp-serif);
     --sans: var(--sp-sans);
   }
   
   #te-text #t-nithyasannidhi .vmv2 :is(p, span, a, button, div, li, summary, input, textarea, h1, h2, h3, h4, h5, h6) {
     font-family: var(--serif);
     font-weight: normal;
     line-height: 130%;
   }
   
   /* ---------- 2. typography ----------
         Base rules hardcode 'Noto Sans' / 'Cormorant Infant' per element, so a token
         swap alone can't restyle them. Blanket the text elements with the new sans,
         then re-assert the serif set. (Hero headline is deliberately SANS — mockup.) */
   #t-nithyasannidhi .vmv2 :is(p, span, a, button, div, li, summary, input, textarea, h1, h2, h3, h4, h5, h6) {
     font-family: var(--sans);
   }
   
   /* Ramabhadra ships ONE weight (400). Base sets these headings to 700, which the
      browser can only fake by smearing the glyphs — Telugu conjuncts blur badly.
      Pin normal so the real face is used. */
   #t-nithyasannidhi .vmv2 :is(.display, .qname, .finale-title, .gallerytext) {
     font-family: var(--serif);
     font-weight: normal;
   }
   
   /* mockup runs every section heading in the SAME deep indigo as the hero
         headline — the lighter purple read as a second colour against it. Journey
         and FAQ already overrode to indigo individually; this makes it the default
         so "Our Pujas" and "Puja Gallery" match too. */
   #t-nithyasannidhi .display {
     color: var(--sp-primary);
     letter-spacing: -0.5px;
   }
   
   #t-nithyasannidhi .display em {
     color: var(--sp-accent);
   }
   
   /* ---------- 3. header ---------- */
   /* the white bar is painted by .vmv2-hdr .nav, NOT the .vmv2-hdr wrapper — a
         background or shadow on the wrapper sits UNDER it and is never seen. Base
         also ships a 2px #EBEBEB grey rule; the mockup separator is a warm hairline. */
   #t-nithyasannidhi .vmv2-hdr .nav {
     background: var(--sp-primary);
     border-bottom: none;
   }
   
   /* logo is ADMIN-GIVEN (tenant config logo_header/logo_footer) — the theme
         never draws a brand; it only sizes the slot */
   #t-nithyasannidhi .vmv2-hdr .brand img {
     max-height: 52px;
     width: auto;
   }
   
   /* mockup nav: mixed-case, hard RIGHT next to the pills. Base grids the bar as
         `1fr auto 1fr`, so the nav column is exactly content-wide and justify-self
         has no room to travel — the nav column must become the flexible one first. */
   /* CONTAINER (design call, Chandu): full-width with a 4% side margin instead of
         the base's min(1280px, 96%). The 1280 cap made the margin balloon on wide
         screens (320px at 1920); a percentage holds 4% at every size. */
   #t-nithyasannidhi .vmv2-hdr .nav-inner {
     grid-template-columns: auto 1fr auto;
     width: 92%;
   }
   
   #t-nithyasannidhi .nav-links {
     justify-self: end;
     gap: 30px;
     margin-right: 8px;
   }
   
   #t-nithyasannidhi .nav-links a {
     color: var(--sp-white);
     font-size: 15px;
     font-weight: 600;
     display: inline-block;
     text-transform: lowercase;
   }
   
   #t-nithyasannidhi .nav-links a::first-letter {
     text-transform: uppercase;
   }
   
   /* on the solid primary bar the only readable states are white + the cream
         wash; a darker shade would disappear into the background */
   #t-nithyasannidhi .nav-links a:hover,
   #t-nithyasannidhi .nav-links a.is-active {
     color: var(--sp-cream);
   }

   #t-nithyasannidhi .nav-links a.is-active::before {
     background: var(--sp-cream);
   }
   
   /* WhatsApp pill: tan fill, brown text (mockup) — not green outline. Base pads
         `0 25px 0 16px` to clear the glyph hidden below, which reads visibly
         off-centre once the glyph is gone — even it up and shorten to the mockup. */
   /* reversed out on the solid bar: cream pill, primary text */
   #t-nithyasannidhi .nav-wa {
     background: var(--sp-cream);
     border: 1px solid var(--sp-cream);
     border-radius: 999px;
     color: var(--sp-primary);
     height: 40px;
     padding: 0 20px;
     gap: 0;
   }
   
   
   
   #t-nithyasannidhi .nav-wa:hover {
     box-shadow: 0 2px 8px var(--sp-tint);
   }
   
   
   
   #t-nithyasannidhi .nav-wa :is(span, div) {
     color: var(--sp-primary);
   }
   
   #t-nithyasannidhi .nav-wa .nav-wa-hint {
     display: none;
   }
   
   /* mockup pill is text-only — no green WhatsApp glyph */
   #t-nithyasannidhi .nav-wa :is(img, svg) {
     display: none;
   }
   
   /* header — tablet.
         Why: at 1024 and below the base collapses the pill to an ICON-ONLY chip by
         hiding .nav-wa-text, but this theme hides the glyph (the desktop mockup pill
         is text-only). Together they render an EMPTY tan circle — confirmed at 900.
         Put the glyph back so the chip still reads as WhatsApp. Below 768 the base
         hides .nav-actions outright and the bottom nav takes over, so this only ever
         shows in the tablet band. */
   @media (max-width: 1024px) {
     #t-nithyasannidhi .nav-wa :is(img, svg) {
       display: block;
     }
   
     #t-nithyasannidhi .nav-wa {
       padding: 0 10px;
     }
   }
   
   /* ---------- 4. hero ---------- */
   /* badge band sits flush at the hero's bottom edge (mockup) — no cream after it */
   #t-nithyasannidhi .hero {
    margin-top: 2rem !important;
     background: var(--sp-hero-bg);
     padding-bottom: 0;
     width: 92%;
     margin: 0 auto;
   }
   
   /* CONTAINER: 4% side margin, no cap. The hero's wrapper is .hero-inner, NOT
         the .container the other sections use. Base caps it at min(1280px, 92%) and
         swaps to width:100% + 18px padding on mobile — zero the padding so the
         margin stays a true 4% at every size instead of 4% plus 18px. */
   #t-nithyasannidhi .hero .hero-inner {
     width: min(1280px, 88%);
     margin: 0 auto;
     padding-left: 0;
     padding-right: 0;
   }
   
   
   #t-nithyasannidhi .hcard-img {
    
     border-radius: 0;
   }
   
   
   
   
   
   #t-nithyasannidhi .hero .corner-design {
     display: none;
   }
   
   /* left column stacks from the top (base bottom-anchors the CTA) */
   #t-nithyasannidhi .hero-slides,
   #t-nithyasannidhi .hero-slide.is-on {
     flex: 0 0 auto;
   }
   
   #t-nithyasannidhi .cta-trusted {
     margin-top: 26px;
   }
   
   #t-nithyasannidhi .hero-eyebrow {
     background: var(--sp-tint);
     border: 1px solid var(--sp-cream);
     border-radius: 999px;
     padding: 7px 14px;
     color: var(--sp-accent-dark);
     text-transform: none;
     letter-spacing: 0;
     font-weight: 600;
     font-size: 12.5px;
     width: fit-content;
   }
   
   #t-nithyasannidhi .hero-eyebrow-ic {
     display: none;
   }
   
   /* mockup headline: bold SANS, deep indigo */
   #t-nithyasannidhi .hero-title,
   #t-nithyasannidhi .hero-title .line-a,
   #t-nithyasannidhi .hero-title .line-b {
     font-family: var(--sp-serif);
     color: var(--sp-primary);
     font-weight: 800;
     font-size: 40px;
     line-height:130%;
     letter-spacing: -0.5px;
   }
   
   
   
   
   #te-text #t-nithyasannidhi .hero-title .line-a{
       font-weight: 400;
   }
   
   
   
   
   
   
   #t-nithyasannidhi .hero-sub {
     color: var(--sp-muted);
   }
   
   /* hero CTA: bronze block button, centered label, no arrow roundel */
   #t-nithyasannidhi .pill-btn.primary {
     background: var(--sp-accent);
     color: var(--sp-white);
     border: none;
     border-radius: 8px;
     box-shadow: none;
     text-shadow: none;
   }
   
   #t-nithyasannidhi .pill-btn.primary:hover {
     background: var(--sp-accent-dark);
   }
   
   /* mockup CTA is a compact block, not a full-bleed bar. Base stretches it with
         `.cta-trusted .pill-btn.primary { width:100%; max-width:none }` and an
         `align-items: stretch` parent, so width has to be reclaimed explicitly. */
   #t-nithyasannidhi .hero .pill-btn.primary {
     justify-content: center;
     padding: 15px 34px;
     width: 100%;
     align-self: flex-start;
   }
   
   #t-nithyasannidhi .hero .pill-btn.primary .pill-icon {
     display: none;
   }
   
   /* stats: flat left-aligned (mockup has no card/border/laurels/dividers) */
   #t-nithyasannidhi .hero-left .trust-strip {
     margin-top: 16px;
   }
   
   /* base centres the stats row; the mockup left-aligns it under the CTA */
   #t-nithyasannidhi .hero-left .trust-stats {
     background: transparent;
     border: none;
     border-radius: 0;
     box-shadow: none;
     padding: 0;
     flex-wrap: wrap;
     gap: 6px 0;
     justify-content: flex-start;
   }
   
   #t-nithyasannidhi .hero-left .ts-laurel {
     display: none;
   }
   
   #t-nithyasannidhi .hero-left .trust-stat+.trust-stat::before {
     display: none;
   }
   
   #t-nithyasannidhi .hero-left .trust-stat.label-only {
     flex-basis: 100%;
     padding: 0;
   }
   
   #t-nithyasannidhi .hero-left .trust-stat.label-only .ts-lbl {
     color: var(--sp-muted);
     font-weight: 500;
     font-size: 17px;
     max-width: none;
   }
   
   /* base centres each stat cell and its text; mockup runs the whole block left */
   #t-nithyasannidhi .hero-left .trust-stat {
     padding: 0 28px 0 0;
     justify-content: flex-start;
   }
   
   #t-nithyasannidhi .hero-left .trust-stat-text {
     text-align: left;
   }
   
   /* mockup reads the stat numbers in the bronze accent, not the headline indigo */
   #t-nithyasannidhi .hero-left .ts-num {
     color: var(--sp-accent);
     font-weight: 800;
   }
   
   #t-nithyasannidhi .hero-left .ts-lbl {
     color: var(--sp-muted);
     font-size: 15px;
   }
   
   /* right banner card: rounded with a thin tan border (mockup) */
   #t-nithyasannidhi .hero-card {
     border-radius: 18px;
     overflow: hidden;
     border: 1px solid var(--sp-cream);
     box-shadow: var(--sp-shadow-card);
   }
   
   /* mockup shows no slide dots */
   #t-nithyasannidhi .hero-dots {
     display: none;
   }
   
   /* trust badge band: full-bleed strip at the hero's bottom edge. It carries the
         HERO's cream, not white — in the mockup the badges read as the closing row of
         the hero block, and a white band there cut the section in two. */
   #t-nithyasannidhi .hero .marquee {
     width: 100vw;
     max-width: none;
     margin-left: calc(50% - 50vw);
     border-top: 1px solid var(--sp-cream);
     padding: 6px 0;
     background: transparent;
   }
   
   #t-nithyasannidhi .hero .marquee-track {
     width: min(1280px, 92%);
     margin: 0 auto;
     background: transparent;
     border: none;
     border-radius: 0;
     padding: 12px 0;
   }
   
   /* band items are flat text+icon (the tan pill boxes belong to the LOWER
         marquee only) */
   #t-nithyasannidhi .hero .mq-item {
     color: var(--sp-ink);
     background: transparent;
     border: none;
     border-radius: 0;
   }
   
   #t-nithyasannidhi .hero .pill-btn.primary,
   #t-nithyasannidhi .hero .pill-btn.primary :is(span, div) {
     color: var(--sp-white);
   }
   
   
   
   .vmv2 .hero:after {
     display: none;
   }
   
   
   
   
   
   
   
   
   
   
   
   /* hero — mobile.
         Why: grid tracks default to min-width:auto, so one long unbreakable Telugu
         word in the title widens the column past the viewport and drags the whole
         hero — banner card included — into horizontal overflow. Pre-existing: the
         right edge was already being crossed before any theme change (328 rows at
         430). Let the tracks shrink below their content and let long words break. */
   @media (max-width: 768px) {
     #t-nithyasannidhi .hero .hero-inner>* {
       min-width: 0;
     }
   
     #t-nithyasannidhi .hero-title,
     #t-nithyasannidhi .hero-sub,
     #t-nithyasannidhi .hero-eyebrow {
       overflow-wrap: break-word;
     }
   
   
           #t-nithyasannidhi .journey-steps {
       
       align-items: flex-start;
     
   }
   
   
   
   
   
   }
   
   /* ---------- 5. journey ("From Booking to Divine Blessings") ---------- */
   #t-nithyasannidhi .journey {
     background: var(--sp-white);
     padding: 80px;
   }
   
   #t-nithyasannidhi .journey-grid {
   
     gap: 25px;
   }
   
   
   
   /* mockup renders this heading small, dark and quiet — not a display title */
   #t-nithyasannidhi .journey .display {
     font-family: var(--sans);
     font-size: 20px;
     font-weight: 600;
     color: var(--sp-primary);
     letter-spacing: 0;
     justify-content: center;
     padding: 1.2rem 0 2rem;
   }
   
   /* mockup lays each step out horizontally — icon left, two-line label right.
         Base stacks them (`.jstep { flex-direction: column }`) and centres the text. */
   #t-nithyasannidhi .jstep {
     flex-direction: row;
     justify-content: flex-start;
     gap: 12px;
   }
   
   #t-nithyasannidhi .jstep-label {
     text-align: left;
   }
   
   /* step icons inside tan circles (mockup) */
   #t-nithyasannidhi .jstep-num {
     width: 56px;
     height: 56px;
     background: transparent;
     border: 1px solid var(--sp-cream);
     border-radius: 50%;
     display: grid;
     place-items: center;
   }
   
   
   #t-nithyasannidhi .journey-steps .jstep:first-child .jstep-label {
     margin-left: 0;
   }
   
   
   
   #t-nithyasannidhi .jstep-num img {
     width: 22px;
     height: 22px;
     object-fit: contain;
   
   }
   
   #t-nithyasannidhi .step-arrow {
     filter: grayscale(1) opacity(0.35);
     width: 26px;
   }
   
   #t-nithyasannidhi .jstep-label {
     color: var(--sp-muted);
   }
   
   #t-nithyasannidhi .jstep-label :is(b, strong) {
     color: var(--sp-ink);
   }
   
   /* ---------- 6. pujas ---------- */
   #t-nithyasannidhi .pujas .container {
     border-top: 1px solid var(--sp-cream);
   }
   
   #t-nithyasannidhi .filter-chip {
     background: var(--sp-white);
     border: 1px solid var(--sp-line);
     color: var(--sp-muted);
   }
   
   #t-nithyasannidhi .filter-chip:hover {
     border-color: var(--sp-primary);
     color: var(--sp-primary);
   }
   
   #t-nithyasannidhi .filter-chip.is-on {
     background: var(--sp-primary);
     border-color: var(--sp-primary);
     color: var(--sp-white);
     padding: 0;
   }
   
   #t-nithyasannidhi .filter-tick {
     background: var(--sp-white);
     color: var(--sp-primary);
   }
   
   #t-nithyasannidhi .puja-card {
     background: var(--sp-white);
     border: 1px solid var(--sp-line);
     border-radius: 14px;
     box-shadow: var(--sp-shadow-card);
     padding: 0;
   
   }
   
   #t-nithyasannidhi .puja-card:hover {
     box-shadow: var(--sp-shadow-card-hover);
     border-color: var(--sp-cream);
   }
   
   #t-nithyasannidhi .puja-img {
     background: var(--sp-cream);
     border-radius: 0px;
   }
   
   #t-nithyasannidhi .puja-date-place .cal-ic,
   #t-nithyasannidhi  .puja-date-place .yaga-ic {
     color: var(--sp-accent);
     filter:grayscale(1);
   }
   
   /* mockup card titles: bold sans in deep indigo, ~21px */
   #t-nithyasannidhi .puja-name {
     font-family: var(--serif);
     color: var(--sp-ink);
     font-weight: 400;
     font-size: 21px;
   }
   
   #t-nithyasannidhi .puja-desc {
     color: var(--sp-muted);
     opacity: 0.7;
     font-size: 14px;
   }
   
   #t-nithyasannidhi .puja-date-place {
     border: 1px solid var(--sp-line);
   }
   
   #t-nithyasannidhi .templename {
     border-bottom: none;
   }
   
   #t-nithyasannidhi .puja-date {
     color: var(--sp-muted);
   }
   
   /* mockup shows the "Per Booking" label ABOVE the amount */
   #t-nithyasannidhi .puja-price {
     flex-direction: column-reverse;
     gap: 4px;
   }
   
   #t-nithyasannidhi .puja-amt {
     color: var(--sp-ink);
     font-size: 23px;
   }
   
   #t-nithyasannidhi .puja-per {
     color: var(--sp-muted);
     font-size: 13px;
     margin-top: 0;
   }
   
   /* mockup divider above the price row is a thin SOLID line */
   #t-nithyasannidhi .puja-foot {
     border-top: 1px dotted var(--sp-line);
         justify-content: space-between;
   }
   
   /* Book Now: compact bronze button, plain text */
   #t-nithyasannidhi .book-btn {
     background: var(--sp-accent);
     color: var(--sp-white);
     border-radius: 8px;
     width: auto;
     justify-content: center;
     padding: 12px 22px;
     font-size: 13.5px;
   }
   
   #t-nithyasannidhi .book-btn:hover {
     background: var(--sp-accent-dark);
   }
   
   #t-nithyasannidhi .book-btn .book-ic {
     display: none;
   }
   
   #t-nithyasannidhi .view-all-pill {
     background: var(--sp-white);
     border: 1.5px solid var(--sp-accent);
     color: var(--sp-accent-dark);
     border-radius: 10px;
   }
   
   #t-nithyasannidhi .view-all-pill:hover {
     background: var(--sp-cream);
   }
   
   #t-nithyasannidhi .va-ic {
     background: var(--sp-accent);
   }
   
   /* ---------- 7. gallery ---------- */
   #t-nithyasannidhi .gallery {
     background: var(--sp-white);
     padding-top: 30px;
     display: none;
   }
   
   /* CONTAINER: the heading uses .container, but the image rail is a full-bleed
         scrolling track — its 4vw padding scrolls away, so the row ran edge to edge.
         Constraining the RAIL WRAPPER (not the track) insets the whole row to the
         same 4% margin while the marquee still scrolls inside it. */
   #t-nithyasannidhi .gallery .container,
   #t-nithyasannidhi .gal-rail-wrap {
     width: 92%;
     margin: 0 auto;
   }
   
   #t-nithyasannidhi .gallery-item {
     border-radius: 14px;
     overflow: hidden;
   }
   
   /* the masonry track reserves 360px and bottom-aligns — kill the dead gap.
         Its own `padding: 0 4vw` now stacks on top of the wrapper's 4% margin and
         insets the row to 7.4%; the wrapper owns the margin, so zero it here. */
   #t-nithyasannidhi .gal-track {
     min-height: 0;
     align-items: center;
     padding-left: 0;
     padding-right: 0;
   }
   
   /* mockup gallery: equal-size landscape cards, one scrolling row */
   #t-nithyasannidhi .gallery-item.tall,
   #t-nithyasannidhi .gallery-item.short,
   #t-nithyasannidhi .gallery-item.medium,
   #t-nithyasannidhi .gallery-item.wide,
   #t-nithyasannidhi .gallery-item.large {
     width: 300px;
     height: 235px;
   }
   
   @media (max-width: 1024px) {
   
     #t-nithyasannidhi .gallery-item.tall,
     #t-nithyasannidhi .gallery-item.short,
     #t-nithyasannidhi .gallery-item.medium,
     #t-nithyasannidhi .gallery-item.wide,
     #t-nithyasannidhi .gallery-item.large {
       width: 210px;
       height: 165px;
     }
   }
   
   /* base uses a 214px watermark at 5% opacity — mockup wants a real heading */
   #t-nithyasannidhi .gallerytext {
     position: static;
     transform: none;
     font-size: 46px;
     line-height: 1.2;
     opacity: 1;
     color: var(--sp-primary);
     justify-content: center;
     padding: 1rem 0 2rem;
   }
   
   /* ---------- 8. badge marquees ---------- */
   #t-nithyasannidhi .marquee {
     background: var(--sp-white);
   }
   
   
   
   #t-nithyasannidhi .gallery-bottom{
     display: none;
   }
   
   
   #t-nithyasannidhi .mq-item {
     background: var(--sp-tint);
     border: 1px solid var(--sp-line);
     color: var(--sp-ink);
   }
   
   /* ---------- 9. testimonials ---------- */
   /* the section carries an inline background — justified !important #1 of 2 */
   #t-nithyasannidhi .quotes {
     background: var(--sp-cream) !important;
   }
   
   #t-nithyasannidhi .qcard {
     background: var(--sp-white);
     border: 1px solid var(--sp-line);
     border-radius: 14px;
     box-shadow: var(--sp-shadow-card);
   }
   
   #t-nithyasannidhi .qmark {
     color: var(--sp-accent);
   }
   
   #t-nithyasannidhi .qtext {
     color: var(--sp-muted);
     border-bottom: 1px solid var(--sp-line);
   }
   
   #t-nithyasannidhi .qname {
     color: var(--sp-ink);
   }
   
   #t-nithyasannidhi .qdot.is-on {
     background: var(--sp-accent);
   }
   
   #t-nithyasannidhi .vtest {
     background: var(--sp-white);
   }
   
   /* ---------- 10. FAQ ---------- */
   /* mockup: white page, cream ROUNDED PANEL inset around the whole section */
   #t-nithyasannidhi .faq {
     background: var(--sp-white);
     padding: 40px 0 60px;
     width: 92%;
     margin: 50px auto;
     background: var(--sp-cream);
   }
   
   /* CONTAINER: 4% side margin, no cap — the cream panel is the container itself,
         so this widens the panel too. */
   #t-nithyasannidhi .faq .container {
     background: var(--sp-cream);
     border-radius: 24px;
     padding: 50px 0;
   
   }
   
   /* mockup has no FAQ eyebrow, and the heading is bold sans indigo — not serif */
   #t-nithyasannidhi .faq-eyebrow {
     display: none;
   }
   
   #t-nithyasannidhi .faq-head .display {
     font-family: var(--sans);
     color: var(--sp-primary);
     font-weight: 800;
     font-size: 42px;
     letter-spacing: -1px;
   }
   
   #t-nithyasannidhi .faq-sub {
     color: var(--sp-muted);
   }
   
   #t-nithyasannidhi .faq-item {
     background: var(--sp-white);
     border: 1px solid var(--sp-line);
     border-radius: 12px;
   }
   
   #t-nithyasannidhi .faq-item summary {
     color: var(--sp-ink);
     letter-spacing: 0;
   }
   
   /* mockup open question reads bronze */
   #t-nithyasannidhi .faq-item[open] summary span {
     color: var(--sp-accent-dark);
   }
   
   #t-nithyasannidhi .faq-mark {
     background: var(--sp-tint);
     color: var(--sp-primary);
   }
   
   #t-nithyasannidhi .faq-item[open] .faq-mark {
     background: var(--sp-accent);
     color: var(--sp-white);
   }
   
   #t-nithyasannidhi .faq-body {
     color: var(--sp-muted);
   }
   
   /* FAQ — mobile.
         Why: the cream panel carries 60px of side padding. At 430 that plus the 92%
         width makes the panel wider than the viewport, and because it is the widest
         box on the page every OTHER section renders against that width too — which
         is what pushed the hero, marquee and journey past the right edge. Shrink the
         padding and pin border-box so the width includes it. */
   @media (max-width: 768px) {
     #t-nithyasannidhi .faq .container {
       box-sizing: border-box;
       padding: 34px 18px;
     }
   }
   
   /* ---------- 11. footer ---------- */
   /* mockup footer is a FLAT warm-brown panel. The base layers a photo
         (assets/home-v2/footer-bg.png) over --brand-primary-2, and the .vm-footer
         variant reads it through --footer-bg-image. Blank the var AND the
         background-image so neither the base default nor an admin-supplied picture
         can come back — colour only. */
   #t-nithyasannidhi .dark-zone {
     --footer-bg-image: none;
     background-image: none;
     background: linear-gradient(181.31deg, rgba(0, 0, 0, 0.74) 24.85%, rgba(0, 0, 0, 0.6) 49.53%, rgba(0, 0, 0, 0.3) 74.21%, rgba(0, 0, 0, 0.1) 98.88%),
       #8b0e01;
   }
   
   /* the two blurred radial glows are part of the photo treatment — off */
   #t-nithyasannidhi .dark-glow {
     display: none;
   }
   
   #t-nithyasannidhi .finale-title {
     color:--sp-white;
     font-weight: 600;
   }
   
   
   /* mockup footer CTA is a CREAM pill with dark text and no arrow roundel —
         the bronze-on-brown version reads as a second-tier button against the
         dark panel. */
   
   
   
   
   #t-nithyasannidhi .dark-zone .va-ic {
     display: none;
   }
   
   /* ---------- 13. pujas listing page (/pujas) ----------
      This page ships its OWN style block scoped under `.pujas-page` — its own
      card, price, button and heading rules. The id prefix already outranks all of
      them, so the CARDS inherit the homepage look for free. What is left is the
      page's own chrome: the hero band, the search field and the list heading. */
   
   /* same 4% gutter as every other surface (base caps this one at 1280) */
   
   
   /* hero band carries the SAME wash as the homepage hero, via the shared token */
   #t-nithyasannidhi .pujas-page .puja-hero {
     background: var(--sp-hero-bg);
   }
   /* chakra watermarks left/right — the homepage hides its .corner-design
      equivalents, so these go too. Delete this rule to bring them back. */
   #t-nithyasannidhi .pujas-page .puja-hero-orn {
     display: none;
   }
   /* base pins 700 + #470a00; Ramabhadra has one weight and the colour belongs to
      the token, exactly like .display */
   #t-nithyasannidhi .pujas-page .puja-hero-title {
     color: var(--sp-primary);
     font-weight: normal;
   }
   #t-nithyasannidhi .pujas-page .puja-hero-sub {
     color: var(--sp-muted);
   }
   
   /* search: warm field, and a FILLED bronze go-button (base leaves it a bare
      transparent glyph that reads as disabled) */
   #t-nithyasannidhi .pujas-page .puja-search-field {
     background: var(--sp-white);
     border: 1px solid var(--sp-cream);
     box-shadow: var(--sp-shadow-card);
   }
   #t-nithyasannidhi .pujas-page .puja-search-input {
     color: var(--sp-ink);
   }
   #t-nithyasannidhi .pujas-page .puja-search-go {
     background: var(--sp-accent);
     color: var(--sp-white);
   }
   #t-nithyasannidhi .pujas-page .puja-search-go:hover {
     background: var(--sp-accent-dark);
     color: var(--sp-white);
   }
   
   
   /* "Upcoming Online Pujas" — base pins Cormorant 700 #470a00, which is why it
      still read black. Same treatment as .display everywhere else. */
   #t-nithyasannidhi .pujas-page .puja-list-title {
     font-family: var(--serif);
     font-weight: normal;
     color: var(--sp-primary);
   }
   
   /* filter chips + counters run bronze, not the base maroon */
   #t-nithyasannidhi .pujas-page .puja-chip:hover,
   #t-nithyasannidhi .pujas-page .puja-chip.is-on {
     border-color: var(--sp-accent);
     color: var(--sp-accent-dark);
   }
   #t-nithyasannidhi .pujas-page :is(.puja-chip-check, .puja-chip-count, .puja-filter-count) {
     background: var(--sp-accent);
   }
   #t-nithyasannidhi .pujas-page .puja-filter-btn:hover {
     border-color: var(--sp-accent);
     color: var(--sp-accent);
   }
   
   
   
   
   
   /* ---------- 14. puja details page (/pooja-details/:id) ----------
      Root is `.pooja-details-container`, and it redefines its OWN variable set on
      itself (--maroon, --paper, --line, --pd-serif ...) — the same shadowing trick
      `.vmv2` uses, so anything set on <body> never reaches it. Re-map that set to
      the theme tokens once and most of the page follows: tab underline, FAQ mark,
      trait labels and the highlighted step all read --maroon.
      Fonts are already right here — `.lang-te` points --pd-serif at Ramabhadra and
      #te-text pins the titles to weight 400. Only colour and borders are left. */
   #t-nithyasannidhi .pooja-details-container {
     --maroon: var(--sp-accent);
     --maroon-dk: var(--sp-accent-dark);
     --paper: var(--sp-white);
     --cream: var(--sp-cream);
     --line: var(--sp-line);
     --muted: var(--sp-muted);
     --ink: var(--sp-ink);
     --ink-soft: var(--sp-muted);
     /* white page (Chandu) — this one stays plain white rather than the warm
        --sp-page the rest of the site uses */
     background: var(--sp-white);
   }
   
   /* container is deliberately LEFT at the base width here (Chandu) — no 92%
      override, unlike the homepage and /pujas */
   
   /* 14.1 headings — base hardcodes #470a00 / #333 / #2c1a17 instead of a token,
      which is why they sat a shade off every other heading on the site */
   #t-nithyasannidhi .pooja-details-container :is(.pd-title, .pd-section-title, .pd-temple-name),
   #t-nithyasannidhi .pooja-details-container :is(.pd-benefit, .pd-step-card, .pd-receive-card, .pd-advisor) h4,
   #t-nithyasannidhi .pooja-details-container .pd-card-head h3,
   #t-nithyasannidhi .pooja-details-container .pd-advisor h3 {
     color:var(--sp-ink);
   }
   
   
   
   
   .pooja-details-container .yaga-ic, .pooja-details-container .line-frame-design img {
   
     filter: brightness(0) saturate(100%) invert(44%) sepia(43%) saturate(1137%) hue-rotate(352deg) brightness(94%) contrast(89%);
     }
   
   
   
   
   
   
   
   
   
   
   /* 14.2 trust strips — base tints them MINT (#01ad5f14 + green border), which is
      the one off-palette block on the page. Warm them to the badge tan. */
   #t-nithyasannidhi .pooja-details-container .pd-trust,
   #t-nithyasannidhi .pooja-details-container .pd-trust-item {
     background: var(--brand-surface);
     border-color:var(--sp-cream);
   }
   
   /* the desktop variant paints the wrapper, the mobile variant paints each item —
      whichever is transparent must stay transparent or the tint doubles up */
   #t-nithyasannidhi .pooja-details-container .pd-trust.pd-trust-mobile {
     background: transparent;
     border-color: transparent;
   }
   
   /* 14.3 tabs — active colour comes from --maroon (already re-mapped); the
      underline is a hardcoded #9a1102 gradient that has to be replaced outright */
   #t-nithyasannidhi .pooja-details-container .tab-button.active::after {
     background: var(--sp-accent);
   }
   
   /* 14.4 cards — base borders are a cool grey #e4e0e1 against warm paper */
   #t-nithyasannidhi .pooja-details-container :is(.pd-card, .pd-step-card, .pd-receive-card, .pd-faq-item),
   #t-nithyasannidhi .pooja-details-container .pd-card-head {
     border-color: var(--sp-cream);
   }
   /* the rotating mandala watermark in the card's top-right corner (a 200px png
      on a 40s infinite spin) — Chandu: remove. It is the loudest "this is the
      vedamandir template" tell on the page, and it animates forever off-screen. */
   #t-nithyasannidhi .pooja-details-container .puja-details-card.is-loaded::after {
     display: none;
   }
   #t-nithyasannidhi .pooja-details-container .pd-card-head {
     background: var(--sp-cream);
   }
   #t-nithyasannidhi .pooja-details-container .pd-card-head img {
     background: var(--sp-accent);
   }
   
   /* 14.5 booking box — the meta rows are divided by a hard 30% black rule */
   #t-nithyasannidhi .pooja-details-container .pd-meta-row {
     border-bottom-color: var(--sp-line);
   }
   #t-nithyasannidhi .pooja-details-container .pd-trait {
     background: var(--sp-cream);
   }
   /* stats read bronze, like the hero stats on the homepage */
   #t-nithyasannidhi .pooja-details-container .pd-stat-num {
     color: var(--sp-accent);
   }
   #t-nithyasannidhi .pooja-details-container .pd-stat-label {
     color: var(--sp-muted);
   }
   
   
   
   
   
   
   #t-nithyasannidhi .pooja-details-container .pd-stat-num {
   
     align-items: flex-start;
   
   }
   
   
   #t-nithyasannidhi .pooja-details-container .pd-stat-num img{
   width: 15px;
   height: 15px;
   }
   
   
   #t-nithyasannidhi .pooja-details-container .pd-price-discound {
   
     border-radius: var(--sp-radius-btn);
   }
   
   
   
   /* 14.6 the WhatsApp / Call CTAs are deliberately LEFT alone (Chandu): green and
      blue carry the channel meaning, and flattening them to bronze would lose it. */
   
   /* ---------- 15. shape & elevation language (site-wide, Chandu) ----------
      Colour and type already moved away from the vedamandir template; the SHAPE
      language had not, and that is what still made the two feel like one product.
      Four moves, all from existing tokens — no new colours:
        15.1  panels drop their soft 14-24px corners for ONE crisp radius
        15.2  cards stop floating — a warm 1px rule instead of a shadow
        15.3  every section heading carries the same short bronze rule
        15.4  every button speaks one shape instead of pill-vs-block          */
   #t-nithyasannidhi {
     /* ONE corner for the whole site — cards AND buttons (Chandu). This is the
        single number to change; every border-radius in this file resolves to it.
        --sp-radius-btn used to be its own 8px; it is now an ALIAS so the ~17 rules
        already written against it did not all have to be rewritten, and so buttons
        can be split back off later by giving this line a value of its own.
        Chips, badges and status pills keep their 999px, and icon roundels keep
        their 50% — see the note in section 21. */
     --sp-radius: 6px;
     --sp-radius-btn: var(--sp-radius);
     --sp-rule-w: 48px;
     --sp-rule-h: 3px;
     /* 15.2 kill the float at the token, so every rule that reads these follows */
     --sp-shadow-card: none;
     --sp-shadow-card-hover: none;
   }
   /* the details page defines its own elevation scale on itself */
   #t-nithyasannidhi .pooja-details-container,
   #t-nithyasannidhi .pujas-page {
     --shadow-sm: none;
     --shadow-md: none;
     --shadow-lg: none;
   }
   
   /* 15.1 one corner for every panel and card */
   #t-nithyasannidhi :is(.puja-card, .qcard, .faq-item, .gallery-item, .hero-card,
     .puja-date-place, .pd-card, .pd-step-card, .pd-receive-card, .pd-faq-item,
     .puja-details-card, .pd-media, .pd-gallery-cell, .pd-trust, .pd-trust-item,
     .pd-trait, .pd-advisor) {
     border-radius: var(--sp-radius);
     box-shadow: none;
   }
   /* these were given their own radius earlier in the file, so they need a rule of
      equal weight to be re-pointed rather than a blanket one */
   #t-nithyasannidhi .faq .container,
   #t-nithyasannidhi .pujas-page .puja-search-field,
   #t-nithyasannidhi .pooja-details-container .pd-card-head {
     border-radius: var(--sp-radius);
     box-shadow: none;
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-step-card {
   
     padding: 0;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* 15.3 the signature: a short bronze rule under every section heading.
      Painted as a background image, NOT ::after — `.display` is a flex container
      in the base, so a pseudo-element would sit BESIDE the text instead of under
      it. A background keeps working whatever the display type is. */
   #t-nithyasannidhi .pujas .display,
   #t-nithyasannidhi .faq-head .display,
   #t-nithyasannidhi .pujas-page .puja-list-title,
   #t-nithyasannidhi .pooja-details-container .pd-section-title {
     background-image: linear-gradient(var(--sp-accent), var(--sp-accent));
     background-repeat: no-repeat;
     background-size: var(--sp-rule-w) var(--sp-rule-h);
     background-position: left bottom;
     padding-bottom: 14px;
   }
   /* the gallery heading is centred, so its rule is too */
   #t-nithyasannidhi .gallerytext {
     background-image: linear-gradient(var(--sp-accent), var(--sp-accent));
     background-repeat: no-repeat;
     background-size: var(--sp-rule-w) var(--sp-rule-h);
     background-position: center bottom;
     padding-bottom: 18px;
   }
   
   
   #t-nithyasannidhi .pujas-head {
   
     margin-bottom: 2rem;
   }
   
   
   
   
   
   
   
   
   
   /* 15.4 one button shape everywhere — the homepage CTA's block, not the
      base's 999px pill. Chips and badges are NOT buttons and keep their pill. */
   #t-nithyasannidhi :is(.pill-btn, .book-btn, .view-all-pill, .pd-notify-discound,
     .pd-help-btn, .puja-btn-clear, .puja-btn-apply),
   #t-nithyasannidhi .pujas-page .puja-search-go {
     border-radius: var(--sp-radius-btn);
   }
   
   /* ---------- 16. TRIAL: one card per section (details page) ----------
      Chandu: Benefits / Process / What You Get / FAQ each showed a grid of small
      cards, so four sections stacked up as ~14 separate boxes. Here the SECTION
      WRAPPER becomes the single card and the items inside lose their own chrome.
      Column lists get a hairline between rows; the two grids keep their columns
      and are simply held by one outer card.
      TO REVERT: delete this whole section 16 block — nothing else references it. */
   #t-nithyasannidhi .pooja-details-container :is(.pd-benefits, .pd-timeline, .pd-receive, .pd-faq-list) {
     background: var(--sp-white);
     border: 1px solid var(--sp-cream);
     border-radius: var(--sp-radius);
     padding: 22px 24px;
   }
   
   /* the items are now rows inside that card, not cards themselves */
   #t-nithyasannidhi .pooja-details-container :is(.pd-benefit, .pd-step-card, .pd-receive-card, .pd-faq-item) {
     background: transparent;
     border: none;
     border-radius: 0;
     box-shadow: none;
   }
   /* …and must not lift on hover any more, since there is no card to lift */
   #t-nithyasannidhi .pooja-details-container .pd-receive-card:hover,
   #t-nithyasannidhi .pooja-details-container .pd-benefit:hover {
     transform: none;
     box-shadow: none;
   }
   
   /* Benefits and What-You-Get shipped as `1fr 1fr` grids, so inside one card they
      read as a block of tiles rather than a list. Chandu: stack them, so all four
      sections share the same top-to-bottom rhythm. */
   #t-nithyasannidhi .pooja-details-container :is(.pd-benefits, .pd-receive) {
     grid-template-columns: 1fr;
     gap: 0;
   }
   
   /* single-column lists read better with a rule between rows */
   #t-nithyasannidhi .pooja-details-container .pd-faq-item + .pd-faq-item,
   #t-nithyasannidhi .pooja-details-container .pd-benefit + .pd-benefit,
   #t-nithyasannidhi .pooja-details-container .pd-receive-card + .pd-receive-card {
     border-top: 1px solid var(--sp-line);
   }
   /* with the tile padding gone the rows need their own breathing room */
   #t-nithyasannidhi .pooja-details-container :is(.pd-benefit, .pd-receive-card) {
     padding: 18px 0;
   }
   /* the "01 / 02" counter was pinned to the tile's top-right corner; as a row it
      belongs beside the heading, not floating over the divider */
   #t-nithyasannidhi .pooja-details-container .pd-receive-num {
     top: 18px;
     right: 0;
   }
   #t-nithyasannidhi .pooja-details-container .pd-faq-summary {
     padding-left: 0;
     padding-right: 0;
   }
   
   /* the highlighted final step keeps its bronze fill, but as an inset panel
      rather than a floating card */
   #t-nithyasannidhi .pooja-details-container .pd-step.is-core .pd-step-card {
     background: var(--sp-accent);
     border-radius: var(--sp-radius);
   }
   
   /* ---------- 17. account page (/account) ----------
      The account surfaces get their token set from the `brand-aliases` MIXIN
      (frontend/src/app/user/pages/_brand-aliases.scss), applied to `:host` AND
      `.account-page`. Same shadowing trick as `.vmv2` and `.pooja-details-container`
      — anything set on <body> never reaches it — so the remap below is the same
      move section 14 makes for the details page.
      TWO roots, not one: the sidebar is its OWN component (<app-account-sidebar>)
      and re-runs the mixin on its own :host, so a rule on `.account-page` alone is
      out-inherited inside it. Both are listed everywhere the tokens are set.
      Fonts need no work here — `#t-nithyasannidhi *` already re-points --serif/--sans
      (section 1b), which outranks the mixin's own declaration.
      SCOPE: this is /account. `/account/bookings` (.bookings-container) and the
      booking detail page (.spd-page) are separate roots with their own token sets —
      not touched here. */
   #t-nithyasannidhi :is(.account-page, app-account-sidebar) {
     --maroon: var(--sp-accent);
     --maroon-dk: var(--sp-accent-dark);
     --maroon-deep: var(--sp-accent-dark);
     --paper: var(--sp-white);
     --cream: var(--sp-cream);
     --cream-2: var(--sp-cream);
     --gold: var(--sp-accent);
     --gold-2: var(--sp-accent);
     --line: var(--sp-line);
     --ink: var(--sp-ink);
     --ink-soft: var(--sp-muted);
     --text: var(--sp-ink);
     --muted: var(--sp-muted);
     /* the account scale is its own (--shadow-sm/md/lg), so 15.2 can't reach it */
     --shadow-sm: none;
     --shadow-md: none;
     --shadow-lg: none;
   }
   
   /* 17.1 the --bp2-a* borders. These are a FIXED maroon alpha ramp pinned in
      styles.scss (`rgba(140, 14, 1, x)`) — NOT brand-driven, so they stay maroon on
      a bronze site no matter what admin sets. Same class of fix as 14.2's mint
      trust strips: the one off-palette thing on the page. */
   #t-nithyasannidhi :is(.account-sidebar, .account-logout, .account-text-btn, .account-nav-trigger) {
     border-color: var(--sp-cream);
   }
   
   /* 17.2 the rotating mandala watermark on the profile card — the SAME 200px png
      on a 40s infinite spin that 14.4 removed from the details card, for the same
      reason: it is the loudest "vedamandir template" tell, and it animates forever. */
   #t-nithyasannidhi .account-profile::after {
     display: none;
   }
   
   /* the avatar ring is a hardcoded pink (#F3D9D1) that reads cool against bronze */
   #t-nithyasannidhi .account-avatar {
     border-color: var(--sp-cream);
   }
   
   /* 17.3 stat tiles. Base ships three pastels — pink #FBEDE9, cream #FBF2DD,
      sage #EAF3EC — with a matching icon colour each. They are CATEGORY tiles, not
      status, so the colours carry no meaning to lose (unlike the WhatsApp/Call CTAs
      left alone in 14.6). Folded onto the theme's own two surfaces.
      TO RESTORE THE TRI-COLOUR: delete this 17.3 block only. */
   #t-nithyasannidhi :is(.account-stat.pink, .account-stat.sage) {
     background: var(--sp-cream);
   }
   
   #t-nithyasannidhi .account-stat.cream {
     background: var(--sp-tint);
   }
   
   #t-nithyasannidhi :is(.account-stat.pink, .account-stat.cream, .account-stat.sage) .account-stat-ic {
     color: var(--sp-accent);
   }
   
   /* these two read --brand-primary DIRECTLY rather than through --maroon, so the
      remap above misses them */
   #t-nithyasannidhi :is(.account-stat-arrow, .account-login-btn) {
     background: var(--sp-accent);
   }
   
   #t-nithyasannidhi .account-login-btn:hover {
     background: var(--sp-accent-dark);
   }
   
   /* 17.4 shape + elevation, matching section 15. The account blocks carry their
      own 12-18px corners and lift on hover; with the shadow tokens zeroed above,
      a hover lift moves a card that has nothing to lift with (same reasoning as 16). */
   #t-nithyasannidhi :is(.account-profile, .account-stat, .account-activity-card,
     .account-login, .account-sidebar, .account-nav-item, .account-nav-trigger,
     .account-logout, .account-activity-img, .account-activity-date, .account-edit-input) {
     border-radius: var(--sp-radius);
   }
   
   #t-nithyasannidhi :is(.account-stat, .account-activity-card, .account-logout,
     .account-add-btn, .account-edit-save, .account-login-btn):hover {
     transform: none;
     box-shadow: none;
   }
   
   /* 15.4's one button shape — the account buttons are the base's 999px pills */
   #t-nithyasannidhi :is(.account-add-btn, .account-text-btn, .account-login-btn,
     .account-edit, .account-edit-cancel, .account-edit-save) {
     border-radius: var(--sp-radius-btn);
   }
   
   /* the active sidebar tab is a solid bronze block, so its label and glyph both
      have to invert — base only handles the <img> case */
   #t-nithyasannidhi .account-nav-item.is-on {
     background: var(--sp-accent);
     color: var(--sp-white);
   }
   
   /* 17.5 section headings carry the same treatment as every other heading on the
      site: theme ink, and the 15.3 bronze rule under the title. */
   #t-nithyasannidhi :is(.account-section-title, .account-sub-title, .account-login-title) {
     color: var(--sp-ink);
   }
   
   #t-nithyasannidhi .account-section-title {
     background-image: linear-gradient(var(--sp-accent), var(--sp-accent));
     background-repeat: no-repeat;
     background-size: var(--sp-rule-w) var(--sp-rule-h);
     background-position: left bottom;
     padding-bottom: 12px;
   }
   
   
   #t-nithyasannidhi .pooja-details-container .pd-step:last-child .pd-step-card{
     padding: 10px;
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-step.is-core .pd-step-card h4 {
     color: #fff7ee;
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-temple-body.is-loaded:after{
     display: none;
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-receive-card {
         display: flex;
           align-items: center;
           gap: 1rem;
   }
   
   
   #t-nithyasannidhi .pooja-details-container .pd-receive-ic {
   
     margin-bottom: 0;
   }
   
   #t-nithyasannidhi .flower-pic{
     display: none;
     
   }
   
   #t-nithyasannidhi .flower-pic img{
         filter: brightness(0) saturate(100%) invert(44%) sepia(43%) saturate(1137%) hue-rotate(352deg) brightness(94%) contrast(89%);
   }
   
   
   
   
   #t-nithyasannidhi .account-wallet-card:after{
     display: none;
   }
   
   /* ---------- 18. mobile pass ----------
      WHY THIS SECTION EXISTS: every rule in this file is id-prefixed
      (#t-nithyasannidhi = 0,1,1,0), so it outranks the base component's OWN media
      queries (0,0,1,0) at EVERY width — including the mobile ones the base already
      got right. Four places where a desktop-shaped theme rule silently un-did base's
      mobile handling are corrected here, plus the type that never stepped down.
      Nothing new is designed here; this only restores mobile behaviour the theme
      was overriding. TO REVERT: delete this whole section 18 block.
      Sections 16 (details one-card) and 17 (account) need nothing — 17 only changes
      colour/radius/shadow and rides base's own 1024/768/576 breakpoints. */
   @media (max-width: 768px) {
   
     /* 18.1 journey — section 5 pins `padding: 80px` with no breakpoint; base drops
        to `30px 0` here. At 430 the 80px sides ate 160px (37% of the viewport) and
        squeezed the step rail to 270px. */
     #t-nithyasannidhi .journey {
       padding: 30px 18px;
     }
   
     /* 18.2 journey steps — base keeps `repeat(4, 1fr)` at this width, which is fine
        for its own STACKED step (icon above label). Section 5 turns each step into a
        ROW (icon left, label right), and a row does not fit a ~107px column at 430.
        Two columns gives the row ~200px to work in and keeps the mockup's layout. */
     #t-nithyasannidhi .journey-steps {
       grid-template-columns: repeat(2, 1fr);
       row-gap: 18px;
     }
   
     #t-nithyasannidhi .jstep-num {
       width: 44px;
       height: 44px;
     }
   
     /* 18.3 hero — `.hero{92%}` and `.hero-inner{min(1280px,88%)}` COMPOUND to 81% of
        the viewport, so at 430 about 40px died on each side while every section below
        ran wider. Base used width:100% + 18px padding on mobile; section 4 zeroed that
        padding to hold a true 4% margin, which is a desktop intent. Full-bleed here.
        border-box so the 18px sits INSIDE the 100% instead of overflowing it. */
     #t-nithyasannidhi .hero, #t-nithyasannidhi .faq {
       width: 100%;
     }
   
     #t-nithyasannidhi .hero .hero-inner {
       box-sizing: border-box;
       width: 100%;
       padding-left: 18px;
       padding-right: 18px;
     }
   
     /* 18.4 type — section 4 pins the headline at 40px unconditionally, which beats
        base's mobile `clamp(34px, 4.6vw, 54px)`; the FAQ and journey headings never
        stepped down at all. */
     #t-nithyasannidhi .hero-title,
     #t-nithyasannidhi .hero-title .line-a,
     #t-nithyasannidhi .hero-title .line-b {
       font-size: 30px;
       letter-spacing: -0.3px;
     }
   
     #t-nithyasannidhi .faq-head .display {
       font-size: 28px;
       letter-spacing: -0.5px;
     }
   
     #t-nithyasannidhi .journey .display {
       font-size: 18px;
       padding: 0.8rem 0 1.4rem;
     }
   
   
   
   #t-nithyasannidhi .pujas-head {
     margin-bottom: 0rem;
   }
   
   
   
   
   
   
   
   
   
   
   
   }
   
   /* 18.5 gallery heading — DOCUMENTED !important EXCEPTION #2 (contract, top of file).
      Base pins `font-size: clamp(20vw, 4.5vw, 58px) !important` at <=1024. Those clamp
      args are swapped — the preferred value (4.5vw) is BELOW the minimum (20vw), so the
      clamp can only ever return the 20vw MINIMUM: 86px at a 430 viewport, 205px at 1024.
      Base hides that behind a 5%-opacity watermark; section 7 turns it into a real,
      opaque heading, so the bug became visible here first. !important is the only thing
      that reaches an !important, hence the exception. Breakpoint matches base's.
      The proper fix is the swapped clamp in landing-page.component.scss — that is a
      MAIN-SITE change, so it is deliberately not made from this file. */
   @media (max-width: 1024px) {
     #t-nithyasannidhi .gallerytext {
       font-size: clamp(26px, 5vw, 40px) !important;
     }
   }
   
   /* ---------- 18.6 puja details — mobile type scale (Chandu) ----------
      The details page carries desktop sizes into mobile almost untouched: base only
      steps .pd-title (25px), .pd-lead and the sticky price bar at <=1024, and
      .pd-section-title at <=640 — everything else keeps its desktop size at 430.
      Section 16 makes that worse on purpose: benefits / process / what-you-get / FAQ
      became ROWS inside one card, and a 22px row title is a heading-sized line in a
      list. This steps the reading type down; it does not re-lay anything out.
      DELIBERATELY NOT TOUCHED — the money. .pd-price-amt, .pd-sticky-price and
      .pd-mb-amt stay at their base sizes: the sticky booking bar is the page's whole
      job on a phone, and base already tuned that bar at <=1024. */
   @media (max-width: 768px) {
   
     /* the temple name never steps — 26px is the single largest line left at 430 */
     #t-nithyasannidhi .pooja-details-container .pd-temple-name {
       font-size: 20px;
     }
   
     /* base drops this to 24px only at <=640, so the 641-768 band still renders the
        full 35px desktop size */
     #t-nithyasannidhi .pooja-details-container .pd-section-title {
       font-size: 22px;
     }
   
     /* base's own <=1024 value is 25px; a touch smaller reads better beside the
        20px temple name above it */
     #t-nithyasannidhi .pooja-details-container .pd-title {
       font-size: 22px;
     }
   
     /* the section-16 row titles: 22 / 22 / 21px, all list rows now */
     #t-nithyasannidhi .pooja-details-container :is(.pd-benefit, .pd-step-card, .pd-receive-card, .pd-advisor) h4 {
       font-size: 17px;
     }
   
     /* the "01 / 02" counter is set to 26px to sit as a tile corner-number; as a row
        marker beside a 17px title it only needs to be legible */
     #t-nithyasannidhi .pooja-details-container .pd-receive-num {
       font-size: 18px;
     }
   
     /* the two delivery/booking headings inside the body copy */
     #t-nithyasannidhi .pooja-details-container :is(.bookpuja-text, .pd-deliver) {
       font-size: 18px;
     }
   
     #t-nithyasannidhi .pooja-details-container .pd-card-head h3 {
       font-size: 17px;
     }
   
     /* body copy + the FAQ question rows come down one step, not two — these were
        already close to right */
     #t-nithyasannidhi .pooja-details-container :is(.pd-faq-summary, .pd-benefit p, .pd-receive-card p, .pd-step-card p) {
       font-size: 14px;
     }
   }
   
   /* ---------- 19. puja details — the hero block (.main-pooja-details) ----------
      Sections 14-16 themed the BODY of the details page and left the hero on base
      styling, so the media slider + booking column were the last region still
      speaking the vedamandir template. Four fixes (Chandu):
        19.1  the --bp-a* maroon leak        (a real bug, not a taste call)
        19.2  the package selector           (the page's conversion control)
        19.3  the gallery dots + arrows
        19.4  radius, so the hero stops being the last 8px region on the page
      TO REVERT: delete this whole section 19 block. */
   
   /* 19.1 THE MAROON LEAK. The countdown boxes read --bp-a04 / --bp-a19 and the
      selected package reads --bp-a08. That ramp is pinned in styles.scss as
      `rgba(139, 14, 1, x)` — a FIXED maroon, not brand-driven — so these render
      maroon-tinted on a bronze site whatever admin sets. Identical leak to the one
      fixed on the account page in 17.1, same fix. */
   #t-nithyasannidhi .pooja-details-container .pd-clock-box {
     background: var(--sp-tint);
     border-color: var(--sp-cream);
     border-radius: var(--sp-radius);
   }
   
   /* reads --brand-primary DIRECTLY, so 14's --maroon remap never reaches it */
   #t-nithyasannidhi .pooja-details-container .pd-clock-num {
     color: var(--sp-accent);
   }
   
   /* 19.2 PACKAGE SELECTOR. Unselected carried `2px solid rgba(51,51,51,0.12)` — a
      COOL grey on warm paper, the same mismatch 14.4 fixed for every other card. */
   #t-nithyasannidhi .pooja-details-container .pd-package-card {
     border: 2px solid var(--sp-line);
     border-radius: var(--sp-radius);
   }
   
   /* selected = BORDER ONLY, no fill (Chandu). The base tint (--bp-a08) is the
      maroon leak from 19.1, so it is explicitly cleared rather than re-tinted.
      Selector mirrors base's exactly so the id prefix is the only thing that
      differs — base is `.pd-package-option input[type="radio"]:checked + .pd-package-card`. */
   #t-nithyasannidhi .pooja-details-container .pd-package-option input[type="radio"]:checked + .pd-package-card {
     border-color: var(--sp-accent);
     background: var(--sp-white);
   }
   
   /* with no fill behind it, the tick and the price carry the whole selected signal */
   #t-nithyasannidhi .pooja-details-container .pd-package-option input[type="radio"]:checked + .pd-package-card .pd-package-radio-indicator {
     border-color: var(--sp-accent);
     background: var(--sp-accent);
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-package-option input[type="radio"]:checked + .pd-package-card .pd-package-price {
     color: var(--sp-accent);
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-package-option input[type="radio"]:checked + .pd-package-card .pd-package-badge {
     background: var(--sp-accent);
   }
   
   /* the card lifts + drops a shadow on hover; 15.2 flattened everything else */
   #t-nithyasannidhi .pooja-details-container .pd-package-card:hover {
     transform: none;
     box-shadow: none;
     border-color: var(--sp-cream);
   }
   
   /* 19.3 GALLERY CHROME. Dots were #a9a9a9 -> #fff, with no relation to the
      palette. They sit ON the imagery, so the IDLE dot stays white-with-alpha (a
      tan idle dot disappears on a light photo) and only the active one goes bronze. */
   #t-nithyasannidhi .pooja-details-container .pd-media-dot {
     background: rgba(255, 255, 255, 0.55);
   }
   
   #t-nithyasannidhi .pooja-details-container .pd-media-dot.active {
     background: var(--sp-accent);
   }
   
   /* the arrows were the LAST floating element in the hero — white circles on a
      `0 2px 10px rgba(0,0,0,.25)` shadow, after 15.2 flattened the whole site.
      They stay round: 15.4 squares BUTTONS, and a slider arrow is a control, the
      same reasoning that leaves chips and badges on their pill. */
   #t-nithyasannidhi .pooja-details-container .pd-media-arrow {
     background: var(--sp-white);
     border: 1px solid var(--sp-cream);
     box-shadow: none;
   }
   
   /* 19.4 anything in the hero still carrying its own corner */
   #t-nithyasannidhi .pooja-details-container :is(.pd-media-slide, .pd-meta, .pd-countdown-copy) {
     border-radius: var(--sp-radius);
   }
   
   /* ---------- 20. support page (/account/support) ----------
      Root is `.account-page`, so section 17's token remap already reaches it — but
      the page ships its OWN cards (it is the contact-us component, not an account-*
      one), and 17.4 never listed them. Seven corners, all different: 16 / 12 / 14 /
      16 / 11 / 999 / 12. Folded onto the one radius, same as everywhere else. */
   #t-nithyasannidhi :is(.account-help-card, .account-help-ic, .account-faq-item,
     .account-ticket, .account-input, .account-ticket-success) {
     border-radius: var(--sp-radius);
   }
   
   /* the submit is a BUTTON, so it takes the button corner (15.4), not the panel one */
   #t-nithyasannidhi .account-submit {
     border-radius: var(--sp-radius-btn);
   }
   
   /* ---------- 21. account area — radius sweep (every remaining page) ----------
      Audited all 11 account routes. Corners in use across them: 20 / 18 / 16 / 14 /
      12 / 11 / 10 / 8 / 6 / 5px, plus pills and circles — ten different panel radii
      for one area. Section 20 did /account/support; this does the rest.
   
      THREE THINGS ARE DELIBERATELY LEFT ALONE:
        - `50%` circles — avatars, icon roundels, close buttons, step dots, check
          marks. These are circles by intent, not cards with a soft corner.
        - status pills (.pooja-completed / -pending / -in-progress / -refunded /
          -paused / -auto-pay-cancelled, 25px) — a status badge reads as a pill in
          every product; squaring them would make them look like buttons.
        - tags + chips (.account-address-tag, .account-addr-labelchip,
          .account-wallet-soon, .account-wallet-feat-tag, .sub-chip, .sub-vpill) —
          15.4 already says chips and badges keep their pill.
      NOT SWEPT: my-subscriptions has ~9 radii nested where the selector could not
      be attributed with confidence (deep nesting / media queries). Those keep their
      own corners — tell me if any of them still look off and I will name them by hand. */
   
   /* 21.1 panels + cards. NO comments inside the :is() list on purpose — :is() takes
      a FORGIVING selector list, so anything an engine cannot parse is dropped
      SILENTLY instead of erroring, and a silent partial failure is the worst kind
      to debug on a live tenant. The per-page breakdown lives here instead:
        bookings/subs  .booking-card .sub-card .sub-card-thumb .sub-step-media
                       .sub-video .video-list-item .delay-notice-content
                       .tooltip-content .delay-info .chapter-btn .chapter-icon
                       .collapse-btn .play-video-btn + the 3 skeleton shapes
        wishlist       .account-wish-card .account-wish-empty .account-wish-snackbar
                       .account-wish-undo .account-wish-snackbar-close
        saved address  .account-address-card .account-address-add .account-addr-empty
                       .account-addr-dialog
        about          .account-about-intro .account-feature .account-feature-ic
                       .account-about-stats .account-about-mission .account-about-entity
        language       .account-lang-note .account-lang-card .account-lang-native
        wallet         .account-wallet-card .account-wallet-chip .account-wallet-feat
                       .account-wallet-feat-ic
        all four       .account-secure                                            */
   #t-nithyasannidhi :is(.booking-card, .sub-card, .sub-card-thumb, .sub-step-media,
     .sub-video, .video-list-item, .delay-notice-content, .tooltip-content, .delay-info,
     .chapter-btn, .chapter-icon, .collapse-btn, .play-video-btn,
     .skeleton, .skeleton-booking-card, .skeleton-video,
     .account-wish-card, .account-wish-empty, .account-wish-snackbar, .account-wish-undo,
     .account-wish-snackbar-close,
     .account-address-card, .account-address-add, .account-addr-empty, .account-addr-dialog,
     .account-about-intro, .account-feature, .account-feature-ic, .account-about-stats,
     .account-about-mission, .account-about-entity,
     .account-lang-note, .account-lang-card, .account-lang-native,
     .account-wallet-card, .account-wallet-chip, .account-wallet-feat, .account-wallet-feat-ic,
     .account-secure) {
     border-radius: var(--sp-radius);
   }
   
   /* 21.2 form fields sit with the panels, not the buttons */
   #t-nithyasannidhi .account-addr-field input {
     border-radius: var(--sp-radius);
   }
   
   /* 21.3 buttons — these ship as 999px pills; 15.4 gives every button ONE shape.
      Kept separate from the chips above, which stay pills on purpose. */
   #t-nithyasannidhi :is(.account-wish-btn, .account-chip-btn, .account-addr-cancel,
     .action-required-btn, .sub-btn) {
     border-radius: var(--sp-radius-btn);
   }
   
   /* ---------- 22. CTA buttons — the last pills (Chandu) ----------
      15.4 squared the buttons it knew about; these were missed because they live in
      the header component and in the details page's own CTA set. Audited both:
      999px on .nav-wa / .share-btn / .pd-sticky-btn / .pd-mb-btn / .pd-advisor-btn,
      plus a scatter of one-off corners (70px, 20px, 16px, 8px).
   
      ICON BUTTONS STAY ROUND. .whatsapp-btn, .book-ic, .vm-ic-btn, the modal
      .nav-btn arrows and the mobile .share-btn are 50% circles holding a single
      glyph — a 6px corner on a 36px circle reads as a rendering bug, not a style.
      Same reasoning that keeps the slider arrows round in 19.3. */
   #t-nithyasannidhi :is(.nav-wa, .share-btn, .wishlist-btn, .read-more-btn,
     .pd-sticky-btn, .pd-mb-btn, .pd-advisor-btn, .pd-step-btn,
     .show-all-reviews-btn, .pay-later-book-btn, .select-payment-btn1) {
     border-radius: var(--sp-radius-btn);
   }
   
   /* the circles listed above win it back — they are matched by the same names in
      places where the element IS a round icon holder */
   #t-nithyasannidhi :is(.whatsapp-btn, .book-ic, .vm-ic-btn, .modal-navigation .nav-btn) {
     border-radius: var(--sp-radius-btn);
   }
   
   /* the mobile sticky bar is a PANEL, not a button — 22px against 6px everywhere
      else was the last odd corner on the details page */
   #t-nithyasannidhi .pd-sticky-bar {
     border-radius: var(--sp-radius);
   }
   
   /* ---------- 23. checkout / user-details-form (.variant-checkout-classic) ----------
      THE MONEY PATH. Everything here is colour, corner and font — no layout, no
      spacing, nothing that can move a control out from under a thumb. Verify the
      whole booking flow before trusting it.
   
      The checkout declares its OWN complete design system as --ck-* on
      `.variant-checkout-classic`, which makes this the cleanest remap on the site:
      re-point the tokens and the entire flow follows — shell, stepper, devotee
      details, prasadam, order summary, review, payment popup, safety strip.
      Its components run ViewEncapsulation.None, so the class names are global
      inside that wrapper and the id prefix reaches them.
   
      FONT NOTE: the component header warns that fonts are re-asserted with
      `!important` inside the variant. That comment is STALE — the rules at the
      bottom of checkout-classic.component.scss read `var(--ck-serif)` /
      `var(--ck-sans)` with no !important, so re-pointing the two tokens is enough. */
   #t-nithyasannidhi .variant-checkout-classic {
     --ck-maroon: var(--sp-accent);
     --ck-maroon-dk: var(--sp-accent-dark);
     --ck-orange: var(--sp-accent);
     --ck-orange-dk: var(--sp-accent-dark);
     --ck-orange-bar: var(--sp-accent);
     --ck-ink: var(--sp-ink);
     --ck-line: var(--sp-line);
     --ck-field: var(--sp-cream);
     --ck-card: var(--sp-white);
     --ck-card-line: var(--sp-line);
     --ck-peach: var(--sp-cream);
     --ck-peach-line: var(--sp-cream);
     --ck-radius: var(--sp-radius);
     --ck-radius-sm: var(--sp-radius);
     --ck-serif: var(--sp-serif);
     --ck-sans: var(--sp-sans);
     --ck-shadow: none;
     --ck-shadow-card: none;
   
     /* LEFT ALONE ON PURPOSE — do not "finish" this list:
        --ck-blue (#1d8af0), --ck-green (#2f9e54), --ck-green-soft, --ck-green-line
          carry MEANING on a payment screen: success ticks, the secure-payment strip,
          trust marks. Same rule that leaves the WhatsApp/Call CTAs alone in 14.6.
        --ck-ink-2 (#2a221d), --ck-muted (#7c7068), --ck-muted-2 (#9b9189)
          are the body-text ramp, and they are already warm neutrals that sit fine
          against bronze. --sp-muted is #2C1A17 — nearly ink — so folding them in
          would flatten three levels of hierarchy into one on the densest form in
          the product. Not worth it on the money path. */
   }
   
   /* 23.1 hardcoded corners the token remap cannot reach — panels, cards + fields */
   #t-nithyasannidhi :is(.ck-addr-dialog, .ck-addr-card, .ck-addr-addtile,
     .ck-country-search, .ck-country-item, .ck-nakshatram-option,
     .ck-order-date, .ck-rail-addr, .ck-rail-addr-add, .ck-prasadam-list, .ckp-lead,
     .ck-pay-qrreveal, .ck-pay-brand-amount) {
     border-radius: var(--sp-radius);
   }
   
   #t-nithyasannidhi :is(.ck-addr-field input, .ck-order-product img) {
     border-radius: var(--sp-radius);
   }
   
   /* 23.2 checkout buttons take the button corner (15.4) */
   #t-nithyasannidhi :is(.ck-update-cta, .ck-addr-cancel, .ck-addr-save, .ck-order-cta) {
     border-radius: var(--sp-radius-btn);
   }

   /* 23.3 the two checkout surfaces that ESCAPE the --ck-* remap above: both read
      --brand-primary straight from the admin config, so the designer's palette
      never reached them (the "Continue with Payment" button and the payment
      popup's brand panel). Point them at the palette like everything else. */
   #t-nithyasannidhi .ck-order-cta {
     background: var(--sp-accent);
   }
   #t-nithyasannidhi .ck-order-cta:hover {
     background: var(--sp-accent-dark);
   }
   #t-nithyasannidhi .ck-pay-brand {
     background: var(--sp-primary);
   }
   
   /* NOT touched: .ck-step-line (4px — a 4px-tall progress rail, not a panel),
      .ck-flag (2px — a 16px flag bitmap), and every 50% / 999px in the flow. */