/* DIVSA white-label homepage experience layer — scoped to [divsa_home]. */
.tap-home-root{--tap-home-gap:32px}
.tap-home-root .tap-home-section{scroll-margin-top:72px}.tap-home-root .tap-home-promo{padding:var(--tap-home-gap,32px) 0}.tap-home-promo__head{text-align:center;margin:0 auto 20px;max-width:760px}.tap-home-promo__head h2{margin:0 0 6px;font-family:var(--tap-font-heading,inherit)}.tap-home-promo__head p{margin:0;color:var(--tap-muted)}
.tap-home-promo__grid{display:grid;grid-template-columns:repeat(var(--tap-promo-cols,4),minmax(0,1fr));gap:var(--tap-promo-gap,16px)}.tap-home-promo__card{position:relative;display:flex;min-height:var(--tap-promo-height,220px);border-radius:var(--tap-card-radius,18px);overflow:hidden;background:var(--tap-surface);border:1px solid var(--tap-line);color:inherit;text-decoration:none;box-shadow:var(--tap-shadow-sm,0 8px 24px rgba(0,0,0,.07));text-align:var(--tap-promo-align,left)}.tap-home-promo__media{position:absolute;inset:0}.tap-home-promo__media img{width:100%;height:100%;object-fit:var(--tap-promo-fit,cover);display:block}.tap-home-promo__shade{position:absolute;inset:30% 0 0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--tap-promo-shade-color,var(--tap-ink)) var(--tap-promo-shade-strength,78%),transparent))}.tap-home-promo__body{position:relative;z-index:1;margin-top:auto;padding:18px;color:var(--tap-promo-on-media,var(--tap-card));width:100%}.tap-home-promo__card:not(.has-image) .tap-home-promo__body{color:var(--tap-ink);margin-top:0}.tap-home-promo__badge{display:inline-flex;border-radius:999px;padding:4px 8px;background:var(--tap-accent);color:var(--tap-accent-contrast,var(--tap-ink));font-size:12px;font-weight:800;margin-bottom:8px}.tap-home-promo__body h3{margin:0 0 5px;font-size:18px}.tap-home-promo__body p{margin:0 0 10px;font-size:13px;opacity:.9}.tap-home-promo__cta{font-weight:800;font-size:13px}
/* Image-top variant keeps the same card component but changes composition. */
.tap-home-promo--image_top .tap-home-promo__card{display:grid;grid-template-rows:minmax(110px,55%) 1fr}.tap-home-promo--image_top .tap-home-promo__media{position:relative;inset:auto;grid-row:1}.tap-home-promo--image_top .tap-home-promo__shade{display:none}.tap-home-promo--image_top .tap-home-promo__body{grid-row:2;margin:0;color:var(--tap-ink);padding:15px}.tap-home-promo--image_top .tap-home-promo__body p{color:var(--tap-muted)}
/* Clean variant is useful for categories / lightweight tenant navigation. */
.tap-home-promo--clean .tap-home-promo__card{min-height:auto;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center}.tap-home-promo--clean .tap-home-promo__media{position:relative;inset:auto;width:88px;height:88px;margin:12px;border-radius:14px;overflow:hidden;background:var(--tap-surface-2,var(--tap-card))}.tap-home-promo--clean .tap-home-promo__shade{display:none}.tap-home-promo--clean .tap-home-promo__body{margin:0;color:var(--tap-ink);padding:14px}.tap-home-promo--clean .tap-home-promo__body p{color:var(--tap-muted)}.tap-home-promo--clean .tap-home-promo__card:not(.has-image){grid-template-columns:1fr}
@media(min-width:768px) and (max-width:1023.98px){.tap-home-promo:not(.tap-home-promo--smart) .tap-home-promo__grid{grid-template-columns:repeat(var(--tap-promo-cols-tab,2),minmax(0,1fr))}}
@media(max-width:767.98px){.tap-home-promo{padding:24px 0}.tap-home-promo--mobile-scroll .tap-home-promo__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}.tap-home-promo--mobile-scroll .tap-home-promo__card{flex:0 0 78vw;max-width:320px;scroll-snap-align:start}.tap-home-promo--mobile-grid .tap-home-promo__grid{grid-template-columns:repeat(var(--tap-promo-cols-mob,1),minmax(0,1fr));gap:12px}.tap-home-promo--clean .tap-home-promo__card{grid-template-columns:72px minmax(0,1fr)}.tap-home-promo--clean .tap-home-promo__media{width:72px;height:72px;margin:10px}}

/* Service Junction — one admin-owned discovery component for DIVSA home.
   It uses only DIVSA brand and layout tokens. */
.tap-service-junction{width:100%;padding:18px 0 22px;color:var(--tap-ink)}
.tap-service-junction *{box-sizing:border-box}
.tap-service-junction__head{margin:0 0 20px}
.tap-service-junction__kicker{margin:0 0 8px;color:var(--tap-a);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.tap-service-junction__head h2{margin:0;color:var(--tap-ink);font-family:var(--tap-font-heading,inherit);font-size:clamp(25px,4vw,38px);line-height:1.08;letter-spacing:-.025em}
.tap-service-junction__grid{display:grid;grid-template-columns:repeat(var(--tap-sj-cols,6),minmax(0,1fr));gap:var(--tap-sj-gap,14px);align-items:stretch}
.tap-service-junction--fixed .tap-service-junction__grid{grid-template-columns:repeat(auto-fit,minmax(var(--tap-sj-width,176px),var(--tap-sj-width,176px)));justify-content:start}
.tap-service-junction__card{height:var(--tap-sj-height,158px);min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px 10px;border:1px solid var(--tap-line);border-radius:var(--tap-sj-radius,20px);background:var(--tap-surface);color:var(--tap-ink);text-decoration:none!important;text-align:center;box-shadow:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.tap-service-junction--soft .tap-service-junction__card{background:linear-gradient(145deg,color-mix(in srgb,var(--tap-a) 4%,var(--tap-surface)),var(--tap-surface) 72%);box-shadow:0 8px 28px color-mix(in srgb,var(--tap-ink) 7%,transparent)}
.tap-service-junction--elevated .tap-service-junction__card{border-color:color-mix(in srgb,var(--tap-a) 13%,var(--tap-line));box-shadow:0 12px 34px color-mix(in srgb,var(--tap-ink) 11%,transparent)}
.tap-service-junction__icon{width:var(--tap-sj-icon,62px);height:var(--tap-sj-icon,62px);flex:0 0 var(--tap-sj-icon,62px);display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--tap-a) 10%,var(--tap-surface)),color-mix(in srgb,var(--tap-accent) 6%,var(--tap-surface)));color:var(--tap-a)}
.tap-service-junction__icon svg{width:46%!important;height:46%!important;stroke:currentColor}
.tap-service-junction__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;font-family:var(--tap-font-body,inherit);font-size:clamp(13px,1.5vw,16px);font-weight:750;line-height:1.24;color:inherit}
.tap-service-junction__card:focus-visible{outline:3px solid color-mix(in srgb,var(--tap-a) 38%,transparent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.tap-service-junction__card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tap-a) 28%,var(--tap-line));box-shadow:0 15px 36px color-mix(in srgb,var(--tap-ink) 12%,transparent)}}
/* Tablet range only. As `@media(max-width:1023px)` these two rules also
   covered phones, and at (0,3,0) they outranked the (0,2,0) mobile-grid rule
   below regardless of source order -- so a phone laid the junction out with
   the TABLET column count, and the mobile column setting never applied. */
@media(min-width:768px) and (max-width:1023.98px){.tap-service-junction:not(.tap-service-junction--smart) .tap-service-junction__grid{grid-template-columns:repeat(var(--tap-sj-cols-tab,4),minmax(0,1fr))}.tap-service-junction--fixed:not(.tap-service-junction--smart) .tap-service-junction__grid{grid-template-columns:repeat(auto-fit,minmax(var(--tap-sj-width-tab,160px),var(--tap-sj-width-tab,160px)))}}
@media(max-width:767.98px){
 .tap-service-junction{padding:14px 0 18px}
 .tap-service-junction__head{margin-bottom:16px}
 .tap-service-junction__head h2{font-size:clamp(26px,8vw,34px)}
 .tap-service-junction--mobile-grid .tap-service-junction__grid{display:grid;grid-template-columns:repeat(var(--tap-sj-cols-mob,2),minmax(0,1fr));gap:var(--tap-sj-gap,14px)}
 .tap-service-junction--mobile-scroll .tap-service-junction__grid{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:var(--tap-sj-gap,14px);padding:2px 2px 9px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .tap-service-junction--mobile-scroll .tap-service-junction__grid::-webkit-scrollbar{display:none}
 .tap-service-junction--mobile-scroll .tap-service-junction__card{flex:0 0 var(--tap-sj-track-mob,var(--tap-sj-width-mob,148px));width:var(--tap-sj-track-mob,var(--tap-sj-width-mob,148px))}
 .tap-service-junction--mobile-grid.tap-service-junction--fixed .tap-service-junction__grid{grid-template-columns:repeat(var(--tap-sj-cols-mob,2),minmax(0,1fr));justify-content:stretch}
 .tap-service-junction__label{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.tap-service-junction__card{transition:none}.tap-service-junction__card:hover{transform:none}}




/* v7.34.2 — native dynamic marketplace shelves. Geometry remains owned by
   Visual Studio / Layout Studio; these rules only reconcile the homepage's
   desktop rail defaults with an explicit per-section override. */
.tap-home-samagri .tap-sam-railwrap{margin:0}
.tap-home-samagri .tap-sam-rail-head{display:none}
.tap-home-root .tap-fcard-rail.tap-lay-carousel,
.tap-home-root .tap-home-astro-rail.tap-lay-carousel{grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;overflow-y:hidden}
.tap-home-root .tap-fcard-rail.tap-lay-grid,
.tap-home-root .tap-home-astro-rail.tap-lay-grid{grid-auto-flow:row;overflow:visible}
.tap-home-root .tap-home-astro-rail.tap-lay-grid .tap-home-astro-card{width:100%;max-width:none;flex-basis:auto}
.tap-home-root .tap-fcard-rail.tap-lay-list,
.tap-home-root .tap-home-astro-rail.tap-lay-list{grid-template-columns:1fr;grid-auto-flow:row;overflow:visible}


/* Smart component responsiveness. The nearest DIVSA component container
   decides its own internal layout while the App Shell owns page geometry. */
.tap-service-junction--smart .tap-container{container:tapJunction / inline-size}
.tap-service-junction--smart .tap-service-junction__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tap-smart-junction-min,138px)),1fr));
  gap:clamp(10px,2cqi,16px);
  align-items:stretch;
}
.tap-service-junction--smart .tap-service-junction__card{
  height:auto;
  min-height:clamp(132px,18cqi,var(--tap-sj-height,158px));
  padding:clamp(12px,2.4cqi,16px) clamp(8px,1.8cqi,12px);
  gap:clamp(10px,1.8cqi,var(--tap-sj-gap,14px));
}
.tap-service-junction--smart .tap-service-junction__icon{
  width:clamp(52px,8.4cqi,var(--tap-sj-icon,62px));height:clamp(52px,8.4cqi,var(--tap-sj-icon,62px));flex-basis:clamp(52px,8.4cqi,var(--tap-sj-icon,62px))
}
.tap-service-junction--smart .tap-service-junction__label{font-size:clamp(13px,2.1cqi,16px)}
@container tapJunction (max-width:560px){
  .tap-service-junction--smart .tap-service-junction__grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:clamp(var(--tap-smart-junction-min,148px),42cqi,176px);overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:2px 2px 9px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tap-service-junction--smart .tap-service-junction__grid::-webkit-scrollbar{display:none}
  .tap-service-junction--smart .tap-service-junction__card{min-height:146px}
}

