/* AstroSaathi shop, puja and reports grids. Tokens: as-ui.css; the filter bar and pager: as-list.css / as-ui.css. */

.as-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; margin-bottom: 16px; }
.as-filterbar__search { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; position: relative; margin: 0; }
.as-filterbar__search > i { position: absolute; left: 14px; color: var(--as-muted); pointer-events: none; }
.as-filterbar__search .as-input { padding-left: 40px; }
.as-filterbar__selects { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.as-filterbar__selects .as-select { min-width: 220px; }
@media (max-width: 640px) { .as-filterbar__selects, .as-filterbar__selects .as-select { width: 100%; min-width: 0; } }

.as-cats--start { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.as-cats--start a { flex: none; }
/* On a phone the chip row scrolls out to the screen edge, not to the page gutter. */
@media (max-width: 760px) {
    .as-cats--start { margin-inline: calc(-1 * var(--as-gutter)); padding-inline: var(--as-gutter); scroll-padding-inline: var(--as-gutter); scrollbar-width: none; }
    .as-cats--start::-webkit-scrollbar { display: none; }
}

.as-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
@media (max-width: 1100px) { .as-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .as-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.as-product {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--as-radius-lg);
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.as-product:hover { transform: translateY(-3px); box-shadow: var(--as-shadow-lg); border-color: var(--as-primary); }
.as-product__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff6e0, #ffe2a6); flex: none; }
:root[data-theme="dark"] .as-product__media { background: radial-gradient(circle at 50% 40%, #2a2214, #15110b); }
/* contain: the admin's pictures come in any shape, often with words in them - none is cut. */
.as-product__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.as-product:hover .as-product__media img { transform: scale(1.05); }
.as-product__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; flex: 1; }
.as-product h2,
.as-product .as-product__name { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.as-product h2 a,
.as-product .as-product__name a { color: var(--as-text) !important; text-decoration: none !important; }
.as-product p { margin: 0; color: var(--as-muted); font-size: .84rem; line-height: 1.5; }
.as-product__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.as-product__price { font-family: var(--as-font-head); font-weight: 800; font-size: 1.1rem; color: var(--as-text); }
.as-product__price small { font-size: .74rem; font-weight: 500; color: var(--as-muted); }

@media (max-width: 420px) {
    .as-product__foot .as-btn { flex: 1 1 100%; }
}

.as-shop-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.as-shop-trust .as-card { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.as-shop-trust i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--as-primary-soft); color: var(--as-primary-2); }
.as-shop-trust strong { display: block; font-family: var(--as-font-head); font-size: .95rem; color: var(--as-text); }
.as-shop-trust span { display: block; color: var(--as-muted); font-size: .8rem; }
@media (max-width: 900px) { .as-shop-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .as-shop-trust { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================= PUJA */
.as-pujas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
@media (max-width: 1000px) { .as-pujas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .as-pujas { grid-template-columns: minmax(0, 1fr); } }
.as-pujas--cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .as-pujas--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .as-pujas--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.as-puja { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--as-radius-lg); background: var(--as-surface); border: 1px solid var(--as-border); box-shadow: var(--as-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.as-puja:hover { transform: translateY(-3px); box-shadow: var(--as-shadow-lg); border-color: var(--as-primary); }
.as-puja__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--as-surface-3); position: relative; flex: none; }
.as-pujas--cats .as-puja__media { aspect-ratio: 1 / 1; }
.as-puja__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.as-puja:hover .as-puja__media img { transform: scale(1.05); }
.as-puja__media .as-badge { position: absolute; left: 10px; top: 10px; background: rgba(20, 14, 4, .78); color: #ffd65a; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.as-puja__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.as-puja h2 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.as-puja h2 a { color: var(--as-text) !important; text-decoration: none !important; }
.as-puja p { margin: 0; color: var(--as-muted); font-size: .86rem; line-height: 1.5; }
.as-puja__meta { display: grid; gap: 4px; margin-top: 4px; font-size: .84rem; color: var(--as-text-2); }
.as-puja__meta i { width: 16px; color: var(--as-primary-2); margin-right: 6px; }
.as-puja .as-btn { margin-top: auto; }
/* The button at the card's foot: cards in a row line up, however many lines the title takes. */
.as-puja__body > .as-btn { margin-top: auto; }
.as-puja__body > :nth-last-child(2) { margin-bottom: 8px; }

/* a missing picture: the site's small symbol, not a stretched icon */
.as-puja__media img.is-fallback,
.as-product__media img.is-fallback { object-fit: contain; padding: 24%; opacity: .35; filter: grayscale(.4); }

/* =============================================== one product (/product/{slug}) */
.as-pdp {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--as-hero-bg);
    padding-block: clamp(12px, 2vw, 22px) clamp(24px, 4vw, 44px);
}
.as-pdp > .as-wheel { position: absolute; z-index: -1; width: min(620px, 80vw); right: -220px; top: -100px; opacity: .4; }
.as-pdp__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    margin-top: 12px;
    padding: clamp(14px, 2.4vw, 28px);
    border-radius: 24px;
    box-shadow: var(--as-shadow-lg);
}
.as-pdp__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #fff6e0, #ffe2a6); }
:root[data-theme="dark"] .as-pdp__media { background: radial-gradient(circle at 50% 40%, #2a2214, #15110b); }
.as-pdp__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.as-pdp__media img.is-fallback { object-fit: contain; padding: 24%; opacity: .35; filter: grayscale(.4); }
.as-pdp__info { display: grid; justify-items: start; gap: 14px; min-width: 0; }
.as-pdp .as-pdp__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; overflow-wrap: anywhere; }
.as-pdp__price { margin: 0; font-family: var(--as-font-head); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 800; color: var(--as-text); }
.as-pdp__lead { margin: 0; color: var(--as-text-2); }
.as-pdp__buy { min-width: min(320px, 100%); }
.as-pdp__note { margin: -6px 0 0; font-size: .85rem; color: var(--as-muted); }
.as-pdp__points {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 4px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed var(--as-border);
    list-style: none;
    font-size: .92rem;
    color: var(--as-text-2);
}
.as-pdp__points i { width: 22px; color: var(--as-hl); }
.as-pdp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.as-pdp__details { padding: 22px; }
.as-pdp__text { margin-top: 10px; line-height: 1.75; color: var(--as-text-2); overflow-wrap: anywhere; }
.as-pdp__faq .as-acc { margin-top: 12px; }
.as-pdp__morehead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
@media (max-width: 767px) {
    .as-pdp__main { grid-template-columns: minmax(0, 1fr); }
    .as-pdp__media { aspect-ratio: 4 / 3; }
    .as-pdp__buy { width: 100%; }
    /* fainter behind the breadcrumb */
    .as-pdp > .as-wheel { opacity: .18; }
}

/* ============================================ one puja (/puja-details/{slug}) */
.as-pujad__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.as-pujad__gallery { display: grid; gap: 10px; min-width: 0; }
.as-pujad__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--as-surface-3); }
.as-pujad__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-pujad__media img.is-fallback { object-fit: contain; padding: 22%; opacity: .35; filter: grayscale(.4); }
.as-pujad__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.as-pujad__thumbs button {
    flex: none;
    width: 76px;
    height: 58px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--as-surface-3);
    cursor: pointer;
}
.as-pujad__thumbs button[aria-pressed="true"] { border-color: var(--as-primary); }
.as-pujad__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.as-pujad__sub { margin: -6px 0 0; color: var(--as-text-2); }
.as-pujad__facts { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; color: var(--as-text-2); font-size: .95rem; }
.as-pujad__facts li { display: flex; align-items: flex-start; gap: 10px; }
.as-pujad__facts i { width: 20px; margin-top: 4px; color: var(--as-hl); }
.as-pujad__status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--as-border-2);
    background: var(--as-surface-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.as-pujad__status.is-ongoing { border-color: color-mix(in srgb, #16a34a 50%, transparent); background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; }
:root[data-theme="dark"] .as-pujad__status.is-ongoing { color: #4ade80; }
.as-pujad__status.is-ongoing::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: as-pujad-pulse 1.6s ease-in-out infinite; }
@keyframes as-pujad-pulse { 50% { opacity: .35; } }
.as-pujad__status.is-ended { color: var(--as-muted); }
.as-pujad__status b { color: var(--as-hl); }

.as-pujad__jump { position: sticky; top: calc(var(--as-header-h, 64px) + 8px); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-radius: 999px; background: color-mix(in srgb, var(--as-surface) 88%, transparent); border: 1px solid var(--as-border); box-shadow: var(--as-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.as-pujad__jump a { flex: none; padding: 8px 16px; border-radius: 999px; color: var(--as-text-2); font-weight: 600; font-size: .9rem; text-decoration: none; }
.as-pujad__jump a:hover { background: var(--as-primary-soft); color: var(--as-text); }
.as-pujad__sec { scroll-margin-top: calc(var(--as-header-h, 64px) + 80px); }
.as-pujad__sec > .as-h3 { margin-bottom: 14px; }
.as-pujad__about { padding: 22px; line-height: 1.75; color: var(--as-text-2); overflow-wrap: anywhere; }
.as-pujad__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.as-pujad__benefit { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
.as-pujad__benefit > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--as-primary-soft); color: var(--as-hl); }
.as-pujad__benefit strong { display: block; color: var(--as-text); font-family: var(--as-font-head); }
.as-pujad__benefit p { margin: 4px 0 0; font-size: .9rem; color: var(--as-text-2); overflow-wrap: anywhere; }
.as-pujad__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: as-pujad; }
.as-pujad__step { padding: 18px; counter-increment: as-pujad; }
.as-pujad__step::before { content: counter(as-pujad); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 50%; background: var(--as-btn-grad); color: var(--as-primary-ink); font-family: var(--as-font-head); font-weight: 800; box-shadow: var(--as-btn-glow); }
.as-pujad__step strong { display: block; color: var(--as-text); font-family: var(--as-font-head); }
.as-pujad__step p { margin: 4px 0 0; font-size: .9rem; color: var(--as-text-2); }
.as-pujad__packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.as-pujad__pack { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.as-pujad__pack h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.as-pujad__pack .as-pujad__for { font-size: .85rem; color: var(--as-muted); }
.as-pujad__price { margin: 0; padding: 12px; border-radius: 12px; background: var(--as-primary-soft); text-align: center; font-family: var(--as-font-head); font-size: 1.5rem; font-weight: 800; color: var(--as-text); }
.as-pujad__pack ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .92rem; color: var(--as-text-2); }
.as-pujad__pack li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.as-pujad__pack li i { margin-top: 4px; color: #16a34a; }
.as-pujad__pack .as-btn { margin-top: auto; }

@media (max-width: 991px) {
    .as-pujad__benefits,
    .as-pujad__steps,
    .as-pujad__packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .as-pujad__main { grid-template-columns: minmax(0, 1fr); }
    .as-pujad__benefits,
    .as-pujad__steps,
    .as-pujad__packs { grid-template-columns: minmax(0, 1fr); }
    .as-pujad__jump { border-radius: 14px; }
}

/* "How puja booking works": numbered step cards, as on the kundli pages (as-tools.css), which the
   puja pages do not load - the steps showed unstyled. div only: the account page's list is an <ol>. */
div.as-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; margin-top: 26px; counter-reset: step; }
div.as-steps > .as-step { position: relative; text-align: center; padding: 22px 14px 18px; counter-increment: step; }
div.as-steps > .as-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 30px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--as-btn-grad);
    color: var(--as-primary-ink);
    font-weight: 800;
    font-size: .75rem;
    line-height: 24px;
}
div.as-steps > .as-step .as-icon-tile { margin: 4px auto 10px; border-radius: 50%; }
div.as-steps > .as-step h3 { font-size: .98rem; margin-bottom: 4px; }
div.as-steps > .as-step p { margin: 0; font-size: .84rem; color: var(--as-muted); }
@media (max-width: 900px) { div.as-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }
@media (max-width: 480px) { div.as-steps { grid-template-columns: minmax(0, 1fr); } }