/*
 * Desktop homepage - desktop.pdf (a 1920px Figma frame).
 *
 * The whole page is the design scaled to the screen: every size below is the
 * design's own number times --u, one design pixel (the screen width / 1920,
 * never more than 1px). So a 1440px laptop shows exactly the design at 75% -
 * the same column, the same margins, the bells and garlands in the same place.
 * Breakpoints (min-width only): under 1024 a narrow-window layout; from 1024
 * the scaled design, with a lower limit on --u so text stays readable.
 */

.dh {
    --u: .6px;
    --gut: 24px;
    --gut-wide: 24px;
    --maroon: #800000;
    --ink: #1e1e1e;
    --grey: #5e5d5d;
    --soft: #979797;
    --peach: #ffedd8;
    --wrap: min(1443 * var(--u), 100vw - 2 * var(--gut));
    --wide: min(1760 * var(--u), 100vw - 2 * var(--gut-wide));
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
@media (min-width: 1024px) { .dh { --u: clamp(.66px, 100vw / 1920, 1px); --gut: 32px; --gut-wide: 24px; } }
@media (min-width: 1280px) { .dh { --gut: 40px; } }
@media (min-width: 1536px) { .dh { --gut: 46px; } }
/* The design's content column (cards, services, promos, features, steps) sits 33 design pixels right of
   the centre of its frame, while the header, hero and headings are centred; the same here. */
@media (min-width: 1024px) { .dh .dh-wrap { margin-left: calc((100% - var(--wrap)) / 2 + 33 * var(--u)); margin-right: 0; } }

.dh *, .dh *::before, .dh *::after { box-sizing: border-box; }
.dh img { max-width: 100%; }
:where(.dh) a { color: inherit; text-decoration: none; }
.dh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dh-wrap { width: var(--wrap); margin-left: auto; margin-right: auto; }
.dh-wide { width: var(--wide); margin-left: auto; margin-right: auto; }

/* ---- header ---------------------------------------------------------------- */
/* The sideways guard on .dh also lands on the header, which carries that
   class: it made the header a clipping box and cut the Service and Product
   menus off at its own bottom edge. The header has nothing to clip. */
.dh-header { position: sticky; top: 0; z-index: 50; overflow: visible; background: #fff; }
.dh-header-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(115 * var(--u)); }
.dh-nav { display: flex; align-items: center; gap: calc(28 * var(--u)); font-size: max(11px, calc(15 * var(--u))); }
@media (min-width: 1280px) { .dh-nav { gap: calc(40 * var(--u)); } }
.dh-nav > a, .dh-menu > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; color: #000; }
.dh-nav > a:hover, .dh-menu > a:hover { color: var(--maroon); }
.dh-menu > a i { font-size: .62em; }
.dh-menu { position: relative; }
.dh-menu-list {
    position: absolute; top: 100%; left: -14px; z-index: 5; display: none; min-width: 210px; max-height: 70vh; overflow-y: auto;
    padding: 8px; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
.dh-menu:hover .dh-menu-list, .dh-menu:focus-within .dh-menu-list { display: block; }
.dh-menu-list a { display: block; padding: 8px 12px; border-radius: 7px; font-size: 14px; color: #333; white-space: nowrap; }
.dh-menu-list a:hover { background: var(--peach); color: var(--maroon); }

.dh-brand { display: flex; align-items: center; gap: calc(11 * var(--u)); }
.dh-brand img { width: calc(79 * var(--u)); height: calc(79 * var(--u)); border-radius: 50%; }
.dh-brand strong { display: block; font-size: max(11px, calc(16 * var(--u))); font-weight: 600; color: var(--maroon); }
.dh-brand small { display: block; margin-top: calc(6 * var(--u)); font-size: max(11px, calc(12 * var(--u))); color: #6b6b6b; }

.dh-tools { display: flex; align-items: center; justify-content: flex-end; gap: calc(20 * var(--u)); }
.dh-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
.dh-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dh-icon.header-cart svg circle { fill: currentColor; stroke: none; }
.dh-icon:hover { color: var(--maroon); }
/* base.css styles .header-cart as the old round button; on hover it painted a
   maroon disc over this header's outline icon. This keeps the icon an icon. */
.dh-icon.header-cart, .dh-icon.header-cart:hover { width: 26px; height: 26px; border-radius: 0; background: none; }
.dh-icon.header-cart:hover { color: var(--maroon); }
.dh-icon .header-cart-count, .dh-icon .cart-count {
    position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--maroon); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.dh-lang { position: relative; }
.dh-lang summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; font-size: max(11px, calc(18.6 * var(--u))); font-weight: 500; }
.dh-lang summary::-webkit-details-marker { display: none; }
.dh-lang summary img { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; }
.dh-lang summary i { font-size: 10px; }
.dh-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 150px; padding: 6px; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.dh-lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 14px; }
.dh-lang-menu a img { width: 18px; height: 18px; border-radius: 50%; }
.dh-lang-menu a.is-on, .dh-lang-menu a:hover { background: var(--peach); color: var(--maroon); }

.dh-search-panel { padding: 14px 0 18px; background: #fff; border-top: 1px solid #f0f0f0; box-shadow: 0 10px 20px rgba(0, 0, 0, .05); }
.dh-search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 760px; height: 50px; padding: 0 6px 0 18px; border: 1px solid #e2ddd6; border-radius: 25px; background: #fff; }
.dh-search > i { color: #888; }
.dh-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; }
.dh-search button { height: 38px; padding: 0 22px; border: 0; border-radius: 19px; background: var(--maroon); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.dh-search .live-search { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 460px; overflow-y: auto; background: #fff; border: 1px solid #e8e4dc; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.dh-search .live-search[hidden] { display: none; }
.dh-search .live-search-group { margin: 0; padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a7168; }
.dh-search .live-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.dh-search .live-search-row img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.dh-search .live-search-text { display: flex; flex-direction: column; min-width: 0; }
.dh-search .live-search-name { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.dh-search .live-search-meta { font-size: 12px; font-weight: 600; color: var(--maroon); }
.dh-search .live-search-row:hover, .dh-search .live-search-row.is-on { background: #fdf3e6; color: var(--maroon); }
.dh-search .live-search-all { display: block; padding: 11px 14px; border-top: 1px solid #efe9e2; font-size: 13px; font-weight: 600; color: var(--maroon); }
.dh-search .live-search-none { margin: 0; padding: 14px; font-size: 14px; color: #7a7168; }

/* ---- hero ------------------------------------------------------------------------ */
.dh-hero { position: relative; }
.dh-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dh-hero-track::-webkit-scrollbar { display: none; }
.dh-hero-slide { flex: 0 0 100%; scroll-snap-align: start; }
.dh-hero-slide img { display: block; width: 100%; aspect-ratio: 1760 / 443; object-fit: cover; }
.dh-dots { position: absolute; left: 50%; bottom: calc(16 * var(--u)); transform: translateX(-50%); display: flex; gap: 6px; padding: 5px 7px; border-radius: 12px; background: rgba(255, 255, 255, .85); }
.dh-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #d6d6d6; cursor: pointer; }
.dh-dots button.is-on { background: var(--maroon); }

/* ---- category row --------------------------------------------------------------- */
.dh-cats-wrap { position: relative; padding: calc(92 * var(--u)) calc(60 * var(--u)) calc(83 * var(--u)); }
.dh-cats { display: flex; gap: calc(51 * var(--u)); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.dh-cats::-webkit-scrollbar { display: none; }
.dh-cats > .dh-cat:first-child { margin-left: auto; }
.dh-cats > .dh-cat:last-child { margin-right: auto; }
.dh-cat { flex: 0 0 calc(114 * var(--u)); text-align: center; }
.dh-cat-img { display: block; width: calc(114 * var(--u)); height: calc(114 * var(--u)); overflow: hidden; border-radius: calc(14 * var(--u)); background: #f6efe6; }
.dh-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dh-cat:hover .dh-cat-img img { transform: scale(1.06); }
.dh-cat-name { display: block; margin: calc(17 * var(--u)) -20px 0; font-size: max(11px, calc(12.9 * var(--u))); font-weight: 500; color: #111; white-space: nowrap; }
.dh-cat-arrows { position: absolute; inset: 0; pointer-events: none; }
.dh-cat-arrows button {
    position: absolute; top: calc(92 * var(--u) + 57 * var(--u)); transform: translateY(-50%); pointer-events: auto;
    width: 30px; height: 30px; padding: 0; border: 0; background: none; color: #111; font-size: 14px; cursor: pointer;
}
.dh-cat-arrows button[data-dir="-1"] { left: 0; }
.dh-cat-arrows button[data-dir="1"] { right: 0; }
.dh-cat-arrows button:disabled { color: #c9c9c9; cursor: default; }

/* ---- section heads ----------------------------------------------------------------- */
.dh-section { position: relative; overflow: hidden; }
.dh-section.is-peach { background: var(--peach); }
.dh-section.is-grey { background: #f3f3f3; }
.dh-head { position: relative; z-index: 1; text-align: center; }
.dh-diya { display: block; width: calc(51 * var(--u)); height: calc(51 * var(--u)); margin: 0 auto; object-fit: contain; }
.dh-head h2 { margin: calc(2 * var(--u)) 0 0; font-size: max(11px, calc(30 * var(--u))); font-weight: 500; line-height: 1.25; color: var(--maroon); }
.dh-head p { margin: calc(9 * var(--u)) 0 0; font-size: max(11px, calc(15 * var(--u))); color: var(--grey); }

/* ---- product cards and rails --------------------------------------------------------- */
.dh-essentials, .dh-loved { padding: calc(25 * var(--u)) 0 calc(43 * var(--u)); }
.dh-essentials .dh-head, .dh-loved .dh-head { margin-bottom: calc(40 * var(--u)); }
/* A flex row, not a grid: with fewer cards than fit, auto margins on the ends centre them, and a
   longer row still scrolls from its first card. */
.dh-rail {
    --gap: calc(32 * var(--u));
    --per: 4;
    display: flex; gap: var(--gap);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px;
}
.dh-rail::-webkit-scrollbar { display: none; }
.dh-rail > .dh-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; }
.dh-rail > .dh-card:first-child { margin-left: auto; }
.dh-rail > .dh-card:last-child { margin-right: auto; }

.dh-card { position: relative; min-width: 0; }
.dh-card-photo { position: relative; padding: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; }
.dh-card-photo > a:first-child { display: block; overflow: hidden; border-radius: calc(8 * var(--u)); }
/* square box, whole photo shown: product photos are square shots, often on white, and a tall crop cut them */
.dh-card-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; transition: transform .35s; }
.dh-card:hover .dh-card-photo img { transform: scale(1.04); }
.dh-heart {
    position: absolute; top: calc(22 * var(--u)); right: calc(22 * var(--u)); display: flex; align-items: center; justify-content: center;
    width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 4px; background: #fff; color: var(--maroon); font-size: calc(16 * var(--u));
}
.dh-off { position: absolute; left: 0; bottom: calc(-8 * var(--u)); padding: 2px 6px; border-radius: 2px; background: #008000; color: #fff; font-size: max(10px, calc(12 * var(--u))); line-height: 1.35; }
.dh-card-name { display: block; margin-top: calc(14 * var(--u)); overflow: hidden; font-size: max(11px, calc(17.9 * var(--u))); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.dh-card-name:hover { color: var(--maroon); }
.dh-price { margin-top: calc(4 * var(--u)); font-size: max(11px, calc(23.9 * var(--u))); font-weight: 600; color: var(--maroon); }
.dh-price s { margin-left: 4px; font-weight: 400; color: #a3a3a3; }

.dh-actions { display: flex; gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
.dh-actions > form, .dh-actions > .cart-control, .dh-actions > .mh-btn { display: block; flex: 1 1 0; min-width: 0; margin: 0; }
.dh-actions .cart-control form { margin: 0; }
.dh-actions .mh-btn, .dh-actions .cart-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; height: calc(50 * var(--u)); min-height: 34px; padding: 0 6px;
    border: 1px solid var(--maroon); border-radius: 4px; font-family: inherit; font-size: max(11px, calc(15 * var(--u))); font-weight: 400; white-space: nowrap; cursor: pointer;
}
.dh-actions .mh-btn.is-solid { background: var(--maroon); color: #fff; }
.dh-actions .mh-btn.is-solid:hover { background: #650000; }
.dh-actions .mh-btn.is-line, .dh-actions .cart-btn.is-add { background: #fff; color: var(--maroon); }
.dh-actions .mh-btn.is-line:hover, .dh-actions .cart-btn.is-add:hover { background: #fff5f5; }
.dh-actions .cart-btn i { display: none; }
.dh-actions .mh-btn.is-soldout, .dh-actions .cart-btn.is-out { border-color: #ddd; background: #f3f3f3; color: #888; cursor: default; }
.dh-actions .cart-stepper { display: flex; align-items: center; justify-content: space-between; width: 100%; height: calc(50 * var(--u)); min-height: 34px; border-radius: 4px; }

.dh-arrows { display: flex; justify-content: center; margin: calc(40 * var(--u)) auto 0; width: max-content; padding: 2px 4px; border-radius: 20px; background: #fff; }
.dh-arrows[hidden] { display: none; }
.dh-arrows button { width: calc(33 * var(--u)); min-width: 24px; height: calc(31 * var(--u)); min-height: 24px; padding: 0; border: 0; background: none; color: var(--maroon); font-size: max(11px, calc(17 * var(--u))); cursor: pointer; }
.dh-arrows button:disabled { color: #cfcfcf; cursor: default; }
.dh-arrows.is-dark { background: var(--maroon); }
.dh-arrows.is-dark button { color: #fff; }
.dh-arrows.is-dark button:disabled { color: rgba(255, 255, 255, .45); }

/* bells and garlands beside the content; placed from the content column's edge, and off the page where there is no room */
.dh-deco { position: absolute; inset: 0; pointer-events: none; }
.dh-bells, .dh-garland { position: absolute; top: 0; height: auto; }
.dh-bells.is-left { left: calc((100% - var(--wrap)) / 2 - 196 * var(--u)); width: calc(113 * var(--u)); }
.dh-bells.is-right { right: calc((100% - var(--wrap)) / 2 - 196 * var(--u)); width: calc(113 * var(--u)); }
.dh-live .dh-bells.is-left { left: calc((100% - var(--wrap)) / 2 - 228 * var(--u)); }
.dh-live .dh-bells.is-right { right: calc((100% - var(--wrap)) / 2 - 228 * var(--u)); }
.dh-garland { width: calc(50 * var(--u)); }
.dh-garland.is-l1 { top: calc(-27 * var(--u)); left: calc((100% - var(--wrap)) / 2 - 170 * var(--u)); }
.dh-garland.is-l2 { top: calc(-229 * var(--u)); left: calc((100% - var(--wrap)) / 2 - 129 * var(--u)); }
.dh-garland.is-r1 { top: calc(-15 * var(--u)); right: calc((100% - var(--wrap)) / 2 - 126 * var(--u)); }
.dh-garland.is-r2 { top: calc(-217 * var(--u)); right: calc((100% - var(--wrap)) / 2 - 167 * var(--u)); }
.dh-section > .dh-wrap { position: relative; z-index: 1; }

/* ---- featured services ----------------------------------------------------------------- */
.dh-services { padding: calc(56 * var(--u)) 0 calc(109 * var(--u)); }
.dh-services .dh-head { margin-bottom: calc(57 * var(--u)); }
.dh-svc-grid { display: grid; grid-template-columns: 350fr 344fr 344fr 344fr; grid-template-rows: 1fr 1fr; column-gap: calc(19 * var(--u)); row-gap: calc(31 * var(--u)); }
.dh-svc-grid > .dh-svc-banner { grid-row: 1 / span 2; margin-right: calc(1 * var(--u)); }
/* the banner fills the two rows the tiles make; its own tall picture must not set their height */
.dh-svc-banner { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: calc(24 * var(--u)); }
.dh-svc-banner img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dh-svc-banner:hover img { transform: scale(1.03); }
.dh-svc { position: relative; display: block; overflow: hidden; aspect-ratio: 344 / 253; border-radius: calc(24 * var(--u)); background: #5a0f0f; }
.dh-svc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dh-svc:hover > img { transform: scale(1.05); }
.dh-svc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(134, 12, 10, 0) 25%, rgba(134, 12, 10, .55) 55%, #860c0a 100%); }
.dh-svc-body { position: absolute; left: calc(17 * var(--u)); right: calc(15 * var(--u)); bottom: calc(18 * var(--u)); z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: #fff; }
.dh-svc-text { min-width: 0; }
.dh-svc-text strong { display: block; overflow: hidden; font-size: max(11px, calc(14.8 * var(--u))); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dh-svc-text small { display: -webkit-box; margin-top: calc(7 * var(--u)); overflow: hidden; max-width: calc(175 * var(--u)); font-size: max(11px, calc(12.3 * var(--u))); line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dh-book { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: calc(30 * var(--u)); min-height: 24px; margin-bottom: calc(6 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: 4px; background: #fff; color: var(--maroon); font-size: max(11px, calc(12.3 * var(--u))); white-space: nowrap; }
.dh-book i { color: #222; font-size: .95em; }
.dh-svc:hover .dh-book { background: #fff3e6; }

/* ---- promos ---------------------------------------------------------------------------- */
.dh-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44 * var(--u)); padding: calc(109 * var(--u)) 0 calc(118 * var(--u)); }
.dh-promo { display: block; overflow: hidden; border-radius: calc(10 * var(--u)); }
.dh-promo img { display: block; width: 100%; aspect-ratio: 450 / 252; object-fit: cover; transition: transform .35s; }
.dh-promo:hover img { transform: scale(1.03); }

/* ---- combo kits (red) --------------------------------------------------------------------- */
.dh-combos { padding: calc(26 * var(--u)) 0 calc(78 * var(--u)); background-color: #b3000a; background-position: center; background-size: cover; color: #fff; }
.dh-swastik { display: block; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: 0 auto; fill: #fff; }
.dh-combos .dh-head h2 { margin-top: calc(6 * var(--u)); color: #fff; }
.dh-combos .dh-head p { color: #fff; }
.dh-combos .dh-head { margin-bottom: calc(61 * var(--u)); }
.dh-combo-rail { --gap: calc(42 * var(--u)); padding: 0 calc(24 * var(--u)) 4px; scroll-snap-type: none; }
.dh-combo-rail > .dh-card { flex-basis: calc(280 * var(--u)); }
.dh-combo-rail .dh-card { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; color: var(--ink); }
.dh-combo-rail .dh-card-photo { padding: 0; }
/* the combo photo fills its box edge to edge, as drawn - no white strips beside it */
.dh-combo-rail .dh-card-photo img { aspect-ratio: 254 / 160; object-fit: cover; }
.dh-combo-rail .dh-heart { top: calc(8 * var(--u)); right: calc(8 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); font-size: calc(13 * var(--u)); }
.dh-combo-rail .dh-off { bottom: calc(-10 * var(--u)); font-size: max(9px, calc(10.2 * var(--u))); }
.dh-combo-rail .dh-card-name { margin-top: calc(16 * var(--u)); font-size: max(11px, calc(11.9 * var(--u))); }
.dh-combo-rail .dh-price { margin-top: calc(6 * var(--u)); font-size: max(11px, calc(17 * var(--u))); }
.dh-combo-rail .dh-actions { gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.dh-combo-rail .dh-actions .mh-btn, .dh-combo-rail .dh-actions .cart-btn, .dh-combo-rail .dh-actions .cart-stepper { height: calc(41 * var(--u)); min-height: 30px; font-size: max(11px, calc(14.7 * var(--u))); }
.dh-view-all { display: flex; align-items: center; justify-content: center; gap: 12px; width: max-content; margin: calc(66 * var(--u)) auto 0; font-size: max(11px, calc(15 * var(--u))); font-weight: 500; color: #fff; }
.dh-view-all:hover { text-decoration: underline; }

/* ---- ceremonies live -------------------------------------------------------------------- */
.dh-live { padding: calc(88 * var(--u)) 0 calc(84 * var(--u)); }
.dh-live .dh-head { margin-bottom: calc(40 * var(--u)); }
.dh-video-wrap { position: relative; z-index: 1; width: min(1589 * var(--u), 100vw - 2 * var(--gut)); margin: 0 auto; }
.dh-videos { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32 * var(--u)) / 2); gap: calc(32 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.dh-videos::-webkit-scrollbar { display: none; }
.dh-video { display: block; overflow: hidden; border-radius: calc(16 * var(--u)); scroll-snap-align: start; }
.dh-video img { display: block; width: 100%; aspect-ratio: 778 / 438; object-fit: cover; transition: transform .35s; }
.dh-video:hover img { transform: scale(1.03); }
/* play button: appears when the pointer is over a video */
.dh-video { position: relative; }
.dh-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.dh-play i { display: flex; align-items: center; justify-content: center; width: calc(84 * var(--u)); min-width: 56px; height: calc(84 * var(--u)); min-height: 56px; padding-left: calc(6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; font-size: max(11px, calc(30 * var(--u))); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transform: scale(.85); transition: transform .25s ease; }
.dh-video:hover .dh-play, .dh-video:focus-visible .dh-play { opacity: 1; }
.dh-video:hover .dh-play i, .dh-video:focus-visible .dh-play i { transform: scale(1); }
.dh-live .dh-arrows { margin-top: calc(35 * var(--u)); }

/* ---- agarbatti banner ------------------------------------------------------------------ */
.dh-banner { display: block; }
.dh-banner img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

/* ---- best services: features and steps ------------------------------------------------ */
.dh-best { padding: calc(52 * var(--u)) 0 calc(48 * var(--u)); }
.dh-best .dh-head { margin-bottom: calc(74 * var(--u)); }
.dh-features { display: grid; grid-template-columns: 314fr 423fr 423fr 283fr; }
.dh-feature { min-height: calc(198 * var(--u)); padding-top: 0; }
.dh-feature + .dh-feature { padding-left: calc(109 * var(--u)); border-left: 1px solid #e1e1e1; }
.dh-feature-icon { display: flex; align-items: center; height: calc(80 * var(--u)); margin-top: calc(2 * var(--u)); }
.dh-feature-icon img { width: auto; max-width: calc(80 * var(--u)); height: calc(62 * var(--u)); object-fit: contain; }
.dh-feature h3 { margin: calc(8 * var(--u)) 0 0; font-size: max(11px, calc(20 * var(--u))); font-weight: 500; color: var(--ink); }
.dh-feature p { margin: calc(12 * var(--u)) 0 0; max-width: calc(300 * var(--u)); font-family: "Poppins", sans-serif; font-size: max(11px, calc(15 * var(--u))); line-height: 1.53; color: var(--grey); }

.dh-steps { display: grid; grid-template-columns: 320fr 350fr 381fr 390fr; margin-top: calc(78 * var(--u)); }
.dh-step-bar { display: flex; align-items: center; height: calc(68 * var(--u)); padding-left: calc(18 * var(--u)); background: #b71c1c; color: #fff; font-size: max(11px, calc(25 * var(--u))); font-weight: 600; }
.dh-step:nth-child(1) .dh-step-bar { border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u)); }
.dh-step:nth-child(2) .dh-step-bar { background: #a90000; }
.dh-step:nth-child(3) .dh-step-bar { background: #7a0101; }
.dh-step:nth-child(4) .dh-step-bar { background: #640000; border-radius: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0; }
.dh-step h3 { margin: calc(22 * var(--u)) 0 0; font-size: max(11px, calc(18 * var(--u))); font-weight: 500; color: var(--ink); }
.dh-step p { margin: calc(14 * var(--u)) 0 0; max-width: calc(300 * var(--u)); font-family: "Poppins", sans-serif; font-size: max(11px, calc(15 * var(--u))); line-height: 1.53; color: var(--soft); }
.dh-step:nth-child(2) h3, .dh-step:nth-child(2) p { margin-left: calc(37 * var(--u)); }
.dh-step:nth-child(3) h3, .dh-step:nth-child(3) p { margin-left: calc(51 * var(--u)); }
.dh-step:nth-child(4) h3, .dh-step:nth-child(4) p { margin-left: calc(59 * var(--u)); }

/* ---- reviews ------------------------------------------------------------------------------ */
.dh-reviews { padding: calc(42 * var(--u)) 0 calc(43 * var(--u)); }
.dh-reviews .dh-head { margin-bottom: calc(37 * var(--u)); }
.dh-review-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(762 * var(--u)); gap: calc(42 * var(--u));
    overflow-x: auto; padding: 0 calc(50% - 381 * var(--u)); scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.dh-review-track::-webkit-scrollbar { display: none; }
.dh-review {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(362 * var(--u)); padding: calc(30 * var(--u)) calc(64 * var(--u));
    border-radius: calc(8 * var(--u)); background: #fdfdfc; text-align: center; scroll-snap-align: center; font-family: "Poppins", sans-serif;
}
.dh-review-photos { display: flex; gap: calc(16 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.dh-review-photos img { width: calc(150 * var(--u)); height: calc(128 * var(--u)); border-radius: 6px; object-fit: cover; }
.dh-review-rating { display: flex; align-items: center; gap: 8px; font-size: max(11px, calc(15 * var(--u))); color: #555; }
.dh-review-rating span { display: flex; gap: 3px; color: #f5bd00; font-size: max(11px, calc(18 * var(--u))); }
.dh-review h3 { margin: calc(12 * var(--u)) 0 0; font-size: max(11px, calc(18 * var(--u))); font-weight: 500; color: #333; }
.dh-review p { display: -webkit-box; margin: calc(6 * var(--u)) 0 0; overflow: hidden; font-size: max(11px, calc(15 * var(--u))); line-height: 1.53; color: var(--soft); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dh-review-by { margin-top: calc(40 * var(--u)); font-size: max(11px, calc(15 * var(--u))); font-weight: 500; color: #444; }
.dh-review-by small { display: block; margin-top: 2px; font-size: 1em; font-weight: 400; color: #333; }
.dh-reviews .dh-arrows { margin-top: calc(50 * var(--u)); }

/* ---- newsletter ------------------------------------------------------------------------------- */
/* Where a page carries the phone footer as well, the computer one steps
   aside on a narrow screen. Written with :has so it only applies to pages that
   have both — a page with only this footer keeps it at every width. */
@media (max-width: 1023.98px) {
    body:has(.mh-footer) .dh-news,
    body:has(.mh-footer) .dh-footer { display: none; }
}

.dh-news { background: #f7f7f7; }
.dh-news-in { display: flex; align-items: center; justify-content: center; gap: calc(40 * var(--u)); width: min(1321 * var(--u), 100vw - 2 * var(--gut)); min-height: calc(162 * var(--u)); margin: 0 auto; padding: 20px 0; font-family: "Poppins", sans-serif; }
.dh-news-text { flex: 0 1 calc(460 * var(--u)); margin-right: calc(74 * var(--u)); }
.dh-news-text h2 { margin: 0; font-size: max(11px, calc(24 * var(--u))); font-weight: 600; color: var(--ink); }
.dh-news-text p { margin: calc(8 * var(--u)) 0 0; font-size: max(11px, calc(14 * var(--u))); line-height: 1.5; color: #a0a0a0; }
.dh-news-form { position: relative; flex: 0 1 calc(534 * var(--u)); }
.dh-news-form form { display: flex; height: calc(51 * var(--u)); min-height: 42px; }
.dh-news-form input { flex: 1; min-width: 0; padding: 0 calc(22 * var(--u)); border: 0; border-radius: 6px 0 0 6px; background: #fff; font: inherit; font-size: max(11px, calc(16 * var(--u))); outline: 0; }
.dh-news-form input::placeholder { color: #808080; }
.dh-news-form input:focus { box-shadow: inset 0 0 0 1px var(--maroon); }
.dh-news-form button { flex: 0 0 calc(160 * var(--u)); border: 0; border-radius: 0 6px 6px 0; background: var(--maroon); color: #fff; font: inherit; font-size: max(11px, calc(16 * var(--u))); font-weight: 600; cursor: pointer; }
.dh-news-form button:hover { background: #650000; }
.dh-news-form button:disabled { opacity: .7; }
.dh-news-msg { position: absolute; left: 0; top: 100%; margin: 6px 0 0; font-size: 13px; color: #1d7a34; }
.dh-news-msg.is-bad { color: #b3261e; }
/* No box around them; each one takes its own network's colour when the pointer is over it. */
.dh-social { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.dh-social a { display: flex; align-items: center; justify-content: center; width: calc(54 * var(--u)); min-width: 40px; height: calc(54 * var(--u)); min-height: 40px; border-radius: 50%; color: #333; font-size: max(15px, calc(22 * var(--u))); transition: background-color .2s ease, color .2s ease; }
.dh-social a:hover { background: var(--maroon); color: #fff; }
.dh-social a:hover:has(.fa-facebook, .fa-facebook-f, .fa-facebook-square) { background: #1877f2; }
.dh-social a:hover:has(.fa-instagram, .fa-instagram-square) { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.dh-social a:hover:has(.fa-youtube, .fa-youtube-square) { background: #ff0000; }
.dh-social a:hover:has(.fa-twitter, .fa-x-twitter, .fa-twitter-square) { background: #000; }
.dh-social a:hover:has(.fa-whatsapp, .fa-whatsapp-square) { background: #25d366; }
.dh-social a:hover:has(.fa-pinterest, .fa-pinterest-p) { background: #e60023; }
.dh-social a:hover:has(.fa-linkedin, .fa-linkedin-in) { background: #0a66c2; }
.dh-social a:hover:has(.fa-telegram) { background: #229ed9; }

/* ---- footer ---------------------------------------------------------------------------------- */
.dh-footer { padding: calc(89 * var(--u)) 0 calc(38 * var(--u)); background: #191919; color: #fff; font-family: "Poppins", sans-serif; }
.dh-footer-top { display: flex; justify-content: space-between; gap: 40px; }
.dh-footer-about { flex: 0 1 calc(420 * var(--u)); min-width: 260px; }
.dh-footer-logo { display: block; width: calc(61 * var(--u)); height: calc(61 * var(--u)); border-radius: 50%; }
.dh-footer-about p { margin: calc(16 * var(--u)) 0 0; font-size: max(11px, calc(14 * var(--u))); line-height: 1.5; color: #979797; }
.dh-footer-contact { display: flex; align-items: center; flex-wrap: wrap; gap: calc(22 * var(--u)); margin-top: calc(26 * var(--u)); }
.dh-footer-contact a { padding-bottom: 6px; border-bottom: 2px solid #1a8f1a; font-size: max(11px, calc(14 * var(--u))); font-weight: 500; color: #fff; }
.dh-footer-contact span { font-size: max(11px, calc(16 * var(--u))); color: #979797; }
.dh-footer-cols { display: grid; flex: 0 1 calc(1125 * var(--u)); grid-template-columns: repeat(4, 1fr); margin-top: calc(60 * var(--u)); }
.dh-footer-cols h3 { margin: 0 0 calc(22 * var(--u)); font-size: max(11px, calc(16 * var(--u))); font-weight: 500; color: #fff; }
.dh-footer-cols ul { margin: 0; padding: 0; list-style: none; }
.dh-footer-cols li { margin-bottom: calc(12 * var(--u)); }
.dh-footer-cols a { font-size: max(11px, calc(14 * var(--u))); color: #979797; }
.dh-footer-cols a:hover { color: #fff; }
.dh-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: calc(40 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid #333; }
.dh-footer-bottom p { margin: 0; font-size: max(11px, calc(14 * var(--u))); color: #979797; }

.dh-pay { display: flex; gap: 8px; }
.dh-paycard { display: flex; align-items: center; justify-content: center; gap: 2px; width: 46px; height: 30px; border-radius: 5px; background: #fff; color: #000; font-style: normal; }
.dh-paycard em { font-style: normal; }
.dh-paycard.is-apple i { font-size: 13px; }
.dh-paycard.is-apple em { font-size: 12px; font-weight: 600; }
.dh-paycard.is-visa em { font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: -.3px; color: #1a1f71; }
.dh-paycard.is-discover { flex-direction: column; overflow: hidden; }
.dh-paycard.is-discover em { position: relative; z-index: 1; font-size: 7.5px; font-weight: 700; letter-spacing: -.2px; }
.dh-paycard.is-discover em b { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f76f20; vertical-align: -.5px; }
.dh-paycard.is-discover::after { content: ""; position: absolute; }
.dh-paycard.is-master b { width: 15px; height: 15px; border-radius: 50%; background: #eb001b; }
.dh-paycard.is-master b + b { margin-left: -6px; background: #f79e1b; opacity: .95; }
.dh-paycard.is-secure { flex-direction: column; gap: 0; line-height: 1; }
.dh-paycard.is-secure em { display: flex; align-items: center; gap: 2px; font-size: 7.5px; }
.dh-paycard.is-secure em svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.dh-paycard.is-secure strong { font-size: 9.5px; font-weight: 700; }

/* ---- a narrow desktop window (under 1024px): stack what cannot sit side by side ---------- */
@media not all and (min-width: 1024px) {
    .dh-header-in { grid-template-columns: auto 1fr; height: auto; padding: 10px 0; row-gap: 6px; }
    .dh-nav { grid-column: 1 / -1; order: 3; justify-content: center; }
    .dh-brand { order: 1; }
    .dh-tools { order: 2; }
    .dh-rail { --per: 2; }
    .dh-svc-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .dh-svc-grid > .dh-svc-banner { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
    .dh-promos { grid-template-columns: 1fr; }
    .dh-features, .dh-steps { grid-template-columns: 1fr 1fr; row-gap: 24px; }
    .dh-feature + .dh-feature { padding-left: 0; border-left: 0; }
    .dh-step h3, .dh-step p { margin-left: 0 !important; }
    .dh-step .dh-step-bar { border-radius: 6px !important; }
    .dh-news-in, .dh-footer-top, .dh-footer-bottom { flex-direction: column; align-items: flex-start; }
    .dh-news-text { margin-right: 0; }
    .dh-news-form { width: 100%; flex-basis: auto; }
    .dh-footer-cols { width: 100%; grid-template-columns: 1fr 1fr; row-gap: 20px; margin-top: 10px; }
    .dh-review-track { grid-auto-columns: 80vw; padding: 0 10vw; }
    .dh-deco { display: none; }
}

/* Bells swing gently, from the top of the string where they hang. The two sides use
   slightly different timings so they do not move as one block, and anybody whose
   device asks for less motion gets them still. */
@media (prefers-reduced-motion: no-preference) {
    .dh-bells { transform-origin: 50% 0; animation: dh-swing 4.2s ease-in-out infinite; will-change: transform; }
    .dh-bells.is-right { animation-duration: 4.8s; animation-delay: -1.6s; }
    .dh-live .dh-bells { animation-duration: 5.2s; animation-delay: -.8s; }
    .dh-live .dh-bells.is-right { animation-duration: 4.5s; animation-delay: -2.4s; }
}
@keyframes dh-swing {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}

/* <picture> is only a wrapper; the image inside keeps every rule written for it */
.dh-hero-slide picture, .dh-promo picture, .dh-banner picture, .dh-svc-banner picture { display: block; }
.dh-svc-banner picture { position: absolute; inset: 0; }

/* Sold out: the script hides Buy Now, and this lets it - the flex rule above set display on the
   form itself, which outranked [hidden]. The Add button (now "Out of stock") takes the whole row. */
.dh-actions [hidden] { display: none !important; }

/* ---- the partners: the homepage and the service page both draw this row ----------------------------------------------------------- */
.sv-pandits { padding: calc(58 * var(--u)) 0 calc(60 * var(--u)); background: #fff; }
.sv-pandits .dh-head { margin-bottom: calc(48 * var(--u)); }
.sv-pandits .dh-head h2 { font-size: max(20px, calc(30 * var(--u))); }
.sv-pandit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(40 * var(--u)); justify-items: center; }
.sv-pandit { text-align: center; }
.sv-pandit-photo { position: relative; display: block; width: calc(200 * var(--u)); height: calc(200 * var(--u)); margin: 0 auto; }
/* portraits: keep the face, which a centred crop cuts through */
.sv-pandit-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #f3ece4; }
.sv-verified { position: absolute; left: 50%; bottom: calc(-6 * var(--u)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(20 * var(--u)); background: #1d9bf0; color: #fff; font-size: max(10px, calc(14 * var(--u))); white-space: nowrap; }
.sv-verified i { font-size: 1.05em; }
.sv-pandit h3 { margin: calc(26 * var(--u)) 0 0; font-size: max(13px, calc(18 * var(--u))); font-weight: 600; color: var(--ink); }
.sv-pandit p { margin: calc(9 * var(--u)) 0 0; font-size: max(11px, calc(15 * var(--u))); color: #7a7a7a; }

/* Narrow windows and phones: two partners a row, smaller circles. After the rules above,
   so it overrides them. */
@media not all and (min-width: 1024px) {
    .sv-pandit-row { grid-template-columns: 1fr 1fr; gap: 28px; }
    .sv-pandit-photo { width: 150px; height: 150px; }
}

/* ---------------------------------------------------------------------------
   Phones and narrow windows: the newsletter and the footer read like the mobile
   homepage's own. Last in the file, so these win over the wide-screen rules.
   ------------------------------------------------------------------------ */
@media not all and (min-width: 1024px) {
    /* stacked, the side-by-side widths became heights and left a hand of empty space */
    .dh-news-in { display: block; padding: 26px 0 30px; }
    .dh-news-text, .dh-news-form { flex: none; width: 100%; max-width: none; margin-right: 0; }
    .dh-news-text h2 { font-size: 19px; }
    .dh-news-text p { margin-top: 6px; font-size: 12.5px; }
    .dh-news-form { margin-top: 16px; }
    .dh-news-form form { height: 44px; }
    .dh-news-form input { padding: 0 14px; font-size: 13.5px; }
    .dh-news-form button { flex-basis: 118px; font-size: 13.5px; }
    .dh-news-msg { position: static; margin-top: 8px; }
    .dh-social { justify-content: center; gap: 14px; margin-top: 22px; }
    .dh-social a { width: 40px; height: 40px; font-size: 16px; }

    .dh-footer { padding: 46px 0 28px; }
    .dh-footer-top { display: block; }
    .dh-footer-logo { width: 54px; height: 54px; }
    .dh-footer-about { width: 100%; min-width: 0; }
    .dh-footer-about p { margin-top: 16px; font-size: 12.5px; line-height: 1.55; }
    .dh-footer-contact { gap: 16px; margin-top: 22px; }
    .dh-footer-contact a { max-width: 100%; overflow-wrap: anywhere; font-size: 12.5px; }
    .dh-footer-contact span { font-size: 13px; }
    .dh-footer-cols { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 18px; margin-top: 34px; }
    .dh-footer-cols h3 { margin-bottom: 14px; font-size: 14.5px; }
    .dh-footer-cols li { margin-bottom: 12px; }
    .dh-footer-cols a, .dh-footer-cols span { font-size: 12.5px; overflow-wrap: anywhere; }
    .dh-footer-bottom { display: block; margin-top: 34px; padding-top: 16px; text-align: center; }
    .dh-footer-bottom p { font-size: 12.5px; }
    .dh-pay { justify-content: center; flex-wrap: wrap; margin-top: 14px; }
}

/* Phones: the newsletter reads centred and the social icons carry their own colours,
   the way the mobile homepage draws them; the partner row swipes instead of wrapping. */
@media not all and (min-width: 1024px) {
    .dh-news-in { text-align: center; }
    .dh-news-text p { margin-left: auto; margin-right: auto; max-width: 320px; }
    .dh-social a { color: #fff; }
    .dh-social a:has(.fa-facebook, .fa-facebook-f, .fa-facebook-square) { background: #1877f2; }
    .dh-social a:has(.fa-instagram, .fa-instagram-square) { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
    .dh-social a:has(.fa-youtube, .fa-youtube-square) { background: #ff0000; }
    .dh-social a:has(.fa-twitter, .fa-x-twitter, .fa-twitter-square) { background: #1d9bf0; }
    .dh-social a:has(.fa-whatsapp, .fa-whatsapp-square) { background: #25d366; }
    .dh-social a:has(.fa-pinterest, .fa-pinterest-p) { background: #e60023; }
    .dh-social a:has(.fa-linkedin, .fa-linkedin-in) { background: #0a66c2; }
    .dh-social a:has(.fa-telegram) { background: #229ed9; }

    .sv-pandit-row {
        display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
        scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px;
    }
    .sv-pandit-row::-webkit-scrollbar { display: none; }
    .sv-pandit { flex: 0 0 calc((100% - 32px) / 2.6); min-width: 0; scroll-snap-align: start; }
    .sv-pandit-photo { width: 100%; height: auto; aspect-ratio: 1; }
    .sv-pandit h3 { margin-top: 18px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sv-pandit p { font-size: 11px; }
    .sv-verified { font-size: 10px; padding: 2px 8px; }
    .sv-pandit-arrows { margin-top: 18px; }
}

/* The verified badge as the design draws it: a white rosette with a blue tick on a blue pill. */
.sv-verified { background: #3879cd; gap: calc(6 * var(--u)); }
.sv-badge-mark { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.sv-badge-rosette { fill: #fff; }
.sv-badge-tick { fill: none; stroke: #3879cd; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Footer items with no page yet: plain text, but the same size and grey as the links beside them. */
.dh-footer-cols span { font-size: max(11px, calc(14 * var(--u))); font-weight: 400; color: #979797; }


/* Saved items: how many, beside the heart, the way the basket carries its own
   count. Hidden at zero, because a nought is not news. */
.dh-icon[data-saved-count-host] { position: relative; }
.dh-saved-count {
    position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--dh-maroon, #7d0a0a); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.dh-saved-count[hidden] { display: none; }

/* A saved heart is filled; the card's own heart is a button now. */
.dh-heart.is-saved { color: var(--dh-maroon, #7d0a0a); }
button.dh-heart { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

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

   It was drawn on a white square, which on a photograph read as a sticker.
   The square stays as the area the mouse aims at; it is simply not painted,
   and a drop shadow keeps the outline legible over a pale picture.
   ------------------------------------------------------------------------ */
.dh-heart {
    border: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.dh-heart:hover { background: none; color: #b3131b; }

/* A little larger, and nearer the corner, as on every other product card. */
.dh-heart {
    top: calc(14 * var(--u));
    right: calc(14 * var(--u));
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    font-size: max(15px, calc(20 * var(--u)));
}

/* 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. */
.dh-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;
}

.dh-actions .cart-control { flex: 0 0 auto; }
.dh-actions .cart-btn.is-add { min-width: calc(52 * var(--u)); padding: 0 calc(14 * var(--u)); }
.dh-actions .cart-btn.is-add i { display: inline-block; font-size: 1.15em; margin: 0; }

/* Buy Now keeps its width once the item is in the basket: the stepper takes
   only the room it needs, as the basket icon beside it does. See the note in
   mobile-home.css. */
.dh-actions > form, .dh-actions > .mh-btn { flex: 1 1 auto; min-width: 0; }

.dh-actions .cart-stepper {
    width: auto;
    justify-content: center;
    gap: calc(4 * var(--u));
    padding: 0 calc(6 * var(--u));
}

/* 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. */
.dh-actions .cart-stepper-count { flex: 0 0 auto; min-width: 14px; text-align: center; }

/* On a computer the button says what it does; the basket on its own is for
   the phone. See the note in products.css on the shop side. */
@media (min-width: 1024px) {
    .dh-actions .cart-btn.is-add .cart-btn-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    .dh-actions .cart-btn.is-add { min-width: 0; gap: calc(8 * var(--u)); }
}

/* ---------------------------------------------------------------------------
   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; }