.tap-home-promo--smart .tap-container{container:tapPromo / inline-size}
.tap-home-promo--smart .tap-home-promo__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tap-smart-promo-min,240px)),1fr));
  gap:clamp(12px,2cqi,var(--tap-promo-gap,20px));
}
.tap-home-promo--smart .tap-home-promo__card{min-height:clamp(190px,28cqi,var(--tap-promo-height,260px))}
@container tapPromo (max-width:560px){
  .tap-home-promo--smart .tap-home-promo__grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:min(82cqi,320px);overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:6px;
  }
  .tap-home-promo--smart .tap-home-promo__grid::-webkit-scrollbar{display:none}
  .tap-home-promo--smart .tap-home-promo__card{scroll-snap-align:start;min-height:210px}
}

/* Progressive fallback for browsers without container queries. */
@supports not (container-type:inline-size){
  .tap-service-junction--smart .tap-service-junction__grid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
  .tap-home-promo--smart .tap-home-promo__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* Native editorial homepage sections. All copy/media is operator-owned in
   Homepage Content. */
.tap-home-editorial-head{max-width:760px;margin:0 auto 22px;text-align:center}
.tap-home-editorial-head .tap-sec-title{margin-top:5px}
.tap-home-editorial-head>p{margin:9px auto 0;color:var(--tap-muted);line-height:1.65}
.tap-home-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tap-home-step{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid var(--tap-line);border-radius:var(--tap-radius-md,16px);background:var(--tap-card)}
.tap-home-step-num{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:999px;background:var(--tap-primary);color:var(--tap-primary-text,#000);font-weight:800}
.tap-home-step h3,.tap-home-why-card h3{margin:1px 0 6px;font-size:15px;line-height:1.35;color:var(--tap-ink)}
.tap-home-step p,.tap-home-why-card p{margin:0;color:var(--tap-muted);font-size:13px;line-height:1.55}
.tap-home-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tap-home-why-card{display:flex;gap:12px;padding:20px;border:1px solid var(--tap-line);border-radius:var(--tap-radius-md,16px);background:var(--tap-card)}
.tap-home-why-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:var(--tap-secondary,var(--tap-primary-soft));color:var(--tap-primary)}
.tap-home-place-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tap-home-place{margin:0;overflow:hidden;border-radius:var(--tap-radius-lg,18px);background:var(--tap-card);border:1px solid var(--tap-line)}
.tap-home-place img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.tap-home-place figcaption{padding:12px 14px;color:var(--tap-ink);font-size:13px;line-height:1.45}
.tap-home-root .tap-home-section>.tap-container{container:tapHomeSection / inline-size}
@container tapHomeSection (min-width:561px) and (max-width:960px){.tap-home-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tap-home-why-grid,.tap-home-place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container tapHomeSection (max-width:560px){.tap-home-step-grid,.tap-home-why-grid{grid-template-columns:1fr}.tap-home-place-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(82cqi,310px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:7px}.tap-home-place-grid::-webkit-scrollbar{display:none}.tap-home-place{scroll-snap-align:start}}
@supports not (container-type:inline-size){@media(min-width:768px) and (max-width:1023.98px){.tap-home-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tap-home-why-grid,.tap-home-place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767.98px){.tap-home-step-grid,.tap-home-why-grid{grid-template-columns:1fr}.tap-home-place-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(82vw,310px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:7px}}}

/* Reserve a tablet-side safe area for the fixed WhatsApp support control. */

/* v7.34.3 — the client deployment premium marketplace home -------------------------
   Visual treatment is deliberately native to the tenant brand: editorial
   headings, warm hairline surfaces and compact commerce rails. All colour,
   typography, radius and content continue to come from DIVSA admin tokens. */
.tap-home-root{overflow:clip;background:var(--tap-bg);color:var(--tap-ink);font-family:var(--tap-font-body)}
.tap-home-root .tap-home-section{background:transparent!important;padding-block:clamp(42px,6vw,76px)}
.tap-home-root .tap-sec-head2{align-items:end;gap:20px;margin-bottom:clamp(20px,3vw,30px)}
.tap-home-root .tap-sec-eyebrow{color:var(--tap-marigold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.tap-home-root .tap-sec-title{max-width:20ch;margin-top:7px;font-family:var(--tap-font-heading);font-size:clamp(30px,4.2vw,48px);line-height:1.04;letter-spacing:-.035em;color:var(--tap-ink)}
.tap-home-root .tap-sec-action{display:inline-flex;align-items:center;min-height:44px;color:var(--tap-cta);font-weight:800;text-decoration:none;white-space:nowrap}
.tap-home-root .tap-home-group-pujas,.tap-home-root .tap-home-samagri,.tap-home-root .tap-home-why{background:color-mix(in srgb,var(--tap-card) 72%,var(--tap-bg))!important;border-block:1px solid var(--tap-line)}

/* Hero/banner authority remains Engagement Studio; fallback hero stays compact. */
.tap-home-root>.tap-container:first-child{padding-top:clamp(18px,3vw,34px)}
.tap-home-root .tap-hero-compact{min-height:clamp(360px,42vw,540px);border-radius:clamp(22px,3vw,34px);box-shadow:0 24px 70px color-mix(in srgb,var(--tap-ink) 18%,transparent)}
.tap-home-root .tap-hero-compact-title{font-size:clamp(42px,6.2vw,76px);line-height:.96;letter-spacing:-.045em;max-width:12ch}
.tap-home-root .tap-hero-compact-sub{max-width:54ch;font-size:clamp(15px,1.6vw,18px)}
.tap-home-root .tap-hero-compact-search{max-width:680px;border:1px solid color-mix(in srgb,var(--tap-line) 78%,transparent)}

/* Service Junction: high-signal gateways, not a duplicate catalogue.
   These three rules hardcoded 4 columns, a 150px height floor and a 54px
   icon, which silently beat the Home Page column/height/icon settings on the
   homepage only. They now carry the same custom properties the section emits,
   keeping the previous values as fallbacks so an unconfigured site is
   unchanged. The column rule skips the fixed-width basis, which sizes its
   tracks from --tap-sj-width instead. */
.tap-home-root .tap-service-junction{padding-block:clamp(42px,5vw,64px)}
.tap-home-root .tap-service-junction__card{align-items:flex-start;justify-content:flex-end;text-align:left;padding:20px;min-height:var(--tap-sj-height,150px);border-radius:clamp(18px,2vw,24px);background:var(--tap-card);box-shadow:0 14px 36px color-mix(in srgb,var(--tap-ink) 8%,transparent)}
.tap-home-root .tap-service-junction__icon{width:var(--tap-sj-icon,54px);height:var(--tap-sj-icon,54px);flex-basis:var(--tap-sj-icon,54px);border-radius:16px;background:color-mix(in srgb,var(--tap-cta) 8%,var(--tap-card));color:var(--tap-cta)}
.tap-home-root .tap-service-junction__label{font-family:var(--tap-font-heading);font-size:18px;font-weight:650}

/* Image-led service shelves — 3 desktop, 2 tablet, a tactile mobile peek. */
.tap-home-root .tap-fcard-rail{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px 3px 20px;scrollbar-width:none}
.tap-home-root .tap-fcard-rail::-webkit-scrollbar,.tap-home-root .tap-home-astro-rail::-webkit-scrollbar{display:none}
.tap-home-root .tap-fcard{width:100%;min-width:0;scroll-snap-align:start;border:1px solid var(--tap-line);border-radius:24px;background:var(--tap-card);box-shadow:0 16px 40px color-mix(in srgb,var(--tap-ink) 9%,transparent);overflow:hidden}
.tap-home-root .tap-fcard-art{height:auto;aspect-ratio:16/10;background-color:color-mix(in srgb,var(--tap-cta) 9%,var(--tap-card));background-size:cover;background-position:center}
.tap-home-root .tap-fcard-body{display:flex;flex-direction:column;gap:8px;min-height:128px;padding:18px 18px 14px;color:inherit}
.tap-home-root .tap-fcard-name{font-family:var(--tap-font-heading);font-size:clamp(19px,1.8vw,24px);line-height:1.18;font-weight:650;color:var(--tap-ink)}
.tap-home-root .tap-fcard-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--tap-muted);font-size:13px;line-height:1.5}
.tap-home-root .tap-fcard-temple,.tap-home-root .tap-fcard-facts{display:flex;flex-wrap:wrap;gap:7px 14px;color:var(--tap-muted);font-size:12px;line-height:1.4}
.tap-home-root .tap-fcard-facts>span{display:inline-flex;align-items:center;gap:5px}
.tap-home-root .tap-fcard-foot{margin-top:auto;padding-top:4px}
.tap-home-root .tap-fcard-cta{min-height:50px;margin:0 18px 18px;border-radius:14px;background:var(--tap-cta);color:var(--tap-cta-text);font-size:14px;font-weight:800}

/* Membership is a distinct editorial banner, not another product card. */
.tap-home-membership-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(26px,4vw,46px);border:1px solid color-mix(in srgb,var(--tap-marigold) 36%,var(--tap-line));border-radius:clamp(24px,3vw,34px);background:var(--tap-ink);color:var(--tap-card);box-shadow:0 24px 60px color-mix(in srgb,var(--tap-ink) 18%,transparent)}
.tap-home-membership-mark{display:grid;place-items:center;width:74px;height:74px;border:1px solid color-mix(in srgb,var(--tap-marigold) 62%,transparent);border-radius:22px;color:var(--tap-marigold);background:color-mix(in srgb,var(--tap-marigold) 10%,transparent)}
.tap-home-membership-card .tap-sec-eyebrow{color:var(--tap-marigold)}
.tap-home-membership-card h2{margin:6px 0 8px;font-family:var(--tap-font-heading);font-size:clamp(28px,3.4vw,44px);line-height:1.05;color:inherit}
.tap-home-membership-card p{margin:0;color:color-mix(in srgb,var(--tap-card) 74%,transparent)}
.tap-home-membership-benefits{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
.tap-home-membership-benefits span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:color-mix(in srgb,var(--tap-card) 88%,transparent)}
.tap-home-membership-cta{min-height:50px;padding-inline:22px;border-radius:14px!important;white-space:nowrap;background:var(--tap-cta)!important;color:var(--tap-cta-text)!important}

/* Astrologers are compact guidance profiles, intentionally unlike marketplace cards. */
.tap-home-root .tap-home-astro-rail{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;padding:4px 3px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.tap-home-root .tap-home-astro-card{width:100%;min-width:0;max-width:none;min-height:170px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;padding:20px;border:1px solid var(--tap-line);border-radius:22px;background:var(--tap-card);box-shadow:0 14px 34px color-mix(in srgb,var(--tap-ink) 8%,transparent);scroll-snap-align:start}
.tap-home-root .tap-home-astro-card img,.tap-home-root .tap-home-astro-avatar{width:76px;height:76px;flex-basis:76px;border:2px solid color-mix(in srgb,var(--tap-marigold) 48%,transparent);background:color-mix(in srgb,var(--tap-cta) 7%,var(--tap-card))}
.tap-home-root .tap-home-astro-copy{gap:5px}
.tap-home-root .tap-home-astro-copy strong{font-size:20px}

/* Store remains native Samagri; homepage only refines spacing and framing. */
.tap-home-root .tap-home-samagri .tap-sam-card{border:1px solid var(--tap-line);border-radius:22px;box-shadow:0 14px 34px color-mix(in srgb,var(--tap-ink) 8%,transparent);overflow:hidden;background:var(--tap-card)}
.tap-home-root .tap-home-samagri .tap-sam-art{aspect-ratio:1/1;background:color-mix(in srgb,var(--tap-bg) 75%,var(--tap-card))}

/* Editorial process, reasons and factual trust matrix. */
.tap-home-root .tap-home-editorial-head{max-width:780px;margin:0 0 28px;text-align:left}
.tap-home-root .tap-home-step-grid{counter-reset:tapHomeStep;gap:18px}
.tap-home-root .tap-home-step,.tap-home-root .tap-home-why-card,.tap-home-root .tap-home-trust-card{border:1px solid var(--tap-line);border-radius:22px;background:var(--tap-card);box-shadow:0 12px 30px color-mix(in srgb,var(--tap-ink) 6%,transparent)}
.tap-home-root .tap-home-step{min-height:190px;display:block;padding:22px}
.tap-home-root .tap-home-step-num{margin-bottom:28px;background:var(--tap-cta);color:var(--tap-cta-text)}
.tap-home-root .tap-home-step h3,.tap-home-root .tap-home-why-card h3,.tap-home-root .tap-home-trust-card h3{font-family:var(--tap-font-heading);font-size:19px;color:var(--tap-ink)}
.tap-home-root .tap-home-why-card{min-height:160px;padding:24px}
.tap-home-root .tap-home-why-icon{background:color-mix(in srgb,var(--tap-cta) 9%,var(--tap-card));color:var(--tap-cta)}
.tap-home-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tap-home-trust-card{display:flex;gap:14px;min-height:138px;padding:22px}
.tap-home-trust-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--tap-marigold) 12%,var(--tap-card));color:var(--tap-cta)}
.tap-home-trust-card h3{margin:1px 0 6px}.tap-home-trust-card p{margin:0;color:var(--tap-muted);font-size:13px;line-height:1.5}

