/*
 * Service page - new-mobile-version-design/service details page.pdf (1920 frame).
 *
 * The header, steps, newsletter and footer come from desktop-home.css and are
 * the homepage's own; only what this page adds is here. Sizes are the design's
 * numbers times --u (one design pixel), exactly as on the homepage, so the page
 * is the design scaled to whatever screen it is opened on.
 */

.sv main { background: #fff9f2; }
/* This page centres its column; the homepage shifts its own 33 design pixels right. */
.sv .dh-wrap { margin-left: auto; margin-right: auto; }

/* ---- the banner ------------------------------------------------------------ */
.sv-hero { position: relative; overflow: hidden; background: #ffedd8; padding: calc(21 * var(--u)) 0 calc(23 * var(--u)); }
.sv-deco { position: absolute; inset: 0; pointer-events: none; }
.sv-pendant { position: absolute; top: 0; width: calc(106 * var(--u)); height: auto; }
.sv-pendant.is-left { left: calc((100% - var(--wrap)) / 2 - 179 * var(--u)); }
.sv-pendant.is-right { right: calc((100% - var(--wrap)) / 2 - 166 * var(--u)); }

.sv-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(486 * var(--u)); gap: calc(40 * var(--u)); align-items: center; min-height: calc(437 * var(--u)); }
.sv-hero-text h1 { margin: 0; max-width: calc(560 * var(--u)); font-size: max(20px, calc(30 * var(--u))); font-weight: 600; line-height: 1.22; color: var(--maroon); }
.sv-hero-text > p { margin: calc(26 * var(--u)) 0 0; max-width: calc(830 * var(--u)); font-size: max(11px, calc(15 * var(--u))); line-height: 1.55; color: #4f4f4f; }
.sv-cta { display: flex; flex-wrap: wrap; gap: calc(25 * var(--u)); margin-top: calc(30 * var(--u)); }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(50 * var(--u)); min-height: 38px; padding: 0 calc(24 * var(--u)); border-radius: calc(6 * var(--u)); font-size: max(13px, calc(20 * var(--u))); font-weight: 500; }
.sv-btn.is-line { min-width: calc(155 * var(--u)); border: 1px solid var(--maroon); color: var(--maroon); background: transparent; }
.sv-btn.is-line:hover { background: var(--maroon); color: #fff; }
.sv-btn.is-wa { min-width: calc(200 * var(--u)); background: #6cc262; color: #fff; }
.sv-btn.is-wa:hover { background: #55ad4b; }
.sv-btn.is-wa i { font-size: 1.25em; }

.sv-hero-photo { padding: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .08); }
.sv-hero-photo img { display: block; width: 100%; aspect-ratio: 466 / 417; object-fit: cover; border-radius: calc(8 * var(--u)); }

/* ---- what the puja is ------------------------------------------------------- */
.sv-about { padding: calc(20 * var(--u)) 0 0; }
.sv-about h2, .sv-benefits-text h2 { margin: 0; font-size: max(17px, calc(25 * var(--u))); font-weight: 600; color: var(--ink); }
.sv-about p, .sv-benefits-text p { margin: calc(20 * var(--u)) 0 0; font-size: max(11px, calc(15 * var(--u))); line-height: 1.55; color: #6a6a6a; }
.sv-about p:first-of-type, .sv-benefits-text p:first-of-type { margin-top: calc(43 * var(--u)); }

/* ---- benefits, and the kit beside them -------------------------------------- */
.sv-benefits { padding: calc(44 * var(--u)) 0 calc(59 * var(--u)); }
.sv-benefits-in { display: grid; grid-template-columns: minmax(0, 1fr) calc(385 * var(--u)); gap: calc(60 * var(--u)); align-items: start; }
/* Two columns, each chip only as wide as its words; no box around them. */
.sv-points { display: grid; grid-template-columns: max-content max-content; justify-content: start; justify-items: start; gap: calc(10 * var(--u)) calc(18 * var(--u)); margin: calc(35 * var(--u)) 0 0; padding: 0; list-style: none; }
.sv-points li { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(36 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border: 0; border-radius: calc(8 * var(--u)); background: #fff; font-size: max(11px, calc(15 * var(--u))); color: #4f4f4f; }
.sv-points i { flex: 0 0 auto; font-size: max(13px, calc(19 * var(--u))); color: var(--maroon); }

.sv-kit { padding: calc(14 * var(--u)); border: 1px solid #e7cfcf; border-radius: calc(10 * var(--u)); background: #fff; }
.sv-kit-photo { display: block; overflow: hidden; border-radius: calc(8 * var(--u)); }
.sv-kit-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; }
.sv-kit-photo:hover img { transform: scale(1.03); }
.sv-kit h3 { margin: calc(18 * var(--u)) 0 0; font-size: max(14px, calc(20 * var(--u))); font-weight: 600; color: var(--ink); }
.sv-kit h3 a:hover { color: var(--maroon); }
.sv-kit p { margin: calc(8 * var(--u)) 0 0; font-size: max(11px, calc(15 * var(--u))); line-height: 1.5; color: #8a8a8a; }
.sv-kit-price { color: var(--maroon) !important; font-size: max(13px, calc(18 * var(--u))) !important; font-weight: 600; }
.sv-kit-form { margin: 0; }
.sv-kit-buy { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(46 * var(--u)); min-height: 36px; margin-top: calc(16 * var(--u)); border: 0; border-radius: calc(6 * var(--u)); background: var(--maroon); color: #fff; font-family: inherit; font-size: max(12px, calc(15 * var(--u))); cursor: pointer; }
.sv-kit-buy:hover { background: #650000; }
.sv-kit-buy.is-out { background: #f0f0f0; color: #999; cursor: default; }

/* ---- the four steps --------------------------------------------------------- */
.sv-steps { padding: calc(51 * var(--u)) 0 0; background: #fff; }
.sv-steps .dh-steps { margin-top: 0; }

/* ---- a narrow window: stack, keep everything reachable ----------------------- */
@media not all and (min-width: 1024px) {
    .sv-hero-in { grid-template-columns: 1fr; gap: 24px; }
    .sv-hero-photo { order: -1; }
    .sv-hero-text h1, .sv-hero-text > p { max-width: none; }
    .sv-cta { gap: 14px; }
    .sv-benefits-in { grid-template-columns: 1fr; gap: 28px; }
    .sv-points { grid-template-columns: 1fr; }
    .sv-deco { display: none; }
}

/* ---------------------------------------------------------------------------
   Phones: the page gets its own bar, as the product pages do, and the four
   steps become numbered cards instead of the wide desktop bars.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .sv-appbar, .sv-step-num { display: none !important; }
}

@media not all and (min-width: 1024px) {
    body.sv > .dh-header { display: none; }

    .sv-appbar {
        position: sticky; top: 0; z-index: 60;
        display: flex; align-items: center; gap: 14px;
        height: 52px; padding: 0 14px;
        background: #fff; border-bottom: 1px solid #efe9e2; box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    }
    .sv-appbar-logo { flex: 0 0 auto; display: flex; align-items: center; }
    .sv-appbar-logo img { display: block; width: 32px; height: 32px; border-radius: 50%; }
    .sv-appbar-title { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; color: #1e1e1e; white-space: nowrap; text-overflow: ellipsis; }
    .sv-ic { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 23px; height: 23px; color: #1e1e1e; }
    .sv-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .sv-ic.header-cart svg circle { fill: currentColor; stroke: none; }

    /* the steps, as cards: a maroon numbered circle, the title, then the words */
    .sv-steps { padding: 6px 0 4px; }
    .sv-steps .dh-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
    .dh-step { position: relative; padding: 34px 14px 16px; border-radius: 10px; background: #fdf6e9; }
    .sv-steps .dh-step-bar { display: none; }
    .sv-step-num {
        position: absolute; top: 14px; left: 14px;
        display: flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 50%;
        background: #a50f0f; color: #fff; font-size: 13px; font-weight: 600;
    }
    .sv-steps .dh-step h3 { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: #1e1e1e; }
    .sv-steps .dh-step p { margin: 8px 0 0; max-width: none; font-size: 11.5px; line-height: 1.5; color: #6f6f6f; }
    .sv-steps .dh-step h3, .sv-steps .dh-step p { margin-left: 0 !important; }
}

/* Phones: Call Now and Whatsapp Now share the row, edge to edge. */
@media not all and (min-width: 1024px) {
    .sv-cta { display: flex; flex-wrap: nowrap; gap: 12px; }
    .sv-cta .sv-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13.5px; }
    .sv-btn.is-line, .sv-btn.is-wa { min-width: 0; }
    .sv-btn.is-wa i { font-size: 1.15em; }
}

/* ---- the plain pages: FAQs, terms, privacy ------------------------------- */
.sv-page-hero { padding: calc(40 * var(--u)) 0; }
.sv-page-hero h1 { margin: 0; font-size: max(20px, calc(30 * var(--u))); font-weight: 600; color: var(--maroon); }
.sv-page-body { padding: calc(30 * var(--u)) 0 calc(60 * var(--u)); }
.sv-page-text { max-width: calc(1100 * var(--u)); font-size: max(12px, calc(15 * var(--u))); line-height: 1.65; color: #4f4f4f; }
.sv-page-text h2, .sv-page-text h3 { margin: calc(26 * var(--u)) 0 calc(8 * var(--u)); font-size: max(14px, calc(19 * var(--u))); font-weight: 600; color: var(--ink); }
.sv-page-text p { margin: 0 0 calc(14 * var(--u)); }
.sv-page-text ul, .sv-page-text ol { margin: 0 0 calc(14 * var(--u)); padding-left: calc(22 * var(--u)); }
.sv-page-text li { margin-bottom: calc(6 * var(--u)); }
.sv-page-text a { color: var(--maroon); text-decoration: underline; }
.sv-faq-group { margin: calc(30 * var(--u)) 0 calc(12 * var(--u)); font-size: max(14px, calc(20 * var(--u))); font-weight: 600; color: var(--ink); }
.sv-faq { max-width: calc(1100 * var(--u)); border-bottom: 1px solid #ece2d6; }
.sv-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(16 * var(--u)) 0; list-style: none; font-size: max(13px, calc(16 * var(--u))); font-weight: 500; color: var(--ink); cursor: pointer; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid #8a8a8a; border-bottom: 2px solid #8a8a8a; transform: rotate(45deg); }
.sv-faq[open] summary::after { transform: rotate(-135deg); }
.sv-faq p { margin: 0 0 calc(16 * var(--u)); font-size: max(12px, calc(15 * var(--u))); line-height: 1.6; color: #6a6a6a; }
.sv-page-contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(34 * var(--u)); }
.sv-page-contact .sv-btn { font-size: max(12px, calc(15 * var(--u))); }