/* =========================================================================
   Tarot Life Store — home page theme stylesheet
   Dark cosmic-purple palette. Cormorant Garamond (display/serif) + Jost (UI/sans).
   Scoped under .tls-page so it does not bleed into the existing site chrome
   (header/nav/footer from _Layout.cshtml remain unaffected).
   ========================================================================= */

/* ---------- Google Fonts (Cormorant Garamond + Jost) ---------- */
/* Loaded via <link> in the metatags section of the view */

/* ---------- animated background ---------- */
@keyframes tls-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes tls-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tls-twinkle { 0%,100% { opacity:.25; transform: scale(.75) rotate(0deg); } 50% { opacity:1; transform: scale(1.05) rotate(20deg); } }
@keyframes tls-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw,5vh) scale(1.18); } }
@keyframes tls-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,4vh) scale(1.12); } }
@keyframes tls-drift-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,-6vh) scale(1.22); } }
@keyframes tls-drift-d { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,-4vh) scale(1.1); } }
@keyframes tls-stars { 0%,100% { opacity:.45; } 50% { opacity:.95; } }
@keyframes tls-bob { 0%,100% { transform: translateY(0); opacity:.7; } 50% { transform: translateY(8px); opacity:1; } }


body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
}

/* ---------- page wrapper ---------- */
.tls-page {
    position: relative;
    background: #0a0418;
    overflow: hidden;
}

.tls-bg-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(135% 90% at 50% -12%, #2a1656 0%, #1a0e36 42%, #0c0518 78%, #08030f 100%);

}

.tls-bg-aurora {
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    filter: blur(70px);
    opacity: .9;
}

.tls-bg-aurora span {
    position: absolute;
    border-radius: 50%;
}

.tls-blob-a { left: 8%; top: 6%; width: 42vw; height: 42vw; background: radial-gradient(closest-side, rgba(150,90,255,.55), rgba(150,90,255,0) 70%); animation: tls-drift-a 22s ease-in-out infinite; }
.tls-blob-b { right: 4%; top: 18%; width: 38vw; height: 38vw; background: radial-gradient(closest-side, rgba(232,86,196,.40), rgba(232,86,196,0) 70%); animation: tls-drift-b 27s ease-in-out infinite; }
.tls-blob-c { left: 30%; bottom: -8%; width: 46vw; height: 46vw; background: radial-gradient(closest-side, rgba(78,120,255,.42), rgba(78,120,255,0) 70%); animation: tls-drift-c 30s ease-in-out infinite; }
.tls-blob-d { right: 24%; bottom: 8%; width: 30vw; height: 30vw; background: radial-gradient(closest-side, rgba(64,214,200,.26), rgba(64,214,200,0) 70%); animation: tls-drift-d 24s ease-in-out infinite; }

.tls-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    animation: tls-stars 6s ease-in-out infinite;
    background-image:
        radial-gradient(1.4px 1.4px at 40px 60px, rgba(255,255,255,.9), transparent),
        radial-gradient(1.2px 1.2px at 160px 120px, rgba(225,210,255,.8), transparent),
        radial-gradient(1px 1px at 90px 200px, rgba(255,255,255,.7), transparent),
        radial-gradient(1.6px 1.6px at 260px 80px, rgba(240,225,255,.85), transparent),
        radial-gradient(1px 1px at 320px 240px, rgba(255,255,255,.6), transparent),
        radial-gradient(1.2px 1.2px at 220px 300px, rgba(220,200,255,.7), transparent),
        radial-gradient(1px 1px at 30px 320px, rgba(255,255,255,.65), transparent);
    background-size: 360px 360px;
    background-repeat: repeat;
}

.tls-bg-fade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8,3,15,0) 60%, rgba(8,3,15,.55) 100%);
}

/* ---------- hero ---------- */
.tls-hero {
    position: relative;
    z-index: 1;
    min-height: 93vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 24px 48px;
}

.tls-eyebrow {
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 400;
    font-size: clamp(11px,1.1vw,14px);
    letter-spacing: .42em;
    text-transform: uppercase;
    color: rgba(206,188,247,.72);
    display: flex;
    align-items: center;
    gap: .9em;
    margin-bottom: 26px;
}

.tls-eyebrow .accent { color: #b98cff; }

.tls-title-kicker {
    display: block;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px,2.8vw,42px);
    color: #e6d6ff;
    margin-bottom: .08em;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
}

.tls-title-main {
    display: block;
    font-weight: 600;
    font-size: clamp(25px,6.6vw,50px);
    letter-spacing: .01em;
    color: #f7f2ff;
    text-shadow: 0 6px 54px rgba(140,80,220,.45);
    line-height: 1.3;
    margin: 0;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    margin-bottom: 15px;
}

.tls-gem-wrap {
    position: relative;
    width: clamp(240px,30vw,380px);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tls-gem-float {
    position: relative;
    width: 100%;
    animation: tls-float 8s ease-in-out infinite;
}

.tls-orbit {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%,-50%) perspective(900px) rotateX(74deg);
    width: 128%;
    aspect-ratio: 1/1;
    z-index: -1;
    pointer-events: none;
}

.tls-orbit i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #b98cff;
    box-shadow: 0 0 18px rgba(185,140,255,.35) inset;
    opacity: .5;
    animation: tls-ring 26s linear infinite;
    font-style: normal;
}

.tls-sparkle {
    position: absolute;
    color: #b98cff;
    z-index: 6;
}

.tls-subtitle {
    margin: 0 0 24px;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px,1.7vw,23px);
    color: rgba(216,203,242,.74);
    max-width: 50ch;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
}

.tls-cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .66em 1.5em;
    border: 1px solid rgba(185,140,255,.55);
    border-radius: 999px;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 500;
    font-size: clamp(17px,1.6vw,23px);
    letter-spacing: .03em;
    color: #f1ebff;
    text-decoration: none;
    background: rgba(155,109,255,.10);
    transition: background .25s ease, border-color .25s ease;
}

.tls-cta:hover {
    background: rgba(155,109,255,.24);
    border-color: #b98cff;
    color: #f1ebff;
}

.tls-scroll-hint {
    margin-top: 42px;
    /*font-family: 'Jost', sans-serif;*/
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(206,188,247,.5);
    animation: tls-bob 3s ease-in-out infinite;
}