/* Real tablet fix: content width follows the viewport even if server device
   classes lag the client breakpoint. Do not hide overflow as a workaround. */
@media(min-width:768px) and (max-width:1023.98px){
  .tap-home-root .tap-fcard-rail{grid-auto-columns:calc((100% - 16px)/2);gap:16px}
  .tap-home-root .tap-home-astro-rail{grid-auto-columns:calc((100% - 16px)/2);gap:16px}
  .tap-home-membership-card{grid-template-columns:auto minmax(0,1fr)}
  .tap-home-membership-cta{grid-column:2;justify-self:start}
  .tap-home-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The native desktop shell needs more than a tablet viewport once search and
   the primary CTA are enabled. Switch to the same accessible drawer used on
   phones before those actions can create document-wide overflow. */
@media(max-width:1023.98px){
  .tap-chrome-header-in{min-height:min(var(--tap-header-height,64px),68px);gap:8px;position:relative}
  .tap-chrome-menu,.tap-chrome-search,.tap-chrome-actions>.tap-chrome-cta{display:none!important}
  .tap-chrome-menu-toggle{display:grid!important;place-items:center;flex:0 0 auto}
  .tap-chrome-actions{display:flex;margin-left:0}
  .tap-chrome-actions:empty{display:none}
  .tap-chrome-mobile-panel{display:block}
  .tap-chrome-mobile-cta{display:flex}
  .tap-chrome-logo{max-height:min(var(--tap-header-logo-height,40px),40px);max-width:min(46vw,180px)}
  .tap-chrome-name{font-size:16px;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tap-hm-menu_left_logo_center .tap-chrome-menu-toggle{order:1}
  .tap-hm-menu_left_logo_center .tap-chrome-brand{order:2;position:absolute;left:50%;transform:translateX(-50%)}
  .tap-hm-menu_left_logo_center .tap-chrome-actions{order:3;margin-left:auto}
}
@media(max-width:767.98px){
  .tap-home-root .tap-home-section{padding-block:42px}
  .tap-home-root .tap-sec-head2{align-items:flex-end;margin-bottom:20px}
  .tap-home-root .tap-sec-title{font-size:clamp(28px,8.6vw,38px)}
  .tap-home-root .tap-sec-action{font-size:12px}
  .tap-home-root .tap-hero-compact{min-height:430px}
  .tap-home-root .tap-hero-compact-title{font-size:clamp(40px,12vw,56px)}
  .tap-home-root .tap-service-junction__card{min-height:132px;padding:16px}
  .tap-home-root .tap-service-junction__label{overflow-wrap:normal;word-break:normal}
  .tap-home-root .tap-fcard-rail{grid-auto-columns:min(86vw,340px);gap:14px}
  .tap-home-root .tap-fcard-body{min-height:96px}
  .tap-home-membership-card{grid-template-columns:1fr;gap:18px;padding:24px}
  .tap-home-membership-mark{width:60px;height:60px;border-radius:18px}
  .tap-home-membership-cta{grid-column:1;width:100%;justify-content:center}
  .tap-home-root .tap-home-astro-rail{grid-auto-columns:min(78vw,280px);gap:14px}
  .tap-home-root .tap-home-step-grid,.tap-home-root .tap-home-why-grid,.tap-home-trust-grid{grid-template-columns:1fr}
  .tap-home-root .tap-home-step{min-height:0}
  /* v8.6.26: the mobile reset above only covered .tap-home-step. Why and Trust
     kept their desktop min-height, so on a single-column phone every card
     carried 40-50px of dead space under its text — the "empty card" look.
     Equal-height only matters while these sit in a row. */
  .tap-home-root .tap-home-why-card,.tap-home-root .tap-home-trust-card{min-height:0}
  /* The 28px gap under the step number is desktop rhythm inside a 190px box;
     with min-height gone it reads as a hole between the number and the title. */
  .tap-home-root .tap-home-step-num{margin-bottom:14px}
  .tap-wa-fab{right:14px!important} /* v8.6.26: the bottom offset that used to live here never won — tap-core.css owns it at (1,3,1)+!important via body.tap-has-bottomnav.tap-nav-mobile #tap-wa-float. Keeping a losing duplicate here only sends the next reader down the wrong path. */
}


/* ==========================================================================
   v8.6.3 — Homepage premium layer.

   Everything here is token-driven (--tap-primary / --tap-saffron / --tap-cta),
   so it re-skins with the Brand Customizer and stays white-label. No image
   requests are introduced: the hero field is drawn entirely in CSS, which keeps
   the largest element on the page free of a network round-trip.

   Contrast note: the accent end of a brand gradient is usually a mid-value warm
   hue, and white body copy over it fails AA. The hero therefore places the
   accent in the top-right corner only and keeps every text layer over the deep
   primary end, with a scrim underneath. Do not re-aim the gradient without
   re-checking the text.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.tap-home-root .tap-hero-compact{
  --tap-hero-deep:color-mix(in srgb,var(--tap-primary) 74%,#000);
  background:
    radial-gradient(118% 132% at 88% 4%, color-mix(in srgb,var(--tap-saffron) 92%,transparent) 0%, transparent 56%),
    radial-gradient(90% 110% at 8% 96%, color-mix(in srgb,var(--tap-primary) 88%,#000) 0%, transparent 62%),
    linear-gradient(148deg, var(--tap-hero-deep) 0%, var(--tap-primary) 58%, color-mix(in srgb,var(--tap-primary) 76%,var(--tap-saffron)) 100%);
  box-shadow:0 30px 80px color-mix(in srgb,var(--tap-primary) 26%,transparent);
  padding:clamp(28px,4.4vw,56px);
  isolation:isolate;
}
/* Concentric mandala motif — decorative, drawn, never an image. */
.tap-home-root .tap-hero-compact::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(62vw,620px);aspect-ratio:1;right:-14%;top:-30%;border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    rgba(255,255,255,.10) 0 1px, transparent 1px 26px);
  mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);
}
/* Scrim: guarantees AA for the copy regardless of where the gradient lands. */
.tap-home-root .tap-hero-compact::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb,var(--tap-hero-deep) 62%,transparent) 0%, transparent 62%);
}
.tap-home-root .tap-hero-compact.has-media::after{
  background:linear-gradient(to top, color-mix(in srgb,var(--tap-hero-deep) 82%,transparent) 0%, color-mix(in srgb,var(--tap-hero-deep) 30%,transparent) 58%, transparent 100%);
}
.tap-home-root .tap-hero-compact-body{z-index:3;max-width:min(100%,660px)}
.tap-home-root .tap-hero-compact-glyph{opacity:.14;z-index:2}
.tap-home-root .tap-hero-compact-pill{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  letter-spacing:.01em;margin-bottom:clamp(14px,2vw,20px);
}
.tap-home-root .tap-hero-compact-title{
  font-weight:var(--tap-font-heading-weight,700);
  letter-spacing:-.035em;text-wrap:balance;margin-bottom:clamp(10px,1.4vw,16px);
}
.tap-home-root .tap-hero-compact-sub{
  color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:clamp(18px,2.4vw,26px);
}
.tap-home-root .tap-hero-compact-search{
  max-width:600px;border:0;
  box-shadow:0 18px 44px color-mix(in srgb,var(--tap-hero-deep) 38%,transparent);
}
.tap-home-root .tap-hero-compact-actions{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(14px,2vw,18px);
}
.tap-home-root .tap-hero-compact-action{
  min-height:48px;padding:0 24px;border-radius:var(--tap-r-full);
  font-weight:700;letter-spacing:.005em;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease),
             box-shadow var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease),
             background-color var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease);
}
/* On the gradient the highest-contrast action is a solid light pill. */
.tap-home-root .tap-hero-compact-action.tap-btn-primary{
  background:#fff;color:var(--tap-hero-deep);border:0;
  box-shadow:0 12px 30px color-mix(in srgb,var(--tap-hero-deep) 34%,transparent);
}
.tap-home-root .tap-hero-compact-action.tap-btn-ghost{
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tap-home-root .tap-hero-compact-action:hover{transform:translateY(-1px)}
.tap-home-root .tap-hero-compact-action.tap-btn-ghost:hover{background:rgba(255,255,255,.18)}
.tap-home-root .tap-hero-compact-action:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* --- Service junction ---------------------------------------------------- */
.tap-home-root .tap-service-junction__card{
  position:relative;gap:10px;
  border:1px solid color-mix(in srgb,var(--tap-primary) 9%,var(--tap-line));
  transition:transform var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease),
             box-shadow var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease),
             border-color var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease);
}
.tap-home-root .tap-service-junction__card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--tap-primary) 26%,var(--tap-line));
  box-shadow:0 20px 44px color-mix(in srgb,var(--tap-primary) 15%,transparent);
}
.tap-home-root .tap-service-junction__card:focus-visible{outline:3px solid var(--tap-primary);outline-offset:3px}
.tap-home-root .tap-service-junction__icon{
  background:linear-gradient(140deg,
    color-mix(in srgb,var(--tap-primary) 12%,var(--tap-card)),
    color-mix(in srgb,var(--tap-saffron) 12%,var(--tap-card)));
  color:var(--tap-primary);
}
/* Launching-soon: present, honest, visibly not yet open. */
.tap-home-root .tap-service-junction__card.is-soon{
  background:color-mix(in srgb,var(--tap-card) 92%,var(--tap-bg));
}
.tap-home-root .tap-service-junction__card.is-soon .tap-service-junction__icon{
  color:var(--tap-muted);
  background:color-mix(in srgb,var(--tap-muted) 8%,var(--tap-card));
}
.tap-home-root .tap-service-junction__card.is-soon .tap-service-junction__label{color:var(--tap-muted)}
.tap-service-junction__soon{
  display:inline-flex;align-items:center;align-self:flex-start;
  margin-top:2px;padding:3px 9px;border-radius:var(--tap-r-full);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--tap-saffron) 68%,#000);
  background:color-mix(in srgb,var(--tap-saffron) 16%,var(--tap-card));
  border:1px solid color-mix(in srgb,var(--tap-saffron) 32%,transparent);
}

