/*
 * Mobile homepage - the "responsive.pdf" design (Figma, 390px frame).
 *
 * Mobile-first: the rules without a media query are the 390px design itself.
 * Only four breakpoints are used, always min-width, always in this order:
 *
 *   640px   large phone / small tablet
 *   768px   tablet portrait
 *   1024px  tablet landscape / small laptop
 *   1280px  desktop
 *
 * Measurements are the design's, in px at 390 wide. The design's product-card
 * text is 4-6px, which no phone can read; those few sizes are raised to a
 * legible minimum and the cards grown to fit. Everything else is as drawn.
 */

:root {
    --mh-maroon: #7d0a0a;
    --mh-maroon-dark: #5c0000;
    --mh-red: #b3131b;
    --mh-peach: #fdebd6;
    --mh-cream: #f8f2ec;
    --mh-step: #fef7e6;
    --mh-grey-bg: #f1f1f1;
    --mh-ink: #1e1e1e;
    --mh-text: #4a4a4a;
    --mh-muted: #8a8a8a;
    --mh-line: #e6e1db;
    --mh-green: #1f6f3a;
    --mh-offer: #0b7a0b;
    --mh-footer: #1b1b1b;
    --mh-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mh-poppins: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mh-nav-h: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.mh {
    margin: 0;
    font-family: var(--mh-inter);
    color: var(--mh-ink);
    background: #fff;
    overflow-x: hidden;
    padding-bottom: calc(var(--mh-nav-h) + env(safe-area-inset-bottom, 0px));
}

body.mh.mh-has-cart { padding-bottom: calc(var(--mh-nav-h) + 84px + env(safe-area-inset-bottom, 0px)); }

.mh img { max-width: 100%; display: block; }
:where(.mh) a { color: inherit; text-decoration: none; }
/* Zero specificity, so a button's own class (.mh-btn, the shop's .cart-btn) sets its size. */
:where(.mh) button { font: inherit; }

.mh-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* One width for every section's contents; full-bleed backgrounds sit outside it. */
.mh-wrap { width: 100%; margin: 0 auto; padding: 0 16px; }

/* ---- header -------------------------------------------------------------- */
.mh-header {
    background: var(--mh-cream);
    border-bottom: 1px solid var(--mh-line);
    padding: 5px 0 14px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.mh-header-top { display: flex; align-items: center; justify-content: space-between; height: 45px; }


.mh-logo { width: 37px; height: 37px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-left: -3px; }
.mh-logo img { width: 100%; height: 100%; object-fit: cover; }

.mh-header-right { display: flex; align-items: center; gap: 18px; }

.mh-lang { position: relative; }
.mh-lang summary {
    list-style: none;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
    font-size: 12px; font-weight: 500; color: var(--mh-ink);
}
.mh-lang summary::-webkit-details-marker { display: none; }
.mh-lang summary img { width: 12px; height: 12px; border-radius: 50%; }
.mh-lang summary i { font-size: 9px; color: #555; }
.mh-lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 132px; padding: 4px;
    background: #fff; border: 1px solid var(--mh-line); border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    z-index: 60;
}
.mh-lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 13px; }
.mh-lang-menu a img { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.mh-lang-menu a:hover, .mh-lang-menu a.is-on { background: var(--mh-cream); color: var(--mh-maroon); }

/* A saved heart is filled and maroon; an unsaved one is the outline it
   always was. The count beside it is the basket's badge, in the same place
   and the same size, because they are the same kind of fact. */
.mh-hicon.is-saved,
.mh-heart.is-saved { color: var(--mh-maroon); }

.mh-hicon[data-saved-count-host] { position: relative; }
.mh-saved-count {
    position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: var(--mh-maroon); color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.mh-saved-count[hidden] { display: none; }

/* A heart is a button now, and a button brings its own look with it. */
button.mh-heart, button.mh-hicon {
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
}

.mh-account {
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: var(--mh-maroon); font-size: 17px;
}

.mh-search {
    display: flex; align-items: center; gap: 10px;
    height: 37px; margin-top: 8px; padding: 0 12px;
    background: #fff; border: 1px solid #dedede; border-radius: 12px;
}
.mh-search > i { color: #9a9a9a; font-size: 14px; }
.mh-search input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent;
    font-family: Arial, var(--mh-inter); font-size: 12px; color: var(--mh-ink);
}
.mh-search input::placeholder { color: #9aa0a6; }
.mh-mic { border: 0; background: none; color: var(--mh-maroon); font-size: 16px; padding: 4px; cursor: pointer; }

/* Search behind its own icon.

   The field used to take a whole row under the logo, before a single product
   was on the screen. It now waits behind the magnifier in the icon row and
   takes that row over when it is tapped: on a phone there is only room for one
   of the two, and the one being asked for should be the one that is there.

   The field keeps the row's height, so nothing below it moves when it opens. */
.mh-search-open {
    border: 0; background: none; padding: 0;
    cursor: pointer; font-size: 16px; color: var(--mh-ink);
}
.mh-header-in .mh-search { display: none; }
.mh-header-in.is-searching .mh-header-top { display: none; }
.mh-header-in.is-searching .mh-search { display: flex; height: 37px; margin: 4px 0; }

/* The header and the bar on the older pages.

   Those pages keep their own body and their own stylesheet, so this wrapper
   must take no box of its own — it exists only to carry the .mh class down to
   the header, so the rules that expect it apply without the page's own body
   being dragged into the homepage's typography. The foot of the page is given
   the bar's height, because the bar is fixed over it. */
.mh-chrome { display: contents; font-family: var(--mh-inter); color: var(--mh-ink); }

/* And the other way round: on a page that carries both footers, the phone one
   steps aside once there is room for the computer's. */
@media (min-width: 1024px) {
    body:has(.dh-footer) .mh-footer,
    body:has(.dh-footer) .mh-nav { display: none; }
}

/* The bar at the foot of the phone screen is fixed over the page, so the page
   needs that much room under its last line — otherwise the footer's last band
   sits behind it. The homepage sets this on its own body; this covers the
   pages that borrow the bar without borrowing the rest. */
@media not all and (min-width: 1024px) {
    body:has(.mh-nav) {
        padding-bottom: calc(var(--mh-nav-h) + env(safe-area-inset-bottom, 0px));
    }
}
body.mh-chromed { padding-bottom: calc(var(--mh-nav-h) + env(safe-area-inset-bottom, 0px)); }

/* ---- category strip ------------------------------------------------------ */
.mh-cats {
    display: flex; gap: 18px;
    padding: 25px 16px 12px;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.mh-cats::-webkit-scrollbar { display: none; }
.mh-cat { flex: 0 0 54px; scroll-snap-align: start; text-align: center; }
.mh-cat-img { display: block; width: 54px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--mh-cream); }
.mh-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.mh-cat-img i { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--mh-maroon); font-size: 20px; }
/* The label is wider than its tile in the design, centred under it on one line. */
.mh-cat > span:last-child { display: block; margin: 12px -9px 0; font-size: 10px; line-height: 1.2; color: var(--mh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- hero banner --------------------------------------------------------- */
.mh-hero { padding: 6px 16px 0; }
.mh-hero-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    border-radius: 16px; scrollbar-width: none;
}
.mh-hero-track::-webkit-scrollbar { display: none; }
.mh-hero-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 358 / 119; border-radius: 16px; overflow: hidden; }
.mh-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.mh-dots { display: flex; justify-content: center; gap: 4px; margin: 10px auto 14px; padding: 3px 5px; width: max-content; background: #ececec; border-radius: 10px; }
.mh-dots button { width: 4px; height: 4px; padding: 0; border: 0; border-radius: 50%; background: #c9c9c9; cursor: pointer; }
.mh-dots button.is-on { background: var(--mh-maroon); }

/* ---- section headings ----------------------------------------------------- */
.mh-section { padding: 18px 0 20px; }
.mh-section.is-peach { background: var(--mh-peach); }
.mh-section.is-grey { background: var(--mh-grey-bg); }

.mh-head { text-align: center; padding: 0 16px; margin-bottom: 20px; }
.mh-diya { width: 19px; height: 19px; margin: 0 auto 4px; }
.mh-head h2 { margin: 0; font-size: 22px; font-weight: 500; color: var(--mh-maroon); letter-spacing: -.01em; line-height: 1.25; }
.mh-head p { margin: 5px auto 0; max-width: 300px; font-size: 12px; line-height: 1.35; color: var(--mh-text); }

/* ---- product cards ---------------------------------------------------------- */
.mh-rail {
    display: flex; gap: 10px;
    padding: 0 16px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
}
.mh-rail::-webkit-scrollbar { display: none; }

.mh-card { flex: 0 0 calc((100% - 20px) / 2.25); scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; }
.mh-card-photo { position: relative; background: #fff; border-radius: 4px; padding: 4px; }
.mh-card-photo > a { display: block; aspect-ratio: 110 / 129; border-radius: 3px; overflow: hidden; background: #f4efe9; }
.mh-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.mh-heart {
    position: absolute; top: 9px; right: 9px;
    width: 22px; height: 22px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--mh-maroon); font-size: 11px;
}
.mh-off {
    position: absolute; left: 0; bottom: -2px;
    padding: 2px 5px; border-radius: 2px;
    background: var(--mh-offer); color: #fff;
    font-size: 9px; font-weight: 500; line-height: 1.2;
}
.mh-card-name {
    margin: 6px 0 2px; font-size: 12px; line-height: 1.25; color: var(--mh-ink);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.mh-price { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; color: var(--mh-maroon); }
.mh-price s { font-size: 13px; font-weight: 400; color: #8c8c8c; }
.mh-price small { font-size: 11px; font-weight: 400; color: var(--mh-muted); }

.mh-actions { display: flex; gap: 6px; margin-top: 8px; }
.mh-actions > * { flex: 1 1 0; min-width: 0; }
.mh-btn,
.mh-actions .cart-btn.is-add,
.mh-actions .cart-btn.is-out {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 30px; padding: 0 4px;
    border-radius: 3px; border: 1px solid var(--mh-maroon);
    font-family: var(--mh-inter); font-size: 11.5px; font-weight: 400; line-height: 1;
    white-space: nowrap; cursor: pointer;
}
.mh-btn.is-solid { background: var(--mh-maroon); color: #fff; }
.mh-btn.is-soldout { background: #f3f3f3; color: #888; border-color: #ddd; cursor: default; }
.mh-actions [hidden] { display: none; }
.mh-btn.is-line,
.mh-actions .cart-btn.is-add { background: #fff; color: var(--mh-maroon); }
.mh-actions .cart-btn.is-add i { display: none; }
.mh-actions .cart-btn.is-out { background: #f3f3f3; color: #888; border-color: #ddd; cursor: default; }
.mh-actions .cart-control { display: block; min-width: 0; }
.mh-actions .cart-control form { margin: 0; }
.mh-actions .cart-stepper {
    display: flex; align-items: center; justify-content: space-between;
    height: 30px; border: 1px solid var(--mh-maroon); border-radius: 3px; background: #fff;
}
.mh-actions .cart-stepper form { display: flex; }
.mh-actions .cart-stepper button { width: 26px; height: 28px; border: 0; background: none; color: var(--mh-maroon); font-size: 16px; cursor: pointer; }
.mh-actions .cart-stepper button:disabled { color: #ccc; }
.mh-actions .cart-stepper-count { font-size: 12px; font-weight: 600; color: var(--mh-maroon); }

.mh-arrows {
    display: flex; justify-content: center; align-items: center; gap: 2px;
    width: 36px; height: 16px; margin: 22px auto 0; padding: 0 5px;
    background: #fff; border-radius: 10px;
}
.mh-arrows button { flex: 1; height: 100%; padding: 0; border: 0; background: none; color: var(--mh-maroon); font-size: 9px; cursor: pointer; }
.mh-arrows button:disabled { color: #cfcfcf; cursor: default; }
.mh-arrows.is-dark { background: var(--mh-maroon); width: 37px; }
.mh-arrows.is-dark button { color: #fff; }
.mh-arrows.is-dark button:disabled { color: rgba(255, 255, 255, .45); }

/* ---- featured services -------------------------------------------------------- */
.mh-services .mh-head h2 { font-size: 20px; }
.mh-services .mh-head p { max-width: none; font-size: 11px; }
.mh-svc {
    flex: 0 0 calc((100% - 20px) / 2.25); scroll-snap-align: start;
    border: 1px solid #ececec; border-radius: 6px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column;
}
.mh-svc-photo { position: relative; aspect-ratio: 111 / 56; overflow: hidden; }
.mh-svc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mh-svc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(160, 20, 30, 0) 30%, rgba(150, 15, 25, .85) 100%); }
.mh-svc-photo span { position: absolute; left: 7px; right: 7px; bottom: 5px; z-index: 1; color: #fff; font-size: 13px; line-height: 1.2; }
.mh-svc-body { padding: 8px 7px 9px; display: flex; flex-direction: column; flex: 1; }
.mh-svc-body p { margin: 0 0 7px; padding-bottom: 7px; border-bottom: 1px solid #eee; font-size: 11px; line-height: 1.4; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.mh-book { align-self: flex-start; padding: 5px 8px; border-radius: 2px; background: var(--mh-maroon); color: #fff; font-size: 10px; font-weight: 600; }

/* ---- full-width banners ---------------------------------------------------------- */
.mh-banner { display: block; margin: 22px 0 38px; }
.mh-banner img { width: 100%; aspect-ratio: 390 / 123; object-fit: cover; }
.mh-banner.is-agarbatti { margin: 30px 0 0; }
.mh-banner.is-agarbatti img { aspect-ratio: 390 / 131; }

/* ---- promo cards -------------------------------------------------------------------- */
.mh-promos { display: flex; gap: 16px; padding: 24px 18px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mh-promos::-webkit-scrollbar { display: none; }
.mh-promo { flex: 0 0 82%; scroll-snap-align: start; border-radius: 6px; overflow: hidden; }
.mh-promo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- combo kits (red) ---------------------------------------------------------------- */
.mh-combos {
    position: relative; padding: 26px 0 20px;
    background: #9b0d12 url('../img/mobile-home/bg-combo-red.jpg') center / cover no-repeat;
    color: #fff;
}
.mh-combos .mh-head { margin-bottom: 18px; }
.mh-combos .mh-head h2 { color: #fff; font-size: 20px; }
.mh-combos .mh-head p { color: #fff; max-width: none; font-size: 11px; }
.mh-swastik { display: block; margin: 0 auto 4px; font-size: 22px; line-height: 1; color: #fff; }
.mh-combos .mh-card { background: #fff; border-radius: 6px; padding: 5px 5px 8px; }
.mh-combos .mh-card-photo { padding: 0; }
.mh-combos .mh-card-photo > a { aspect-ratio: 98 / 62; }
.mh-combos .mh-card-name { color: #222; }
.mh-view-all { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; font-size: 20px; color: #fff; }

/* ---- ceremonies live ------------------------------------------------------------------- */
.mh-live { position: relative; padding-top: 30px; overflow: hidden; }
.mh-bells { position: absolute; top: 0; left: 0; right: 0; height: 110px; pointer-events: none; }
.mh-bells img { position: absolute; top: -8px; width: 118px; max-width: none; }
/* No clip: each bell image is already cropped to the two bells the design shows per side.
   (A clip here outranked ".mh-bells img { clip-path: none }" and hid one bell on each side.) */
.mh-bells .is-left { left: 8px; clip-path: none; }
.mh-bells .is-right { right: 8px; clip-path: none; }
.mh-live .mh-head { position: relative; margin-bottom: 38px; }
.mh-live .mh-head h2 { font-size: 22px; }
.mh-live .mh-head p { max-width: none; font-size: 12px; }
.mh-videos { display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mh-videos::-webkit-scrollbar { display: none; }
.mh-video { position: relative; flex: 0 0 82%; scroll-snap-align: center; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #222; }
.mh-video img { width: 100%; height: 100%; object-fit: cover; }
.mh-video .mh-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(125, 10, 10, .88); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.mh-live .mh-arrows { margin-top: 20px; }

/* ---- best services (features) ----------------------------------------------------------- */
.mh-features { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 16px 0; }
.mh-feature { padding: 10px 14px 18px 9px; }
.mh-feature:nth-child(odd) { border-right: 1px solid #ddd; }
.mh-feature:nth-child(even) { padding-left: 25px; }
.mh-feature img { width: 36px; height: 36px; object-fit: contain; margin-bottom: 14px; }
.mh-feature i.mh-feature-fa { display: block; font-size: 30px; color: var(--mh-maroon); margin-bottom: 14px; }
.mh-feature h3 { margin: 0 0 8px; font-size: 13px; font-weight: 400; color: #1c1c1c; }
.mh-feature p { margin: 0; font-family: var(--mh-poppins); font-size: 11px; line-height: 1.55; color: #555; }

/* ---- how it works (steps) ------------------------------------------------------------------ */
.mh-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 12px; padding: 34px 25px 44px; }
.mh-step { position: relative; padding: 24px 5px 8px; background: var(--mh-step); border-radius: 6px; }
.mh-step-num {
    position: absolute; top: -13px; left: 5px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mh-red); color: #fff; font-size: 11px; font-weight: 500;
}
.mh-step h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; color: #1c1c1c; }
.mh-step p { margin: 0; font-family: var(--mh-poppins); font-size: 10.5px; line-height: 1.45; color: #8a8a8a; }

/* ---- reviews ----------------------------------------------------------------------------------- */
.mh-reviews .mh-head p { max-width: none; font-size: 12px; }
.mh-review-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 21px; gap: 21px; }
.mh-review-track::-webkit-scrollbar { display: none; }
.mh-review { flex: 0 0 100%; scroll-snap-align: center; padding: 14px 14px 18px; background: #fdfcfb; border-radius: 3px; text-align: center; }
.mh-review-photos { display: flex; justify-content: center; gap: 7px; margin-bottom: 6px; }
.mh-review-photos img { width: 42px; height: 42px; object-fit: cover; border-radius: 3px; }
.mh-review-rating { display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--mh-poppins); font-size: 11px; color: #555; }
.mh-review-rating i { color: #f5c518; font-size: 10px; }
.mh-review h3 { margin: 8px 0 4px; font-family: var(--mh-poppins); font-size: 13px; font-weight: 500; color: #333; }
.mh-review p { margin: 0; font-family: var(--mh-poppins); font-size: 11px; line-height: 1.5; color: #777; }
.mh-review-by { margin-top: 14px; font-family: var(--mh-poppins); font-size: 11px; color: #444; }
.mh-review-by small { display: block; font-size: 11px; color: #555; }
.mh-reviews .mh-arrows { margin-top: 20px; }

/* ---- newsletter ----------------------------------------------------------------------------------- */
.mh-news { padding: 28px 25px 16px; text-align: center; font-family: var(--mh-poppins); }
.mh-news h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #1c1c1c; }
.mh-news > p { margin: 0 auto 20px; max-width: 300px; font-size: 10px; line-height: 1.45; color: #888; }
.mh-news form { display: flex; height: 33px; }
.mh-news input {
    flex: 1; min-width: 0; padding: 0 15px;
    border: 1px solid #6b6b6b; border-right: 0; border-radius: 5px 0 0 5px;
    font-family: var(--mh-poppins); font-size: 11px; outline: 0;
}
.mh-news input:focus { border-color: var(--mh-maroon); }
.mh-news form button {
    flex: 0 0 104px; border: 0; border-radius: 0 5px 5px 0;
    background: var(--mh-maroon); color: #fff;
    font-family: var(--mh-poppins); font-size: 11px; font-weight: 600; cursor: pointer;
}
.mh-news-msg { min-height: 16px; margin: 6px 0 0; font-size: 11px; color: var(--mh-green); }
.mh-news-msg.is-bad { color: #b3131b; }
.mh-social { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.mh-social a { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #333; font-size: 12px; }
.mh-social a:first-child { background: var(--mh-maroon); color: #fff; }

/* ---- footer ----------------------------------------------------------------------------------------- */
.mh-footer { background: var(--mh-footer); color: #9a9a9a; padding: 62px 28px 34px; font-family: var(--mh-poppins); }
.mh-footer-logo { width: 61px; height: 61px; border-radius: 50%; overflow: hidden; margin-bottom: 22px; }
.mh-footer-logo img { width: 100%; height: 100%; object-fit: cover; }
.mh-footer-about { margin: 0 0 30px; font-size: 14px; line-height: 1.5; color: #9a9a9a; }
.mh-footer-contact { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
.mh-footer-contact a { padding-bottom: 6px; border-bottom: 1.5px solid #1aa31a; color: #fff; font-size: 14px; }
.mh-footer-contact span { color: #8a8a8a; font-size: 16px; }
.mh-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-left: 14px; }
.mh-footer-cols h3 { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: #fff; }
.mh-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.mh-footer-cols li { margin-bottom: 14px; }
.mh-footer-cols a { font-size: 14px; color: #8c8c8c; }
.mh-footer-cols a:hover { color: #fff; }
.mh-copy { margin: 44px 0 20px; text-align: center; font-size: 13px; color: #8a8a8a; }
.mh-pay { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mh-pay span {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    min-width: 45px; height: 31px; padding: 0 6px;
    border: 1px solid #3a3a3a; border-radius: 4px; color: #fff; font-size: 20px;
}
.mh-pay span.is-secure { flex-direction: column; gap: 0; font-size: 10px; line-height: 1.1; font-weight: 500; }
.mh-pay span.is-secure b { font-size: 11px; }

/* ---- cart bar + bottom nav ---------------------------------------------------------------------------- */
.mh-cartbar {
    position: fixed; left: 14px; right: 14px;
    bottom: calc(var(--mh-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: flex; align-items: center; gap: 10px;
    height: 62px; padding: 0 8px 0 10px;
    background: var(--mh-green); border: 1px solid #2d8a4c; border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    color: #fff; cursor: pointer;
}
.mh-cartbar[hidden] { display: none; }
.mh-cartbar-count { width: 32px; height: 32px; border-radius: 6px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.mh-cartbar-text { flex: 1; min-width: 0; line-height: 1.25; }
.mh-cartbar-text strong { display: block; font-size: 12px; font-weight: 600; }
.mh-cartbar-text span { font-size: 10px; opacity: .92; }
.mh-cartbar a { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 10px; background: #fff; color: var(--mh-green); font-size: 12px; font-weight: 700; }

.mh-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--mh-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff; border-top: 1px solid #e6e6ec;
}
.mh-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #6b7280; font-size: 10px; }
.mh-nav a i { font-size: 17px; }
.mh-nav a.is-on { color: var(--mh-maroon); font-weight: 700; }

/* ======================================================================================================
 * The design's own sizes, measured from the PDF (px at 390 wide). The few type sizes the design draws
 * below 7px are held at 7-8.5px; everything else is as drawn. The breakpoints below build on these.
 * ==================================================================================================== */
.mh-cat > span:last-child { font-size: 8px; margin-top: 11px; }
.mh-account { font-size: 16px; }

.mh-section { padding: 6px 0 14px; }
.mh-head { margin-bottom: 22px; }
.mh-head h2 { font-size: 15px; }
.mh-head p { font-size: 8px; max-width: 200px; margin-top: 4px; }
.mh-services .mh-head h2, .mh-combos .mh-head h2 { font-size: 13px; }
.mh-services .mh-head p, .mh-combos .mh-head p { font-size: 7px; }
.mh-live .mh-head h2, .mh-reviews .mh-head h2 { font-size: 15.5px; }
.mh-live .mh-head p, .mh-reviews .mh-head p { font-size: 8px; }

/* products: three to a screen, 120px cards on a 122px pitch */
.mh-rail { gap: 2px; padding: 0 14px 2px; scroll-padding: 0 14px; }
.mh-card { flex-basis: calc((100% - 4px) / 3); padding-right: 2px; }
.mh-card-photo > a { aspect-ratio: 112 / 121; }
/* Heart: a white rounded square with a maroon outline heart, centred, big enough to tap. */
/* The heart is also a direct <a> of .mh-card-photo, so ".mh-card-photo > a" (the photo
   link's box: block, grey ground, aspect-ratio) matched it too and pinned the icon
   top-left. Named the same way here so it wins. */
.mh-card-photo > a.mh-heart {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; aspect-ratio: auto; overflow: visible;
    border-radius: 6px;
    background: #fff; border: 1px solid rgba(125, 10, 10, .14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    color: var(--mh-maroon); font-size: 11px; line-height: 1;
    transition: background-color .15s, color .15s;
}
.mh-card-photo > a.mh-heart i { display: block; line-height: 1; }
.mh-card-photo > a.mh-heart:hover,
.mh-card-photo > a.mh-heart:focus-visible { background: var(--mh-maroon); color: #fff; }
.mh-off { font-size: 7px; padding: 1px 3px; bottom: -1px; }
.mh-card-name { margin: 3px 0 1px; font-size: 8.5px; }
.mh-price { gap: 4px; font-size: 11px; }
.mh-price s { font-size: 10px; }
.mh-actions { gap: 6px; margin-top: 5px; }
.mh-btn,
.mh-actions .cart-btn.is-add,
.mh-actions .cart-btn.is-out,
.mh-actions .cart-stepper { height: 19px; font-size: 8.5px; padding: 0 2px; }
.mh-actions .cart-stepper button { width: 18px; height: 17px; font-size: 12px; }
.mh-actions .cart-stepper-count { font-size: 9px; }
.mh-arrows { margin-top: 22px; }

/* services: three to a screen, 111px cards */
.mh-services .mh-rail { gap: 13px; padding: 0 16px 2px; }
.mh-svc { flex-basis: calc((100% - 26px) / 3); border-radius: 5px; }
.mh-svc-photo span { font-size: 9px; left: 6px; bottom: 4px; }
.mh-svc-body { padding: 6px 6px 7px; }
.mh-svc-body p { font-size: 7.5px; line-height: 1.45; min-height: 22px; margin-bottom: 5px; padding-bottom: 5px; }
.mh-book { font-size: 7px; padding: 3px 6px; }

.mh-banner { margin: 22px 0 40px; }

/* promo cards: 160px on a 176px pitch */
.mh-promos { gap: 16px; padding: 22px 18px 28px; }
.mh-promo { flex-basis: 160px; }

/* combo kits: 108px white cards, three and a bit to a screen */
.mh-combos { padding: 22px 0 18px; }
.mh-combos .mh-head { margin-bottom: 20px; }
.mh-swastik { font-size: 24px; margin-bottom: 2px; }
.mh-combos .mh-rail { gap: 14px; padding: 0 16px 2px; }
.mh-combos .mh-card { flex: 0 0 108px; padding: 5px 5px 6px; }
.mh-combos .mh-card-photo > a { aspect-ratio: 99 / 62; }
.mh-combos .mh-card-name { font-size: 7.5px; margin-top: 4px; }
.mh-combos .mh-price { font-size: 9px; }
.mh-combos .mh-price s { font-size: 8.5px; }
.mh-combos .mh-btn,
.mh-combos .mh-actions .cart-btn.is-add,
.mh-combos .mh-actions .cart-stepper { height: 17px; font-size: 7.5px; }
.mh-view-all { font-size: 12px; gap: 8px; margin-top: 26px; }

/* ceremonies: 240px video cards, bells in both corners */
.mh-live { padding-top: 28px; }
/* Bells hang from the top edge on long strings, as in the design (about 3.3x taller than wide). */
.mh-bells { height: auto; }
.mh-bells img { position: absolute; top: 0; width: 40px; height: auto; clip-path: none; }
.mh-bells .is-left { left: 8px; }
.mh-bells .is-right { right: 8px; left: auto; }
.mh-live .mh-head { margin-bottom: 46px; }
.mh-videos { gap: 10px; }
.mh-video { flex-basis: 240px; }

/* best services */
.mh-features { padding-top: 12px; }
.mh-feature { padding: 8px 12px 16px 9px; }
.mh-feature img { width: 34px; height: 34px; margin-bottom: 12px; }
.mh-feature h3 { font-size: 11px; margin-bottom: 6px; }
.mh-feature p { font-size: 8.5px; }
.mh-steps { gap: 22px 12px; padding: 30px 25px 40px; }
.mh-step { padding: 20px 6px 8px; }
.mh-step h3 { font-size: 10px; margin-bottom: 6px; }
.mh-step p { font-size: 8.5px; }

/* reviews */
.mh-review { padding: 12px 14px 16px; }
.mh-review-photos img { width: 42px; height: 57px; }
.mh-review-rating { font-size: 7.5px; }
.mh-review-rating i { font-size: 8px; }
.mh-review h3 { font-size: 8.5px; margin: 7px 0 3px; }
.mh-review p { font-size: 7.5px; }
.mh-review-by { font-size: 7.5px; margin-top: 12px; }
.mh-review-by small { font-size: 7.5px; }

/* =================================================================================================== */
/* 640px - large phone / small tablet                                                                  */
/* =================================================================================================== */
@media (min-width: 640px) {
    .mh-wrap, .mh-header-in { padding: 0 24px; }
    .mh-cats { gap: 26px; padding: 28px 24px 14px; }
    .mh-cat { flex-basis: 72px; }
    .mh-cat-img { width: 72px; height: 72px; border-radius: 12px; }
    .mh-cat span { font-size: 12px; }
    .mh-hero { padding: 8px 24px 0; }
    .mh-head h2 { font-size: 26px; }
    .mh-head p { max-width: 460px; font-size: 13px; }
    .mh-rail { gap: 14px; padding: 0 24px 4px; scroll-padding: 0 24px; }
    .mh-card, .mh-svc { flex-basis: calc((100% - 28px) / 3); }
    .mh-promos { padding: 28px 24px 34px; }
    .mh-promo { flex-basis: 48%; }
    .mh-videos { padding: 0 24px; gap: 14px; }
    .mh-video { flex-basis: 60%; }
    .mh-features { padding: 10px 24px 0; }
    .mh-feature p { font-size: 12px; }
    .mh-steps { padding: 36px 24px 48px; gap: 30px 16px; }
    .mh-step { padding: 28px 14px 14px; }
    .mh-step h3 { font-size: 14px; }
    .mh-step p { font-size: 12px; }
    .mh-news { max-width: 560px; margin: 0 auto; }
    .mh-news h2 { font-size: 22px; }
    .mh-news > p { max-width: 420px; font-size: 12px; }
    .mh-news form { height: 42px; }
    .mh-cartbar { left: 50%; right: auto; width: 560px; max-width: calc(100% - 28px); transform: translateX(-50%); }
}

/* =================================================================================================== */
/* 768px - tablet portrait                                                                             */
/* =================================================================================================== */
@media (min-width: 768px) {
    .mh-header { padding: 10px 0 16px; }
    .mh-logo { width: 46px; height: 46px; }
    .mh-search { height: 44px; }
    .mh-search input { font-size: 14px; }
    .mh-cats { justify-content: center; }
    .mh-card, .mh-svc { flex-basis: calc((100% - 42px) / 4); }
    .mh-card-name { font-size: 13px; }
    .mh-btn, .mh-actions .cart-btn.is-add, .mh-actions .cart-btn.is-out, .mh-actions .cart-stepper { height: 34px; }
    .mh-promo { flex-basis: calc((100% - 32px) / 3); }
    .mh-banner img { aspect-ratio: 390 / 110; }
    .mh-features { grid-template-columns: repeat(4, 1fr); }
    .mh-feature:nth-child(odd) { border-right: 0; }
    .mh-feature { border-right: 1px solid #ddd; padding-left: 20px; }
    .mh-feature:nth-child(even) { padding-left: 20px; }
    .mh-feature:last-child { border-right: 0; }
    .mh-steps { grid-template-columns: repeat(4, 1fr); }
    .mh-review { flex-basis: calc((100% - 21px) / 2); }
    .mh-footer { padding: 64px 40px 40px; }
    .mh-footer-cols { grid-template-columns: repeat(4, 1fr); padding-left: 0; }
}

/* =================================================================================================== */
/* 1024px - tablet landscape / small laptop                                                            */
/* =================================================================================================== */
@media (min-width: 1024px) {
    :root { --mh-nav-h: 68px; }
    .mh-wrap, .mh-head, .mh-cats, .mh-hero, .mh-rail, .mh-promos, .mh-videos, .mh-features, .mh-steps, .mh-review-track {
        max-width: 1000px; margin-left: auto; margin-right: auto;
    }
    .mh-header-in { max-width: 1000px; margin: 0 auto; }
    .mh-card, .mh-svc { flex-basis: calc((100% - 56px) / 5); }
    .mh-video { flex-basis: calc((100% - 14px) / 2); }
    .mh-review { flex-basis: calc((100% - 42px) / 3); }
    .mh-banner img, .mh-banner.is-agarbatti img { aspect-ratio: 1400 / 360; }
    .mh-footer-in { max-width: 1000px; margin: 0 auto; }
    .mh-nav { left: 50%; right: auto; width: 640px; transform: translateX(-50%); border: 1px solid #e6e6ec; border-bottom: 0; border-radius: 16px 16px 0 0; }
}

/* =================================================================================================== */
/* 1280px - desktop                                                                                    */
/* =================================================================================================== */
@media (min-width: 1280px) {
    .mh-wrap, .mh-head, .mh-cats, .mh-hero, .mh-rail, .mh-promos, .mh-videos, .mh-features, .mh-steps, .mh-review-track,
    .mh-header-in, .mh-footer-in {
        max-width: 1200px;
    }
    .mh-card, .mh-svc { flex-basis: calc((100% - 70px) / 6); }
    .mh-head h2 { font-size: 30px; }
    .mh-video { flex-basis: calc((100% - 28px) / 3); }
}

/* =================================================================================================== */
/* Type and control sizes grow with the screen - the same four breakpoints, after the 390px sizes.     */
/* =================================================================================================== */
@media (min-width: 640px) {
    .mh-cat > span:last-child { font-size: 11px; }
    .mh-services .mh-head h2, .mh-combos .mh-head h2, .mh-live .mh-head h2, .mh-reviews .mh-head h2 { font-size: 24px; }
    .mh-services .mh-head p, .mh-combos .mh-head p, .mh-live .mh-head p, .mh-reviews .mh-head p { font-size: 12px; }
    .mh-rail { gap: 12px; }
    .mh-card { padding-right: 0; }
    .mh-card-photo > a.mh-heart { top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
    .mh-off { font-size: 9px; padding: 2px 5px; }
    .mh-card-name { font-size: 12px; margin-top: 6px; }
    .mh-price { font-size: 15px; }
    .mh-price s { font-size: 13px; }
    .mh-btn, .mh-actions .cart-btn.is-add, .mh-actions .cart-btn.is-out, .mh-actions .cart-stepper { height: 32px; font-size: 12px; }
    .mh-actions .cart-stepper button { width: 28px; height: 30px; font-size: 16px; }
    .mh-actions .cart-stepper-count { font-size: 13px; }
    .mh-svc-photo span { font-size: 14px; }
    .mh-svc-body { padding: 10px; }
    .mh-svc-body p { font-size: 12px; min-height: 36px; }
    .mh-book { font-size: 11px; padding: 6px 10px; }
    .mh-combos .mh-card { flex-basis: 170px; padding: 8px; }
    .mh-combos .mh-card-name { font-size: 11px; }
    .mh-combos .mh-price { font-size: 13px; }
    .mh-combos .mh-btn, .mh-combos .mh-actions .cart-btn.is-add, .mh-combos .mh-actions .cart-stepper { height: 28px; font-size: 11px; }
    .mh-view-all { font-size: 18px; }
    .mh-promo { flex-basis: 280px; }
    .mh-video { flex-basis: 360px; }
    .mh-bells img { width: 60px; }
    .mh-bells .is-left { left: 14px; }
    .mh-bells .is-right { right: 14px; }
    .mh-live .mh-head { margin-bottom: 90px; }
    .mh-feature h3 { font-size: 15px; }
    .mh-feature p { font-size: 12px; }
    .mh-feature img { width: 44px; height: 44px; }
    .mh-review-rating, .mh-review p, .mh-review-by, .mh-review-by small { font-size: 12px; }
    .mh-review h3 { font-size: 14px; }
}
@media (min-width: 768px) {
    .mh-cat > span:last-child { font-size: 12px; margin: 12px -14px 0; }
    .mh-card-name { font-size: 13px; }
    .mh-btn, .mh-actions .cart-btn.is-add, .mh-actions .cart-btn.is-out, .mh-actions .cart-stepper { height: 34px; font-size: 13px; }
    .mh-promo { flex-basis: calc((100% - 32px) / 3); }
    .mh-video { flex-basis: calc((100% - 14px) / 2); }
    .mh-step h3 { font-size: 14px; }
    .mh-step p { font-size: 12px; }
}
@media (min-width: 1024px) {
    .mh-head h2, .mh-services .mh-head h2, .mh-combos .mh-head h2, .mh-live .mh-head h2, .mh-reviews .mh-head h2 { font-size: 28px; }
    .mh-head p, .mh-services .mh-head p, .mh-combos .mh-head p, .mh-live .mh-head p, .mh-reviews .mh-head p { font-size: 14px; max-width: 560px; }
    .mh-card-name { font-size: 14px; }
    .mh-price { font-size: 17px; }
    .mh-combos .mh-card { flex-basis: 190px; }
    .mh-video { flex-basis: calc((100% - 28px) / 3); }
    .mh-bells img { width: 70px; }
    .mh-live .mh-head { margin-bottom: 120px; }
}
@media (min-width: 1280px) {
    .mh-head h2, .mh-services .mh-head h2, .mh-combos .mh-head h2, .mh-live .mh-head h2, .mh-reviews .mh-head h2 { font-size: 32px; }
    .mh-cat { flex-basis: 84px; }
    .mh-cat-img { width: 84px; height: 84px; }
    .mh-combos .mh-card { flex-basis: 210px; }
}

/* Service cards: the description is always exactly two lines tall (short text keeps the space,
   long text is cut with …), so every Book Now sits on the same line, same size. */
.mh-svc-body p { box-sizing: content-box; height: 2.9em; min-height: 0; line-height: 1.45; }
.mh-svc .mh-book { margin-top: auto; }

/* Combo kit cards: bigger on phones, heart pinned in the photo's top-right corner. */
.mh-combos .mh-card { flex: 0 0 150px; padding: 6px 6px 8px; }
.mh-combos .mh-card-photo > a { aspect-ratio: 4 / 3; }
.mh-combos .mh-card-name { font-size: 10px; margin-top: 5px; }
.mh-combos .mh-price { font-size: 12px; }
.mh-combos .mh-price s { font-size: 10.5px; }
.mh-combos .mh-btn,
.mh-combos .mh-actions .cart-btn.is-add,
.mh-combos .mh-actions .cart-btn.is-out,
.mh-combos .mh-actions .cart-stepper { height: 24px; font-size: 9.5px; }
.mh-combos .mh-card-photo > a.mh-heart { top: 5px; right: 5px; width: 22px; height: 22px; }
@media (min-width: 640px) {
    .mh-combos .mh-card { flex-basis: 190px; }
    .mh-combos .mh-card-name { font-size: 12px; }
    .mh-combos .mh-price { font-size: 14px; }
    .mh-combos .mh-btn, .mh-combos .mh-actions .cart-btn.is-add, .mh-combos .mh-actions .cart-btn.is-out, .mh-combos .mh-actions .cart-stepper { height: 30px; font-size: 12px; }
    .mh-combos .mh-card-photo > a.mh-heart { top: 6px; right: 6px; width: 26px; height: 26px; }
}
@media (min-width: 1024px) { .mh-combos .mh-card { flex-basis: 210px; } }
@media (min-width: 1280px) { .mh-combos .mh-card { flex-basis: 230px; } }

/* Social icons in each platform's own colour: coloured circle, white icon. */
.mh-social a,
.mh-social a:first-child { background: #555; color: #fff; }
.mh-social a:has(.fa-instagram) { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.mh-social a:has(.fa-facebook), .mh-social a:has(.fa-facebook-f) { background: #1877f2; }
.mh-social a:has(.fa-youtube) { background: #ff0000; }
.mh-social a:has(.fa-twitter) { background: #1da1f2; }
.mh-social a:has(.fa-x-twitter) { background: #000; }
.mh-social a:has(.fa-whatsapp) { background: #25d366; }
.mh-social a:has(.fa-linkedin), .mh-social a:has(.fa-linkedin-in) { background: #0a66c2; }
.mh-social a:has(.fa-pinterest), .mh-social a:has(.fa-pinterest-p) { background: #e60023; }
.mh-social a:has(.fa-telegram) { background: #229ed9; }
.mh-social a:hover { opacity: .85; }

/* Agarbatti banner: its words are printed at the picture's left edge, so the banner sits
   inside the page margin with rounded corners, and is never cropped at any width. */
.mh-banner.is-agarbatti { padding: 0 16px; }
.mh-banner.is-agarbatti img { aspect-ratio: auto; height: auto; object-fit: contain; border-radius: 12px; }
@media (min-width: 640px) { .mh-banner.is-agarbatti { padding: 0 24px; } }
@media (min-width: 1024px) { .mh-banner.is-agarbatti { max-width: 1000px; margin-left: auto; margin-right: auto; } .mh-banner.is-agarbatti img, .mh-banner.is-agarbatti img { aspect-ratio: auto; } }
@media (min-width: 1280px) { .mh-banner.is-agarbatti { max-width: 1200px; } }

/* ---- payment badges, as drawn in the design -------------------------------------------------------- */
.mh-pay { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.mh-paycard {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 34px;
    border: 1px solid #3c3c3c; border-radius: 6px; background: #1b1b1b;
    color: #fff; font-family: var(--mh-poppins); line-height: 1;
}
.mh-paycard em { font-style: normal; display: flex; align-items: center; }
.mh-paycard.is-apple { gap: 2px; font-size: 14px; }
.mh-paycard.is-apple i { font-size: 14px; margin-top: -2px; }
.mh-paycard.is-apple em { font-size: 13px; font-weight: 500; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }
.mh-paycard.is-visa em { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: -.3px; }
.mh-paycard.is-discover em { font-family: Arial, Helvetica, sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: -.2px; }
.mh-paycard.is-discover em b { display: inline-block; width: 6.5px; height: 6.5px; margin: 0 .2px; border-radius: 50%; background: #f76f20; }
.mh-paycard.is-discover::after {
    content: ""; position: absolute; right: -1px; bottom: -1px;
    width: 34px; height: 10px; background: #f76f20;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    border-bottom-right-radius: 6px;
}
.mh-paycard.is-master b { display: block; width: 17px; height: 17px; border-radius: 50%; }
.mh-paycard.is-master b:first-child { background: #eb001b; }
.mh-paycard.is-master b:last-child { background: #f79e1b; margin-left: -7px; mix-blend-mode: normal; opacity: .95; }
.mh-paycard.is-secure { width: auto; padding: 0 7px; flex-direction: column; align-items: flex-start; gap: 1px; }
.mh-paycard.is-secure em { gap: 3px; font-size: 10px; font-weight: 400; }
.mh-paycard.is-secure svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.2; }
.mh-paycard.is-secure strong { font-size: 11.5px; font-weight: 600; }
@media (min-width: 640px) {
    .mh-pay { gap: 12px; }
    .mh-paycard { width: 66px; height: 44px; border-radius: 8px; }
    .mh-paycard.is-apple i, .mh-paycard.is-apple em { font-size: 18px; }
    .mh-paycard.is-visa em { font-size: 19px; }
    .mh-paycard.is-discover em { font-size: 10px; }
    .mh-paycard.is-discover em b { width: 8.5px; height: 8.5px; }
    .mh-paycard.is-discover::after { width: 44px; height: 13px; border-bottom-right-radius: 8px; }
    .mh-paycard.is-master b { width: 22px; height: 22px; }
    .mh-paycard.is-master b:last-child { margin-left: -9px; }
    .mh-paycard.is-secure { padding: 0 10px; }
    .mh-paycard.is-secure em { font-size: 13px; }
    .mh-paycard.is-secure svg { width: 13px; height: 13px; }
    .mh-paycard.is-secure strong { font-size: 15px; }
}

/* ---- Experience the Best Services: feature grid as in the design ------------------------------------ */
/* Bigger icon and type, a divider that breaks between rows, two columns until 1024px. */
.mh-features { display: grid; grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 0; padding: 20px 20px 4px; }
.mh-feature,
.mh-feature:nth-child(even) { padding: 0 14px 0 4px; border-right: 0; }
.mh-feature:nth-child(odd) { border-right: 1px solid #dcdcdc; }
.mh-feature:nth-child(even) { padding-left: 22px; }
.mh-feature img { width: 42px; height: 42px; object-fit: contain; margin-bottom: 16px; }
.mh-feature h3 { margin: 0 0 9px; font-size: 14px; font-weight: 500; line-height: 1.3; color: #1c1c1c; }
.mh-feature p { margin: 0; font-family: var(--mh-poppins); font-size: 11px; line-height: 1.6; color: #6b6b6b; }
@media (min-width: 640px) {
    .mh-features { row-gap: 40px; padding: 28px 32px 8px; }
    .mh-feature:nth-child(even) { padding-left: 40px; }
    .mh-feature img { width: 60px; height: 60px; margin-bottom: 22px; }
    .mh-feature h3 { font-size: 20px; margin-bottom: 12px; }
    .mh-feature p { font-size: 15px; }
}
@media (min-width: 768px) {
    .mh-features { grid-template-columns: 1fr 1fr; }
    .mh-feature:nth-child(odd) { border-right: 1px solid #dcdcdc; }
    .mh-feature:last-child:nth-child(even) { border-right: 0; }
}
@media (min-width: 1024px) {
    .mh-features { grid-template-columns: repeat(4, 1fr); }
    .mh-feature, .mh-feature:nth-child(even) { padding: 0 20px; border-right: 1px solid #dcdcdc; }
    .mh-feature:last-child { border-right: 0; }
    .mh-feature h3 { font-size: 18px; }
    .mh-feature p { font-size: 14px; }
}

/* Combo section heading as in the design: a bold white swastik drawn as SVG, larger title and line. */
.mh-combos .mh-swastik { display: block; width: 30px; height: 30px; margin: 0 auto 8px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mh-combos .mh-head h2 { font-size: 18px; font-weight: 500; }
.mh-combos .mh-head p { font-size: 9px; margin-top: 4px; max-width: none; }
@media (min-width: 640px) {
    .mh-combos .mh-swastik { width: 44px; height: 44px; margin-bottom: 10px; }
    .mh-combos .mh-head h2 { font-size: 30px; }
    .mh-combos .mh-head p { font-size: 15px; }
}
@media (min-width: 1024px) {
    .mh-combos .mh-head h2 { font-size: 34px; }
    .mh-combos .mh-head p { font-size: 16px; }
}
/* Swastik as drawn in the design: bent arms, rounded ends, a dot in each quarter. */
.mh-combos .mh-swastik { stroke-width: 2.6; }
.mh-combos .mh-swastik circle { fill: #fff; stroke: none; }
/* Rounded bends need a heavier line to read like the reference mark. */
.mh-combos .mh-swastik { stroke-width: 3; }

/* Feature icons: the images are cropped to what is drawn, so an equal height makes all four look the
   same size; a wide badge (Best Prices) is simply wider, not smaller. */
.mh-feature img { width: auto; height: 42px; max-width: 70px; object-fit: contain; }
@media (min-width: 640px) { .mh-feature img { height: 60px; max-width: 100px; } }

/* The diya above every section heading, a size up. */
.mh-diya { width: 28px; height: 28px; margin: 0 auto 6px; object-fit: contain; }
@media (min-width: 640px) { .mh-diya { width: 36px; height: 36px; margin-bottom: 8px; } }
@media (min-width: 1024px) { .mh-diya { width: 40px; height: 40px; } }
/* Diya one more size up. */
.mh-diya { width: 38px; height: 38px; margin-bottom: 6px; }
@media (min-width: 640px) { .mh-diya { width: 48px; height: 48px; margin-bottom: 8px; } }
@media (min-width: 1024px) { .mh-diya { width: 52px; height: 52px; } }

/* Header: cart and heart icons before the language menu, as in the design. */
.mh-header-right { gap: 14px; }
.mh-hicon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #1e1e1e; font-size: 17px; }
.mh-hicon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mh-hicon svg circle { fill: currentColor; stroke: none; }
.mh-hicon .header-cart-count {
    position: absolute; top: -6px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--mh-maroon); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
@media (min-width: 640px) {
    .mh-header-right { gap: 20px; }
    .mh-hicon { width: 28px; height: 28px; font-size: 20px; }
    .mh-hicon svg { width: 24px; height: 24px; }
}

/* Category strip: centred at every width. Auto margins on the ends (not justify-content)
   keep the first tile reachable when there are more tiles than fit and the strip scrolls. */
.mh-cats { justify-content: flex-start; }
.mh-cats > .mh-cat:first-child { margin-left: auto; }
.mh-cats > .mh-cat:last-child { margin-right: auto; }

/* ---- search suggestions (live-search.js) --------------------------------------------
   The shared script adds a panel under the search box. Its styles live in base.css,
   which this page does not load, so without these the photos came out full size. */
.mh-search.has-live-search { position: relative; }
.mh-search .live-search {
    position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0;
    max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid #e8e4dc; border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14); text-align: left;
}
.mh-search .live-search[hidden] { display: none; }
.mh-search .live-search-group { margin: 0; padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a7168; }
.mh-search .live-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: #2f2a26; text-decoration: none; }
.mh-search .live-search-row img { flex: 0 0 auto; width: 40px; height: 40px; max-width: 40px; border-radius: 8px; object-fit: cover; background: #fff8f0; }
.mh-search .live-search-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mh-search .live-search-name { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-search .live-search-meta { font-size: 11.5px; color: #7d0a0a; font-weight: 600; }
.mh-search .live-search-row:hover, .mh-search .live-search-row.is-on { background: #fdf3e6; color: #7d0a0a; }
.mh-search .live-search-all { display: block; padding: 11px 14px; border-top: 1px solid #efe9e2; font-size: 12.5px; font-weight: 600; color: #7d0a0a; text-decoration: none; }
.mh-search .live-search-none { margin: 0; padding: 14px; font-size: 13px; color: #7a7168; }

/* Combo heading swastik: the design's filled shape (was an outline). */
.mh-combos .mh-swastik, .mh-combos .mh-swastik path, .mh-combos .mh-swastik circle { fill: #fff; stroke: none; }

/* The diya's flame, alight: the lamp and the flame are two pictures stacked in one box, so only the
   flame moves - it leans, breathes and glows, never in a steady loop the eye can count. Anybody whose
   phone asks for less motion sees the lamp exactly as it was. */
.mh-diya { position: relative; display: block; }
.mh-diya-lamp, .mh-diya-flame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mh-diya-flame { transform-origin: 50% 88%; filter: drop-shadow(0 0 3px rgba(255, 170, 40, .85)); }
@media (prefers-reduced-motion: no-preference) {
    .mh-diya-flame { animation: mh-flame 2.6s ease-in-out infinite; }
}
@keyframes mh-flame {
    0%   { transform: rotate(-1.5deg) scale(1, 1); filter: drop-shadow(0 0 3px rgba(255, 170, 40, .75)); }
    18%  { transform: rotate(1.2deg) scale(1.04, .96); filter: drop-shadow(0 0 6px rgba(255, 185, 60, .95)); }
    34%  { transform: rotate(-.8deg) scale(.97, 1.06); filter: drop-shadow(0 0 4px rgba(255, 170, 40, .8)); }
    52%  { transform: rotate(1.6deg) scale(1.03, 1.02); filter: drop-shadow(0 0 7px rgba(255, 195, 70, 1)); }
    70%  { transform: rotate(-1.1deg) scale(.98, 1.05); filter: drop-shadow(0 0 4px rgba(255, 170, 40, .85)); }
    86%  { transform: rotate(.6deg) scale(1.02, .98); filter: drop-shadow(0 0 6px rgba(255, 185, 60, .9)); }
    100% { transform: rotate(-1.5deg) scale(1, 1); filter: drop-shadow(0 0 3px rgba(255, 170, 40, .75)); }
}

/* Review photos, larger: they are the proof the review is real, and at 42px they read as icons.
   Wider rather than taller - three of them still sit on one line. */
.mh-review-photos { gap: 8px; margin-bottom: 9px; }
.mh-review-photos img { width: 100px; height: 72px; border-radius: 5px; }
@media (min-width: 640px) { .mh-review-photos img { width: 118px; height: 84px; } }
@media (min-width: 1024px) { .mh-review-photos img { width: 136px; height: 96px; } }

/* Bottom bar: thin outline icons, five places in the order Home, Categories, Book Puja, Order, Account. */
.mh-nav a { gap: 5px; color: #4a4a4a; font-size: 10.5px; font-weight: 400; }
.mh-nav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mh-nav a i { font-size: 20px; }
.mh-nav a.is-on { color: var(--mh-maroon); font-weight: 600; }
.mh-nav a.is-on svg { stroke-width: 1.9; }

/* Footer items with no page yet read as plain text, in the same grey as the links beside them. */
.mh-footer-cols span { font-size: 14px; color: #8c8c8c; }

/* Footer columns on a phone: the design's smaller text, and a long label wraps rather than
   running off the side ("Terms & Condition" did on a 390px screen). */
.mh-footer-cols a, .mh-footer-cols span { font-size: 12.5px; overflow-wrap: anywhere; }
.mh-footer-cols h3 { font-size: 14.5px; margin-bottom: 14px; }
.mh-footer-cols li { margin-bottom: 12px; }
@media (min-width: 640px) {
    .mh-footer-cols a, .mh-footer-cols span { font-size: 14px; }
    .mh-footer-cols h3 { font-size: 16px; }
}

/* Nothing in the footer may run past the padding: the two columns may shrink, and a long
   address or label breaks instead of being clipped by the page's hidden overflow. */
.mh-footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mh-footer-cols > div { min-width: 0; }
.mh-footer-contact { row-gap: 10px; }
.mh-footer-contact a { max-width: 100%; overflow-wrap: anywhere; }

/* Partners, in the mobile style: a swipeable row of round photographs, each with the
   verified mark, the name and where they work. Same people as the desktop shows. */
.mh-pandits { padding-top: 14px; }
.mh-pandit-rail { align-items: flex-start; gap: 14px; }
.mh-pandit { flex: 0 0 calc((100% - 28px) / 2.6); scroll-snap-align: start; min-width: 0; text-align: center; }
.mh-pandit-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.mh-pandit-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: var(--mh-cream); }
.mh-verified { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; background: #1d9bf0; color: #fff; font-size: 9px; white-space: nowrap; }
.mh-pandit h3 { margin: 14px 0 0; font-size: 12px; font-weight: 600; color: var(--mh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-pandit p { margin: 4px 0 0; font-size: 10.5px; color: var(--mh-muted); }
@media (min-width: 640px) {
    .mh-pandit { flex-basis: calc((100% - 42px) / 3.4); }
    .mh-pandit h3 { font-size: 14px; }
    .mh-pandit p { font-size: 12px; }
    .mh-verified { font-size: 11px; padding: 3px 9px; }
}
@media (min-width: 1024px) {
    .mh-pandit { flex-basis: calc((100% - 56px) / 4); }
}

/* Verified badge, as the design draws it: white rosette, blue tick, blue pill. */
.mh-verified { background: #3879cd; gap: 4px; }
.mh-verified .sv-badge-mark { width: 12px; height: 12px; flex: 0 0 auto; }
.mh-verified .sv-badge-rosette { fill: #fff; }
.mh-verified .sv-badge-tick { fill: none; stroke: #3879cd; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .mh-verified .sv-badge-mark { width: 14px; height: 14px; } }

/* ---------------------------------------------------------------------------
   Two to a screen on a phone, not three.

   The rails were drawn three across, which on a 390px screen leaves a card
   about 120px wide — and to fit anything in it the type had come down to 7px,
   which nobody can read. Two across gives each card half the screen, and the
   words in it can go back to a size that is meant to be read.

   Only the phone: from 640px up the rails stay as they were, where three (and
   four, five, six further up) fit comfortably.
   ------------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    /* The categories: four across rather than five and a half.

       The tiles were a fixed 54px, which on a 390px screen left five and a
       bit on show and the names under them at 8px. Four to a screen makes the
       tile follow the width it is given, and the name can be read. */
    /* The banner at the top, a little taller.

       It was drawn 358 by 119 — three to one — which on a phone reads as a
       strip rather than a picture, and the photographs in it are of people
       and temples, which need height. A shade under two and a half to one
       gives them room without pushing the categories under the fold. */
    .mh-hero-slide { aspect-ratio: 358 / 150; }

    .mh-cats { gap: 14px; padding: 22px 16px 12px; }
    .mh-cat { flex: 0 0 calc((100% - 42px) / 4); }
    .mh-cat-img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; }
    .mh-cat-img i { font-size: 26px; }
    .mh-cat > span:last-child { margin: 9px 0 0; font-size: 11px; }

    .mh-rail { gap: 10px; padding: 0 14px 4px; scroll-padding: 0 14px; }

    /* products */
    .mh-card { flex-basis: calc((100% - 10px) / 2); padding-right: 0; }
    .mh-card-name { margin: 6px 0 2px; font-size: 12px; line-height: 1.3; }
    .mh-price { gap: 6px; font-size: 15px; }
    .mh-price s { font-size: 12px; }
    .mh-off { font-size: 9px; padding: 2px 5px; }
    .mh-actions { gap: 8px; margin-top: 8px; }

    .mh-btn,
    .mh-actions .cart-btn.is-add,
    .mh-actions .cart-btn.is-out,
    .mh-actions .cart-stepper { height: 30px; font-size: 11.5px; padding: 0 8px; }

    .mh-actions .cart-stepper button { width: 26px; height: 28px; font-size: 15px; }
    .mh-actions .cart-stepper-count { font-size: 12px; }

    /* The heart grows with the card and stays a comfortable tap. Named for
       the button as well as the link: it became a button when it was wired up
       to actually save something, and the rule written for the link stopped
       matching it. */
    .mh-card-photo > a.mh-heart,
    .mh-card-photo > button.mh-heart { width: 28px; height: 28px; font-size: 13px; }

    /* services */
    .mh-services .mh-rail { gap: 12px; padding: 0 14px 4px; }
    .mh-svc { flex-basis: calc((100% - 12px) / 2); border-radius: 8px; }
    .mh-svc-photo span { font-size: 13px; left: 9px; right: 9px; bottom: 7px; }
    .mh-svc-body { padding: 10px 10px 11px; }
    .mh-svc-body p { font-size: 11.5px; line-height: 1.45; min-height: 33px; margin-bottom: 8px; padding-bottom: 8px; }
    .mh-book { font-size: 11px; padding: 6px 12px; }
}

/* ---------------------------------------------------------------------------
   The heart on a product card: the mark alone.

   It was drawn on a white rounded square, which on a photograph looked like a
   sticker. The square remains as the area a thumb presses; it is simply not
   painted, and a drop shadow keeps the outline legible over a pale picture.
   ------------------------------------------------------------------------ */
.mh-card-photo > a.mh-heart,
button.mh-heart,
.dh-heart {
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--mh-maroon);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.mh-card-photo > a.mh-heart:hover,
.mh-card-photo > a.mh-heart:focus-visible,
button.mh-heart:hover,
.dh-heart:hover { background: none; color: #b3131b; }

.mh-heart.is-saved,
.dh-heart.is-saved { background: none; color: #b3131b; }

/* A little larger, and nearer the corner, as on every other product card. */
.mh-card-photo > a.mh-heart,
.mh-card-photo > button.mh-heart,
button.mh-heart,
a.mh-heart { top: 6px; right: 6px; width: 30px; height: 30px; font-size: 16px; }

/* On a card, Add to Cart is the basket alone. The words stay on the product's
   own page. Clipped rather than removed, so the button still announces itself. */
.mh-actions .cart-btn.is-add .cart-btn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.mh-actions .cart-control { flex: 0 0 auto; }
.mh-actions .cart-btn.is-add { min-width: 40px; padding: 0 10px; }
.mh-actions .cart-btn.is-add i { display: inline-block; font-size: 1.15em; margin: 0; }

/* ---------------------------------------------------------------------------
   Buy Now keeps its width after the item is in the basket.

   The row used to be split in half. A − 1 + stepper needs more than half, so
   it took it and Buy Now was cut mid-word. The cart control now takes only
   what it needs — the basket icon, or the stepper — and Buy Now takes the
   rest of the row in either state.
   ------------------------------------------------------------------------ */
.mh-actions > form, .mh-actions > .mh-btn { flex: 1 1 auto; min-width: 0; }
.mh-actions .cart-control { flex: 0 0 auto; min-width: 0; }

.mh-actions .cart-stepper {
    width: auto;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
}

/* The count between the two signs was stretching to fill; it only needs room
   for a number, so the whole stepper stays as narrow as the icon it replaced. */
.mh-actions .cart-stepper-count { flex: 0 0 auto; min-width: 14px; text-align: center; }

/* ---------------------------------------------------------------------------
   The page must not slide sideways.

   The rails are meant to scroll inside themselves; the page behind them is
   not. It did, and here is the chain: `overflow-x: hidden` on the body hands
   the job to the viewport, and the browser then sizes the layout viewport to
   the whole scrollable width — 1473px on a 390px screen. The two fixed bars
   are left:0 right:0, so they stretched to that width and hung off the right,
   and the page could be dragged across to them.

   Clipping on the root instead ends it: the layout viewport stays the width
   of the screen, the bars are the width of the screen, and there is nothing
   to drag towards. `hidden` first for browsers that do not know `clip` — clip
   is the better of the two here because it does not make the root a scroll
   container, so sticky headers keep working.
   ------------------------------------------------------------------------ */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   The hidden label must stay inside its button.

   Clipping the words puts them in a box one pixel wide, but an absolutely
   positioned box belongs to the nearest positioned ancestor — and there was
   none, so the words belonged to the page. A rail clips what is inside it;
   it does not clip something that belongs to the page, so those hidden words
   sat far off to the right and made the document wider than the screen. The
   fixed bars stretched to that width, and the page could be dragged sideways.

   Positioning the button gives the label somewhere of its own to hide.
   ------------------------------------------------------------------------ */
.cart-btn { position: relative; }