/* ---------- emblem (CSS-only yantra + lotus + diya flame) ---------- */
@keyframes tls-emblem-pulse { 0%,100% { opacity:.65; transform: scale(1); } 50% { opacity:1; transform: scale(1.07); } }
@keyframes tls-flame-flicker { 0%,100% { transform: scaleY(1) scaleX(1) rotate(0deg); } 25% { transform: scaleY(1.06) scaleX(.96) rotate(-2deg); } 50% { transform: scaleY(.93) scaleX(1.04) rotate(1.5deg); } 75% { transform: scaleY(1.04) scaleX(.98) rotate(-1deg); } }
@keyframes tls-ring-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes tls-lotus-breathe { 0%,100% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.04); opacity:1; } }

.tls-emblem { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1/1; z-index: 5; filter: drop-shadow(0 22px 46px rgba(90,40,170,.5)); }
.tls-emblem-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,196,120,.5), rgba(185,140,255,.32) 45%, transparent 72%); filter: blur(18px); animation: tls-emblem-pulse 5s ease-in-out infinite; }
.tls-emblem-rays { position: absolute; inset: -4%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,207,92,.4) 0deg 3deg, transparent 3deg 30deg); -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 70%); mask-image: radial-gradient(circle, #000 34%, transparent 70%); opacity: .85; animation: tls-ring 48s linear infinite; }
.tls-emblem-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(185,140,255,.5); }
.tls-emblem-ring-outer { inset: 6%; box-shadow: 0 0 20px rgba(185,140,255,.25) inset; animation: tls-ring 34s linear infinite; }
.tls-emblem-ring-outer::before, .tls-emblem-ring-outer::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #b98cff; box-shadow: 0 0 8px #b98cff; }
.tls-emblem-ring-outer::before { top: -2.5px; left: calc(50% - 2.5px); }
.tls-emblem-ring-outer::after { bottom: -2.5px; left: calc(50% - 2.5px); }
.tls-emblem-ring-inner { inset: 17%; border-style: dashed; opacity: .55; animation: tls-ring-rev 26s linear infinite; }
.tls-emblem-lotus { position: absolute; inset: 24%; animation: tls-lotus-breathe 6s ease-in-out infinite; }
.tls-emblem-lotus i { position: absolute; left: 50%; top: 50%; width: 48%; height: 21%; transform-origin: 0% 50%; background: linear-gradient(90deg, rgba(255,142,178,.85), rgba(185,140,255,.12)); border-radius: 999px 999px 999px 0; clip-path: ellipse(50% 50% at 8% 50%); font-style: normal; }
.tls-emblem-lotus i:nth-child(1) { transform: rotate(0deg); }
.tls-emblem-lotus i:nth-child(2) { transform: rotate(45deg); }
.tls-emblem-lotus i:nth-child(3) { transform: rotate(90deg); }
.tls-emblem-lotus i:nth-child(4) { transform: rotate(135deg); }
.tls-emblem-lotus i:nth-child(5) { transform: rotate(180deg); }
.tls-emblem-lotus i:nth-child(6) { transform: rotate(225deg); }
.tls-emblem-lotus i:nth-child(7) { transform: rotate(270deg); }
.tls-emblem-lotus i:nth-child(8) { transform: rotate(315deg); }
.tls-emblem-flame { position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%); width: 15%; height: 27%; z-index: 3; }
.tls-emblem-flame-core { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 78%, #fff3c4 0%, #ffcf5c 32%, #ff8a3d 62%, #d94f1f 88%, transparent 100%); clip-path: polygon(50% 0%, 80% 42%, 78% 76%, 50% 100%, 22% 76%, 20% 42%); animation: tls-flame-flicker 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(255,140,50,.6)); }
.tls-emblem-base { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); width: 30%; height: 8%; border-radius: 50%; background: linear-gradient(180deg, #caa14a, #7a541c); box-shadow: 0 8px 18px -6px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,255,255,.35); }

/* ---------- generic section heads ---------- */
.tls-section {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    /*padding: 24px clamp(16px,4vw,28px) 20px;*/
    padding-bottom: 20px;
}

.tls-section-head { text-align: center; margin-bottom: 46px; }

.tls-kicker {
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 400;
    font-size: clamp(11px,1vw,13px);
    letter-spacing: .4em;
    text-transform: uppercase;
    color: #b98cff;
    margin-bottom: 14px;
}

.tls-h2 {
    margin: 0;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(32px,4.2vw,38px);
    color: #f4efff;
    text-shadow: 0 4px 40px rgba(120,70,200,.35);
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
}

/* ---------- category / product cards ---------- */
.tls-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(14px,1.8vw,26px);
}

@media (max-width: 1000px) { .tls-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px) {
    .tls-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tls-hero { /*min-height: auto;*/ padding-top: 15px; }
}

/* 3-column variant */
.tls-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .tls-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .tls-grid-3 { grid-template-columns: 1fr; } }

.tls-card {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 14px 14px 16px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--card-accent, #b98cff) 30%, #e9def6);
    background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--card-accent, #b98cff) 8%, #ffffff));
    box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--card-accent, #b98cff) 60%, transparent), 0 3px 8px rgba(8,3,18,.35);
    cursor: pointer;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .32s ease;
    text-decoration: none;
}