/* --- Rhythm & motion ----------------------------------------------------- */
.tap-home-root .tap-sec-eyebrow{color:color-mix(in srgb,var(--tap-saffron) 76%,#000)}
.tap-home-root .tap-reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity 360ms var(--tap-ease-standard,ease), transform 360ms var(--tap-ease-standard,ease);
}
.tap-home-root .tap-reveal.visible{opacity:1;transform:none}

@media (max-width:1023.98px){
  .tap-home-root .tap-home-band .tap-hl-vip{grid-template-columns:1fr}
  .tap-home-root .tap-home-band .tap-hl-vip-art{min-height:180px}
}
@media (max-width:767.98px){
  .tap-home-root .tap-hero-compact{padding:26px 20px 28px}
  .tap-home-root .tap-hero-compact::before{width:96vw;right:-40%;top:-24%}
  .tap-home-root .tap-hero-compact-actions{gap:10px}
  .tap-home-root .tap-hero-compact-action{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .tap-home-root .tap-reveal{opacity:1;transform:none;transition:none}
  .tap-home-root .tap-hero-compact-action:hover,
  .tap-home-root .tap-service-junction__card:hover,
  .tap-home-root .tap-home-band .tap-hl-vip:hover{transform:none}
}

/* --- v8.6.3 refinements (from on-page review) ----------------------------- */

/* Hero type: the shipped clamp tops out at 76px, which on a 1280 container
   pushed a normal two-line headline to three lines and left the search and
   actions fighting for the fold. Brand display weight is 700 at hero size
   while section headings stay at the global 600. */
.tap-home-root .tap-hero-compact-title{
  font-size:clamp(34px,4.6vw,58px);
  font-weight:700;
  max-width:16ch;
  line-height:1.02;
}


/* Wishlist is a secondary action and must not out-shout the booking CTA.
   It inherited the CTA fill, which put a solid accent chip on every card. */
.tap-home-root .tap-fcard-heart{
  background:rgba(255,255,255,.92)!important;
  color:var(--tap-ink)!important;
  border:1px solid color-mix(in srgb,var(--tap-ink) 10%,transparent)!important;
  box-shadow:0 2px 10px color-mix(in srgb,var(--tap-ink) 12%,transparent);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:color var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease),
             transform var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease);
}
.tap-home-root .tap-fcard-heart:hover,
.tap-home-root .tap-fcard-heart.is-on{color:var(--tap-cta)!important;transform:scale(1.06)}

/* Feature band — used by any section holding exactly one real record. */
.tap-home-root .tap-home-band .tap-hl-vip{
  display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:stretch;
  margin:0;border-color:color-mix(in srgb,var(--tap-primary) 12%,var(--tap-line));
  box-shadow:0 18px 46px color-mix(in srgb,var(--tap-ink) 9%,transparent);
  transition:transform var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease),
             box-shadow var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease);
}
.tap-home-root .tap-home-band .tap-hl-vip:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 58px color-mix(in srgb,var(--tap-primary) 16%,transparent);
}
.tap-home-root .tap-home-band .tap-hl-vip:focus-visible{outline:3px solid var(--tap-primary);outline-offset:3px}
.tap-home-root .tap-home-band .tap-hl-vip-art{
  height:auto;min-height:240px;background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,
    color-mix(in srgb,var(--tap-primary) 78%,#000) 0%,
    var(--tap-primary) 52%,
    color-mix(in srgb,var(--tap-primary) 62%,var(--tap-saffron)) 100%);
}
.tap-home-root .tap-home-band .tap-hl-vip-art.has-image{position:relative;overflow:hidden;background-image:none}
.tap-home-root .tap-home-band .tap-hl-vip-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tap-home-root .tap-home-band .tap-hl-vip-glyph{color:rgba(255,255,255,.92)}
.tap-home-root .tap-home-band .tap-hl-vip-body{
  display:flex;flex-direction:column;gap:8px;justify-content:center;
  padding:clamp(20px,3vw,36px);
}
.tap-home-root .tap-home-band .tap-hl-vip-pill{
  align-self:flex-start;margin:0;
  background:color-mix(in srgb,var(--tap-primary) 10%,var(--tap-card));
  color:var(--tap-primary);
}
.tap-home-root .tap-home-band .tap-hl-vip-title{
  font-size:clamp(22px,2.5vw,32px);line-height:1.16;letter-spacing:-.02em;
}
.tap-home-root .tap-home-band .tap-hl-vip-sub{
  font-size:clamp(13px,1.2vw,15px);line-height:1.55;max-width:56ch;margin:0;
}

@media (max-width:1023.98px){
  .tap-home-root .tap-home-band .tap-hl-vip{grid-template-columns:1fr}
  .tap-home-root .tap-home-band .tap-hl-vip-art{min-height:180px}
}
@media (prefers-reduced-motion:reduce){
  .tap-home-root .tap-home-band .tap-hl-vip:hover,
  .tap-home-root .tap-fcard-heart:hover{transform:none}
}

/* ==========================================================================
   v8.6.3 — Full-bleed homepage hero.

   Both states are edge-to-edge and the same height, so the page does not jump
   when an operator publishes or clears the slider: the built-in hero (no
   campaigns) and the campaign slider (one or more slides) share one geometry.
   Copy stays inside the content column via padding, not via a wrapper, so the
   background can still reach the viewport edge.
   ========================================================================== */

/* --tap-hero-h-d / --tap-hero-h-m are the existing "Hero height desktop/mobile"
   settings (Visual Studio -> Hero & countdown), emitted at :root on every DIVSA
   page. Reading them here means the campaign-slider hero obeys the same operator
   control the built-in hero already did, instead of a fixed clamp. The clamp
   stays as the shipped default for a site that never set them. */
.tap-home-root{--tap-hero-h:var(--tap-hero-h-d,clamp(440px,46vw,560px));
  --tap-hero-inline:max(20px,calc((100% - var(--tap-home-max,1280px)) / 2));}

/* Break out of the root's side padding without using 100vw, which on desktop
   is wider than the layout viewport by exactly the scrollbar and would add a
   horizontal scroll. Negative margin of the SAME custom property the padding
   uses stays exact at every breakpoint. */
/* The app shell centres every direct child of the home root inside the content
   column with `max-inline-size:var(--tap-content-max)` + `margin-inline:auto
   !important`, at (0,3,0). A full-bleed hero is the one child that must opt
   out, so this selector is deliberately written to (0,4,0) — !important alone
   loses to the shell rule because specificity is compared first. Verified by
   measuring the computed margin, not by reading the cascade. */

/* --- Built-in hero, full bleed ------------------------------------------- */
.tap-home-root .tap-hero-compact{
  border-radius:0;margin:0;min-height:var(--tap-hero-h);
  padding:clamp(40px,6vw,88px) var(--tap-hero-inline);
  box-shadow:none;
}
.tap-home-root .tap-hero-compact::before{width:min(52vw,720px);right:-6%;top:-24%}

