, not , and in Telugu the emphasis falls on a
different word than the English mock — so this follows the CMS's own marker
rather than assuming the second line is always the bold one. */
#t-kailasamandir .jstep-label span {
color: #1a1410;
font-weight: 700;
}
/* The design draws no connector between steps. */
#t-kailasamandir .step-arrow {
display: none;
}
#te-text #t-kailasamandir .jstep-label {
line-height: 1.55;
}
#te-text #t-kailasamandir .journey .display {
letter-spacing: 0.06em;
font-size: 11px;
}
/* ---------------------------------------------------------------------------
PUJA CARD — wishlist + share (part of S5, landed early)
Boss (2026-08-11): keep BOTH buttons — the design mock omits them, but that
is a feature the mock predates, not a styling call — and lay them out
horizontally, side by side, in the card's top-right corner. The base stacks
them vertically (flex-direction: column), which is the only change needed.
------------------------------------------------------------------------ */
#t-kailasamandir .puja-acts {
flex-direction: row;
gap: 6px;
}
/* ---------------------------------------------------------------------------
PUJA CARD GRID (S5)
Measured: grid 4 across in the 960 container — card panel 231 wide, 12px gap
(4x231 + 3x12 = 960 exactly). Artwork inset 6px, 219x146 = exactly 3:2. Text
inset 12. Title ink #212121 at y992..1004, date y1012..1023, temple
y1030..1040, a 1px #D9D9D9 divider at y1050, then a 51px footer band with the
price left (#222222, struck compare in #95969A) and an outlined green
(#328616) "Book Puja" right.
NOTE — this themes the LISTING PAGES TOO, on purpose. /pujas, /packages and
/chadavas all render the same `.puja-card` / `.puja-img` / `.puja-foot`
classes, so scoping to #t-kailasamandir restyles the card wherever it appears
for this tenant. That is exactly the "same card in the list pages" Boss asked
for, with no component extraction.
------------------------------------------------------------------------ */
#t-kailasamandir .puja-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 24px;
}
#t-kailasamandir .puja-card {
padding: 6px;
border: 0;
border-radius: 10px;
background: #fff;
box-shadow: none;
overflow: hidden;
}
/* 3:2 + contain, never cover: 900x600 artwork with the pooja name baked in. */
#t-kailasamandir .puja-img {
aspect-ratio: 3 / 2;
border-radius: 6px;
overflow: hidden;
background: #f3ece8;
/* Explicit since .puja-card became a flex column (Netra, 2026-08-12): a flex
item's default `flex-shrink: 1` would let the artwork compress if content
ever exceeded the row height. It cannot today — the grid stretches every
card to the tallest — but this artwork carries BAKED-IN text, so a silent
squash would be unreadable rather than merely ugly. */
flex: 0 0 auto;
}
#t-kailasamandir .puja-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
#t-kailasamandir .puja-body {
padding: 0 6px;
}
/* The mock drops the ribbon and the blurb; the card is artwork, name, when,
where, price. Unlike the wishlist and share buttons (kept — Boss, 2026-08-11),
these are copy rather than function, so they go. Declared in
themes/_contracts/home.omissions.json. */
#t-kailasamandir .puja-yaga,
#t-kailasamandir .puja-desc {
display: none;
}
#t-kailasamandir .puja-name {
margin: 10px 0 0;
color: #212121;
font-size: 13px;
line-height: 1.35;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
}
#t-kailasamandir .puja-date-place {
display: flex;
/* The design lists WHEN before WHERE; the template emits temple first, so the
visual order is reversed here rather than by editing shared markup that the
listing pages also render. */
flex-direction: column-reverse;
justify-content: flex-end;
gap: 5px;
margin-top: 8px;
padding: 0;
border: 0;
background: none;
}
/* The base boxes each of these; the design leaves them as plain icon + text. */
#t-kailasamandir .puja-date,
#t-kailasamandir .puja-date.templename {
display: flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: #201f1b;
font-size: 10px;
line-height: 1.3;
}
/* The app ships these glyphs in full brand colour; the design's are small and
muted so the row reads as metadata, not as two more accents competing with
the price and the CTA. */
/* The base gives the plain date row `padding: 10px 12px` while the temple row
is reset elsewhere, so the two rows started at different x — the date sat 12px
further right than the temple beneath it (Boss, 2026-08-11). Re-stated at
card scope so it beats whatever was winning over the shared reset above. */
#t-kailasamandir .puja-card .puja-date,
#t-kailasamandir .puja-card .puja-date.templename {
padding: 0;
margin: 0;
width: auto;
align-self: flex-start;
}
#t-kailasamandir .puja-date img {
width: 11px;
height: 11px;
object-fit: contain;
filter: grayscale(1) opacity(0.55);
}
#t-kailasamandir .puja-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #d9d9d9;
}
#t-kailasamandir .puja-price {
display: flex;
align-items: baseline;
gap: 5px;
}
#t-kailasamandir .puja-amt {
display: inline-flex;
align-items: baseline;
gap: 5px;
color: #222;
font-size: 15px;
font-weight: 700;
}
/* The struck compare price is the FIRST span inside .puja-amt. */
#t-kailasamandir .puja-amt span {
color: #95969a;
font-size: 11px;
font-weight: 400;
text-decoration: line-through;
}
/* "Per Booking" is a second line in the base; the design has no room for it
beside a full-width button, and the price already reads per booking here. */
#t-kailasamandir .puja-per {
display: none;
}
/* Outlined green, not the base's filled maroon. */
#t-kailasamandir .book-btn {
padding: 0 12px;
height: 28px;
border: 1px solid #328616;
border-radius: 6px;
background: #fff;
color: #328616;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
#t-kailasamandir .book-btn:hover {
background: #f1f8ee;
}
/* The base pairs the label with an arrow chip; the design's button is text. */
#t-kailasamandir .book-btn .book-ic {
display: none;
}
#te-text #t-kailasamandir .puja-name {
line-height: 1.45;
font-weight: 600;
}
@media (max-width: 1024px) {
#t-kailasamandir .puja-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
#t-kailasamandir .puja-grid {
grid-template-columns: 1fr;
}
}
/* ===========================================================================
POOJA DETAILS (/pooja-details/:id)
===========================================================================
Presenter: pages/pooja-details/themes/kailasamandir/details/. Every class
here is `kmd-` (kailasamandir DETAILS) — `km-` is already taken by the home
theme and both sheets live under the same #t-kailasamandir scope, so a shared
name like .km-hero would have had the home rules bleeding onto this page.
MEASURED off the 4x export (5760px wide = exactly 4x a 1440 design), so every
number below is accurate to 0.25px. Page column x240..1200 (960). The hero is
a 563.25 / 27 / 342.75 grid, which ends at 1173 — that is the design, not a
rounding slip; the section rules below it run the full 960.
Type is fitted by INK WIDTH, not by cap height: the design was not drawn in
Plus Jakarta Sans, and PJS is ~5% narrower per em than whatever was used. Ink
width is what decides where a line ends and where it wraps, so it is the one
to match; that leaves glyphs ~5% shorter than the export, which is why the
sizes read as odd fractions. Line heights are taken from the export's own
measured line pitches, so vertical rhythm is unaffected.
Everything geometric is in `@media (min-width: 1025px)` at the bottom. Above
that block the page is a fluid single column: unlike the home theme, this
markup shares NO class names with the base page, so the base stylesheet
cannot lay it out below the desktop breakpoint — it has to stand alone.
------------------------------------------------------------------------ */
#t-kailasamandir .kmd-pd {
background: #fff;
}
/* The base page SCSS still ships (PoojaDetailsComponent keeps its styleUrls and
ViewEncapsulation.None), and this theme deliberately KEEPS the class hooks the
host TypeScript reaches for — .main-pooja-details, .tabs-container,
.pd-sticky-bar, .pd-mobile-bar, .pd-section. Those carry the base page's own
layout, which is not this design's. Neutralised here rather than by renaming
the hooks, because renaming them would break scroll-spy, the sticky bar and
the reveal observer. `#id + class` (1,1,0) outranks the base's (0,2,0). */
#t-kailasamandir .kmd-head {
display: block;
width: auto;
gap: 0;
}
#t-kailasamandir .kmd-tabs {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-top: 0;
z-index: auto;
}
#t-kailasamandir .kmd-page {
box-sizing: border-box;
width: min(960px, calc(100% - 32px));
margin: 0 auto;
padding-top: 12px;
}
/* Telugu supplies far fewer break opportunities than Latin, and `pooja_name` is
a TEXT column an admin can fill with anything — at 430px the title and the
blurb were running past the right edge of the column and being clipped by the
viewport. `break-word` (not `anywhere`) so intrinsic widths are unaffected. */
#t-kailasamandir .kmd-title,
#t-kailasamandir .kmd-short,
#t-kailasamandir .kmd-prose,
#t-kailasamandir .kmd-sec-h,
#t-kailasamandir .kmd-meta-place,
#t-kailasamandir .kmd-list-title,
#t-kailasamandir .kmd-list-desc,
#t-kailasamandir .kmd-stp-title,
#t-kailasamandir .kmd-stp-desc,
#t-kailasamandir .kmd-temple-name,
#t-kailasamandir .kmd-temple-p,
#t-kailasamandir .kmd-recv-text,
#t-kailasamandir .kmd-faq-text,
#t-kailasamandir .kmd-faq-a,
#t-kailasamandir .kmd-offer-title,
#t-kailasamandir .kmd-mb-close {
overflow-wrap: break-word;
word-break: break-word;
}
/* --- title + meta ------------------------------------------------------- */
#t-kailasamandir .kmd-title {
margin: 0;
color: #0d0c22;
font-size: 32.25px;
font-weight: 600;
line-height: 42px;
letter-spacing: 0;
}
/* Telugu vattus descend past a 42px (1.30) box at this size, so the title's ink
would collide with the meta row. 1.45 is the smallest leading that contains
them; per rule 7 a Telugu block being taller than the Latin mock is correct. */
#te-text #t-kailasamandir .kmd-title {
line-height: 46.75px;
}
/* --- pinned top bar (Boss, 2026-08-11) ----------------------------------
No bottom booking bar on this tenant. The title block scrolls normally and a
compact FIXED bar takes its place under the 61px site header; the sub-nav
pins below it. Fixed, not sticky-and-shrinking: a sticky block that changes
height also changes its slot in the flow, and the page below would jump. */
#t-kailasamandir .kmd-stick-sentinel {
height: 0;
}
#t-kailasamandir .kmd-pinned {
position: fixed;
top: 61px;
left: 0;
right: 0;
z-index: 30;
background: #fff;
box-shadow: 0 6px 14px -12px rgba(0, 0, 0, 0.55);
transform: translateY(-100%);
visibility: hidden;
transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
#t-kailasamandir .kmd-pinned.is-on {
transform: none;
visibility: visible;
transition: transform 0.2s ease, visibility 0s;
}
#t-kailasamandir .kmd-pinned-in {
display: flex;
align-items: center;
gap: 20px;
box-sizing: border-box;
width: min(960px, calc(100% - 32px));
min-height: 36px;
margin: 0 auto;
padding: 9px 0;
}
#te-text #t-kailasamandir .kmd-pinned-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: #0d0c22;
font-size: 15.15px;
font-weight: 600;
line-height: 22px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* In the DOM from first paint so the bar needs no reflow when it appears; it is
simply not shown until the hero CTA is gone. */
#t-kailasamandir .kmd-topcta {
display: none;
}
#te-text #t-kailasamandir .kmd-pinned.has-cta .kmd-topcta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 36px;
padding: 0 18px;
border: 0;
border-radius: 6px;
background: #318616;
color: #fff;
font-size: 12.23px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
cursor: pointer;
}
#te-text #t-kailasamandir .kmd-pinned.has-cta .kmd-topcta:hover {
background: #2a7413;
}
#te-text #t-kailasamandir .kmd-pinned.has-cta .kmd-topcta:disabled {
background: #9db99a;
cursor: not-allowed;
}
#t-kailasamandir .kmd-meta {
display: flex;
align-items: center;
gap: 10px;
/* 23.75 in the export is measured from the meta's last INK to the card. The
Telugu date descends further than the Latin original, so the box margin is
the export's gap plus that overshoot. */
margin-top: 25.25px;
}
#t-kailasamandir .kmd-meta-ic {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #e8e8e8;
}
#t-kailasamandir .kmd-meta-ic img {
width: 15px;
height: 15px;
object-fit: contain;
}
#t-kailasamandir .kmd-meta-body {
flex: 0 1 auto;
display: flex;
flex-direction: column;
gap: 4.5px;
padding-top: 1.5px;
}
#te-text #t-kailasamandir .kmd-meta-place {
color: #0d0c22;
font-size: 12.1px;
font-weight: 600;
line-height: 1.3;
}
#t-kailasamandir .kmd-meta-when {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8.75px;
}
#te-text #t-kailasamandir .kmd-meta-date {
color: #4daa57;
font-size: 10.5px;
font-weight: 600;
line-height: 1.3;
}
#te-text #t-kailasamandir .kmd-meta-ist,
#te-text #t-kailasamandir .kmd-meta-note {
color: #6e6d7a;
font-size: 10.5px;
font-weight: 500;
line-height: 1.3;
}
/* --- hero --------------------------------------------------------------- */
#t-kailasamandir .kmd-hero {
margin-top: 23.75px;
}
/* The 900x600 creative already carries its ribbon and its orange temple strip,
so the card is exactly the artwork at its own 3:2 — nothing is overlaid and
nothing may be cropped, or the baked-in Telugu loses its edges. */
#t-kailasamandir .kmd-art {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
border-radius: 6px;
background: #fff;
}
@supports not (aspect-ratio: 3 / 2) {
#t-kailasamandir .kmd-art {
height: 0;
padding-bottom: 66.667%;
}
}
#t-kailasamandir .kmd-art-track {
display: flex;
position: absolute;
inset: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
#t-kailasamandir .kmd-art-track::-webkit-scrollbar {
display: none;
}
#t-kailasamandir .kmd-art-slide {
flex: 0 0 100%;
scroll-snap-align: start;
height: 100%;
}
#t-kailasamandir .kmd-art-img,
#t-kailasamandir .kmd-art-video,
#t-kailasamandir .kmd-art-video video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#t-kailasamandir .kmd-art-video {
position: relative;
}
#t-kailasamandir .kmd-art-sound {
position: absolute;
right: 10px;
bottom: 10px;
display: inline-flex;
padding: 5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
cursor: pointer;
}
#t-kailasamandir .kmd-art-arrow {
position: absolute;
top: 50%;
width: 29px;
height: 29px;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
cursor: pointer;
}
#t-kailasamandir .kmd-art-arrow.prev { left: 8px; }
#t-kailasamandir .kmd-art-arrow.next { right: 8px; }
#t-kailasamandir .kmd-art-arrow img { width: 11px; height: 11px; }
#t-kailasamandir .kmd-art-arrow.prev img { transform: rotate(90deg); }
#t-kailasamandir .kmd-art-arrow.next img { transform: rotate(-90deg); }
#t-kailasamandir .kmd-art-dots {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
display: flex;
justify-content: center;
gap: 5px;
}
#t-kailasamandir .kmd-art-dot {
width: 5px;
height: 5px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
}
#t-kailasamandir .kmd-art-dot.active { background: #fff; }
/* No artwork uploaded: the frame stays and says so. Never a stand-in image. */
#t-kailasamandir .kmd-art-missing {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #d3d3d3;
border-radius: 6px;
color: #6e6d7a;
font-size: 12px;
}
/* --- hero right rail ---------------------------------------------------- */
#te-text #t-kailasamandir .kmd-sec-h {
margin: 0;
color: #333;
font-size: 15.15px;
font-weight: 600;
line-height: 1.35;
}
#te-text #t-kailasamandir .kmd-prose,
#te-text #t-kailasamandir .kmd-prose p,
#te-text #t-kailasamandir .kmd-prose span,
#te-text #t-kailasamandir .kmd-prose div,
#te-text #t-kailasamandir .kmd-prose li {
color: #727272;
font-size: 10.5px;
font-weight: 400;
line-height: 19px;
}
/* Hero blurb: short_description, whole, never clamped — it is already short. */
#te-text #t-kailasamandir .kmd-short {
margin: 9.5px 0 0;
color: #727272;
font-size: 10.5px;
font-weight: 400;
line-height: 19px;
}
#t-kailasamandir .kmd-prose {
margin-top: 9.5px;
/* The export truncates About to four lines with an ellipsis; Read More opens
it. -webkit-line-clamp is the only cross-browser way to clamp rendered
lines, and it degrades to "show everything" rather than to a clipped word. */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
#t-kailasamandir .kmd-prose.is-open {
display: block;
overflow: visible;
}
#te-text #t-kailasamandir .kmd-more {
margin-top: 6px;
padding: 0;
border: 0;
background: none;
color: #318616;
font-size: 10.5px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
}
#t-kailasamandir .kmd-traits {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin-top: 10px;
}
#te-text #t-kailasamandir .kmd-trait-k {
color: #6e6d7a;
font-size: 9.5px;
font-weight: 500;
}
#te-text #t-kailasamandir .kmd-trait-v {
margin-left: 5px;
color: #2c1a17;
font-size: 10.5px;
font-weight: 600;
}
/* --- muhurat countdown --------------------------------------------------- */
#t-kailasamandir .kmd-cd {
margin-top: 31.75px;
}
#t-kailasamandir .kmd-cd-eyebrow {
color: #333;
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.23px;
text-transform: uppercase;
}
/* The export sets this label in tracked-out Latin small caps. Telugu has no
case and its conjuncts break apart under that tracking, so the device does
not survive translation: size up slightly and drop most of the tracking. */
#te-text #t-kailasamandir .kmd-cd-eyebrow {
font-size: 9.6px;
line-height: 1.35;
letter-spacing: 0.35px;
}
#te-text #t-kailasamandir .kmd-cd-lead {
margin-top: 7px;
color: #333;
font-size: 11.86px;
font-weight: 600;
line-height: 1.3;
}
/* The first-cycle start line on package-details. It is a , so with no rule it
fell back to the UA's 16px + 1em margins inside a card whose lead is 11.86px
and eyebrow 9.6px. Muted note colour, matching the muhurat note's role in the
same rail. Both selectors carry the #te-text prefix or the Telugu rules would
outrank them. */
#t-kailasamandir .kmd-cd-start {
margin: 6px 0 0;
color: #6e6d7a;
font-size: 10.5px;
font-weight: 400;
line-height: 1.45;
}
#te-text #t-kailasamandir .kmd-cd-start {
font-size: 10.5px;
line-height: 1.5;
}
#t-kailasamandir .kmd-clock {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12.5px;
}
#t-kailasamandir .kmd-clock-box {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3.5px;
box-sizing: border-box;
width: 45px;
height: 42px;
border: 1px solid #d3d3d3;
border-radius: 6px;
background: #f7f7f7;
}
#te-text #t-kailasamandir .kmd-clock-box b {
color: #333;
font-size: 12.13px;
font-weight: 600;
line-height: 1;
}
#te-text #t-kailasamandir .kmd-clock-box i {
color: #646464;
font-size: 9.07px;
font-style: normal;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
}
/* The colon between two boxes: two 3.75px dots, 2px apart. */
#t-kailasamandir .kmd-clock-sep {
display: inline-flex;
flex-direction: column;
gap: 2px;
width: 3.75px;
}
#t-kailasamandir .kmd-clock-sep::before,
#t-kailasamandir .kmd-clock-sep::after {
content: '';
width: 3.75px;
height: 3.75px;
border-radius: 50%;
background: #000;
}
#t-kailasamandir .kmd-closed {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border: 1px solid #e4e0e1;
border-radius: 6px;
background: #faf9f7;
}
#te-text #t-kailasamandir .kmd-closed-h {
color: #2c1a17;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
}
#te-text #t-kailasamandir .kmd-closed-p {
color: #554c47;
font-size: 10.5px;
font-weight: 400;
line-height: 1.45;
}
/* --- platform stat strip --------------------------------------------------
Measured: two 1px dashed rules 35.25 below the clock and 11.75 above the CTA
row; between them three equal 83.25 columns with 22.75 gaps and 1px
separators — 3x83.25 + 4x22.75 + 2x1 = 342.75, the column width exactly. */
#t-kailasamandir .kmd-rule {
height: 0;
margin-top: 35.25px;
border-top: 1px dashed #d2d2d2;
}
#t-kailasamandir .kmd-stats {
display: flex;
align-items: stretch;
gap: 22.75px;
margin-top: 11.25px;
}
#t-kailasamandir .kmd-stats + .kmd-rule {
margin-top: 11.25px;
}
#t-kailasamandir .kmd-stat {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8.75px;
text-align: center;
}
#t-kailasamandir .kmd-stat-sep {
flex: 0 0 1px;
width: 1px;
background: #ccc;
}
#te-text #t-kailasamandir .kmd-stat-n {
display: inline-flex;
align-items: center;
gap: 4px;
color: #1a1410;
font-size: 12.2px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
#t-kailasamandir .kmd-stat-n img {
width: 15.25px;
height: 14.5px;
object-fit: contain;
}
#te-text #t-kailasamandir .kmd-stat-l {
color: #6b5c54;
font-size: 8.06px;
font-weight: 600;
line-height: 1.2;
}
/* The CTA row follows the second rule, not the countdown. */
#t-kailasamandir .kmd-rule + .kmd-cta-row {
margin-top: 11.75px;
}
/* --- tier picker (only when the pooja offers a real choice) --------------- */
#t-kailasamandir .kmd-tiers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 16px;
}
#t-kailasamandir .kmd-tier {
cursor: pointer;
}
#t-kailasamandir .kmd-tier input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#t-kailasamandir .kmd-tier-card {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border: 1px solid #e4e0e1;
border-radius: 6px;
background: #fff;
}
#t-kailasamandir .kmd-tier input:checked + .kmd-tier-card {
border-color: #318616;
background: #f5faf3;
}
#t-kailasamandir .kmd-tier-ic {
width: 22px;
height: 22px;
object-fit: contain;
}
#t-kailasamandir .kmd-tier-copy {
display: flex;
flex-direction: column;
gap: 1px;
}
#te-text #t-kailasamandir .kmd-tier-name {
color: #2c1a17;
font-size: 11px;
font-weight: 600;
}
#te-text #t-kailasamandir .kmd-tier-sub,
#te-text #t-kailasamandir .kmd-tier-price {
color: #554c47;
font-size: 10px;
font-weight: 500;
}
#te-text #t-kailasamandir .kmd-tier-price s {
margin-right: 4px;
color: #8c8987;
}
#t-kailasamandir .kmd-tier-badge {
position: absolute;
top: -7px;
right: 8px;
padding: 1px 6px;
border-radius: 999px;
background: #318616;
color: #fff;
font-size: 8.5px;
font-weight: 600;
}
/* --- CTA row ------------------------------------------------------------- */
#t-kailasamandir .kmd-cta-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 11.75px;
}
#t-kailasamandir .kmd-icon-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid #e7e7e9;
border-radius: 50%;
background: #fff;
color: #0d0c22;
cursor: pointer;
}
#t-kailasamandir .kmd-icon-btn.is-on {
color: #c2185b;
}
#t-kailasamandir .kmd-cta {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
box-sizing: border-box;
min-height: 45.25px;
padding: 0 14px;
border: 0;
border-radius: 6px;
background: #318616;
cursor: pointer;
}
#te-text #t-kailasamandir .kmd-cta,
#te-text #t-kailasamandir .kmd-cta span,
#te-text #t-kailasamandir .kmd-cta s {
color: #fff;
font-size: 12.23px;
font-weight: 600;
line-height: 1.3;
}
#te-text #t-kailasamandir .kmd-cta-was {
opacity: 0.72;
text-decoration: line-through;
}
#t-kailasamandir .kmd-cta.is-disabled {
background: #9db99a;
cursor: not-allowed;
}
#t-kailasamandir .kmd-cta:hover {
background: #2a7413;
}
#t-kailasamandir .kmd-skel {
display: inline-block;
width: 54px;
height: 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.35);
}
/* Sits in the meta row's empty right side, baseline-aligned with the temple
name (Boss, 2026-08-11). `margin-left: auto` rather than
justify-content on the parent, so the icon + text block keeps its own
left-alignment. */
#t-kailasamandir .kmd-help {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
margin-left: auto;
padding-left: 20px;
}
/* Real buttons, not links (Boss, 2026-08-11). 30px tall and 6px radius so they
read as siblings of the wishlist / bookmark buttons in the hero, which are
also 30px — the page has one button language, not two. */
#te-text #t-kailasamandir .kmd-help-btn {
display: inline-flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
min-height: 30px;
padding: 0 12px;
border: 1px solid #e4e0e1;
border-radius: 6px;
background: #fff;
color: #333;
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#te-text #t-kailasamandir .kmd-help-btn:hover {
border-color: #318616;
background: #f5faf3;
color: #318616;
}
#t-kailasamandir .kmd-help-btn img {
width: 13px;
height: 13px;
object-fit: contain;
}
/* The share widget's own trigger is hidden — the bookmark button opens it. */
#t-kailasamandir .kmd-share-embed { display: none; }
/* --- sub-nav ------------------------------------------------------------- */
#t-kailasamandir .kmd-tabs {
position: sticky;
/* 61 site header + 54 pinned top bar (9 + 22 line + 9, plus its 1px shadow
line rounding). Both are fixed heights, so this cannot drift. */
top: 115px;
z-index: 29;
display: flex;
gap: 8px;
margin-top: 41.25px;
padding-bottom: 22.5px;
border-bottom: 1px solid #e7e7e9;
overflow-x: auto;
scrollbar-width: none;
}
#t-kailasamandir .kmd-tabs::-webkit-scrollbar { display: none; }
/* Pinned, this row must be opaque or the page scrolls through it. The base
sheet's translucent + blurred treatment is overridden above. */
#t-kailasamandir .kmd-tabs {
background: #fff;
}
/* scrollToSection offsets by a fixed 110px; the two pinned bars are ~165, so
without this a jumped-to heading lands underneath them. */
#t-kailasamandir .pd-section {
scroll-margin-top: 175px;
}
#te-text #t-kailasamandir .kmd-tab {
flex: 0 0 auto;
padding: 5.5px 12.25px;
border: 0;
border-radius: 999px;
background: transparent;
color: #0d0c22;
font-size: 10.68px;
font-weight: 500;
line-height: 15.75px;
white-space: nowrap;
cursor: pointer;
}
/* Same `#te-text #t-…` prefix as the rule it overrides: the un-prefixed form
is (1,2,0) and loses to the (2,2,0) rule above, so the active pill silently
had no fill. Every state rule below carries the prefix for the same reason. */
#te-text #t-kailasamandir .kmd-tab.active {
background: #f8f7f4;
}
/* --- body sections ------------------------------------------------------- */
#t-kailasamandir .kmd-body {
padding-top: 36.75px;
}
#t-kailasamandir .kmd-sec + .kmd-sec,
#t-kailasamandir .kmd-offerings + .kmd-sec {
margin-top: 44px;
}
/* In the body the About prose runs the full column, so the four-line clamp the
hero needed would be wrong here — this is the section that holds the whole
text, with Read More for the rest. */
#t-kailasamandir .kmd-about-sec .kmd-prose {
display: block;
overflow: visible;
max-width: 720px;
}
/* Benefits ---------------------------------------------------------------- */
#t-kailasamandir .kmd-list {
margin: 0;
padding: 0;
list-style: none;
}
#t-kailasamandir .kmd-list-row {
display: grid;
grid-template-columns: 15.5px 1fr;
gap: 9.75px;
margin-top: 17px;
}
#t-kailasamandir .kmd-list-ic {
width: 15.5px;
height: 15.5px;
margin-top: 1px;
}
#t-kailasamandir .kmd-list-ic-disc { fill: #d6d6d6; }
#t-kailasamandir .kmd-list-ic-tick { fill: #333; }
#t-kailasamandir .kmd-list-body {
display: flex;
flex-direction: column;
gap: 9.25px;
}
#te-text #t-kailasamandir .kmd-list-title {
color: #2c1a17;
font-size: 12px;
font-weight: 600;
line-height: 1.25;
}
#te-text #t-kailasamandir .kmd-list-desc {
color: #554c47;
font-size: 10.5px;
font-weight: 400;
line-height: 1.4;
}
/* Procedure --------------------------------------------------------------- */
#t-kailasamandir .kmd-steps {
margin: 0;
padding: 0;
list-style: none;
}
#t-kailasamandir .kmd-stp {
position: relative;
display: grid;
grid-template-columns: 18.75px 1fr;
gap: 8px;
margin-top: 14.25px;
padding-bottom: 15px;
}
/* The connector runs from the circle to the next one, so the last step has none. */
#t-kailasamandir .kmd-stp::before {
content: '';
position: absolute;
top: 18.75px;
left: 8.6px;
width: 1.5px;
height: calc(100% - 18.75px + 14.25px);
background: #c2c2c2;
}
#t-kailasamandir .kmd-stp.is-last::before { display: none; }
#te-text #t-kailasamandir .kmd-stp-n {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 18.75px;
height: 18.75px;
border: 1px solid #5c5c5c;
border-radius: 50%;
background: #fff;
color: #5c5c5c;
font-size: 6.6px;
font-weight: 600;
line-height: 1;
}
#t-kailasamandir .kmd-stp-body {
display: flex;
flex-direction: column;
gap: 10.25px;
}
#te-text #t-kailasamandir .kmd-stp-title {
color: #2c1a17;
font-size: 12px;
font-weight: 600;
line-height: 1.25;
}
#te-text #t-kailasamandir .kmd-stp-desc {
color: #554c47;
font-size: 10.5px;
font-weight: 400;
line-height: 1.4;
}
/* Temple ------------------------------------------------------------------ */
#t-kailasamandir .kmd-temple {
display: grid;
grid-template-columns: 210px 1fr;
margin-top: 14.5px;
overflow: hidden;
border: 1px solid #e4e0e1;
border-radius: 12px;
background: #fff;
}
#t-kailasamandir .kmd-temple-media {
position: relative;
overflow: hidden;
background: #1a0807;
}
#t-kailasamandir .kmd-temple-track {
display: flex;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
#t-kailasamandir .kmd-temple-track::-webkit-scrollbar { display: none; }
#t-kailasamandir .kmd-temple-slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
#t-kailasamandir .kmd-temple-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The single-image branch (package-details: one temple_image_url, no media
track). It sits directly in .kmd-temple-media, not in a .kmd-temple-slide, and
carries the base's .media-image class — which this sheet does NOT style and the
base sheet no longer reaches, so without this rule it renders at its intrinsic
1200x800 and bursts the card. Same cover treatment as a slide. */
#t-kailasamandir .kmd-temple-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#t-kailasamandir .kmd-temple-body {
padding: 22px 20px 22px 19.5px;
}
#te-text #t-kailasamandir .kmd-temple-name {
margin: 0;
color: #2c1a17;
font-size: 13.67px;
font-weight: 600;
line-height: 1.25;
}
#te-text #t-kailasamandir .kmd-temple-loc {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
color: #554c47;
font-size: 9.35px;
font-weight: 500;
line-height: 1.3;
}
/* contain, not the default fill: these SVGs are 20x21 and 25x25, so a square
box would squash them by ~5%. */
#t-kailasamandir .kmd-temple-loc img {
width: 8px;
height: 8px;
object-fit: contain;
}
#te-text #t-kailasamandir .kmd-temple-p,
#te-text #t-kailasamandir .kmd-temple-p span,
#te-text #t-kailasamandir .kmd-temple-p p {
margin: 0;
color: #554c47;
font-size: 10.5px;
font-weight: 400;
line-height: 15.75px;
}
#t-kailasamandir .kmd-temple-p { margin-top: 11px; }
/* What you will receive ---------------------------------------------------- */
#t-kailasamandir .kmd-recv {
margin: 0;
padding: 0;
list-style: none;
}
#t-kailasamandir .kmd-recv-row {
display: grid;
grid-template-columns: 18.75px 1fr;
align-items: center;
gap: 8.5px;
margin-top: 15.5px;
}
#t-kailasamandir .kmd-recv-ic {
width: 18.75px;
height: 18.75px;
}
#t-kailasamandir .kmd-recv-disc { fill: #ccf1cc; }
#t-kailasamandir .kmd-recv-tick { stroke: #00ba00; }
#te-text #t-kailasamandir .kmd-recv-text {
color: #2c1a17;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
}
/* FAQs --------------------------------------------------------------------- */
#t-kailasamandir .kmd-faq {
margin-top: 8.75px;
overflow: hidden;
border: 1px solid #e4e0e1;
border-radius: 10px;
background: #fff;
}
#t-kailasamandir .kmd-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
box-sizing: border-box;
min-height: 48.25px;
padding: 10px 17.25px;
border: 0;
background: none;
text-align: left;
cursor: pointer;
}
#te-text #t-kailasamandir .kmd-faq-text {
color: #2c1a17;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
}
#t-kailasamandir .kmd-faq-mark {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 19.5px;
height: 19.5px;
border-radius: 50%;
background: #333;
color: #fff;
transition: transform 0.18s ease;
}
#t-kailasamandir .kmd-faq.is-open .kmd-faq-mark {
transform: rotate(45deg);
}
#t-kailasamandir .kmd-faq-a {
padding: 0 17.25px 14px;
}
#te-text #t-kailasamandir .kmd-faq-a p {
margin: 0;
color: #554c47;
font-size: 10.5px;
font-weight: 400;
line-height: 1.5;
}
/* Gallery ------------------------------------------------------------------ */
#t-kailasamandir .kmd-gal {
display: flex;
gap: 8.75px;
margin-top: 21.5px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
#t-kailasamandir .kmd-gal::-webkit-scrollbar { display: none; }
#t-kailasamandir .kmd-gal-cell {
flex: 0 0 auto;
width: 193.75px;
height: 193.75px;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 9px;
background: #f2f2f2;
scroll-snap-align: start;
cursor: pointer;
}
/* Gallery cells are square crops of rectangular photographs — the design crops
them too. This is NOT the 900x600 rule: those carry baked-in text and are
`contain`ed above; these are plain photos with nothing to lose at the edge. */
#t-kailasamandir .kmd-gal-cell img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Reviews (not in the mock; renders only when the pooja has showcase reviews) */
#t-kailasamandir .kmd-reviews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
margin-top: 16px;
}
#t-kailasamandir .kmd-review {
padding: 14px;
border: 1px solid #e4e0e1;
border-radius: 10px;
}
#te-text #t-kailasamandir .kmd-review-rate {
display: inline-flex;
align-items: center;
gap: 4px;
color: #2c1a17;
font-size: 11px;
font-weight: 600;
}
#t-kailasamandir .kmd-review-rate img { width: 12px; height: 12px; }
#te-text #t-kailasamandir .kmd-review-text {
margin: 8px 0 10px;
color: #554c47;
font-size: 10.5px;
font-weight: 400;
line-height: 1.5;
}
#t-kailasamandir .kmd-review-by {
display: flex;
align-items: center;
gap: 7px;
}
#t-kailasamandir .kmd-review-av {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
}
#te-text #t-kailasamandir .kmd-review-by span {
color: #2c1a17;
font-size: 10.5px;
font-weight: 600;
}
/* Chadhava offerings (this domain serves chadhavas too) --------------------- */
#t-kailasamandir .kmd-offer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 12px;
margin-top: 16px;
}
#t-kailasamandir .kmd-offer {
display: flex;
gap: 10px;
padding: 10px;
border: 1px solid #e4e0e1;
border-radius: 10px;
}
#t-kailasamandir .kmd-offer-media {
flex: 0 0 62px;
height: 62px;
overflow: hidden;
border-radius: 8px;
background: #f2f2f2;
}
#t-kailasamandir .kmd-offer-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
#t-kailasamandir .kmd-offer-copy {
flex: 1 1 auto;
min-width: 0;
}
#te-text #t-kailasamandir .kmd-offer-title {
color: #2c1a17;
font-size: 11.5px;
font-weight: 600;
}
#te-text #t-kailasamandir .kmd-offer-desc {
margin: 4px 0 0;
color: #554c47;
font-size: 10px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#te-text #t-kailasamandir .kmd-offer-desc.is-open {
display: block;
overflow: visible;
}
#te-text #t-kailasamandir .kmd-offer-badge {
display: inline-block;
margin-bottom: 3px;
padding: 1px 6px;
border-radius: 999px;
background: #f8f7f4;
color: #8c1a0e;
font-size: 9px;
font-weight: 600;
}
#t-kailasamandir .kmd-offer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
}
#te-text #t-kailasamandir .kmd-offer-price {
color: #2c1a17;
font-size: 11.5px;
font-weight: 600;
}
#te-text #t-kailasamandir .kmd-offer-add,
#te-text #t-kailasamandir .kmd-offer-more,
#te-text #t-kailasamandir .kmd-chip {
padding: 4px 10px;
border: 1px solid #318616;
border-radius: 999px;
background: #fff;
color: #318616;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
#te-text #t-kailasamandir .kmd-offer-more {
padding: 0;
border: 0;
text-decoration: underline;
}
#te-text #t-kailasamandir .kmd-chip.is-picked {
background: #318616;
color: #fff;
}
#t-kailasamandir .kmd-offer-choices {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
#t-kailasamandir .kmd-step {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 6px;
border: 1px solid #318616;
border-radius: 999px;
}
#te-text #t-kailasamandir .kmd-step-btn {
padding: 0;
border: 0;
background: none;
color: #318616;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
#te-text #t-kailasamandir .kmd-step-qty {
color: #2c1a17;
font-size: 11px;
font-weight: 600;
}
#te-text #t-kailasamandir .kmd-empty {
margin-top: 10px;
color: #6e6d7a;
font-size: 11px;
}
/* --- sticky + mobile bars -------------------------------------------------- */
#te-text #t-kailasamandir .kmd-mb-btn {
flex: 0 0 auto;
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 6px;
background: #318616;
color: #fff;
font-size: 12.23px;
font-weight: 600;
cursor: pointer;
}
#te-text #t-kailasamandir .kmd-mb-btn:disabled {
background: #9db99a;
cursor: not-allowed;
}
/* Desktop has no bottom bar at all — the pinned top bar carries the CTA. The
fixed card below is for the narrow layout, where the hero CTA is far up the
page and the pinned bar has no room for a button. */
#t-kailasamandir .kmd-mobile-cta { display: none; }
#t-kailasamandir .kmd-mb {
display: flex;
align-items: center;
gap: 12px;
}
#t-kailasamandir .kmd-mb-price {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
#te-text #t-kailasamandir .kmd-mb-amt {
color: #2c1a17;
font-size: 15px;
font-weight: 700;
}
#te-text #t-kailasamandir .kmd-mb-was {
margin-left: 6px;
color: #8c8987;
font-size: 11px;
}
#te-text #t-kailasamandir .kmd-mb-close {
color: #6e6d7a;
font-size: 10px;
}
/* ===== DESKTOP GEOMETRY (measured at 1440) ================================ */
@media (min-width: 1025px) {
#t-kailasamandir .kmd-hero {
display: grid;
grid-template-columns: 563.25px 342.75px;
gap: 27px;
align-items: start;
}
/* The right rail's first ink sits 16.75px below the card's top edge; the
heading's own half-leading accounts for the rest. */
#t-kailasamandir .kmd-side {
padding-top: 12.5px;
}
#t-kailasamandir .kmd-faq {
width: 654px;
}
/* The gallery block is inset 15px from the column in the export. */
#t-kailasamandir .kmd-gal-sec {
padding-left: 15px;
}
}
@media (max-width: 1024px) {
#t-kailasamandir .kmd-page {
padding-top: 8px;
}
/* Belt and braces: nothing on this page may produce a sideways scroll on a
phone. `clip`, not `hidden` — `hidden` would create a scroll container and
kill `position: sticky` for anything inside; on this breakpoint the sticky
bars are already off, but `clip` keeps that from becoming a trap later. */
#t-kailasamandir .kmd-pd {
overflow-x: clip;
}
/* No pinned title bar on a narrow viewport: the header there is the minimal
back bar, the fixed booking card at the bottom already carries the CTA, and
a second fixed strip would take a third of the screen. The sub-nav scrolls
with the page for the same reason. */
#t-kailasamandir .kmd-pinned {
display: none;
}
#t-kailasamandir .kmd-tabs {
position: static;
}
#t-kailasamandir .kmd-meta {
flex-wrap: wrap;
}
#t-kailasamandir .kmd-help {
width: 100%;
margin: 8px 0 0;
padding-left: 40px;
}
#t-kailasamandir .pd-section {
scroll-margin-top: 70px;
}
#te-text #t-kailasamandir .kmd-title {
font-size: 22px;
line-height: 30px;
}
#t-kailasamandir .kmd-hero {
display: flex;
flex-direction: column;
gap: 18px;
}
#t-kailasamandir .kmd-tabs {
margin-top: 24px;
padding-bottom: 14px;
}
#t-kailasamandir .kmd-body {
padding-top: 24px;
/* clears the fixed booking bar */
padding-bottom: 104px;
}
#t-kailasamandir .kmd-temple {
grid-template-columns: 1fr;
}
#t-kailasamandir .kmd-temple-media {
aspect-ratio: 16 / 9;
}
#t-kailasamandir .kmd-gal-cell {
width: 150px;
height: 150px;
}
/* Bottom booking bar — kept on narrow viewports (Boss, 2026-08-11), where the
hero CTA is far up the page. The base sheet paints .pd-mobile-bar maroon and
lays it out for its own markup; both are overridden here, because this theme
is white-surface + #318616 everywhere else and a maroon bar would be the one
off-brand element on the page. */
#t-kailasamandir .kmd-mobile-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: block;
border-top: 1px solid #e7e7e9;
background: #fff;
box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
transform: translateY(calc(-1 * var(--pd-cta-lift, 0px)));
}
#t-kailasamandir .kmd-mb {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
box-sizing: border-box;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: none;
}
/* Booking closed: there is no price block, so the Notify button takes the
row. The base sheet does this with `.pd-mobile-bar.is-closed` (0,3,0),
which loses to the rule above (1,1,0) — so the binding was dead until this
re-stated it at matching specificity. */
#t-kailasamandir .kmd-mb.is-closed {
justify-content: stretch;
}
#te-text #t-kailasamandir .kmd-mb.is-closed .kmd-mb-btn {
flex: 1 1 auto;
max-width: none;
}
/* ONE booking CTA on mobile (Boss, 2026-08-12). The inline .kmd-cta-row and
the fixed bar were both on screen at once — two green buttons offering the
same action, the bar sitting directly under the inline one. The bar wins:
it stays reachable the whole way down the page. The .kmd-rule above it
stays — it is the stats/tabs separator, not this row's own chrome. */
#t-kailasamandir .kmd-cta-row {
display: none;
}
#t-kailasamandir .kmd-mb-price {
flex: 1 1 auto;
min-width: 0;
}
/* The wishlist heart, relocated into the bar because .kmd-cta-row above is
gone. 40px square keeps it at the 44px-ish tap target the rest of this
theme uses, without stealing width from the price or the CTA. */
#t-kailasamandir .kmd-mb-wish {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid #e7e7e9;
border-radius: 10px;
background: #fff;
color: #6b5c54;
cursor: pointer;
}
/* Saved reads in the theme's own maroon, matching .kmd-icon-btn.is-on. */
#t-kailasamandir .kmd-mb-wish.is-on {
border-color: #8b0e01;
color: #8b0e01;
}
/* The button must never be pushed off the edge by a long CMS label — it caps
at 60% and ellipsises instead. */
#te-text #t-kailasamandir .kmd-mb-btn {
flex: 0 1 auto;
max-width: 60%;
overflow: hidden;
padding: 0 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ---------------------------------------------------------------------------
"VIEW ALL PUJAS" (S6)
Measured: 142x42 at page y1420..1462, transparent on the section's own
#F9F8F4 ground, 1px #E0DDD8 border, #21201C uppercase letterspaced label.
CENTRED ON THE CONTAINER, not on the mock's x. The export puts the button's
centre at x675 while the grid above it is 240..1200 (centre 720) — a 45px
drift that reads as a nudge in the design file rather than intent. Matching
the grid it belongs to is the defensible reading; replicating a 45px offset
would look like a bug on every screen width.
------------------------------------------------------------------------ */
#t-kailasamandir .view-all-wrap {
display: flex;
justify-content: center;
/* grid's last row ends ~1390, button top 1420 */
margin-top: 30px;
padding-bottom: 44px; /* cream band runs on to the next section */
}
#t-kailasamandir .view-all-pill {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 142px;
height: 42px;
padding: 0 22px;
border: 1px solid #e0ddd8;
border-radius: 6px;
background: transparent;
color: #21201c;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
#t-kailasamandir .view-all-pill:hover {
border-color: #c9c4bc;
background: #fff;
}
#t-kailasamandir .view-all-pill:focus-visible {
outline: 2px solid var(--brand-primary-accent-c);
outline-offset: 2px;
}
/* Telugu cannot be uppercased or tracked; give it the size back instead. */
#te-text #t-kailasamandir .view-all-pill {
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 500;
}
/* ---------------------------------------------------------------------------
FAQ (S9)
Measured: the section uses a NARROWER container than the rest of the page —
285.5 → 1155 (869.5 wide, centred on 720) against the 960 used by the hero,
rail and grid. Left column heading ink y2463..2482 (19 tall) in #201F1B, a
two-line grey subtitle at an 18px pitch in #72726A, then a bordered CTA
197x40. Right column of questions from x661, separated by #E0DDD8 rules.
The base renders this very differently: a 55px MAROON display heading, an
"FAQ" eyebrow the design does not have, and a filled maroon 256x64 pill.
------------------------------------------------------------------------ */
#t-kailasamandir .faq {
background: #fff;
padding: 38px 0 44px;
}
#t-kailasamandir .faq-grid {
width: min(870px, calc(100% - 60px));
margin: 0 auto;
display: grid;
grid-template-columns: 315px 1fr;
gap: 60px;
align-items: start;
}
/* The design has no eyebrow above the heading. */
#t-kailasamandir .faq-eyebrow {
display: none;
}
#t-kailasamandir .faq-head .display {
margin: 0;
padding: 0;
color: #201f1b;
font-size: 26px; /* measured ink 19px tall */
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
}
#t-kailasamandir .faq-sub {
margin: 22px 0 0; /* heading ink ends 2482, subtitle starts 2534 */
max-width: 300px;
color: #72726a;
font-size: 11px;
line-height: 18px; /* measured pitch */
}
/* Same bordered treatment as "View All Pujas" — the design uses one button
style across the page; the base's filled maroon pill is not it. */
#t-kailasamandir .faq-head .pill-btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 25px; /* subtitle ends 2563, button top 2588 */
min-width: 197px;
height: 40px;
padding: 0 20px;
border: 1px solid #e0ddd8;
border-radius: 6px;
background: transparent;
box-shadow: none;
color: #21201c;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#t-kailasamandir .faq-head .pill-btn:hover {
border-color: #c9c4bc;
background: #faf9f6;
}
/* The base pill carries an arrow chip; the design's button is text only. */
#t-kailasamandir .faq-head .pill-btn .pill-icon {
display: none;
}
#t-kailasamandir .faq-item {
border-bottom: 1px solid #e0ddd8;
}
#t-kailasamandir .faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px 0;
color: #201f1b;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
cursor: pointer;
}
#t-kailasamandir .faq-mark {
flex: 0 0 auto;
color: #9a958d;
}
#t-kailasamandir .faq-body {
padding: 0 0 16px;
color: #74716a;
font-size: 11px;
line-height: 1.65;
max-width: 92%;
}
#te-text #t-kailasamandir .faq-head .display {
line-height: 1.35;
font-weight: 600;
}
#te-text #t-kailasamandir .faq-item summary {
font-size: 14px;
line-height: 1.5;
}
#te-text #t-kailasamandir .faq-head .pill-btn {
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 500;
}
@media (max-width: 1024px) {
#t-kailasamandir .faq-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* --- FAQ: flat rows, not cards -------------------------------------------
The base renders each question as a white CARD — border-radius 14, white
fill, a 10px list gap — with a 26px MAROON DISC for the +/- marker, and the
summary text runs to the card edge because the padding is vertical only. That
is what read as "packed tightly".
The design is flat: no card, no gap, one hairline #DEDED6 rule between rows,
and a small grey glyph at the right. Measured row pitch 58.4 (rule 2564 →
2622 → 2681 → 2739 → 2798 → 2856), question ink 15-16px.
------------------------------------------------------------------------ */
#t-kailasamandir .faq-list {
display: block;
gap: 0;
}
#t-kailasamandir .faq-item {
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid #deded6; /* measured; #E0DDD8 is the section's outer rule */
border-radius: 0;
background: transparent;
box-shadow: none;
}
#t-kailasamandir .faq-item summary {
/* 18.4 + ~21.6 line + 18.4 = the measured 58.4 row */
padding: 18.4px 0;
}
/* A glyph, not a filled disc. */
#t-kailasamandir .faq-mark {
width: auto;
height: auto;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #9a958d;
}
/* Height-capped: the mark holds BOTH the plus and the close glyph stacked, so
left to itself it measures 24px and becomes the tallest thing in the row —
which pushed the row to 61.8 against the design's 58.4. */
#t-kailasamandir .faq-mark {
display: flex;
align-items: center;
justify-content: center;
height: 12px;
line-height: 0;
}
/* Only ONE glyph at a time. The mark holds both a plus and a close icon and the
base swaps them on [open]; a blanket `display: block` here showed both at
once (Boss, 2026-08-11). */
#t-kailasamandir .faq-mark svg {
width: 12px;
height: 12px;
}
#t-kailasamandir .faq-item .faq-mark .mark-plus {
display: block;
}
#t-kailasamandir .faq-item .faq-mark .mark-close {
display: none;
}
#t-kailasamandir .faq-item[open] .faq-mark .mark-plus {
display: none;
}
#t-kailasamandir .faq-item[open] .faq-mark .mark-close {
display: block;
}
/* ===========================================================================
S7 — FOOTER
===========================================================================
The base footer is a tall dark "finale": a 40px Cormorant CTA headline over a
maroon/photographic band, a "Follow us -" caption at 50px, a "Find the Right
Puja" pill, then a 4-column link grid and a centred copyright — 763px tall.
The design is a light, flat, 3-row band, 213px tall:
rule #E0DDD8 (full bleed)
row 1 brand mark (left) social circles (right)
row 2 trust strip — icon + label x4
rule #DEDDD8 (full bleed)
row 3 copyright (left) legal links (right)
MEASURED off the 4x export (page y 2887 -> ~3100):
ground #F9F8F4 one ink colour throughout: #201F1B
container 285.5..1155 = 870 wide, the same narrow container as the FAQ
top rule y2887 #E0DDD8 mid rule y3044 #DEDDD8
brand ink y2922.25 h18 tagline ink y2951 h11
socials x1014.5..1155, 4 circles w22.5 ink on a 37.5 pitch,
centres y2943 -> 28px circles, 10px gap
fb #1777F0 ig #D32A7D x #21201C yt #FD0000
trust items x286 / 448 / 594.25 / 715.5, ink y3011.75, 23px between items
legal row copyright x285.5..450.5, links x613.5..956 with 1px #C6C5C1
separators, "English" x1119..1154.5
Type sizes are derived by fitting each string's MEASURED WIDTH against the
real webfont (4 strings per group, all agreeing to 0.1px), not from ink
height: tagline 11, trust 10.4-10.5/500, legal 9.6-9.7, brand wordmark 22.9.
Small, but consistent with this design's 13px nav and 10px buttons.
WHAT IS DROPPED and why:
.finale-title / .finale-sub / .view-all-pill / .follow-cap — the design has
no CTA finale. The copy is the SHARED per-language seed blob, so a
franchise was also publishing vedamandir's wording as its own.
.fc-quick — the design's footer carries no link column; the same routes
are in the header nav.
.dark-bg / .dark-glow — decoration for a dark band that no longer exists.
NOT IN THE DESIGN, but shipped anyway (Boss, 2026-08-12):
- .fc-contact, as ONE line in the bottom bar rather than the base's 4th
column. The design has no contact block, but kailasamandir.com already
serves a support email, a phone and the registered postal address in its
live footer, and it is a Cashfree payments domain — dropping them is a
compliance regression, not a design choice. Costs ~16px of height.
NOT IN THE DESIGN, deliberately absent (logged, not silently dropped):
- the "English" language chip: franchise domains are Telugu-locked, so a
switcher would be a lie. Row 3 is therefore 2 groups, not 3, and the
links sit at the right edge instead of the design's x613.5.
- trust item 4, "50M+ Devotees": a vedamandir number a franchise must not
claim, and proof_items is the GLOBAL seed. Items 1-3 render (Boss added
"Verified Pandits" to the seed on 2026-08-12); the 4th slot stays empty
rather than carrying an invented claim.
------------------------------------------------------------------------ */
#t-kailasamandir .vm-footer {
background: #f9f8f4;
/* Lets the mid rule below run to the viewport edges without ever adding a
horizontal scrollbar. Two declarations on purpose: `clip` is Safari 16+, and
where it is unsupported the whole line is dropped and the 100vw rule below
would pan the WHOLE document sideways. `hidden` is a safe fallback here
specifically because .vm-footer contains no sticky or fixed descendant
(checked) — the usual objection to `hidden` does not apply. */
overflow-x: hidden;
overflow-x: clip;
}
#t-kailasamandir .vm-footer .dark-zone {
/* `background`, not `background-color`: the base packs a photo + maroon into
the shorthand and the server injects a per-tenant --footer-bg-image on top
of it, so only the shorthand clears both. */
background: #f9f8f4;
color: #201f1b;
border-top: 1px solid #e0ddd8;
overflow: visible;
/* .vm-footer is centred (the base finale was a centred CTA column) and the
design's footer is left-aligned throughout — without this the logo floats
to the middle of its grid track. */
text-align: left;
/* One padded grid instead of three stacked .vmf-wrap containers, so the two
full-bleed rules can break out of it by exactly --km-fpad. */
--km-fpad: max(30px, calc((100% - 870px) / 2));
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
'brand social'
'proof proof'
'contact contact'
'copy legal';
align-items: center;
padding: 34px var(--km-fpad) 0;
}
/* The two wrappers stop being boxes so their children become items of the grid
above — the design's rows draw from BOTH of them (socials live in .finale,
the brand in .footer-grid) and no CSS can reorder across two containers. */
#t-kailasamandir .vm-footer .finale,
#t-kailasamandir .vm-footer .footer-grid {
display: contents;
}
#t-kailasamandir .vm-footer .dark-bg,
#t-kailasamandir .vm-footer .finale-title,
#t-kailasamandir .vm-footer .finale-sub,
#t-kailasamandir .vm-footer .follow-cap,
#t-kailasamandir .vm-footer .view-all-pill,
#t-kailasamandir .vm-footer .finale br,
#t-kailasamandir .vm-footer .fc-quick {
display: none;
}
/* --- row 1: brand + socials --------------------------------------------- */
#t-kailasamandir .vm-footer .foot-brand {
grid-area: brand;
align-self: center;
}
/* Height, never width — the mark is whatever the admin uploaded to Domain
Config (logo_footer), so its aspect is not ours to assume. 20px lands the
uploaded mark on the design wordmark's mass: this one is 978x127 (7.7:1)
against the design's 135x18 (7.5:1), so it renders 154 wide. */
/* inline-flex sits on a text baseline, so the line box adds ~5px of descender
space under the mark and pushes the tagline down. */
#t-kailasamandir .vm-footer .brand.light {
display: flex;
width: fit-content;
}
#t-kailasamandir .vm-footer .brand.light img {
height: 20px;
width: auto;
max-width: 260px;
object-fit: contain;
}
#t-kailasamandir .vm-footer .foot-brand p {
margin-top: 5.5px;
font-size: 11px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
color: #201f1b;
}
#t-kailasamandir .vm-footer .follow-row {
grid-area: social;
justify-self: end;
align-self: center;
margin: 0;
gap: 10px;
flex-wrap: nowrap;
}
#t-kailasamandir .vm-footer .sicon {
width: 28px;
height: 28px;
}
#t-kailasamandir .vm-footer .sicon svg {
width: 15px;
height: 15px;
}
/* Flat brand fills — the design has no gradient on the Instagram circle. */
#t-kailasamandir .vm-footer .sicon.fb { background: #1777f0; }
#t-kailasamandir .vm-footer .sicon.ig { background: #d32a7d; }
#t-kailasamandir .vm-footer .sicon.x { background: #21201c; }
#t-kailasamandir .vm-footer .sicon.yt { background: #fd0000; }
/* --- row 2: trust strip -------------------------------------------------- */
#t-kailasamandir .vm-footer .finale-proof {
grid-area: proof;
justify-content: flex-start;
gap: 23px;
margin: 42px 0 0;
padding: 0 0 22px;
font-size: 10.5px;
font-weight: 500;
color: #201f1b;
opacity: 1;
position: relative;
}
/* The mid rule is full-bleed (measured x0..1440) while the content stays in the
870 container.
🔴 It CANNOT reuse --km-fpad to break out: a custom property is substituted as
a TOKEN, so the `100%` inside it re-resolves against whichever element reads
it — here the 870-wide row, giving a 30px breakout instead of 277.5. Anchoring
to the viewport instead is width-independent and needs no parent arithmetic;
the 15px of scrollbar overhang is clipped by .vm-footer above. */
#t-kailasamandir .vm-footer .finale-proof::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 1px;
background: #deddd8;
}
#t-kailasamandir .vm-footer .finale-proof span {
gap: 7px;
}
/* 🔴 The proof icons are WHITE assets — `fill="white"` is hardcoded in the SVG,
with no currentColor — because they were drawn for the old dark maroon band.
On this cream footer they were invisible. They arrive as ![]()
from the
CMS, so no fill rule can reach inside them; brightness(0) collapses any
opaque pixel to black and invert(.12) lifts it to the design's #201F1B.
Side effect worth knowing: this normalises ANY icon an admin later uploads
to near-black, which is right for this design's monochrome strip. */
#t-kailasamandir .vm-footer .finale-proof span img {
width: 14px;
height: 14px;
opacity: 1;
filter: brightness(0) invert(0.12);
}
/* The design separates the items by whitespace only. */
#t-kailasamandir .vm-footer .finale-dot {
display: none;
}
/* --- row 3: copyright + legal links -------------------------------------- */
#t-kailasamandir .vm-footer .footer-base {
grid-area: copy;
justify-self: start;
border: 0;
padding: 18px 0 24px;
}
#t-kailasamandir .vm-footer .fb-inner {
width: auto;
margin: 0;
text-align: left;
font-size: 9.5px;
color: #201f1b;
}
#t-kailasamandir .vm-footer .fc-legal {
grid-area: legal;
justify-self: end;
flex-direction: row;
align-items: center;
gap: 0;
/* legal_links is the GLOBAL seed — a 4th entry or a long label would otherwise
grow this auto column and squeeze the copyright out of its 1fr. */
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 6px;
}
/* Visually gone, still announced — `display: none` would drop the group label
out of the accessibility tree along with the pixels. */
#t-kailasamandir .vm-footer .fc-legal h5 {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#t-kailasamandir .vm-footer .fc-legal a {
font-size: 9.5px;
line-height: 1;
color: #201f1b;
white-space: nowrap;
padding: 0 11.5px;
}
#t-kailasamandir .vm-footer .fc-legal a:first-of-type {
padding-left: 0;
}
#t-kailasamandir .vm-footer .fc-legal a:last-of-type {
padding-right: 0;
}
/* Measured 0.75px of #C6C5C1 ink spanning y3066.5..3075.75 — a hairline rule
between links, not a bullet. */
#t-kailasamandir .vm-footer .fc-legal a + a {
border-left: 1px solid #c6c5c1;
}
#t-kailasamandir .vm-footer .fc-legal a:hover {
color: #201f1b;
text-decoration: underline;
}
/* --- bottom bar: the contact line ----------------------------------------
Not in the design (see the header note). It sits BELOW the mid rule and
ABOVE the copyright, full width, so the design's three rows keep their exact
geometry and only the bar gets taller. Same 9.5px / #C6C5C1-hairline
vocabulary as the legal row so it reads as one bar, not a bolted-on block.
Every item is *ngIf'd on real tenant data — a tenant with no address simply
shows fewer items, and one with none shows nothing (the column's own *ngIf). */
#t-kailasamandir .vm-footer .fc-contact {
grid-area: contact;
justify-self: start;
flex-direction: row;
align-items: center;
gap: 0;
flex-wrap: wrap;
row-gap: 6px;
padding: 16px 0 0;
}
/* Announced, not painted — same treatment as the legal group's label. */
#t-kailasamandir .vm-footer .fc-contact h5 {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#t-kailasamandir .vm-footer .fc-contact a {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9.5px;
line-height: 1.3;
color: #201f1b;
padding: 0 11.5px;
}
#t-kailasamandir .vm-footer .fc-contact a:first-of-type {
padding-left: 0;
}
#t-kailasamandir .vm-footer .fc-contact a:last-of-type {
padding-right: 0;
}
#t-kailasamandir .vm-footer .fc-contact a + a {
border-left: 1px solid #c6c5c1;
}
/* The address is the long one and the only item that may wrap; keep its glyphs
on the text baseline rather than centring a two-line block on the icon. */
#t-kailasamandir .vm-footer .fc-contact a:last-of-type {
align-items: flex-start;
}
#t-kailasamandir .vm-footer .fc-contact a svg {
width: 11px;
height: 11px;
flex: none;
/* Optical centring against a 9.5px line box, not the 11px icon box. */
margin-top: 0.5px;
}
/* Clear the fixed .mobile-nav. It is `max-width: 1024px` / 80px tall — a WIDER
breakpoint than the 760 stack below, so this needs its own query: at 768 the
footer is still two-column but the bar is already there, and the legal links
were sitting under it, untappable. 80 for the bar + the design's own 24px
bottom gap.
body { padding-bottom: 80px } does NOT cover this: body is height-capped and
the footer overflows its box entirely, so that padding sits mid-page, not
under the footer. The flagship footer has the same overlap today (its
copyright is behind the bar) — this scoped fix only reaches kailasamandir,
logged in the ledger. */
@media (max-width: 1024px) {
/* Only the pages that actually render the bar. Six surfaces pass
[showMobileNav]="false" (pooja-details, package-details x2, payment-status,
paylater-status, user-details-form) and would otherwise get 104px of dead
cream under the copyright.
NOTE the selector shape: #t-kailasamandir IS the
, so the :has() has
to sit ON it — `body:has(...) #t-kailasamandir` would require the id to be a
descendant of body and could never match. */
#t-kailasamandir:has(.mobile-nav) .vm-footer .dark-zone {
padding-bottom: 104px;
}
/* Where :has() is unsupported (Safari <15.4, Chrome <105, FF <121) the rule
above never matches, so pad unconditionally instead: 104px of dead space on
six surfaces is a far better failure than legal links nobody can tap. */
@supports not selector(:has(*)) {
#t-kailasamandir .vm-footer .dark-zone {
padding-bottom: 104px;
}
}
}
/* --- footer, narrow --------------------------------------------------------
The design is desktop-only, so the two-column rows stack. The base's
1024/640 .footer-grid rules are inert here — it is display:contents. */
@media (max-width: 760px) {
#t-kailasamandir .vm-footer .dark-zone {
grid-template-columns: 1fr;
grid-template-areas:
'brand'
'social'
'proof'
'contact'
'copy'
'legal';
justify-items: start;
padding-top: 28px;
}
#t-kailasamandir .vm-footer .follow-row {
justify-self: start;
margin-top: 18px;
}
#t-kailasamandir .vm-footer .finale-proof {
margin-top: 26px;
flex-wrap: wrap;
row-gap: 10px;
/* The row must span the grid track: `justify-items: start` above shrinks it
to its content, and the full-bleed rule is centred on THIS element — a
246px-wide row put the rule's right end 34px short of the screen. */
justify-self: stretch;
}
#t-kailasamandir .vm-footer .footer-base {
padding-bottom: 12px;
}
#t-kailasamandir .vm-footer .fc-legal {
justify-self: start;
flex-wrap: wrap;
row-gap: 8px;
}
/* A wrapped row must not show a separator at the start of the new line, and
`a + a` cannot know where the line breaks — so drop the rules and space the
links instead. */
#t-kailasamandir .vm-footer .fc-legal a + a {
border-left: 0;
}
#t-kailasamandir .vm-footer .fc-legal a {
padding: 0 14px 0 0;
}
/* Narrow has no room for one line: stack the three items. The hairlines go
with the row — `a + a` cannot know where a wrapped line breaks, so a
separator would land at the start of a new line. */
#t-kailasamandir .vm-footer .fc-contact {
flex-direction: column;
align-items: flex-start;
row-gap: 7px;
}
#t-kailasamandir .vm-footer .fc-contact a,
#t-kailasamandir .vm-footer .fc-contact a:first-of-type,
#t-kailasamandir .vm-footer .fc-contact a:last-of-type {
padding: 0;
border-left: 0;
}
}
/* ---------------------------------------------------------------------------
LISTING PAGES — /pujas, /packages, /chadavas (Boss, 2026-08-12)
"Match the list pages' card design to the home page's Our Pujas."
All three listing pages render the SAME class family — .puja-hero /
.puja-chips / .puja-chip / .puja-list-grid — so one rule set themes all three.
The cards themselves were already covered: .puja-card / .puja-img / .puja-foot
are the same classes home uses and are scoped to #t-kailasamandir higher up in
this file. What was still off was the container: a 3-column grid, and a chip
row the base draws as outlined pills with a tick.
Boss's scope (2026-08-12): cards + chips + grid ONLY. The serif hero heading
and the search field stay exactly as they are — this is a browse page and the
search is the reason to be here.
------------------------------------------------------------------------ */
/* 4 across, matching .puja-grid on home. The listing pages ship 3, which at the
same container width renders every card noticeably larger than the identical
card on the home page — the mismatch Boss spotted. */
#t-kailasamandir .puja-list-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* Chips: same vocabulary as home's .filter-chip — flat, no border, the active
one filled in the theme's brown. The base draws outlined pills with a red
check glyph, which is the other half of what looked "not like home". */
#t-kailasamandir .puja-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#t-kailasamandir .puja-chip {
display: inline-flex;
align-items: center;
gap: 0;
height: 25px;
padding: 0 11px;
border: 0;
border-radius: 5px;
background: #fff;
color: #74716a;
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.09em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
#t-kailasamandir .puja-chip.is-on {
background: #96723e;
color: #fff;
}
/* Home hides the equivalent tick (.filter-tick) — at this chip height the glyph
crowds the label. The count badge stays: it carries real filter state. */
#t-kailasamandir .puja-chip-check {
display: none;
}
#t-kailasamandir .puja-chip:focus-visible {
outline: 2px solid var(--brand-primary-accent-c);
outline-offset: 2px;
}
/* Telugu cannot be uppercased or tracked and its glyphs are taller, so the 9px
English pill reads as cramped. Same sizing-up home applies. */
#te-text #t-kailasamandir .puja-chip {
height: 32px;
padding: 0 16px;
border-radius: 6px;
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 500;
/* Boss, 2026-08-12 — the labels sat jammed against the top of the pill.
Measured: a 32px box with the ink at topGap 1px / botGap 15px, i.e. 14px of
skew. Two causes, and BOTH have to be restated here rather than in the
unprefixed rule above, because this selector is (2,1,0) and wins:
1. styles.scss:435 `.pujas-page .puja-chip { align-items: baseline }` —
a flex chip aligned on the text baseline, not centred in its box;
2. an inherited 1.4 line-height, which on a 13px Telugu label is 18.2px
inside a 32px pill and pushes the ink upward.
Centring on both axes with line-height 1 puts the label in the middle of
the pill at any label length, Telugu or Latin. */
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
/* The unselected pill was #fff on the cream page ground with `border: 0`, so
it had no visible edge — only the gold active pill read as a control. */
border: 1px solid #e4e0e1;
}
#te-text #t-kailasamandir .puja-chip.is-on {
border-color: #96723e;
}
#te-text #t-kailasamandir .puja-chips {
gap: 8px;
}
/* The same breakpoints home's .puja-grid uses, so a card is never a different
size on a listing page than on the home page at any width. */
@media (max-width: 1024px) {
#t-kailasamandir .puja-list-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
#t-kailasamandir .puja-list-grid {
grid-template-columns: 1fr;
}
}
/* The listing pages' own SCSS sets `.book-btn { width: 100% }`
(packages.component.scss:163 and the twins on /pujas and /chadavas), so the
CTA stretched across the whole card foot while home's identical button sizes
to its label. Scoped to the grid so the shared #t-kailasamandir .book-btn
rule — which home also uses — is left alone. */
#t-kailasamandir .puja-list-grid .book-btn {
width: auto;
}
/* ---------------------------------------------------------------------------
ACCOUNT AREA (Boss, 2026-08-12)
"The account theme should match the buttons and styling of kailasamandir."
Covers /account and its children — profile, wishlist, addresses, bookings,
subscriptions. All CSS: these pages have no theme presenter, and they share a
consistent class family (.account-*-btn, .sub-btn, .account-chip-btn,
.account-*-card, .sub-card), so scoping to #t-kailasamandir themes the whole
area without touching another tenant.
The COLOURS were already tenant-aware — the base reads the injected brand
vars, so the Login button was already this franchise's maroon. What did not
match was the SHAPE: 999px pills with an arrow bubble, against a theme whose
buttons are 28px, 6px-radius and text-only everywhere else.
🔴 One judgement call for Boss: primary actions here are set to the theme's
GREEN (#318616), not the brand maroon. Green is this theme's action colour —
the header CTA, the sticky booking bar and every card button use it (14
usages in this file vs 2 for maroon). If you want account CTAs in maroon
instead, change the two `background`/`border-color` values below and nothing
else moves.
------------------------------------------------------------------------ */
/* Primary solid actions: Login, Explore Pujas, Add address. */
#t-kailasamandir .account-login-btn,
#t-kailasamandir .account-add-btn,
#t-kailasamandir .sub-btn--dark {
height: 34px;
padding: 0 16px;
border: 1px solid #318616;
border-radius: 6px;
background: #318616;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
}
#t-kailasamandir .account-login-btn:hover,
#t-kailasamandir .account-add-btn:hover,
#t-kailasamandir .sub-btn--dark:hover {
background: #276d11;
border-color: #276d11;
}
/* Secondary / row actions: same outlined vocabulary as the card CTA
(.book-btn), so a button means the same thing on a card and in the account. */
#t-kailasamandir .account-activity-btn,
#t-kailasamandir .account-wish-btn,
#t-kailasamandir .sub-btn {
height: 28px;
padding: 0 12px;
border: 1px solid #328616;
border-radius: 6px;
background: #fff;
color: #328616;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
#t-kailasamandir .account-activity-btn:hover,
#t-kailasamandir .account-wish-btn:hover,
#t-kailasamandir .sub-btn:hover {
background: #f1f8ee;
}
/* .sub-btn--dark carries both classes, so restate the solid fill after the
outlined rule above rather than relying on source order alone. */
#t-kailasamandir .sub-btn.sub-btn--dark {
background: #318616;
color: #fff;
}
/* The arrow bubbles go, exactly as .book-ic does on the cards — this theme's
buttons are text. */
#t-kailasamandir .account-login-btn-ic,
#t-kailasamandir .account-activity-btn-ic,
#t-kailasamandir .account-wish-btn-ic,
#t-kailasamandir .sub-btn-ic {
display: none;
}
/* Chips: the theme's chip is the brown pill from the home filter row. */
#t-kailasamandir .account-chip-btn {
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 6px;
background: #f2ede4;
color: #74716a;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
#t-kailasamandir .account-chip-btn.is-on,
#t-kailasamandir .account-chip-btn[aria-selected='true'] {
background: #96723e;
color: #fff;
}
/* Destructive stays legible as destructive — the theme has no danger colour of
its own, so this keeps the brand maroon rather than inventing one. */
#t-kailasamandir .account-chip-btn--danger {
background: #fff;
border: 1px solid #8b0e01;
color: #8b0e01;
}
/* Cards: flat and square-ish like the puja card, instead of the base's heavier
shadowed panel. */
#t-kailasamandir .account-activity-card,
#t-kailasamandir .account-address-card,
#t-kailasamandir .account-wish-card,
#t-kailasamandir .sub-card {
border: 1px solid #ececec;
border-radius: 10px;
background: #fff;
box-shadow: none;
}
/* ---------------------------------------------------------------------------
CARD ROW ALIGNMENT (Boss, 2026-08-12)
"Participate Now / Subscribe CTAs are not correctly aligned."
The grid already stretches every card in a row to the same height (measured:
all 363px). What varied was where the content sat INSIDE it — a title that
wrapped to one line instead of two lifted that card's date row, temple row
and CTA by exactly one line (19px measured on /pujas and /packages).
Two rules fix it, and both belong on the SHARED card so the listing pages and
home behave identically:
· .puja-name reserves its clamped two lines, so the detail rows below start
on the same baseline in every card. 2.7em is 2 x the 1.35 line-height
declared above, in em so it follows the per-language font-size override.
· the slack is absorbed ABOVE the foot rather than by giving the foot
`margin-top: auto` — that would have eaten the foot's own 10px gap on the
tallest card in the row and moved the divider up against the meta rows,
breaking the spacing this section was signed off on.
Home had the same latent bug: its row only looked right because all four
titles happened to wrap to two lines (measured spread 0 there, 19 on the
listing pages). Same card, same fix.
------------------------------------------------------------------------ */
#t-kailasamandir .puja-card {
display: flex;
flex-direction: column;
}
#t-kailasamandir .puja-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
#t-kailasamandir .puja-name {
min-height: 2.7em;
}
#t-kailasamandir .puja-date-place {
margin-bottom: auto;
}
/* Telugu overrides .puja-name's line-height to 1.45 (see the #te-text rule
above), so the generic 2.7em reserve — 2 x 1.35 — falls 3px short of a real
two-line Telugu title and the detail rows below it start 3px high on a
short-titled card. Same arithmetic, this language's number. */
#te-text #t-kailasamandir .puja-name {
min-height: 2.9em;
}
/* The temple row is `grid-template-columns: 210px 1fr` with the media box as
item 1. When a package has a temple_name but no temple_image_url the media box
is now *ngIf'd away (correctly — an empty box painted #1a0807 was a black
rectangle), and the body then fell into the 210px column with an empty 1fr
beside it: the description squashed into a narrow strip at >=1025px.
Boss, 2026-08-12 — found by the independent review. */
#t-kailasamandir .kmd-temple:not(:has(.kmd-temple-media)) {
grid-template-columns: 1fr;
}
/* ---------------------------------------------------------------------------
LISTING HERO (Boss, 2026-08-12: "background and title colours should match,
it's light golden")
/pujas, /packages and /chadavas share one hero band, and it was still painting
vedamandir's palette on this domain: the band #f9f2f1 (blush) and the title
#6f0b01 (a darkened maroon). Measured on /pujas?__tenant=kailasamandir.
Root cause when this was written: tenant 9004's branding token was still
vedamandir's maroon (#8b0e01), so anything token-driven inherited the wrong
brand.
✅ NO LONGER TRUE (re-measured 2026-08-12): 9004's Domain Config now carries
the theme's own brown — `--brand-primary`, `--brand-primary-accent` and
`--brand-primary-accent-c` all compute to **#96723e** on this domain, against
#8B0E01 / #FF5722 / #C15608 on vedamandir. Token-driven values are on-brand;
the hero rules below stay because they set specific design values, not
because the token is wrong.
Values are the theme's existing tokens, not new ones: #f9f8f4 is the warm
ground already used across this sheet, #201f1b its heading brown, #96723e the
gold. The sub-heading already computed #6b5c54 and is left alone. */
#t-kailasamandir .puja-hero {
background: #f9f8f4;
}
#t-kailasamandir .puja-hero-title {
color: #201f1b;
}
/* The search field sits on the band; at #f9f8f4 a white field needs its own edge
to stay legible, where against the blush it read on tone alone. */
/* 🔴 Must be .puja-search-FIELD (Netra, 2026-08-12). `.puja-search` is the
transparent flex ROW (home.component.scss:38) holding the 999px pill AND the
separate 56px filter button — bordering it drew a square 660px box around the
pill, the 12px gap and the button, on all three listing pages. The two other
selectors were dead: the input is type="text" with class .puja-search-input,
and .puja-search-wrap exists nowhere in the codebase. */
#t-kailasamandir .puja-hero .puja-search-field {
border: 1px solid #e0ddd8;
}
/* ---------------------------------------------------------------------------
ACCOUNT SHELL + OTP MODAL — full pass (Boss, 2026-08-12)
"Fix the account theme and buttons and everything so it looks kailasamandir
like, using CSS only" + "the OTP popup should also be fixed as per the domain
theme — be careful with the buttons and theme and colors."
Verified against the REAL logged-in pages, not the logged-out shells: a lab
OTP login (otp_verification on the lab DB) gave a token, which the browser
context injects as localStorage.token before navigating with ?__tenant=.
Two things were already right and are deliberately left alone: the account
area already renders in Plus Jakarta Sans (this theme's font), and its brand
colour already resolves to this franchise's maroon through the injected
vars. What did NOT match was the SHAPE — 12-20px radii, 56-65px control
heights and 999px pills, against a theme built on 6-10px radii and 28-34px
controls — plus three pastel tints that belong to no palette here.
------------------------------------------------------------------------ */
/* --- left rail ---------------------------------------------------------- */
#t-kailasamandir .account-nav-item {
border-radius: 8px;
min-height: 46px;
font-size: 14px;
}
#t-kailasamandir .account-logout {
border-radius: 8px;
min-height: 44px;
font-size: 14px;
}
/* --- profile card ------------------------------------------------------- */
#t-kailasamandir .account-profile {
border-radius: 10px;
}
/* Secondary action, same outlined vocabulary as .book-btn so a button means the
same thing on a card and here. */
#t-kailasamandir .account-edit {
height: 28px;
padding: 0 12px;
border: 1px solid #328616;
border-radius: 6px;
background: #fff;
color: #328616;
font-size: 10px;
font-weight: 600;
}
#t-kailasamandir .account-edit:hover {
background: #f1f8ee;
}
/* The "Devotee" tag is a chip; give it the theme's chip shape. */
#t-kailasamandir .account-since {
border-radius: 6px;
background: #f2ede4;
color: #74716a;
}
/* --- the three summary tiles -------------------------------------------- */
/* The base tints these pink / cream / sage — a palette this theme does not
have. Re-mapped onto the theme's own surfaces rather than flattened to white,
so the three tiles stay visually distinct the way the design intends:
cream surface, gold-tinted cream, and the green used for .book-btn:hover. */
#t-kailasamandir .account-stat {
border: 1px solid #ececec;
border-radius: 10px;
}
#t-kailasamandir .account-stat.pink {
background: #faefec;
}
#t-kailasamandir .account-stat.cream {
background: #f9f6ef;
}
#t-kailasamandir .account-stat.sage {
background: #f1f8ee;
}
#t-kailasamandir .account-secure {
border-radius: 10px;
background: #f1f8ee;
}
/* --- OTP modal ----------------------------------------------------------
🔴 Scoped through `app-otp-modal`, NOT through .modal-content / .pill-btn.
Both of those class names are also used by the checkout form, the two
details pages and the home presenter — restyling them bare would reach five
other surfaces. The component tag is the only unique handle.
---------------------------------------------------------------------- */
/* `!important` matches the base, which sets `border-radius: 20px !important`
at otp-modal.component.scss:287 — no specificity can beat that. The base's
own default (line 56) is a bottom-sheet with only the top corners rounded,
which the desktop media query then overrides; both are covered here. */
#t-kailasamandir app-otp-modal .modal-content {
/* Bottom-sheet below 1200 (.modal-overlay is align-items:flex-end there), so
only the TOP corners round — the base does the same at
otp-modal.component.scss:56. Rounding all four left two notches of dimmed
overlay showing under the sheet. */
border-radius: 12px 12px 0 0 !important;
}
@media (min-width: 1200px) {
#t-kailasamandir app-otp-modal .modal-content {
border-radius: 12px !important;
}
}
#t-kailasamandir app-otp-modal .modal-title {
font-size: 20px;
font-weight: 600;
color: #201f1b;
}
#t-kailasamandir app-otp-modal .mobile-input,
#t-kailasamandir app-otp-modal .mobile-input-container {
border-radius: 8px;
}
/* 🔴 font-size stays at the base's 16px (Netra, 2026-08-12). iOS Safari zooms
the whole viewport when a text input under 16px takes focus — and this is the
phone-number field of the login flow on a mobile-majority franchise. The
base's 16px was deliberate; 14px was mine and wrong. */
#t-kailasamandir app-otp-modal .mobile-input {
border-width: 1px;
border-color: #ececec;
height: 48px;
font-size: 16px;
}
/* The primary action, in the theme's action green — the same colour as the
header CTA and the booking bar, so "the button that commits" is one colour
across the whole domain. */
/* 🔴 justify-content + padding + line-height must ALL be reset (Netra,
2026-08-12). The base is `justify-content: space-between; padding: 13px 36px;
line-height: 26px`, sized for a label plus the arrow chip. With .pill-icon
hidden below, space-between pinned the label to the left edge — measured 37px
from the left and 196px of dead green to its right. The theme's own
`.faq-head .pill-btn` rule already centres and resets padding; this one
forgot to. */
#t-kailasamandir app-otp-modal .pill-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 16px;
border: 1px solid #318616;
border-radius: 8px;
background: #318616;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1;
}
#t-kailasamandir app-otp-modal .pill-btn:hover {
background: #276d11;
border-color: #276d11;
}
/* Arrow bubble goes, exactly as .book-ic does on the cards. */
#t-kailasamandir app-otp-modal .pill-icon {
display: none;
}
/* The OTP boxes on step 2. */
#t-kailasamandir app-otp-modal .otp-input {
border-radius: 8px;
border-color: #ececec;
}
#t-kailasamandir app-otp-modal .otp-input:focus {
border-color: #318616;
outline: none;
}
/* The consent line's "terms and conditions" renders as a default BLUE browser
link inside an otherwise maroon-and-green modal. */
#t-kailasamandir app-otp-modal .consent-note a {
color: #8b0e01;
text-decoration-color: rgba(139, 14, 1, 0.4);
}
/* The three summary tiles are elements with no colour of their own, so they
sit at the browser's default link blue (measured rgb(0,0,238)). Nothing
visible inherits it today — every child sets its own colour — but one
unstyled span inside would print blue in an otherwise maroon-and-green page. */
#t-kailasamandir .account-stat {
color: #201f1b;
}
/* --- account filter chips (Boss, 2026-08-12) -----------------------------
/account/bookings and /account/subscriptions filter with `.sub-chip`, NOT
the `.account-chip-btn` family styled above — so the first account pass
missed them entirely and they kept the base's 999px grey pills with a tick
inside the active one.
Boss: "chips must be same as in home page Our Pujas chips." Same values as
`.filter-chip` / `.puja-chip`, including the Telugu sizing, since a
franchise domain is Telugu-locked and renders under #te-text. */
#t-kailasamandir .sub-chip {
display: inline-flex;
align-items: center;
gap: 0;
height: 25px;
padding: 0 11px;
border: 0;
border-radius: 5px;
background: #fff;
color: #74716a;
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.09em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
#t-kailasamandir .sub-chip.is-on {
background: #96723e;
border: 0;
color: #fff;
}
/* Home drops the tick glyph — at this chip height it crowds the label. */
#t-kailasamandir .sub-chip-check {
display: none;
}
#t-kailasamandir .sub-chip:focus-visible {
outline: 2px solid var(--brand-primary-accent-c);
outline-offset: 2px;
}
#te-text #t-kailasamandir .sub-chip {
height: 32px;
padding: 0 16px;
border-radius: 6px;
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 500;
}
/* Breathing room before the footer (Boss, 2026-08-12). Measured: the last FAQ
card, #faqs-section, .kmd-page and the footer's top edge all sat on the SAME
y (2416.67) — a 0px gap, so the last card butted straight into the footer
band. .kmd-page is the shared page column on BOTH details pages, so one rule
covers pooja-details and package-details. Mobile keeps its own fixed-CTA
clearance on .kmd-body; this is additive breathing room, not a replacement. */
#t-kailasamandir .kmd-page {
padding-bottom: 56px;
}
@media (max-width: 1024px) {
#t-kailasamandir .kmd-page {
padding-bottom: 36px;
}
}