.tls-card:hover {
    transform: translateY(-8px) scale(1.025);
    border-color: var(--card-accent, #b98cff);
    box-shadow: 0 32px 64px -20px color-mix(in srgb, var(--card-accent, #b98cff) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--card-accent, #b98cff) 50%, transparent);
}

.tls-card-media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--card-accent, #b98cff) 24%, #f3ecfb), #f3ecfb 78%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent, #b98cff) 22%, transparent);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tls-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tls-card-media .tls-placeholder {
    /*font-family: 'Jost', sans-serif;*/
    font-size: 13px;
    color: color-mix(in srgb, var(--card-accent, #b98cff) 60%, #6b5a90);
    text-align: center;
    padding: 8px;
}

.tls-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
    min-width: 0;
}

.tls-card-name {
    min-width: 0;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 600;
    font-size: clamp(17px,1.6vw,24px);
    color: #231342;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.tls-card-cta {
    flex: none;
    /*font-family: 'Jost', sans-serif;*/
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #eaf0ff;
    background: #1c2a63;
    padding: .52em .85em;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 5px 16px -6px rgba(28,42,99,.85);
}

/* ---------- bestsellers carousel ---------- */
.tls-carousel-head { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 28px; }
.tls-carousel-nav { display: flex; gap: 10px; flex: none; }

.tls-carousel-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(185,140,255,.45);
    background: rgba(255,255,255,.04);
    color: #f1e9ff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, transform .15s;
}

.tls-carousel-nav button:hover { background: rgba(185,140,255,.22); border-color: #b98cff; }
.tls-carousel-nav button:active { transform: scale(.92); }

.tls-carousel-track {
    display: flex;
    gap: clamp(14px,1.8vw,22px);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 20px 6px 22px;
    margin: 0 -6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tls-carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

.tls-carousel-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(200px,26vw,260px);
    box-shadow: none;
}

.tls-carousel-card:hover { transform: translateY(-6px); box-shadow: none; }
.tls-carousel-card .tls-card-media { aspect-ratio: 4/5; }

.tls-carousel-type {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    /*font-family: 'Jost', sans-serif;*/
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2a1c42;
    background: color-mix(in srgb, var(--card-accent, #b98cff) 82%, #fff);
    padding: .38em .7em;
    border-radius: 999px;
}

@media (max-width: 720px) {
    .tls-carousel-card { flex-basis: min(72vw, 240px); }
    .tls-carousel-nav { display: none; }
}

/* ---------- _MostBookedPujas partial inside the carousel track ---------- */
/* The partial renders `.puja-list > ul.d-flex > li`. Make the <ul> a flex
   row of proper carousel tiles instead of a single small block child. */
.tls-carousel-track > .puja-list {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tls-carousel-track > .puja-list > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: clamp(14px, 1.8vw, 22px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tls-carousel-track > .puja-list > ul > li {
    scroll-snap-align: start;
    flex: 0 0 clamp(220px, 24vw, 280px);
    width: clamp(220px, 24vw, 280px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px -18px rgba(28, 42, 99, .55), 0 3px 8px rgba(8, 3, 18, .35);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease;
}

.tls-carousel-track > .puja-list > ul > li:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px -20px rgba(185, 140, 255, .6);
}

/* image media area — make images large and consistent */
.tls-carousel-track > .puja-list .imgbox {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(closest-side, #f3ecfb, #efe6fb 78%);
}

.tls-carousel-track > .puja-list .imgbox img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* keep the product name / button readable and roomy */
.tls-carousel-track > .puja-list li p {
    /*font-family: 'Jost', sans-serif;*/
    font-size: 15px;
    line-height: 1.35;
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.tls-carousel-track > .puja-list li .chooseoption,
.tls-carousel-track > .puja-list li .addcartbtn {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .tls-carousel-track > .puja-list > ul > li {
        flex-basis: min(72vw, 240px);
        width: min(72vw, 240px);
    }
}

/* ---------- trust strip ---------- */
.tls-trust-section {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px clamp(16px,4vw,28px) 20px;
}

.tls-trust-rule {
    height: 1px;
    background: linear-gradient(90deg, rgba(185,140,255,0), rgba(185,140,255,.28), rgba(185,140,255,0));
    margin-bottom: 54px;
}

.tls-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 24px;
    text-align: center;
}

@media (max-width: 720px) { .tls-trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 34px; } }

.tls-trust-item { display: flex; flex-direction: column; align-items: center; }

.tls-trust-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: linear-gradient(140deg, #f4596b, #df3450);
    box-shadow: 0 12px 28px -10px rgba(223,52,80,.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tls-trust-icon img { width: 32px; height: 32px; filter: brightness(0) invert(1); }

.tls-trust-title {
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 600;
    font-size: clamp(16px,1.5vw,19px);
    color: #f4eeff;
    letter-spacing: .01em;
}

.tls-trust-desc {
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 300;
    font-size: clamp(13px,1.1vw,14.5px);
    color: rgba(214,201,240,.62);
    margin-top: 5px;
}

/* ---------- FAQ / Why Buy ---------- */
.tls-faq-section {
    position: relative;
    z-index: 1;
    /*max-width: 940px;*/
    margin: 0 auto;
    padding: 14px clamp(16px,4vw,28px) 120px;
}

.tls-faq-intro {
    text-align: center;
    margin: 0 auto 40px;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px,1.6vw,21px);
    line-height: 1.6;
    color: rgba(216,203,242,.72);
    max-width: 60ch;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
}

.tls-faq-rule {
    width: 64px;
    height: 2px;
    margin: 0 auto;
    background: #b98cff;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(185,140,255,.6);
}

.tls-faq-item { border-top: 1px solid rgba(185,140,255,.16); }
.tls-faq-item:last-child { border-bottom: 1px solid rgba(185,140,255,.16); }

.tls-faq-item summary {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 6px;
    cursor: pointer;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    color: #f4eeff;
    font-weight: 600;
    font-size: clamp(19px,2vw,26px);
    line-height: 1.2;
}

.tls-faq-item summary::-webkit-details-marker { display: none; }
.tls-faq-item summary:hover { color: #ffffff; }

.tls-faq-chevron {
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(185,140,255,.4);
    color: #b98cff;
    font-size: 16px;
    transition: transform .3s ease, background .3s ease;
}

.tls-faq-item[open] .tls-faq-chevron { transform: rotate(180deg); background: rgba(155,109,255,.22); }

.tls-faq-answer {
    padding: 0 6px 26px;
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 300;
    font-size: clamp(14.5px,1.3vw,17px);
    line-height: 1.75;
    color: rgba(214,201,240,.72);
    max-width: 80ch;
}

/* ---------- How Puja Works (shared partial re-themed for dark page) ---------- */
/* Remove the light-pink card background and switch text to the cosmic theme. */
.tls-page .anytime-puja-work.bg-light-pink {
    background: transparent !important;
    color: #e9def6;
}

.tls-page .anytime-puja-work .heading {
    color: #f4eeff;
}

/* accent rule under the heading */
.tls-page .anytime-puja-work .main-heading .heading {
    position: relative;
    padding-bottom: 18px;
}
.tls-page .anytime-puja-work .main-heading .heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 14px auto 0;
    background: #b98cff;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(185, 140, 255, .6);
}

.tls-page .anytime-puja-work p {
    color: rgba(214, 201, 240, .78);
}

.tls-page .anytime-puja-work ul li .fw-bold {
    color: #f4eeff !important;
}

/* step icons: keep them visible on the dark background */
.tls-page .anytime-puja-work ul li img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

/* "Learn More" button re-styled for the dark theme */
.tls-page .anytime-puja-work .button-red.bg-white {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(185, 140, 255, .45);
    color: #f1e9ff !important;
    transition: background .2s, border-color .2s;
}
.tls-page .anytime-puja-work .button-red.bg-white:hover {
    background: rgba(185, 140, 255, .18) !important;
    border-color: #b98cff;
}

/* ---------- Bootstrap accordion (_collapsible) re-themed for dark FAQ ---------- */
/* The partial uses `.accordion-button.text-black` etc. Override to the cosmic theme. */
.tls-faq-section .accordion,
.tls-faq-section .accordion-item {
    background: transparent !important;
    border: 0;
}

.tls-faq-section .accordion-item {
    border-top: 1px solid rgba(185, 140, 255, .16) !important;
}
.tls-faq-section .accordion-item:last-child {
    border-bottom: 1px solid rgba(185, 140, 255, .16) !important;
}

.tls-faq-section .accordion-button {
    background: transparent !important;
    color: #f4eeff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif !important;*/
    font-weight: 600 !important;
    font-size: clamp(19px, 2vw, 26px) !important;
    line-height: 1.2;
    padding: 22px 6px;
    box-shadow: none !important;
}

.tls-faq-section .accordion-button:hover { color: #ffffff !important; }
.tls-faq-section .accordion-button:not(.collapsed) { color: #ffffff !important; }
.tls-faq-section .accordion-button:focus { box-shadow: none !important; border-color: transparent; }

/* replace the dark Bootstrap chevron with a themed purple one */
.tls-faq-section .accordion-button::after {
    filter: invert(72%) sepia(38%) saturate(900%) hue-rotate(220deg) brightness(1.05);
    opacity: .9;
}

.tls-faq-section .accordion-body {
    padding: 0 6px 26px;
}

.tls-faq-section .accordion-body p,
.tls-faq-section .accordion-body {
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 300;
    font-size: clamp(14.5px, 1.3vw, 17px);
    line-height: 1.75;
    color: rgba(214, 201, 240, .78);
    margin-bottom: 0;
}

/* ---------- Shop by Concern (_PujaCategories) re-themed for dark page ---------- */
/* Remove the white block and switch heading + labels to the cosmic theme. */
.tls-page .select-puja.bg-white {
    background: transparent !important;
    color: #e9def6;
}

.tls-page .select-puja .heading {
    color: #f4eeff;
    position: relative;
    padding-bottom: 18px;
}
.tls-page .select-puja .main-heading .heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 14px auto 0;
    background: #b98cff;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(185, 140, 255, .6);
}

/* category tile labels */
.tls-page .select-puja .item p,
.tls-page .select-puja .item .text-black {
    color: #f4eeff !important;
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 500;
}

/* ---- static 4-per-row grid (no Owl carousel) ----
   The partial markup ships with Owl classes + inline styles baked in.
   Neutralize them and lay the items out as a responsive CSS grid. */
.tls-page .select-puja .owl-carousel,
.tls-page .select-puja .puja-categories {
    display: block;
}
.tls-page .select-puja .owl-stage-outer {
    overflow: visible;
    padding: 12px 0;
}
.tls-page .select-puja .owl-stage {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100% !important;              /* override inline width:1320px */
    transform: none !important;          /* override inline translate3d */
    transition: none !important;
}
.tls-page .select-puja .owl-item {
    width: auto !important;              /* override inline width:300px */
    margin: 0 !important;                /* override inline margin-right:24px */
    float: none;
}
/* hide carousel nav arrows since it's now a static grid */
.tls-page .select-puja .puja-categories-nav,
.tls-page .select-puja .owl-nav,
.tls-page .select-puja .owl-dots {
    display: none !important;
}

@media (max-width: 1199px) {
    .tls-page .select-puja .owl-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tls-page .select-puja .owl-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    .tls-page .select-puja .owl-stage { grid-template-columns: 1fr; }
}

/* give each category card a subtle themed frame instead of the white card look */
.tls-page .select-puja .owl-item .item {
    height: 100%;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(185, 140, 255, .22);
    background: rgba(255, 255, 255, .03);
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.tls-page .select-puja .owl-item .item:hover {
    transform: translateY(-6px);
    border-color: #b98cff;
    background: rgba(185, 140, 255, .08);
}

.tls-page .select-puja .imgrounded {
    border-radius: 12px;
    overflow: hidden;
}
.tls-page .select-puja .imgrounded img {
    border-radius: 12px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================================
   Product List Page (GetProductList.cshtml) — cosmic theme overlay
   Layout is preserved; only colors/backgrounds/typography are re-themed.
   Scoped under .tls-page .tls-plp so nothing leaks to other pages.
   ========================================================================= */
.tls-page .tls-plp {
    position: relative;
    z-index: 1;
}

/* breadcrumb bar (was .bg-red) */
.tls-page .tls-plp .bg-red {
    background: transparent !important;
    border-bottom: 1px solid rgba(185, 140, 255, .16);
}
.tls-page .tls-plp .bg-red a,
.tls-page .tls-plp .bg-red .breadcrumbs,
.tls-page .tls-plp .bg-red .text-white {
    color: rgba(214, 201, 240, .82) !important;
    /*font-family: 'Jost', sans-serif;*/
}
.tls-page .tls-plp .bg-red img { filter: brightness(0) invert(1); opacity: .8; }

/* category heading band (was .bg-light-pink) */
.tls-page .tls-plp .puja-categories-sec.bg-light-pink {
    background: transparent !important;
}
.tls-page .tls-plp .category-heading-main {
    color: #f4eeff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 600;
    font-size: clamp(26px, 3vw, 40px);
}

/* filter count + toolbar text */
.tls-page .tls-plp .puja-products p,
.tls-page .tls-plp .puja-products .fw-bold {
    color: rgba(224, 213, 245, .9) !important;
    /*font-family: 'Jost', sans-serif;*/
}

/* category dropdown button */
.tls-page .tls-plp .category-button .btn.bg-white {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(185, 140, 255, .4) !important;
    color: #f1e9ff !important;
    /*font-family: 'Jost', sans-serif;*/
}
.tls-page .tls-plp .category-button .btn.bg-white:hover {
    background: rgba(185, 140, 255, .16) !important;
    border-color: #b98cff !important;
}
/* dropdown menu panel */
.tls-page .tls-plp .category-button .dropdown-menu {
    background: #1a0e36;
    border: 1px solid rgba(185, 140, 255, .28);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .8);
}
.tls-page .tls-plp .category-button .dropdown-menu a,
.tls-page .tls-plp .category-button .dropdown-menu .text-dark {
    color: rgba(224, 213, 245, .88) !important;
    /*font-family: 'Jost', sans-serif;*/
}
.tls-page .tls-plp .category-button .dropdown-menu a:hover {
    color: #ffffff !important;
}
.tls-page .tls-plp .category-button .dropdown-menu a.fw-bold {
    color: #b98cff !important;
}

/* pagination */
.tls-page .tls-plp .pagination .page-link {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(185, 140, 255, .28);
    color: #e9def6;
    /*font-family: 'Jost', sans-serif;*/
}
.tls-page .tls-plp .pagination .page-link:hover {
    background: rgba(185, 140, 255, .18);
    border-color: #b98cff;
    color: #ffffff;
}
.tls-page .tls-plp .pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, .02);
    color: rgba(214, 201, 240, .4);
    border-color: rgba(185, 140, 255, .14);
}

/* "Why Perform Puja" heading block on this page (mirrors home FAQ head) */
.tls-page .tls-plp .collapsible-sec .heading {
    color: #f4eeff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 600;
}
.tls-page .tls-plp .collapsible-sec p {
    color: rgba(214, 201, 240, .78) !important;
    /*font-family: 'Jost', sans-serif;*/
}
/* make the accordion match the dark FAQ theme (same rules as home) */
.tls-page .tls-plp .collapsible-sec .accordion,
.tls-page .tls-plp .collapsible-sec .accordion-item {
    background: transparent !important;
    border: 0;
}
.tls-page .tls-plp .collapsible-sec .accordion-item {
    border-top: 1px solid rgba(185, 140, 255, .16) !important;
}
.tls-page .tls-plp .collapsible-sec .accordion-item:last-child {
    border-bottom: 1px solid rgba(185, 140, 255, .16) !important;
}
.tls-page .tls-plp .collapsible-sec .accordion-button {
    background: transparent !important;
    color: #f4eeff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif !important;*/
    font-weight: 600 !important;
    font-size: clamp(18px, 1.8vw, 24px) !important;
    box-shadow: none !important;
}
.tls-page .tls-plp .collapsible-sec .accordion-button::after {
    filter: invert(72%) sepia(38%) saturate(900%) hue-rotate(220deg) brightness(1.05);
    opacity: .9;
}
.tls-page .tls-plp .collapsible-sec .accordion-body,
.tls-page .tls-plp .collapsible-sec .accordion-body p {
    color: rgba(214, 201, 240, .78) !important;
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 300;
}

/* Consult Now band (was .bg-dark-marron) — soften into the theme */
.tls-page .tls-plp .chat-call-section.bg-dark-marron {
    background: linear-gradient(180deg, rgba(42, 22, 86, .55), rgba(26, 14, 54, .55)) !important;
    border-top: 1px solid rgba(185, 140, 255, .16);
    border-bottom: 1px solid rgba(185, 140, 255, .16);
}
.tls-page .tls-plp .chat-call-section .heading { /*font-family: 'Cormorant Garamond', Georgia, serif;*/ }

/* ---- Product grid on the PLP restyled to match the themed card format ----
   (4 per row, dark translucent frame, rounded cover image, centered label).
   Overrides the light 5-per-row Bootstrap look from site.css. */
.tls-page .tls-plp .pujaoptions-sec .puja-list ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* neutralize the site.css li width/margins so the grid controls layout */
.tls-page .tls-plp .pujaoptions-sec .puja-list ul li {
    width: auto !important;
    margin: 0 !important;
    float: none;
    background: rgba(255, 255, 255, .03) !important;   /* was bg-white */
    border: 1px solid rgba(185, 140, 255, .22);
    border-radius: 20px !important;
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .6);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.tls-page .tls-plp .pujaoptions-sec .puja-list ul li:hover {
    transform: translateY(-6px);
    border-color: #b98cff;
    background: rgba(185, 140, 255, .08) !important;
}
/* reset site.css nth-child left-margins inside the grid */
.tls-page .tls-plp .pujaoptions-sec .puja-list ul li:nth-child(5n+1),
.tls-page .tls-plp .pujaoptions-sec .puja-list ul li:nth-child(3n+1) {
    margin-left: 0 !important;
}

/* image: rounded cover, consistent aspect */
.tls-page .tls-plp .pujaoptions-sec .puja-list .imgbox,
.tls-page .tls-plp .pujaoptions-sec .puja-list .imgrounded {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: radial-gradient(closest-side, #f3ecfb, #efe6fb 78%);
}
.tls-page .tls-plp .pujaoptions-sec .puja-list .imgbox img,
.tls-page .tls-plp .pujaoptions-sec .puja-list .imgrounded img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* product name → centered white label in theme font */
.tls-page .tls-plp .pujaoptions-sec .puja-list li p.fw-bold,
.tls-page .tls-plp .pujaoptions-sec .puja-list li p.text-black {
    color: #f4eeff !important;
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}

/* keep the buy button but let it sit nicely on the dark card */
.tls-page .tls-plp .pujaoptions-sec .puja-list li .chooseoption,
.tls-page .tls-plp .pujaoptions-sec .puja-list li .addcartbtn {
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .tls-page .tls-plp .pujaoptions-sec .puja-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tls-page .tls-plp .pujaoptions-sec .puja-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    .tls-page .tls-plp .pujaoptions-sec .puja-list ul { grid-template-columns: 1fr; }
}

/* =========================================================================
   Puja Detail Page (Products/Index.cshtml) — cosmic theme overlay
   Layout preserved; colors/backgrounds/typography re-themed.
   Scoped under .tls-page .tls-pdp. (.tls-plp overrides also apply since the
   wrapper carries both classes — breadcrumb, collapsible, consult-now, etc.)
   ========================================================================= */

/* main product-detail wrapper (was .bg-white) */
.tls-page .tls-pdp .product-detail.bg-white {
    background: transparent !important;
}

/* product title, rating, duration text */
.tls-page .tls-pdp .product-detail h2#pujaNameTitle,
.tls-page .tls-pdp .product-detail #pujaNameTitle {
    color: #f6f1ff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 600;
}
.tls-page .tls-pdp .product-detail .rating-container,
.tls-page .tls-pdp .product-detail .rating-container span {
    color: rgba(224, 213, 245, .85) !important;
    /*font-family: 'Jost', sans-serif;*/
}

/* price line */
.tls-page .tls-pdp .product-detail #pujaAmount,
.tls-page .tls-pdp .product-detail #pujaAmount del {
    color: #f6f1ff !important;
}
.tls-page .tls-pdp .product-detail #pujaAmount del {
    color: rgba(214, 201, 240, .55) !important;
}
.tls-page .tls-pdp .product-detail #pujaAmount .color-darkpink {
    color: #ffbf6b !important;   /* warm gold accent for the live price */
}

/* supporting paragraphs */
.tls-page .tls-pdp .product-detail p {
    color: rgba(214, 201, 240, .8) !important;
    /*font-family: 'Jost', sans-serif;*/
}
.tls-page .tls-pdp .product-detail .fw-bold span { color: #f4eeff !important; }

/* variant selector buttons */
.tls-page .tls-pdp .product-detail .btn.border-secondary {
    color: #e9def6 !important;
    border-color: rgba(185, 140, 255, .4) !important;
    background: rgba(255, 255, 255, .03);
}
.tls-page .tls-pdp .product-detail .btn.border-secondary:hover {
    border-color: #b98cff !important;
    background: rgba(185, 140, 255, .12);
}
.tls-page .tls-pdp .product-detail .btn.border-red.bg-light-pink {
    color: #2a1c42 !important;
    background: color-mix(in srgb, #b98cff 82%, #fff) !important;
    border-color: #b98cff !important;
}

/* tagline / personalized-message box (was warning-bordered white) */
.tls-page .tls-pdp .product-detail .expert-share {
    border-color: rgba(185, 140, 255, .4) !important;
    background: rgba(255, 255, 255, .04);
    color: #e9def6;
}
.tls-page .tls-pdp .product-detail .expert-share .h6,
.tls-page .tls-pdp .product-detail .expert-share div {
    color: #f4eeff !important;
}

/* long description (raw HTML from CMS) */
.tls-page .tls-pdp .product-info,
.tls-page .tls-pdp .product-info * {
    color: rgba(220, 209, 244, .85) !important;
}
.tls-page .tls-pdp .product-info h1,
.tls-page .tls-pdp .product-info h2,
.tls-page .tls-pdp .product-info h3,
.tls-page .tls-pdp .product-info h4,
.tls-page .tls-pdp .product-info strong,
.tls-page .tls-pdp .product-info b {
    color: #f4eeff !important;
}
.tls-page .tls-pdp .product-info a { color: #c9a6ff !important; }

/* "You May Also Like" band + heading (was .bg-light-pink) */
.tls-page .tls-pdp .most-booked-pujas.bg-light-pink {
    background: transparent !important;
}
.tls-page .tls-pdp .most-booked-pujas .heading {
    color: #f4eeff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 600;
    position: relative;
    padding-bottom: 18px;
}
.tls-page .tls-pdp .most-booked-pujas .main-heading .heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 14px auto 0;
    background: #b98cff;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(185, 140, 255, .6);
}

/* "You May Also Like" product grid → same themed card format as PLP */
.tls-page .tls-pdp .most-booked-pujas .puja-list ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.tls-page .tls-pdp .most-booked-pujas .puja-list ul li {
    width: auto !important;
    margin: 0 !important;
    float: none;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(185, 140, 255, .22);
    border-radius: 20px !important;
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .6);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.tls-page .tls-pdp .most-booked-pujas .puja-list ul li:hover {
    transform: translateY(-6px);
    border-color: #b98cff;
    background: rgba(185, 140, 255, .08) !important;
}
.tls-page .tls-pdp .most-booked-pujas .puja-list ul li:nth-child(5n+1),
.tls-page .tls-pdp .most-booked-pujas .puja-list ul li:nth-child(3n+1) {
    margin-left: 0 !important;
}
.tls-page .tls-pdp .most-booked-pujas .puja-list .imgbox {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: radial-gradient(closest-side, #f3ecfb, #efe6fb 78%);
}
.tls-page .tls-pdp .most-booked-pujas .puja-list .imgbox img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tls-page .tls-pdp .most-booked-pujas .puja-list li p.fw-bold,
.tls-page .tls-pdp .most-booked-pujas .puja-list li p.text-black {
    color: #f4eeff !important;
    /*font-family: 'Jost', sans-serif;*/
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}

@media (max-width: 1199px) {
    .tls-page .tls-pdp .most-booked-pujas .puja-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tls-page .tls-pdp .most-booked-pujas .puja-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    .tls-page .tls-pdp .most-booked-pujas .puja-list ul { grid-template-columns: 1fr; }
}

/* "Why Perform Puja" heading block on the PDP (has .products variant) */
.tls-page .tls-pdp .collapsible-sec.bg-white {
    background: transparent !important;
}

/* ---- gold "Choose Options" / "Add to Cart" buttons: force black text ----
   Inside the dark themed cards these buttons kept inheriting white text,
   making them illegible on the gold background. Force black ink on the
   button, its anchor wrapper, and any nested text. */
.tls-page .chooseoption,
.tls-page .addcartbtn,
.tls-page .puja-list .bg-darkyellow,
.tls-page .puja-list .bg-gold,
.tls-page .puja-list a:has(> .chooseoption),
.tls-page .puja-list a:has(> .addcartbtn) {
    color: #000 !important;
}
.tls-page .chooseoption,
.tls-page .chooseoption *,
.tls-page .addcartbtn,
.tls-page .addcartbtn * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* =========================================================================
   Checkout / Payment page (Checkout/Index.cshtml) — cosmic theme (UI only)
   This page is Layout=null and self-contained. We only restyle visuals;
   no layout, positioning, or scroll behaviour is changed (payment-safe).
   Scoped under body.tls-checkout.
   ========================================================================= */
body.tls-checkout {
    background: radial-gradient(135% 90% at 50% -12%, #2a1656 0%, #1a0e36 42%, #0c0518 78%, #08030f 100%) fixed,
                #0a0418;
    color: #e9def6;
    /*font-family: 'Jost', sans-serif;*/
}

/* header / navbar */
    body.tls-checkout .checkout-header-sec .navbar,
    body.tls-checkout .navbar#navbar {
        background: #321675 !important;
        border-bottom: 1px solid rgba(185, 140, 255, .18);
    }
body.tls-checkout .anytime-logo-text { color: #f4eeff !important; }
body.tls-checkout .anytime-logo-subtext { color: rgba(214, 201, 240, .7) !important; }

/* breadcrumb progress bar (was solid red) */
body.tls-checkout .bg-red {
    background: rgba(16, 8, 34, .6) !important;
    border-bottom: 1px solid rgba(185, 140, 255, .16);
}

/* section / card headings + general text */
body.tls-checkout h4,
body.tls-checkout .colorblack { color: #f6f1ff !important; }
body.tls-checkout .coupon-label,
body.tls-checkout label.form-check-label,
body.tls-checkout .fw-semibold { color: #e6dcf7 !important; }

/* the light "cards" (payment options, details, coupon, summary) */
body.tls-checkout .shadow-gray {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(185, 140, 255, .2);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .7) !important;
    color: #e9def6;
}
body.tls-checkout .anytime-payment-options-list {
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
    border: 1px solid rgba(185, 140, 255, .2);
}
/* NOTE: the default payment tile ships with a static `active` class in its
   markup that is never removed, so we do NOT key the highlight off .active
   for .shadow-gray tiles — the selected state is driven solely by
   .tls-pay-active (kept in sync with the checked radio). */
body.tls-checkout .anytime-payment-options-list.active {
    border-color: #b98cff;
    background: rgba(185, 140, 255, .1) !important;
}
body.tls-checkout .border-bottom { border-color: rgba(185, 140, 255, .2) !important; }
body.tls-checkout hr.hrline { border-color: rgba(185, 140, 255, .22); opacity: 1; }

/* form inputs — keep readable on dark, but leave Stripe's own iframe fields alone */
body.tls-checkout .form-control,
body.tls-checkout input[type="text"],
body.tls-checkout input[type="tel"],
body.tls-checkout input[type="email"],
body.tls-checkout #anytime-coupon-code {
    background: #fff; /*rgba(255, 255, 255, .06);*/
    border: 1px solid rgba(185, 140, 255, .3);
    color: #000 /*#f4eeff*/;
}
body.tls-checkout .form-control::placeholder,
body.tls-checkout input::placeholder { color: rgba(214, 201, 240, .5); }
body.tls-checkout .form-control:focus {
    background: rgba(255, 255, 255, .08);
    border-color: #b98cff;
    box-shadow: 0 0 0 .2rem rgba(185, 140, 255, .2);
    color: #f4eeff;
}

/* Stripe card element must stay on a light field (it's an embedded iframe).
   Keep those boxes light so the card inputs remain legible. */
body.tls-checkout .stripe-card-element,
body.tls-checkout .bg-light-gray {
    background: #f6f3fc !important;
    border-radius: 8px;
}
body.tls-checkout .stripe-card-element .field,
body.tls-checkout #card-number-element,
body.tls-checkout #card-expiry-element,
body.tls-checkout #card-cvc-element { color: #1a1030; }

/* payment summary numbers */
body.tls-checkout .subTotal,
body.tls-checkout .taxamount,
body.tls-checkout #orderAmt,
body.tls-checkout #totalamt,
body.tls-checkout .discount { color: #f6f1ff !important; }

/* coupon "Apply Now" outline button */
body.tls-checkout .btn-outline-secondary {
    color: #e9def6 !important;
    border-color: rgba(185, 140, 255, .45) !important;
}
body.tls-checkout .btn-outline-secondary:hover {
    background: rgba(185, 140, 255, .16) !important;
    border-color: #b98cff !important;
    color: #fff !important;
}

/* gold "Pay Now" / "Start Shopping" buttons — dark text for legibility */
body.tls-checkout .btn.bg-gold {
    color: #000 !important;
}

/* empty-cart card */
body.tls-checkout .checkout-empty-div .border {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(185, 140, 255, .2) !important;
}
body.tls-checkout .checkout-empty-div h4,
body.tls-checkout .checkout-empty-div p { color: #f4eeff !important; }

/* small helper text stays soft but visible */
body.tls-checkout .text-secondary { color: rgba(214, 201, 240, .6) !important; }

/* cart product names in the payment summary use Bootstrap .text-dark →
   force light text so they're legible on the themed dark card. */
body.tls-checkout .cartproductlist .productName,
body.tls-checkout .cartproductlist .productName span,
body.tls-checkout .cartproductlist .productName a,
body.tls-checkout .cartproductlist .text-dark {
    color: #f4eeff !important;
}

/* payment-method tiles: whole tile clickable + hover highlight like category cards */
body.tls-checkout #gatewayJsonData .shadow-gray {
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
body.tls-checkout #gatewayJsonData .shadow-gray:hover {
    transform: translateY(-4px);
    border-color: #b98cff !important;
    background: rgba(185, 140, 255, .1) !important;
    box-shadow: 0 20px 40px -20px rgba(185, 140, 255, .55) !important;
}
/* selected tile */
body.tls-checkout #gatewayJsonData .shadow-gray.tls-pay-active {
    border-color: #b98cff !important;
    background: rgba(185, 140, 255, .14) !important;
    box-shadow: 0 0 0 1px rgba(185, 140, 255, .5) !important;
}

/* =========================================================================
   Thank You / Order Confirmation (Home/ThankYou.cshtml) — cosmic theme
   Layout preserved; visual overlay only. Scoped under .tls-thankyou.
   (.tls-plp themes the breadcrumb; .tls-pdp themes the "You May Also Like"
   grid + heading — both reused here.)
   ========================================================================= */

/* ensure page content sits above the absolute background layers */
.tls-thankyou-inner {
    position: relative;
    z-index: 1;
}

/* order card + sankalp form panels (were .bg-white .shadow-sm) */
.tls-thankyou .thanku-inner.bg-white,
.tls-thankyou .sankalp.bg-white {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(185, 140, 255, .2) !important;
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .7) !important;
    color: #e9def6;
}

/* success heading + body text */
.tls-thankyou .thanku-inner-left h1,
.tls-thankyou .success-color {
    color: #9be7b0 !important;   /* keep a success-green tint, brightened for dark */
}
.tls-thankyou .thanku-section h2 { color: #f6f1ff !important; }
.tls-thankyou .thanku-inner p,
.tls-thankyou .thanku-inner b,
.tls-thankyou .sankalp p,
.tls-thankyou .sankalp b { color: #e6dcf7 !important; }

/* order line items — product names use .text-dark */
.tls-thankyou .productName .text-dark,
.tls-thankyou .productName a,
.tls-thankyou .productName p { color: #f4eeff !important; }
.tls-thankyou .pbox hr.hrline,
.tls-thankyou hr.hrline { border-color: rgba(185, 140, 255, .22); opacity: 1; }
.tls-thankyou .border-bottom { border-color: rgba(185, 140, 255, .2) !important; }

/* sankalp form inputs (form-floating) */
.tls-thankyou .form-control {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(185, 140, 255, .3) !important;
    color: #f4eeff !important;
}
.tls-thankyou .form-control:focus {
    background: rgba(255, 255, 255, .08) !important;
    border-color: #b98cff !important;
    box-shadow: 0 0 0 .2rem rgba(185, 140, 255, .2) !important;
}
.tls-thankyou .form-floating > label,
.tls-thankyou label { color: rgba(214, 201, 240, .7) !important; }
.tls-thankyou .form-text,
.tls-thankyou .text-muted { color: rgba(214, 201, 240, .55) !important; }

/* astrologer CTA banner (was .bg-light-pink) */
.tls-thankyou .bg-light-pink {
    background: transparent !important;
}
.tls-thankyou .anytime-astrologers h2 { color: #f6f1ff !important; }
.tls-thankyou .anytime-astrologers p { color: rgba(214, 201, 240, .8) !important; }

/* "You May Also Like" band on this page (was .bg-white) */
.tls-thankyou .most-booked-pujas.bg-white { background: transparent !important; }

/* gold buttons → dark text */
.tls-thankyou .btn.bg-gold { color: #000 !important; }

/* thank-you modal stays a solid dark panel */
.tls-thankyou-inner ~ .modal .modal-content,
.tls-thankyou .modal .modal-content {
    background: #1a0e36;
    border: 1px solid rgba(185, 140, 255, .28);
    color: #e9def6;
}
.tls-thankyou .modal h2,
.tls-thankyou .modal p { color: #f4eeff !important; }

/* =========================================================================
   Booking Guide (Home/BookingGuide.cshtml) — cosmic theme overlay
   Layout preserved; visual overlay only. Scoped under .tls-bookingguide.
   (.tls-plp themes the breadcrumb.)
   ========================================================================= */

/* ensure content sits above the background layers */
.tls-bookingguide-inner { position: relative; z-index: 1; }

/* section headings */
.tls-bookingguide .bookingguide-sec .heading_2,
.tls-bookingguide .main-heading h2,
.tls-bookingguide .heading {
    color: #f4eeff !important;
    /*font-family: 'Cormorant Garamond', Georgia, serif;*/
    font-weight: 600;
}

/* body copy */
.tls-bookingguide .guide p,
.tls-bookingguide .guide-info p {
    color: rgba(216, 203, 242, .82) !important;
    /*font-family: 'Jost', sans-serif;*/
}
.tls-bookingguide .guide-info .fw-bold {
    color: #f4eeff !important;
}

/* booking-guide process band (was .bg-light-pink) */
.tls-bookingguide .OnlinePujaBookingGuide.bg-light-pink {
    background: transparent !important;
}
.tls-bookingguide .OnlinePujaBookingGuide .heading {
    color: #f4eeff !important;
    position: relative;
    padding-bottom: 18px;
}
.tls-bookingguide .OnlinePujaBookingGuide .main-heading .heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 14px auto 0;
    background: #b98cff;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(185, 140, 255, .6);
}
.tls-bookingguide .OnlinePujaBookingGuide p {
    color: rgba(216, 203, 242, .82) !important;
    /*font-family: 'Jost', sans-serif;*/
}
/* process-step labels */
.tls-bookingguide .process-step p {
    color: #e6dcf7 !important;
    font-weight: 500;
}

/* booking-guide process-step icons → render fully red on the dark theme.
   The SVGs mix default-black paths and #ee4e5e paths; force them all red. */
.tls-bookingguide .process-step .step svg path,
.tls-bookingguide .process-step .step svg rect,
.tls-bookingguide .process-step .step svg g > * {
    fill: #ee4e5e !important;
}
/* keep the small inner detail marks readable (the white cut-outs inside the
   phone / camera / document icons) so the icons stay legible */
.tls-bookingguide .process-step .step svg path[fill="#fff"],
.tls-bookingguide .process-step .step svg [fill="#fff"] {
    fill: #0a0418 !important;
}

/* =========================================================================
   Brand wordmark (TAROT gold + LIFE white) + dashed tagline.
   Reusable class .tls-brand — used in the checkout header and search popup
   (the main site header has its own copy scoped under #navbar).
   ========================================================================= */
.tls-brand { min-width: 0; }
    .tls-brand .anytime-logo-text {
        font-weight: 500 !important;
        letter-spacing: .01em;
        line-height: 1.05;
        text-transform: uppercase;
        font-size: clamp(22px, 6vw, 30px) !important;
        white-space: nowrap;
    }
.tls-brand .anytime-logo-text .tls-brand-tarot,
.tls-brand .anytime-logo-text .tls-brand-life { display: inline !important; }
.tls-brand .anytime-logo-text .tls-brand-tarot { color: #f4b41a !important; }
.tls-brand .anytime-logo-text .tls-brand-life { color: #ffffff !important; }

.tls-brand .anytime-logo-subtext {
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-size: clamp(8px, 2.4vw, 11px) !important;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: capitalize;
    white-space: nowrap;
}
    .tls-brand .anytime-logo-subtext .tls-tag-line {
        display: inline-block;
        flex: 0 0 auto;
        width: clamp(10px, 4vw, 20px);
        height: 1px;
        background: linear-gradient(80deg, transparent, #fff 0%, #fff 1000%, transparent);
    }