/* --- Campaign slider as hero --------------------------------------------- */
.tap-home-hero-slider{width:auto}
.tap-home-root .tap-home-hero-slider .tap-promo{margin:0}
.tap-home-root .tap-promo--hero .tap-promo__viewport{border-radius:0}
.tap-home-root .tap-promo--hero .tap-promo__track{gap:0}
.tap-home-root .tap-promo--hero .tap-promo__item{
  min-height:var(--tap-hero-h);
  border:0;border-radius:0;
  /* Same brand field as the built-in hero, so an operator who adds a slide
     without artwork still gets the brand rather than a flat block. */
  background:
    radial-gradient(118% 132% at 88% 4%, color-mix(in srgb,var(--tap-saffron) 92%,transparent) 0%, transparent 56%),
    radial-gradient(90% 110% at 8% 96%, color-mix(in srgb,var(--tap-primary) 88%,#000) 0%, transparent 62%),
    linear-gradient(148deg, color-mix(in srgb,var(--tap-primary) 74%,#000) 0%, var(--tap-primary) 58%, color-mix(in srgb,var(--tap-primary) 76%,var(--tap-saffron)) 100%);
}
.tap-home-root .tap-promo--hero .tap-promo__item::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(52vw,720px);aspect-ratio:1;right:-6%;top:-24%;border-radius:50%;
  background:repeating-radial-gradient(circle at center,rgba(255,255,255,.10) 0 1px,transparent 1px 26px);
  mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);
}
.tap-home-root .tap-promo--hero .tap-promo__item.has-image::before{display:none}
/* Text must stay readable over any artwork an operator uploads. */
.tap-home-root .tap-promo--hero .tap-promo__shade{
  background:linear-gradient(100deg,
    color-mix(in srgb,#000000 76%,transparent) 0%,
    color-mix(in srgb,#000000 44%,transparent) 46%,
    transparent 78%);
}
.tap-home-root .tap-promo--hero .tap-promo__item:not(.has-image) .tap-promo__shade{
  background:linear-gradient(to top,color-mix(in srgb,#000000 40%,transparent) 0%,transparent 60%);
}
.tap-home-root .tap-promo--hero .tap-promo__body{
  position:relative;z-index:2;
  min-height:var(--tap-hero-h);
  max-width:none;
  padding:clamp(40px,6vw,88px) var(--tap-hero-inline);
  gap:0;
}
.tap-home-root .tap-promo--hero .tap-promo__eyebrow{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:var(--tap-r-full,999px);padding:6px 14px;
  font-size:12px;letter-spacing:.1em;opacity:1;margin-bottom:clamp(14px,2vw,20px);
}
.tap-home-root .tap-promo--hero .tap-promo__body h1,
.tap-home-root .tap-promo--hero .tap-promo__body h3{
  margin:0 0 clamp(10px,1.4vw,16px);
  max-width:16ch;
  font-family:var(--tap-font-heading);
  font-size:clamp(34px,4.6vw,58px);
  font-weight:700;line-height:1.02;letter-spacing:-.035em;
  text-wrap:balance;color:#fff;
}
.tap-home-root .tap-promo--hero .tap-promo__cta{
  margin-top:clamp(8px,1.4vw,14px);
  min-height:48px;padding:0 26px;font-weight:700;
  background:#fff;color:color-mix(in srgb,var(--tap-primary) 74%,#000);
  box-shadow:0 12px 30px rgba(11,4,22,.34);
  transition:transform var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease);
}
.tap-home-root .tap-promo--hero .tap-promo__cta:hover{transform:translateY(-1px)}

/* Controls sit on the hero, not under it. */
.tap-home-root .tap-promo--hero{position:relative}
.tap-home-root .tap-promo--hero .tap-promo__controls{
  position:absolute;z-index:3;left:var(--tap-hero-inline);bottom:clamp(20px,3vw,34px);
  margin:0;justify-content:flex-start;gap:8px;
}
.tap-home-root .tap-promo--hero .tap-promo__nav,
.tap-home-root .tap-promo--hero .tap-promo__pause{
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tap-home-root .tap-promo--hero .tap-promo__nav:hover,
.tap-home-root .tap-promo--hero .tap-promo__pause:hover{background:rgba(255,255,255,.24)}
.tap-home-root .tap-promo--hero .tap-promo__dots{align-items:center;gap:7px}
.tap-home-root .tap-promo--hero .tap-promo__dots span{
  width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.45);
  transition:width var(--tap-motion-quick,160ms) var(--tap-ease-standard,ease);
}
.tap-home-root .tap-promo--hero .tap-promo__dots span.is-active{width:26px;background:#fff}

@media (max-width:767.98px){
  /* Was clamp(420px,86vw,520px): on a 390px phone that floor put a 420px hero
     above the fold and pushed the service row completely off it. */
  .tap-home-root{--tap-hero-h:var(--tap-home-hero-h-m,300px);--tap-hero-inline:18px}
	.tap-home-root .tap-home-hero-slider .tap-promo--hero .tap-promo__item{
		height:var(--tap-home-hero-h-m,300px)!important;
		min-height:var(--tap-home-hero-h-m,300px)!important;
	}
  .tap-home-root .tap-hero-compact{padding:22px 18px 64px}
  .tap-home-root .tap-promo--hero .tap-promo__body{padding:22px 18px 68px}
  .tap-home-root .tap-promo--hero .tap-promo__body h1,
  .tap-home-root .tap-promo--hero .tap-promo__body h3{max-width:14ch}
	.tap-home-root .tap-hero-compact,
	.tap-home-root .tap-promo--hero .tap-promo__viewport{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .tap-home-root .tap-promo--hero .tap-promo__cta:hover{transform:none}
}

/* ==========================================================================
   v8.6.13 — One continuous homepage.

   The page had become a stack of panels: every section carried its own tinted
   background, its own container and 76px of padding top and bottom, so each one
   read as a separate page. Sections are separated here by spacing, typography
   and one hairline rule instead. Nothing below introduces a section background.
   ========================================================================== */

/* --- Rhythm --------------------------------------------------------------- */
.tap-home-root .tap-home-section{
  padding-block:clamp(22px,2.8vw,38px);
}
/* Kill the tinted panels — every shelf now sits on the page background. */
.tap-home-root .tap-home-group-pujas,
.tap-home-root .tap-home-samagri,
.tap-home-root .tap-home-why,
.tap-home-root .tap-home-catalogue{
  background:transparent!important;
  border-block:0!important;
}
.tap-home-root .tap-sec-head2{margin-bottom:clamp(16px,2vw,22px)}
.tap-home-root .tap-sec-title{font-size:clamp(26px,3.2vw,40px)}

/* The one permitted divider. */
.tap-home-rule{
  border:0;block-size:1px;margin:0 0 clamp(20px,2.6vw,32px);
  background:color-mix(in srgb,var(--tap-ink) 10%,transparent);
}

/* --- Brand statement ------------------------------------------------------ */
.tap-home-root .tap-home-statement{padding-block:clamp(24px,3vw,40px)}
.tap-home-statement__body{max-width:62ch}
.tap-home-statement__body p{
  margin:6px 0 0;
  font-family:var(--tap-font-heading);
  font-size:clamp(18px,2.1vw,26px);
  line-height:1.3;letter-spacing:-.02em;
  color:var(--tap-ink);
}

/* --- Rail controls -------------------------------------------------------- */
.tap-rail-nav{display:flex;gap:8px;margin-top:4px}
.tap-rail-btn{
  inline-size:40px;block-size:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:22px;line-height:1;cursor:pointer;
  color:var(--tap-ink);
  background:var(--tap-card);
  border:1px solid color-mix(in srgb,var(--tap-ink) 12%,transparent);
  transition:background-color 160ms var(--tap-ease-standard,ease),
             border-color 160ms var(--tap-ease-standard,ease),
             color 160ms var(--tap-ease-standard,ease);
}
.tap-rail-btn:hover{
  color:var(--tap-primary);
  border-color:color-mix(in srgb,var(--tap-primary) 30%,transparent);
  background:color-mix(in srgb,var(--tap-primary) 6%,var(--tap-card));
}
.tap-rail-btn:focus-visible{outline:3px solid var(--tap-primary);outline-offset:2px}

/* --- Store banner --------------------------------------------------------- */
.tap-home-root .tap-home-storebanner{padding-block:clamp(20px,2.4vw,32px)}
.tap-home-storebanner__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px);
  border-radius:20px;text-decoration:none;
  background:
    radial-gradient(120% 180% at 92% 12%, color-mix(in srgb,var(--tap-saffron) 82%,transparent) 0%, transparent 58%),
    linear-gradient(100deg, color-mix(in srgb,var(--tap-primary) 76%,#000) 0%, var(--tap-primary) 70%);
  color:#fff;
  transition:transform 200ms var(--tap-ease-standard,ease), box-shadow 200ms var(--tap-ease-standard,ease);
}
.tap-home-storebanner__inner:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px color-mix(in srgb,var(--tap-primary) 26%,transparent);
}
.tap-home-storebanner__inner:focus-visible{outline:3px solid var(--tap-primary);outline-offset:3px}
.tap-home-storebanner__copy{display:flex;flex-direction:column;gap:6px}
.tap-home-root .tap-home-storebanner .tap-sec-eyebrow{color:rgba(255,255,255,.82)}
.tap-home-storebanner__title{
  font-family:var(--tap-font-heading);
  font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.02em;
}
.tap-home-storebanner__cta{
  display:inline-flex;align-items:center;gap:8px;
  min-height:46px;padding:0 24px;border-radius:999px;
  background:#fff;color:color-mix(in srgb,var(--tap-primary) 74%,#000);
  font-weight:700;white-space:nowrap;
}

/* --- Store shelf ---------------------------------------------------------- */
.tap-home-root .tap-home-samagri .tap-sam-grid,
.tap-home-root .tap-home-samagri .tap-sam-rail{gap:16px}
.tap-home-root .tap-home-samagri .tap-sam-card{
  inline-size:300px;
  min-block-size:420px;
  border:0!important;border-radius:16px!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--tap-ink) 10%,transparent);
  overflow:hidden;
}
.tap-home-root .tap-home-samagri .tap-sam-art{
  aspect-ratio:1/1;border-radius:0;
}
.tap-home-root .tap-home-samagri .tap-sam-art img{
  inline-size:100%;block-size:100%;object-fit:cover;
}

@media (max-width:1023.98px){
  .tap-home-root .tap-home-catalogue .tap-fcard-rail{grid-auto-columns:min(80vw,400px)}
  .tap-home-root .tap-home-catalogue .tap-fcard{inline-size:min(80vw,400px);block-size:min(63vw,300px)}
  .tap-home-root .tap-home-samagri .tap-sam-card{inline-size:min(64vw,300px)}
  .tap-home-storebanner__inner{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .tap-home-root .tap-home-catalogue .tap-fcard:hover,
  .tap-home-storebanner__inner:hover{transform:none}
}

/* ==========================================================================
   v8.6.15 — Pooja + Chadhava card system.

   Image on top, content below: the reference pattern, because it is the one
   that can carry a tagline, a title, a place and a full-width action without
   any of them fighting the artwork. An overlay card looks cleaner in a mockup
   and then has nowhere to put the three lines that actually sell a seva.

   The artwork is inset rather than bled to the card edge — a frame inside a
   frame reads as deliberate, and it also rescues the client's existing
   creatives, which have their titles baked into the image and get clipped by a
   full-bleed crop.
   ========================================================================== */

/* Rail: aligned to the content column, with the next card peeking. */
.tap-home-root .tap-home-catalogue .tap-fcard-rail{
  grid-auto-columns:400px;
  gap:20px;
  justify-content:start;
  padding:4px 0 12px;
  scroll-padding-inline-start:0;
}

.tap-home-root .tap-home-catalogue .tap-fcard{
  position:relative;
  display:flex;flex-direction:column;
  inline-size:400px;
  block-size:auto;
  padding:10px 10px 0;
  border:1px solid color-mix(in srgb,var(--tap-ink) 7%,transparent)!important;
  border-radius:20px!important;
  background:var(--tap-card)!important;
  box-shadow:0 10px 30px color-mix(in srgb,var(--tap-ink) 8%,transparent)!important;
  overflow:hidden;
  transition:transform 200ms var(--tap-ease-standard,ease), box-shadow 200ms var(--tap-ease-standard,ease);
}
.tap-home-root .tap-home-catalogue .tap-fcard:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 46px color-mix(in srgb,var(--tap-ink) 16%,transparent)!important;
}

/* Artwork ------------------------------------------------------------------ */
.tap-home-root .tap-home-catalogue .tap-fcard-art{
  position:relative;
  block-size:auto!important;
  aspect-ratio:16/10!important;
  border-radius:14px;
  overflow:hidden;
  background-size:cover;background-position:center;
}
.tap-home-root .tap-home-catalogue .tap-fcard-heart{
  inset-block-start:20px;inset-inline-end:20px;z-index:3;
}

/* Body --------------------------------------------------------------------- */
.tap-home-root .tap-home-catalogue .tap-fcard-body{
  display:flex;flex-direction:column;gap:6px;
  min-height:0!important;
  padding:16px 10px 12px!important;
  background:transparent;
}
/* The tagline line, in brand accent — the first thing read after the image. */
.tap-home-root .tap-home-catalogue .tap-fcard-summary{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
  order:-1;
  color:color-mix(in srgb,var(--tap-primary) 82%,#000);
  font-size:13px;font-weight:600;line-height:1.4;
}
.tap-home-root .tap-home-catalogue .tap-fcard-name{
  color:var(--tap-ink);
  font-size:19px;line-height:1.28;font-weight:650;letter-spacing:-.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-block-size:calc(19px * 1.28 * 2);
}
.tap-home-root .tap-home-catalogue .tap-fcard-temple{
  display:flex!important;color:var(--tap-muted);font-size:13px;line-height:1.4;
}
.tap-home-root .tap-home-catalogue .tap-fcard-facts{color:var(--tap-muted);font-size:12.5px}
.tap-home-root .tap-home-catalogue .tap-fcard-foot{
  border:0;padding:0;margin-top:2px;
  display:flex;align-items:baseline;gap:10px;
}
.tap-home-root .tap-home-catalogue .tap-fcard-price{color:var(--tap-ink);font-weight:800}
.tap-home-root .tap-home-catalogue .tap-fcard-rating{color:color-mix(in srgb,var(--tap-saffron) 74%,#000)}

/* Action: full width, brand solid — white on primary is 8.6:1. */
.tap-home-root .tap-home-catalogue .tap-fcard-cta{
  margin:auto 10px 12px;
  min-height:48px;
  border-radius:12px;
  background:var(--tap-primary)!important;
  color:var(--tap-on-primary)!important;
  border:0!important;
  font-weight:700;letter-spacing:.005em;
  justify-content:center;
  box-shadow:none!important;
  transition:filter 160ms var(--tap-ease-standard,ease);
}
.tap-home-root .tap-home-catalogue .tap-fcard-cta:hover{filter:brightness(1.08)}
.tap-home-root .tap-home-catalogue .tap-fcard-cta:focus-visible{
  outline:3px solid var(--tap-primary);outline-offset:2px;
}

/* --- Section header: title, inline "see all", arrows on the right --------- */
.tap-home-root .tap-home-catalogue .tap-sec-head2{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.tap-home-root .tap-home-catalogue .tap-sec-action{
  align-self:center;
}

@media (prefers-reduced-motion:reduce){
  .tap-home-root .tap-home-catalogue .tap-fcard:hover{transform:none}
}

/* --- Brand statement, centred -------------------------------------------- */
.tap-home-statement__body{max-width:64ch;margin-inline:auto;text-align:center}
.tap-home-root .tap-home-statement .tap-sec-eyebrow{text-align:center}
.tap-sec-tools{display:flex;align-items:center;gap:14px}
.tap-home-root .tap-service-junction--smart .tap-service-junction__grid{
  grid-template-columns:repeat(auto-fit,208px)!important;
  justify-content:start;gap:16px!important;
}
/* v8.6.26 — this rule used to pin every junction card to a literal
   inline-size:208px / block-size:176px with !important, at every breakpoint.
   That is what actually overrode the Home Page card-size settings, and on a
   phone it made each card 129px wider than the grid track holding it, so the
   tiles overlapped. The card now takes its width from whichever layout mode
   is active (grid track, or the fixed rail width) and its height and radius
   from the same custom properties the section emits. */
.tap-home-root .tap-service-junction__card{
  border-radius:var(--tap-sj-radius,22px)!important;padding:20px!important;
  justify-content:center;gap:12px;
}
.tap-home-root .tap-service-junction{padding-block:clamp(20px,2.4vw,32px)}

/* Rail arrows are navigation, not primary calls to action; keep their
   appearance explicit within the DIVSA component. */
.tap-home-root .tap-rail-btn{
  background:var(--tap-card)!important;
  color:var(--tap-ink)!important;
  border:1px solid color-mix(in srgb,var(--tap-ink) 14%,transparent)!important;
  box-shadow:none!important;
}
.tap-home-root .tap-rail-btn:hover{
  color:var(--tap-primary)!important;
  background:color-mix(in srgb,var(--tap-primary) 7%,var(--tap-card))!important;
  border-color:color-mix(in srgb,var(--tap-primary) 30%,transparent)!important;
}

/* Continuous scroll: shelves sit closer together than a stack of panels would. */
.tap-home-root .tap-home-catalogue{padding-block:clamp(18px,2.2vw,30px)}
.tap-home-root .tap-home-catalogue .tap-fcard-rail{padding-bottom:4px}

/* ==========================================================================
   v8.6.17 — Card, corrected.

   The image now runs to the card edge with no frame around it: the artwork is
   the top half of the card, the content sits beneath it. The inset frame in
   8.6.15 was a hedge against the client's baked-in-text creatives and it made
   the card look like an image pasted onto a panel, which is the opposite of
   the brief.
   ========================================================================== */
.tap-home-root .tap-home-catalogue .tap-fcard{
  padding:0!important;
  border:0!important;
  border-radius:22px!important;
  background:var(--tap-card)!important;
  box-shadow:0 2px 4px color-mix(in srgb,var(--tap-ink) 5%,transparent),
             0 12px 32px color-mix(in srgb,var(--tap-ink) 9%,transparent)!important;
}
.tap-home-root .tap-home-catalogue .tap-fcard:hover{
  box-shadow:0 4px 8px color-mix(in srgb,var(--tap-ink) 6%,transparent),
             0 22px 50px color-mix(in srgb,var(--tap-primary) 18%,transparent)!important;
}
/* Artwork: full card width, 4:3, square-cut into the card's top corners. */
.tap-home-root .tap-home-catalogue .tap-fcard-art{
  aspect-ratio:4/3!important;
  border-radius:0!important;
  margin:0;
}
.tap-home-root .tap-home-catalogue .tap-fcard-body{padding:18px 20px 10px!important}
.tap-home-root .tap-home-catalogue .tap-fcard-cta{margin:auto 20px 20px}

/* Wishlist: a proper glass disc on the artwork, not a floating glyph. */
.tap-home-root .tap-home-catalogue .tap-fcard-heart{
  inset-block-start:14px!important;inset-inline-end:14px!important;
  inline-size:38px!important;block-size:38px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;
  font-size:17px!important;line-height:1!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--tap-ink)!important;
  border:0!important;
  box-shadow:0 3px 10px rgba(8,3,16,.22)!important;
  transition:color 160ms var(--tap-ease-standard,ease), transform 160ms var(--tap-ease-standard,ease);
}
.tap-home-root .tap-home-catalogue .tap-fcard-heart:hover{
  color:var(--tap-cta)!important;transform:scale(1.08);
}
.tap-home-root .tap-home-catalogue .tap-fcard-heart:focus-visible{
  outline:3px solid #fff!important;outline-offset:2px;
}

/* --- Brand statement: the line IS the statement -------------------------- */
.tap-home-root .tap-home-statement{padding-block:clamp(20px,2.8vw,34px)}
.tap-home-root .tap-home-statement .tap-sec-eyebrow{
  display:block;
  font-family:var(--tap-font-heading);
  font-size:clamp(23px,3vw,34px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  text-transform:none;
  color:var(--tap-ink);
}
.tap-home-statement__body p{
  margin:9px auto 0;
  max-width:52ch;
  font-family:var(--tap-font-body);
  font-size:clamp(15px,1.5vw,18px);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  color:var(--tap-muted);
}

/* ==========================================================================
   v8.6.21 — Service junction: tiles were sitting on top of each other.

   The junction has a container query that turns it into a rail on a narrow
   container (`@container tapJunction (max-width:560px)` -> grid-template-columns:none).
   It never wins, because the smart-junction block above declares
   `grid-template-columns:repeat(auto-fit,208px)!important` — an !important
   declaration outside any query, which no container rule can outrank.

   On a 373px container auto-fit then resolves to `208px 156px 156px …` while
   `.tap-service-junction__card` is separately pinned to `inline-size:208px!important`.
   Every card after the first is therefore 52px wider than the track holding it,
   so on a phone the tiles OVERLAPPED by 36px each — Chadhava printed over
   Personal Pooja, Personal Pooja over Store, and so on down the row.

   Below the tablet breakpoint the junction becomes the rail it was always meant
   to be, with the track width equal to the card width so the two can no longer
   disagree.
   ========================================================================== */
@media (max-width:767.98px){
	.tap-home-root .tap-service-junction--smart .tap-service-junction__grid{
		grid-template-columns:none!important;
		grid-auto-flow:column!important;
		grid-auto-columns:208px!important;
		justify-content:start!important;
		gap:12px!important;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		scroll-snap-type:x proximity;
		scrollbar-width:none;
		padding-bottom:2px;
	}
	.tap-home-root .tap-service-junction--smart .tap-service-junction__grid::-webkit-scrollbar{display:none}
	.tap-home-root .tap-service-junction__card{scroll-snap-align:start}
}
/* Phase 2 — structured operator-created Home blocks. */
.tap-home-custom-block{padding:clamp(12px,2.4vw,32px) var(--tap-home-pad,16px)}
.tap-home-custom-block__in{width:min(var(--tap-block-max,1120px),100%);margin-inline:auto}
.tap-home-custom-block img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:var(--tap-radius,18px)}
.tap-home-custom-block--center,.tap-home-custom-block[style*="text-align:center"] .tap-home-custom-block__in{text-align:center}
.tap-home-custom-divider{margin:0;width:100%;border:0;border-top:1px solid var(--tap-line)}
.tap-home-custom-block__icon{display:inline-flex;align-items:center;justify-content:center;margin-inline-end:8px}
.tap-home-custom-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,3vw,34px);border:1px solid var(--tap-line);border-radius:var(--tap-radius,18px);background:var(--tap-card)}
.tap-block-vis-desktop{display:block}.tap-block-vis-mobile{display:none}
@media(max-width:767.98px){.tap-block-vis-desktop{display:none}.tap-block-vis-mobile{display:block}.tap-home-custom-cta{align-items:flex-start;flex-direction:column}}


/*
 * v8.6.26 — centre the section headings that have nothing beside them.
 *
 * Reference storefronts centre a section title on phones; DIVSA left-aligned
 * every one. Only the heads with no adjacent action can move: .tap-sec-head2
 * carries a "See all" link on the same row, so centring it would collide with
 * that link. .tap-home-editorial-head (How it works, Why, Trust) and the
 * service junction head hold text alone, so they centre cleanly.
 */
@media (max-width: 767.98px) {
  .tap-home-root .tap-home-editorial-head,
  .tap-home-root .tap-service-junction__head { text-align: center; }
}

/* ==========================================================================
   v8.6.26 — How It Works journey + merged Why / Trust Matrix.

   No markup was added for either: TAP_Home already emits
   .tap-home-step-num (the step icon) followed by the copy, and the step grid
   already carries `counter-reset: tapHomeStep`. So the 01/02/03 indicator is a
   CSS counter on ::after and the connector is ::before — the operator's steps,
   icons and copy stay the only source of truth, and nothing here depends on a
   fixed number of steps.

   The four Trust tiles now live in the Why section's own why_cards, and the
   standalone Trust section is switched off in Home Page → Section order, so
   there is exactly one Why/Trust block instead of two overlapping ones.

   All colour comes from brand tokens (--tap-cta, --tap-ink, --tap-line,
   --tap-card, --tap-bg), so Visual Studio still owns the palette.
   ========================================================================== */

/* --- shared: section head -------------------------------------------------- */
.tap-home-root .tap-home-how .tap-home-editorial-head,
.tap-home-root .tap-home-why .tap-home-editorial-head {
  max-width: 640px; margin-inline: auto; text-align: center;
}
.tap-home-root .tap-home-how .tap-sec-title,
.tap-home-root .tap-home-why .tap-sec-title {
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15;
}
.tap-home-root .tap-home-how .tap-home-editorial-head > p,
.tap-home-root .tap-home-why .tap-home-editorial-head > p {
  font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; margin-top: 10px;
}

/* --- How It Works: the journey card --------------------------------------- */
.tap-home-root .tap-home-step-grid {
  max-width: 1180px; margin-inline: auto;
}
.tap-home-root .tap-home-how .tap-home-step {
  counter-increment: tapHomeStep;
  position: relative; min-height: 0;
  border: 1px solid color-mix(in srgb, var(--tap-line) 78%, transparent);
  border-radius: 18px;
  background: var(--tap-card);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tap-ink) 4%, transparent);
}
/* The 01 / 02 / 03 marker. decimal-leading-zero gives the creative's 01 form
   without hardcoding the labels, so a 4th step numbers itself. */
.tap-home-root .tap-home-how .tap-home-step::after {
  content: counter(tapHomeStep, decimal-leading-zero);
  position: absolute;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--tap-cta);
  background: color-mix(in srgb, var(--tap-cta) 9%, var(--tap-card));
  border: 1px solid color-mix(in srgb, var(--tap-cta) 22%, transparent);
  border-radius: 999px; padding: 3px 9px; line-height: 1;
}
/* Small line-icon disc — deliberately not a large filled circle. */
.tap-home-root .tap-home-how .tap-home-step-num {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 999px;
  background: color-mix(in srgb, var(--tap-cta) 8%, var(--tap-card));
  border: 1px solid color-mix(in srgb, var(--tap-cta) 18%, transparent);
  color: var(--tap-cta);
  box-shadow: none; margin: 0;
}
.tap-home-root .tap-home-how .tap-home-step h3 {
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.3; margin: 0 0 5px;
}
.tap-home-root .tap-home-how .tap-home-step p {
  font-size: clamp(13px, 1vw, 14px); line-height: 1.55; margin: 0;
}

/* --- How It Works: phones = compact stacked journey ------------------------ */
@media (max-width: 767.98px) {
  .tap-home-root .tap-home-step-grid { gap: 16px; }
  .tap-home-root .tap-home-how .tap-home-step {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 52px 15px 15px;   /* right pad clears the 01 marker */
  }
  .tap-home-root .tap-home-how .tap-home-step::after { top: 14px; right: 13px; }
  /* Connector lives in the grid gap, centred under the icon disc. */
  .tap-home-root .tap-home-how .tap-home-step::before {
    content: ""; position: absolute; left: 36px; top: 100%;
    width: 2px; height: 16px;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--tap-cta) 38%, transparent),
      color-mix(in srgb, var(--tap-cta) 8%, transparent));
  }
  .tap-home-root .tap-home-how .tap-home-step:last-child::before { display: none; }
}

