/*

 * The services listing, as drawn in "service list.pdf" with the hero drawn for

 * it since: the page's name, the categories as tabs and the lamp, the open category's

 * subcategories down the left, and the services four to a row. The header,

 * newsletter and footer are the desktop homepage's own - assets/css/

 * desktop-home.css draws those; this file draws what is between them, at the

 * same scale (--u, one design pixel of the 1920px drawing).

 */



.svl { background: #fff; }

.svl-wrap { width: var(--wrap); margin: 0 auto; }



/* ---- the hero -------------------------------------------------------------

 * The page's name and promise on a warm ground with a mandala pressed into it,

 * the categories as tabs under them, a few italic words, and the lamp on the

 * right with the breadcrumb over it. Sizes are the drawing's, at 1920px.

 */

.svl-hero {

    position: relative; overflow: hidden; height: calc(200 * var(--u)); min-height: 150px;

    background: linear-gradient(90deg, #fbecdb 0%, #fdf3e7 48%, #fcefe0 74%);

}

/* the mandala: its straight edge on the page's left edge, and again against the lamp */

.svl-hero::before, .svl-hero::after {

    content: ""; position: absolute; top: 50%; width: calc(95 * var(--u)); height: calc(200 * var(--u)); min-height: 150px; pointer-events: none;

    background: center / contain no-repeat url("../img/services/hero-mandala.png");

    background-image: image-set(url("../img/services/hero-mandala.webp") type("image/webp"), url("../img/services/hero-mandala.png") type("image/png"));

    opacity: .22;

}

.svl-hero::before { left: 0; transform: translateY(-50%) scaleX(-1); }

.svl-hero::after { right: 25.3%; transform: translateY(-50%); }



.svl-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 25.3%; }

.svl-hero-photo img {

    display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center;

    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%);

}



.svl-hero-text { position: relative; z-index: 1; padding: calc(18 * var(--u)) 0 0 calc(66 * var(--u)); }

.svl-hero h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: max(21px, calc(42 * var(--u))); font-weight: 700; line-height: 1.1; letter-spacing: -.005em; color: #7a1010; }

.svl-hero-text > p { margin: calc(2 * var(--u)) 0 0; font-family: "Inter", sans-serif; font-size: max(12px, calc(21 * var(--u))); font-weight: 500; color: #8b1a1a; }



.svl-tabs { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); }

.svl-tab {

    display: inline-flex; align-items: center; gap: calc(14 * var(--u)); height: calc(54 * var(--u)); min-height: 34px;

    padding: 0 calc(26 * var(--u)) 0 calc(18 * var(--u)); border: 1px solid #efdac4; border-radius: calc(9 * var(--u)); background: #fffaf3;

    font-family: "Inter", sans-serif; font-size: max(12px, calc(19 * var(--u))); font-weight: 500; color: #2a2a2a;

    box-shadow: 0 1px 3px rgba(122, 16, 16, .05);

}

.svl-tab img { display: block; width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 22px; min-height: 22px; object-fit: contain; }

.svl-tab i { width: calc(32 * var(--u)); min-width: 22px; text-align: center; color: var(--maroon); }