/* --- How It Works: tablet and up = one horizontal journey ------------------ */
@media (min-width: 768px) {
  /* Flex, not auto-fit grid: auto-fit sized tracks from the container, so a
     1180px row produced FOUR tracks for THREE steps and left a phantom empty
     column on the right. Flex gives exactly one column per step, whatever
     number of steps the operator publishes. */
  .tap-home-root .tap-home-step-grid { gap: 22px; display: flex; flex-wrap: wrap; justify-content: center; }
  /* The cap is what stops a wrapped last step stretching to the full row —
     at 768px three steps became 304 / 304 / 630. With it, any leftover step
     keeps a column's width and simply centres on its own row. */
  .tap-home-root .tap-home-how .tap-home-step { flex: 1 1 190px; max-width: calc(33.333% - 15px); }
  .tap-home-root .tap-home-how .tap-home-step {
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 20px 18px 18px;
  }
  .tap-home-root .tap-home-how .tap-home-step::after {
    position: static; margin-top: -2px;
  }
  .tap-home-root .tap-home-how .tap-home-step > div { order: 3; }
  /* Dotted connector across the gap, at icon-disc height. */
  .tap-home-root .tap-home-how .tap-home-step::before {
    content: ""; position: absolute; left: 100%; top: 47px;
    width: 22px; height: 0; border-top: 2px dotted
      color-mix(in srgb, var(--tap-cta) 40%, transparent);
  }
  .tap-home-root .tap-home-how .tap-home-step:last-child::before { display: none; }
}
/* auto-fit can wrap; a connector must never dangle off the end of a row. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tap-home-root .tap-home-how .tap-home-step:nth-child(2n)::before { display: none; }
}

/* --- Why + Trust Matrix ---------------------------------------------------- */
.tap-home-root .tap-home-why-grid {
  max-width: 900px; margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  /* Both rows share a height so the 2x2 reads as a matrix, not four cards. */
  grid-auto-rows: 1fr;
}
.tap-home-root .tap-home-why .tap-home-why-card {
  align-items: flex-start; gap: 13px;
  padding: clamp(15px, 1.6vw, 20px);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tap-line) 78%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tap-ink) 4%, transparent);
  min-height: 0;
}
.tap-home-root .tap-home-why .tap-home-why-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--tap-cta) 8%, var(--tap-card));
  border: 1px solid color-mix(in srgb, var(--tap-cta) 16%, transparent);
  color: var(--tap-cta);
}
.tap-home-root .tap-home-why .tap-home-why-card h3 {
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.3; margin: 0 0 4px;
}
.tap-home-root .tap-home-why .tap-home-why-card p {
  font-size: clamp(12.5px, .95vw, 14px); line-height: 1.5; margin: 0;
}

/* Phones: keep the 2x2 grid but stack inside each tile and drop the
   supporting line — at ~165px per tile there is no room for it, and the
   brief asks for tiles, not four full-width cards. */
@media (max-width: 767.98px) {
  .tap-home-root .tap-home-why .tap-home-why-card {
    flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px;
  }
  .tap-home-root .tap-home-why .tap-home-why-card p { display: none; }
  .tap-home-root .tap-home-why .tap-home-why-card h3 { font-size: 14px; }
}
/* Only the genuinely narrow phones fall back to one column. */
@media (max-width: 359px) {
  .tap-home-root .tap-home-why-grid { grid-template-columns: 1fr; }
}

/*
 * v8.6.26 — the feature band stacks: creative on top, content under it.
 *
 * The band split 38% / 1fr above 900px, so on a laptop the Personal Pooja
 * record read as a thin image column beside a very wide text column. One
 * record deserves one full-width creative with the copy beneath it; the art
 * is capped so a wide viewport does not turn it into a billboard.
 */
.tap-home-root .tap-home-band .tap-hl-vip { grid-template-columns: 1fr; }
.tap-home-root .tap-home-band .tap-hl-vip-art {
  min-height: 170px; max-height: 230px; height: auto; aspect-ratio: 16 / 5;
  background-size: cover; background-position: center;
}
.tap-home-root .tap-home-band .tap-hl-vip{
  width:min(1040px,100%);margin-inline:auto;
}
.tap-home-root .tap-home-band .tap-hl-vip-body{padding:clamp(18px,2.5vw,28px)}

/*
 * v8.6.26 — the occasions band is a coming-soon notice, not a live offer.
 *
 * Home (offline) pooja is not published yet, so the band states that plainly:
 * a badge above the heading, and a WhatsApp enquiry instead of a booking CTA
 * so an operator can confirm coverage for that area by hand.
 */