.svl-tab:hover { border-color: #c9a07a; }

.svl-tab.is-on { border-color: #7a1010; background: #7a1010; color: #fff; }



.svl-hero-words {

    position: absolute; z-index: 1; top: calc(22 * var(--u)); left: calc(1044 * var(--u)); margin: 0; padding: 0; list-style: none;

    font-family: "Cormorant Garamond", Georgia, serif; font-size: max(12px, calc(23 * var(--u))); font-style: italic; font-weight: 500; line-height: calc(33 * var(--u)); color: #b39472;

}

.svl-hero-words::after { content: ""; display: block; width: calc(80 * var(--u)); height: 1px; margin: calc(10 * var(--u)) 0 0 calc(40 * var(--u)); background: radial-gradient(circle, #b99b73 0 2.5px, transparent 3px) center / 6px 6px no-repeat, linear-gradient(#d8c3a5, #d8c3a5); }



.svl-crumbs { position: absolute; z-index: 1; top: calc(24 * var(--u)); right: 6.3%; display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: max(12px, calc(20 * var(--u))); }

.svl-crumbs a { color: #555; }

.svl-crumbs a:hover { color: var(--maroon); }

.svl-crumbs i { font-size: .62em; color: #777; }

.svl-crumbs span { font-weight: 600; color: #7a1010; }



.svl-hero-deeds {

    position: absolute; z-index: 1; top: 58%; left: 80.6%; margin: 0; padding: 0 calc(34 * var(--u));

    font-family: "Cormorant Garamond", Georgia, serif; font-size: max(12px, calc(22 * var(--u))); font-style: italic; font-weight: 500; line-height: 1.3; color: #8a6a3a;

}

.svl-hero-deeds span { display: block; }

.svl-hero-deeds span + span { padding-left: 0; }

.svl-hero-deeds::before, .svl-hero-deeds::after { content: "||"; position: absolute; font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; letter-spacing: .02em; color: #8b5a3c; }

.svl-hero-deeds::before { top: 0; left: 0; }

.svl-hero-deeds::after { right: 0; bottom: 0; }



/* the italic words need the room between the tabs and the lamp */

@media (max-width: 1279.98px) { .svl-hero-words { display: none; } }



/* ---- the panel and the shelf ------------------------------------------------

 * pujariya-services-design.pdf, measured on its 1024px drawing and written at

 * 1920px (x1.875): the filter panel down the left, the count and sort over four

 * columns of cards.

 */

.svl-body {

    display: grid; grid-template-columns: calc(405 * var(--u)) minmax(0, 1fr); gap: calc(38 * var(--u));

    align-items: start; padding: calc(45 * var(--u)) calc(58 * var(--u)) calc(60 * var(--u)) calc(51 * var(--u));

}



/* the panel */

.svl-side {

    padding: calc(36 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)); border: 1px solid #efe3d6; border-radius: calc(11 * var(--u));

    background: linear-gradient(180deg, #fbf6ef, #faf3ea); font-family: "Inter", sans-serif;

}

/* the lotus sits on the heading's line; the note below starts where the heading does */

.svl-side-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(18 * var(--u)); row-gap: calc(6 * var(--u)); align-items: center; }

/* held to the heading's first line, even when a long tab name wraps it: the

   icon is as tall as that line, and centred on it */

.svl-side-head img { grid-row: 1; grid-column: 1; align-self: start; display: block; width: auto; height: max(21px, calc(30 * 1.15 * var(--u))); }

.svl-side-head h2 { grid-row: 1; grid-column: 2; margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: max(18px, calc(30 * var(--u))); font-weight: 700; line-height: 1.15; color: #7a1010; }

.svl-side-note { grid-row: 2; grid-column: 2; margin: 0; font-size: max(12px, calc(19 * var(--u))); line-height: 1.45; color: #7a7a7a; }



.svl-select {

    position: relative; display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(62 * var(--u)); min-height: 38px;

    padding: 0 calc(20 * var(--u)); border: 1px solid #e8ddd1; border-radius: calc(9 * var(--u)); background: #fff;

}

.svl-select:focus-within { border-color: #b98a6a; }



.svl-side-label { margin: calc(30 * var(--u)) 0 calc(12 * var(--u)); font-size: max(13px, calc(22 * var(--u))); font-weight: 700; color: #8b1414; }



.svl-cats { margin: 0 calc(-9 * var(--u)); padding: 0; list-style: none; }

.svl-cats li { border-bottom: 1px solid #eadfd3; }

.svl-cats a {

    display: flex; align-items: center; justify-content: space-between; gap: 10px; height: calc(52 * var(--u)); min-height: 34px;

    padding: 0 calc(22 * var(--u)) 0 calc(28 * var(--u)); font-size: max(12px, calc(21 * var(--u))); color: #2e2e2e;

}

.svl-cats a i { font-size: .7em; color: #555; }

.svl-cats a:hover { color: #8b1414; }

.svl-cats a.is-on { border-left: 2px solid #8b1414; border-radius: calc(4 * var(--u)); background: linear-gradient(90deg, #f5dfc7, #faeee0); }



.svl-select select {

    position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 calc(52 * var(--u)) 0 calc(22 * var(--u)); border: 0; border-radius: inherit;

    background: transparent; font: inherit; font-size: max(12px, calc(21 * var(--u))); color: #333; appearance: none; -webkit-appearance: none; cursor: pointer;

}

.svl-select i { position: absolute; right: calc(22 * var(--u)); font-size: max(10px, calc(16 * var(--u))); color: #666; pointer-events: none; }





/* the lotus that closes the panel: the drawing's art edge to edge, its words set over it */

.svl-side { overflow: hidden; }



/* The panel stays put below the sticky header while the cards scroll past;

   on a short screen it scrolls inside itself so nothing in it is cut off. */

@media (min-width: 1024px) {

    .svl-side {

        --svl-side-top: calc(115 * var(--u) + 12px);

        position: sticky; top: var(--svl-side-top);

        max-height: calc(100vh - var(--svl-side-top) - 12px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;

    }

    .svl-side::-webkit-scrollbar { width: 6px; }

    .svl-side::-webkit-scrollbar-thumb { border-radius: 3px; background: #e6d8d0; }

}

.svl-peace { position: relative; margin: calc(44 * var(--u)) calc(-30 * var(--u)) calc(-26 * var(--u)); }

.svl-peace img {

    /* no taller than the screen can spare, so the pinned panel fits without scrolling on a usual screen */

    display: block; width: 100%; height: auto; max-height: 29vh; object-fit: cover; object-position: center 65%;

    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%);

}

.svl-peace p {

    position: absolute; top: 53%; left: 0; right: 0; margin: 0; text-align: center;

    font-family: "Cormorant Garamond", Georgia, serif; font-size: max(15px, calc(30 * var(--u))); font-style: italic; font-weight: 500; line-height: 1.15; color: #8a5a3c;

}

.svl-peace-line {

    position: absolute; top: 87%; left: 50%; width: calc(72 * var(--u)); min-width: 44px; height: 1px; transform: translateX(-50%);

    background: linear-gradient(90deg, transparent, #c9a27a 20%, #c9a27a 80%, transparent);

}

.svl-peace-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #b98a5e; transform: translate(-50%, -50%); }



/* the count and the order */

.svl-main-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(42 * var(--u)); margin-bottom: calc(16 * var(--u)); font-family: "Inter", sans-serif; }

.svl-main-head h2 { margin: 0; font-size: max(15px, calc(23 * var(--u))); font-weight: 700; color: #2d1b12; }

.svl-sort { display: flex; align-items: center; gap: calc(12 * var(--u)); }

.svl-sort label { font-size: max(11px, calc(16 * var(--u))); color: #666; }

.svl-select.is-sort { width: calc(190 * var(--u)); min-width: 130px; height: calc(42 * var(--u)); min-height: 30px; }

.svl-select.is-sort select { padding-left: calc(16 * var(--u)); font-size: max(11px, calc(16 * var(--u))); }



/* the cards, four to a row */

/* every card is built the same way, so heading, text, photo, price and button sit on the same lines across a row */

.svl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(30 * var(--u)) calc(19 * var(--u)); }

.svl-card {

    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;

    border: 1px solid #f0e4e4; border-radius: calc(10 * var(--u)); background: #fff; font-family: "Inter", sans-serif;

}



/* the ribbon hangs from the card's top edge, as a bookmark does */

.svl-ribbon {

    position: absolute; z-index: 2; top: calc(-2 * var(--u)); left: calc(18 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u));

    min-width: calc(34 * var(--u)); padding: calc(6 * var(--u)) calc(5 * var(--u)) calc(14 * var(--u)); background: #800000; color: #fff;

    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9 * var(--u)), 0 100%);

}

.svl-ribbon i { font-size: max(10px, calc(15 * var(--u))); line-height: 1; }

.svl-ribbon b { font-size: max(6px, calc(9.5 * var(--u))); font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }



.svl-card-title {

    display: -webkit-box; height: calc(2 * 1.42em); margin: calc(50 * var(--u)) calc(18 * var(--u)) 0; overflow: hidden;

    font-family: "Noto Serif", Georgia, serif; font-size: max(14px, calc(22 * var(--u))); font-weight: 600; line-height: 1.42; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

}

.svl-card-title a { color: #1e1e1e; }

.svl-card-title a:hover { color: var(--maroon); }



.svl-card-text { --svl-line: calc(max(11px, calc(16 * var(--u))) * 1.35); height: calc(2 * var(--svl-line)); margin: calc(6 * var(--u)) calc(18 * var(--u)) 0; overflow: hidden; }

.svl-rating { display: flex; align-items: center; gap: calc(5 * var(--u)); height: var(--svl-line); margin: 0; font-size: max(11px, calc(15 * var(--u))); }

.svl-rating i { color: #8a5300; font-size: .95em; }

.svl-rating b { font-weight: 600; color: #8a5300; }

.svl-rating span { color: #8a7a7a; }



.svl-card-blurb {

    display: -webkit-box; margin: 0; overflow: hidden;

    font-size: max(11px, calc(16 * var(--u))); line-height: 1.35; color: #7b7b7b; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

}

.svl-rating + .svl-card-blurb { -webkit-line-clamp: 1; }



.svl-card-photo { display: block; aspect-ratio: 277 / 176; margin-top: calc(12 * var(--u)); overflow: hidden; background: #dfdfdf; }

.svl-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }

.svl-card:hover .svl-card-photo img { transform: scale(1.04); }



.svl-card-foot { display: flex; flex: 1; flex-direction: column; margin: 0 calc(12 * var(--u)) calc(12 * var(--u)); padding-top: calc(12 * var(--u)); }

.svl-card-foot small { margin: 0 calc(6 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid #f0e4e4; font-size: max(9px, calc(12 * var(--u))); letter-spacing: .03em; color: #8a7373; }

.svl-card-foot strong { margin: calc(2 * var(--u)) calc(6 * var(--u)) 0; font-family: "Poppins", sans-serif; font-size: max(14px, calc(22 * var(--u))); font-weight: 600; color: #5c0a0a; }

.svl-card-foot strong.is-request { color: #5c0a0a; }

.svl-book {

    display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); height: calc(56 * var(--u)); min-height: 36px;

    margin-top: auto; border-radius: calc(8 * var(--u)); background: #800000; color: #fff; font-family: "Poppins", sans-serif;

    font-size: max(11px, calc(14 * var(--u))); font-weight: 500;

}

.svl-card-foot .svl-book { margin-top: calc(12 * var(--u)); }

.svl-book:hover { background: #650000; }

.svl-book i { font-size: .9em; }



.svl-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: #6f6a66; }

.svl-empty i { font-size: 34px; color: #dcc9bb; }

.svl-empty h3 { margin: 14px 0 6px; font-size: 20px; color: var(--ink); }

.svl-empty .svl-book { display: inline-flex; margin: 14px 0 0; padding: 0 22px; }



/* the newsletter wears the page's warm ground, with the mandala at its end */

.svl .dh-news { position: relative; overflow: hidden; background: #faf3ea; }

.svl .dh-news::after {

    content: ""; position: absolute; top: 50%; right: 0; width: calc(139 * var(--u)); height: 160%; pointer-events: none;

    background: center / contain no-repeat url("../img/services/hero-mandala.png");

    background-image: image-set(url("../img/services/hero-mandala.webp") type("image/webp"), url("../img/services/hero-mandala.png") type("image/png"));

    opacity: .25; transform: translateY(-50%);

}

.svl .dh-news-text h2 { color: #8b1414; }



@media (min-width: 1024px) {

    .svl-appbar { display: none !important; }

    .svl-m-rail, .svl-m-chips, .svl-m-price { display: none; }

}

@media (max-width: 1199.98px) {

    .svl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}



/* ---- phones and tablets: the page's own bar, tabs and list across the top -- */

@media not all and (min-width: 1024px) {

    body.svl > .dh-header { display: none; }



    .svl-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); }

    .svl-appbar-logo { flex: 0 0 auto; display: flex; align-items: center; }

    .svl-appbar-logo img { display: block; width: 32px; height: 32px; border-radius: 50%; }

    .svl-appbar-title { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; color: #1e1e1e; white-space: nowrap; text-overflow: ellipsis; }

    .svl-ic { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 23px; height: 23px; color: #1e1e1e; }

    .svl-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    .svl-ic.header-cart svg circle { fill: currentColor; stroke: none; }



    /* ---- the phone design: rail | chips over two-up cards ---- */

    .svl { background: #fbf6f1; }

    .svl-hero, .svl-side, .svl-main-head { display: none; }



    .svl-body { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 12px 10px 24px 0; background: #fbf6f1; }



    .svl-m-rail { position: sticky; top: 64px; align-self: start; display: flex; flex-direction: column; gap: 14px; padding: 4px 0 12px; }

    .svl-m-stop { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 4px; text-align: center; color: #2a2a2a; }

    .svl-m-pic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border: 2px solid transparent; border-radius: 50%; background: #f3e6d8; color: #800000; font-size: 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

    .svl-m-pic img { width: 100%; height: 100%; object-fit: cover; }

    .svl-m-pic.is-all { background: #fff; }

    .svl-m-name { font-size: 11px; font-weight: 500; line-height: 1.2; }

    .svl-m-stop.is-on .svl-m-pic { border-color: #800000; }

    .svl-m-stop.is-on .svl-m-name { font-weight: 700; color: #800000; }



    .svl-m-chips { display: flex; gap: 8px; margin-bottom: 12px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }

    .svl-m-chips::-webkit-scrollbar { display: none; }

    .svl-m-chip { position: relative; flex: 0 0 auto; }

    .svl-m-chip summary { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid #e8dcd0; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 500; color: #2a2a2a; white-space: nowrap; list-style: none; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

    .svl-m-chip summary::-webkit-details-marker { display: none; }

    .svl-m-chip summary i { font-size: 11px; }

    .svl-m-chip summary b { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; background: #800000; color: #fff; font-size: 10px; }

    .svl-m-chip[open] summary { border-color: #800000; color: #800000; }

    .svl-m-menu { position: fixed; z-index: 70; left: 86px; right: 10px; margin-top: 6px; padding: 6px; border: 1px solid #eadfd3; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }

    .svl-m-menu a { display: block; padding: 10px 12px; border-radius: 7px; font-size: 13px; color: #2a2a2a; }

    .svl-m-menu a.is-on { background: #fbeee4; font-weight: 600; color: #800000; }

    .svl-m-search { display: flex; gap: 6px; margin-bottom: 4px; }

    .svl-m-search input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #e3d6c8; border-radius: 7px; font: inherit; font-size: 13px; }

    .svl-m-search button { width: 36px; height: 36px; border: 0; border-radius: 7px; background: #800000; color: #fff; }



    .svl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }

    .svl-card { border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .08); }

    .svl-card-foot small, .svl-card-foot strong { display: none; }

    .svl-card-photo { order: -1; margin: 0; aspect-ratio: 4 / 3; }

    .svl-ribbon { top: 7px; left: 7px; flex-direction: row; gap: 3px; min-width: 0; padding: 3px 7px; border-radius: 4px; clip-path: none; background: #800000; }

    .svl-ribbon i { display: none; }

    .svl-ribbon b { font-size: 9px; letter-spacing: .03em; }

    .svl-card-title { display: block; height: auto; margin: 7px 8px 0; overflow: hidden; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }

    /* the review and the short description under the name, two lines kept for every card so the cards line up */

    .svl-card-text { --svl-line: 15px; margin: 3px 8px 0; }

    .svl-card-text .svl-rating { gap: 3px; font-size: 11px; }

    .svl-card-text .svl-card-blurb { font-size: 11px; line-height: 15px; color: #7b7b7b; }

    .svl-m-price { margin: 4px 8px 0; font-size: 14px; font-weight: 700; color: #800000; }

    .svl-card-foot { flex: 0 0 auto; flex-direction: row; gap: 6px; margin: 7px 7px 8px; padding: 0; }

    .svl-card-foot .svl-book { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 30px; min-height: 0; margin: 0; border-radius: 5px; font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 600; }

    .svl-card-foot .svl-book i { display: none; }

    .svl-empty { padding: 40px 10px; }

}