.tap-home-root .tap-occasion-bar {
  background: transparent; padding: clamp(20px,2.8vw,34px) 0; color: inherit;
}
.tap-home-root .tap-occasion-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(24px,3.2vw,40px) clamp(18px,3.2vw,42px);
  border-radius: var(--tap-ui-radius, 24px);
  border: 1px solid color-mix(in srgb, var(--tap-cta) 34%, transparent);
  color: var(--tap-card);
  box-shadow: 0 22px 60px -28px color-mix(in srgb, var(--tap-ink) 82%, transparent);
  /* Ink field, not the saffron one the hero uses. On
     the orange brand field the badge, the rule and the button all sat within a
     few points of the background and read as washed out. On ink the same gold
     carries, and the saffron glow keeps the band tied to the hero. */
  background:
    /* A gold rim-light rather than a saffron wash: saffron at 30% over ink
       mixed to a muddy brown that read as neither the ink nor the brand
       orange. Deep indigo carrying gold is the same pairing the badge, the
       rule and the button use, so the band reads as one brand object. */
    radial-gradient(78% 120% at 92% -10%, color-mix(in srgb, var(--tap-cta) 24%, transparent) 0%, transparent 55%),
    radial-gradient(70% 110% at 0% 108%, color-mix(in srgb, var(--tap-primary) 20%, transparent) 0%, transparent 58%),
    linear-gradient(152deg, var(--tap-ink) 0%, color-mix(in srgb, var(--tap-ink) 82%, var(--tap-primary)) 64%, var(--tap-ink) 100%);
}
.tap-home-root .tap-occasion-card::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(46vw, 460px); aspect-ratio: 1; right: -8%; top: -46%; border-radius: 50%;
  background: repeating-radial-gradient(circle at center, color-mix(in srgb, var(--tap-cta) 18%, transparent) 0 1px, transparent 1px 22px);
  mask-image: radial-gradient(circle at center, #000 38%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 72%);
}
.tap-home-root .tap-occasion-rule {
  width: 54px; height: 2px; border-radius: 2px; margin-bottom: clamp(14px,2vw,20px);
  background: linear-gradient(90deg, transparent, var(--tap-cta), transparent);
}
.tap-home-root .tap-occasion-bar .tap-occasion-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: clamp(12px,1.6vw,16px);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tap-cta);
  background: color-mix(in srgb, var(--tap-ink) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--tap-cta) 48%, transparent);
  border-radius: 999px; padding: 6px 14px; line-height: 1;
}
.tap-home-root .tap-occasion-bar .tap-occasion-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tap-cta);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tap-cta) 70%, transparent);
  animation: tapOccasionPulse 2.4s ease-out infinite;
}
@keyframes tapOccasionPulse {
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tap-cta) 0%, transparent); }
  100% { box-shadow: 0 0 0 0  color-mix(in srgb, var(--tap-cta) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tap-home-root .tap-occasion-bar .tap-occasion-badge::before { animation: none; }
}
.tap-home-root .tap-occasion-bar h2 {
  color: inherit; margin: 0 0 10px;
  font-family: var(--tap-font-display, inherit);
  font-size: clamp(23px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -.01em;
  max-width: 18ch;
}
.tap-home-root .tap-occasion-bar p {
  margin: 0; max-width: 54ch;
  font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65;
  color: color-mix(in srgb, var(--tap-card, #fff) 82%, transparent); opacity: 1;
}
.tap-home-root .tap-occasion-cta {
  margin-top: clamp(18px,2.4vw,26px); min-height: 48px; padding-inline: 28px;
  background: var(--tap-cta) !important;
  color: var(--tap-cta-text) !important;
  border: 0 !important;
  font-weight: 800;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--tap-cta) 60%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .tap-home-root .tap-occasion-cta:hover {
    background: color-mix(in srgb, var(--tap-cta) 86%, var(--tap-card)) !important;
  }
}
.tap-home-root .tap-occasion-bar .tap-occasion-note {
  display: block; margin-top: 12px; max-width: 46ch;
  font-size: 13px; line-height: 1.55;
  color: color-mix(in srgb, var(--tap-card, #fff) 64%, transparent);
}
@media (max-width: 767.98px) {
  .tap-home-root .tap-occasion-card { border-radius: 20px; }
  .tap-home-root .tap-occasion-bar h2 { max-width: 15ch; }
  .tap-home-root .tap-occasion-cta { width: 100%; }
}

/* --------------------------------------------------------------------------
   v8.6.26 — the concern-chip section carried its type scale, its centring and
   its muted colour as inline style attributes, which outrank every stylesheet
   and cannot be re-themed by the Visual Studio. Same rules, now in CSS.
   -------------------------------------------------------------------------- */
.tap-home-root .tap-problem-search .tap-sec-title{
  text-align:center;font-size:clamp(22px,4vw,32px);margin-bottom:8px;
}
.tap-home-root .tap-problem-search__sub{
  text-align:center;color:var(--tap-muted);margin-bottom:20px;
}
.tap-home-root .tap-deity-item{text-decoration:none}

/* ==========================================================================
   v8.6.26 — Devotee experiences, Glimpses of devotion, Sacred network.

   All three use the same rail primitive the catalogue shelves already use, so
   swipe, snap and the auto-advance engine behave identically across the page
   and nothing here introduces a second responsive system. Sizes come from the
   existing tokens; the only literals are the card widths, which are what makes
   "3 across on desktop, 1 + peek on mobile" true.
   ========================================================================== */

.tap-home-root .tap-review-rail,
.tap-home-root .tap-glimpse-rail{
  display:grid;grid-auto-flow:column;grid-template-columns:none;
  gap:16px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:4px 3px 16px;margin:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tap-home-root .tap-review-rail::-webkit-scrollbar,
.tap-home-root .tap-glimpse-rail::-webkit-scrollbar{display:none}
.tap-home-root .tap-review-rail>*,
.tap-home-root .tap-glimpse-rail>*{scroll-snap-align:start;min-width:0}

/* --- Review cards -------------------------------------------------------- */
.tap-home-root .tap-review-rail{grid-auto-columns:calc((100% - 32px)/3)}
.tap-home-root .tap-review-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:20px;border:1px solid var(--tap-line);
  border-radius:var(--tap-ui-radius,20px);background:var(--tap-card);
  box-shadow:0 10px 28px color-mix(in srgb,var(--tap-ink) 7%,transparent);
}
.tap-home-root .tap-review-card__stars{font-size:14px;line-height:1;color:var(--tap-gold)}
.tap-home-root .tap-review-card__stars .tap-star{color:color-mix(in srgb,var(--tap-ink) 18%,transparent)}
.tap-home-root .tap-review-card__stars .tap-star.is-on{color:var(--tap-gold)}
/* Compact by design: this is a strip of voices, not four essays. */
.tap-home-root .tap-review-card__text{
  margin:0;font-size:14px;line-height:1.6;color:var(--tap-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
.tap-home-root .tap-review-card__foot{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px;
}
.tap-home-root .tap-review-card__avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px;
  background:color-mix(in srgb,var(--tap-cta) 8%,var(--tap-card));
}
.tap-home-root .tap-review-card__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.tap-home-root .tap-review-card__name{font-size:13px;font-weight:750;color:var(--tap-ink)}
.tap-home-root .tap-review-card__svc{
  font-size:12px;color:var(--tap-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tap-home-root .tap-review-card__badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;line-height:1.2;
  font-size:11px;font-weight:800;letter-spacing:.03em;text-decoration:none;
  border:1px solid transparent;
}
/* Only a real, paid, matching booking earns the green badge. */
.tap-home-root .tap-review-card__badge.is-verified{
  color:color-mix(in srgb,var(--tap-ok) 70%,var(--tap-ink));background:color-mix(in srgb,var(--tap-ok) 10%,transparent);
  border-color:color-mix(in srgb,var(--tap-ok) 26%,transparent);
}
.tap-home-root .tap-review-card__badge.is-google{
  color:var(--tap-ink);background:color-mix(in srgb,var(--tap-ink) 6%,transparent);
  border-color:color-mix(in srgb,var(--tap-ink) 16%,transparent);
}
.tap-home-root .tap-review-card__badge.is-plain{
  color:var(--tap-muted);background:transparent;
  border-color:color-mix(in srgb,var(--tap-ink) 12%,transparent);
}

/* --- Glimpse cards ------------------------------------------------------- */
.tap-home-root .tap-glimpse-rail{grid-auto-columns:calc((100% - 32px)/3)}
.tap-home-root .tap-glimpse-card{
  position:relative;margin:0;display:flex;flex-direction:column;
  border-radius:var(--tap-ui-radius,20px);overflow:hidden;
  border:1px solid var(--tap-line);background:var(--tap-card);
  box-shadow:0 12px 30px color-mix(in srgb,var(--tap-ink) 9%,transparent);
}
.tap-home-root .tap-glimpse-card__media{
  display:block;position:relative;aspect-ratio:4/5;
  background:color-mix(in srgb,var(--tap-cta) 8%,var(--tap-card));
}
.tap-home-root .tap-glimpse-card__media img,
.tap-home-root .tap-glimpse-card__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* Media leads; the words sit under it and stay quiet. */
.tap-home-root .tap-glimpse-card__cap{
  display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;
}
.tap-home-root .tap-glimpse-card__title{
  font-family:var(--tap-font-heading,inherit);font-size:15px;font-weight:650;
  line-height:1.25;color:var(--tap-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.tap-home-root .tap-glimpse-card__where{
  font-size:12px;line-height:1.4;color:var(--tap-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- Sacred network strip ------------------------------------------------ */
.tap-home-root .tap-home-sacred{padding-block:clamp(18px,2.4vw,30px)}
.tap-home-root .tap-home-why + .tap-home-sacred{padding-block-start:0}
.tap-home-root .tap-sacred-strip{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,4vw,56px);flex-wrap:nowrap;
  padding:clamp(16px,2.4vw,26px) clamp(14px,3vw,32px);
  border:1px solid color-mix(in srgb,var(--tap-cta) 24%,var(--tap-line));
  border-radius:var(--tap-ui-radius,20px);
  background:color-mix(in srgb,var(--tap-cta) 5%,var(--tap-card));
}
.tap-home-root .tap-sacred-metric{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;min-width:0;flex:1 1 0;
}
/* The number carries the weight; the label stays small and secondary. */
.tap-home-root .tap-sacred-metric__value{
  font-family:var(--tap-font-heading,inherit);
  font-size:clamp(24px,4.6vw,40px);line-height:1.05;font-weight:700;
  letter-spacing:-.02em;color:var(--tap-ink);
  font-variant-numeric:tabular-nums;
}
.tap-home-root .tap-sacred-metric__label{
  font-size:clamp(11px,1.4vw,13px);line-height:1.3;color:var(--tap-muted);
  letter-spacing:.02em;
}
/* Separators are drawn, not typed, so they never wrap onto their own line. */
.tap-home-root .tap-sacred-metric + .tap-sacred-metric{
  border-left:1px solid color-mix(in srgb,var(--tap-ink) 12%,transparent);
}

@media (min-width:768px) and (max-width:1023.98px){
  .tap-home-root .tap-review-rail{grid-auto-columns:calc((100% - 16px)/2)}
  .tap-home-root .tap-glimpse-rail{grid-auto-columns:calc((100% - 16px)/2)}
}
@media (max-width:767.98px){
  /* One full card plus a slice of the next: the peek is what tells a thumb
     there is more to the right. */
  .tap-home-root .tap-review-rail{grid-auto-columns:min(84%,320px);gap:12px}
  .tap-home-root .tap-glimpse-rail{grid-auto-columns:min(72%,260px);gap:12px}
  .tap-home-root .tap-review-card{padding:16px}
  .tap-home-root .tap-review-card__text{-webkit-line-clamp:6}
  .tap-home-root .tap-glimpse-card__media{aspect-ratio:3/4}
  .tap-home-root .tap-sacred-strip{gap:8px;padding:14px 10px}
  .tap-home-root .tap-sacred-metric + .tap-sacred-metric{padding-left:8px}
}
@media (max-width:360px){
  .tap-home-root .tap-sacred-metric__value{font-size:20px}
  .tap-home-root .tap-sacred-metric__label{font-size:10px}
}

/* ==========================================================================
   v8.6.26 — Main vertical pages (Pooja, Chadhava, Astrology, Personal Pooja,
   TA Store).

   These pages exist to show a whole catalogue, so the listing is a wrapping
   GRID, never a rail: a rail hides everything past the third card, which is the
   opposite of what this page is for. The homepage keeps its rails — there a
   shelf is a teaser with a "See all" beside it.

   The grid column count is the operator's, carried on the section as
   --tap-vertical-cols, and every card is the same TAP_Card the rest of the
   product draws, so nothing here is a second card system.
   ========================================================================== */
.tap-home-root.tap-vertical-banner{padding-block:clamp(14px,2vw,26px) 0}
.tap-home-root.tap-vertical-banner .tap-promo{margin:0}
.tap-home-root.tap-vertical-banner .tap-promo__viewport{border-radius:var(--tap-ui-radius,22px);overflow:hidden}

.tap-home-root.tap-vertical-group{padding-block:clamp(18px,2.4vw,32px)}
.tap-home-root .tap-vertical-group__desc{
  margin:6px 0 0;max-width:62ch;
  color:var(--tap-muted);font-size:14px;line-height:1.6;
}

/* Wrapping grid, not a rail. minmax(0,1fr) so a long title cannot widen a
   column and push the row out of the container. */
.tap-home-root .tap-vertical-grid{
  display:grid !important;
  grid-auto-flow:row !important;
  grid-template-columns:repeat(var(--tap-vertical-cols,4),minmax(0,1fr)) !important;
  grid-auto-columns:auto !important;
  gap:clamp(14px,1.6vw,22px);
  justify-content:start;
  overflow:visible !important;
  padding:0;
}
.tap-home-root .tap-vertical-grid > *{
  width:auto !important;
  min-width:0;
  inline-size:auto !important;
  scroll-snap-align:none;
}

/* Auto-fill keeps one or two records at normal card width on large screens;
   the mobile list becomes one generous, readable column instead of two
   cramped mini-cards. */
@media (max-width:767.98px){
  .tap-home-root .tap-vertical-grid{grid-template-columns:1fr !important}
  .tap-home-root.tap-vertical-group{padding-block:16px}
}
@media (min-width:768px) and (max-width:1023.98px){
  .tap-home-root .tap-vertical-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* The vertical page reuses TAP_Card, but sets a catalogue-specific density. */
.tap-home-root .tap-vertical-grid .tap-fcard{
  display:flex;flex-direction:column;height:100%;padding:0!important;
  border:1px solid var(--tap-line)!important;border-radius:18px!important;
  background:var(--tap-card)!important;overflow:hidden;
  box-shadow:0 8px 24px color-mix(in srgb,var(--tap-ink) 7%,transparent)!important;
}
.tap-home-root .tap-vertical-grid .tap-fcard-art{
  display:block;height:auto!important;aspect-ratio:16/10!important;
  background-size:cover;background-position:center;
}
.tap-home-root .tap-vertical-grid .tap-fcard-body{
  display:flex;flex:1 1 auto;flex-direction:column;gap:7px;
  min-height:150px!important;padding:15px 15px 10px!important;color:inherit;
}
.tap-home-root .tap-vertical-grid .tap-fcard-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:2.55em;font-size:clamp(17px,1.55vw,21px);line-height:1.25;
}
.tap-home-root .tap-vertical-grid .tap-fcard-summary{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  color:var(--tap-muted);font-size:13px;line-height:1.45;
}
.tap-home-root .tap-vertical-grid .tap-fcard-temple,
.tap-home-root .tap-vertical-grid .tap-fcard-facts{font-size:12px;color:var(--tap-muted)}
.tap-home-root .tap-vertical-grid .tap-fcard-foot{margin-top:auto;padding-top:4px}
.tap-home-root .tap-vertical-grid .tap-fcard-heart{
  inset-block-start:12px!important;inset-inline-end:12px!important;
  width:40px!important;height:40px!important;background:var(--tap-card)!important;
  border:1px solid color-mix(in srgb,var(--tap-ink) 10%,transparent)!important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--tap-ink) 14%,transparent)!important;
}
.tap-home-root .tap-vertical-grid .tap-fcard-cta{
  min-height:44px;margin:0 15px 15px!important;border-radius:12px!important;
  background:var(--tap-cta)!important;color:var(--tap-cta-text)!important;
  font-size:13px;font-weight:800;
}
@media (hover:hover) and (pointer:fine){
  .tap-home-root .tap-vertical-grid .tap-fcard:hover{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--tap-primary) 34%,var(--tap-line))!important;
    box-shadow:0 14px 34px color-mix(in srgb,var(--tap-primary) 12%,transparent)!important;
  }
}

/* Store categories: the heading band is ours, the cards under it are drawn by
   [divsa_samagri]. Tighten the gap the storefront leaves above its own grid so
   the heading reads as belonging to the products beneath it. */
.tap-vertical-store-group{padding-block:clamp(18px,2.4vw,30px) 0}
.tap-vertical-store-group .tap-sec-title{font-size:clamp(20px,2.4vw,30px);line-height:1.15}
/* The storefront leaves its own top padding for a heading it is not drawing
   here, which doubled the gap between our heading and its products. */
.tap-vertical-store-cards .tap-sam{padding-block-start:8px}
.tap-vertical-store-cards + .tap-vertical-store-group{margin-block-start:clamp(6px,1vw,14px)}

/* Vertical page heading. A main page needs an h1; these had none at all. */
.tap-home-root.tap-vertical-head{padding-block:clamp(20px,2.6vw,34px) 0}
.tap-home-root .tap-vertical-head__eyebrow{
  margin:0 0 8px;color:var(--tap-primary);font-size:12px;font-weight:800;
  line-height:1.2;letter-spacing:.12em;text-transform:uppercase;
}
.tap-home-root .tap-vertical-head__title{
  margin:0;color:var(--tap-ink);
  font-family:var(--tap-font-heading,inherit);
  font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.025em;
}
.tap-home-root .tap-vertical-head__intro{
  margin:10px 0 0;max-width:64ch;
  color:var(--tap-muted);font-size:clamp(14px,1.3vw,16px);line-height:1.65;
}
.tap-home-root.tap-vertical-empty{padding-block:clamp(24px,5vw,64px)}
.tap-home-root .tap-vertical-empty__card{
  max-width:720px;padding:clamp(22px,4vw,38px);border:1px solid var(--tap-line);
  border-radius:18px;background:color-mix(in srgb,var(--tap-primary) 4%,var(--tap-card));
  text-align:center;margin-inline:auto;
}
.tap-home-root .tap-vertical-empty__card h2{
  margin:0;font-family:var(--tap-font-heading);font-size:clamp(22px,3vw,30px);color:var(--tap-ink);
}
.tap-home-root .tap-vertical-empty__card p{margin:8px 0 0;color:var(--tap-muted);line-height:1.6}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE CORRECTIONS (audited 2026-08-27)
   Mobile/tablet tuning that already existed earlier in this file but lost to
   later rules of identical specificity. Appended so it actually applies.
   ══════════════════════════════════════════════════════════════════════════ */

/* The catalogue rail pinned a 400px card, so a 360px phone showed one card
   wider than the screen with its price/CTA row against the edge and no next
   card peeking. The min(80vw,…) intent was written at ~:750 and never applied. */
@media (max-width:1023.98px){
  .tap-home-root .tap-home-catalogue .tap-fcard-rail{grid-auto-columns:min(80vw,400px)}
  .tap-home-root .tap-home-catalogue .tap-fcard{inline-size:min(80vw,400px);block-size:min(63vw,300px)}
}
@media (max-width:767.98px){
  .tap-home-root .tap-home-catalogue .tap-fcard-rail{grid-auto-columns:min(82vw,340px)}
  .tap-home-root .tap-home-catalogue .tap-fcard{inline-size:min(82vw,340px);block-size:min(66vw,260px)}
}

/* Hero and section headings: the phone ramps were authored, then overridden by
   the later top-level clamp, so phones fell back to the desktop floor. */
@media (max-width:767.98px){
  .tap-home-root .tap-hero-compact-title{font-size:clamp(34px,11vw,52px)}
  .tap-home-root .tap-sec-title{font-size:clamp(26px,7.4vw,36px)}
}